/* ==========================================================================
   Gummy Pons — design system
   Layout, type scale and motion follow the Matter reference 1:1.
   The only palette change: the reference mint (#0f8054) is replaced by our
   brand green (hue ~120), sampled from the Gummy Pons glass mark.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:            #000000;
  --bg-2:          #030303;
  --surface:       #141414;
  --surface-2:     #1c1c1c;
  --surface-3:     #262626;
  --hairline:      rgba(255, 255, 255, .10);
  --hairline-soft: rgba(255, 255, 255, .06);

  /* Text */
  --text:   #ffffff;
  --text-2: #c9c9c9;
  --text-3: #7c7c7c;
  --on-brand: #052440;

  /* Brand sky — sampled from the hero sky plate */
  --brand:        #1a8fe3;
  --brand-bright: #3fa9f0;
  --brand-glow:   #a9d8f7;
  --brand-pale:   #dceefb;
  --brand-deep:   #0b4e8a;

  /* Kept from the reference */
  --accent: #fbbc00;

  /* three stops sampled off the logo, used wherever the mark's own colours
     should show through — the collapsed nav indicator, for one */
  --rainbow-1: #f4392a;   /* the logo's red, lifted to read on the dark bar */
  --rainbow-2: #35cf62;   /* the logo's green, lifted for the dark bar */
  --rainbow-3: #a03cf0;   /* the logo's violet, same treatment */

  /* Geometry */
  --r-block: 32px;
  --r-card:  24px;
  --r-chip:  999px;
  --gutter:  clamp(16px, 4vw, 56px);
  --edge:    8px;
  --maxw:    1440px;

  /* Type */
  --font: 'Inter', 'Inter Placeholder', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Geist', 'Inter', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--brand); color: var(--on-brand); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

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

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.block {
  position: relative;
  margin: 0 var(--edge) var(--edge);
  border-radius: var(--r-block);
  overflow: hidden;
  background: var(--bg-2);
}
.block--brand { background: var(--brand); color: var(--on-brand); }

/* Sky block — the photographic plate that replaces the reference's flat green.
   Layers, bottom up: photo, a light veil that guarantees text contrast, then
   the parallax cloud layer (see .clouds). */
.block--sky { color: var(--on-brand); background: var(--brand); isolation: isolate; }
.block--sky::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url('/assets/img/sky.webp');
  background-size: cover;
  background-position: 50% 42%;
}
.block--sky::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 34%, rgba(255,255,255,.34) 100%),
    radial-gradient(90% 70% at 50% 6%, rgba(4,44,80,.26), transparent 62%);
}
.block--sky > * { position: relative; z-index: 3; }
@media (max-width: 900px) {
  .block--sky::before { background-image: url('/assets/img/sky-1100.webp'); }
}
.block--flush { background: transparent; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pad     { padding-block: clamp(72px, 10vw, 160px); }
.pad-tight { padding-block: clamp(46px, 5.4vw, 92px); }
.pad-sm  { padding-block: clamp(48px, 6vw, 96px); }
.pad-lg  { padding-block: clamp(96px, 14vw, 220px); }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-3);
  margin: 0 0 clamp(24px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(56px, 12vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0;
}
.display--sm { font-size: clamp(40px, 7vw, 96px); }

.lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 22ch;
}
.lead--wide { max-width: 30ch; }

.body   { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; color: var(--text-2); margin: 0; }
.body-2 { font-size: 14px; line-height: 1.5; color: var(--text-3); margin: 0; }
.mono   { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em; }

.txt-brand  { color: var(--brand-bright); }
.txt-accent { color: var(--accent); }
.txt-muted  { color: var(--text-3); }

/* Word-by-word reveal used on the big statement paragraphs (Matter behaviour) */
.reveal-words span {
  display: inline-block;
  opacity: .18;
  transition: opacity .45s var(--ease);
}
.reveal-words.is-in span { opacity: 1; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--on-brand);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-chip);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), height .45s var(--ease), padding .45s var(--ease);
}
.btn:hover { --btn-bg: var(--brand-bright); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border: 1px solid var(--hairline); }
.btn--ghost:hover { --btn-bg: var(--surface-2); }
.btn--dark { --btn-bg: var(--surface); --btn-fg: var(--text); }
.btn--dark:hover { --btn-bg: var(--surface-2); }
.btn--lg { height: 54px; padding: 0 28px; font-size: 15px; }
.btn[aria-disabled="true"] { cursor: not-allowed; --btn-bg: var(--surface); --btn-fg: var(--text-3); transform: none; }

/* Rolling label — two stacked copies, so kerning is never broken. */
.btn__lbl { display: grid; overflow: hidden; line-height: 1.25; }
.btn__lbl > span { grid-area: 1 / 1; transition: transform .42s var(--ease); }
.btn__lbl > span:nth-child(2) { transform: translateY(115%); }
.btn:hover .btn__lbl > span:nth-child(1) { transform: translateY(-115%); }
.btn:hover .btn__lbl > span:nth-child(2) { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Chips / notices
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 13px;
  border-radius: var(--r-chip);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2);
  white-space: nowrap;
}
.chip--brand  { background: var(--brand);  border-color: transparent; color: var(--on-brand); }
.chip--accent { background: var(--accent); border-color: transparent; color: #1a1400; font-weight: 500; }
.chip--soon   { background: transparent; color: var(--text-3); }
.block--brand .chip, .block--sky .chip { border-color: rgba(5,36,64,.28); background: rgba(5,36,64,.06); color: rgba(5,36,64,.72); }
.block--sky .chip { background: rgba(255,255,255,.52); border-color: rgba(5,36,64,.16); color: rgba(5,36,64,.82); backdrop-filter: blur(6px); }
.block--sky .notice { background: rgba(255,255,255,.5); border-color: rgba(5,36,64,.24); color: rgba(5,36,64,.78); backdrop-filter: blur(6px); }
.block--sky .notice b { color: #7a4b00; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.dot--live { background: var(--brand-bright); }

.notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border: 1px dashed var(--hairline);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--text-3);
}
.notice b { color: var(--accent); font-weight: 500; }
.block--brand .notice, .block--sky .notice { border-color: rgba(5,36,64,.3); background: rgba(5,36,64,.07); color: rgba(5,36,64,.74); }
.block--brand .notice b, .block--sky .notice b { color: var(--on-brand); }

/* --------------------------------------------------------------------------
   Section head — centred eyebrow, oversized title, action on the right
   -------------------------------------------------------------------------- */

/* Section divider: a hairline across the whole block with a pill sitting on it,
   the way the reference marks every section boundary. */
.eyebrow {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  padding-block: clamp(26px, 3.4vw, 44px);
}
/* The rule used to be one absolutely-positioned line at `top: 50%`, which is
   50% of the PADDING box — so the moment a section gave its eyebrow extra
   padding-top, the line sat above the pill instead of through it. The two
   halves are flex items now: they share the pill's centred line box, so they
   are always on its centre line whatever the padding does. */
.eyebrow::before,
.eyebrow::after {
  content: '';
  flex: 1 1 0; min-width: 0;
  height: 1px; background: var(--hairline);
}
.eyebrow__pill {
  /* deliberately NO z-index: the pill must stay in the positioned layer so its
     own ::before bloom (z-index: -1) paints underneath it. The rule halves no
     longer run behind the pill, so it has nothing left to sit above. */
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px;
  border-radius: var(--r-chip);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2);
  white-space: nowrap;
}
.eyebrow img { width: 11px; opacity: .95; }
/* the bloom below sits at z-index -1, so the eyebrow needs its own stacking
   context or it would slip behind an opaque ancestor */
.block--sky .eyebrow, .sky-page .eyebrow { isolation: isolate; }

/* On the sky the divider cannot be a drawn dark line — it reads as a crack in
   the photograph. It becomes a light seam instead: a hairline that fades out
   long before the block edges, sitting on a wide, very soft bloom, so the
   boundary reads like a horizon the pill is resting on. Each half fades from
   the pill outwards, so the two together read as one continuous seam. */
.block--sky .eyebrow::before {
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 26%, rgba(255,255,255,.62) 100%);
  box-shadow: 0 1px 0 rgba(6, 48, 88, .10);
}
.block--sky .eyebrow::after {
  background: linear-gradient(90deg,
    rgba(255,255,255,.62) 0%, rgba(255,255,255,.30) 74%, rgba(255,255,255,0) 100%);
  box-shadow: 0 1px 0 rgba(6, 48, 88, .10);
}
/* the bloom hangs off the PILL, so it stays centred on the pill no matter what
   padding the section gives the eyebrow */
.block--sky .eyebrow__pill::before {
  content: '';
  position: absolute; inset: -130px -50vw;
  background:
    radial-gradient(46% 62% at 50% 50%, rgba(255,255,255,.30), transparent 72%),
    radial-gradient(80% 100% at 50% 50%, rgba(255,255,255,.10), transparent 76%);
  pointer-events: none; z-index: -1;
}
.block--sky .eyebrow__pill {
  background: rgba(255,255,255,.66); border-color: rgba(5,36,64,.14);
  color: rgba(5,36,64,.84); backdrop-filter: blur(6px);
}

.head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.head .display { position: relative; }
.head .display sup {
  position: absolute; left: 100%; top: .04em;
  margin-left: .05em;
  font-family: var(--font-mono); font-size: .09em;
  color: var(--accent); letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Nav — full pill at rest. Scrolling down collapses it to the wordmark with an
   animated bar indicator on the right; scrolling up opens it again.
   The collapse animates a grid track from 1fr to 0fr, which is the only way to
   transition "auto" width smoothly without measuring anything in JS.
   -------------------------------------------------------------------------- */

.nav { position: fixed; inset: 18px 0 auto; z-index: 90; display: flex; justify-content: center; pointer-events: none; }
.nav__inner {
  pointer-events: auto;
  /* the reference bar's proportions: a tight shell, a big gap between the mark
     and the links, and the CTA sitting 6px off the right edge. The wide gap is
     most of why it reads as a widget rather than a menu bar. */
  display: flex; align-items: center; gap: clamp(26px, 3.4vw, 60px);
  padding: 6px 6px 6px 18px;
  border-radius: var(--r-chip);
  background: rgba(18, 18, 18, .82);
  border: 1px solid var(--hairline-soft);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .55);
  transition: padding .55s var(--ease), background .55s var(--ease),
              gap .55s var(--ease), box-shadow .55s var(--ease);
}
.nav.is-collapsed .nav__inner { padding: 6px 12px 6px 18px; gap: 16px; }

