/* ============================================================
   Snoweasl design system — v1
   Single source of truth for snoweasl.com.
   (cushy.snoweasl.com is a separate Next.js app and does not load this.)

   Load order:
     1. Google Fonts (Space Grotesk + DM Sans)  <- required, see index.html
     2. this file
     3. assets/snoweasl.js  (snow canvas + mobile nav)

   Documented at /design-system/. If you add a token or a component,
   add it there too — the docs pages are the contract.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* Surfaces — deep glacier blues, darkest first */
  --bg-900: #08141e;
  --bg-850: #081420;
  --bg-800: #0a1822;
  --bg-780: #0b1b2b;
  --bg-760: #0b1e2e;
  --panel: #102536;
  --panel-hi: #123349;
  --panel-forge-a: #0e2a3c;
  --panel-forge-b: #123349;

  /* Frost — the one light surface in the system */
  --frost: #eaf3f8;
  --frost-ink: #0f2532;
  --frost-ink-strong: #0c2230;
  --frost-muted: #4f6b7a;
  --frost-muted-2: #5c7686;
  --frost-eyebrow: #2c7e96;

  /* Text — on dark surfaces */
  --text: #e7f2f8;
  --text-strong: #f2fafd;
  --text-soft: #a9c2d1;
  --text-muted: #90aaba;
  --text-dim: #8fa9b8;
  --text-faint: #7e99a9;
  --heading-soft: #eaf4fa;
  --body-cool: #c3d9e4;
  --quote: #cfe2ec;

  /* Accents */
  --cyan: #58cbe3;
  --cyan-bright: #6fd8ec;
  --cyan-glow: #8fe3f2;
  --blue: #6fa0ff;
  --blue-soft: #9fb8ff;
  --eyebrow: #58cbe3;
  --eyebrow-muted: #6e8a9a;
  --ink-on-accent: #08161f;

  /* Hairlines */
  --hair: rgba(255, 255, 255, 0.06);
  --hair-2: rgba(255, 255, 255, 0.07);
  --hair-3: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.1);
  --border-soft-2: rgba(255, 255, 255, 0.12);

  /* Gradients */
  --grad-accent: linear-gradient(140deg, #58cbe3, #6fa0ff);

  /* Type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* Layout */
  /* The page background runs the full width of the monitor; the content is
     centred inside it at a readable measure. --pad-x does both jobs: it is
     the edge gutter on small screens, and on anything wider than --shell it
     grows to absorb the excess, which centres the content without needing a
     wrapper element around every section. */
  --shell: 1440px;
  --gutter: 56px;
  --pad-x: max(var(--gutter), calc((100% - var(--shell)) / 2));
}

/* ------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: #05101a;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-strong);
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

@keyframes sn-drift {
  from { background-position: 0 0; }
  to   { background-position: 600px 1200px; }
}
@keyframes sn-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
}

/* ------------------------------------------------------------
   3. PAGE SHELL & SECTION SURFACES
   ------------------------------------------------------------ */
.page {
  width: 100%;
  /* No max-width: the shell is enforced by --pad-x on each band instead, so
     backgrounds and gradients reach the edges of the monitor rather than
     ending in a 1280px column with dead space either side. */
  margin: 0 auto;
  background: var(--bg-800);
  color: var(--text);
  overflow: clip;
  position: relative;
}

.section { padding: 74px var(--pad-x); position: relative; }
.section--tight { padding: 42px var(--pad-x); }
.section--about { padding: 78px var(--pad-x); }
.section--cc    { padding: 78px var(--pad-x); }

.rule-top { border-top: 1px solid var(--hair); }

.bg-800 { background: var(--bg-800); }
.bg-760 { background: var(--bg-760); }
.bg-850 { background: var(--bg-850); }
.grad-down { background: linear-gradient(180deg, var(--bg-800), var(--bg-760)); }

/* Falling-snow canvas (painted by snoweasl.js) */
/* Snow sits ABOVE the band's own background but BELOW its content. At z-index 6
   it painted dots over every headline, button and card on the page. It is now
   scoped to the two gradient bands that can carry atmosphere, and the content
   inside them is lifted above it. */
.sn-snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}
.hero > *:not(.dot-tex),
.cta > *:not(.dot-tex) { position: relative; z-index: 2; }

/* Dotted snow texture overlay */
.dot-tex {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.2px, transparent 1.6px);
  background-size: 46px 46px;
  pointer-events: none;
}
.dot-tex--fine {
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.6px);
  background-size: 42px 42px;
  animation: none;
}

/* ------------------------------------------------------------
   4. TYPE ROLES
   ------------------------------------------------------------ */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin: 0 0 16px;
}
.eyebrow--faint { font-size: 12.5px; letter-spacing: 0.08em; color: var(--eyebrow-muted); }
.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow-muted);
}

.h-section { font-size: 34px; font-weight: 700; }
.h-section-lg { font-size: 36px; font-weight: 700; }
.lead { font-size: 16px; line-height: 1.6; color: var(--text-soft); max-width: 620px; }
.accent { color: var(--cyan-bright); }

/* Inline icons. Space Grotesk and DM Sans carry no glyph for the snowflake,
   arrow or check code points we used, so those rendered as tofu boxes. Drawn
   instead, they inherit colour and size from the text they sit in. */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; }

