/* ═══════════════════════════════════════════════════════════════════
   HALYON — base.css  ·  tokens, type, nav, hero, halo
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── LIGHT page surfaces (warm white) ── */
  --bg:        #FAF7F2;
  --bg-2:      #F2EDE5;
  --bg-3:      #EBE5DA;
  --bg-card:   #FFFFFF;

  /* — ink (warm near-black) — */
  --ink:       #1A1712;
  --ink-dim:   #585249;
  --ink-faint: #938C7F;
  --ink-ghost: rgba(26,23,18,0.04);

  /* — hairlines — */
  --line:      rgba(26,23,18,0.12);
  --line-soft: rgba(26,23,18,0.07);
  --line-bright: rgba(26,23,18,0.22);

  /* ── NIGHT surfaces — for the hero stage + dark product frames ── */
  --night:        #050505;
  --night-2:      #0B0B0F;
  --night-3:      #101015;
  --night-card:   #0C0C11;
  --night-ink:    #FFFFFF;
  --night-dim:    #A8AAB5;
  --night-faint:  #6A6C78;
  --night-line:       rgba(255,255,255,0.08);
  --night-line-soft:  rgba(255,255,255,0.045);
  --night-line-bright:rgba(255,255,255,0.16);

  /* — eclipse gradient — */
  --g-peach:   #FFAA8C;
  --g-magenta: #D96BFF;
  --g-violet:  #8A5CFF;
  --g-blue:    #5B7CFF;
  --gradient:  linear-gradient(100deg, var(--g-peach), var(--g-magenta) 38%, var(--g-violet) 68%, var(--g-blue));
  --gradient-soft: linear-gradient(100deg, #FFAA8C, #D96BFF 40%, #8A5CFF 70%, #5B7CFF);

  /* — type — */
  --display: "Satoshi", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "Geist Mono", "SF Mono", ui-monospace, "JetBrains Mono", monospace;

  /* — motion — */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --slow: 1.1s;

  /* — layout — */
  --pad-x: clamp(20px, 5vw, 80px);
  --maxw: 1280px;
  --section-y: clamp(96px, 14vh, 200px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--display);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;
}

@media (max-width: 900px) { body { cursor: auto; } }

::selection { background: rgba(217,107,255,0.22); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: none; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }

/* very subtle warm grain/lift on the light page (no dark vignette) */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.5), transparent 40%),
    radial-gradient(140% 120% at 50% 120%, rgba(217,107,255,0.05), transparent 55%);
  opacity: var(--grain-on, 0.7);
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); }

/* hero alignment variant — defined alongside #intro further down */

/* ─── reveal ───────────────────────────────────────────────────────
   Content is VISIBLE by default (opacity:1) and only the transform
   slides in. CSS transitions can freeze mid-flight in throttled preview
   iframes, so we never gate VISIBILITY on one — a frozen transform just
   leaves content fully readable at a small offset. ─────────────────── */
.reveal {
  opacity: 1;
  transform: translateY(30px);
  transition: transform 1.05s var(--ease-out);
  will-change: transform;
}
.reveal.in { transform: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }
.reveal[data-d="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: none; }
}

