/* ════════════════════════════════════════════════════════════════
   CNTRL GLOBAL — Landing Page
   Brand system verbatim from CNTRL Global Bible Ch.01
   Shipped build: hero=centered, motion=3d, speed=1, accent=#a82238.
   ════════════════════════════════════════════════════════════════ */
:root{
  --bg:#efefee; --glow:#f5f5f4; --paper:#ffffff; --nested:#f0ede6;
  --warm:#ece9e3; --warm-shadow:#ddd9d3; --inverse:#0e0c0b;
  --line:rgba(0,0,0,0.07); --line-strong:rgba(0,0,0,0.12); --line-subtle:rgba(0,0,0,0.04);
  --ink:#0e0c0b; --body:#28282a; --t2:#6c6a6a; --t3:#98979a; --muted:#aeacae;
  --accent:#8B1A2B; --accent-hi:#a82238; --accent-chip:rgba(139,26,43,0.12);
  --accent-wash:rgba(139,26,43,0.06); --ring:rgba(139,26,43,0.32);

  --f-disp:'Archivo Black','Inter',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --sh-sm:0 1px 3px rgba(50,20,15,0.06);
  --sh-card:0 10px 30px -15px rgba(50,20,15,0.10);
  --sh-md:0 18px 50px -28px rgba(50,20,15,0.22);
  --sh-lg:0 40px 90px -40px rgba(50,20,15,0.30);

  --ease:cubic-bezier(0.2,0,0,1);
  --ease-emph:cubic-bezier(0.3,0,0,1.2);

  /* shipped accent (was the tweakable --accent-live) */
  --accent-live:var(--accent-hi);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.5;
  font-feature-settings:'cv11','ss01','tnum';
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--accent-chip); }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:var(--f-mono); }
.disp{ font-family:var(--f-disp); letter-spacing:-0.02em; }

/* shared layout */
.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 40px; }
.kicker{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--accent-live); white-space:nowrap; }
.kicker.dim{ color:var(--t3); }

/* ── reveal animation primitive ── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:0.08s; } .reveal.d2{ transition-delay:0.16s; }
.reveal.d3{ transition-delay:0.24s; } .reveal.d4{ transition-delay:0.32s; }
body.reduce-motion .reveal{ opacity:1; transform:none; transition:none; }

/* ════ NAV ════ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:90;
  background:rgba(239,239,238,0); backdrop-filter:blur(0px);
  border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); }
.nav.solid{ background:rgba(239,239,238,0.82); backdrop-filter:blur(16px); border-bottom:1px solid var(--line-strong); }
.nav-inner{ max-width:1180px; margin:0 auto; padding:16px 40px; display:flex; align-items:center; gap:24px; }
.nav-brand{ display:flex; align-items:center; gap:11px; }
.nav-lockup{ height:30px; width:auto; object-fit:contain; display:block; transition:opacity .12s var(--ease); }
.nav-brand:hover .nav-lockup{ opacity:0.7; }
.nav-mark{ width:26px; height:26px; object-fit:contain; }
.nav-wordmark{ font-family:var(--f-mono); font-size:12px; letter-spacing:0.16em; font-weight:500; color:var(--ink); white-space:nowrap; }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav-links a{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--t2); padding:8px 13px; border-radius:8px; transition:background .12s var(--ease), color .12s var(--ease); }
.nav-links a:hover{ background:var(--warm); color:var(--ink); }
.nav-cta{ font-family:var(--f-body); font-weight:700; font-size:12.5px; letter-spacing:0.01em;
  background:var(--inverse); color:#fff; padding:10px 18px; border-radius:999px; white-space:nowrap;
  transition:transform .12s var(--ease); margin-left:6px; }
.nav-cta:hover{ transform:translateY(-1px); }

/* mobile hamburger toggle — hidden on desktop */
.nav-toggle{ display:none; margin-left:auto; width:42px; height:42px; border:0; background:transparent;
  cursor:pointer; padding:0; align-items:center; justify-content:center; }
.nav-toggle .bars{ position:relative; width:20px; height:14px; }
.nav-toggle .bars span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--ink);
  border-radius:2px; transition:transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle .bars span:nth-child(1){ top:0; }
.nav-toggle .bars span:nth-child(2){ top:50%; transform:translateY(-50%); }
.nav-toggle .bars span:nth-child(3){ bottom:0; }
body.menu-open .nav-toggle .bars span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
body.menu-open .nav-toggle .bars span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle .bars span:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg); }

@media(max-width:880px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{ position:fixed; inset:62px 0 auto 0; margin:0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(239,239,238,0.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--line-strong);
    padding:8px 24px 22px; transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease); }
  body.menu-open .nav-links{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ font-size:13px; padding:14px 6px; border-radius:0; border-bottom:1px solid var(--line); }
  .nav-links a:hover{ background:transparent; }
  .nav-cta{ margin:14px 0 0; text-align:center; padding:14px 18px; border-bottom:0; }
}

/* ════ HERO (pinned) ════ */
.hero{ position:relative; height:230vh; }
.hero-pin{ position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }

.globe-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  perspective:1400px; pointer-events:none; will-change:transform,opacity; }
/* in the centered layout the globe sits behind the headline → start as a faint
   watermark so the type reads crisp; landing.js ramps opacity up as you scroll. */
body[data-hero="centered"] .globe-stage{ opacity:0.14; }
.globe{ width:min(78vmin,720px); height:auto; object-fit:contain;
  transform-style:preserve-3d; will-change:transform; }
.globe-wrap{ transform-style:preserve-3d; will-change:transform; display:flex; }

.hero-content{ position:relative; z-index:3; text-align:center; max-width:900px; padding:0 40px;
  will-change:transform,opacity; }
.hero-kicker{ margin-bottom:24px; }
.hero h1{ font-family:var(--f-disp); font-size:clamp(38px,6.6vw,90px); line-height:0.94;
  letter-spacing:-0.03em; margin:0; color:var(--ink); text-wrap:balance; }
.hero h1 .accentword{ color:var(--accent-live); }
.hero-sub{ font-size:clamp(16px,1.5vw,20px); color:var(--t2); line-height:1.55;
  max-width:54ch; margin:26px auto 0; text-wrap:pretty; }
.hero-actions{ margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{ font-family:var(--f-body); font-weight:700; font-size:14px; letter-spacing:0.01em;
  border:0; padding:14px 26px; border-radius:999px; cursor:pointer; pointer-events:auto;
  transition:transform .12s var(--ease), box-shadow .2s var(--ease); display:inline-flex; align-items:center; gap:9px; }
.btn-primary{ background:var(--inverse); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--ink); }
.btn .arr{ transition:transform .15s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }

.scroll-hint{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em; color:var(--t3);
  display:flex; flex-direction:column; align-items:center; gap:10px; transition:opacity .4s var(--ease); }
.scroll-hint .bar{ width:1px; height:36px; background:linear-gradient(var(--t3),transparent); animation:hintpulse 2s var(--ease) infinite; }
@keyframes hintpulse{ 0%,100%{ opacity:.3; transform:scaleY(.7); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1);} }

@media(max-width:760px){
  body[data-hero="split"] .hero-content{ text-align:center; margin:0 auto; }
}

/* ════ generic section ════ */
section.block{ position:relative; padding:140px 0; }
.eyebrow-row{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.eyebrow-row .ln{ flex:1; height:1px; background:var(--line-strong); }
.sec-title{ font-family:var(--f-disp); font-size:clamp(30px,4.6vw,60px); line-height:0.98;
  letter-spacing:-0.025em; margin:0; text-wrap:balance; }
.lead{ font-size:clamp(17px,1.8vw,23px); color:var(--t2); line-height:1.5; max-width:62ch; margin:24px 0 0; text-wrap:pretty; }

/* ════ CONNECTION (pinned orbit) ════ */
.connect{ position:relative; height:300vh; }
.connect-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; }
.connect-inner{ width:100%; max-width:1180px; margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.connect-copy h2{ font-family:var(--f-disp); font-size:clamp(28px,3.6vw,52px); line-height:1.0;
  letter-spacing:-0.025em; margin:18px 0 0; }
.connect-copy .lead{ font-size:18px; margin-top:20px; }
.connect-list{ margin-top:34px; display:flex; flex-direction:column; gap:2px; }
.crow{ display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--line);
  opacity:0.32; transition:opacity .5s var(--ease), transform .5s var(--ease); transform:translateX(-8px); }
.crow.lit{ opacity:1; transform:none; }
.crow .cidx{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.1em; color:var(--t3); width:30px; }
.crow.lit .cidx{ color:var(--accent-live); }
.crow .cname{ font-family:var(--f-disp); font-size:clamp(20px,2.4vw,30px); letter-spacing:-0.02em; }
.crow .ctag{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:#fff; background:var(--accent-live); padding:4px 9px; border-radius:6px; white-space:nowrap;
  align-self:center; line-height:1; }
.crow .cdesc{ font-size:13px; color:var(--t2); margin-left:auto; text-align:right; max-width:30ch; }
@media(max-width:760px){ .crow .ctag{ margin-left:auto; } }
@media(max-width:760px){ .crow .cdesc{ display:none; } }

/* orbit viz */
.orbit{ position:relative; aspect-ratio:1/1; width:100%; max-width:520px; margin:0 auto; }
.orbit .ring{ position:absolute; border:1px solid var(--line-strong); border-radius:50%; }
.orbit .ring.r1{ inset:8%; } .orbit .ring.r2{ inset:0; opacity:.5; }
.orbit-globe{ position:absolute; inset:28%; display:flex; align-items:center; justify-content:center; perspective:900px; }
.orbit-globe img{ width:100%; height:auto; will-change:transform; }
.node{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; }
.node .dot{ width:13px; height:13px; border-radius:50%; background:var(--paper);
  border:2px solid var(--accent-live); box-shadow:var(--sh-sm); transform:scale(0); transition:transform .45s var(--ease-emph); }
