/* ============================================================
   Brain QR Code — dark, cinematic, one idea per screen
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#05070c;
  --bg-1:#080b12;
  --bg-2:#0c111a;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.18);

  --ink:#f4f7fa;
  --ink-2:#a7b3c2;
  --ink-3:#6d7a8b;

  --a1:#2ee6c5;          /* teal — the signal */
  --a2:#38bdf8;          /* blue — the travel */
  --a3:#a78bfa;          /* violet — the brain */
  --grad:linear-gradient(120deg,var(--a1) 0%,var(--a2) 52%,var(--a3) 100%);

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --sh:0 2px 8px rgba(0,0,0,.5), 0 20px 60px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,.9,.28,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --head-h:66px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--ink);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.1;font-weight:800;letter-spacing:-.035em}
h1{font-size:clamp(2.6rem,8vw,6rem);font-weight:900;letter-spacing:-.05em}
h2{font-size:clamp(1.8rem,4vw,3rem)}
h3{font-size:1.32rem;letter-spacing:-.025em}
h4{font-size:1.02rem;letter-spacing:-.015em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(46,230,197,.25)}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.narrow{max-width:820px;margin:0 auto;padding:0 22px}
.tiny{font-size:.82rem;color:var(--ink-3);line-height:1.55}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;background:var(--bg-2);padding:10px 16px;z-index:300;border-radius:10px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.dim{color:var(--ink-3)}

.kicker{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--a1);margin-bottom:14px;
}

/* ---------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:14px;border:0;cursor:pointer;
  font:inherit;font-size:.95rem;font-weight:700;letter-spacing:-.01em;
  background:var(--grad);color:#04121a;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
  box-shadow:0 6px 26px rgba(46,230,197,.22);white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(46,230,197,.34)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--a1);box-shadow:none}
.btn-sm{padding:9px 16px;font-size:.85rem;border-radius:11px}
.btn-lg{padding:17px 34px;font-size:1.02rem;border-radius:16px}
.btn-block{width:100%}
.spinner{width:15px;height:15px;border:2px solid rgba(0,0,0,.25);border-top-color:#04121a;
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------- the mark */
.logo{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em;font-size:1.04rem}
.logo-mark{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  width:26px;height:26px;flex:none;padding:2px;border-radius:7px;background:rgba(255,255,255,.06);
}
.logo-mark span{background:var(--a1);border-radius:1px;opacity:.9}
.logo-mark span:nth-child(2),.logo-mark span:nth-child(4),
.logo-mark span:nth-child(6),.logo-mark span:nth-child(8){background:var(--a3);opacity:.55}
.logo-mark span:nth-child(5){background:var(--a2)}

/* ---------------------------------------------------------- header */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:150;height:var(--head-h);display:flex;align-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(5,7,12,.78);backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);border-bottom-color:var(--line);
}
.hdr-in{display:flex;align-items:center;gap:16px;width:100%}
.nav{display:flex;gap:2px;margin-left:26px}
.nav a{padding:9px 14px;border-radius:10px;color:var(--ink-2);font-size:.92rem;font-weight:500;
  transition:.18s var(--ease)}
.nav a:hover{color:var(--ink);background:var(--panel-2)}
.hdr-end{margin-left:auto;display:flex;align-items:center;gap:10px}
.ref-badge{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);font-size:.8rem;color:var(--ink-2);
}
.ref-badge b{color:var(--ink);font-weight:600}
.ref-dot{width:6px;height:6px;border-radius:50%;background:var(--a1);flex:none;
  box-shadow:0 0 8px var(--a1);animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}

.burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);cursor:pointer;padding:0;
}
.burger span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .26s var(--ease), opacity .16s linear}
.burger span+span{margin-top:5px}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Parked off-screen to the right when closed. visibility:hidden goes with it
   so the links inside are not tab-stops for a menu nobody has opened, and so
   the parked panel does not widen the page — the delay keeps it visible for
   the length of the slide-out. */
