/* ═══════════════ Ultra Sized Double Cups · $USDC ═══════════════
   The Ultra Blue Broadcast — desktop-first                        */

:root{
  --royal:#1559ED;
  --navy:#061B54;
  --cyan:#17DFFF;
  --ice:#F3FAFF;
  --silver:#B9CDE5;
  --ink:#050C1B;

  --cond:'Barlow Condensed',Impact,sans-serif;
  --black:'Archivo Black','Arial Black',sans-serif;
  --body:'Archivo',system-ui,sans-serif;

  --chrome:linear-gradient(180deg,#fff 0%,var(--silver) 38%,#7E99BD 52%,#E8F2FF 68%,#9FB8D8 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--ice);
  font-family:var(--body);overflow-x:hidden;
}
img{display:block;max-width:100%}
section{position:relative;overflow:hidden}

/* ───────── buttons ───────── */
.btn{
  --bshadow:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--cond);font-weight:800;font-size:1.05rem;letter-spacing:.09em;
  padding:.72em 1.5em;border:2px solid transparent;cursor:pointer;
  text-decoration:none;overflow:hidden;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:5px 5px 0 var(--bshadow);
  transition:box-shadow .16s,transform .16s,border-color .16s,filter .16s;
}
.btn span{transition:transform .22s}
.btn::after{ /* reflection sweep */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 50%,transparent 62%);
  transform:translateX(-120%);
}
.btn:hover::after{transform:translateX(120%);transition:transform .6s ease}
.btn:hover span{transform:translateX(3px)}
.btn:hover{filter:brightness(1.07)}
.btn:active{box-shadow:1px 1px 0 var(--bshadow);transform:translate(4px,4px)}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

.btn-blue{background:var(--royal);color:#fff;border-color:#8FB6FF;--bshadow:#031139}
.btn-navy{background:var(--navy);color:var(--ice);border-color:#2E55A8;--bshadow:#01081F}
.btn-ice{background:var(--ice);color:var(--navy);border-color:#fff;--bshadow:#04123B}
.btn.big{font-size:1.6rem;padding:.78em 1.9em;box-shadow:8px 8px 0 var(--bshadow)}
.btn.big:active{box-shadow:2px 2px 0 var(--bshadow)}

/* ───────── topbar ───────── */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 30px;
  background:linear-gradient(180deg,rgba(5,12,27,.86),transparent);
  backdrop-filter:blur(3px);
}
.wordmark{
  display:flex;align-items:center;gap:10px;
  font-family:var(--cond);font-weight:800;font-size:1.08rem;letter-spacing:.11em;
  color:var(--ice);text-decoration:none;
}
.wordmark i{color:var(--cyan);font-style:normal}
.wm-ring{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--cyan);box-shadow:inset 0 0 0 3px var(--ink),0 0 0 2px rgba(23,223,255,.32);
}
.toplink{
  font-family:var(--cond);font-weight:800;letter-spacing:.11em;font-size:1rem;
  color:var(--ice);text-decoration:none;padding:.35em .9em;
  border:1.5px solid rgba(185,205,229,.45);
}
.toplink:hover{border-color:var(--cyan);color:var(--cyan)}

/* ═══════════════ HERO ═══════════════ */
.hero{
  min-height:100vh;min-height:100svh;
  display:grid;grid-template-columns:minmax(380px,1fr) minmax(420px,.95fr);
  grid-template-rows:1fr;
  align-items:center;gap:20px;
  padding:96px 54px 104px;
  background:
    radial-gradient(130% 92% at 68% 42%,#0B2E7E 0%,#071E5C 42%,#040F32 72%,var(--ink) 100%);
}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.spotlight{
  position:absolute;left:52%;top:-14%;width:66vw;height:124vh;
  background:radial-gradient(ellipse at 50% 38%,rgba(42,120,255,.5),rgba(10,40,120,.16) 46%,transparent 70%);
  filter:blur(14px);animation:sweep 13s ease-in-out infinite alternate;
}
@keyframes sweep{from{transform:translateX(-4%) rotate(-2deg)}to{transform:translateX(5%) rotate(2deg)}}
.diagband{
  position:absolute;left:-14%;top:-30%;width:150%;height:40%;
  background:linear-gradient(90deg,transparent,rgba(23,223,255,.14) 28%,rgba(23,223,255,.3) 52%,rgba(23,223,255,.1) 72%,transparent);
  transform:rotate(-19deg);mix-blend-mode:screen;
}
/* double ring behind her */
.rings{position:absolute;left:62%;top:46%;transform:translate(-50%,-50%);width:min(60vw,760px);aspect-ratio:1}
.ring{position:absolute;inset:0;border-radius:50%;}
.ring-o{border:3px solid rgba(23,223,255,.55);box-shadow:0 0 44px rgba(23,223,255,.3),inset 0 0 70px rgba(23,223,255,.1)}
.ring-i{inset:8.5%;border:10px solid rgba(255,255,255,.085);box-shadow:inset 0 0 0 2px rgba(23,223,255,.22)}
.ring-glow{
  position:absolute;inset:-4%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(23,223,255,.55) 76%,rgba(255,255,255,.85) 82%,transparent 92%);
  -webkit-mask:radial-gradient(circle,transparent 0 47.5%,#000 48.4% 50.4%,transparent 51%);
          mask:radial-gradient(circle,transparent 0 47.5%,#000 48.4% 50.4%,transparent 51%);
  animation:spin 9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.bigword{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  font-family:var(--black);font-size:clamp(9rem,25vw,24rem);line-height:.78;
  letter-spacing:-.03em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(167,197,240,.26);
  opacity:0;
}
.scanlines{
  position:absolute;inset:0;opacity:.3;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);
}
/* floating coin props */
.coin{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#EAF4FF,#9EB9DC 46%,#4E74AE 70%,#D8E8FF 100%);
  box-shadow:0 0 0 3px rgba(255,255,255,.3) inset,0 10px 26px rgba(0,0,0,.4);
}
.coin::after{
  content:"";position:absolute;inset:24%;border-radius:50%;
  border:3px solid rgba(255,255,255,.85);
  clip-path:polygon(0 0,100% 0,100% 34%,52% 34%,52% 66%,100% 66%,100% 100%,0 100%);
}
.c1{width:76px;height:76px;left:6%;top:24%;animation:bob 7s ease-in-out infinite}
.c2{width:52px;height:52px;left:15%;top:70%;animation:bob 9s ease-in-out infinite .9s}
.c3{width:96px;height:96px;right:5%;top:18%;animation:bob 11s ease-in-out infinite .4s}
.c4{width:44px;height:44px;right:14%;bottom:20%;animation:bob 8s ease-in-out infinite 1.4s}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-20px) rotate(8deg)}
}

