/* ═══════════ TEST · design tokens ═══════════
   sky pool blue + flamingo pink, sticker-cartoon style,
   broadcast-test mono accents (SMPTE-ish color bars = the robot's wires) */
:root{
  --sky:#33ABEA;
  --sky-deep:#1286C9;
  --water:#0E5FA8;
  --ink:#131313;
  --navy:#0B2540;
  --pink:#FF6FA6;
  --pink-deep:#E84D8A;
  --yellow:#FFD023;
  --royal:#2B49D8;
  --paper:#FFFFFF;
  --bar-red:#E53935; --bar-yel:#FFD023; --bar-grn:#43A047; --bar-blu:#1E88E5;
  --display:'Titan One', system-ui, sans-serif;
  --body:'Nunito', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;
  --border:3px solid var(--ink);
  --shadow:7px 7px 0 rgba(19,19,19,.9);
  --radius:20px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:72px}
body{
  font-family:var(--body);
  font-weight:700;
  color:var(--ink);
  background:var(--sky);
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
.mono{font-family:var(--mono)}
button{font-family:inherit;cursor:pointer}

::selection{background:var(--pink);color:var(--paper)}

/* ═══════════ shared bits ═══════════ */
.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:.02em;
  padding:.8rem 1.5rem;
  border:var(--border);
  border-radius:999px;
  text-decoration:none;
  color:var(--ink);
  background:var(--paper);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--pink{background:var(--pink);color:var(--paper);-webkit-text-stroke:.5px var(--ink)}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:4px 4px 0 rgba(19,19,19,.55)}
.btn--ghost:hover{box-shadow:6px 6px 0 rgba(19,19,19,.55)}

.colorbars{
  height:14px;
  background:linear-gradient(90deg,
    var(--bar-red) 0 14.3%, var(--yellow) 0 28.6%, var(--bar-grn) 0 42.9%,
    var(--sky-deep) 0 57.2%, var(--royal) 0 71.5%, var(--pink) 0 85.8%, var(--navy) 0 100%);
  border-top:var(--border);
  border-bottom:var(--border);
}
.colorbars--thin{height:8px;border-width:2px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-in{opacity:1;transform:none}

/* ═══════════ nav ═══════════ */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.65rem clamp(1rem,4vw,2.5rem);
  background:var(--paper);
  border-bottom:var(--border);
}
.nav__brand{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-size:1.35rem;color:var(--ink);text-decoration:none;
}
.nav__face{width:38px;height:38px;border:2.5px solid var(--ink);border-radius:10px;background:var(--sky)}
.nav__links{display:flex;gap:1.4rem}
.nav__links a{
  color:var(--ink);text-decoration:none;font-weight:900;font-size:.95rem;
  border-bottom:3px solid transparent;
}
.nav__links a:hover{border-bottom-color:var(--pink)}
.nav__cta{font-size:.9rem;padding:.55rem 1.1rem}

/* ═══════════ hero ═══════════ */
.hero{
  position:relative;
  background:var(--sky) url('assets/hero.jpg') no-repeat right center/cover;
  border-bottom:0;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(14,95,168,.92) 0%, rgba(14,95,168,.72) 32%,
    rgba(18,134,201,.28) 55%, rgba(18,134,201,0) 72%);
  pointer-events:none;
}
.hero__inner{
  position:relative;
  max-width:1200px;margin:0 auto;
  padding:clamp(3rem,8vw,6.5rem) clamp(1rem,4vw,2.5rem) clamp(3.5rem,8vw,6rem);
}
.hero__copy{max-width:34rem}
.hero__eyebrow{
  display:inline-block;
  font-size:.8rem;letter-spacing:.06em;
  color:var(--paper);
  background:var(--navy);
  border:2px solid var(--ink);
  border-radius:6px;
  padding:.3rem .6rem;
  margin-bottom:1.1rem;
}
.hero__title{
  font-family:var(--display);
  font-size:clamp(3rem,8.5vw,6.2rem);
  line-height:.94;
  color:var(--paper);
  -webkit-text-stroke:2.5px var(--ink);
  paint-order:stroke fill;
  text-shadow:6px 6px 0 rgba(19,19,19,.85);
  margin-bottom:1.2rem;
}
.hero__sub{
  font-size:1.12rem;font-weight:800;line-height:1.55;
  color:var(--paper);
  text-shadow:0 2px 0 rgba(19,19,19,.6);
  margin-bottom:1rem;
}
.hero__sub strong{color:var(--yellow)}
.hero__status{
  font-size:.78rem;color:var(--paper);
  background:rgba(11,37,64,.85);
  border:2px solid var(--ink);border-radius:8px;
  display:inline-block;padding:.4rem .7rem;
  margin-bottom:1.4rem;
}
.hero__status i{font-style:normal;animation:blink 1s steps(1) infinite;margin-left:.2rem}
@keyframes blink{50%{opacity:0}}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.2rem}
.ca{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--paper);
  border:var(--border);border-radius:12px;
  padding:.55rem .8rem;
  font-size:.85rem;font-weight:700;
  box-shadow:4px 4px 0 rgba(19,19,19,.8);
}
.ca:hover{transform:translate(-1px,-1px)}
.ca__tag{
  background:var(--royal);color:var(--paper);
  border:2px solid var(--ink);border-radius:6px;
  padding:.1rem .45rem;font-weight:700;
}

