/* ==========================================================================
   Sector 42 Labs — Design System v2 (dark neon / Vapor 42 sister-brand)
   ========================================================================== */

:root {
  /* Core surfaces */
  --bg: #0A0912;
  --bg-alt: #0F0D1C;
  --bg-soft: #141225;
  --panel: rgba(255,255,255,0.045);
  --panel-strong: rgba(255,255,255,0.07);
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.18);

  /* Neon accents */
  --cyan: #35E7E0;
  --cyan-dim: #1FA6A1;
  --magenta: #FF3FA6;
  --magenta-dim: #C22B7C;
  --purple: #9B6BFF;
  --lime: #C8FF3E;
  --lime-dim: #9CCB1F;

  /* Legacy brand mark colors (used only for the logo art itself) */
  --navy: #16233F;
  --rose: #C97B84;

  /* Text */
  --text: #F5F3FC;
  --text-dim: #A9A3C4;
  --text-mute: #8782A1;

  /* Type */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Lato', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Shape / motion */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --ease: cubic-bezier(.22,.9,.35,1);
  --glow-cyan: 0 0 0 1px rgba(53,231,224,0.25), 0 8px 30px rgba(53,231,224,0.12);
  --glow-magenta: 0 0 0 1px rgba(255,63,166,0.25), 0 8px 30px rgba(255,63,166,0.14);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* fixed ambient glow blobs behind everything — drift gently with scroll
   and cursor position (values fed in via JS custom properties, default 0
   so nothing moves until initGlowDrift() confirms it's running) */
:root { --mx: 0px; --my: 0px; --sy: 0px; }
body::before, body::after {
  content: "";
  position: fixed;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
body::before { background: var(--magenta); top: -20vw; right: -15vw; transform: translate(calc(var(--mx) * -1), calc(var(--sy) * 0.06 + var(--my) * -1)); }
body::after { background: var(--cyan); bottom: -25vw; left: -20vw; transform: translate(var(--mx), calc(var(--sy) * -0.06 + var(--my))); }

#bg-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
}

main, header, footer { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  display: inline-block;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; }

p.lead {
  font-size: 1.15rem;
  color: var(--text-dim);
  max-width: 60ch;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

section { position: relative; }
.section-pad { padding: 110px 0; }
@media (max-width: 768px) { .section-pad { padding: 72px 0; } }

.bg-white { background: var(--bg-soft); }
.bg-navy { background: linear-gradient(155deg, #120F22, #1A1530 60%, #241A3A); }
.bg-navy h2, .bg-navy h3 { color: var(--text); }
.bg-navy p { color: var(--text-dim); }
.bg-alt { background: var(--bg-alt); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--magenta);
  color: #0A0912;
  box-shadow: 0 0 0 1px rgba(255,63,166,0.4), 0 10px 30px rgba(255,63,166,0.22);
}
.btn-primary:hover {
  /* lift + stronger glow only — no background shift, so text contrast
     never dips (a darker hover tone here would fail AA against dark text) */
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(255,63,166,0.6), 0 16px 44px rgba(255,63,166,0.42);
}
.btn-outline {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(255,255,255,0.03);
}
.btn-outline:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-3px);
  box-shadow: var(--glow-cyan);
}
.bg-navy .btn-outline { border-color: var(--line-strong); color: var(--text); }
.btn-rose {
  background: var(--magenta);
  color: #0A0912;
  box-shadow: 0 0 0 1px rgba(255,63,166,0.4), 0 10px 30px rgba(255,63,166,0.22);
}
.btn-rose:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255,63,166,0.6), 0 16px 44px rgba(255,63,166,0.42); }
.btn svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 22px 0;
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-header.scrolled {
  padding: 12px 0;
  background: rgba(10,9,18,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 84px; width: auto; transition: height .3s var(--ease); }
.site-header.scrolled .brand img { height: 60px; }

.nav-links { display: flex; align-items: center; gap: 40px; }
.nav-links a {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-dim);
  position: relative;
  padding: 6px 0;
  transition: color .3s;
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  transition: right .3s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--cyan); }