.onair{
  position:absolute;top:70px;left:54px;z-index:5;
  display:flex;align-items:center;gap:8px;
  font-family:var(--cond);font-weight:700;letter-spacing:.18em;font-size:.76rem;
  color:#BBD6FF;
}
.onair .dot{width:8px;height:8px;border-radius:50%;background:#FF4B6B;box-shadow:0 0 9px #FF4B6B;animation:blink 1.9s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.26}}

/* character */
.hero-char{
  grid-column:2;grid-row:1;margin:0;position:relative;z-index:3;
  justify-self:center;align-self:center;
}
/* layered hero: three registered plates stacked in one box.
   The README warns these are visible-pixel separations, so offsets stay
   small — a large shift would expose unpainted regions. */
.hero-stack{position:relative;height:min(84vh,820px);aspect-ratio:1200/1680}
.hero-stack .hl{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;
  transform:translate3d(var(--hx,0px),var(--hy,0px),0);
  will-change:transform;
}
.hero-char img{
  width:auto;height:min(84vh,820px);max-width:42vw;object-fit:contain;
}
.hero-stack{
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.58)) drop-shadow(0 0 30px rgba(23,223,255,.2));
  opacity:0;
}
.bubble{
  position:absolute;left:-8%;top:44%;z-index:4;
  background:var(--ice);color:var(--navy);
  font-family:var(--cond);font-weight:700;font-size:1rem;letter-spacing:.02em;
  padding:.6em 1em;max-width:230px;
  box-shadow:5px 5px 0 rgba(4,18,59,.75);
  opacity:0;
}
.bubble::after{
  content:"";position:absolute;right:-13px;top:52%;
  border:7px solid transparent;border-left-color:var(--ice);
}

/* copy column */
.hero-copy{grid-column:1;grid-row:1;position:relative;z-index:4;max-width:620px}
.kicker{
  font-family:var(--cond);font-weight:800;letter-spacing:.3em;font-size:.82rem;
  color:var(--cyan);margin:0 0 12px;
}
h1{margin:0;font-family:var(--black);line-height:.86;letter-spacing:-.018em}
h1 span{display:block;font-size:clamp(3.3rem,7.3vw,6.6rem)}
.t1{color:var(--ice);text-shadow:0 5px 26px rgba(0,0,0,.55)}
.t2{
  color:#3D86FF;
  -webkit-text-stroke:1.5px rgba(226,239,255,.9);
  text-shadow:0 0 30px rgba(61,134,255,.55),0 5px 20px rgba(0,0,0,.5);
}
h1 span{opacity:0}
.ticker-badge{
  display:inline-block;margin:20px 0 0;
  background:var(--ice);color:var(--royal);
  font-family:var(--black);font-size:1.5rem;letter-spacing:.02em;
  padding:.18em .62em;box-shadow:5px 5px 0 rgba(4,18,59,.8);
  opacity:0;
}
.lede{
  margin:20px 0 26px;font-family:var(--cond);font-weight:700;
  font-size:1.5rem;line-height:1.14;letter-spacing:.07em;color:#C9DDFA;
  opacity:0;
}

