/* ============================================================================
   BEACON WEB STUDIO — cinematic dark design system (hand-written, no framework)
   Near-black navy canvas · gold beam · Bricolage Grotesque display · Inter body
   State of the art: scroll-driven animations, View Transitions, conic borders,
   pointer spotlights, pinned scrollytelling. All GPU-safe, reduced-motion aware.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --bg0:   #071221;             /* page canvas — deep night blue        */
  --bg1:   #0B1B33;             /* raised band                          */
  --navy:  #0B2545;             /* brand navy                           */
  --panel: rgba(255,255,255,.05);
  --panel-2: rgba(255,255,255,.085);
  --line:  rgba(255,255,255,.11);
  --line-2: rgba(255,255,255,.19);

  --gold:     #F0B254;
  --gold-hot: #FFD9A0;
  --gold-deep:#C98A2E;
  --blue:     #5BA8F2;          /* faint bright-blue ambient highlights */

  --ink:   #F4F8FE;             /* headings on dark                     */
  --body:  #C3CFE0;             /* body text                            */
  --dim:   #91A2BA;             /* secondary                            */

  /* starfield tiles — tiny white dots, painted once, tiled */
  --stars-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='14' cy='36' r='1' opacity='.7'/%3E%3Ccircle cx='86' cy='12' r='.8' opacity='.5'/%3E%3Ccircle cx='150' cy='58' r='1.1' opacity='.8'/%3E%3Ccircle cx='208' cy='30' r='.7' opacity='.45'/%3E%3Ccircle cx='44' cy='110' r='.9' opacity='.6'/%3E%3Ccircle cx='120' cy='140' r='.7' opacity='.45'/%3E%3Ccircle cx='190' cy='118' r='1' opacity='.7'/%3E%3Ccircle cx='28' cy='186' r='.8' opacity='.5'/%3E%3Ccircle cx='96' cy='208' r='1.1' opacity='.75'/%3E%3Ccircle cx='168' cy='190' r='.7' opacity='.5'/%3E%3Ccircle cx='226' cy='160' r='.9' opacity='.6'/%3E%3Ccircle cx='66' cy='66' r='.6' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  --stars-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='60' cy='80' r='1.5' opacity='.9'/%3E%3Ccircle cx='240' cy='40' r='1.3' opacity='.7'/%3E%3Ccircle cx='400' cy='120' r='1.6' opacity='.85'/%3E%3Ccircle cx='140' cy='240' r='1.2' opacity='.6'/%3E%3Ccircle cx='330' cy='300' r='1.5' opacity='.8'/%3E%3Ccircle cx='80' cy='380' r='1.3' opacity='.7'/%3E%3Ccircle cx='430' cy='420' r='1.2' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");

  --df: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --bf: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 44px);
  --sec: clamp(96px, 13vw, 180px);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
}
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --mx { syntax: '<percentage>'; initial-value: 50%; inherits: false; }
@property --my { syntax: '<percentage>'; initial-value: 50%; inherits: false; }

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--bf); font-size: 17px; line-height: 1.7;
  color: var(--body); background: var(--bg0);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }
:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--navy); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -200vw; top: 12px; z-index: 300; }
.skip:focus { left: 12px; background: var(--gold); color: var(--navy); font-weight: 700; padding: .8rem 1.2rem; border-radius: var(--r-sm); }

/* film grain — static tile, painted once, pure cinema */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 250; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* starfield — concentrated in the hero/CTA stages (not site-wide), with a
   gentle twinkle and pointer parallax (JS drives --sx/--sy on the .stage). */
.stage::after {
  content: ""; position: absolute; inset: -24px;
  background-image: var(--stars-b), var(--stars-a);
  background-size: 460px 460px, 240px 240px;
  opacity: .7;
  transform: translate(calc(var(--sx, 0) * 1px), calc(var(--sy, 0) * 1px));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  animation: twinkle 9s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .5; } 50% { opacity: .8; } }