.nav-cta { display: flex; align-items: center; gap: 22px; }
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  position: relative;
  flex-shrink: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  height: 2px; background: var(--text);
  transition: transform .3s var(--ease), opacity .3s var(--ease), top .3s var(--ease);
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { top: 0; transform: rotate(45deg); background: var(--cyan); }
.nav-toggle.open span::after { top: 0; transform: rotate(-45deg); background: var(--cyan); }

@media (max-width: 900px) {
  .nav-links {
    position: fixed; inset: 0 0 0 auto;
    width: min(78vw, 360px);
    height: 100vh;
    background: #0D0B1A;
    border-left: 1px solid var(--line);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px;
    gap: 28px;
    transform: translateX(100%);
    transition: transform .45s var(--ease);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { color: var(--text); font-size: 1.2rem; }
  .nav-toggle { display: block; }
  .nav-cta .btn-outline { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 190px 0 120px;
  position: relative;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}
.hero h1 { margin: 18px 0 22px; }
.hero h1 .accent {
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,63,166,0.25));
}
.hero-actions { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 36px; margin-top: 56px; flex-wrap: wrap; }
.hero-stats .stat-num { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--text); }
.hero-stats .stat-label { font-size: 0.78rem; color: var(--text-mute); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.hero-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; will-change: transform; }

/* ---------- Orbit diagram (hero visual) ---------- */
.orbit-diagram { position: relative; width: 100%; max-width: 700px; aspect-ratio: 1/1; }
/* Ring diameters match launch.co's measured ratios exactly: outer ring is
   78.1% of the container (radius 39.1%), inner ring is 46.9% (radius 23.4%).
   Brand color kept on the ring glow per Grady's call — geometry matches
   launch.co, palette stays Sector 42 neon. */
.orbit-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(53,231,224,0.18); }
.orbit-ring.outer { width: 78.1%; height: 78.1%; }
.orbit-ring.inner { width: 46.9%; height: 46.9%; border-color: rgba(255,63,166,0.18); }
.orbit-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 110px; height: 110px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 35% 30%, #241b3f, #120f22 70%);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 60px rgba(255,63,166,0.32), 0 0 110px rgba(53,231,224,0.16), inset 0 0 20px rgba(0,0,0,0.5);
}
.orbit-core img { width: 68%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); animation: orbit-pulse 4s ease-in-out infinite; }
@keyframes orbit-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes orbit-cw { to { transform: rotate(360deg); } }
@keyframes orbit-ccw { to { transform: rotate(-360deg); } }
.orbit-track { position: absolute; inset: 0; animation: orbit-cw 80s linear infinite; }
.orbit-track.inner { animation: orbit-ccw 50s linear infinite; }
/* orbit-node had no explicit width/height, so its own box shrink-wrapped to
   fit the badge content inside it. rotate(var(--angle)) translateX(var(--radius))
   rotates around the CENTER of that box by default (transform-origin: 50% 50%)
   — since the box had real size, every badge landed offset from the true ring
   line by a fixed vector equal to half its own box size, in a direction that
   never rotated with --angle. That's why badges sat off the circle. Zeroing
   the box out removes the offset entirely: there's nothing left to rotate
   around but the exact ring point. */
.orbit-node {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0; overflow: visible;
  transform: rotate(var(--angle)) translateX(var(--radius));
}
/* Centering is split onto its own non-animated layer. orbit-node-inner's
   `transform` is entirely owned by its rotation animation — if the static
   translate(-50%,-50%) lived on the same element, the browser would matrix-
   interpolate between the two, losing the centering offset mid-spin. That
   was the bug: badges drifting off-center and appearing tilted at random
   angles instead of orbiting upright. This same counter-rotation is what
   keeps every badge facing upright and legible as it travels around the ring. */