/* CA plate */
.ca-plate{
  background:var(--ice);color:var(--navy);
  border:2px solid #2C6BEA;box-shadow:8px 8px 0 var(--cyan);
  padding:16px 18px;max-width:640px;opacity:0;
}
.ca-label{
  display:block;font-family:var(--cond);font-weight:800;letter-spacing:.24em;
  font-size:.72rem;color:#2B4D8F;margin-bottom:7px;
}
#ca{
  display:block;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.96rem;font-weight:600;letter-spacing:.01em;
  word-break:break-all;line-height:1.45;color:var(--ink);
}
.ca-actions{display:flex;gap:11px;margin-top:13px;flex-wrap:wrap}
.btn.copied{background:#0E9E63;border-color:#6FE8B4}

/* ribbons */
.ribbons{position:absolute;left:0;right:0;bottom:0;z-index:6}
.ribbon{overflow:hidden;white-space:nowrap}
.ribbon-white{background:var(--ice);height:46px}
.ribbon-blue{background:var(--royal);height:30px}
.rtrack{
  display:inline-block;will-change:transform;
  font-family:var(--cond);font-weight:800;letter-spacing:.14em;
}
.ribbon-white .rtrack{color:#0B2A72;font-size:1.32rem;line-height:46px;animation:marq 34s linear infinite}
.ribbon-blue .rtrack{color:#DCEBFF;font-size:.88rem;line-height:30px;animation:marq-r 44s linear infinite}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marq-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ═══════════════ MEET ═══════════════ */
.meet{
  background:var(--ice);color:var(--navy);
  display:grid;grid-template-columns:minmax(360px,.92fr) minmax(400px,1fr);
  align-items:center;gap:50px;padding:112px 54px 128px;
  /* the corner portrait hangs onto the section edge; clipping stays on so
     it can never paint over other sections or the fixed topbar */
  overflow:hidden;position:relative;z-index:2;
}
.meet-art{position:relative;justify-self:center;width:min(42vw,560px);aspect-ratio:1}
.meet-circle{
  position:absolute;inset:4% 2% 6% 2%;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#2E74FF,var(--royal) 55%,#0E3FAE 100%);
}
.meet-ring{
  position:absolute;inset:-3% -6% 13% 11%;border-radius:50%;
  border:2px solid #8FA9C8;
}
.meet-fig{
  position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);
  width:auto;height:112%;
  filter:drop-shadow(0 20px 36px rgba(10,35,90,.34));
}
.meet-copy{max-width:640px}
.eyebrow{
  font-family:var(--cond);font-weight:800;letter-spacing:.26em;font-size:.76rem;
  color:#3566C4;margin:0 0 14px;
}
.eyebrow.light{color:var(--cyan)}
.meet-h{margin:0;font-family:var(--black);line-height:.88;letter-spacing:-.02em}
.meet-h>span{display:block;font-size:clamp(2.4rem,4.6vw,4rem);color:var(--navy)}
.ghostwrap{position:relative;display:block;font-size:clamp(2.9rem,6.4vw,5.6rem)!important}
.ghostwrap em{font-style:normal;display:block;transform:scaleX(.94);transform-origin:left}
.ghost{
  position:absolute;left:8px;top:7px;
  color:transparent;-webkit-text-stroke:1.5px rgba(21,89,237,.3);
}
.front{color:var(--royal)}
.body{font-size:1.06rem;line-height:1.62;color:#1E335C;max-width:52ch;margin:24px 0 30px}
.specs{margin:0;display:grid;gap:0}
.specs>div{
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  padding:12px 0;border-top:1px solid rgba(21,89,237,.26);
}
.specs>div:last-child{border-bottom:1px solid rgba(21,89,237,.26)}
.specs dt{
  font-family:var(--cond);font-weight:800;letter-spacing:.17em;font-size:.8rem;
  color:#5B7AAE;min-width:188px;
}
.specs dd{margin:0;font-family:var(--cond);font-weight:800;letter-spacing:.07em;font-size:1.18rem;color:var(--navy)}

.knows{
  position:absolute;right:clamp(16px,3vw,46px);bottom:0;z-index:6;margin:0;width:min(230px,19vw);
  background:#fff;padding:11px 11px 0;
  box-shadow:12px 12px 0 rgba(21,89,237,.3);
}
.knows img{width:100%;height:auto}
.knows figcaption{
  font-family:var(--cond);font-weight:800;letter-spacing:.09em;font-size:.84rem;
  color:var(--navy);padding:11px 2px 13px;text-align:center;line-height:1.2;
}

/* ═══════════════ PANEL ═══════════════ */
.panel{
  background:linear-gradient(180deg,#04123B,#071E5C 46%,#04102F);
  padding:118px 54px 90px;position:relative;z-index:1;
}
.panel-bg{position:absolute;inset:0;pointer-events:none}
.pring{
  position:absolute;border-radius:50%;border:1.5px solid rgba(23,223,255,.14);
  width:620px;height:620px;left:-180px;top:40px;
}
.pring2{left:auto;right:-220px;top:300px;width:720px;height:720px;border-color:rgba(255,255,255,.07)}
.panel-h{
  position:relative;margin:0 0 54px;text-align:center;
  font-family:var(--black);font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:.95;
  letter-spacing:-.015em;color:var(--ice);
}
.panel-h span{color:var(--cyan)}

.screens{
  position:relative;display:grid;gap:26px;align-items:end;
  grid-template-columns:1fr 1.34fr 1fr;max-width:1240px;margin:0 auto;
}
.screen{margin:0;opacity:0;transform:translateY(26px)}
.reveal.in .screen{animation:rise .6s cubic-bezier(.22,.9,.3,1) forwards}
.reveal.in .s-a{animation-delay:.05s}
.reveal.in .s-b{animation-delay:.17s}
.reveal.in .s-c{animation-delay:.29s}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

.frame{
  position:relative;overflow:hidden;
  border:3px solid transparent;
  background:
    linear-gradient(#071E5C,#071E5C) padding-box,
    var(--chrome) border-box;
  box-shadow:0 18px 36px rgba(0,0,0,.5);
  transition:transform .25s,box-shadow .25s,filter .25s;
}
.s-b .frame{aspect-ratio:1/1.04}
.s-a .frame,.s-c .frame{aspect-ratio:1/1}
.frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.s-b .frame img{object-position:50% 38%}
.lightstrip{
  position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.75;
}
.bracket{position:absolute;width:19px;height:19px;border:2px solid var(--cyan);opacity:.8}
.tl{left:7px;top:7px;border-right:0;border-bottom:0}
.tr{right:7px;top:7px;border-left:0;border-bottom:0}
.bl{left:7px;bottom:7px;border-right:0;border-top:0}
.br{right:7px;bottom:7px;border-left:0;border-top:0}
.cue{
  position:absolute;right:9%;bottom:7%;
  background:var(--ice);color:var(--navy);
  font-family:var(--cond);font-weight:800;font-size:.76rem;letter-spacing:.1em;
  line-height:1.1;text-align:center;padding:9px 11px;
  transform:rotate(-7deg);box-shadow:4px 4px 0 rgba(0,0,0,.4);
}
@media (hover:hover){
  .screen:hover .frame{transform:translateY(-9px);box-shadow:0 26px 48px rgba(0,0,0,.6);filter:brightness(1.1)}
}
.screen figcaption{
  margin-top:13px;text-align:center;
  font-family:var(--cond);font-weight:800;letter-spacing:.16em;font-size:.95rem;
  color:#AFCCF4;
}
.lowerthird{
  margin:62px auto 0;max-width:720px;text-align:center;
  background:linear-gradient(90deg,transparent,rgba(21,89,237,.9) 14%,rgba(21,89,237,.9) 86%,transparent);
  font-family:var(--cond);font-weight:800;letter-spacing:.16em;font-size:1.1rem;
  color:#fff;padding:.62em 1em;
}

/* ═══════════════ DESK ═══════════════ */
/* The studio is a single delivered illustration (desk, props, windows,
   wall screen and figure are all painted in). CSS only grades and lights it. */
.desk{
  min-height:100vh;display:grid;place-items:center;
  background:linear-gradient(180deg,#05308F 0%,#0A49C8 36%,#0B2E7E 70%,#061B54 100%);
  padding:104px 0 0;
}
.studio-art{
  grid-area:1/1;position:relative;width:100%;max-width:1680px;
  justify-self:center;
}
.studio-art img{
  width:100%;height:auto;display:block;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
/* keeps the top-left corner readable under the headline */
.studio-grade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(3,14,46,.9) 0%,rgba(3,14,46,.66) 24%,rgba(3,14,46,.18) 44%,transparent 62%);
}
/* slow light sweep across the chrome desk */
.studio-sweep{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.2) 50%,transparent 58%);
  background-size:300% 100%;mix-blend-mode:screen;
  animation:sheen 9s ease-in-out infinite;
}
@keyframes sheen{0%{background-position:180% 0}60%,100%{background-position:-80% 0}}
/* caption pinned under the painted wall screen (upper right of the plate) */
.ws-cap{
  position:absolute;right:4.5%;top:53%;width:min(25%,320px);margin:0;
  background:rgba(4,18,59,.92);color:var(--ice);
  font-family:var(--cond);font-weight:700;letter-spacing:.07em;font-size:.76rem;
  padding:8px 11px;line-height:1.26;
  border-left:3px solid var(--cyan);
}
.desk-copy{
  grid-area:1/1;z-index:4;justify-self:start;align-self:center;
  max-width:min(42vw,520px);margin-left:clamp(20px,4vw,62px);
}
.desk-copy h2{
  margin:0;font-family:var(--black);font-size:clamp(2.2rem,4.6vw,4rem);
  line-height:.88;letter-spacing:-.02em;color:var(--ice);
  text-shadow:0 6px 30px rgba(2,14,48,.9);
}
.desk-copy .sub{
  margin:18px 0 0;font-family:var(--cond);font-weight:800;letter-spacing:.14em;
  font-size:1.18rem;color:var(--cyan);text-shadow:0 2px 14px rgba(2,14,48,.9);
}

/* ═══════════════ FINALE ═══════════════ */
.finale{
  min-height:98vh;display:grid;align-items:center;
  grid-template-columns:1fr minmax(380px,.86fr);
  gap:30px;padding:96px 54px 0;
  background:radial-gradient(120% 90% at 42% 44%,#2E74FF,var(--royal) 46%,#0B38A8 100%);
}
.fin-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.finring{
  position:absolute;border-radius:50%;border:5px solid rgba(240,247,255,.26);
}
.f1{width:150vmax;height:150vmax;left:-58vmax;top:-44vmax}
.f2{width:120vmax;height:120vmax;right:-52vmax;bottom:-50vmax;border-color:rgba(185,205,229,.22)}
.sparkle{
  position:absolute;width:16px;height:16px;
  background:
    linear-gradient(var(--cyan),var(--cyan)) center/2px 100% no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) center/100% 2px no-repeat;
  filter:drop-shadow(0 0 6px var(--cyan));
  animation:twinkle 3.4s ease-in-out infinite;
}
.sp1{left:16%;top:22%}
.sp2{left:72%;top:14%;animation-delay:.7s}
.sp3{left:30%;bottom:16%;animation-delay:1.3s}
.sp4{right:12%;bottom:28%;animation-delay:2s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(45deg)}}
.finword{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  font-family:var(--black);font-size:clamp(10rem,27vw,26rem);line-height:.8;
  color:rgba(255,255,255,.17);letter-spacing:-.035em;
}
.finword-out{
  top:auto;bottom:-15%;transform:translateX(-50%);
  color:transparent;-webkit-text-stroke:3px rgba(255,255,255,.22);
}
.fin-char{
  grid-column:1;grid-row:1;justify-self:center;align-self:end;position:relative;z-index:3;
  width:min(42vw,580px);height:auto;
  filter:drop-shadow(0 24px 44px rgba(3,24,80,.55));
}
.fin-copy{grid-column:2;grid-row:1;position:relative;z-index:4;padding-bottom:7vh}
.fin-copy::before{
  content:"";position:absolute;inset:-34px -40px -24px -34px;z-index:-1;
  background:radial-gradient(ellipse at 42% 46%,rgba(8,40,130,.72),rgba(8,40,130,.36) 56%,transparent 76%);
  filter:blur(8px);
}
.fin-copy h2{
  margin:0;font-family:var(--black);font-size:clamp(2.6rem,5.6vw,4.9rem);
  line-height:.87;letter-spacing:-.022em;color:var(--ice);
  text-shadow:0 8px 30px rgba(3,20,70,.5);
}
.fin-copy p{
  margin:20px 0 30px;font-family:var(--cond);font-weight:700;
  font-size:1.28rem;letter-spacing:.07em;color:#EAF3FF;
  text-shadow:0 2px 14px rgba(4,22,74,.9);
}

/* ═══════════════ BANDS ═══════════════ */
.band{
  position:relative;display:grid;place-items:center;
  min-height:clamp(340px,42vw,560px);
  background:var(--ink);overflow:hidden;
}
.band-art{
  grid-area:1/1;width:100%;height:124%;object-fit:cover;
  display:block;align-self:center;
}
.band-a .band-art{object-position:78% 42%}
.band-b .band-art{object-position:22% 42%}
/* keeps the type side readable whichever side she is on */
.band::after{
  content:"";grid-area:1/1;width:100%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,14,44,.94) 0%,rgba(4,14,44,.76) 32%,rgba(4,14,44,.2) 58%,transparent 78%);
}
.band-b::after{
  background:linear-gradient(270deg,rgba(4,14,44,.96) 0%,rgba(4,14,44,.9) 26%,rgba(4,14,44,.6) 46%,rgba(4,14,44,.18) 68%,transparent 84%);
}
.band-copy{
  grid-area:1/1;z-index:3;justify-self:start;
  padding-left:clamp(20px,5vw,78px);max-width:min(46vw,560px);
}
.band-copy-right{justify-self:end;text-align:right;padding:0 clamp(20px,5vw,78px) 0 0}
.band-copy .eyebrow{
  display:inline-block;background:rgba(4,14,44,.78);
  padding:.34em .7em;margin-bottom:12px;
}
.band-copy h2{
  margin:0;font-family:var(--black);font-size:clamp(2rem,4.6vw,4rem);
  line-height:.88;letter-spacing:-.02em;color:var(--ice);
  text-shadow:0 6px 30px rgba(0,0,0,.7);
}
.band-copy .sub{
  display:inline-block;margin:16px 0 0;
  font-family:var(--cond);font-weight:800;letter-spacing:.13em;
  font-size:1.05rem;color:var(--cyan);
  background:rgba(4,14,44,.8);padding:.34em .7em;
}