/* the bar is always dark, so it sets its own colour: inheriting from the page
   turned the wordmark navy-on-navy on the sky pages */
.nav__inner, .nav__inner * { color: var(--text); }
.nav__inner .nav__link { color: var(--text-2); }
.nav__inner .nav__link:hover, .nav__inner .nav__link.is-on { color: var(--text); }
.nav__inner .nav__link--primary,
.nav__inner .nav__link--primary:hover { color: var(--on-brand); }
.nav__inner .nav__x { color: var(--text-2); }
.nav__inner .nav__x:hover { color: var(--text); }

.nav__brand {
  display: flex; align-items: center; gap: 9px; flex: none;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: 15px;
}
.nav__brand img { width: 15px; }
.nav__brand sup { font-size: 8px; }

/* the collapsing half */
.nav__fold {
  display: grid; grid-template-columns: 1fr;
  transition: grid-template-columns .55s var(--ease), opacity .3s var(--ease);
}
.nav__fold > div { overflow: hidden; display: flex; align-items: center; gap: 20px; min-width: 0; }
.nav.is-collapsed .nav__fold { grid-template-columns: 0fr; opacity: 0; }

.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 34px); }
/* every control in the bar is the same 36px box on one centre line — an inline
   <a> with vertical padding does not make a box, which is what made the hover
   backgrounds sit at different heights and overlap each other */
/* No hover slab any more. The reference bar leaves the links as bare type and
   puts the whole hover into the label rolling over — a background chip behind a
   rolling word fights it. */
.nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  height: 36px; padding: 0;
  font-size: 14.5px; font-weight: 500; line-height: 1;
  color: var(--text-2); white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__link:hover { color: var(--text); }
/* the page you are on: full-strength label and its index lit in brand colour */
.nav__inner .nav__link.is-on { color: var(--text); }
.nav__link.is-on .nav__num { color: var(--brand-bright); opacity: 1; }

.nav__num {
  position: absolute; top: 2px; right: -13px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: -.04em; line-height: 1;
  color: var(--accent); opacity: .8;
}

/* ---- the rolling label ----
   One line-height tall, clipped, with the second copy painted underneath by a
   text-shadow. Hover lifts every letter by exactly that line-height, on a
   per-letter stagger, so the word rolls over itself. */
.roll {
  display: inline-flex; overflow: hidden; vertical-align: top;
  --lh: 1.25em;
  text-shadow: 0 var(--lh) 0 currentColor;
}
.roll > i {
  display: block; flex: none; white-space: pre; font-style: normal;
  line-height: var(--lh);
  transition: transform .52s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 16ms);
  backface-visibility: hidden;
}
a:hover > .roll > i,
a:focus-visible > .roll > i { transform: translateY(calc(var(--lh) * -1)); }
@media (prefers-reduced-motion: reduce) { .roll > i { transition: none; } }

/* Terminal is the one accented control in the bar — it is the product, not a
   fourth tab — so it is the only thing here carrying brand colour.
   No drop shadow: the collapsing half clips with overflow:hidden, so a glow can
   only ever be sliced off at the fold edge. That cut is what looked broken. */
.nav__link--primary {
  height: 34px; padding: 0 16px;
  border-radius: var(--r-chip);
  background: var(--brand); color: var(--on-brand); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: background .25s var(--ease);
}
.nav__link--primary:hover { background: var(--brand-bright); color: var(--on-brand); }

/* the X link is a plain glyph now: with Terminal accented, a second filled
   circle next to it just competed for the same attention */
.nav__x {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 36px; border-radius: var(--r-chip);
  background: transparent; color: var(--text-2);
  transition: color .25s var(--ease);
}
.nav__x svg { width: 14px; height: 14px; display: block; }
.nav__x:hover { color: var(--text); background: transparent; }

/* the bar indicator that takes the nav's place while it is closed */
.nav__eq {
  display: grid; grid-template-columns: 0fr;
  transition: grid-template-columns .55s var(--ease), opacity .3s var(--ease);
  opacity: 0;
}
.nav.is-collapsed .nav__eq { grid-template-columns: 1fr; opacity: 1; }
.nav__eq > span {
  overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 36px; min-width: 0; padding-inline: 4px;
}
/* Three dots, and one at a time stretches into a bar and settles back — the
   reference widget's own idea, and it reads as "working" rather than as a level
   meter. The box is fixed at bar height and the resting state is a scaled-down
   circle, so nothing in the row moves: animating `height` shifted the whole
   line every frame, which is what made it look ragged.
   Each one carries a colour from the logo. */
.nav__eq i {
  display: block; width: 4px; height: 15px; border-radius: 99px;
  transform: scaleY(.2667); transform-origin: 50% 50%;
  animation: eq 1.9s cubic-bezier(.5, 0, .2, 1) infinite;
}
.nav__eq i:nth-child(1) { background: var(--rainbow-1); }
.nav__eq i:nth-child(2) { background: var(--rainbow-2); animation-delay: .63s; }
.nav__eq i:nth-child(3) { background: var(--rainbow-3); animation-delay: 1.26s; }
@keyframes eq {
  0%,  4%   { transform: scaleY(.2667); }
  15%, 24%  { transform: scaleY(1); }
  35%, 100% { transform: scaleY(.2667); }
}

.nav__burger { display: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); flex: none; }
.nav__burger i { display: block; width: 14px; height: 1.5px; background: var(--text); margin: 3.5px auto; transition: transform .3s var(--ease); }
.nav.is-open .nav__burger i:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
.nav.is-open .nav__burger i:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) { .nav__eq i { animation: none; } }

/* --------------------------------------------------------------------------
   Hero — full-bleed looping video, copy bottom-left, wordmark on the floor
   -------------------------------------------------------------------------- */

.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,.30) 58%, rgba(0,0,0,.48) 100%),
    radial-gradient(70% 55% at 50% 100%, rgba(11,78,138,.42), transparent 70%);
}
.hero__inner { position: relative; z-index: 2; padding-bottom: clamp(20px, 3vw, 34px); }
/* Hero copy is deliberately small and low-left, the way the reference sets it —
   the video is the subject, the words are the caption. */
.hero__body { display: grid; gap: clamp(14px, 1.7vw, 20px); max-width: 560px; }
.hero__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(27px, 2.7vw, 40px); line-height: 1.14; letter-spacing: -0.035em;
  max-width: 15ch;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .55);
}
.hero__sub {
  margin: 0; max-width: 44ch;
  font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.5;
  color: #dfe4e8;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .65);
}
/* the X mark set inline in the headline, at the weight of the surrounding type */
.hero__title .xmark {
  display: inline-block; vertical-align: -.04em;
  width: .78em; height: .78em; margin-left: .06em;
  fill: currentColor;
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, .5));
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* Hero buttons — the Apple pair: one solid, one glass, both on the same pill
   geometry. The solid one carries a hairline top highlight and a coloured
   shadow so it reads as lit rather than painted on. */
.hero__cta .btn { height: 54px; padding: 0 26px; font-size: 15px; border-radius: 999px; }
.btn--hero {
  --btn-bg: #fff; --btn-fg: #0b0d10;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 30px rgba(0, 0, 0, .38);
}
.btn--hero:hover { --btn-bg: #fff; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 38px rgba(0, 0, 0, .46); }
.btn--hero svg { width: 16px; height: 16px; flex: none; }

.btn--glass {
  --btn-bg: rgba(255, 255, 255, .12);
  --btn-fg: #fff;
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 26px rgba(0, 0, 0, .3);
}
.btn--glass:hover { --btn-bg: rgba(255, 255, 255, .2); transform: translateY(-2px); }

/* The wordmark on the floor is glass, not paint: `overlay` lets the footage
   through, so a letter over a bright cloud lifts and one over a bear darkens.
   A second copy behind it carries the crisp edge. */
.hero__floor {
  position: relative; z-index: 2;
  overflow: hidden; line-height: .78;
  padding-bottom: clamp(6px, 1vw, 14px);
}
.hero__floor span {
  display: block; position: relative;
  font-family: var(--font-display); font-weight: 600;
  /* sized so the whole wordmark including the ® lands inside the viewport */
  font-size: clamp(44px, 12.6vw, 210px);
  letter-spacing: -0.05em;
  white-space: nowrap;
  padding-inline: var(--gutter);
  color: rgba(255, 255, 255, .5);
  mix-blend-mode: overlay;
}
.hero__floor span::before {
  content: attr(data-word);
  position: absolute; inset: 0;
  padding-inline: var(--gutter);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .16);
  mix-blend-mode: normal;
  pointer-events: none;
}

.bubbles { position: absolute; inset: auto 0 42% 0; z-index: 2; pointer-events: none; display: none; }
@media (min-width: 1100px) { .bubbles { display: block; } }
.bubble {
  position: absolute; max-width: 268px;
  padding: 11px 15px; border-radius: 16px;
  background: rgba(12,12,12,.72);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45; color: #dcdcdc;
  animation: bubble-in .75s var(--ease) both;
}
.bubble b { color: var(--brand-glow); font-weight: 400; }
.bubble:nth-child(1) { right: 30%; top: -230px; animation-delay: .5s; }
.bubble:nth-child(2) { right: 6%;  top: -150px; animation-delay: .75s; }
.bubble:nth-child(3) { right: 22%; top: -56px;  animation-delay: 1s; }
.bubble:nth-child(4) { right: 4%;  top: 24px;   animation-delay: 1.25s; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Marquee / ticker
   -------------------------------------------------------------------------- */

.marquee { overflow: hidden; width: 100%; }
.marquee__track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(56px, 13vw, 200px); line-height: 1;
  letter-spacing: -0.05em; padding-right: .16em; white-space: nowrap;
}
.marquee__item--outline { -webkit-text-stroke: 1px rgba(5,36,64,.22); color: transparent; }
@keyframes marquee { to { transform: translateX(-50%); } }