.orbit-node-center { transform: translate(-50%,-50%); }
/* orbit-node's own transform bakes in a fixed placement angle (rotate(var(--angle))
   to fan nodes around the ring) — that per-node rotation was never being cancelled,
   so every badge except the one at --angle:0 sat visibly cocked at its placement
   angle. This static layer rotates back by the exact same amount before the
   time-based counter-rotation is applied, so the *only* rotation a badge ever
   shows is zero: true north, always, at every point in the orbit. */
.orbit-node-static { transform: rotate(calc(-1 * var(--angle))); }
.orbit-node-inner {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.orbit-node-inner.ccw { animation: orbit-ccw 80s linear infinite; }
.orbit-node-inner.cw { animation: orbit-cw 50s linear infinite; }
/* Badges are launch.co's actual technique: the source art is a full square
   logo tile, not a pre-cropped cutout. The circle is a CSS mask applied at
   render time — border-radius:50% + overflow:hidden on the badge itself,
   object-fit:cover on the <img> so it fills that circle without distortion.
   Sizing lives on the badge (width/height, not max-width/max-height) so the
   mask has a real fixed box to clip against; the ring/halo shadow moves to
   the badge container since there's no transparent silhouette left for a
   drop-shadow filter to trace. */
/* .orbit-node-inner (the counter-rotation layer) is a flex container that
   sits inside the intentional width:0/height:0 chain from .orbit-node down —
   that zero-size chain is what fixed the ring-centering bug. Side effect:
   as a flex item, .orbit-badge's explicit width is still subject to
   flex-shrink (default 1), so the browser was crushing it down to a ~2px
   sliver against the zero-width flex container — the "vertical line" bug.
   flex-shrink:0 pins the badge to its real size regardless of the
   container's collapsed width. */
/* Wraps each badge (+ label, where present) so the whole mark is clickable.
   display:contents removes the <a> from the box tree entirely — its children
   (.orbit-badge, .orbit-label) still behave as direct children of
   .orbit-node-inner for flex/positioning purposes, so none of the sizing or
   centering rules above need to change to account for the wrapper. */
.orbit-badge-link { display: contents; cursor: pointer; }
.orbit-badge-link:focus-visible .orbit-badge {
  outline: 2px solid var(--cyan); outline-offset: 3px;
}
.orbit-badge {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
  background: #14112A; border: 1px solid rgba(245,243,252,0.14);
  box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 0 14px rgba(245,243,252,0.12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.orbit-track.inner .orbit-badge { width: 49px; height: 49px; }
.orbit-node:hover .orbit-badge {
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 0 20px rgba(53,231,224,0.55);
}
.orbit-badge img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Brand-name labels beneath each badge, matching launch.co's label styling
   (small, gray, regular weight, centered, hanging just below the mark).
   Positioned absolute and anchored outside the badge's own flex box so the
   label text never influences the centering math above it. */
.orbit-label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 6px; font-family: var(--font-heading, 'Poppins', sans-serif);
  font-weight: 400; font-size: 0.68rem; color: rgba(226,222,240,0.55);
  white-space: nowrap; letter-spacing: 0.01em; pointer-events: none;
}
.orbit-track.inner .orbit-label { font-size: 0.62rem; margin-top: 5px; }
@media (max-width: 900px) {
  .orbit-diagram { max-width: 380px; }
  .orbit-badge { width: 33px; height: 33px; }
  .orbit-track.inner .orbit-badge { width: 27px; height: 27px; }
  .orbit-core { width: 60px; height: 60px; }
  .orbit-label { font-size: 0.56rem; margin-top: 4px; }
  .orbit-track.inner .orbit-label { font-size: 0.52rem; margin-top: 3px; }
}

/* ---------- Orbit diagram — mobile instance ----------
   launch.co doesn't fluidly shrink one widget across breakpoints; below their
   lg breakpoint they swap to a SEPARATE, fixed-pixel widget that's anchored to
   the right edge of the viewport and deliberately bled off-screen, cropped by
   an ancestor's overflow:hidden. .orbit-diagram-desktop is hidden entirely at
   this width and .orbit-diagram-mobile takes over — same node structure and
   centering chain, different container size/anchor/ratios. Labels are dropped
   here since part of the widget is intentionally out of view. */
.orbit-diagram-mobile { display: none; }
.orbit-diagram-mobile .orbit-label { display: none; }
/* --radius is set here via class instead of inline style on purpose: an
   inline style="--radius:..." always wins over an external class rule
   regardless of specificity, so the mobile markup omits inline --radius
   entirely (only --angle stays inline) to let these breakpoint rules control it. */
.orbit-diagram-mobile .orbit-track.outer .orbit-node { --radius: 180px; }
.orbit-diagram-mobile .orbit-track.inner .orbit-node { --radius: 108px; }
.orbit-diagram-mobile .orbit-ring.outer { width: 90%; height: 90%; }
.orbit-diagram-mobile .orbit-ring.inner { width: 54%; height: 54%; }
.orbit-diagram-mobile .orbit-core { width: 64px; height: 64px; }
.orbit-diagram-mobile .orbit-badge { width: 40px; height: 40px; }
.orbit-diagram-mobile .orbit-track.inner .orbit-badge { width: 32px; height: 32px; }

@media (max-width: 900px) {
  .orbit-diagram-desktop { display: none; }
  .orbit-diagram-mobile { display: block; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .orbit-diagram-mobile .orbit-track.outer .orbit-node { --radius: 225px; }
  .orbit-diagram-mobile .orbit-track.inner .orbit-node { --radius: 135px; }
  .orbit-diagram-mobile .orbit-core { width: 80px; height: 80px; }
  .orbit-diagram-mobile .orbit-badge { width: 50px; height: 50px; }
  .orbit-diagram-mobile .orbit-track.inner .orbit-badge { width: 40px; height: 40px; }
}

.orbit-diagram .badge-float {
  position: absolute;
  bottom: -22px; left: -22px;
  background: #14112A;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  display: flex; align-items: center; gap: 12px;
  animation: float 5s ease-in-out infinite 1s;
}
.orbit-diagram .badge-float .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.orbit-diagram .badge-float strong { display: block; font-size: 0.85rem; color: var(--text); }
.orbit-diagram .badge-float span { font-size: 0.75rem; color: var(--text-mute); font-family: var(--font-mono); }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .hero { padding: 150px 0 80px; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-copy { position: relative; z-index: 1; }
  /* Matches launch.co's actual mobile pattern: not a shrunk, stacked-above
     copy widget, but a fixed-size instance anchored to the right edge and
     partially bled off-screen behind the copy, cropped by .hero's own
     overflow:hidden. pointer-events:none keeps it from blocking taps on the
     copy/buttons it overlaps. */
  .hero-art {
    order: 0;
    margin-bottom: 0;
    min-height: 0;
    position: absolute;
    top: 42%;
    right: 0;
    transform: translateY(-50%) translateX(30%);
    width: 400px;
    height: 400px;
    z-index: 0;
    pointer-events: none;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  .hero-art { width: 500px; height: 500px; transform: translateY(-50%) translateX(33%); }
}

/* ---------- Trust bar ---------- */
.trust-bar { padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-bar .container {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
}
.trust-bar .trust-item { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-weight: 700; font-size: 0.85rem; letter-spacing: .02em; }
.trust-bar .trust-item svg { width: 20px; height: 20px; color: var(--cyan); flex-shrink: 0; }

/* ---------- Section headers ---------- */
.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head h2 { margin-top: 14px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: 34px;
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: rgba(53,231,224,0.4); background: var(--panel-strong); box-shadow: var(--glow-cyan); }
.card .icon-wrap {
  width: 54px; height: 54px;
  border-radius: 16px;
  background: rgba(53,231,224,0.1);
  border: 1px solid rgba(53,231,224,0.25);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.card .icon-wrap svg { width: 26px; height: 26px; color: var(--cyan); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-dim); font-size: 0.96rem; }

/* ---------- Stats strip ---------- */
.stats-strip { padding: 90px 0; }
.stats-strip .grid { grid-template-columns: repeat(4,1fr); text-align: center; }
.stats-strip .stat-num { font-family: var(--font-mono); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; color: var(--cyan); text-shadow: 0 0 24px rgba(53,231,224,0.35); }
.stats-strip .stat-label { color: var(--text-mute); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; }
@media (max-width: 768px) { .stats-strip .grid { grid-template-columns: repeat(2,1fr); gap: 40px; } }

/* ---------- Flavor / product cards ---------- */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.filter-chip {
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--panel);
  border: 1.5px solid var(--line-strong);
  font-weight: 700; font-size: 0.85rem;
  color: var(--text-dim);
  transition: all .3s var(--ease);
}
.filter-chip.active, .filter-chip:hover { background: var(--cyan); border-color: var(--cyan); color: #0A0912; box-shadow: var(--glow-cyan); }

.flavor-card { overflow: hidden; padding: 0; }
.flavor-card .swatch {
  height: 150px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, rgba(255,63,166,0.18), transparent 60%), var(--bg-soft);
}
.flavor-card .swatch img { max-height: 84px; width: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5)); }
.flavor-card .swatch svg { width: 54px; height: 54px; opacity: .85; }
.flavor-card .body { padding: 26px; }
.flavor-card .tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 8px;
}
.flavor-card .meta {
  display: flex; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line);
  font-size: 0.78rem; color: var(--text-mute); font-weight: 700;
}