/* ─── shared section heads ───────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--g-violet);
  box-shadow: 0 0 10px var(--g-violet);
}

.section-title {
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-top: 24px;
  overflow-wrap: break-word;
}
.cap-head .left { min-width: 0; }
.section-title .grad {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.section-desc {
  color: var(--ink-dim);
  font-size: clamp(16px, 1.5vw, 19px);
  max-width: 46ch;
  margin-top: 22px;
  line-height: 1.6;
}

/* comet trail canvas — follows the cursor everywhere */
#cursor-fx {
  position: fixed; inset: 0; z-index: 9998;
  width: 100%; height: 100%;
  pointer-events: none;
}
@media (max-width: 900px) { #cursor-fx { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   CURSOR  ·  a single point that blooms into a ring on interaction
   ═══════════════════════════════════════════════════════════════════ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
/* the point — always present */
.cursor-dot {
  width: 9px; height: 9px; background: #fff;
  transition: width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.3s;
}
.cursor-dot.is-hover { width: 5px; height: 5px; }
.cursor-dot.is-down { width: 14px; height: 14px; }
/* the ring — hidden until the point meets something interactive */
.cursor-ring {
  width: 52px; height: 52px;
  border: 1px solid rgba(255,255,255,0.9);
  opacity: 0;
  transition: width 0.34s var(--ease), height 0.34s var(--ease), opacity 0.3s var(--ease), border-color 0.3s;
}
.cursor-ring.is-hover { opacity: 1; }
.cursor-ring.is-down { width: 40px; height: 40px; }
@media (max-width: 900px) { .cursor-dot, .cursor-ring { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════════ */
#nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad-x);
  transition: padding 0.5s var(--ease), border-color 0.5s;
  border-bottom: 1px solid transparent;
  /* nav ink flips from night → light as the page dawns (driven by .lit) */
  --nav-ink:       #FFFFFF;
  --nav-ink-dim:   rgba(255,255,255,0.72);
  --nav-line:      rgba(255,255,255,0.16);
  --nav-glass:     rgba(8,8,10,0.55);
  color: var(--nav-ink);
}
#nav.lit {
  --nav-ink:       var(--ink);
  --nav-ink-dim:   var(--ink-dim);
  --nav-line:      var(--line-bright);
  --nav-glass:     rgba(250,247,242,0.72);
}
/* during the eclipse only the LOGO shows — links/lang/CTA appear with the
   pill once the page is white. No opacity transition here: the whole nav's
   opacity is scroll-driven (robust), so these snap to their resting state
   and never freeze hidden in a throttled iframe. */
#nav .nav-links, #nav .nav-right {
  opacity: 0; pointer-events: none;
}
#nav.pinned .nav-links, #nav.pinned .nav-right { opacity: 1; pointer-events: auto; }

/* becomes a floating GLASS PILL once the page has turned white. Entrance
   is a soft opacity fade + slight rise (driven by JS), never a hard drop. */
#nav.pinned {
  position: fixed;
  top: 16px; left: 50%; right: auto;
  width: min(860px, calc(100% - 40px));
  transform: translate(-50%, var(--nav-rise, 0px));
  padding: 8px 8px 8px 20px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 999px;
  background: rgba(252,250,246,0.5);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 8px 26px -16px rgba(26,23,18,0.16),
    inset 0 1px 0 rgba(255,255,255,0.7);
}
/* the CTA becomes a solid dark pill inside the glass (Apple-glass style) */
#nav.pinned .nav-cta {
  background: var(--ink); color: #FCFAF6; border-color: transparent;
}
#nav.pinned .nav-cta:hover { background: #000; }

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark {
  width: 40px; height: 40px; flex: none;
  background: url("mark.png") center / contain no-repeat;
}
.brand-mark .bm-glow {
  position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--g-peach), var(--g-magenta), var(--g-violet), var(--g-blue), var(--g-peach));
  filter: blur(5px);
  opacity: 0.95;
  animation: halo-rotate 14s linear infinite;
}
.brand-mark .bm-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(120% 120% at var(--bm-x, 38%) var(--bm-y, 30%), #1f1f29, #050505 70%);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.18);
  transition: background 0.15s linear;
}
@media (prefers-reduced-motion: reduce) { .brand-mark .bm-glow { animation: none; } }
.brand-name { display: inline-flex; align-items: center; }
.brand-name .wm { height: 30px; width: auto; display: block; flex: none; }
.brand-name .wm-dark { display: none; }
#nav.lit .brand-name .wm-light { display: none; }
#nav.lit .brand-name .wm-dark { display: block; }

.nav-links {
  display: flex; align-items: center; gap: 4px;
  list-style: none;
}
.nav-links a {
  font-size: 14px; color: var(--nav-ink-dim);
  padding: 8px 14px; border-radius: 8px;
  transition: color 0.3s, background 0.3s;
  position: relative;
}
.nav-links a:hover { color: var(--nav-ink); }

.nav-right { display: flex; align-items: center; gap: 14px; }

.lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--nav-line); border-radius: 999px;
  padding: 3px; gap: 2px;
}
.lang button {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 999px; color: var(--nav-ink-dim);
  transition: color 0.3s, background 0.3s;
}
.lang button.on { color: var(--nav-ink); background: color-mix(in oklab, var(--nav-ink) 14%, transparent); }

