/* ============================================================
   CLUB BOARD — Landing v2
   Brand green · Inter · dotted-square logo
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* deep green-black surfaces */
  --bg:        #0A0F0B;
  --bg-2:      #0D140F;   /* raised panel */
  --bg-3:      #111A13;   /* card */
  --line:      rgba(204,224,210,0.10);
  --line-2:    rgba(204,224,210,0.055);

  /* brand greens */
  --p-dark:    #1A4A2E;
  --p-1:       #1D5233;
  --p-2:       #245D3B;
  --p-3:       #32774E;
  --mint:      #5ECB8A;   /* accent */
  --mint-soft: rgba(94,203,138,0.14);
  --coral:     #F0795B;   /* warm coral — detail accent only */

  /* text */
  --ink:       #ECF2ED;
  --ink-2:     rgba(236,242,237,0.62);
  --ink-3:     rgba(236,242,237,0.40);
  --ink-4:     rgba(236,242,237,0.24);

  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --wrap: 1200px;
  --ease: cubic-bezier(0.22,0.61,0.36,1);
}

/* ---------- RESET ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--mint); color:#08160D; }

/* faint green ambient glow at top */
body::after{
  content:""; position:fixed; top:-200px; left:50%; transform:translateX(-50%);
  width:1100px; height:600px; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(26,74,46,0.45), transparent 65%);
  opacity:.6;
}

/* grain overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
}

/* ---------- LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 40px; position:relative; z-index:1; }
.section{ position:relative; padding:140px 0; z-index:1; }

/* ---------- TYPE ---------- */
.display{
  font-family:var(--sans);
  font-weight:800; line-height:1.04;
  letter-spacing:-0.025em; text-wrap:balance;
}
.label{
  font-size:12.5px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--mint);
}
.label--muted{ color:var(--ink-3); }
.lead{
  font-size:19px; line-height:1.62; color:var(--ink-2);
  font-weight:400; max-width:48ch; text-wrap:pretty;
}
.accent{ color:var(--mint); font-style:normal; font-weight:900; }

/* ---------- LOGO MARK ---------- */
.cb-mark{ display:block; object-fit:contain; flex-shrink:0; }
.cb-mark--nav{ width:30px; height:30px; }
.cb-mark--sm{ width:20px; height:20px; }

