/* ============================================================
   ANYLK — poster theme (2026-11). Loaded after home.css on the home page.
   One fixed look: deep navy, electric blue, Anton display type. The page chrome no longer
   changes with the hour; only the 3D island's light does (js/island.js still sets data-scene,
   every token below simply answers the same for all four scenes).
   ============================================================ */
html:root, html:root[data-scene]{
  --blue:#2F7BFF; --blue-strong:#1F6BFF; --blue-soft:#6AA5FF; --navy:#050914;
  --ink:#F2F6FF; --ink-soft:#A9B7D9; --grad-a:#2F7BFF; --grad-b:#2F7BFF; --indigo:#1F6BFF; --azure:#2F7BFF; --teal:#2F7BFF;
  --panel:rgba(6,12,30,.78); --panel-line:rgba(120,160,255,.24); --chip:rgba(8,16,40,.62);
  --bg:#050914; --surface:#0B1226; --surface-solid:#0B1226; --surface-2:#080D1C; --field:rgba(255,255,255,.06);
  --line:rgba(140,170,255,.16); --scrim:#050914; --navbg:rgba(5,9,20,.82); --menu:#050914;
  --teal-ink:#6AA5FF; --amber-ink:#F7B955; --shadow:0 26px 50px -30px rgba(0,0,0,.8);
  --display:Anton,Impact,"Arial Narrow",sans-serif; color-scheme:dark;
}
@media (max-width:820px), (hover:none){
  html:root, html:root[data-scene]{ --panel:rgba(8,14,34,.95); --chip:rgba(10,18,44,.92); --navbg:rgba(5,9,20,.95) }
}

/* ---------- type ---------- */
h1,h2{ font-weight:400 !important; text-transform:uppercase; letter-spacing:.008em !important }
h3,h4{ font-family:var(--body) }
h1{ font-size:clamp(56px,7.4vw,112px); line-height:.9 }
.sec h2{ font-size:clamp(40px,6.4vw,96px); line-height:.95 }
.finale h2{ font-size:clamp(46px,8vw,120px); line-height:.92 }
.card h2{ font-size:clamp(30px,2.9vw,42px); line-height:1 }
.grad{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--blue) }
.grad-gold{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--marigold) }
.eyebrow{ color:var(--blue-soft) }