/* ---------- Brand catalog cards ---------- */
.brand-card { display: flex; flex-direction: column; }
.brand-card-logo {
  height: 96px;
  display: flex; align-items: center; justify-content: flex-start;
  margin-bottom: 20px;
}
.brand-card-logo img { max-height: 96px; max-width: 100%; width: auto; object-fit: contain; }
.brand-card-photo {
  height: 220px;
  margin: -34px -34px 22px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: radial-gradient(circle at 50% 68%, rgba(255,63,166,0.16), transparent 62%), linear-gradient(160deg, #14112A, #1b1533);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.brand-card-photo img { max-height: 90%; max-width: 74%; width: auto; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0,0,0,.55)); transition: transform .45s var(--ease); }
.brand-card:hover .brand-card-photo img { transform: translateY(-5px) scale(1.03); }
.brand-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.brand-card-head h3 { margin: 0; }
.brand-line-tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,63,166,0.12); color: var(--magenta);
  border: 1px solid rgba(255,63,166,0.3);
  white-space: nowrap;
}
.brand-line-tag.salt { background: rgba(53,231,224,0.12); color: var(--cyan); border-color: rgba(53,231,224,0.3); }
.flavor-pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.flavor-pill {
  font-size: 0.8rem; font-weight: 700;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  color: var(--text-dim);
}
.brand-card-link {
  margin-top: auto;
  font-size: 0.85rem; font-weight: 800; color: var(--cyan);
  display: inline-flex; align-items: center; gap: 6px;
}
.brand-card-link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.brand-card:hover .brand-card-link svg { transform: translateX(3px); }