.ticker { border-block: 1px solid var(--hairline-soft); background: var(--bg-2); padding-block: 12px; }
.ticker .marquee__item {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 400;
  letter-spacing: .02em; color: var(--text-3);
  padding-right: 0; display: flex; align-items: center; gap: 14px;
}
.ticker .marquee__track { animation-duration: 46s; }
.ticker .sep { color: var(--brand); }

/* --------------------------------------------------------------------------
   About — centred statement + capability grid (the reference's logo wall)
   -------------------------------------------------------------------------- */

.stmt {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(23px, 3.05vw, 46px); line-height: 1.22; letter-spacing: -0.032em;
  max-width: 1320px; margin: 0 auto clamp(48px, 6vw, 96px); text-align: center;
}
.stmt--narrow { max-width: 26ch; font-size: clamp(21px, 2.5vw, 36px); }

/* About: the statement and the wall share one right-weighted column, left
   aligned — the empty third on the left is what the reference does. */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.about__col { grid-column: 2; display: grid; gap: clamp(30px, 3.6vw, 56px); }
.about__col .stmt {
  max-width: none; margin: 0; text-align: left;
  font-size: clamp(21px, 2.45vw, 36px); line-height: 1.24;
}
.about__col .wall { gap: 14px; }
.about__col .notice { margin: -12px 0 0; }
@media (max-width: 1000px) {
  .about { grid-template-columns: 1fr; }
  .about__col { grid-column: 1; gap: 36px; }
}
.reveal-words span { display: inline-block; opacity: .16; transition: opacity .45s var(--ease); }
.reveal-words.is-in span { opacity: 1; }

/* Ecosystem wall — the FrogPools behaviour: hovering lights the cell up. Here
   the lit state is the sky plate rather than a flat white tile, with a thin
   scrim over it so every mark keeps its contrast. */
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wall__cell {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(104px, 10.5vw, 146px); padding: 18px;
  border-radius: var(--r-card);
  border: 1px solid var(--hairline-soft);
  background: var(--surface);
  transition: border-color .38s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease);
}
/* the sky plate */
.wall__cell::before {
  content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: url('/assets/img/sky-tile.webp') center / cover;
  transform: scale(1.06);
  transition: opacity .38s var(--ease), transform .6s var(--ease);
}
/* contrast scrim, so white and pale marks still read against the clouds */
.wall__cell::after {
  content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0;
  background:
    radial-gradient(66% 66% at 50% 50%, rgba(255, 255, 255, .34), transparent 72%),
    linear-gradient(180deg, rgba(6, 46, 84, .10), rgba(6, 46, 84, .22));
  transition: opacity .38s var(--ease);
}
.wall__cell img {
  position: relative; z-index: 2;
  height: clamp(38px, 4.4vw, 62px);
  width: auto; max-width: 64%; object-fit: contain; flex: none;
  filter: grayscale(1) brightness(1.75) contrast(.75);
  opacity: .46;
  transition: filter .38s var(--ease), opacity .38s var(--ease);
}
.wall__cell--wordmark img { height: auto; width: clamp(130px, 15vw, 215px); max-width: 76%; }

.wall__cell:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .45);
}
.wall__cell:hover::before { opacity: 1; transform: scale(1); }
.wall__cell:hover::after  { opacity: 1; }
.wall__cell:hover img {
  opacity: 1;
  filter: drop-shadow(0 3px 10px rgba(4, 34, 62, .38));
}
/* marks whose brand colour is black-on-white — re-ink them on the lit tile */
.wall__cell--ink:hover img {
  filter: invert(1) drop-shadow(0 3px 9px rgba(255, 255, 255, .5));
}
/* the Pons mark is pale glass — give it back its own contrast on the sky */
.wall__cell--pale:hover img {
  filter: saturate(1.8) contrast(1.22) brightness(.92)
          drop-shadow(0 3px 9px rgba(12, 48, 20, .45));
}
@media (max-width: 900px) {
  .wall__cell::before { background-image: url('/assets/img/sky-tile-sm.webp'); }
}

/* --------------------------------------------------------------------------
   Horizontal rail — used by Launches, Terminal and Leaderboard
   -------------------------------------------------------------------------- */