/* ═══════════════ REACTION STRIP ═══════════════ */
.strip{
  position:relative;padding:92px 0 68px;
  background:linear-gradient(180deg,#04102F,#071E5C 48%,#04102F);
  --mx:50%;--my:50%;
}
/* cursor spotlight */
.strip::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(23,223,255,.16),transparent 70%);
  transition:opacity .3s;
}
.strip-head{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 0 26px;
  font-family:var(--cond);font-weight:800;letter-spacing:.24em;font-size:.8rem;
  color:#9FC2F0;
}
.rec{width:9px;height:9px;border-radius:50%;background:#FF4B6B;box-shadow:0 0 10px #FF4B6B;animation:blink 1.8s ease-in-out infinite}
.strip-rail{
  position:relative;z-index:2;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.strip-rail + .strip-rail{margin-top:18px}
.strip-track{
  display:flex;gap:18px;width:max-content;
  animation:railL 46s linear infinite;
}
.strip-rail-rev .strip-track{animation:railR 54s linear infinite}
@keyframes railL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes railR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.strip:hover .strip-track{animation-play-state:paused}

.rcard{
  margin:0;flex:0 0 auto;width:clamp(150px,15vw,232px);
  position:relative;
  border:2px solid transparent;
  background:linear-gradient(#08255F,#08255F) padding-box,var(--chrome) border-box;
  box-shadow:0 12px 26px rgba(0,0,0,.45);
  transition:transform .3s cubic-bezier(.2,.9,.3,1),box-shadow .3s,filter .3s;
}
.rcard img{
  width:100%;aspect-ratio:1;height:auto;object-fit:cover;object-position:50% 26%;
  display:block;
}
.rcard figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,transparent,rgba(3,12,40,.92) 46%);
  color:var(--ice);
  font-family:var(--cond);font-weight:800;letter-spacing:.14em;font-size:.84rem;
  text-align:center;padding:22px 6px 9px;
}
@media (hover:hover){
  .rcard:hover{
    transform:translateY(-10px) scale(1.03);
    box-shadow:0 22px 40px rgba(0,0,0,.6),0 0 30px rgba(23,223,255,.3);
    filter:brightness(1.1);
  }
}

/* ═══════════════ SHARED EFFECTS ═══════════════ */
/* Scroll parallax: JS writes --py, CSS consumes it.
   Several of these elements are centred with their own translate(), so the
   drift composes via --tx/--ty rather than replacing the transform. */
[data-depth]{
  --tx:0px;--ty:0px;
  transform:translate(var(--tx),var(--ty)) translate3d(0,var(--py,0px),0);
  will-change:transform;
}
/* re-declare the centring offsets as variables the rule above consumes */
.bigword[data-depth],
.finword[data-depth]{--tx:-50%;--ty:-50%}
.finword-out[data-depth]{--tx:-50%;--ty:0px}

/* cursor tilt on the framed panel portraits */
.frame{
  --rx:0deg;--ry:0deg;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
}
@media (hover:hover){
  .screen:hover .frame{
    transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-9px);
  }
}