/* ---------- Process steps ---------- */
.steps { counter-reset: step; }
.step {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: none; }
.step .num {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.2rem;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--text-dim); }

/* ---------- Timeline (quality page) ---------- */
.quality-block { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; }
.quality-block.reverse { grid-template-columns: 1.1fr 0.9fr; }
.quality-block.reverse .quality-visual { order: 2; }
@media (max-width: 900px) { .quality-block, .quality-block.reverse { grid-template-columns: 1fr; } .quality-block.reverse .quality-visual { order: 0; } }
.quality-visual {
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #17132B, #1F1836);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.quality-visual::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(53,231,224,0.16), transparent 55%);
}
.quality-visual svg { width: 42%; position: relative; color: var(--text); }
.quality-visual.has-photo { background: #14112A; }
.quality-visual.has-photo img { width: 100%; height: 100%; object-fit: cover; position: relative; filter: saturate(0.85) brightness(0.8); }
.quality-visual.has-photo::before { background: linear-gradient(160deg, rgba(53,231,224,0.22), rgba(10,9,18,0.55) 60%, rgba(10,9,18,0.75)); z-index: 1; }
.quality-visual.has-photo .visual-tag {
  position: absolute; bottom: 18px; left: 18px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--cyan);
  letter-spacing: .08em; text-transform: uppercase;
  background: rgba(10,9,18,0.55); border: 1px solid var(--line-strong);
  padding: 6px 12px; border-radius: 100px;
}
.quality-list li { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
.quality-list svg { width: 22px; height: 22px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.quality-list strong { display: block; color: var(--text); }
.quality-list span { color: var(--text-dim); font-size: 0.92rem; }

/* ---------- Full-width photo banner ---------- */
.photo-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  overflow: hidden;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.photo-banner img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) brightness(0.75);
}
.photo-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,9,18,0.88) 0%, rgba(10,9,18,0.45) 42%, rgba(10,9,18,0.35) 65%, rgba(10,9,18,0.8) 100%);
}
.photo-banner-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 560px; padding: 0 8vw;
}
.photo-banner .visual-tag {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--cyan);
  letter-spacing: .08em; text-transform: uppercase;
  background: rgba(10,9,18,0.55); border: 1px solid var(--line-strong);
  padding: 6px 12px; border-radius: 100px; margin-bottom: 16px;
}
.photo-banner-content h2 { margin-bottom: 10px; }
.photo-banner-content p { color: var(--text-dim); max-width: 460px; }
@media (max-width: 700px) {
  .photo-banner { aspect-ratio: 4/5; }
  .photo-banner-content { max-width: 100%; padding: 0 7vw; }
}