.nav-cta {
  position: relative;
  font-size: 13.5px; font-weight: 500;
  padding: 9px 18px; border-radius: 999px;
  color: var(--nav-ink);
  background: color-mix(in oklab, var(--nav-ink) 8%, transparent);
  border: 1px solid var(--nav-line);
  overflow: hidden;
  transition: background 0.4s, border-color 0.4s, transform 0.3s;
}
.nav-cta:hover { background: color-mix(in oklab, var(--nav-ink) 16%, transparent); transform: translateY(-1px); }

.burger { display: none; }

.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
}
.nav-burger span { width: 18px; height: 1.6px; border-radius: 2px;
  background: var(--nav-ink); transition: transform 0.3s var(--ease), opacity 0.3s; }
#nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(3.3px) rotate(45deg); }
#nav.menu-open .nav-burger span:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-links { display: none; }
  #nav.pinned .nav-burger { display: flex; }
  #nav.pinned .nav-right { display: none; }
  #nav.pinned.menu-open { flex-wrap: wrap; border-radius: 26px; row-gap: 2px; }
  #nav.pinned.menu-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch;
    flex-basis: 100%; order: 5; gap: 2px; margin-top: 8px;
    padding-top: 10px; border-top: 1px solid var(--line-soft);
  }
  #nav.pinned.menu-open .nav-links a { padding: 11px 10px; font-size: 15px; border-radius: 10px; }
  #nav.pinned.menu-open .nav-right {
    display: flex; flex-basis: 100%; order: 6; justify-content: space-between;
    align-items: center; gap: 12px; margin-top: 4px; padding: 4px 4px 6px;
  }
  #nav.pinned.menu-open .nav-cta { display: inline-flex; }
}
@media (max-width: 600px) {
  /* center the logo in the header on mobile so the wordmark never squishes */
  #nav:not(.pinned) { justify-content: center; }
  #nav:not(.pinned) .nav-right { display: none; }
  .brand-name .wm { height: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  height: 165vh;                 /* tall — drives the eclipse → dawn scroll */
  background: var(--bg);         /* light — shows (matching the flood) once the stage unpins */
  /* NIGHT token scope for the stage subtree */
  --ink: var(--night-ink);
  --ink-dim: var(--night-dim);
  --ink-faint: var(--night-faint);
  --line: var(--night-line);
  --line-soft: var(--night-line-soft);
  --line-bright: var(--night-line-bright);
}
@media (max-width: 900px) { #hero { height: 150vh; } }

.hero-stage {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* scroll-scrubbed hero video (space → eclipse → Halyon logo) */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
#hero .hero-overlay {
  position: absolute; left: 0; right: 0; bottom: clamp(44px, 8vh, 92px); z-index: 4;
  display: flex; justify-content: center; padding: 0 var(--pad-x);
  opacity: 0; pointer-events: none; will-change: opacity;
}
#hero .hero-overlay.show { pointer-events: auto; }

.hero-night {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(58% 50% at 50% 40%, #0c0c16 0%, #060609 52%, #010102 100%),
    #010102;
}

/* ── DEEP-FIELD NEBULA — a real super-HD nebula photo (NASA/ESA/CSA · JWST,
   public domain) as the cosmos backdrop. Darkened + vignetted so the eclipse
   and its corona read clearly on top; the interactive canvas draws above it.
   Slow Ken-Burns drift driven by GSAP. ─────────────────────────────────── */
.hero-photo {
  position: absolute; inset: -6%; z-index: 1; pointer-events: none;
  background: url("nebula.jpg") center 38% / cover no-repeat;
  opacity: var(--photo-on, 0.9);
  will-change: transform;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58% 56% at 50% 46%, rgba(3,3,8,0.74), rgba(3,3,8,0.32) 56%, rgba(3,3,8,0) 100%),
    linear-gradient(180deg, rgba(3,3,8,0.55), rgba(3,3,8,0.18) 38%, rgba(3,3,8,0.6)),
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(2,2,6,0.7) 100%);
}

/* vibrant aurora — the eclipse opening floods the sky with colour
   (peaks mid-scroll, the "photo" state) before resolving to white.
   Opacity driven by JS. */
.hero-aurora {
  position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
  background:
    radial-gradient(80% 70% at 26% 80%, rgba(255,108,190,0.95), transparent 60%),
    radial-gradient(85% 80% at 76% 30%, rgba(108,122,255,0.95), transparent 62%),
    radial-gradient(95% 95% at 52% 6%, rgba(184,120,255,0.92), transparent 60%),
    linear-gradient(180deg, #b46bff 0%, #7b73ff 55%, #6f7cff 100%);
  will-change: opacity;
}

#hero-stars {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
}

/* ── the eclipse — a backlit 3D sphere with a living corona ──────────
   --er (0..1) = rim-light growth, set by JS as you scroll ───────────── */
.eclipse {
  position: absolute; top: 48%; left: 50%;
  width: min(62vh, 86vw, 520px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 3;
  --er: 0;       /* rim-light growth */
  --fade: 1;     /* planet + glow visibility (→ 0 as the world turns white) */
  will-change: transform;
}

/* living colourful glow behind the planet — a soft projected halo, alive
   (rotating gradient), grows with scroll, vanishes as the page turns white */
.ecl-aura {
  position: absolute; inset: -14%; border-radius: 50%;
  opacity: calc((0.58 + var(--er) * 0.28) * var(--fade));
  /* transform (mouse-follow + scroll-grow) is set by JS */
}
.ecl-aura::before, .ecl-aura::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
}
.ecl-aura::before {
  background: conic-gradient(from 0deg,
    var(--g-peach), var(--g-magenta) 26%, var(--g-violet) 52%, var(--g-blue) 76%, var(--g-peach));
  filter: blur(54px);
  animation: aura-spin 46s linear infinite;
}
.ecl-aura::after {
  background: conic-gradient(from 140deg,
    transparent, var(--g-magenta) 14%, transparent 36%, var(--g-blue) 60%, transparent 84%);
  filter: blur(72px); opacity: 0.7;
  animation: aura-spin 68s linear infinite reverse;
}

/* SMOKE — soft wisps in the logo gradient that barely emanate from behind
   the planet. Heavily blurred blobs that morph slowly (GSAP) → organic, not
   the mechanical "god-rays". Grows a touch with scroll (--er). */
/* real flowing smoke — a live WebGL fbm-noise field tinted with the logo
   gradient, painted by app.js. It opens like an explosion + drifts down with
   the scroll. The CSS gradient below is only a fallback if WebGL is absent. */
.ecl-smoke {
  position: absolute; inset: -60%; z-index: 0; pointer-events: none;
  display: block; width: auto; height: auto;
  opacity: calc((0.92 + var(--er) * 0.2) * var(--fade));
  mix-blend-mode: screen; will-change: opacity;
  background:
    radial-gradient(42% 42% at 50% 24%, rgba(255,176,142,0.5), transparent 64%),
    radial-gradient(44% 44% at 80% 46%, rgba(224,112,255,0.55), transparent 66%),
    radial-gradient(46% 46% at 50% 80%, rgba(150,100,255,0.55), transparent 66%),
    radial-gradient(46% 46% at 20% 56%, rgba(98,138,255,0.5), transparent 68%);
  filter: blur(36px);
}
.ecl-smoke.gl-on { background: none; filter: none; }   /* WebGL took over */
@keyframes aura-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ecl-aura::before, .ecl-aura::after { animation: none; } }