.rail {
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.rail::-webkit-scrollbar { height: 5px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Launch card
   -------------------------------------------------------------------------- */

.launch-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  height: 34px; padding: 0 15px; border-radius: var(--r-chip);
  border: 1px solid var(--hairline); font-size: 13px; color: var(--text-3);
  transition: all .25s var(--ease);
}
.filter:hover { color: var(--text); border-color: rgba(255,255,255,.24); }
.filter.is-active { background: var(--brand); border-color: transparent; color: var(--on-brand); }

.search { position: relative; flex: 0 1 320px; min-width: 240px; }
.search input {
  width: 100%; height: 40px; padding: 0 16px 0 40px;
  border-radius: var(--r-chip); border: 1px solid var(--hairline);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}
.search input::placeholder { color: var(--text-3); }
.search svg { position: absolute; left: 15px; top: 12px; width: 15px; opacity: .45; }

.launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.rail .launch { width: 268px; }

.launch {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-card); border: 1px solid var(--hairline-soft);
  background: var(--surface); overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.launch:hover { transform: translateY(-4px); border-color: rgba(63,169,240,.38); }
.launch__art {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center;
  background:
    radial-gradient(72% 72% at 34% 24%, rgba(169,216,247,.26), transparent 70%),
    linear-gradient(150deg, var(--surface-2), #0b0b0b);
}
.launch__glyph { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -.05em; color: rgba(255,255,255,.15); }
.launch__tag { position: absolute; left: 10px; top: 10px; }
.launch__mcap {
  position: absolute; right: 10px; bottom: 10px;
  padding: 5px 10px; border-radius: var(--r-chip);
  background: rgba(0,0,0,.66); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--brand-glow);
}
.launch__meta { padding: 14px 15px 15px; display: grid; gap: 4px; }
.launch__name { font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
.launch__ticker { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.launch__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 9px; margin-top: 5px; border-top: 1px solid var(--hairline-soft);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3);
}
.launch__row b { color: var(--text-2); font-weight: 400; }

/* --------------------------------------------------------------------------
   Commands — a pinned three-beat sequence driven by one scroll progress value.
   JS writes three unitless vars on the section and CSS does the rest:
     --t  title recede      --s  cloud sweep-in      --c  card reveal
   Keeping the maths in CSS means one style write per frame instead of one per
   element, and the transforms stay composable with the parallax on each cloud.
   -------------------------------------------------------------------------- */

.svc { position: relative; overflow: clip; --t: 0; --s: 0; --c: 0; }
/* this section pins at the top of the viewport, so its divider would land
   under the fixed nav — push it clear */
.svc > .eyebrow { position: relative; z-index: 9; padding-top: clamp(62px, 8vh, 104px); }

/* The plate belongs to the whole section, not to the pinned stage. One photo
   stretched over five viewports is a huge upscale — that is the point: the sky
   is plain blue where you enter it and only reaches its cloud band near the
   bottom, so a long scroll actually travels somewhere. Softness down there is
   part of the look, not a bug to fix.
   `background-attachment` stays default, so the image scrolls with the section
   while the stage stays pinned in front of it. */
.svc.block--sky { background: #2585d0; }
.svc.block--sky::before {
  content: ''; display: block;
  position: absolute; inset: 0; z-index: 0;
  /* composed tall on purpose (2400x5200): plain gradient at the top, the cloud
     band at the foot. Covering five viewports with it is barely an upscale,
     where one landscape photo would have been stretched about six times. */
  background: url('/assets/img/sky-long.webp') 50% 0 / cover no-repeat;
}
@media (max-width: 1500px) { .svc.block--sky::before { background-image: url('/assets/img/sky-long-md.webp'); } }
@media (max-width: 900px)  { .svc.block--sky::before { background-image: url('/assets/img/sky-long-sm.webp'); } }

/* Clouds belong to the SECTION, not to the pinned stage. Anchored here they
   simply scroll up past the viewport and leave, instead of hanging in front of
   the camera the way stage-mounted ones did. `--y` is a percentage of the whole
   section, so they are spread down its full height. */
.skydrift { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.skydrift--front { z-index: 8; }
.skydrift .cloud { position: absolute; left: var(--x, 0%); top: var(--y, 0%); width: var(--w, 26%); }
.svc.block--sky::after {
  content: ''; display: block;
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(72% 40% at 50% 22%, rgba(255,255,255,.16), transparent 72%),
    linear-gradient(180deg, rgba(4,44,84,.14) 0%, transparent 26%, rgba(4,44,84,.10) 100%);
}

.svc__stage {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* Stacking inside the stage, bottom to top:
   2 far/mid clouds · 3 the word · 5 the post · 6 near clouds.
   The near plane sitting ABOVE the post is the whole 3D overlap. */
.svc__stage > * { position: relative; z-index: 3; }
/* the visually-hidden heading must stay out of flow, or it becomes a second
   grid item and pushes the post off centre */
.svc__stage > .sr-only { position: absolute; }
.svc__stage > .clouds { z-index: 2; }
.svc__stage > .clouds--over { z-index: 6; }
.svc__deck, .svc__nav { z-index: 5; }

/* beat 1 — the word arrives oversized and front-of-stage, then settles back
   into the sky as the backdrop. It never leaves: the card lands on top of it
   and both stay on screen for the rest of the section. */
.svc__title {
  position: absolute; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(64px, 15vw, 240px); line-height: 1;
  letter-spacing: -0.055em;
  color: var(--on-brand);
  pointer-events: none;
  /* solid ink, never faded or softened — it is a filled word on the sky, not a
     watermark. Only the scale settles. */
  transform: translateY(calc(var(--t) * -2%)) scale(calc(1.16 - var(--t) * 0.16));
  opacity: 1;
  will-change: transform;
}

/* beat 2 — the cloud banks slide in from both edges */
.cloudset { position: absolute; inset: 0; will-change: transform, opacity; }
.cloudset[data-side="left"]  { transform: translate3d(calc((1 - var(--s)) * -72%), 0, 0); }
.cloudset[data-side="right"] { transform: translate3d(calc((1 - var(--s)) *  72%), 0, 0); }
.clouds--svc .cloudset { opacity: calc(.15 + var(--s) * .85); transition: none; }

/* beat 3 — the post lands, centred in the stage */
.svc__deck {
  position: relative;
  justify-self: center; align-self: center;
  width: min(520px, 92vw);
  min-height: clamp(224px, 23vw, 262px);
  opacity: var(--c);
  transform: translateY(calc((1 - var(--c)) * 46px)) scale(calc(.94 + var(--c) * .06));
  will-change: transform, opacity;
}
/* Switching posts is a cross-dissolve through depth, not a cut: the outgoing
   card lifts and blurs away upwards, the incoming one rises out of focus from
   below. Two slides are on screen together for most of the move, which is what
   makes it read as one object changing rather than two swapping. Direction is
   carried by `is-out` (everything already passed sits above), so scrubbing
   backwards reverses the move instead of replaying it. */
.svc__slide {
  position: absolute; inset: 0;
  display: grid; align-items: center;
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.955);
  filter: blur(10px);
  pointer-events: none;
  will-change: transform, opacity, filter;
  transition:
    opacity .62s cubic-bezier(.32, .72, 0, 1),
    transform .92s cubic-bezier(.16, 1, .3, 1),
    filter .58s cubic-bezier(.32, .72, 0, 1);
}
.svc__slide.is-out { transform: translate3d(0, -30px, 0) scale(.965); }
.svc__slide.is-on {
  opacity: 1; transform: none; filter: blur(0);
  pointer-events: auto;
}
/* the card's own rows come in a beat behind the card, so the change has a
   direction inside it too */
.svc__slide .tw > * {
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity .5s var(--ease), transform .62s cubic-bezier(.16, 1, .3, 1);
}
.svc__slide.is-on .tw > * { opacity: 1; transform: none; }
.svc__slide.is-on .tw__head  { transition-delay: .10s; }
.svc__slide.is-on .tw__text  { transition-delay: .16s; }
.svc__slide.is-on .tw__reply { transition-delay: .23s; }
.svc__slide.is-on .tw__bar   { transition-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  .svc__slide, .svc__slide .tw > * { transition-duration: .01s; filter: none; }
}

/* The middle object is a post, because a post is what the product takes as
   input. Solid X-dark card on the bright sky — the glass version was too
   transparent to read against moving clouds. */
.tw {
  width: 100%;
  padding: 16px 18px 12px;
  border-radius: 18px;
  background: #16181c;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 70px rgba(4, 34, 66, .42), 0 2px 0 rgba(255,255,255,.06) inset;
  color: #e7e9ea;
  text-align: left;
}
.tw__head { display: flex; align-items: center; gap: 11px; }
.tw__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #2f3336; color: #8b98a5;
}
.tw__av svg { width: 22px; height: 22px; }
.tw__av img { width: 24px; }
.tw__who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tw__who b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.tw__who span { font-size: 13.5px; color: #71767b; }
.tw__no {
  margin-left: auto; align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; color: #5b6570;
}
.tw__text {
  margin: 11px 0 0;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.4; letter-spacing: -.01em;
  word-break: break-word;
}
.tw__text a { color: #4aa9f0; }
.tw__reply {
  margin-top: 13px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start;
}
.tw__reply-av {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: #0f1419; border: 1px solid rgba(255,255,255,.12);
}
.tw__reply-av img { width: 13px; }
.tw__reply b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.tw__reply b span { font-weight: 400; color: #71767b; }
.tw__reply p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #a9b1b9; }
.tw__bar {
  display: flex; align-items: center; gap: 34px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: #5b6570;
}
.tw__bar svg { width: 16px; height: 16px; }

/* dots */
.svc__nav { display: none; }
.svc__nav button {
  width: 26px; height: 3px; border-radius: 99px;
  background: rgba(5, 36, 64, .22);
  transition: background .3s var(--ease), width .3s var(--ease);
}
.svc__nav button.is-on { background: var(--on-brand); width: 38px; }

/* Not pinned (small screens, reduced motion): a plain stack, no choreography */
.svc:not(.is-pinned) { --t: 1; --s: 1; --c: 1; }
.svc:not(.is-pinned) .svc__stage {
  position: static; height: auto; display: block;
  padding: clamp(30px, 6vw, 60px) var(--gutter) clamp(10px, 2vw, 24px);
  max-width: var(--maxw); margin-inline: auto;
}
.svc:not(.is-pinned) .svc__title {
  position: static; text-align: left;
  font-size: clamp(48px, 12vw, 110px);
  margin: 0 0 clamp(22px, 4vw, 36px);
  transform: none; opacity: 1; filter: none;
}
.svc:not(.is-pinned) .svc__deck {
  width: 100%; min-height: 0;
  display: grid; gap: 10px;
  opacity: 1; transform: none;
}
/* the stack shows every post at once, so none of the cross-dissolve state
   applies here — blur, offset and the per-row stagger all have to be undone */
.svc:not(.is-pinned) .svc__slide {
  position: static; opacity: 1; transform: none; filter: none;
  pointer-events: auto; transition: none;
}
.svc:not(.is-pinned) .svc__slide .tw > * {
  opacity: 1; transform: none; transition: none;
}
.svc:not(.is-pinned) .svc__nav { display: none; }
.svc:not(.is-pinned) .cloudset { transform: none; opacity: 1; }
/* stacked layout has no depth story, and the front plane would cover the posts */
.svc:not(.is-pinned) .clouds--over,
.svc:not(.is-pinned) .skydrift--front { display: none; }
/* the back plane stays, but thinned out — a dense field behind a plain stack
   just fights the text */
.svc:not(.is-pinned) .skydrift .cloud--mid { display: none; }
.svc:not(.is-pinned) .skydrift { opacity: .55; }
.svc:not(.is-pinned) .clouds { z-index: 0; opacity: .8; }

@media (max-width: 760px) {
  .tw__bar { gap: 22px; }
}

/* --------------------------------------------------------------------------
   Fees — three tiers, the third highlighted (reference "Pricing")
   -------------------------------------------------------------------------- */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.tier {
  display: grid; gap: 16px; align-content: start;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--r-card);
  border: 1px solid var(--hairline-soft);
  background: var(--surface);
}
.tier--hl { background: var(--brand); border-color: transparent; color: var(--on-brand); }
.tier__name { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.03em; margin: 0; }
.tier__desc { font-size: 14px; line-height: 1.5; color: var(--text-3); margin: 0; }
.tier--hl .tier__desc { color: rgba(5,36,64,.72); }
.tier__price { display: flex; align-items: flex-start; gap: 3px; font-family: var(--font-display); font-weight: 600; letter-spacing: -.05em; }
.tier__price .v { font-size: clamp(38px, 4.4vw, 62px); line-height: 1; }
.tier__price .u { font-size: 18px; margin-top: .35em; }
.tier__price .per { align-self: flex-end; font-family: var(--font); font-weight: 400; font-size: 13px; color: var(--text-3); margin-left: 6px; }
.tier--hl .tier__price .per { color: rgba(5,36,64,.7); }
.tier__inc { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); margin: 4px 0 0; }
.tier--hl .tier__inc { color: rgba(5,36,64,.66); }
.tier__list { display: grid; gap: 9px; font-size: 14px; color: var(--text-2); }
.tier--hl .tier__list { color: rgba(5,36,64,.84); }
.tier__list li { display: flex; gap: 10px; align-items: flex-start; }
.tier__list li::before { content: '|'; color: var(--brand-bright); flex: none; }
.tier--hl .tier__list li::before { color: var(--on-brand); }

/* --------------------------------------------------------------------------
   Terminal — the reference's testimonial rail, rebuilt as a command feed
   -------------------------------------------------------------------------- */

.term {
  width: 330px; padding: 18px;
  border-radius: var(--r-card);
  border: 1px solid var(--hairline-soft);
  background: var(--surface);
  display: grid; gap: 12px; align-content: start;
}
.term--brand { background: var(--brand); border-color: transparent; color: var(--on-brand); }
.term__head { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
.term--brand .term__head { color: rgba(5,36,64,.7); }
.term__av { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-size: 11px; color: var(--text-2); flex: none; }
.term--brand .term__av { background: rgba(5,36,64,.16); color: var(--on-brand); }
.term__cmd {
  padding: 11px 13px; border-radius: 12px; background: #0a0a0a;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--brand-glow);
}
.term--brand .term__cmd { background: rgba(5,36,64,.86); }
.term__cmd .h { color: #fff; }
.term__out { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--text-3); display: grid; gap: 4px; }
.term--brand .term__out { color: rgba(5,36,64,.74); }
.term__out b { color: var(--text-2); font-weight: 400; }
.term--brand .term__out b { color: var(--on-brand); }

/* --------------------------------------------------------------------------
   Roadmap rows (reference "Awards")
   -------------------------------------------------------------------------- */

.rows { border-top: 1px solid var(--hairline-soft); }
.row {
  display: grid; grid-template-columns: 44px 28px 1fr 1fr auto;
  gap: clamp(10px, 2vw, 28px); align-items: center;
  padding-block: 20px; border-bottom: 1px solid var(--hairline-soft);
  transition: background .3s var(--ease), padding-left .35s var(--ease);
}
.row:hover { background: rgba(255,255,255,.02); padding-left: 8px; }
.row__no { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.row__ico { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; color: var(--brand-bright); }
.row__ico svg { width: 13px; height: 13px; }
.row__title { font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.row__desc { font-size: 14px; color: var(--text-3); }
.row__chips { display: flex; gap: 7px; }

/* --------------------------------------------------------------------------
   Fee split — odometer figures (reference "Stats")
   -------------------------------------------------------------------------- */

.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fig {
  border-radius: var(--r-card); border: 1px solid var(--hairline-soft);
  background: var(--surface);
  padding: clamp(20px, 2.2vw, 30px);
  display: grid; grid-template-rows: auto 1fr auto; gap: 18px; min-height: 260px;
}
.fig__label { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.fig__n {
  align-self: center;
  display: flex; align-items: baseline; gap: 0;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(46px, 5.6vw, 84px); line-height: 1; letter-spacing: -.05em;
}
.fig__n sup {
  font-size: .34em; color: var(--brand-bright);
  align-self: flex-start; margin-top: .38em;
}
/* a word unit reads as a caption, not an exponent */
.fig__n sup:not(:empty) { letter-spacing: -.01em; }
.fig__n:has(sup:not(:empty)) { gap: .12em; }
.fig__sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }

/* digit reel */
.odo { display: inline-block; height: 1em; overflow: hidden; text-align: center; }
.odo i { display: block; font-style: normal; transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.odo i span { display: block; height: 1em; }

/* --------------------------------------------------------------------------
   Leaderboard (reference "Team")
   -------------------------------------------------------------------------- */

.lb {
  width: 250px; border-radius: var(--r-card);
  border: 1px solid var(--hairline-soft); background: var(--surface); overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.lb:hover { transform: translateY(-4px); border-color: rgba(63,169,240,.35); }
.lb__art {
  aspect-ratio: 3 / 4; display: grid; place-items: center; position: relative;
  background: radial-gradient(70% 60% at 50% 32%, rgba(26,143,227,.42), transparent 72%), #0c0c0c;
}
.lb__rank { font-family: var(--font-display); font-weight: 600; font-size: 56px; letter-spacing: -.06em; color: rgba(255,255,255,.16); }
.lb__tag { position: absolute; left: 10px; top: 10px; }
.lb__meta { padding: 14px 15px 16px; display: grid; gap: 3px; }
.lb__handle { font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
.lb__stat { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }

/* --------------------------------------------------------------------------
   FAQ — title + card on the left, accordion on the right
   -------------------------------------------------------------------------- */

.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-aside { display: grid; gap: 20px; }
.faq-card {
  border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--hairline-soft); background: var(--surface);
  padding: 20px; display: grid; gap: 14px; max-width: 300px;
}
.faq-card__art {
  aspect-ratio: 3 / 4; border-radius: 16px;
  background: radial-gradient(70% 60% at 50% 34%, rgba(26,143,227,.5), transparent 72%), #0c0c0c;
  display: grid; place-items: center;
}
.faq-card__art img { width: 52%; }

.faq { display: grid; gap: 8px; }
.faq__item {
  border-radius: 16px; border: 1px solid var(--hairline-soft);
  background: var(--surface); overflow: hidden;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.faq__item.is-open { border-color: rgba(63,169,240,.3); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 20px; text-align: left;
  font-size: clamp(15px, 1.3vw, 17px); font-weight: 500; letter-spacing: -.02em;
  transition: color .25s var(--ease);
}
.faq__q:hover { color: var(--brand-bright); }
.faq__sign {
  position: relative; width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: var(--brand); color: var(--on-brand);
}
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 1.5px;
  background: currentColor; transition: transform .35s var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item.is-open .faq__sign::after { transform: rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0 20px 20px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Docs cards (reference "Blogs")
   -------------------------------------------------------------------------- */

.docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.doc {
  border-radius: var(--r-card); border: 1px solid var(--hairline-soft);
  background: var(--surface); overflow: hidden; display: grid; gap: 0;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.doc:hover { transform: translateY(-4px); border-color: rgba(63,169,240,.3); }
.doc__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; }
.doc__date { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
.doc__art {
  aspect-ratio: 4 / 3; margin: 0 14px; border-radius: 14px;
  background: radial-gradient(70% 70% at 40% 26%, rgba(26,143,227,.32), transparent 72%), #0b0b0b;
  display: grid; place-items: center; padding: 18px; text-align: center;
}
.doc__art span { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.03em; color: rgba(255,255,255,.5); }
.doc__title { padding: 14px; font-size: 15px; font-weight: 500; letter-spacing: -.02em; }

/* --------------------------------------------------------------------------
   Contact strip + green footer
   -------------------------------------------------------------------------- */

.need {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 12px 12px 28px;
  border-radius: var(--r-chip);
  background: var(--brand); color: var(--on-brand);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(16px, 2vw, 26px); letter-spacing: -.03em;
}
.need::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('/assets/img/sky-1100.webp') 50% 46% / cover;
}
.need::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.06) 46%, rgba(255,255,255,.30));
}
.need > * { position: relative; z-index: 2; }

.foot { background: var(--brand); color: var(--on-brand); }
/* the footer carries the most text of any sky plate, so it gets a heavier veil */
.foot.block--sky::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.46) 30%, rgba(255,255,255,.62) 100%),
    radial-gradient(80% 50% at 50% 0%, rgba(4,44,80,.18), transparent 60%);
}
/* White outline on a bright sky is invisible; the wordmark is drawn in the
   same navy the rest of the sky plate uses for type. */
.foot .marquee__item--outline {
  -webkit-text-stroke: 1px rgba(5, 36, 64, .30);
  color: transparent;
}

/* On a sky page the footer is sky sitting on sky, so it arrived as a seam that
   read like a rendering fault. It gets its own edge instead: a hairline, a
   shadow cast upward onto the page, and none of its own clouds — the page
   already has clouds, and the two sets crossing looked like noise. */
.sky-page footer.foot { box-shadow: 0 -30px 60px rgba(4, 32, 62, .34); }
.sky-page footer.foot::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.sky-page footer.foot .clouds { display: none; }
.sky-page footer.foot.block--sky::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.50) 34%, rgba(255,255,255,.62) 100%),
    radial-gradient(80% 46% at 50% 0%, rgba(4,44,80,.24), transparent 62%);
}
/* Minimal by design: a card and one button, two short link columns, nothing
   else. The columns are narrow and the left one is mostly air — that space is
   what makes the wordmark below read as the closing note. */
.foot__top {
  display: grid; grid-template-columns: 1.25fr repeat(2, minmax(130px, .5fr));
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(52px, 6.5vw, 96px) clamp(40px, 5vw, 72px);
}
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.foot__card {
  position: relative; overflow: hidden;
  width: clamp(112px, 11vw, 148px); aspect-ratio: .82;
  border-radius: 16px;
  background: url('/assets/img/sky-tile.webp') 50% 42% / cover no-repeat;
  box-shadow: 0 16px 40px rgba(4, 44, 80, .22);
  display: grid; place-items: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.foot__card img { width: 46%; height: auto; filter: drop-shadow(0 6px 14px rgba(4, 40, 76, .34)); }
.foot__card:hover { transform: translateY(-3px); box-shadow: 0 22px 52px rgba(4, 44, 80, .3); }
.foot__totop { align-self: flex-start; }

.foot__col { display: flex; flex-direction: column; align-items: flex-start; }
.foot__col h4 {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(5, 36, 64, .52); margin: 0 0 18px;
}
.foot__col a:not(.btn) {
  display: block; padding-block: 6px; font-size: 15.5px;
  color: rgba(5, 36, 64, .86); transition: color .2s var(--ease);
}
.foot__col a:not(.btn):hover { color: var(--on-brand); }

.foot__bar {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
  justify-content: space-between;
  padding-block: 22px 26px;
  border-top: 1px solid rgba(5, 36, 64, .16);
  font-family: var(--font-mono); font-size: 11.5px; color: rgba(5, 36, 64, .62);
}
/* the disclosure lives here now — one line rather than the old paragraph, but
   it still says the three things it has to: independent, pre-launch, at risk */
.foot__legal { flex: 1 1 340px; max-width: 76ch; line-height: 1.6; }
.foot__bar a:hover { color: var(--on-brand); }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

[data-anim] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-anim].is-in { opacity: 1; transform: none; }
[data-anim][data-delay="1"] { transition-delay: .07s; }
[data-anim][data-delay="2"] { transition-delay: .14s; }
[data-anim][data-delay="3"] { transition-delay: .21s; }
[data-anim][data-delay="4"] { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-anim] { opacity: 1; transform: none; }
  .reveal-words span { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .wall { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: 1fr; }
  .figs { grid-template-columns: repeat(2, 1fr); }
  .docs { grid-template-columns: repeat(2, 1fr); }
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-card { max-width: none; grid-template-columns: 150px 1fr; align-items: center; }
  .foot__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --r-block: 24px; --r-card: 18px; }
  .nav__fold { display: none; }
  .nav.is-open .nav__fold { display: block; grid-template-columns: 1fr; opacity: 1; }
  .nav.is-open .nav__fold > div {
    flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 60px; left: var(--edge); right: var(--edge);
    padding: 10px;
    background: rgba(18,18,18,.96); border: 1px solid var(--hairline-soft);
    border-radius: 22px; backdrop-filter: blur(18px);
  }
  .nav.is-open .nav__links { flex-direction: column; align-items: stretch; gap: 2px; }
  /* stacked links are full width, so the index cannot hang off the right edge
     of the label any more — it sits at the end of the row instead */
  .nav.is-open .nav__link { height: 44px; padding: 0 12px; justify-content: space-between; }
  .nav.is-open .nav__link--primary { justify-content: center; margin-top: 8px; height: 46px; }
  .nav.is-open .nav__x { width: 44px; height: 44px; margin-inline: 12px 0; }
  .nav.is-open .nav__num { position: static; top: auto; right: auto; opacity: .7; }
  .nav__inner { width: calc(100% - 16px); justify-content: space-between; gap: 12px; }
  .nav__burger { display: block; }
  .nav__eq { display: none; }
  .cmd { grid-template-columns: 36px 1fr; }
  .cmd > .chip { grid-column: 2; justify-self: start; }
  .row { grid-template-columns: 30px 1fr; row-gap: 4px; }
  .row__ico { display: none; }
  .row__desc, .row__chips { grid-column: 2; }
  .hero { min-height: 92svh; }
}