/* faint bright-blue ambient washes — life for the in-between sections */
.ambient { position: relative; }
.ambient::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 380px at 88% 0%, rgba(91,168,242,.09), transparent 62%),
    radial-gradient(540px 340px at 6% 100%, rgba(91,168,242,.06), transparent 62%);
}
.band { position: relative; }
.band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 420px at 92% 4%, rgba(91,168,242,.1), transparent 60%),
    radial-gradient(560px 360px at 4% 96%, rgba(91,168,242,.07), transparent 60%);
}
.glow-blue {
  position: absolute; width: min(46vw, 560px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(91,168,242,.22), rgba(91,168,242,0) 62%) !important;
}

/* ------------------------------------------------------- view transitions */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(18px); } }
::view-transition-old(root) { animation: vt-out .3s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }

/* -------------------------------------------------------------- typography */
h1, h2, h3 { font-family: var(--df); font-weight: 700; color: var(--ink); line-height: 1.02; letter-spacing: -.03em; }
.h-hero { font-size: clamp(3rem, 8vw, 7rem); line-height: .98; letter-spacing: -.04em; }
.h-2 { font-size: clamp(2.1rem, 5vw, 3.9rem); }
.h-3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); letter-spacing: -.02em; }
.lede { font-size: clamp(1.06rem, 1.5vw, 1.3rem); line-height: 1.65; color: var(--dim); }
.gold { color: var(--gold); }

.gold-flow {
  background: linear-gradient(100deg, var(--gold) 20%, var(--gold-hot) 42%, var(--gold) 60%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.loaded .gold-flow { animation: flow 2.2s ease .9s 1 both; }
@keyframes flow { from { background-position: 120% center; } to { background-position: 0% center; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ""; width: 28px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow.bare::before { display: none; }

/* ----------------------------------------------------------------- layout */
.wrap { width: min(var(--wrap), 100% - var(--pad) * 2); margin-inline: auto; }
.sec { padding-block: var(--sec); }
.sec-tight { padding-block: clamp(64px, 9vw, 120px); }
.band { background: linear-gradient(180deg, var(--bg1), var(--bg0)); }
.center { text-align: center; }
.measure { max-width: 46rem; }
.m-auto { margin-inline: auto; }
.hairline-t { border-top: 1px solid var(--line); }
.hairline-b { border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-weight: 600; font-size: 1.02rem; line-height: 1; letter-spacing: -.01em;
  padding: 1.1rem 1.8rem; border-radius: 999px; border: 1px solid transparent;
  position: relative; overflow: hidden; white-space: nowrap;
  transition: transform .2s var(--ease), background-color .25s, border-color .25s, color .25s, box-shadow .3s var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(.96); }
.btn .arr { width: 1.05em; height: 1.05em; flex: none; transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-sm { padding: .8rem 1.35rem; font-size: .95rem; }

.btn-gold { background: var(--gold); color: #06121F; box-shadow: 0 0 0 0 rgba(240,178,84,0), 0 14px 38px -14px rgba(240,178,84,.55); }
.btn-gold:hover { background: var(--gold-hot); box-shadow: 0 0 44px -8px rgba(240,178,84,.5), 0 18px 44px -14px rgba(240,178,84,.6); }
.btn-gold::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.7) 50%, transparent 58%);
  transform: translateX(-150%) skewX(-10deg); transition: transform .7s var(--ease);
}
.btn-gold:hover::after { transform: translateX(150%) skewX(-10deg); }

.btn-line { border-color: var(--line-2); color: var(--ink); background: rgba(255,255,255,.03); }
.btn-line:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); }

.btn-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--gold); }
.btn-link .arr { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.btn-link:hover .arr { transform: translateX(5px); }

/* ------------------------------------------------------------------ cards */
.card {
  position: relative; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  backdrop-filter: none;
}
.card-pad { padding: clamp(1.5rem, 2.6vw, 2.4rem); }
.lift { transition: transform .45s var(--ease), border-color .45s var(--ease), background-color .45s; }
.lift:hover { transform: translateY(-7px); border-color: var(--line-2); background: var(--panel-2); }

/* pointer spotlight — gold halo border that follows the cursor */
.spot::before, .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.spot::before {
  inset: -1px; padding: 1px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(240,178,84,.75), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.spot::after { background: radial-gradient(340px circle at var(--mx) var(--my), rgba(240,178,84,.08), transparent 60%); }
.spot:hover::before, .spot:hover::after { opacity: 1; }

.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .85rem; font-weight: 600; padding: .5rem 1.05rem; border-radius: 999px;
  border: 1px solid rgba(240,178,84,.3); background: rgba(240,178,84,.08); color: var(--gold-hot);
}
.pill .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--gold); box-shadow: 0 0 12px 2px rgba(240,178,84,.8); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 6px 1px rgba(240,178,84,.5); } 50% { box-shadow: 0 0 16px 4px rgba(240,178,84,.95); } }