/* ------------------------------------------------------------
   5. BUTTONS, PILLS, CHIPS, BADGES
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--grad-accent); color: var(--ink-on-accent); }
.btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  font-weight: 600;
  background: transparent;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.05); }
.btn--light { background: var(--text); color: var(--bg-800); padding: 10px 18px; font-weight: 600; font-size: 14.5px; }
.btn--sm { padding: 13px 24px; font-size: 14.5px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}
.pill--dot {
  border: 1px solid rgba(88, 203, 227, 0.3);
  background: rgba(88, 203, 227, 0.08);
  color: var(--cyan-glow);
  letter-spacing: 0.04em;
}
.pill--dot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex: none; }
.pill--product {
  border: 1px solid rgba(111, 160, 255, 0.35);
  background: rgba(111, 160, 255, 0.1);
  color: var(--blue-soft);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tag { padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 12.5px; color: var(--body-cool); }
.chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border-soft); font-size: 13.5px; color: var(--body-cool); }
.badge-new {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(111, 160, 255, 0.18);
  color: var(--blue-soft);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(88, 203, 227, 0.16); color: var(--cyan-glow);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 18px;
}
.mini-badge {
  display: inline-flex; padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 18px;
}
.mini-badge--blue { background: rgba(111, 160, 255, 0.18); color: var(--blue-soft); }
.mini-badge--cyan { background: rgba(88, 203, 227, 0.14); color: var(--cyan-glow); }

/* ------------------------------------------------------------
   6. BRAND LOCKUP
   Uses the real snoweasl wordmark (img/logo/main-logo.svg, #F4FEFF).
   ------------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.brand__mark { display: block; flex: none; }
.brand__logo { display: block; height: 30px; width: auto; }
.brand__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.brand--lg .brand__mark { width: 46px; height: 46px; }
.brand--lg .brand__logo { height: 40px; }
.brand--lg .brand__word { font-size: 30px; }
.brand__sep { width: 1px; height: 22px; background: var(--border-soft-2); }
.brand__product {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--cyan-bright);
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   7. NAV
   ------------------------------------------------------------ */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--pad-x);
  gap: 20px;
  z-index: 7;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14.5px;
  color: var(--text-soft);
  font-weight: 500;
}
.nav__links a { transition: color 0.15s ease; }
.nav__links a:hover { color: var(--text); }
.nav__toggle { display: none; }
.cc-nav { background: linear-gradient(180deg, #0b1b2b, #0a1822); }

/* ------------------------------------------------------------
   8. CARDS & GRIDS
   ------------------------------------------------------------ */
.card { padding: 30px; border-radius: 16px; background: var(--panel); border: 1px solid var(--hair-2); }
.card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--heading-soft);
}
.card__body { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
.card__icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
}
.card__icon--cyan { background: rgba(88, 203, 227, 0.14); }
.card__icon--blue { background: rgba(111, 160, 255, 0.14); }
/* Service icons are the brand SVGs (#4886FF line art), which need more
   room than a glyph to stay readable — hence the larger tile. */
.card__icon--img { width: 56px; height: 56px; border-radius: 14px; }
.card__icon img { width: 32px; height: 32px; object-fit: contain; }

/* Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content and push the row past the page — where .page's
   overflow:clip hides the evidence. Opt every card track out of that. */
.services > *, .steps > *, .build-grid > *, .models > *, .glide > *,
.team > *, .stats > *, .pillars > *, .cc__feats > *, .problem > *,
.network-grid > *, .ai-security > *, .faq-grid > *, .footer-cols > * {
  min-width: 0;
}

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.media { display: block; width: 100%; border-radius: 18px; object-fit: cover; background: rgba(255, 255, 255, 0.04); }
.media--16 { border-radius: 16px; }

/* App-screenshot frame: our own chrome bar above a clipped screenshot,
   so product shots stay on-brand even when the source image is older. */
/* Screenshots are near-black and sit on near-black bands, so the frame has to
   do the separating: a faint cyan rim (same trick as .forge and .model--pop)
   plus a real drop shadow to lift it off the surface. */
.shot {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(88, 203, 227, 0.22);
  background: var(--bg-900);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.shot__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: #0c1b28;
  border-bottom: 1px solid var(--hair-2);
}
.shot__dots { display: flex; gap: 6px; flex: none; }
.shot__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); display: block; }
.shot__name { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-strong); }
.shot__url {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shot__foot {
  padding: 12px 16px;
  border-top: 1px solid var(--hair-2);
  background: rgba(255, 255, 255, 0.02);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 9px;
}
.shot__foot .dot { width: 7px; height: 7px; border-radius: 50%; background: #06d6a0; flex: none; }
.shot__crop { overflow: hidden; }
.shot__crop img { width: 100%; display: block; }
/* --trim clips the source screenshot's own title bar so only our chrome bar
   shows. The offset is a % of the *width* (that is how margin-% resolves):
   48px of a 1040x662 shot = 48/662 x 662/1040 = 4.6% of the width. */
.shot__crop--trim img { margin-top: -4.7%; }

/* ------------------------------------------------------------
   9. HERO (company)
   ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(88, 203, 227, 0.16), transparent 60%),
    linear-gradient(180deg, #0b1b2b 0%, #0a1822 100%);
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  padding: 46px var(--pad-x) 70px;
}
.hero h1 { font-size: 54px; line-height: 1.04; font-weight: 700; color: var(--text-strong); margin: 0 0 22px; }
.hero__eyebrow-row { margin-bottom: 26px; }
.hero__lead { font-size: 18px; line-height: 1.6; color: var(--text-soft); max-width: 540px; margin: 0 0 32px; }
.hero__cta { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; flex-wrap: wrap; }
.hero__proof { font-family: var(--font-display); font-size: 17px; color: var(--text); font-weight: 600; }
.hero__art { animation: sn-float 7s ease-in-out infinite; }
.hero__art img { height: 360px; border-radius: 18px; }

/* ---- Sub-page header ---------------------------------------------------
   The home page opens with .hero; every other page opens with this. Same
   gradient family, a third of the height, no art — it introduces the page
   without competing with the content underneath.
   ---------------------------------------------------------------------- */
.page-head {
  position: relative;
  overflow: hidden;
  padding: 54px var(--pad-x) 58px;
  border-bottom: 1px solid var(--hair);
  background:
    radial-gradient(900px 420px at 78% -20%, rgba(88, 203, 227, 0.13), transparent 60%),
    linear-gradient(180deg, var(--bg-780), var(--bg-800));
}
.page-head__inner { position: relative; max-width: 760px; }
.page-head h1 { font-size: 44px; line-height: 1.06; margin: 0 0 16px; }
.page-head p { font-size: 17px; line-height: 1.65; color: var(--text-soft); }

/* Current page in the nav */
.nav__links a[aria-current="page"] { color: var(--cyan-bright); font-weight: 600; }

/* ------------------------------------------------------------
   10. STATS
   ------------------------------------------------------------ */
.trust-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--eyebrow-muted);
  text-align: center; margin-bottom: 24px;
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { text-align: center; padding: 26px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--hair-2); }
.stat__num { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--cyan-bright); line-height: 1; }
.stat__num sup, .stat__num .unit { font-size: 22px; }
.stat__label { font-size: 13.5px; color: var(--text-muted); margin-top: 10px; }