@media (max-width: 560px) {
  .wall { grid-template-columns: 1fr; }
  .figs, .docs { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; gap: 26px; }
  .launch-bar { flex-direction: column; align-items: stretch; }
  .launch-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .launch__glyph { font-size: 30px; }
  .launch__meta { padding: 11px 12px 12px; }
  .launch__row { font-size: 10.5px; }
  .faq-card { grid-template-columns: 1fr; }
  .need { flex-direction: column; align-items: stretch; text-align: center; padding: 20px; border-radius: 22px; }
}

/* --------------------------------------------------------------------------
   Parallax clouds
   Real cutouts on their own depth planes. Each cloud is a positioned <span>
   that JS moves on scroll; the <img> inside carries a slow idle drift, so the
   two transforms never fight each other.
   Depth is sold three ways at once: speed, scale and a touch of blur — the
   nearest plane sits ABOVE the section content so clouds clip across cards
   and headlines instead of sitting flat behind them.
   -------------------------------------------------------------------------- */

.clouds {
  position: absolute; inset: -16% -10%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.clouds--spill { overflow: visible; inset: -22% 0; }
/* a spill layer must never widen the document */
.block--flush:has(.clouds--spill) { overflow-x: clip; }

.cloud {
  position: absolute;
  left: var(--x, 0%); top: var(--y, 0%);
  width: var(--w, 30%);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.cloud img {
  display: block; width: 100%; height: auto;
  scale: var(--flip, 1) 1;
  animation: cloud-drift var(--dur, 26s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
@keyframes cloud-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, -3%, 0) scale(1.035); }
}

/* Depth planes */
.cloud--far  { opacity: .5;  filter: blur(1.4px) saturate(.9); }
.cloud--mid  { opacity: .82; filter: drop-shadow(0 18px 30px rgba(4, 40, 74, .18)); }
.cloud--near {
  z-index: 6;
  opacity: .96;
  filter: blur(.5px) drop-shadow(0 30px 52px rgba(4, 40, 74, .34));
}

/* The near plane rides above section content — that is the whole 3D trick. */
.clouds--over { z-index: 7; }

@media (prefers-reduced-motion: reduce) {
  .cloud img { animation: none; }
}
@media (max-width: 860px) {
  .cloud--far { display: none; }
  .cloud { width: calc(var(--w, 30%) * 1.5); }
  .clouds--spill { inset: -14% 0; overflow: hidden; }
}

/* --------------------------------------------------------------------------
   3D launch carousel
   The whole track is rotated on Y inside a perspective box, so cards further
   along the row genuinely recede — the depth comes from the projection, not
   from faked per-card scaling.
   -------------------------------------------------------------------------- */

.p3d {
  perspective: 2000px;
  perspective-origin: 6% 50%;
  overflow-x: auto;
  overflow-y: hidden;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.p3d::-webkit-scrollbar { height: 5px; }
.p3d::-webkit-scrollbar-track { background: transparent; }
.p3d::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; }

.p3d__track {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  width: max-content;
  transform-style: preserve-3d;
  transform: rotateY(var(--rot, 24deg));
  transition: transform .6s var(--ease);
  padding-block: clamp(28px, 4.6vw, 76px);
}

.p3d__card {
  flex: 0 0 auto;
  width: clamp(210px, 22vw, 330px);
  transform-style: preserve-3d;
  transition: transform .45s var(--ease);
}
.p3d__card:hover { transform: translateZ(60px); }

.p3d__art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
}
.p3d__art img { width: 100%; height: 100%; object-fit: cover; }
.p3d__tag { position: absolute; right: 12px; top: 12px; }
.p3d__flag { position: absolute; left: 12px; top: 12px; }
.p3d__name {
  display: block;
  margin-top: 16px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.1vw, 32px); letter-spacing: -.035em;
  color: var(--text-2);
}
.p3d__meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3);
}
.p3d__meta b { color: var(--text-2); font-weight: 400; }