.tile {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem;
  border-radius: var(--r-md); color: var(--gold);
  background: linear-gradient(160deg, rgba(240,178,84,.16), rgba(240,178,84,.05));
  border: 1px solid rgba(240,178,84,.22);
}
.tile svg { width: 1.45rem; height: 1.45rem; }

.check-list { display: grid; gap: .95rem; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--ink); font-weight: 450; }
.check-list svg { width: 1.3rem; height: 1.3rem; color: var(--gold); flex: none; margin-top: .14rem; }

/* ------------------------------------------------------------- the beacon */
.stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.beam-a, .beam-b { position: absolute; top: -18%; left: -6%; width: 160%; aspect-ratio: 1; transform-origin: 0 0; }
.beam-a { background: conic-gradient(from 18deg at 0 0, transparent 0deg, rgba(255,217,160,.13) 10deg, rgba(255,217,160,.03) 22deg, transparent 32deg); }
.beam-b { background: conic-gradient(from 40deg at 0 0, transparent 0deg, rgba(240,178,84,.07) 8deg, transparent 20deg); }
.glow {
  position: absolute; left: -16%; top: -30%; width: min(60vw, 760px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(240,178,84,.3), rgba(240,178,84,0) 60%);
}
.gridlines {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(80% 64% at 30% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(80% 64% at 30% 0%, #000 30%, transparent 80%);
}
#dust { position: absolute; inset: 0; }

.beam-a, .beam-b, .glow { opacity: 0; }
.loaded .beam-a { opacity: 1; transition: opacity 1.1s ease .35s; animation: sway-a 19s ease-in-out 1.9s infinite; }
.loaded .beam-b { opacity: 1; transition: opacity 1.3s ease .5s; animation: sway-b 26s ease-in-out 2.2s infinite; }
.loaded .glow { opacity: 1; transition: opacity 1.4s ease .55s; animation: breathe 9s ease-in-out 2s infinite; }
.loaded .beam-sweep-in { animation: settle 1.6s var(--ease) .25s both; }
@keyframes settle { from { transform: rotate(-17deg); } to { transform: rotate(0deg); } }
@keyframes sway-a { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } }
@keyframes sway-b { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }
@keyframes breathe { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
.beam-sweep-in { transform-origin: 2% 0; position: absolute; inset: 0; }

/* hero scroll scrub — beam dims & rotates away as you leave (progressive) */
@supports (animation-timeline: scroll()) {
  .hero-scrub { animation: hero-leave linear both; animation-timeline: scroll(); animation-range: 0 110vh; }
  @keyframes hero-leave { to { transform: rotate(9deg); opacity: .25; } }
}

/* -------------------------------------------------------------- hero stage */
.line-mask { display: block; overflow: hidden; padding-block: .045em; }
.line-mask > span { display: block; transform: translateY(115%) rotate(2.2deg); transform-origin: 0 100%; }
.loaded .line-mask > span { transform: none; transition: transform 1.1s var(--ease); }
.loaded .line-mask:nth-of-type(1) > span { transition-delay: .08s; }
.loaded .line-mask:nth-of-type(2) > span { transition-delay: .2s; }
.loaded .line-mask:nth-of-type(3) > span { transition-delay: .32s; }
.rise { opacity: 0; transform: translateY(26px); }
.loaded .rise { opacity: 1; transform: none; transition: opacity .95s var(--ease), transform .95s var(--ease); }
.loaded .rise[data-d="1"] { transition-delay: .55s; }
.loaded .rise[data-d="2"] { transition-delay: .7s; }
.loaded .rise[data-d="3"] { transition-delay: .85s; }

.scroll-cue { position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); display: grid; justify-items: center; gap: .5rem; color: var(--dim); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; }
.scroll-cue::after { content: ""; width: 1px; height: 44px; background: linear-gradient(180deg, var(--gold), transparent); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------------------------------------------------------------- reveals */
.rv, .rv-l, .rv-r { opacity: 0; transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv { transform: translateY(40px); }
.rv-l { transform: translateX(-52px); }
.rv-r { transform: translateX(52px); }
.rv.in, .rv-l.in, .rv-r.in { opacity: 1; transform: none; }
[data-d="1"] { transition-delay: .1s; }
[data-d="2"] { transition-delay: .2s; }
[data-d="3"] { transition-delay: .3s; }

/* scroll-scrubbed entrance for device frames (progressive enhancement) */
@supports (animation-timeline: view()) {
  .scrub { animation: scrub-in both var(--ease); animation-timeline: view(); animation-range: entry 5% entry 70%; }
  @keyframes scrub-in { from { opacity: 0; transform: perspective(1200px) translateY(90px) rotateX(14deg) scale(.92); } to { opacity: 1; transform: none; } }
}

/* -------------------------------------------------------------------- nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; border-bottom: 1px solid transparent; transition: background-color .35s, border-color .35s; }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.nav.solid { background: rgba(5,10,18,.72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--df); font-weight: 700; font-size: 1.42rem; letter-spacing: -.02em; color: var(--ink); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav-links { display: flex; gap: 2.4rem; }
.nav-links a { font-size: .97rem; font-weight: 500; color: var(--body); position: relative; padding-block: .35rem; transition: color .25s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--gold); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 1.2rem; }
.nav-staff { font-size: .93rem; font-weight: 500; color: var(--dim); transition: color .25s; }
.nav-staff:hover { color: var(--gold); }
.burger { display: none; width: 46px; height: 46px; place-items: center; border-radius: var(--r-sm); color: var(--ink); }

.drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; }
.drawer.open { visibility: visible; }
.scrim { position: absolute; inset: 0; background: rgba(2,5,10,.6); opacity: 0; transition: opacity .32s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.drawer.open .scrim { opacity: 1; }
.sheet {
  position: absolute; top: 0; right: 0; height: 100dvh; width: min(86%, 380px);
  background: var(--bg1); border-left: 1px solid var(--line);
  padding: 1.4rem 1.6rem 2rem; display: flex; flex-direction: column;
  transform: translateX(103%); transition: transform .42s var(--ease);
}
.drawer.open .sheet { transform: none; }
.sheet-link { display: block; font-family: var(--df); font-size: 1.55rem; font-weight: 600; color: var(--ink); padding: 1rem .1rem; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(24px); transition: opacity .4s var(--ease), transform .4s var(--ease), color .2s; }
.drawer.open .sheet-link { opacity: 1; transform: none; }
.drawer.open .sheet-link:nth-child(1) { transition-delay: .08s; } .drawer.open .sheet-link:nth-child(2) { transition-delay: .14s; }
.drawer.open .sheet-link:nth-child(3) { transition-delay: .2s; } .drawer.open .sheet-link:nth-child(4) { transition-delay: .26s; }
.drawer.open .sheet-link:nth-child(5) { transition-delay: .32s; }
.sheet-link:hover { color: var(--gold); }

/* ---------------------------------------------------------------- marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mq-track { display: flex; gap: 3.8rem; width: max-content; animation: mq 44s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-item { display: inline-flex; align-items: center; gap: .9rem; white-space: nowrap; font-family: var(--df); font-weight: 600; font-size: 1.45rem; letter-spacing: -.015em; color: rgba(242,246,252,.32); }
.mq-item svg { width: .8rem; height: .8rem; color: var(--gold); opacity: .8; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { position: relative; padding: .5rem clamp(1rem, 2.4vw, 2.6rem); text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-n { font-family: var(--df); font-weight: 700; font-size: clamp(2.7rem, 5.6vw, 4.3rem); line-height: 1; letter-spacing: -.03em; color: var(--gold); text-shadow: 0 0 44px rgba(240,178,84,.35); }
.stat-t { margin-top: .6rem; font-weight: 600; color: var(--ink); }
.stat-s { font-size: .9rem; color: var(--dim); }
.stat::after { content: ""; position: absolute; left: 50%; bottom: -1.6rem; transform: translateX(-50%); width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transition: width 1.1s var(--ease) .3s; }
.stat.in::after { width: 64%; }

/* -------------------------------------------- pinned scrollytelling steps */
.pin-wrap { position: relative; }
.pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.pin-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; width: 100%; }
.pin-num { font-family: var(--df); font-weight: 700; font-size: clamp(7rem, 16vw, 13rem); line-height: .9; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(240,178,84,.45); position: relative; }
.pin-num .fill { position: absolute; inset: 0; color: var(--gold); -webkit-text-stroke: 0; clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease); }
.pin[data-step="0"] .pin-num .fill.f0, .pin[data-step="1"] .pin-num .fill.f1, .pin[data-step="2"] .pin-num .fill.f2 { clip-path: inset(0 0 0 0); }
.pin-panels { position: relative; min-height: 16rem; }
.pin-panel { position: absolute; inset: 0; opacity: 0; transform: translateY(34px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.pin[data-step="0"] .pin-panel:nth-child(1), .pin[data-step="1"] .pin-panel:nth-child(2), .pin[data-step="2"] .pin-panel:nth-child(3) { opacity: 1; transform: none; pointer-events: auto; }
.pin-dots { display: flex; gap: .55rem; margin-top: 2.2rem; }
.pin-dots span { width: 34px; height: 3px; border-radius: 3px; background: var(--line-2); transition: background .4s; }
.pin[data-step="0"] .pin-dots span:nth-child(1), .pin[data-step="1"] .pin-dots span:nth-child(2), .pin[data-step="2"] .pin-dots span:nth-child(3) { background: var(--gold); }

/* --------------------------------------------------------- device frames */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.dev-stage { position: relative; perspective: 1400px; }
.dev-stage::before { content: ""; position: absolute; inset: 12% -18px -18px 12%; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(240,178,84,.14), transparent 65%); }
.dev {
  position: relative; border-radius: 20px; overflow: hidden;
  background: #0D1B30; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 60px 110px -42px rgba(0,0,0,.85), 0 0 70px -30px rgba(240,178,84,.25), inset 0 1px 0 rgba(255,255,255,.08);
  transform: rotateY(-7deg) rotateX(2deg);
  transition: transform .55s var(--ease); will-change: transform;
}
.dev.flip { transform: rotateY(7deg) rotateX(2deg); }
.dev-stage:hover .dev { transform: rotateY(0) rotateX(0); }
.dev-bar { display: flex; align-items: center; gap: .42rem; padding: .7rem .95rem; background: rgba(255,255,255,.05); border-bottom: 1px solid var(--line); }
.dev-dot { width: .56rem; height: .56rem; border-radius: 999px; background: rgba(255,255,255,.18); }
.dev-url { margin-left: .55rem; font-size: .73rem; color: var(--dim); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .8rem; }
.dev-body { background: #fff; }

/* ----------------------------------------------------------------- plans */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan-tag { font-size: .95rem; font-weight: 600; color: var(--gold); }
.price { display: flex; align-items: baseline; gap: .35rem; }
.price .n { font-family: var(--df); font-weight: 700; font-size: clamp(2.8rem, 4.2vw, 3.6rem); letter-spacing: -.03em; color: var(--ink); }
.plan-pop { background: linear-gradient(170deg, rgba(240,178,84,.1), var(--panel) 45%); }
.plan-pop::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0deg 40deg, rgba(240,178,84,.25) 90deg, var(--gold) 140deg, var(--gold-hot) 160deg, var(--gold) 180deg, rgba(240,178,84,.25) 230deg, transparent 280deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: orbit 7s linear infinite;
}
@keyframes orbit { to { --ang: 360deg; } }
@supports not (background: conic-gradient(from var(--ang), #000, #fff)) {
  .plan-pop { border-color: rgba(240,178,84,.6); }
}
.plan-flag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  background: var(--gold); color: #06121F; font-weight: 700; font-size: .8rem; letter-spacing: .04em;
  padding: .45rem 1.1rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 30px -10px rgba(240,178,84,.7);
}

/* ------------------------------------------------------------- comparison */
.cmp { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 640px; }
.cmp th, .cmp td { padding: 1.05rem .9rem; text-align: center; border-bottom: 1px solid var(--line); }
.cmp th { font-family: var(--df); font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.cmp td:first-child, .cmp th:first-child { text-align: left; color: var(--ink); font-weight: 500; }
.cmp .hl { background: rgba(240,178,84,.07); }
.cmp .y { color: var(--gold); font-weight: 700; }
.cmp .n2 { color: rgba(255,255,255,.22); }
.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }

/* --------------------------------------------------------------- accordion */
.acc { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; gap: 1.1rem; list-style: none; cursor: pointer; padding: 1.55rem .15rem; font-family: var(--df); font-weight: 600; font-size: 1.22rem; letter-spacing: -.015em; color: var(--ink); transition: color .25s; }
.acc summary:hover { color: var(--gold-hot); }
.acc summary::-webkit-details-marker { display: none; }
.acc-i { font-family: var(--df); color: rgba(240,178,84,.55); font-size: .95rem; min-width: 2rem; }
.acc .chev { width: 1.3rem; height: 1.3rem; color: var(--gold); flex: none; margin-left: auto; transition: transform .4s var(--ease); }
.acc[open] .chev { transform: rotate(45deg); }
.acc-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.acc[open] .acc-b { grid-template-rows: 1fr; }
.acc-b > div { overflow: hidden; }
.acc-b p { padding: 0 .15rem 1.55rem 3.25rem; color: var(--dim); max-width: 62ch; }

/* ------------------------------------------- symmetric grids (services page) */
.svc-grid  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }   /* 2×2 pillars */
.proc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem; }   /* 5 even steps */
.tile-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }     /* 6 even tiles */
.trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }   /* 3 even cards */
@media (max-width: 980px) {
  .svc-grid, .trio-grid { grid-template-columns: 1fr; }
  .proc-grid { grid-template-columns: 1fr; gap: 2rem; }
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------ "what's included" expander */
.more { margin-top: 1.2rem; border-top: 1px solid var(--line); }
.more summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .95rem 0 .15rem; font-weight: 600; font-size: .92rem; color: var(--gold); transition: color .25s; }
.more summary:hover { color: var(--gold-hot); }
.more summary::-webkit-details-marker { display: none; }
.more .chev { width: 1rem; height: 1rem; flex: none; margin-left: auto; transition: transform .4s var(--ease); color: var(--gold); }
.more[open] .chev { transform: rotate(45deg); }
.more[open] .acc-b { grid-template-rows: 1fr; }
.more .acc-b > div > ul { padding: .9rem 0 .4rem; gap: .65rem; }
.more .check-list li { font-size: .92rem; color: var(--body); font-weight: 400; }
.more .check-list svg { width: 1.05rem; height: 1.05rem; margin-top: .18rem; }