/* cursor spotlight host */
.spot-host{--mx:50%;--my:50%}
.spot-host .spot{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(460px circle at var(--mx) var(--my),rgba(23,223,255,.14),transparent 72%);
}

/* ───────── footer ───────── */
.foot{
  display:flex;align-items:center;justify-content:center;gap:16px;
  background:var(--navy);padding:26px;
  font-family:var(--cond);font-weight:700;letter-spacing:.14em;font-size:.94rem;
  color:#A8C6F0;
}
.fdot{width:9px;height:9px;border-radius:50%;border:2px solid var(--cyan)}
.visits{display:inline-flex;align-items:center;gap:7px;color:#A8C6F0}
.visits b{
  font-family:var(--cond);font-weight:800;font-size:1.05rem;letter-spacing:.08em;
  color:var(--cyan);min-width:1.2em;
}
.foot a{color:var(--ice);text-decoration:none}
.foot a:hover{color:var(--cyan)}

/* ───────── scroll reveals ───────── */
.reveal:not(.in) .meet-copy>*,
.reveal:not(.in) .meet-art,
.reveal:not(.in) .knows,
.reveal:not(.in) .panel-h,
.reveal:not(.in) .lowerthird,
.reveal:not(.in) .desk-copy,
.reveal:not(.in) .desk-char,
.reveal:not(.in) .fin-copy>*,
.reveal:not(.in) .fin-char{opacity:0}

.reveal.in .meet-art{animation:slideL .7s cubic-bezier(.2,.85,.3,1) both}
.reveal.in .meet-copy>*{animation:wipeR .62s cubic-bezier(.2,.85,.3,1) both}
.reveal.in .meet-copy>*:nth-child(2){animation-delay:.08s}
.reveal.in .meet-copy>*:nth-child(3){animation-delay:.16s}
.reveal.in .meet-copy>*:nth-child(4){animation-delay:.24s}
.reveal.in .knows{animation:pop .55s cubic-bezier(.2,1.1,.4,1) .35s both}
.reveal.in .panel-h{animation:wipeR .6s cubic-bezier(.2,.85,.3,1) both}
.reveal.in .lowerthird{animation:pop .5s ease .4s both}
.reveal.in .desk-copy{animation:slideL .7s cubic-bezier(.2,.85,.3,1) both}
.reveal.in .desk-char{animation:riseIn .8s cubic-bezier(.2,.85,.3,1) .1s both}
.reveal.in .fin-char{animation:settle .8s cubic-bezier(.2,.9,.3,1) both}
.reveal.in .fin-copy>*{animation:settle .7s cubic-bezier(.2,.9,.3,1) both}
.reveal.in .fin-copy>*:nth-child(2){animation-delay:.1s}
.reveal.in .fin-copy>*:nth-child(3){animation-delay:.2s}

@keyframes slideL{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes wipeR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}

/* ───────── hero entrance (~1s) ───────── */
.bigword{animation:fadeWord .5s ease .12s forwards}
@keyframes fadeWord{to{opacity:1}}
.hero-stack{animation:charUp .62s cubic-bezier(.2,.85,.3,1) .2s forwards}
@keyframes charUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.t1{animation:lineIn .44s cubic-bezier(.2,.9,.3,1) .34s forwards}
.t2{animation:lineIn .44s cubic-bezier(.2,.9,.3,1) .44s forwards}
.ticker-badge{animation:lineIn .4s ease .56s forwards}
.lede{animation:lineIn .4s ease .64s forwards}
.ca-plate{animation:plateIn .46s cubic-bezier(.2,.9,.3,1) .74s forwards}
.bubble{animation:pop .42s cubic-bezier(.2,1.1,.4,1) .92s forwards}
@keyframes lineIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes plateIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .bigword,.hero-stack,.hero-char img,h1 span,.ticker-badge,.lede,.ca-plate,.bubble,
  .screen,.reveal .meet-copy>*,.reveal .meet-art,.reveal .knows,
  .reveal .panel-h,.reveal .lowerthird,.reveal .desk-copy,
  .reveal .desk-char,.reveal .fin-copy>*,.reveal .fin-char,
  .band-copy,.rcard{opacity:1!important}
  [data-depth]{transform:none!important}
  .hero-stack .hl{transform:none!important}
  .frame{transform:none!important}
  .strip-track{animation:none!important}
}