.drawer{
  position:fixed;inset:var(--head-h) 0 0;z-index:140;background:var(--bg);display:none;
  transform:translateX(100%);visibility:hidden;
  transition:transform .28s var(--ease), visibility 0s linear .28s;
  padding:18px 16px calc(30px + env(safe-area-inset-bottom));overflow-y:auto;
}
.drawer.open{transform:none;visibility:visible;transition:transform .28s var(--ease), visibility 0s}
.drawer a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 14px;border-radius:13px;font-size:1.05rem;font-weight:600}
.drawer a:active{background:var(--panel-2)}
.drawer a span{color:var(--ink-3);font-size:.9rem;font-weight:400}
.drawer .btn{margin-top:8px;width:100%;color:#04121a}
.drawer-sep{height:1px;background:var(--line);margin:14px 6px}
.drawer-note{display:flex;gap:10px;align-items:center;margin:16px 6px 0;font-size:.85rem;color:var(--ink-2)}

/* ---------------------------------------------------------- hero */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--head-h) + 40px) 0 70px;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0}
/* The film already contains a patch, and a sharp one sitting beside the drawn
   scanner reads as two QR codes competing for the same job. Blurred, it stops
   being an object and becomes what it should have been all along: light and
   skin behind the words. The slight scale hides the soft edge blur leaves. */
.hero-video{
  width:100%;height:100%;object-fit:cover;object-position:62% 42%;
  opacity:.55;filter:blur(9px) saturate(1.2);transform:scale(1.12);
}
.hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(880px 500px at 50% 46%, rgba(5,7,12,.86), rgba(5,7,12,.55) 60%, rgba(5,7,12,.35) 100%),
    linear-gradient(180deg, rgba(5,7,12,.86) 0%, rgba(5,7,12,.20) 34%, rgba(5,7,12,.55) 68%, var(--bg) 100%);
}
.hero-in{position:relative;z-index:2;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:8px 17px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);font-size:.74rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:26px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--a1);box-shadow:0 0 8px var(--a1)}

.hero-h1{margin-bottom:.32em}
.hero-h1 .l1,.hero-h1 .l2{display:block}
.hero-lede{max-width:38ch;margin:0 auto 34px;font-size:clamp(1.02rem,2.2vw,1.28rem);color:var(--ink-2)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero-foot{margin-top:26px;font-size:.8rem;letter-spacing:.06em;color:var(--ink-3)}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  width:24px;height:38px;border:1px solid var(--line-2);border-radius:14px}
.scroll-hint span{position:absolute;left:50%;top:8px;width:3px;height:7px;margin-left:-1.5px;
  border-radius:2px;background:var(--a1);animation:drop 1.9s var(--ease) infinite}
@keyframes drop{0%{opacity:0;transform:translateY(0)}30%{opacity:1}
  70%{opacity:1;transform:translateY(13px)}100%{opacity:0;transform:translateY(15px)}}

/* ---------------------------------------------------------- the scanner
   pattern → skin → signal → brain, drawn in the page so it is crisp at any
   size and weighs nothing. Runs on a loop; the beam is the payoff. */
.scanner{
  display:grid;margin-top:6px;grid-template-columns:auto auto auto;align-items:center;justify-content:center;
  gap:clamp(14px,4vw,42px);margin:12px auto 0;
}
.scan-grid{
  position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
  width:clamp(104px,19vw,150px);aspect-ratio:1;padding:8px;border-radius:14px;
  background:linear-gradient(160deg,#e9eef4,#c3ccd8);
  box-shadow:0 10px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7);
  overflow:hidden;
}
.scan-grid i{
  background:#0f1620;border-radius:1px;opacity:.14;
  animation:cell 6s var(--ease) infinite;animation-delay:calc(var(--d) * 22ms);
}
@keyframes cell{0%,55%{opacity:.14}62%{opacity:.92}100%{opacity:.14}}
.scan-eye{position:absolute;width:22%;aspect-ratio:1;border:3px solid #0f1620;border-radius:3px}
.scan-eye.tl{top:9%;left:9%} .scan-eye.tr{top:9%;right:9%} .scan-eye.bl{bottom:9%;left:9%}
.scan-line{
  position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,var(--a1),transparent);
  box-shadow:0 0 14px var(--a1);animation:sweep 6s var(--ease) infinite;
}
@keyframes sweep{0%{top:-4%;opacity:0}8%{opacity:1}52%{top:100%;opacity:1}58%{opacity:0}100%{opacity:0}}

.scan-beam{position:relative;width:clamp(56px,14vw,150px);height:60px;display:grid;align-content:center;gap:7px}
/* A dim rail under the beam so the two halves read as connected even in the
   still moment between pulses — and for anyone who has motion turned off. */