/* ------------------------------------------------------------------ forms */
.f-label { display: block; font-weight: 600; font-size: .88rem; color: var(--ink); margin-bottom: .45rem; }
.field {
  width: 100%; font-family: var(--bf); font-size: 1rem; color: var(--ink);
  padding: .98rem 1.1rem; border-radius: 14px; background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field::placeholder { color: var(--dim); }
.field:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.06); box-shadow: 0 0 0 4px rgba(240,178,84,.14); }
.field.err { border-color: #E0564F; box-shadow: 0 0 0 4px rgba(224,86,79,.14); }

.cs { position: relative; }
.cs-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cs-btn { display: flex; align-items: center; justify-content: space-between; gap: .6rem; text-align: left; cursor: pointer; }
.cs-btn::after {
  content: ""; width: 1rem; height: 1rem; flex: none; transition: transform .28s var(--ease);
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237E8DA3' stroke-width='2.4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.cs.open .cs-btn::after { transform: rotate(180deg); }
.cs.open .cs-btn { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(240,178,84,.14); }
.cs-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + .45rem);
  background: #0B1830; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: .4rem;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); max-height: 16rem; overflow: auto;
  opacity: 0; transform: translateY(-7px); pointer-events: none; transition: opacity .2s ease, transform .2s var(--ease);
}
.cs.open .cs-list { opacity: 1; transform: none; pointer-events: auto; }
.cs-opt { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .64rem .8rem; border-radius: 10px; cursor: pointer; font-size: .97rem; color: var(--body); }
.cs-opt:hover, .cs-opt.hl { background: rgba(255,255,255,.07); color: var(--ink); }
.cs-opt.sel { color: var(--gold); font-weight: 600; }
.cs-opt.sel::after { content: "✓"; font-size: .85rem; }
.cs-ph { color: var(--dim); }