/* ------------------------------------------------------------
   11. ABOUT
   ------------------------------------------------------------ */
.about__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 50px; align-items: center; }
.about img { height: 380px; }
.about h2 { font-size: 38px; line-height: 1.12; margin: 0 0 20px; }
.about p { font-size: 16.5px; line-height: 1.7; color: var(--text-soft); margin: 0 0 16px; }
.about p:last-of-type { margin-bottom: 26px; }
.about__mascot {
  height: 380px; width: 100%;
  object-fit: contain;
  background: radial-gradient(420px 320px at 50% 45%, rgba(88, 203, 227, 0.12), transparent 70%);
}
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pillar { padding: 18px; border-radius: 13px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hair-2); }
.pillar__k { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--cyan-bright); }
.pillar__v { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

/* ------------------------------------------------------------
   12. STEPS
   ------------------------------------------------------------ */
.intro { max-width: 760px; }
.intro h2 { font-size: 40px; line-height: 1.1; margin: 0 0 18px; }
.intro p { font-size: 17px; line-height: 1.65; color: var(--text-soft); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.step { padding: 30px; border-radius: 16px; background: var(--panel); border: 1px solid var(--hair-2); }
.step__n { font-family: var(--font-display); font-size: 14px; color: var(--cyan-bright); font-weight: 700; margin-bottom: 14px; }
.step__t { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 10px; color: var(--heading-soft); }
.step__b { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }

/* ------------------------------------------------------------
   13. SERVICES
   ------------------------------------------------------------ */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 38px; gap: 20px; }
.section-head h2 { font-size: 36px; }
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.forge {
  /* 1/-1, never "span 2": spanning two columns in the single-column mobile
     grid conjures an implicit content-sized column, which pushes the card
     past the page and .page's overflow:clip silently chops it. */
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(88, 203, 227, 0.28);
  background: linear-gradient(120deg, var(--panel-forge-a), var(--panel-forge-b));
}
.forge__body { padding: 38px; }
.forge__title { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 12px; color: var(--text-strong); }
.forge__pitch { font-size: 15.5px; line-height: 1.6; color: var(--text-soft); margin: 0 0 18px; max-width: 380px; }
.forge__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.forge__shot { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.service--ai { background: linear-gradient(140deg, #13314a, var(--panel)); border: 1px solid rgba(111, 160, 255, 0.28); }
.service__titlerow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.service__titlerow .card__title { margin: 0; }

.arsenal { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--hair-2); }
.arsenal__label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--eyebrow-muted); margin-bottom: 18px;
}
.arsenal__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.arsenal__strip { margin-top: 34px; display: grid; gap: 36px; }
.arsenal__group { margin: 0; }
.arsenal__group .kicker { display: block; margin-bottom: 18px; }
/* No plate. The source marks are near-black on transparent, so they are
   knocked out to a single flat white instead — the usual dark-background logo
   wall. brightness(0) flattens every hue first, invert(1) lifts it to white,
   so multi-colour marks land as one weight rather than inverting to garbage. */
/* height:auto and no object-fit: the width/height attributes already carry the
   ratio, and object-fit only ever gave a second, conflicting source of truth. */
.arsenal__group img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.82;
}

/* ------------------------------------------------------------
   14. PRODUCT FEATURE BLOCK (Cushy on the company page)
   ------------------------------------------------------------ */
.cc { position: relative; background: var(--bg-850); border-top: 1px solid rgba(88, 203, 227, 0.18); overflow: hidden; }
.cc__glow {
  position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 20% 0%, rgba(111, 160, 255, 0.12), transparent 60%);
  pointer-events: none;
}
.cc__inner { position: relative; }
/* Stacked, not split: the console screenshot is too detailed to survive being
   squeezed into a half-width column, so the copy runs above it and the shot
   gets the full shell at 1:1 with the source. */
.cc__head { max-width: 780px; margin-bottom: 32px; }
.cc h2 { font-size: 40px; line-height: 1.08; margin: 0 0 18px; }
/* The Cushy lockup stands in for the product heading. Every shape in the asset
   is currentColor, so it is inlined rather than referenced: an external SVG in
   an <img> cannot inherit colour, and the mask trick the product site uses
   would leave nothing at all on a browser without mask-image. */
.cc__title { margin: 0 0 20px; }
.cc__logo { display: block; width: 200px; height: auto; color: var(--text-strong); }
.cc__lead { font-size: 17px; line-height: 1.65; color: var(--text-soft); margin: 0 0 14px; }
.cc__sub { font-size: 15.5px; line-height: 1.65; color: var(--text-muted); margin: 0 0 0; }
.cc__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 30px; margin-bottom: 30px; }
.cc__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cc__shot { margin-top: 44px; }
.cc__shot .shot { max-width: 1040px; margin: 0 auto; }

/* ---- Topology diagram --------------------------------------------------
   Drawn, not screenshotted. A dark raster console can never separate from a
   dark band, and its baked-in 11px labels are illegible at any width we can
   give it. As inline SVG it scales, stays crisp, and every colour is ours.
   Provider hues match the live Cushy product so the two read as one system.
   ---------------------------------------------------------------------- */