/* ---------- Testimonial / logos ---------- */
.logo-strip { display: flex; flex-wrap: wrap; gap: 46px; align-items: center; justify-content: space-between; }
.logo-strip img { height: 46px; width: auto; opacity: .85; filter: grayscale(0.15); transition: opacity .3s, transform .3s; }
.logo-strip img:hover { opacity: 1; transform: translateY(-3px); }
.logo-strip .logo-chip { font-family: var(--font-display); font-weight: 700; color: var(--text-dim); font-size: 1.05rem; letter-spacing: .02em; }

/* ---------- CTA band ---------- */
.cta-band {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #17132B, #241A3D);
  border: 1px solid var(--line-strong);
  padding: 70px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,63,166,0.28), transparent 70%);
  right: -120px; top: -120px;
}
.cta-band h2 { color: var(--text); margin: 0 0 10px; }
.cta-band p { color: var(--text-dim); max-width: 46ch; }
@media (max-width: 768px) { .cta-band { padding: 44px 30px; } }

/* ---------- Sister brand banner ---------- */
.sister-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  border-radius: var(--radius-lg);
  padding: 46px 54px;
  background: linear-gradient(100deg, rgba(53,231,224,0.08), rgba(255,63,166,0.08));
  border: 1px solid var(--line-strong);
}
.sister-banner .tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--lime); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; display: block; }