.p3d__hint {
  display: flex; align-items: center; gap: 8px;
  margin-top: 26px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3);
}

@media (max-width: 860px) {
  .p3d { perspective: none; }
  .p3d__track { transform: none; padding-block: 8px 20px; }
  .p3d__card { width: 250px; }
  .p3d__art { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .p3d__track { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Page hero — the layout every inner page opens with: oversized title bottom
   left, the standfirst set right against the same baseline, one hairline.
   -------------------------------------------------------------------------- */

.phero { padding-block: clamp(132px, 19vh, 216px) 0; }
.phero__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end; gap: clamp(24px, 4vw, 64px);
}
.phero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(52px, 11vw, 150px); line-height: .94;
  letter-spacing: -0.05em; margin: 0;
}
.phero__desc {
  /* the near cloud plane is deliberately allowed over the big title, but it
     must never land on running copy — a cloud sitting on the last two words
     reads as clipped text */
  position: relative; z-index: 8;
  margin: 0 0 .6em; justify-self: end; text-align: right;
  max-width: 42ch; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.5;
  color: var(--text-2);
}
.phero__rule { height: 1px; background: var(--hairline); margin-top: clamp(34px, 5vw, 70px); }

@media (max-width: 800px) {
  .phero__grid { grid-template-columns: 1fr; }
  .phero__desc { justify-self: start; text-align: left; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Page transition — the new page rises from the bottom
   The nav lives outside <main> and never animates, so the only thing that moves
   is the content slab: the old one lifts and softens away, the new one slides
   up into place. `main` carries a solid ground, which is what makes it read as
   a whole page arriving rather than a list of elements fading in.
   -------------------------------------------------------------------------- */

main { transform-origin: 50% 30%; }

/* --------------------------------------------------------------------------
   Page transition — cross-document view transitions

   The browser keeps the outgoing page on screen while the next document loads,
   then animates between the two snapshots. That is the whole reason this works
   where the JS version did not: a normal navigation destroys the old document
   and the new one cannot paint until it has parsed, so anything driven from JS
   was always animating into a gap. Here there is no gap — the old page is a
   held snapshot, and the new one slides up over it as one sheet.

   Browsers without support just navigate. No half-played effect, no fallback
   that looks like a bug.
   -------------------------------------------------------------------------- */

@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: 1.5s; }

/* both snapshots paint normally: the default `plus-lighter` blend is for
   cross-fades, and it would make the rising sheet glow where it overlaps */
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }

::view-transition-old(root) {
  z-index: 0;
  animation: page-sink .8s cubic-bezier(.6, 0, .35, 1) both;
}
::view-transition-new(root) {
  z-index: 1;
  animation: page-rise 1.5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes page-sink {
  to { transform: translateY(-3vh) scale(.972); opacity: .38; }
}
@keyframes page-rise {
  from { transform: translateY(100vh); box-shadow: 0 -34px 70px rgba(0, 0, 0, .75); }
  to   { transform: none;              box-shadow: 0 -34px 70px rgba(0, 0, 0, 0); }
}

/* The nav is identical on both pages, so it is captured as its own group and
   held still. That stillness is the whole trick — the sheet reads as passing
   behind a fixed shell rather than the whole window moving. */
.nav { view-transition-name: nav; }
::view-transition-group(nav) { animation-duration: .01s; }
::view-transition-old(nav),
::view-transition-new(nav) { animation: none; opacity: 1; mix-blend-mode: normal; }

/* the nav gets one soft settle on first paint and nothing after — during a
   transition it must not replay, or it would be caught in the new snapshot */
.nav__inner { animation: nav-in .8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-16px); } }
:root:active-view-transition .nav__inner { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .nav__inner { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* --------------------------------------------------------------------------
   Inner-page grids
   -------------------------------------------------------------------------- */

.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.posts .tw { box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
.term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.term-grid .term { width: auto; }

@media (max-width: 860px) {
  .posts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Process — the media that grows into the page
   The picture sits alone in a viewport-tall block and scales up until it is
   larger than the viewport. Because a scale transform does not touch layout,
   the panel that follows rides straight over it and the picture keeps showing
   as strips down both edges — that overlap is the whole effect, and it costs
   no sticky positioning at all.
   One scroll var drives it (--m, 0 to 1). --grow is written by JS, because CSS
   cannot divide a viewport unit by a pixel width to work out the cover scale.
   ========================================================================== */

.proc { --m: 0; --grow: 1.9; background: var(--bg-2); }

.proc__media {
  position: relative; z-index: 0;
  height: 100svh;
  display: grid; place-items: center;
  padding-top: clamp(64px, 9vh, 120px);
}
.proc__frame {
  position: relative;
  width: min(880px, 78vw);
  aspect-ratio: 1.611;
  border-radius: calc(24px * (1 - var(--m)));
  overflow: hidden;
  /* the poster sits under the video as a background, so there is never a
     black box while the file is still buffering */
  background: #2585d0 url('/assets/media/process-poster.webp') 50% 50% / cover no-repeat;
  transform: scale(calc(1 + (var(--grow) - 1) * var(--m)));
  transform-origin: 50% 50%;
  box-shadow: 0 50px 110px rgba(0, 0, 0, calc(.62 * (1 - var(--m))));
  will-change: transform;
  backface-visibility: hidden;
}
/* The bear animation is baked onto the sky rather than layered over it as an
   alpha video: alpha in WebM is not reliable across browsers, and the sky has
   no motion of its own, so one opaque file costs less than two layers. The
   file already contains its own reverse, so `loop` gives a ping-pong with no
   jump at the seam. */
.proc__vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  filter: saturate(1.04) contrast(1.02);
}
/* a whisper of vignette so the panel edge does not cut a flat blue */
.proc__frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 68% at 50% 34%, transparent 56%, rgba(4, 42, 80, .18)),
    linear-gradient(180deg, transparent 66%, rgba(4, 38, 72, .20));
}

/* --------------------------------------------------------------- the panel */
.proc__panel {
  position: relative; z-index: 6;
  background: var(--bg-2);
  max-width: 1400px; margin-inline: auto;
  padding: clamp(72px, 8.4vw, 124px) clamp(20px, 3.6vw, 50px) clamp(80px, 9vw, 132px);
}
.proc__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}
.proc__label {
  margin: 0 0 18px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--brand-bright);
}
.proc__head .display {
  margin: 0;
  /* the reference headline is two calm lines, not the page's hero scale */
  font-size: clamp(38px, 4.6vw, 72px); line-height: 1.03; letter-spacing: -.035em;
}
.proc__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: 14px; color: var(--text-2);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 3px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.proc__more:hover { color: var(--text); border-color: currentColor; }
.proc__note {
  margin: clamp(26px, 3vw, 40px) 0 0;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em;
  color: var(--text-3);
}