/* The SVG also carries width/height attributes: Safari collapses a viewBox-only
   SVG under height:auto, and the attributes give it a box even with no CSS. */
.topo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1040 / 516;
  background: var(--bg-900);
}
.topo text { font-family: var(--font-body); }
.topo .topo-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.topo-grp { fill: rgba(255, 255, 255, 0.022); stroke-dasharray: 5 5; stroke-width: 1.4; }
.topo-node { fill: var(--panel); stroke-width: 1.2; }
.topo-link { stroke: rgba(88, 203, 227, 0.5); stroke-width: 1.6; fill: none; }
.topo-link--warn { stroke: rgba(255, 209, 102, 0.65); stroke-dasharray: 6 5; }
.topo-lbl { fill: var(--text-strong); font-size: 14px; font-weight: 600; }
.topo-sub { fill: var(--text-muted); font-size: 12.5px; }
.topo-res { fill: var(--body-cool); font-size: 12.5px; }
.topo-foot { fill: var(--text-dim); font-size: 12.5px; }
/* Provider hues. Scoped to .topo so these short names cannot leak into the
   document — an inline SVG's own <style> would be global. Values match the
   live Cushy product. */
.topo .aws { stroke: #ffd166; }
.topo .gcp { stroke: #3ccdff; }
.topo .azr { stroke: #06d6a0; }
.topo .ali { stroke: #ef476f; }
.topo .d-aws { fill: #ffd166; }
.topo .d-gcp { fill: #3ccdff; }
.topo .d-azr { fill: #06d6a0; }
.topo .d-ali { fill: #ef476f; }
.cc__cta .note { font-size: 13.5px; color: var(--text-dim); }
.feat { display: flex; align-items: flex-start; gap: 10px; }
.feat__check { color: var(--cyan-bright); font-size: 16px; line-height: 1.4; flex: none; }
.feat__text { font-size: 14px; line-height: 1.5; color: var(--body-cool); }

/* ------------------------------------------------------------
   15. BUILD GRID / FAQ / GUARANTEES
   ------------------------------------------------------------ */
.build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.build-card { padding: 28px; border-radius: 16px; background: var(--panel); border: 1px solid var(--hair-2); }
.build-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 9px; color: var(--heading-soft); }
.build-card p { font-size: 14px; line-height: 1.6; color: var(--text-muted); }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.faq-item { padding-bottom: 22px; border-bottom: 1px solid var(--hair-3); }
.faq-item h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--heading-soft); }
.faq-item p { font-size: 14px; line-height: 1.6; color: var(--text-muted); }

.guarantees {
  padding: 34px var(--pad-x);
  background: var(--bg-760);
  border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap;
}
.guarantee { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--body-cool); }
.guarantee .check { color: var(--cyan-bright); font-size: 18px; }

/* ------------------------------------------------------------
   16. ENGAGEMENT MODELS
   ------------------------------------------------------------ */
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.model { position: relative; padding: 32px; border-radius: 18px; background: var(--panel); border: 1px solid var(--hair-2); }
.model--pop { background: linear-gradient(140deg, #13314a, var(--panel)); border: 1px solid rgba(88, 203, 227, 0.3); }
.model__badge {
  position: absolute; top: 22px; right: 22px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(88, 203, 227, 0.18); color: var(--cyan-glow);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.model h3 { font-size: 21px; font-weight: 700; margin-bottom: 8px; color: var(--heading-soft); }
.model__pop-title { color: var(--text-strong); }
.model p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0 0 18px; }
.model--pop p { color: var(--text-soft); }
.model__best-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eyebrow-muted); margin-bottom: 8px; }
.model__best { font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }

/* ------------------------------------------------------------
   17. FROST SECTION (Glacier Glide)
   ------------------------------------------------------------ */
.frost-section { background: var(--frost); color: var(--frost-ink); }
.frost-section .eyebrow { color: var(--frost-eyebrow); }
.frost-section h2 { color: var(--frost-ink-strong); }
.frost-section .lead { color: var(--frost-muted); }
.glide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.glide__card { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 8px 24px rgba(20, 60, 80, 0.06); }
.glide__card--dark { background: linear-gradient(140deg, var(--panel-forge-a), var(--panel-forge-b)); box-shadow: 0 8px 24px rgba(20, 60, 80, 0.12); }
.glide__n { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--cyan); margin-bottom: 14px; }
.glide__card--dark .glide__n { color: var(--cyan-bright); }
.glide__t { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 9px; }
.glide__card--dark .glide__t { color: var(--text-strong); }
.glide__b { font-size: 13.5px; line-height: 1.6; color: var(--frost-muted-2); }
.glide__card--dark .glide__b { color: var(--text-soft); }
.glide--3 { grid-template-columns: repeat(3, 1fr); }

/* ------------------------------------------------------------
   18. TEAM
   ------------------------------------------------------------ */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.member { border-radius: 16px; overflow: hidden; border: 1px solid var(--hair-3); background: var(--panel); }
.member img { width: 100%; height: 170px; object-fit: cover; }
.member__body { padding: 18px; }
.member__name { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.member__role { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.team-note { font-size: 16px; line-height: 1.7; color: var(--text-soft); margin: 34px 0 0; max-width: 640px; }

/* Founder card — full-body cutout on a glacier panel */
.founder {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 0.45fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 36px;
  border-radius: 20px;
  background: linear-gradient(140deg, var(--panel-forge-a), var(--panel));
  border: 1px solid rgba(88, 203, 227, 0.22);
}
.founder__shot {
  position: relative;
  border-radius: 16px;
  background:
    radial-gradient(300px 300px at 50% 30%, rgba(88, 203, 227, 0.18), transparent 70%),
    linear-gradient(180deg, #0d2333, #0a1822);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  min-height: 400px;
}
.founder__shot img { height: 420px; width: auto; max-width: none; object-fit: contain; }
.founder__name { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--text-strong); }
.founder__role { font-size: 15px; color: var(--cyan-bright); margin-top: 6px; font-weight: 600; }
.founder__bio { font-size: 15.5px; line-height: 1.7; color: var(--text-soft); margin: 18px 0 22px; max-width: 520px; }
.founder__links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.founder__links a.chip { display: inline-flex; align-items: center; gap: 8px; }
.founder__links img { width: 16px; height: 16px; }

/* ------------------------------------------------------------
   19. CTA FOOTER + NEWSLETTER
   ------------------------------------------------------------ */
.cta { position: relative; padding: 80px var(--pad-x) 70px; background: linear-gradient(140deg, var(--panel-forge-a), var(--bg-800)); overflow: hidden; }
.cta__inner { position: relative; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: end; }
.cta h2 { font-size: 44px; line-height: 1.06; margin: 0 0 18px; }
.cta__lead { font-size: 16.5px; line-height: 1.6; color: var(--text-soft); max-width: 480px; margin: 0 0 28px; }
.cta__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta__row .note { font-size: 14px; color: var(--text-dim); }

.newsletter { background: var(--panel); border: 1px solid var(--hair-3); border-radius: 18px; padding: 28px; }
.newsletter h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--heading-soft); margin-bottom: 6px; }
.newsletter p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 16px; }
.newsletter__row { display: flex; gap: 8px; }
.newsletter__input {
  flex: 1; min-width: 0;
  padding: 12px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-soft-2);
  font-size: 13.5px; color: var(--text); font-family: var(--font-body);
}
.newsletter__input::placeholder { color: var(--text-faint); }
.newsletter__btn {
  padding: 12px 20px; border-radius: 999px;
  background: var(--grad-accent); color: var(--ink-on-accent);
  font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
  border: 0; cursor: pointer;
}
.newsletter__btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.newsletter__msg { margin-top: 12px; font-size: 13px; min-height: 18px; }
.newsletter__msg--ok { color: #8ff0c0; }
.newsletter__msg--err { color: #ff9b9b; }

/* Footer columns */
.footer-cols {
  position: relative;
  margin-top: 56px; padding-top: 40px;
  border-top: 1px solid var(--hair-3);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px;
}
.footer-cols__blurb { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); margin: 16px 0 0; max-width: 260px; }
.footer-col__head { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eyebrow-muted); margin-bottom: 16px; }
.footer-col__links { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; color: var(--text-soft); }
.footer-col__links a:hover { color: var(--text); }
.footer-legal {
  position: relative;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--hair-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: var(--eyebrow-muted);
}

/* ------------------------------------------------------------
   20. PRODUCT PAGE (Cushy)
   ------------------------------------------------------------ */
.cc-hero {
  position: relative;
  padding: 64px var(--pad-x) 74px;
  background:
    radial-gradient(1000px 480px at 75% -10%, rgba(111, 160, 255, 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-800), var(--bg-850));
  overflow: hidden;
}
.cc-hero__inner { position: relative; max-width: 820px; }
.cc-hero h1 { font-size: 58px; line-height: 1.04; margin: 0 0 22px; }
.cc-hero p { font-size: 18.5px; line-height: 1.6; color: var(--text-soft); max-width: 640px; margin: 0 0 32px; }
.cc-hero__shot { position: relative; margin-top: 52px; }

.problem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.problem__card { padding: 26px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hair-2); }
.problem__big { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--cyan-bright); margin-bottom: 8px; }
.problem__card p { font-size: 14px; line-height: 1.6; color: var(--text-muted); }