.scan-beam::before{
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,rgba(46,230,197,.05),rgba(56,189,248,.28),rgba(167,139,250,.05));
}
.scan-beam span{
  display:block;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--a1),var(--a3));
  transform-origin:left;transform:scaleX(0);opacity:0;
  animation:beam 6s var(--ease) infinite;
}
.scan-beam span:nth-child(1){animation-delay:.1s;width:100%}
.scan-beam span:nth-child(2){animation-delay:.24s;width:82%;margin-left:9%}
.scan-beam span:nth-child(3){animation-delay:.38s;width:64%;margin-left:18%}
@keyframes beam{
  0%,56%{transform:scaleX(0);opacity:0}
  64%{transform:scaleX(1);opacity:1}
  84%{transform:scaleX(1);opacity:1}
  92%{transform:scaleX(1);opacity:0}
  100%{transform:scaleX(0);opacity:0}
}

.scan-brain{position:relative;width:clamp(112px,23vw,190px)}
.scan-brain svg{width:100%;height:auto;overflow:visible}
.scan-brain .bp{
  fill:none;stroke:#5d6b7d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  animation:brainlit 6s var(--ease) infinite;
}
.scan-brain .bp2{stroke-width:1.4;opacity:.55}
@keyframes brainlit{
  0%,60%{stroke:#5d6b7d;filter:none}
  72%{stroke:var(--a1);filter:drop-shadow(0 0 8px rgba(46,230,197,.9))}
  88%{stroke:var(--a3);filter:drop-shadow(0 0 12px rgba(167,139,250,.7))}
  100%{stroke:#5d6b7d;filter:none}
}
.brain-pulse{
  position:absolute;inset:-14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(46,230,197,.30), transparent 66%);
  opacity:0;animation:bpulse 6s var(--ease) infinite;
}
@keyframes bpulse{0%,62%{opacity:0;transform:scale(.7)}
  76%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}

/* ---------------------------------------------------------- sections */
.sec{padding:clamp(70px,11vw,140px) 0;position:relative}
.sec-head{max-width:70ch;margin-bottom:clamp(34px,5vw,60px)}
.sec-head p{color:var(--ink-2);font-size:1.06rem;margin-top:.4em}
.sec-hook{padding:clamp(80px,13vw,170px) 0;text-align:center}
.big-line{
  font-size:clamp(1.5rem,4.2vw,2.7rem);font-weight:800;letter-spacing:-.04em;line-height:1.22;
  margin-bottom:.7em;
}
.big-line .dim{display:block;font-weight:600}

/* ---------------------------------------------------------- the story */
.story{display:flex;flex-direction:column;gap:clamp(28px,5vw,54px)}
.beat{
  display:grid;grid-template-columns:64px 1fr 200px;gap:clamp(18px,3vw,40px);align-items:center;
  padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.beat.in{opacity:1;transform:none}
.beat-n{
  font-size:1.05rem;font-weight:900;letter-spacing:.06em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.beat-body h3{margin-bottom:.35em}
.beat-body p{color:var(--ink-2);margin:0;font-size:1rem}
.beat-art{height:132px;display:grid;place-items:center;position:relative}

.art-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;width:104px}
.art-grid i{aspect-ratio:1;background:var(--a1);border-radius:1px;opacity:.15;
  animation:cellb 4.5s var(--ease) infinite;animation-delay:calc(var(--d) * 40ms)}
@keyframes cellb{0%,70%{opacity:.15}80%{opacity:.95}100%{opacity:.15}}

.art-skin{position:relative;width:140px;height:110px;display:grid;place-items:center}
.art-patch{width:44px;height:44px;border-radius:8px;background:linear-gradient(160deg,#e9eef4,#b9c4d1);
  box-shadow:0 6px 18px rgba(0,0,0,.55)}
.art-skin em{
  position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;
  border:1.5px solid var(--a1);background:none;
  animation:rip 3.4s var(--ease) infinite;animation-delay:calc(var(--k) * 240ms);
}
@keyframes rip{
  0%{transform:translate(-50%,-50%) scale(.6);opacity:0}
  18%{opacity:.75}
  100%{transform:translate(-50%,-50%) scale(7);opacity:0}
}

.art-nerve{width:150px;height:110px;position:relative;overflow:hidden}
.art-nerve span{
  position:absolute;left:-30%;width:130%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--a1),var(--a3),transparent);
  top:calc(14% + var(--k) * 18%);opacity:.25;
  animation:travel 2.6s linear infinite;animation-delay:calc(var(--k) * 180ms);
}
@keyframes travel{0%{transform:translateX(-40%);opacity:0}
  25%{opacity:1}75%{opacity:1}100%{transform:translateX(40%);opacity:0}}

.art-day{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:180px}
.art-day span{
  font-size:.74rem;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-2);
  animation:lightup 5s var(--ease) infinite;animation-delay:calc(var(--k) * 400ms);
}
@keyframes lightup{0%,70%{border-color:var(--line);color:var(--ink-2)}
  80%{border-color:var(--a1);color:var(--a1)}100%{border-color:var(--line);color:var(--ink-2)}}