.brand{ display:inline-flex; align-items:center; gap:13px; }
.brand__word{
  font-weight:700; font-size:15px;
  letter-spacing:0.20em; text-transform:uppercase; color:var(--ink);
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600; letter-spacing:0.01em;
  padding:0 26px; height:52px; border-radius:8px;
  border:1px solid transparent;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn--primary{ background:var(--mint); color:#08200F; border-color:var(--mint); }
.btn--primary:hover{ background:#74D89C; border-color:#74D89C; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--mint); background:var(--mint-soft); }
.btn--sm{ height:44px; padding:0 20px; font-size:14px; }
.btn .arr{ transition:transform .2s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }

/* ============================================================ NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px;
  transition:background .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(10,15,11,0.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  padding:15px 40px; border-bottom:1px solid var(--line-2);
}

/* ============================================================ HERO */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; padding:140px 0 90px; overflow:hidden;
  scroll-snap-align:start; scroll-snap-stop:normal;
  scroll-margin-top:0;
}
.hero__grid{
  display:grid; grid-template-columns:1.02fr 0.98fr;
  align-items:center; gap:64px;
}
.hero__eyebrow{ margin-bottom:30px; }
.hero__title{ font-size:clamp(3.2rem, 6vw, 5.8rem); }
.hero__title .l2{ display:block; color:var(--mint); font-size:1.08em; letter-spacing:-0.03em; }
.hero__sub{ margin:32px 0 40px; max-width:46ch; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---- PHONE ILLUSTRATION ---- */
.stage{ position:relative; display:flex; justify-content:center; align-items:center; perspective:1600px; }
.phone{
  position:relative; width:332px; border-radius:46px;
  background:linear-gradient(150deg,#1b2620,#070b08);
  padding:13px;
  box-shadow:0 2px 0 rgba(204,224,210,0.06) inset,
    0 50px 90px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(94,203,138,0.06);
  transform:rotateY(-15deg) rotateX(6deg) rotateZ(-1deg);
  transform-style:preserve-3d;
}
.phone__screen{
  position:relative; border-radius:34px; background:#070A08; overflow:hidden;
  aspect-ratio:9/19.2; display:flex; flex-direction:column;
  border:1px solid rgba(94,203,138,0.06);
  background-image:radial-gradient(ellipse at 50% -6%, rgba(26,74,46,0.55), transparent 52%);
}
.phone__notch{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:96px; height:24px; border-radius:14px; background:#020403; z-index:6;
}
.sbar{ display:flex; justify-content:space-between; align-items:center; padding:14px 22px 8px; font-size:12px; font-weight:600; color:var(--ink); }
.sbar__r{ display:flex; gap:6px; align-items:center; }
.sbar__r svg{ height:11px; fill:var(--ink); width:auto; }
.chead{ display:flex; align-items:center; gap:10px; padding:8px 18px 12px; border-bottom:1px solid rgba(204,224,210,0.06); }
.chead__av{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(140deg,var(--mint),var(--p-3));
  display:grid; place-items:center; font-size:11px; font-weight:700; color:#08200F;
}
.chead__name{ font-size:13.5px; font-weight:600; line-height:1.2; }
.chead__sub{ font-size:11px; color:var(--mint); }
.cbody{
  flex:1; padding:18px 16px; display:flex; flex-direction:column; gap:10px; justify-content:flex-end;
  background:radial-gradient(circle at 80% 8%, rgba(94,203,138,0.06), transparent 42%);
}
.bub{ max-width:78%; padding:9px 13px; font-size:13px; line-height:1.4; border-radius:16px; }
.bub--in{ align-self:flex-start; background:#17231b; color:var(--ink); border-bottom-left-radius:5px; }
.bub--out{ align-self:flex-end; background:var(--p-3); color:#EAFBF0; border-bottom-right-radius:5px; font-weight:500; }
.bub__t{ display:block; font-size:9.5px; opacity:.55; margin-top:4px; }

/* ---- KEYBOARD (the brand object) ---- */
.kb{
  background:linear-gradient(180deg,#0c130e,#080c09);
  position:relative;
  border-top:1px solid rgba(94,203,138,0.18);
}
.kb::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,203,138,0.55),transparent);
}
.kb__brandrow{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:9px; border-bottom:1px solid rgba(204,224,210,0.05);
}
.kb__brandrow .brand__word{ font-size:11px; letter-spacing:0.18em; color:var(--ink); }
.kb__rows{ display:flex; flex-direction:column; gap:7px; padding:9px 5px 11px; }
.kb__row{ display:flex; justify-content:center; gap:5px; }
.key{
  flex:1; height:38px; max-width:30px; border-radius:7px;
  background:linear-gradient(180deg,#21402c,#152619);
  box-shadow:0 1px 1.5px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  display:grid; place-items:center;
  font-size:15px; font-weight:500; color:var(--ink);
}
.key--wide{ max-width:none; flex:1.5; }
.key--fn{ background:linear-gradient(180deg,#162a1c,#0f1d14); color:var(--ink-2); font-size:12px; max-width:none; flex:1.4; }
.key--space{ max-width:none; flex:4.6; color:var(--ink-3); font-size:12px; }
.key--go{ background:linear-gradient(180deg,#2f7a4f,#22593a); color:#EAFBF0; max-width:none; flex:1.5; }

/* ============================================================ PROBLEM */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.prob__title{ font-size:clamp(2.2rem,3.6vw,3.2rem); margin:26px 0 30px; letter-spacing:-0.02em; }
.prob__body{ display:flex; flex-direction:column; gap:20px; }
.prob__body p{ color:var(--ink-2); font-size:18px; line-height:1.62; max-width:44ch; }

.rhythm{
  position:relative; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg,var(--bg-2),var(--bg)); padding:42px 34px 30px;
  height:380px; display:flex; flex-direction:column; justify-content:flex-end;
}
.rhythm__cap{ position:absolute; top:20px; left:34px; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); }
.rhythm__svg{ width:100%; height:200px; overflow:visible; }
.rhythm__axis{ display:flex; justify-content:space-around; margin-top:18px; border-top:1px solid var(--line-2); padding-top:12px; }
.rhythm__axis span{ font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
.peak-dot{ fill:var(--mint); }

/* ============================================================ OPPORTUNITY */
.opp{ text-align:center; }
.opp__inner{ max-width:1000px; margin:0 auto; }
.opp__title{ font-size:clamp(2.4rem,4.6vw,4.4rem); margin:34px auto 0; max-width:17ch; letter-spacing:-0.025em; }
.opp__body{ margin:36px auto 0; text-align:center; max-width:54ch; }
.opp__crop{
  margin-top:74px; position:relative; border-radius:18px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 50px 100px -40px rgba(0,0,0,0.7);
  max-width:560px; margin-inline:auto;
}
.opp__crop .kb__rows{ gap:9px; padding:14px 10px 16px; }
.opp__crop .kb__row{ gap:8px; }
.opp__crop .key{ height:58px; max-width:50px; font-size:20px; border-radius:11px; }
.opp__crop .key--space,.opp__crop .key--fn,.opp__crop .key--go,.opp__crop .key--wide{ max-width:none; }
.opp__crop .kb__brandrow .brand__word{ font-size:13px; }

/* ============================================================ STRATEGIC QUESTIONS */
.quest{ background:var(--bg-2); padding:0; position:relative; overflow:hidden; }
.quest::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(94,203,138,0.06), transparent 70%); pointer-events:none; z-index:0; }
.quest__list{ display:flex; flex-direction:column; position:relative; z-index:1; }
.quest__list .q{ padding:120px 0; border-bottom:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; text-align:center; position:relative; }
.quest__list .q:last-child{ border-bottom:none; }
.q__text{ font-weight:800; font-size:clamp(2.8rem,5.8vw,5.6rem); line-height:1.05; letter-spacing:-0.03em; max-width:16ch; margin:0 auto; color:var(--ink); }
.q__text .prov{ display:block; color:var(--mint); font-size:1.06em; font-weight:800; margin-top:0.18em; letter-spacing:-0.03em; }
@media (max-width:760px){ .q{ padding:80px 0; } .q__text{ font-size:clamp(2.2rem,9vw,3.2rem); max-width:20ch; } }
@media (max-width:420px){ .q{ padding:64px 0; } .q__text{ font-size:clamp(1.9rem,8.5vw,2.6rem); } }

/* ============================================================ SOLUTION */
.sol__statement{ font-weight:800; font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.18; letter-spacing:-0.02em; text-align:center; max-width:22ch; margin:34px auto 0; text-wrap:balance; }
.sol__statement em{ font-style:normal; color:var(--mint); font-weight:900; }
.sol__sub{ text-align:center; color:var(--ink-3); font-size:13px; font-weight:600; letter-spacing:0.16em; margin:34px auto 0; max-width:50ch; text-transform:uppercase; }
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:74px; }
.pillar{ border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); padding:30px 28px 34px; display:flex; flex-direction:column; }
.pillar__art{ height:188px; margin:-2px -4px 26px; border-radius:12px; background:var(--bg); border:1px solid var(--line-2); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pillar__label{ margin-bottom:14px; }
.pillar__name{ font-weight:800; font-size:1.7rem; line-height:1; margin-bottom:14px; letter-spacing:-0.02em; }
.pillar__body{ color:var(--ink-2); font-size:15.5px; line-height:1.58; }
.sol__close{ text-align:center; color:var(--ink-2); font-size:18px; line-height:1.6; max-width:60ch; margin:70px auto 0; text-wrap:pretty; }
.sol__close b{ color:var(--ink); font-weight:600; }

/* pillar art — mini keyboard */
.art-kb{ display:flex; flex-direction:column; gap:7px; padding:26px; width:100%; }
.art-kb .r{ display:flex; gap:6px; }
.art-kb i{ flex:1; height:26px; border-radius:6px; background:linear-gradient(180deg,#21402c,#152619); box-shadow:0 1px 0 rgba(0,0,0,.4) inset; }
.art-kb .r:last-child i:last-child{ background:linear-gradient(180deg,#2f7a4f,#22593a); }

/* pillar art — fan app */
.art-app{ width:128px; }
.art-app__scr{ border-radius:16px; background:#070A08; border:1px solid var(--line); padding:14px 13px; display:flex; flex-direction:column; gap:10px; }
.art-app__pts{ font-size:10px; font-weight:600; color:var(--ink-3); letter-spacing:.1em; }
.art-app__big{ font-weight:800; font-size:30px; color:var(--mint); line-height:1; }
.art-app__q{ font-size:11px; color:var(--ink-2); line-height:1.35; border-top:1px solid var(--line-2); padding-top:9px; }
.art-app__opt{ height:22px; border-radius:6px; background:#17231b; display:flex; align-items:center; padding:0 9px; font-size:10px; color:var(--ink-2); }
.art-app__opt.on{ background:var(--mint-soft); color:var(--mint); }

/* pillar art — admin */
.art-adm{ width:84%; }
.art-adm__win{ border-radius:9px; overflow:hidden; border:1px solid var(--line); background:var(--bg-3); }
.art-adm__bar{ display:flex; gap:5px; padding:8px 10px; background:var(--bg-2); border-bottom:1px solid var(--line-2); }
.art-adm__bar i{ width:7px; height:7px; border-radius:50%; background:var(--ink-4); }
.art-adm__body{ padding:13px; display:flex; flex-direction:column; gap:8px; }
.art-adm__row{ display:flex; align-items:center; gap:8px; }
.art-adm__chip{ height:9px; border-radius:4px; background:var(--line); }
.art-adm__sched{ margin-top:3px; height:30px; border-radius:6px; background:var(--mint-soft); border:1px solid rgba(94,203,138,.3); display:flex; align-items:center; padding:0 10px; font-size:10px; font-weight:600; color:var(--mint); letter-spacing:.03em; }

/* ============================================================ ECOSYSTEM */
.eco{ background:radial-gradient(ellipse 64% 54% at 50% 40%, rgba(26,74,46,0.42), var(--bg-2) 72%); }
.eco__head{ text-align:center; margin-bottom:64px; }
.eco__title{ font-weight:800; font-size:clamp(2rem,3.6vw,3rem); color:var(--ink); margin-top:24px; letter-spacing:-0.025em; }
.eco__lead{ margin:22px auto 0; max-width:50ch; color:var(--ink-2); font-size:18px; line-height:1.6; text-align:center; text-wrap:pretty; }
.diagram{ max-width:860px; margin:0 auto; position:relative; }
.diagram__svg{ width:100%; height:auto; display:block; overflow:visible; }

.node-label{ font-family:var(--sans); fill:var(--ink); font-weight:700; }
.node-sub{ font-family:var(--sans); fill:var(--mint); letter-spacing:0.10em; text-transform:uppercase; font-weight:600; }
.node-sub--muted{ fill:var(--ink-3); }
.node-line{ stroke:rgba(204,224,210,0.16); stroke-width:1.4; fill:none; }

.eco-card{ fill:#121C15; stroke:rgba(204,224,210,0.13); stroke-width:1.2; }
.eco-pill{ fill:#121C15; stroke:rgba(204,224,210,0.18); stroke-width:1.2; }
.eco-hub{ fill:#15281C; stroke:var(--mint); stroke-width:1.6; }
.eco-out{ fill:#163420; stroke:rgba(94,203,138,0.50); stroke-width:1.3; }
.node-out-label{ fill:#84E7AB; font-family:var(--sans); font-weight:700; letter-spacing:0.01em; }

.pulse{ fill:var(--mint); }
.pulse--in{ fill:#9FEFC0; }

.hub-ring{ fill:none; stroke:var(--mint); stroke-width:1.4; opacity:0; transform-box:fill-box; transform-origin:center; }
.js .hub-ring{ animation:hubRing 3.4s ease-out infinite; }
@keyframes hubRing{ 0%{ opacity:.45; transform:scale(1); } 70%{ opacity:0; transform:scale(1.13); } 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .js .hub-ring{ animation:none !important; } }

/* ============================================================ CTA */
.cta{ text-align:center; }
.cta__title{ font-size:clamp(2.4rem,4.6vw,4.2rem); letter-spacing:-0.025em; }
.cta__sub{ margin:24px auto 0; color:var(--ink-2); font-size:18px; max-width:52ch; }
.cta__action{
  display:flex; flex-direction:column; align-items:center;
  width:100%; max-width:520px; margin:56px auto 20px; gap:12px;
}
.cta__form{ display:flex; width:100%; gap:10px; justify-content:center; align-items:flex-start; margin:0; }
.cta__field{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.cta__input{
  width:100%; height:54px; border-radius:8px; background:var(--bg-3); border:1px solid var(--line);
  color:var(--ink); padding:0 18px; font-size:15px; font-family:var(--sans);
  transition:border-color .18s var(--ease);
}
.cta__input::placeholder{ color:var(--ink-3); }
.cta__input:focus{ outline:none; border-color:var(--mint); }
.cta__input.is-invalid{ border-color:var(--coral); }
.cta__input.is-invalid:focus{ border-color:var(--coral); }
.cta__error{ margin:0; font-size:13.5px; line-height:1.35; color:var(--coral); text-align:left; }
.cta__error[hidden]{ display:none; }
.cta__foot{
  margin:0; max-width:34ch; color:var(--ink-3); font-size:14.5px; line-height:1.45; text-align:center;
}
.cta__ok{ margin-top:20px; color:var(--mint); font-size:15px; opacity:0; transition:opacity .3s var(--ease); }
.cta__ok.show{ opacity:1; }

/* ============================================================ FOOTER */
.footer{ border-top:1px solid var(--line-2); padding:38px 0; }
.footer__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer__tag{ color:var(--ink-3); font-size:13.5px; letter-spacing:0.02em; }

/* ============================================================ STRATEGIC INTRO (cinematic sequence) */
.intro{
  position:relative; z-index:1;
  --intro-black:#000000;
  /* solid through panels 1–2 + most of 3; long ramp to clear at hero (on section bg, not overlay) */
  background:linear-gradient(180deg,
    var(--intro-black) 0%,
    var(--intro-black) 74%,
    rgba(0,0,0,0.96) 80%,
    rgba(0,0,0,0.88) 85%,
    rgba(0,0,0,0.76) 89%,
    rgba(0,0,0,0.62) 92.5%,
    rgba(0,0,0,0.46) 95.5%,
    rgba(0,0,0,0.30) 97.5%,
    rgba(0,0,0,0.16) 98.8%,
    rgba(0,0,0,0.06) 99.6%,
    transparent 100%
  );
}
/* ============================================================ PANELS */
.panel{
  position:relative; z-index:1;
  background:transparent;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  scroll-snap-align:start; scroll-snap-stop:normal;
  overflow:hidden;
  padding:110px 0 96px;
}
.panel + .panel::before{
  content:""; position:absolute; top:0; left:56px; right:56px; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}

.panel__grid{
  position:relative; z-index:3;
  display:grid; align-items:center;
  grid-template-columns:1fr 1fr; gap:80px;
}

/* ---------- NUMBER BLOCK ---------- */
.numblock{ position:relative; }
.num{
  font-weight:800; line-height:0.84; letter-spacing:-0.05em;
  font-size:clamp(4.6rem,12.5vw,9.6rem); color:#EEF5EF;
  text-shadow:0 0 60px rgba(94,203,138,0.18);
  white-space:nowrap;
}
.num__u{ color:var(--mint); font-weight:700; font-size:0.34em; letter-spacing:-0.01em; }
.num__pct{ color:var(--mint); font-weight:700; font-size:0.40em; vertical-align:0.72em; margin-left:0.02em; }
.numsub{
  margin-top:24px; font-size:clamp(15px,1.4vw,19px); font-weight:500; letter-spacing:0.005em;
  color:var(--ink-3); max-width:22ch; line-height:1.45;
}
.panel[data-panel="0"] .numsub{ max-width:none; white-space:nowrap; }

/* ---------- STATEMENT + QUESTION ---------- */
.stmt{
  font-weight:800; font-size:clamp(2.2rem,4.6vw,4.1rem); line-height:1.04;
  letter-spacing:-0.04em; color:var(--ink);
}
.q-text{
  display:block; margin-top:0.5em;
  font-weight:800; font-size:clamp(2.2rem,4.6vw,4.1rem); line-height:1.04;
  letter-spacing:-0.04em; color:var(--mint);
}
.cell{ position:relative; z-index:3; }
.col--right{ text-align:left; }

/* ============================================================ BACKGROUND ART */
.art{
  position:absolute; z-index:1; pointer-events:none;
  top:50%; transform:translateY(-50%);
  will-change:transform, opacity;
}
.art img{ width:100%; height:auto; display:block; }
.art__glow{
  position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(26,74,46,0.5), transparent 64%);
}

/* Panel 1 — keyboard */
.art--kb{ left:46%; width:min(58vw,820px); transform:translate(-46%,-50%); }
.art--kb img{ position:relative; z-index:1; mix-blend-mode:screen; opacity:0.88; }
.art--kb::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:rgba(0,0,0,0.5);
}
.art--kb .art__glow{ width:600px; height:480px; opacity:.55; }

/* Panel 2 — network */
.art--web{ left:50%; width:min(62vw,860px); transform:translate(-50%,-50%); }
.art--web img{
  position:relative; z-index:1;
  mix-blend-mode:screen; opacity:0.68;
  filter:saturate(0.85) hue-rotate(-10deg);
}
.art--web::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:rgba(0,0,0,0.7);
}
.art--web .art__glow{ width:560px; height:480px; opacity:.5; }

/* Panel 3 — phone orbit */
.art--orbit{ left:48%; width:min(54vw,740px); transform:translate(-48%,-50%); }
.art--orbit img{
  position:relative; z-index:1;
  mix-blend-mode:screen; opacity:0.92;
  filter:brightness(0.95) contrast(1.04) saturate(1.05);
}
.art--orbit::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:rgba(0,0,0,0.5);
}
.art--orbit .art__glow{ width:520px; height:560px; opacity:.5; }

/* ============================================================ STAGGERED REVEAL (intro panels) */
#intro .reveal-i{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js #intro .reveal-i.in{ opacity:1; transform:none; }
#intro .reveal-i.di1{ transition-delay:.05s; }
#intro .reveal-i.di2{ transition-delay:.16s; }
#intro .reveal-i.di3{ transition-delay:.30s; }

/* asset enter — same motion language as .reveal, tuned for centered art */
.js .art{
  opacity:0; filter:blur(5px);
  transition:opacity 1.2s var(--ease), transform 1.05s var(--ease), filter 1.2s var(--ease);
}
.js .in .art{ opacity:1; filter:blur(0); transition-delay:.14s; }
.js .art--kb{ transform:translate(-46%, calc(-50% + 28px)); }
.js .in .art--kb{ transform:translate(-46%,-50%); }
.js .art--web{ transform:translate(-50%, calc(-50% + 28px)); }
.js .in .art--web{ transform:translate(-50%,-50%); }
.js .art--orbit{ transform:translate(-48%, calc(-50% + 28px)); }
.js .in .art--orbit{ transform:translate(-48%,-50%); }
/* ============================================================ SCROLL REVEAL */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.12s; } .d2{ transition-delay:.24s; } .d3{ transition-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  html{ scroll-snap-type:none !important; }
  .panel{ scroll-snap-stop:normal; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  #intro .reveal-i{ opacity:1 !important; transform:none !important; }
  .js .art{ opacity:0.35 !important; filter:none !important; transform:none !important; }
  .js .art--kb,.js .art--web,.js .art--orbit{ transform:none !important; }
}

/* ============================================================ RESPONSIVE */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; gap:48px; }
  .stage{ order:0; }
  .phone{ transform:rotateY(-10deg) rotateX(4deg); width:300px; }
  .two-col{ grid-template-columns:1fr; gap:48px; }
  .pillars{ grid-template-columns:1fr; gap:20px; max-width:440px; margin-inline:auto; }
  .panel__grid{ gap:40px; }
  .art--kb,.art--web,.art--orbit{ width:62vw; }
}
@media (max-width:760px){
  .wrap{ padding:0 22px; }
  .nav,.nav.is-scrolled{ padding:14px 22px; }
  .section{ padding:96px 0; }
  .hero{ padding:120px 0 70px; }
  .opp__crop .key{ height:44px; max-width:42px; font-size:15px; }
  .cta__action{ margin-top:44px; margin-bottom:16px; max-width:none; }
  .cta__form{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .cta__field{ flex:none; width:100%; }
  .cta__form .btn{
    width:100%;
    justify-content:center;
    height:54px;
  }
  .footer__in{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hero__title{ font-size:clamp(2.6rem,11vw,3.8rem); }
  .panel{ min-height:88vh; min-height:88svh; padding:92px 0 80px; }
  .panel__grid{ grid-template-columns:1fr; gap:26px; }
  .art{ opacity:1 !important; }
  .art--kb,.art--web,.art--orbit{ width:120%; left:50%; transform:translate(-50%,-50%); }
  .js .art--kb,.js .art--web,.js .art--orbit{ transform:translate(-50%, calc(-50% + 28px)); }
  .js .in .art--kb,.js .in .art--web,.js .in .art--orbit{ transform:translate(-50%,-50%); }
  .art img{ opacity:0.5 !important; }
}
@media (max-width:420px){
  .opp__crop .key{ height:34px; max-width:32px; font-size:12px; border-radius:7px; }
  .opp__crop .kb__rows,.opp__crop .kb__row{ gap:5px; }
}