.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.feature-split h2 { font-size: 34px; margin: 0 0 16px; }
.feature-split > div > p { font-size: 16px; line-height: 1.65; color: var(--text-soft); margin: 0 0 22px; }
.check-list { display: flex; flex-direction: column; gap: 12px; }
.check-list div { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--body-cool); }
.check-list span { color: var(--cyan-bright); flex: none; }

.network-head { max-width: 760px; margin-bottom: 44px; }
.network-head h2 { font-size: 34px; margin: 0 0 16px; }
.network-head p { font-size: 16px; line-height: 1.65; color: var(--text-soft); }
.network-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.network-grid .build-card h3 { font-size: 18px; }

.ai-security { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ai-card { padding: 36px; border-radius: 18px; background: linear-gradient(140deg, #13314a, var(--panel)); border: 1px solid rgba(111, 160, 255, 0.28); }
.sec-card { padding: 36px; border-radius: 18px; background: var(--panel); border: 1px solid var(--hair-2); }
.ai-card h3, .sec-card h3 { font-size: 24px; font-weight: 700; margin: 0 0 12px; color: var(--text-strong); }
.ai-card > p, .sec-card > p { font-size: 14.5px; line-height: 1.65; color: var(--text-soft); margin: 0 0 20px; }
.terminal {
  padding: 16px 18px; border-radius: 12px;
  background: rgba(8, 20, 32, 0.6); border: 1px solid var(--hair-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--cyan-glow);
}
.sec-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sec-tags .chip { font-size: 12.5px; padding: 8px 14px; }

.cc-cta { position: relative; padding: 80px var(--pad-x) 60px; background: linear-gradient(140deg, var(--panel-forge-a), var(--bg-800)); overflow: hidden; }
.cc-cta__row { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.cc-cta h2 { font-size: 42px; line-height: 1.06; margin: 0 0 16px; }
.cc-cta p { font-size: 16px; line-height: 1.6; color: var(--text-soft); max-width: 460px; margin: 0 0 26px; }
.cc-cta__back { color: var(--cyan-bright); font-size: 14px; }
.cc-cta__back:hover { color: var(--cyan-glow); }
.cc-cta__legal { position: relative; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hair-3); font-size: 12.5px; color: var(--eyebrow-muted); }

/* ------------------------------------------------------------
   21. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  :root { --gutter: 40px; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero h1 { font-size: 46px; }
  .hero__art { order: -1; }
  .hero__art img { height: 300px; }

  .about__grid { grid-template-columns: 1fr; gap: 34px; }
  .about img, .about__mascot { height: 320px; }

  .cc__feats { grid-template-columns: 1fr 1fr; }
  .cc__shot { margin-top: 34px; }

  .cta__inner { grid-template-columns: 1fr; align-items: stretch; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .glide { grid-template-columns: repeat(2, 1fr); }
  .glide--3 { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }

  .founder { grid-template-columns: 1fr; gap: 28px; }
  .founder__shot { min-height: 300px; }
  .founder__shot img { height: 320px; }

  .footer-cols { grid-template-columns: 1fr 1fr; gap: 30px 24px; }

  .feature-split { grid-template-columns: 1fr; gap: 30px; }
  .feature-split .shot, .feature-split .media { order: -1; }
  .cc-hero h1 { font-size: 46px; }
}

@media (max-width: 680px) {
  :root { --gutter: 22px; }

  .section, .section--about, .section--cc { padding: 52px var(--pad-x); }
  .cc-hero { padding: 44px var(--pad-x) 54px; }

  .nav { flex-wrap: wrap; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-soft);
    color: var(--text); cursor: pointer;
  }
  .nav__links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 12px;
  }
  .nav__links.is-open { display: flex; }

  .hero h1 { font-size: 34px; }
  .hero__lead { font-size: 16px; }
  .hero__cta { gap: 10px; }

  .h-section, .h-section-lg { font-size: 26px; }
  .about h2, .intro h2, .cc h2, .cta h2, .cc-hero h1, .cc-cta h2 { font-size: 28px; }
  .cc__logo { width: 150px; }
  .page-head { padding: 36px var(--pad-x) 40px; }
  .page-head h1 { font-size: 30px; }
  .page-head p { font-size: 15.5px; }
  .cc-hero h1 { font-size: 34px; }
  .founder__name { font-size: 24px; }

  .grid-2, .grid-3, .grid-4,
  .services, .forge, .steps, .pillars, .build-grid,
  .models, .stats, .glide, .glide--3, .team, .faq-grid,
  .cc__feats, .problem, .network-grid, .ai-security {
    grid-template-columns: 1fr;
  }
  .forge__shot { min-height: 220px; height: 220px; }

  .section-head { flex-direction: column; align-items: flex-start; }
  .guarantees { gap: 16px 24px; }
  .footer-cols { grid-template-columns: 1fr; }
  .cc-cta__row { flex-direction: column; align-items: flex-start; }

  .newsletter__row { flex-direction: column; }
  .newsletter__input { width: 100%; }
  .newsletter__btn { width: 100%; }

  .shot__url { display: none; }
}


/* ------------------------------------------------------------
   22. MOTION — scroll reveal, nav state, hover craft
   Transform and opacity only, so every animation stays on the
   compositor. Everything is inert under reduced motion, and
   .is-in is applied by snoweasl.js via IntersectionObserver.
   ------------------------------------------------------------ */

/* The hidden state is scoped to .js-reveal, which the script adds to <html>
   only once it knows it can reveal again. No JS, no hidden content. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

/* Children stagger from one observer on the parent. */
.js-reveal [data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal [data-reveal-group].is-in > * { opacity: 1; transform: none; }
.js-reveal [data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0ms; }
.js-reveal [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 55ms; }
.js-reveal [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 110ms; }
.js-reveal [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 165ms; }
.js-reveal [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 220ms; }
.js-reveal [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 275ms; }

/* Hero entrance — same curve, on load rather than on scroll. */
@keyframes sn-rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
.js-reveal .hero__eyebrow-row,
.js-reveal .hero h1,
.js-reveal .hero__lead,
.js-reveal .hero__cta,
.js-reveal .hero__proof { animation: sn-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.js-reveal .hero h1     { animation-delay: 0.06s; }
.js-reveal .hero__lead  { animation-delay: 0.14s; }
.js-reveal .hero__cta   { animation-delay: 0.22s; }
.js-reveal .hero__proof { animation-delay: 0.30s; }

/* Nav condenses once the hero is behind you. */
.nav { transition: background 0.25s ease, backdrop-filter 0.25s ease, padding 0.25s ease; }
.nav.is-stuck {
  position: sticky;
  top: 0;
  padding-top: 14px;
  padding-bottom: 14px;
  background: rgba(10, 24, 34, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hair-2);
}

/* Card lift; the border warms toward cyan so the motion lands somewhere. */
.card, .build-card, .step, .model, .problem__card, .glide__card, .member {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.22s ease, box-shadow 0.22s ease;
}
@media (hover: hover) {
  .card:hover, .build-card:hover, .step:hover, .model:hover, .problem__card:hover {
    transform: translateY(-3px);
    border-color: rgba(88, 203, 227, 0.28);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  }
  .glide__card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20, 60, 80, 0.14); }
  .chip { transition: border-color 0.18s ease, color 0.18s ease; }
  .chip:hover { border-color: rgba(88, 203, 227, 0.4); color: var(--text-strong); }
  .cc__shot .shot:hover { transform: translateY(-4px); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.58); }
}
.shot { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js-reveal .hero__eyebrow-row, .js-reveal .hero h1, .js-reveal .hero__lead,
  .js-reveal .hero__cta, .js-reveal .hero__proof { animation: none !important; }
  .nav.is-stuck { backdrop-filter: none; }
}


/* ------------------------------------------------------------
   23. SHOWPIECE MOTION
   The loud layer. Everything below is transform/opacity/filter on
   the compositor, and every block is killed by the reduced-motion
   query at the end of this section.
   ------------------------------------------------------------ */

/* --- Scroll progress rail, pinned to the top of the viewport --- */
.scroll-rail {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none;
  background: transparent;
}
.scroll-rail__fill {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-accent);
  box-shadow: 0 0 12px rgba(88, 203, 227, 0.6);
}

/* --- Hero aurora: two slow counter-drifting glows --- */
.hero::before,
.hero::after {
  content: ""; position: absolute; pointer-events: none;
  border-radius: 50%; filter: blur(80px); opacity: 0.5; z-index: 0;
}
.hero::before {
  will-change: transform;
  width: 780px; height: 620px; top: -220px; right: -140px;
  background: radial-gradient(circle, rgba(88, 203, 227, 0.34), transparent 68%);
  animation: aurora-a 19s ease-in-out infinite;
}
.hero::after {
  will-change: transform;
  width: 640px; height: 520px; bottom: -260px; left: -120px;
  background: radial-gradient(circle, rgba(111, 160, 255, 0.3), transparent 68%);
  animation: aurora-b 24s ease-in-out infinite;
}
@keyframes aurora-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-70px, 50px, 0) scale(1.14); }
}
@keyframes aurora-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50%      { transform: translate3d(80px, -40px, 0) scale(1); }
}