/* ---------------------------------------------------------- the picture */
.sec-shot{padding:0}
.sec-shot figure{margin:0;position:relative}
.sec-shot img{width:100%;max-height:74vh;object-fit:cover}
.sec-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(26px,6vw,64px) 22px;
  background:linear-gradient(180deg,transparent,rgba(5,7,12,.94) 62%);
}
.sec-shot figcaption p{max-width:52ch;margin:0 auto;text-align:center;font-size:clamp(1rem,2.2vw,1.24rem);
  font-weight:600;color:var(--ink)}
.sec-shot .kicker{text-align:center}

/* ---------------------------------------------------------- technology */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}
.tech-card{
  padding:26px 24px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
}
.tech-card h4{color:var(--a1);margin-bottom:.5em;letter-spacing:-.02em}
.tech-card p{color:var(--ink-2);font-size:.95rem;margin:0}
.tech-note{
  padding:28px 26px;border-radius:var(--r);border:1px solid var(--line);
  background:rgba(46,230,197,.05);
}
.tech-note h4{margin-bottom:.6em}
.tech-note p{color:var(--ink-2);font-size:.97rem}
.tech-note p:last-child{margin-bottom:0}
.tech-note a{color:var(--a1);font-weight:600;border-bottom:1px solid rgba(46,230,197,.35)}
.tech-note a:hover{border-bottom-color:var(--a1)}

/* ---------------------------------------------------------- watch */
.watch-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.watch-card{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  display:flex;flex-direction:column;
}
.watch-body{padding:24px}
.watch-body h3{margin-bottom:.35em}
.watch-body p{color:var(--ink-2);font-size:.95rem}

/* the click-to-play player from the shared library */
.player{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer;overflow:hidden}
.player img.poster{width:100%;height:100%;object-fit:cover;opacity:.82;transition:.4s var(--ease)}
.player:hover img.poster{opacity:1;transform:scale(1.03)}
.player video,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  background:var(--grad);box-shadow:0 8px 30px rgba(46,230,197,.4);transition:.24s var(--ease);
}
.player .play span{position:absolute;left:-9999px}
.player .play::before{
  content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #04121a;
}
.player:hover .play{transform:translate(-50%,-50%) scale(1.09)}
.player.playing .poster,.player.playing .play,.player.playing .vlabel{display:none}
.player .vlabel{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
  display:flex;justify-content:space-between;gap:12px;align-items:flex-end;
  font-size:.86rem;font-weight:600;
}
.player .vlabel .dur{color:var(--ink-3);font-weight:500;flex:none}

/* ---------------------------------------------------------- hand-off */
.sec-handoff{padding-top:0}
.handoff{
  text-align:center;padding:clamp(34px,6vw,64px) clamp(24px,5vw,54px);
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(46,230,197,.12), transparent 70%),
    linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
}
.handoff h2{margin-bottom:.4em}
.handoff p{color:var(--ink-2);max-width:56ch;margin:0 auto 1.6em}
.handoff .tiny{margin-top:1.4em}

/* ---------------------------------------------------------- partner */
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.partner-card{
  display:flex;flex-direction:column;padding:30px 26px;border-radius:var(--r-lg);
  border:1px solid var(--line);position:relative;overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.partner-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.partner-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.partner-card:hover::before{transform:scaleX(1)}
.partner-card h3{margin-bottom:.4em}
.partner-card p{color:var(--ink-2);font-size:.95rem;flex:1}
.partner-card .btn{margin-top:16px}

/* ---------------------------------------------------------- footer */
.ftr{border-top:1px solid var(--line);padding:56px 0 30px;background:var(--bg-1)}
.ftr-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;margin-bottom:36px}
.ftr-blurb{color:var(--ink-3);font-size:.9rem;margin-top:14px;max-width:34ch}
.ftr h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);margin-bottom:1.2em}
.ftr li{margin-bottom:.6em}
.ftr li a{color:var(--ink-2);font-size:.92rem;cursor:pointer}
.ftr li a:hover{color:var(--a1)}
.legal{border-top:1px solid var(--line);padding-top:22px}
.legal p{font-size:.78rem;color:var(--ink-3);line-height:1.6;margin-bottom:.6em}