/* each step keeps its own rail segment, so the column reads as three marks
   on a path rather than one long line */
.proc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.proc__item {
  --f: 0;
  display: grid; grid-template-columns: 32px minmax(0, 1fr);
  gap: clamp(26px, 5vw, 100px);
  align-items: stretch;
}
.proc__rail {
  position: relative; width: 3px; justify-self: center;
  border-radius: 4px; overflow: hidden;
  background: rgba(250, 250, 250, .09);
}
.proc__rail i {
  position: absolute; inset: 0; display: block;
  border-radius: 4px; background: var(--brand);
  transform: scaleY(var(--f)); transform-origin: 50% 0;
  box-shadow: 0 0 18px rgba(26, 143, 227, .55);
}
.proc__body {
  padding: clamp(30px, 3.6vw, 50px) 0;
  /* dim until the rail reaches it, then it stays lit — the section reads as a
     path already walked, not a spotlight that moves on */
  opacity: calc(.24 + .76 * min(1, var(--f) * 5));
  transition: opacity .45s var(--ease);
}
.proc__body h3 {
  margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3.1vw, 46px); line-height: 1.05; letter-spacing: -.032em;
}
.proc__body p { margin: 0; max-width: 32ch; color: var(--text-2); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .proc__frame { transform: none; }
  .proc__body { opacity: 1; }
  .proc__vid { display: none; }
  .proc__frame { background: #2585d0 url('/assets/media/process-poster.webp') 50% 50% / cover no-repeat; }
}
@media (max-width: 900px) {
  .proc__media { height: 74svh; padding-top: 40px; }
  .proc__frame { width: 88vw; }
  .proc__grid { grid-template-columns: 1fr; gap: 34px; }
  .proc__item { grid-template-columns: 26px minmax(0, 1fr); gap: 22px; }
  .proc__body { padding: 24px 0; }
  .proc__body p { max-width: none; }
}

/* ==========================================================================
   Sky pages — Docs, How it works, Terminal
   The plate is fixed to the viewport, so it renders ~1:1 and never upscales,
   and it drifts vertically with scroll so the sky still travels with the page.
   Clouds live in the content flow instead, which is what gives the parallax
   something real to move against.
   ========================================================================== */

.sky-page { background: #2585d0; color: var(--on-brand); }
.skybg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.skybg__plate {
  position: absolute; inset: -18% 0;
  background: url('/assets/img/sky-hero.webp') center / cover no-repeat;
  transform: translate3d(0, calc(var(--sy, 0) * 1px), 0);
  will-change: transform;
}
/* The photograph is beautiful and busy, and a docs page is a reading surface
   first. The scrim keeps the sky readable as sky while dropping its contrast
   under the middle of the page, where the text column sits. */
.skybg__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,44,84,.24) 0%, rgba(4,44,84,.02) 26%, rgba(4,44,84,.18) 100%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.26) 26%, rgba(255,255,255,.26) 74%, transparent 100%),
    radial-gradient(72% 54% at 50% 34%, rgba(255,255,255,.18), transparent 76%);
}
@media (max-width: 1500px) { .skybg__plate { background-image: url('/assets/img/sky-hero-md.webp'); } }
@media (max-width: 900px)  { .skybg__plate { background-image: url('/assets/img/sky-hero-sm.webp'); } }

.sky-page #shell-nav, .sky-page main, .sky-page footer { position: relative; z-index: 1; }
/* Type on a moving sky needs more weight than type on a flat panel: darker ink
   and a soft white halo so a cloud drifting behind never eats a line. */
.sky-page .phero__title { color: #04223c; text-shadow: 0 2px 26px rgba(255, 255, 255, .55); }
.sky-page .phero__desc  { color: #052034; font-weight: 500; text-shadow: 0 1px 8px rgba(255,255,255,.95), 0 0 22px rgba(255,255,255,.75); }
.sky-page .phero__rule  { background: rgba(5, 36, 64, .20); }
/* same light seam as the sky block on the home page */
.sky-page .eyebrow::before {
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 26%, rgba(255,255,255,.58) 100%);
  box-shadow: 0 1px 0 rgba(6, 48, 88, .10);
}
.sky-page .eyebrow::after {
  background: linear-gradient(90deg,
    rgba(255,255,255,.58) 0%, rgba(255,255,255,.26) 74%, rgba(255,255,255,0) 100%);
  box-shadow: 0 1px 0 rgba(6, 48, 88, .10);
}
.sky-page .eyebrow__pill::before {
  content: '';
  position: absolute; inset: -110px -50vw;
  background: radial-gradient(46% 62% at 50% 50%, rgba(255,255,255,.24), transparent 72%);
  pointer-events: none; z-index: -1;
}
.sky-page .eyebrow__pill {
  background: rgba(255,255,255,.64); border-color: rgba(5,36,64,.14);
  color: rgba(5,36,64,.84); backdrop-filter: blur(6px);
}

/* The one surface every inner page is built from. Dark by default, because the
   site is dark; the glass variant only exists inside a sky page. */
.pane {
  position: relative;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  color: var(--text);
}
.sky-page .pane {
  background: rgba(255, 255, 255, .76);
  backdrop-filter: blur(40px) saturate(170%);
  -webkit-backdrop-filter: blur(40px) saturate(170%);
  border-color: rgba(255, 255, 255, .72);
  /* two shadows, not one: a wide soft drop for the lift, a tight one right
     under the edge so the card still has a defined boundary on bright cloud */
  box-shadow:
    0 34px 80px rgba(6, 42, 78, .18),
    0 2px 10px rgba(6, 42, 78, .10),
    0 1px 0 rgba(255, 255, 255, .95) inset;
  color: var(--on-brand);
}
.sky-page .gb__body { background: rgba(255, 255, 255, .82); }

/* --------------------------------------------------------------------------
   Docs — GitBook shape: sticky index, one column of prose, a right rail
   -------------------------------------------------------------------------- */

.gb {
  display: grid; grid-template-columns: 252px minmax(0, 1fr) 208px;
  gap: clamp(20px, 2.4vw, 38px); align-items: start;
}
/* Two separate reasons the rails never stuck, both worth naming:
   1. .pane sets `position: relative` further down the sheet and was quietly
      winning on equal specificity;
   2. .block clips, and ANY ancestor with overflow:hidden becomes the scroll
      container for position:sticky — hence .gb-host below. */
.gb-host { overflow: visible; }
.gb .gb__side, .gb .gb__toc { position: sticky; top: 96px; align-self: start; }

/* ---- the index rail ----
   GitBook's active state is a tint and an accent edge, never a filled slab.
   The solid navy pill we had before sat on the glass like a sticker and was
   the single dirtiest thing on the page. */
.gb__side { padding: 20px 12px; }
.gb__group + .gb__group { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(5,36,64,.10); }
.gb__group h4 {
  margin: 0 0 10px 12px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(5,36,64,.42);
}
.gb__side a {
  position: relative;
  display: block; padding: 8px 12px; border-radius: 10px;
  font-size: 14.5px; line-height: 1.35; color: rgba(5,36,64,.72);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.gb__side a::before {
  content: ''; position: absolute; left: 2px; top: 50%;
  width: 2px; height: 0; border-radius: 2px;
  background: var(--brand-deep);
  transform: translateY(-50%);
  transition: height .28s var(--ease);
}
.gb__side a:hover { background: rgba(5,36,64,.06); color: var(--on-brand); }
.gb__side a.is-on {
  background: rgba(13,111,190,.10);
  color: var(--brand-deep); font-weight: 500;
}
.gb__side a.is-on::before { height: 17px; }

/* ---- the page ---- */
.gb__body {
  /* grid items default to min-width:auto, so any wide child could blow the
     column open — this is what keeps the reading measure honest */
  min-width: 0;
  padding: clamp(28px, 3.2vw, 52px) clamp(24px, 3.4vw, 56px) clamp(34px, 4vw, 60px);
}
.gb__body > * + * { margin-top: 1.05em; }
.gb__body h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 2.3vw, 32px); letter-spacing: -.034em; line-height: 1.14;
  margin-top: 2.2em; padding-top: 1.1em; scroll-margin-top: 110px;
  border-top: 1px solid rgba(5,36,64,.12);
}
.gb__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gb__body h3 {
  font-size: 17px; font-weight: 600; letter-spacing: -.02em;
  margin-top: 1.8em; color: var(--on-brand);
}
.gb__body p, .gb__body li { font-size: 15.2px; line-height: 1.68; color: rgba(5,36,64,.76); }
.gb__body strong { color: var(--on-brand); font-weight: 600; }
.gb__body ul { display: grid; gap: 9px; padding-left: 2px; }
.gb__body li { display: flex; gap: 11px; }
.gb__body li::before {
  content: ''; flex: none; width: 5px; height: 5px; margin-top: .62em;
  border-radius: 50%; background: rgba(13,111,190,.5);
}
.gb__body a:not(.btn) {
  color: var(--brand-deep); text-decoration: underline;
  text-decoration-color: rgba(11,78,138,.32); text-underline-offset: 3px;
  transition: text-decoration-color .2s var(--ease);
}
.gb__body a:not(.btn):hover { text-decoration-color: currentColor; }