/* --- Headline reveals a line at a time --- */
.h1-line { display: block; }
.js-reveal .hero h1 .h1-line {
  animation: sn-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.js-reveal .hero h1 .h1-line:nth-child(1) { animation-delay: 0.05s; }
.js-reveal .hero h1 .h1-line:nth-child(2) { animation-delay: 0.16s; }
.js-reveal .hero h1 .h1-line:nth-child(3) { animation-delay: 0.27s; }
/* the whole h1 no longer animates as one block */
.js-reveal .hero h1 { animation: none; }

/* The accent phrase warms up after the line lands. */
.hero h1 .accent {
  background: linear-gradient(100deg, var(--cyan-bright), var(--blue), var(--cyan-bright));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: accent-pan 7s ease-in-out infinite;
}
@keyframes accent-pan {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* --- Live dot in the hero pill --- */
.pill--dot .dot { position: relative; }
.pill--dot .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--cyan); animation: dot-ping 2.4s ease-out infinite;
}
@keyframes dot-ping {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* --- Primary button: sheen sweep on hover --- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg); opacity: 0;
}
@media (hover: hover) {
  .btn--primary:hover::after { opacity: 1; animation: sheen 0.75s ease-out; }
}
@keyframes sheen { from { left: -60%; } to { left: 130%; } }