/* ───────── mobile ───────── */
@media (max-width:860px){
  .hero{
    grid-template-columns:1fr;grid-template-rows:auto auto;
    grid-template-areas:"char" "copy";
    align-content:start;
    padding:64px 18px 80px;gap:0;text-align:left;
  }
  .hero-char{grid-column:1;grid-row:1;grid-area:char;align-self:start;justify-self:center}
  .hero-char img{width:auto;height:min(42vh,340px);max-width:84vw}
  .hero-stack{height:min(42vh,340px)}
  .bubble{left:auto;right:-4px;top:30%;max-width:170px;font-size:.84rem}
  .bubble::after{right:auto;left:-13px;border-left-color:transparent;border-right-color:var(--ice)}
  .hero-copy{grid-column:1;grid-row:2;grid-area:copy;margin-top:4px;max-width:none}
  .hero-copy .kicker{
    background:rgba(5,16,46,.82);display:inline-block;
    padding:.35em .6em;margin-bottom:8px;font-size:.7rem;letter-spacing:.2em;
  }
  h1 span{font-size:clamp(2.5rem,11vw,3.6rem)}
  .lede{font-size:1.12rem;margin:14px 0 18px}
  .ticker-badge{font-size:1.2rem;margin-top:14px}
  .onair{left:20px;top:62px;font-size:.66rem}
  .ca-plate{box-shadow:6px 6px 0 var(--cyan);padding:13px 14px}
  #ca{font-size:.8rem}
  .ca-actions{flex-direction:column;align-items:stretch}
  .ca-actions .btn{justify-content:center}
  .c1,.c2,.c4{display:none}
  .c3{width:60px;height:60px}
  .rings{width:96vw;left:50%;top:30%}

  .meet{grid-template-columns:1fr;padding:84px 18px 120px;gap:30px}
  .meet-art{width:min(84vw,420px)}
  .meet-copy{max-width:100%;min-width:0}
  .meet-h>span{font-size:clamp(1.7rem,8.2vw,2.5rem)}
  .ghostwrap{font-size:clamp(1.9rem,9.4vw,2.9rem)!important}
  .ghostwrap em{transform:none}
  .ghost{left:4px;top:4px}
  .body{font-size:.98rem;max-width:100%;margin:18px 0 24px}
  .knows{position:static;width:min(72vw,260px);margin:34px auto 0;box-shadow:9px 9px 0 rgba(21,89,237,.3)}
  .specs dt{min-width:0;flex:1 0 100%}

  .panel{padding:84px 20px 70px}
  .screens{grid-template-columns:1fr;gap:34px}
  .s-a .frame,.s-b .frame,.s-c .frame{aspect-ratio:4/3}
  .s-b{order:-1}
  .screen figcaption{font-size:1rem}
  .lowerthird{font-size:.92rem;letter-spacing:.1em;margin-top:44px}

  /* Desk: the plate is a wide 16:9 illustration. On a phone, crop it to a
     taller window around her figure instead of letting it shrink to a strip,
     and stack the copy above it. */
  .desk{
    display:flex;flex-direction:column;min-height:0;padding:80px 0 0;
  }
  .desk-copy{
    order:1;max-width:none;margin:0 0 18px;padding:0 18px;
  }
  .studio-art{order:2}
  .desk-copy h2{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .desk-copy .sub{font-size:1rem}
  .studio-art{
    width:100%;max-width:none;
    aspect-ratio:3/4;overflow:hidden;position:relative;
  }
  .studio-art img{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;object-position:34% 50%;
    box-shadow:none;
  }
  .studio-grade{
    background:linear-gradient(180deg,rgba(3,14,46,.82) 0%,rgba(3,14,46,.25) 22%,transparent 46%);
  }
  .ws-cap{
    right:auto;left:0;top:auto;bottom:0;width:100%;
    font-size:.68rem;padding:9px 14px;border-left:0;border-top:3px solid var(--cyan);
  }

  .finale{grid-template-columns:1fr;padding:84px 20px 0;gap:10px}
  .fin-copy{grid-column:1;order:-1;padding-bottom:0}
  .fin-char{grid-column:1;width:min(84vw,400px)}
  .finword{font-size:34vw;top:30%}
  .btn.big{font-size:1.2rem}

  /* new sections on phones */
  .band{min-height:clamp(320px,88vw,430px)}
  .band-copy,.band-copy-right{
    max-width:none;padding:0 18px;justify-self:start;text-align:left;
  }
  .band-copy .eyebrow{
  display:inline-block;background:rgba(4,14,44,.78);
  padding:.34em .7em;margin-bottom:12px;
}
.band-copy h2{font-size:clamp(1.7rem,8.4vw,2.4rem)}
  .band-copy .sub{font-size:.92rem}
  /* at phone width she fills the frame, so scrim from the top instead of the side */
  .band{place-items:start stretch}
  .band::after,.band-b::after{
    background:linear-gradient(180deg,rgba(4,14,44,.95) 0%,rgba(4,14,44,.85) 34%,rgba(4,14,44,.45) 60%,rgba(4,14,44,.15) 100%);
  }
  .band-copy,.band-copy-right{align-self:start;padding-top:72px}
  .strip{padding:74px 0 54px}
  .strip-head{font-size:.66rem;letter-spacing:.16em;margin-bottom:18px;padding:0 14px;text-align:center}
  .rcard{width:min(44vw,180px)}
  .rcard figcaption{font-size:.74rem;padding:18px 4px 7px}
  .strip-rail + .strip-rail{margin-top:12px}

  .topbar{padding:11px 14px;gap:10px}
  .wordmark{font-size:.72rem;letter-spacing:.04em;gap:7px;min-width:0}
  .wm-ring{width:14px;height:14px;flex:0 0 auto}
  .toplink{font-size:.82rem;padding:.3em .7em;flex:0 0 auto}
  .foot{flex-wrap:wrap;text-align:center;font-size:.82rem}
}