/* ------------------------------------------------------------------ legal */
.legal h2 { font-size: 1.4rem; margin: 2.4rem 0 .7rem; }
.legal p, .legal li { color: var(--dim); max-width: 68ch; }
.legal ul { list-style: disc; padding-left: 1.2rem; display: grid; gap: .45rem; margin-block: .6rem; }
.legal a { color: var(--gold); }

/* ----------------------------------------------------------------- footer */
.foot { position: relative; background: var(--bg0); border-top: 1px solid var(--line); overflow: hidden; }
.foot-mark {
  position: absolute; left: 50%; bottom: -.18em; transform: translateX(-50%);
  font-family: var(--df); font-weight: 700; font-size: clamp(6rem, 19vw, 17rem); line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.05); white-space: nowrap; pointer-events: none; user-select: none;
}
.foot a:hover { color: var(--gold); }
.foot-grid { position: relative; display: grid; grid-template-columns: 2.1fr 1fr 1fr 1.4fr; gap: clamp(2rem, 4vw, 3.4rem); }
.foot h4 { font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.foot-links { display: grid; gap: .72rem; margin-top: 1.15rem; font-size: .96rem; color: var(--dim); }

/* -------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .feature { grid-template-columns: 1fr; }
  .feature > .swap { order: -1; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 2.6rem; }
  .stat:nth-child(3) { border-left: 0; }
  .plan-grid { grid-template-columns: 1fr; }
  .nav-links, .nav-staff { display: none; }
  .burger { display: grid; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .dev, .dev.flip { transform: none; }
  .pin-wrap { height: auto !important; }
  .pin { position: static; min-height: 0; padding-block: 0; }
  .pin-grid { grid-template-columns: 1fr; }
  .pin-num { display: none; }
  .pin-panels { min-height: 0; display: grid; gap: 1.4rem; }
  .pin-panel { position: static; opacity: 1; transform: none; pointer-events: auto; }
  .pin-dots { display: none; }
}
@media (max-width: 640px) {
  .nav-cta .btn { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .scroll-cue { display: none; }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .line-mask > span { transform: none !important; }
  .rise, .rv, .rv-l, .rv-r, .scrub { opacity: 1 !important; transform: none !important; }
  .beam-a, .beam-b, .glow { opacity: 1 !important; animation: none !important; }
  .mq-track, .plan-pop::before { animation: none !important; }
  .dev, .dev.flip { transform: none !important; }
  #dust { display: none; }
  .pin { position: static; min-height: 0; }
  .pin-panel { position: static; opacity: 1; transform: none; }
}