/* --- Hero art: floats, and drifts on scroll via --sy from JS --- */
.hero__art { transform: translate3d(0, calc(var(--sy, 0) * -22px), 0); }

/* --- Topology comes alive --- */
.topo-link { stroke-dasharray: 7 9; animation: dash-flow 1.6s linear infinite; }
.topo-link--warn { animation-duration: 2.6s; }
@keyframes dash-flow { to { stroke-dashoffset: -32; } }

.topo .d-aws, .topo .d-gcp, .topo .d-azr, .topo .d-ali { animation: node-pulse 3.2s ease-in-out infinite; }
.topo .d-gcp { animation-delay: 0.4s; }
.topo .d-azr { animation-delay: 0.8s; }
.topo .d-ali { animation-delay: 1.2s; }
@keyframes node-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.topo-grp { animation: grp-breathe 6s ease-in-out infinite; }
@keyframes grp-breathe {
  0%, 100% { stroke-opacity: 0.85; }
  50%      { stroke-opacity: 0.45; }
}
/* Draw the whole map on first reveal. */
.js-reveal .cc__shot .topo-node,
.js-reveal .cc__shot .topo-grp { opacity: 0; }
.js-reveal .cc__shot.is-in .topo-grp  { animation: grp-breathe 6s ease-in-out infinite, sn-fade 0.6s ease-out both; }
.js-reveal .cc__shot.is-in .topo-node { animation: sn-fade 0.5s ease-out both; }
.js-reveal .cc__shot.is-in .topo-node:nth-of-type(even) { animation-delay: 0.18s; }
@keyframes sn-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Status dot in the shot footer --- */
.shot__foot .dot { animation: node-pulse 2.4s ease-in-out infinite; }

/* --- Section eyebrows slide their tracking in --- */
.js-reveal [data-reveal].is-in .eyebrow { animation: track-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes track-in {
  from { opacity: 0; letter-spacing: 0.34em; }
  to   { opacity: 1; letter-spacing: 0.18em; }
}

/* --- Step numbers count in --- */
.js-reveal [data-reveal-group].is-in .step__n { animation: sn-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both 0.15s; }

/* --- Cushy logo draws a soft glow when it arrives --- */
.js-reveal .cc__head.is-in .cc__logo { animation: logo-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes logo-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.96); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* --- Everything off --- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after,
  .hero h1 .accent, .pill--dot .dot::after,
  .topo-link, .topo .d-aws, .topo .d-gcp, .topo .d-azr, .topo .d-ali,
  .topo-grp, .shot__foot .dot,
  .js-reveal .hero h1 .h1-line,
  .js-reveal [data-reveal].is-in .eyebrow,
  .js-reveal [data-reveal-group].is-in .step__n,
  .js-reveal .cc__head.is-in .cc__logo,
  .js-reveal .cc__shot.is-in .topo-grp,
  .js-reveal .cc__shot.is-in .topo-node { animation: none !important; }
  .js-reveal .cc__shot .topo-node, .js-reveal .cc__shot .topo-grp { opacity: 1 !important; }
  .topo-link { stroke-dasharray: none; }
  .hero h1 .accent { -webkit-text-fill-color: var(--cyan-bright); color: var(--cyan-bright); }
  .hero__art { transform: none; }
  .scroll-rail { display: none; }
}


/* ------------------------------------------------------------
   24. FLOW — the interactive walkthrough
   Replaces three identical cards. The visitor drives it; it
   auto-advances only until they touch it. Diagrams reuse the
   topology's vocabulary, so no new primitive enters the system.
   ------------------------------------------------------------ */