.node.on .dot{ transform:scale(1); }
.node .nlab{ font-family:var(--f-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--t2); background:var(--paper); border:1px solid var(--line); padding:4px 9px; border-radius:999px;
  opacity:0; transform:translateY(4px); transition:opacity .4s var(--ease) .1s, transform .4s var(--ease) .1s; white-space:nowrap; }
.node.on .nlab{ opacity:1; transform:none; }
.orbit svg.links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.orbit svg.links line{ stroke:var(--accent-live); stroke-width:1.2; stroke-dasharray:4 4;
  opacity:0; transition:opacity .5s var(--ease); }
.orbit svg.links line.on{ opacity:0.55; }
@media(max-width:820px){ .connect-inner{ grid-template-columns:1fr; gap:30px; } .orbit{ max-width:380px; } }

/* ════ OUR APPROACH ════ */
.approach{ background:var(--glow); }
.approach-divider{ height:1px; background:transparent; margin:50px 0 44px; }

/* ════ SPOTLIGHT — Artist CNTRL ════ */
.spotlight{ background:var(--inverse); color:#f5f4f2; padding-top:40px; }
.spotlight .badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono);
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#fff;
  background:var(--accent-live); padding:7px 14px; border-radius:999px; }
.spotlight .badge .pulse{ width:7px; height:7px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.6); animation:livepulse 1.8s var(--ease) infinite; }
@keyframes livepulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.5);} 70%{ box-shadow:0 0 0 8px rgba(255,255,255,0);} 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0);} }
.spot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-top:50px; }
.spot-copy h2{ font-family:var(--f-disp); font-size:clamp(30px,4.4vw,58px); line-height:0.98;
  letter-spacing:-0.025em; margin:22px 0 0; }
.spot-copy .lead{ color:rgba(245,244,242,0.6); }
.feat-list{ margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08); border-radius:16px; overflow:hidden; }
.feat{ background:var(--inverse); padding:20px 22px; }
.feat .fn{ font-family:var(--f-mono); font-size:10px; letter-spacing:0.1em; color:var(--accent-hi); }
.feat .ft{ font-weight:700; font-size:15px; margin-top:9px; color:#fff; }
.feat .fd{ font-size:12.5px; color:rgba(245,244,242,0.55); margin-top:6px; line-height:1.5; }

/* device mock placeholder */
.mock{ position:relative; border-radius:26px; overflow:hidden; background:#000;
  border:1px solid rgba(255,255,255,0.12); box-shadow:var(--sh-lg); aspect-ratio:9/15.5; max-width:330px; margin:0 auto; }
.mock .ph{ position:absolute; inset:0; background:
  repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 14px, rgba(255,255,255,0.015) 14px 28px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.mock .ph .pm{ font-family:var(--f-mono); font-size:10px; letter-spacing:0.12em; color:rgba(255,255,255,0.4); text-transform:uppercase; }
.mock .ph .pmark{ width:64px; height:auto; opacity:0.5; filter:brightness(0) invert(1); }
.mock .notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:96px; height:7px; background:rgba(255,255,255,0.18); border-radius:999px; }
@media(max-width:820px){ .spot-grid,.feat-list{ grid-template-columns:1fr; } }

/* ════ WHY WE BUILD — cards ════ */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
.why-card{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:var(--sh-card); }
.why-card .wn{ font-family:var(--f-mono); font-size:10px; letter-spacing:0.12em; color:var(--accent-live); }
.why-card h3{ font-size:19px; font-weight:700; letter-spacing:-0.01em; margin:14px 0 0; }
.why-card p{ font-size:13.5px; color:var(--t2); line-height:1.6; margin:10px 0 0; }
@media(max-width:820px){ .why-grid{ grid-template-columns:1fr; } }

/* ════ CTA ════ */
.cta{ position:relative; padding:160px 0; text-align:center; overflow:hidden; }
.cta .globe-bg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(120vmin,1000px); opacity:0.05; pointer-events:none; }
.cta h2{ font-family:var(--f-disp); font-size:clamp(34px,6vw,84px); line-height:0.95;
  letter-spacing:-0.03em; margin:0; position:relative; z-index:2; text-wrap:balance; }
.cta .lead{ margin:26px auto 0; text-align:center; position:relative; z-index:2; }
.cta-actions{ margin-top:40px; display:flex; gap:14px; justify-content:center; position:relative; z-index:2; flex-wrap:wrap; }

/* ════ FOOTER ════ */
.footer{ background:var(--inverse); color:rgba(245,244,242,0.7); padding:70px 0 50px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.footer-lockup{ height:38px; width:auto; filter:brightness(0) invert(1); }
.footer-tag{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.1em; color:rgba(245,244,242,0.5);
  margin-top:18px; max-width:34ch; line-height:1.7; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.fcol h4{ font-family:var(--f-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(245,244,242,0.4); margin:0 0 14px; }
.fcol a{ display:block; font-size:13.5px; color:rgba(245,244,242,0.78); padding:5px 0; transition:color .12s var(--ease); }
.fcol a:hover{ color:#fff; }
.footer-bot{ margin-top:54px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.1);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.06em; color:rgba(245,244,242,0.45); }