/* corona BLOOM — a backlit radial flare that ignites from behind the
   sphere as the light grows (--er). Sits behind the planet (z 0). */
.ecl-bloom {
  position: absolute; inset: -42%; border-radius: 50%; z-index: 0;
  opacity: calc((0.22 + var(--er) * 0.7) * var(--fade));
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.9) 0%, rgba(232,214,255,0.55) 12%,
    rgba(180,140,255,0.4) 26%, rgba(120,150,255,0.18) 44%, transparent 64%);
  transform: scale(calc(0.7 + var(--er) * 0.5));
  will-change: transform, opacity;
}

/* ring of fire — a bright corona hugging the planet's edge */
.ecl-ring {
  position: absolute; inset: 3.5%; border-radius: 50%; z-index: 1;
  opacity: var(--fade);
  box-shadow:
    0 0 5px 1.5px rgba(255,255,255,1),
    0 0 16px 4px rgba(255,245,255,0.8),
    0 0 40px 8px rgba(224,180,255,0.62),
    0 0 78px 18px rgba(170,150,255,0.5),
    0 0 120px 34px rgba(120,150,255,0.34);
}

/* the sphere fades + blurs away like smoke as the light floods (no black dot) */
.ecl-sphere {
  position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  opacity: var(--fade);
  filter: blur(calc((1 - var(--fade)) * 18px));
}
/* the planet — user-provided render (no added glints/outline) */
.ecl-body {
  position: absolute; inset: 0; border-radius: 50%;
  background: url("planet-trim.png") center / contain no-repeat;
}