/* ═══════════ ticker ═══════════ */
.ticker{
  background:var(--navy);
  border-bottom:var(--border);
  overflow:hidden;
  padding:.55rem 0;
}
.ticker__track{
  display:inline-flex;gap:3rem;white-space:nowrap;
  color:var(--yellow);font-size:.85rem;letter-spacing:.05em;
  animation:tick 36s linear infinite;
}
.ticker__track span::after{content:"  ▓▓";color:var(--pink)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ═══════════ pools ═══════════ */
.pools{padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.5rem)}
.pools__card{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--paper);
  border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.pools__media{position:relative}
.pools__media img{width:100%;height:100%;object-fit:cover}
.pools__badge{
  position:absolute;top:1rem;left:1rem;
  font-family:var(--display);font-size:.9rem;
  background:var(--pink);color:var(--paper);
  border:2.5px solid var(--ink);border-radius:999px;
  padding:.35rem .85rem;
  transform:rotate(-4deg);
  box-shadow:3px 3px 0 var(--ink);
}
.pools__copy{padding:clamp(1.5rem,3.5vw,2.8rem);display:flex;flex-direction:column;gap:1rem;justify-content:center}
.pools__eyebrow{font-size:.78rem;letter-spacing:.08em;color:var(--pink-deep)}
.pools__title{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.02}
.pools__copy>p{font-size:1.05rem;line-height:1.6;font-weight:700}
.pools__list{list-style:none;display:flex;flex-direction:column;gap:.45rem;font-weight:800}
.pools__list i{font-style:normal;margin-right:.45rem}
.pools__socials{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
.chip{
  font-family:var(--mono);font-size:.8rem;font-weight:700;
  background:var(--sky);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:999px;
  padding:.45rem .95rem;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease;
}
.chip:hover{transform:translate(-1px,-1px)}

/* ═══════════ coming soon ═══════════ */
.soon{
  position:relative;
  background:#161616;
  border-top:var(--border);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:min(88vh,760px);
}
.soon__eyes{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 32%;
  opacity:.9;
}
.soon__copy{
  position:relative;text-align:center;
  padding:clamp(3rem,8vw,6rem) 1.5rem;
}
.soon__eyebrow{
  display:inline-block;font-size:.8rem;letter-spacing:.08em;
  color:var(--yellow);background:rgba(19,19,19,.85);
  border:2px solid var(--ink);border-radius:6px;
  padding:.3rem .6rem;margin-bottom:1.1rem;
}
.soon__title{
  font-family:var(--display);
  font-size:clamp(3rem,9vw,6.5rem);
  color:var(--paper);
  -webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;
  text-shadow:7px 7px 0 rgba(19,19,19,.9);
  margin-bottom:1rem;
}
.soon__sub{
  color:var(--paper);font-size:.85rem;
  background:rgba(19,19,19,.75);
  display:inline-block;border-radius:8px;
  padding:.45rem .8rem;
}

/* ═══════════ footer ═══════════ */
.footer{background:var(--navy)}
.footer__row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;
  padding:1.2rem clamp(1rem,4vw,2.5rem);
  color:var(--paper);font-size:.85rem;
}
.footer__row .mono{color:var(--sky);font-size:.75rem}
.footer__ca{
  background:transparent;color:var(--yellow);
  border:2px solid var(--yellow);border-radius:8px;
  padding:.35rem .7rem;font-size:.75rem;
}
.footer__ca:hover{background:var(--yellow);color:var(--navy)}

/* ═══════════ emergency overlay ═══════════ */
.ebs{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
}
.ebs[hidden]{display:none}
.ebs__bars{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    #fff 0 14.3%, var(--yellow) 0 28.6%, #29B6F6 0 42.9%,
    var(--bar-grn) 0 57.2%, var(--pink) 0 71.5%, var(--bar-red) 0 85.8%, var(--royal) 0 100%);
}
.ebs__text{
  position:relative;
  font-size:clamp(1.2rem,4vw,2.4rem);font-weight:700;
  background:var(--ink);color:var(--paper);
  padding:1rem 2rem;
  letter-spacing:.1em;
}

/* ═══════════ toast ═══════════ */
.toast{
  position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%) translateY(20px);
  z-index:150;
  background:var(--navy);color:var(--paper);
  border:var(--border);border-radius:12px;
  box-shadow:5px 5px 0 rgba(19,19,19,.8);
  padding:.75rem 1.2rem;font-size:.85rem;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
  max-width:min(92vw,32rem);text-align:center;
}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══════════ focus & responsive ═══════════ */
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

@media (max-width:960px){
  .pools__card{grid-template-columns:1fr}
  .pools__media img{max-height:380px}
}
@media (max-width:640px){
  .nav__links{display:none}
  .hero{background-position:72% center}
  .soon{min-height:70vh}
  .hero__copy{
    background:rgba(14,95,168,.55);
    border:2.5px solid var(--ink);border-radius:16px;
    padding:1.2rem;backdrop-filter:blur(2px);
  }
  .footer__row{justify-content:center;text-align:center}
}