.flow { margin-top: 44px; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 34px; align-items: start; }

.flow__rail { display: flex; flex-direction: column; gap: 10px; }
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
  width: 100%;
  padding: 20px 22px 22px;
  border-radius: 16px;
  border: 1px solid var(--hair-2);
  background: var(--panel);
  color: inherit;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background 0.24s ease, border-color 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.flow__step:hover { transform: translateX(3px); border-color: rgba(88, 203, 227, 0.28); }
.flow__step.is-on {
  background: linear-gradient(140deg, var(--panel-forge-a), var(--panel));
  border-color: rgba(88, 203, 227, 0.42);
}
.flow__n {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--text-faint);
  transition: color 0.24s ease;
}
.flow__step.is-on .flow__n { color: var(--cyan-bright); }
.flow__t { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--heading-soft); }
.flow__step.is-on .flow__t { color: var(--text-strong); }
/* the timer rail — width is driven from JS so pausing is honest */
.flow__bar {
  grid-column: 1 / -1;
  height: 2px; margin-top: 12px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.flow__bar i { display: block; height: 100%; width: 0; background: var(--grad-accent); }

.flow__stage {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(88, 203, 227, 0.2);
  background: linear-gradient(150deg, var(--bg-900), var(--panel));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  padding: 26px 28px 28px;
  min-height: 320px;
}
.flow__panel[hidden] { display: none; }
.flow__panel { animation: flow-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes flow-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}
.flow__art { display: block; width: 100%; height: auto; margin-bottom: 20px; }
.flow__b { font-size: 15.5px; line-height: 1.65; color: var(--text-soft); max-width: 52ch; }

/* diagram vocabulary — same tokens as .topo */
.fd-panel { fill: rgba(255, 255, 255, 0.035); stroke: var(--hair-3); stroke-width: 1.2; }
.fd-grp   { fill: rgba(255, 255, 255, 0.022); stroke: rgba(88, 203, 227, 0.28); stroke-width: 1.3; stroke-dasharray: 5 5; }
.fd-node  { fill: var(--panel); stroke: rgba(88, 203, 227, 0.4); stroke-width: 1.2; }
.fd-line  { fill: rgba(255, 255, 255, 0.14); }
.fd-line--type { fill: var(--cyan); animation: fd-type 2.6s steps(18) infinite; transform-origin: left center; }
@keyframes fd-type { 0% { transform: scaleX(0.15); } 70%, 100% { transform: scaleX(1); } }
.fd-link  { stroke: rgba(88, 203, 227, 0.5); stroke-width: 1.5; fill: none; }
.fd-link--flow { stroke-dasharray: 6 7; animation: dash-flow 1.5s linear infinite; }
.fd-dot   { fill: var(--cyan-bright); }
.fd-dot--live { fill: #06d6a0; animation: node-pulse 2.2s ease-in-out infinite; }
.fd-cap   { fill: var(--eyebrow-muted); font-family: var(--font-body); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.fd-t     { fill: var(--body-cool); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.fd-aws { stroke: rgba(255, 209, 102, 0.55); }
.fd-gcp { stroke: rgba(60, 205, 255, 0.55); }
.fd-azr { stroke: rgba(6, 214, 160, 0.55); }
.fd-ali { stroke: rgba(239, 71, 111, 0.55); }

@media (max-width: 1000px) {
  .flow { grid-template-columns: 1fr; gap: 22px; }
  .flow__rail { flex-direction: row; flex-wrap: wrap; }
  .flow__step { flex: 1 1 200px; padding: 16px 18px 18px; }
  .flow__stage { min-height: 0; }
}
@media (max-width: 680px) {
  .flow__rail { flex-direction: column; gap: 8px; }
  /* flex-basis:200px above is a WIDTH for the row layout; once the rail turns
     into a column it becomes a 200px HEIGHT and every card balloons. */
  .flow__step { width: 100%; flex: 0 0 auto; padding: 14px 16px; gap: 0 12px; }
  .flow__t { font-size: 16px; }
  /* No auto-advance on touch, so the timer rail would be measuring nothing. */
  .flow__bar { display: none; }
  .flow__stage { padding: 16px 14px 20px; min-height: 0; }
  .flow__art { margin-bottom: 16px; }
  .flow__b { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__panel { animation: none; }
  .fd-line--type, .fd-link--flow, .fd-dot--live { animation: none; }
  .fd-line--type { transform: none; }
  .flow__bar i { display: none; }
}


/* ---- Explorable topology ------------------------------------------------ */
.topo-cloud { transition: opacity 0.25s ease; cursor: pointer; }
.topo[data-active] .topo-cloud { opacity: 0.22; }
.topo[data-active="aws"] .topo-cloud[data-cloud="aws"],
.topo[data-active="gcp"] .topo-cloud[data-cloud="gcp"],
.topo[data-active="azr"] .topo-cloud[data-cloud="azr"],
.topo[data-active="ali"] .topo-cloud[data-cloud="ali"] { opacity: 1; }
/* links fade back too, so the highlighted cloud is the only thing moving */
.topo[data-active] .topo-link { opacity: 0.25; }

.topo-legend {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--hair-2);
}
.topo-legend__hint { font-size: 12px; color: var(--text-faint); }
.topo-legend__set { display: flex; gap: 8px; flex-wrap: wrap; }
.topo-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body); font-size: 12px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.topo-chip i { width: 7px; height: 7px; border-radius: 50%; display: block; flex: none; }
.topo-chip:hover, .topo-chip.is-on {
  color: var(--text-strong);
  border-color: rgba(88, 203, 227, 0.45);
  background: rgba(88, 203, 227, 0.08);
}
@media (max-width: 680px) {
  .topo-legend { justify-content: flex-start; }
  .topo-legend__hint { width: 100%; }
}