/* ---------------------------------------------------------- modals */
.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-back{position:absolute;inset:0;background:rgba(2,4,8,.78);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .2s var(--ease)}
.modal.open .modal-back{opacity:1}
.modal-box{
  position:relative;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 32px;box-shadow:var(--sh);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.modal.open .modal-box{opacity:1;transform:none}
.modal-box h2{font-size:1.6rem;margin-bottom:.3em}
.pm-lead{color:var(--ink-2);font-size:.96rem}
.modal-x{
  position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  font-size:1.25rem;line-height:1;cursor:pointer;transition:.18s var(--ease);
}
.modal-x:hover{color:var(--ink);border-color:var(--line-2)}
.modal-form{display:flex;flex-direction:column;gap:13px;margin-top:22px}
.modal-form .two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.modal-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.modal-form .opt{color:var(--ink-3);font-weight:400}
.modal-form input,.modal-form textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);color:var(--ink);font:inherit;font-size:.96rem;font-weight:400;
  outline:none;transition:.18s var(--ease);
}
.modal-form textarea{resize:vertical;min-height:84px}
.modal-form input:focus,.modal-form textarea:focus{
  border-color:var(--a1);box-shadow:0 0 0 3px rgba(46,230,197,.14);background:rgba(255,255,255,.06);
}
.modal-form .btn{margin-top:6px;width:100%}
.modal-msg{padding:11px 14px;border-radius:11px;font-size:.88rem}
.modal-msg.ok{background:rgba(46,230,197,.1);border:1px solid rgba(46,230,197,.32);color:var(--a1)}
.modal-msg.bad{background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.32);color:#fb7185}

/* ---------------------------------------------------------- the gate */
.gate-body{
  min-height:100svh;display:grid;place-items:center;padding:22px;
  background:
    radial-gradient(760px 420px at 50% 12%, rgba(46,230,197,.10), transparent 62%),
    radial-gradient(700px 460px at 50% 96%, rgba(167,139,250,.09), transparent 62%),
    var(--bg);
}
.gate{width:100%;display:grid;place-items:center}
.gate-box{
  width:100%;max-width:410px;text-align:center;padding:44px 34px;
  border:1px solid var(--line);border-radius:var(--r-xl);background:rgba(255,255,255,.03);
  box-shadow:var(--sh);backdrop-filter:blur(10px);
}
.gate-mark{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:46px;height:46px;
  margin:0 auto 24px;padding:3px;border-radius:11px;background:rgba(255,255,255,.06);
}
.gate-mark span{background:var(--a1);border-radius:2px;animation:cellb 3.6s var(--ease) infinite}
.gate-mark span:nth-child(2n){background:var(--a3);animation-delay:.2s}
.gate-mark span:nth-child(5){background:var(--a2);animation-delay:.4s}
.gate h1{font-size:clamp(1.7rem,5vw,2.2rem);margin-bottom:.35em}
.gate p{color:var(--ink-2);font-size:.96rem;margin-bottom:26px}
.gate input{
  width:100%;padding:16px 18px;border-radius:14px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);color:var(--ink);font:inherit;font-size:1.04rem;
  text-align:center;font-weight:600;outline:none;transition:.2s var(--ease);
}
.gate input+input{margin-top:10px}
.gate input::placeholder{font-weight:400;color:var(--ink-3)}
.gate input:focus{border-color:var(--a1);box-shadow:0 0 0 3px rgba(46,230,197,.14)}
.gate .btn{margin-top:14px;width:100%}
.gate .err{
  background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.34);color:#fb7185;
  padding:11px 15px;border-radius:11px;font-size:.88rem;margin-bottom:18px;
}

/* ---------------------------------------------------------- responsive */
@media (max-width:960px){
  .beat{grid-template-columns:48px 1fr;gap:16px}
  .beat-art{grid-column:1 / -1;height:104px}
  .tech-grid,.watch-grid,.partner-grid{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr 1fr;gap:26px}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .drawer{display:block}
  .hdr-end .btn-sm{display:none}
  .ref-badge{display:none}
}
@media (max-width:600px){
  :root{--head-h:58px}
  body{font-size:16px}
  .wrap,.narrow{padding:0 16px}
  .hero{min-height:92svh;padding-top:calc(var(--head-h) + 26px)}
  .scanner{gap:10px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .modal-box{padding:28px 20px;border-radius:var(--r)}
  .modal-form .two{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr}
  .beat{padding:20px 18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .beat{opacity:1;transform:none}
  .hero-video{display:none}
}