/* ---------- Forms ---------- */
.form-card { background: var(--panel); backdrop-filter: blur(10px); border-radius: var(--radius-lg); padding: 46px; border: 1px solid var(--line-strong); }
.console-bar {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-mute);
  padding-bottom: 20px; margin-bottom: 26px; border-bottom: 1px solid var(--line);
}
.console-bar .dot { width: 9px; height: 9px; border-radius: 50%; }
.console-bar .dot:nth-child(1) { background: #FF5F57; }
.console-bar .dot:nth-child(2) { background: #FEBC2E; }
.console-bar .dot:nth-child(3) { background: #28C840; }
.console-bar .path { margin-left: 10px; }
.console-line { font-family: var(--font-mono); font-size: 0.82rem; color: var(--cyan); margin-bottom: 22px; }
.console-line .cursor { display: inline-block; width: 8px; height: 14px; background: var(--cyan); margin-left: 4px; animation: blink 1s step-end infinite; vertical-align: -2px; }
@keyframes blink { 50% { opacity: 0; } }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 8px; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-strong);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  transition: border-color .3s, box-shadow .3s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-mute); }
.field select { color-scheme: dark; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(53,231,224,0.15);
}
.field textarea { resize: vertical; min-height: 120px; }
.field.error input, .field.error textarea, .field.error select { border-color: var(--magenta); }
.field .err-msg { display: none; color: var(--magenta); font-size: 0.78rem; margin-top: 6px; font-weight: 700; }
.field.error .err-msg { display: block; }
.form-note { font-size: 0.8rem; color: var(--text-mute); margin-top: 10px; }
.form-success {
  display: none;
  align-items: center; gap: 12px;
  background: rgba(200,255,62,0.1); color: var(--lime);
  border: 1px solid rgba(200,255,62,0.3);
  padding: 16px 20px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 0.92rem; margin-bottom: 20px;
}
.form-success.show { display: flex; }

/* ---------- Contact info cards ---------- */
.info-row { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: none; }
.info-row svg { width: 22px; height: 22px; color: var(--cyan); flex-shrink: 0; margin-top: 3px; }
.info-row strong { display: block; margin-bottom: 4px; color: var(--text); }
.info-row span, .info-row a { color: var(--text-dim); font-size: 0.94rem; }

/* ---------- Footer ---------- */
.site-footer { background: #08070F; color: var(--text-dim); padding: 80px 0 0; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 50px; padding-bottom: 60px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--text); font-size: 0.85rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; font-family: var(--font-mono); font-weight: 700; }
.footer-grid li { margin-bottom: 12px; }
.footer-grid a:hover { color: var(--cyan); }
.footer-brand img { height: 40px; margin-bottom: 18px; }
.footer-brand p { max-width: 32ch; font-size: 0.9rem; }
.footer-legal {
  border-top: 1px solid var(--line);
  padding: 26px 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 0.8rem;
}
.footer-warning {
  background: rgba(255,63,166,0.07);
  border: 1px solid rgba(255,63,166,0.25);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 40px;
}
.footer-warning strong { color: var(--magenta); }

/* ---------- Age gate ---------- */
.age-gate {
  position: fixed; inset: 0; z-index: 2000;
  background: radial-gradient(circle at 30% 20%, rgba(255,63,166,0.12), transparent 55%), radial-gradient(circle at 80% 80%, rgba(53,231,224,0.12), transparent 55%), #08070F;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  transition: opacity .5s var(--ease), visibility .5s;
}
.age-gate.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.age-gate-card {
  background: #120F20; border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: 52px; max-width: 460px; width: 100%; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.age-gate-card img { height: 52px; margin: 0 auto 22px; }
.age-gate-card h2 { font-size: 1.5rem; margin-bottom: 12px; }
.age-gate-card p { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 30px; }
.age-gate-actions { display: flex; gap: 14px; }
.age-gate-actions .btn { flex: 1; justify-content: center; }
.age-gate-fine { font-size: 0.72rem; color: var(--text-mute); margin-top: 22px; }
.age-gate-decline {
  display: none;
  text-align: center; padding: 40px;
}

/* ---------- Scroll reveal ---------- */
.js-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.js-ready [data-reveal].in-view { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 170px 0 90px;
  text-align: left;
}
.page-hero .section-head { margin-bottom: 0; }

/* ---------- Misc utilities ---------- */
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.divider { height: 1px; background: var(--line); margin: 0; }