/* ---------- stage ---------- */
.sky{ background:#050914 !important }
.scrim{ background:linear-gradient(90deg,#050914 0%,rgba(5,9,20,.94) 26%,rgba(5,9,20,.55) 46%,transparent 66%) }

/* ---------- buttons ---------- */
.btn.primary{ background:var(--blue-strong); box-shadow:0 12px 34px -12px rgba(47,123,255,.9) }
.btn.primary:hover{ background:#3A82FF; box-shadow:0 16px 38px -12px rgba(47,123,255,1) }

/* ---------- nav: logo left, links centred with a dot under the current one, download right ---------- */
.logo{ background:none; color:#fff; font-family:Anton,Impact,sans-serif; font-weight:400; letter-spacing:.05em; font-size:27px }
.nav-in{ gap:20px }
.nav-links{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; gap:34px; font-size:15px; font-weight:500 }
.nav-links a{ position:relative; display:block; padding:8px 0; color:rgba(255,255,255,.86); transition:color .2s }
.nav-links a::after{ content:""; position:absolute; left:50%; bottom:-3px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--blue); opacity:0; transform:translateY(-4px); transition:opacity .2s, transform .2s }
.nav-links a:hover,.nav-links a.is-active{ color:#fff }
.nav-links a:hover::after,.nav-links a.is-active::after{ opacity:1; transform:none }
.nav-links a.is-active{ font-weight:600 }
.nav .btn{ margin-left:auto }
.menu-btn{ border:0; background:none; border-radius:10px; width:44px; height:44px; -webkit-backdrop-filter:none; backdrop-filter:none; color:#fff }
.menu-btn svg{ width:28px; height:28px }

/* ---------- hero ---------- */
.hero{ padding-top:150px }
.hero .eyebrow{ display:none }
.hero-copy{ max-width:760px }
.hero-strip{ position:absolute; left:0; right:0; top:78px }
.hero-strip .row{ display:flex; justify-content:space-between; gap:14px; border-block:1px solid var(--line); padding:10px 0; font:500 12px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft) }
.hero-nums{ display:flex; flex-wrap:wrap; gap:8px 28px; margin:2px 0 0; padding:0; list-style:none }
.hero-nums li{ display:flex; align-items:baseline; gap:8px }
.hero-nums b{ font:400 44px/1 Anton,Impact,sans-serif; color:var(--blue-soft) }
.hero-nums span{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft) }

/* ---------- panels ---------- */
.box{ border-radius:22px }
.step-n{ font-family:Anton,Impact,sans-serif }

@media (max-width:1100px) and (min-width:821px){ .nav-links{ gap:22px; font-size:14px } }

@media (max-width:820px){
  .scrim{ background:linear-gradient(0deg,#050914 0%,#050914 34%,rgba(5,9,20,.6) 48%,transparent 62%) }
  .hero{ padding-top:0 }
  .hero-strip{ display:none }
  h1{ font-size:clamp(44px,13.6vw,76px) }
  .sec h2{ font-size:clamp(38px,11.5vw,60px) }
  .hero-nums{ gap:6px 18px } .hero-nums b{ font-size:34px } .hero-nums span{ font-size:10.5px }

  /* phone bar: the logo and three lines, nothing else */
  .nav,.nav.scrolled{ background:var(--navbg) }
  .nav .btn{ display:none }
  .menu-btn{ display:inline-flex; margin-left:auto }
  /* phone menu: the whole screen, poster type */
  .nav-links{ position:fixed; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 64px); bottom:0; transform:none; display:none; flex-direction:column; gap:0;
    padding:14px 22px 120px; border:0; border-radius:0; background:#050914; box-shadow:none; overflow-y:auto }
  .menu-open .nav-links{ display:flex }
  .nav-links a{ padding:15px 0; border-radius:0; border-bottom:1px solid var(--line); font:400 30px/1.1 Anton,Impact,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#fff }
  .nav-links li:nth-child(even) a{ color:var(--blue) }
  .nav-links a::after{ display:none }
  .nav-links a:active{ background:none; opacity:.7 }
  .nav.menu-open{ background:#050914; -webkit-backdrop-filter:none; backdrop-filter:none }
  .nav.menu-open .btn{ display:flex; position:fixed; left:22px; right:22px; bottom:calc(env(safe-area-inset-bottom,0px) + 26px); margin:0; padding:15px 22px; font-size:16px }
  html.menu-lock,html.menu-lock body{ overflow:hidden }
}

.hero h1 .grad{ display:block }

/* ---------- founder, download band ---------- */
.founder-id b{ font:700 22px var(--body); letter-spacing:-.01em }
.photo span{ font-family:Anton,Impact,sans-serif; font-weight:400 }
.dl{ background:radial-gradient(900px 420px at 50% 120%,#2F7BFF 0%,#1447C8 45%,#0A1E5C 100%); border:1px solid rgba(140,170,255,.3) }
.dl .kicker{ color:#CFE0FF }
.dl h2 span{ color:#9CC4FF }

/* contact form: field only bots see */
.form .hp{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ---------- nav v2: a plane marks the current section (no dots); phone bar is see-through ---------- */
.nav-links a::after{ display:none }
.nav-links a:hover{ color:var(--blue-soft) }
.nav-links a.is-active{ color:#fff }
.nav-plane{ position:absolute; left:0; bottom:-13px; width:18px; height:18px; margin-left:-9px; color:var(--blue); opacity:0; pointer-events:none;
  transition:left .7s cubic-bezier(.45,.05,.2,1), opacity .3s }
.nav-plane.on{ opacity:1 }
.nav-plane svg{ display:block; width:100%; height:100%; transform:rotate(90deg); transition:transform .35s; filter:drop-shadow(0 0 6px rgba(47,123,255,.8)) }
.nav-plane.back svg{ transform:rotate(-90deg) }
@media (prefers-reduced-motion:reduce){ .nav-plane{ transition:opacity .3s } }
@media (max-width:820px){
  .nav-plane{ display:none }
  /* no bar on phones: the logo and the three lines float on the map; a soft fade keeps them readable once content scrolls under */
  .nav,.nav.scrolled{ background:none; border-bottom-color:transparent; -webkit-backdrop-filter:none!important; backdrop-filter:none!important }
  .nav.scrolled{ background:linear-gradient(rgba(5,9,20,.92) 0%,rgba(5,9,20,.7) 55%,rgba(5,9,20,0) 100%); padding-bottom:14px }
  .nav.menu-open{ background:#050914; padding-bottom:0 }
  .logo,.menu-btn{ filter:drop-shadow(0 2px 8px rgba(0,0,0,.7)) }
  .time-hud{ top:calc(env(safe-area-inset-top,0px) + 62px) }
}
@media (max-width:820px){ .nav,.nav.scrolled{ border-bottom:0!important; box-shadow:none!important } }