.gb__code {
  display: block; padding: 15px 17px; border-radius: 14px;
  background: #0c141c; color: var(--brand-glow);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 14px 34px rgba(4, 34, 64, .22);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65;
  overflow-x: auto; white-space: pre;
}
.gb__code .h { color: #fff; }
.gb__code .c { color: #6b8ca6; }

.gb__note {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  padding: 15px 17px; border-radius: 14px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(5,36,64,.10);
  box-shadow: inset 3px 0 0 var(--brand);
}
.gb__note svg { width: 18px; height: 18px; color: var(--brand-deep); margin-top: 1px; }
.gb__note p { margin: 0; font-size: 14.2px; line-height: 1.6; color: rgba(5,36,64,.82); }
.gb__note--warn { box-shadow: inset 3px 0 0 #d8a200; }
.gb__note--warn svg { color: #a37600; }

/* A table is the one thing in here that can be wider than its column. It gets
   its own scroller so it can never push the column out — which is exactly what
   happened on mobile the moment the section stopped clipping. */
.gb__scroll { overflow-x: auto; margin-inline: -2px; }
.gb__table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 14.2px; }
.gb__table th, .gb__table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(5,36,64,.10); }
.gb__table tr:last-child td { border-bottom: 0; }
.gb__table th {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(5,36,64,.46);
  border-bottom-color: rgba(5,36,64,.16);
}
.gb__table td { color: rgba(5,36,64,.8); }
.gb__table td:first-child { font-family: var(--font-mono); color: var(--on-brand); white-space: nowrap; }
.gb__table tbody tr { transition: background .2s var(--ease); }
.gb__table tbody tr:hover { background: rgba(255,255,255,.34); }

/* ---- on this page ----
   one hairline rail with the current entry marked on it, so the eye can see
   how far down the page it is without reading anything */
.gb__toc { padding: 18px 14px 18px 6px; }
.gb__toc h4 {
  margin: 0 0 10px 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(5,36,64,.42);
}
.gb__toc nav { position: relative; padding-left: 13px; }
.gb__toc nav::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: rgba(5,36,64,.16);
}
.gb__toc a {
  position: relative; display: block; padding: 6px 8px;
  font-size: 13px; line-height: 1.4; color: rgba(5,36,64,.6);
  transition: color .2s var(--ease);
}
.gb__toc a::before {
  content: ''; position: absolute; left: -13px; top: 50%;
  width: 1px; height: 0; background: var(--brand-deep);
  transform: translateY(-50%);
  transition: height .28s var(--ease);
}
.gb__toc a:hover { color: var(--on-brand); }
.gb__toc a.is-on { color: var(--brand-deep); font-weight: 500; }
.gb__toc a.is-on::before { height: 100%; }

@media (max-width: 1180px) { .gb { grid-template-columns: 220px minmax(0,1fr); } .gb__toc { display: none; } }
@media (max-width: 820px)  { .gb { grid-template-columns: 1fr; } .gb .gb__side { position: static; } }

/* --------------------------------------------------------------------------
   How it works — the four posts, one per step, on the sky
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: clamp(46px, 6vw, 92px); }
.step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.step:nth-child(even) .step__copy { order: 2; }
.step__copy { display: grid; gap: 12px; align-content: start; }
.step__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--hairline-soft);
  font-family: var(--font-mono); font-size: 13px; color: var(--accent);
}
.step__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -.04em; line-height: 1.04;
  color: var(--text);
}
.step__text { margin: 0; max-width: 44ch; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.55; color: var(--text-2); }
.step__more { display: grid; gap: 7px; margin: 4px 0 0; }
.step__more li { display: flex; gap: 10px; font-size: 14px; color: var(--text-3); }
.step__more li::before { content: '—'; color: var(--surface-3); flex: none; }
.step .tw { box-shadow: 0 30px 70px rgba(4, 34, 66, .34); }

@media (max-width: 900px) {
  .step { grid-template-columns: 1fr; gap: 22px; }
  .step:nth-child(even) .step__copy { order: 0; }
}

/* --------------------------------------------------------------------------
   Terminal — the two-step start panel plus the command feed
   -------------------------------------------------------------------------- */

.start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.start__card { padding: clamp(22px, 2.6vw, 32px); display: grid; gap: 14px; align-content: start; }
.start__head { display: flex; align-items: center; gap: 12px; }
.start__no {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
}
.start__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.03em; }
.start__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.start__list { display: grid; gap: 7px; }
.start__list li { display: flex; gap: 9px; font-size: 13.5px; color: var(--text-3); }
.start__list li::before { content: '—'; color: var(--surface-3); flex: none; }
.start__action { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 2px; }

.btn--xdark { --btn-bg: #0f1419; --btn-fg: #fff; }
.btn--xdark:hover { --btn-bg: #1d2530; }
.btn--xdark svg { width: 15px; height: 15px; }
.btn--wallet { --btn-bg: var(--surface-2); --btn-fg: var(--text); border: 1px solid var(--hairline); }
.btn--wallet:hover { --btn-bg: var(--surface-3); }
.btn--wallet img { width: 17px; height: 17px; object-fit: contain; }

.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.feed .term { width: auto; }

@media (max-width: 820px) { .start { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Launches — the counter strip that opens the feed
   -------------------------------------------------------------------------- */

.lstrip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-card);
  overflow: hidden;
}
.lstrip__cell {
  display: grid; gap: 6px; align-content: center;
  padding: clamp(18px, 2vw, 26px) clamp(16px, 2vw, 24px);
  background: var(--surface);
}
.lstrip__n {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.2vw, 44px); line-height: 1; letter-spacing: -.045em;
  color: var(--text);
}
.lstrip__l { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }

@media (max-width: 760px) { .lstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Contact strip + reveal footer
   The last content section is one tall black field with the CTA in the middle,
   and the footer sits FIXED behind the page. Scrolling the last section up
   uncovers it — the footer is never pushed, it is revealed.
   ========================================================================== */

.contact { min-height: 100svh; display: grid; place-items: center; background: var(--bg); }
.contact__inner { position: relative; display: grid; justify-items: center; width: 100%; }

/* The pill. It is no longer a link — only the button inside it is — so it has
   no hover lift and no pointer affordance of its own. */
.need {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: min(680px, 92vw);
  padding: 10px 10px 10px 30px;
  border-radius: var(--r-chip);
  background: var(--brand); color: var(--on-brand);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(19px, 2.2vw, 30px); letter-spacing: -.035em;
}
/* The sky is a plate the size of the viewport, held still against the viewport
   by JS while the pill scrolls over it. So the picture does not travel with the
   pill — the pill is an opening in the black page, and scrolling moves the sky
   through it, until the footer opens the same sky full width. */
.need__sky {
  position: absolute; z-index: 0; top: 0; left: 0;
  width: 100vw; height: 100svh;
  background: url('/assets/img/sky-hero.webp') 50% 50% / cover no-repeat;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
@media (max-width: 1500px) { .need__sky { background-image: url('/assets/img/sky-hero-md.webp'); } }
@media (max-width: 900px)  { .need__sky { background-image: url('/assets/img/sky-hero-sm.webp'); } }
.need::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.06) 46%, rgba(255,255,255,.30));
}
.need > *:not(.need__sky) { position: relative; z-index: 2; }

.need__lead { display: inline-flex; align-items: baseline; gap: .32em; white-space: nowrap; }
/* the word is typed out, then deleted, then the next one — a caret blinks on
   the end. Reserving the width of the longest word stops the pill from
   breathing in and out on every character. */
.need__type { display: inline-flex; align-items: baseline; min-width: 4.9em; }
.need__type b { font-weight: 600; }
.need__caret {
  display: inline-block; width: .07em; height: .96em;
  margin-left: .06em; border-radius: 1px;
  background: currentColor;
  animation: caret 1.05s steps(1, end) infinite;
}
@keyframes caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.need__btn {
  display: inline-flex; align-items: center;
  height: 46px; padding: 0 22px; border-radius: var(--r-chip);
  background: #0f1419; color: #fff;
  font-family: var(--font); font-weight: 500; font-size: 14px; letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .3s var(--ease);
}
/* the hover belongs to the button now, not to the whole pill — it is the only
   thing in here that is actually clickable */
.need__btn:hover { background: #1d2530; transform: translateY(-1px); }
.need__btn { transition: background .3s var(--ease), transform .3s var(--ease); }


/* ---- the reveal itself ----
   `main` needs an opaque ground so it can slide over the fixed footer. That
   rules out sky pages, whose own background is a fixed layer BEHIND main — an
   opaque main would paint straight over the sky. `app.js` never sets
   .has-reveal on those, and this guard makes the rule safe either way. */
/* The footer is only painted once the page is inside the last screenful. Even
   if a stacking or margin edge case ever let it peek out earlier, there is
   nothing to see. */
@media (min-width: 861px) {
  .has-reveal:not(.sky-page) footer.foot { visibility: hidden; }
  .has-reveal.foot-near:not(.sky-page) footer.foot { visibility: visible; }
}

@media (min-width: 861px) {
  .has-reveal:not(.sky-page) main {
    position: relative; z-index: 1;
    background: var(--bg);
    margin-bottom: var(--foot-h, 0px);
  }
  .has-reveal:not(.sky-page) footer.foot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
    margin: 0; border-radius: 0;
  }
}

@media (max-width: 860px) {
  .contact { min-height: auto; padding-block: clamp(70px, 12vh, 120px) clamp(120px, 20vh, 180px); }
  .need { flex-direction: column; gap: 14px; padding: 18px; text-align: center; }
  .need__lead { white-space: normal; justify-content: center; }
  .need__btn { width: 100%; justify-content: center; }
}