/* DAWN — solid warm-white that fills the stage as the light completes.
   The corona growth conveys "light from the edges"; this just settles the
   final, consistent white (planet + glow have faded out by now). */
.dawn {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--dawn-x, 50%) var(--dawn-y, 48%),
    #FCFAF6 0%, #FAF7F2 55%, #FAF7F2 100%);
  will-change: opacity;
}

@keyframes halo-rotate { to { transform: rotate(360deg); } }

/* scroll cue (inside the stage) */
.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.scroll-cue .bar {
  width: 1px; height: 38px;
  background: linear-gradient(rgba(255,255,255,0.7), transparent);
  position: relative; overflow: hidden;
}
.scroll-cue .bar::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  background: linear-gradient(var(--ink), transparent);
  animation: cue 2s var(--ease) infinite;
}
@keyframes cue { 0%{transform:translateY(-12px)} 100%{transform:translateY(38px)} }

/* ═══════════════════════════════════════════════════════════════════
   INTRO — title + chips, revealed once the page has turned white
   ═══════════════════════════════════════════════════════════════════ */
#hero .stage-intro {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 var(--pad-x);
  opacity: 0;                  /* reveal is scroll-driven by JS (robust) */
  pointer-events: none;
  /* light context — dark ink on the white dawn */
  --ink: #1A1712; --ink-dim: #585249; --ink-faint: #938C7F;
  --ink-ghost: rgba(26,23,18,0.04);
  --line: rgba(26,23,18,0.12); --line-bright: rgba(26,23,18,0.22);
  color: #1A1712;
}
#hero .stage-intro.show { pointer-events: auto; }
.intro-inner {
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%;            /* never let a nowrap child expand past the viewport */
  will-change: transform;
}
[data-align="left"] .stage-intro { align-items: flex-start; text-align: left; }
[data-align="left"] .hero-actions { justify-content: flex-start; }
@media (max-width: 900px) {
  [data-align="left"] .stage-intro { align-items: center; text-align: center; }
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
  padding: 7px 15px; border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--ink-ghost);
  margin-bottom: clamp(30px, 6vh, 56px);
}
.hero-badge i {
  width: 6px; height: 6px; border-radius: 50%; font-style: normal;
  background: var(--g-violet); box-shadow: 0 0 10px var(--g-violet);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

.hero-title {
  font-weight: 500;
  font-size: clamp(44px, 8.2vw, 118px);
  line-height: 0.97;
  letter-spacing: -0.045em;
  max-width: 14ch;
}
.hero-title .grad {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  color: var(--ink-dim);
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.55;
  max-width: 50ch;
  margin-top: clamp(22px, 3vh, 34px);
}
.hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(34px, 5vh, 52px);
}

/* phones — keep the hero intro inside the viewport (the badge no longer
   forces the column wider than the screen) */
@media (max-width: 600px) {
  .hero-badge {
    white-space: normal; text-align: center; line-height: 1.45;
    font-size: 10px; letter-spacing: 0.1em; padding: 6px 13px; max-width: 100%;
  }
  .hero-title { font-size: clamp(34px, 9.5vw, 50px); max-width: 18ch; }
  .hero-sub { font-size: 15px; max-width: 36ch; }
}

/* buttons (light page) */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  white-space: nowrap;
  font-size: 15px; font-weight: 500;
  padding: 14px 26px; border-radius: 999px;
  transition: transform 0.35s var(--ease), background 0.4s, border-color 0.4s, box-shadow 0.4s, color 0.4s;
  overflow: hidden; isolation: isolate;
}
.btn svg { width: 15px; height: 15px; transition: transform 0.4s var(--ease); }
.btn-primary {
  color: #FCFAF6; background: var(--ink);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gradient); opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.btn-primary:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 16px 50px -12px rgba(217,107,255,0.55);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-ghost {
  color: var(--ink); border: 1px solid var(--line-bright);
  background: transparent;
}
.btn-ghost:hover { background: var(--ink-ghost); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue .bar::after { animation: none; }
}