/* =========================================================
   NovaSeed : v2
   Palette, fonts, clouds, and logo treatment tuned to v1.
   ========================================================= */

:root {
  /* Palette : match v1 */
  --bg-0: #05060d;
  --bg-1: #06070f;
  --bg-2: #080a14;
  --ink-0: #e8ecf5;
  --ink-1: #d8dcec;
  --ink-2: #c5cbe0;
  --ink-3: #9aa3c0;
  --ink-4: #6b7392;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* 8-stop supernova nebula palette (from v1) */
  --n1: #ea5f2c;
  --n2: #ec3d68;
  --n3: #d048b8;
  --n4: #8d54d4;
  --n5: #4e7ddc;
  --n6: #3aa8d0;
  --n7: #43cebc;
  --n8: #55da94;

  --grad-nova: linear-gradient(
    90deg,
    var(--n1) 0%, var(--n2) 14%, var(--n3) 28%, var(--n4) 42%,
    var(--n5) 56%, var(--n6) 70%, var(--n7) 84%, var(--n8) 100%
  );

  /* Reusable film-grain texture. Pairs with `background-blend-mode: overlay` on top of a colored background (gradient or solid) to get a speckled, filmic surface. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.85'/></feComponentTransfer></filter><rect width='220' height='220' filter='url(%23g)'/></svg>");

  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --brand: 'Unbounded', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1180px;
  --pad-x: clamp(20px, 5vw, 56px);
}

/* ----- Reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--sans);
  background: var(--bg-0);
  color: var(--ink-0);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }

::selection { background: rgba(208,72,184,.35); color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ====================== REUSABLE NEBULA CLOUD ======================
   A shared keyframed, blurred 8-stop cloud used behind any tile or
   button that should "breathe". Apply via ::after with `tile-cloud`
   helpers or use the variables below directly.
*/
@keyframes cloudDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(0, 1.5%, 0) scale(1.12); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes cloudSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes cloudShimmer {
  0%, 100% { filter: blur(22px) hue-rotate(0deg); }
  50%      { filter: blur(26px) hue-rotate(20deg); }
}
/* Combined rotation + scale + hue-cycle so the cloud visibly swirls */
@keyframes btnNebula {
  0%   { transform: rotate(0deg)   scale(1.15); filter: blur(12px) hue-rotate(0deg); }
  25%  { transform: rotate(90deg)  scale(1.28); filter: blur(15px) hue-rotate(25deg); }
  50%  { transform: rotate(180deg) scale(1.18); filter: blur(12px) hue-rotate(0deg); }
  75%  { transform: rotate(270deg) scale(1.30); filter: blur(15px) hue-rotate(-25deg); }
  100% { transform: rotate(360deg) scale(1.15); filter: blur(12px) hue-rotate(0deg); }
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Shorthand: the core 8-stop cloud background */
:root {
  --nebula-bg:
    radial-gradient(55% 48% at 50% 35%, rgba(255, 108, 48, 0.70), transparent 65%),
    radial-gradient(50% 45% at 63% 40%, rgba(245, 70, 120, 0.65), transparent 65%),
    radial-gradient(50% 45% at 67% 52%, rgba(208, 72, 184, 0.60), transparent 65%),
    radial-gradient(55% 48% at 62% 62%, rgba(141, 84, 212, 0.55), transparent 65%),
    radial-gradient(50% 45% at 48% 65%, rgba(78, 125, 220, 0.55), transparent 65%),
    radial-gradient(50% 45% at 33% 60%, rgba(58, 168, 208, 0.55), transparent 65%),
    radial-gradient(50% 45% at 30% 48%, rgba(67, 206, 188, 0.55), transparent 65%),
    radial-gradient(50% 45% at 37% 38%, rgba(85, 218, 148, 0.48), transparent 65%);
}

/* ====================== BACKGROUND LAYERS ====================== */
.stars {
  position: fixed; inset: 0;
  z-index: -3; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.66), transparent 60%),
    radial-gradient(1px 1px at 28% 72%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 32%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 62% 58%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 80%, rgba(255,255,255,.72), transparent 60%),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 52% 90%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 35% 8%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 70% 42%, rgba(255,255,255,.6), transparent 60%);
  opacity: .7;
  animation: starsDrift 80s linear infinite;
}
@keyframes starsDrift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-2%, -1.2%, 0); }
}

#starfield {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -2; pointer-events: none;
}

.nebula {
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    #06050e 0%, #06070f 40%, #05080f 70%, #04080c 100%);
}

main, .nav, .footer { position: relative; z-index: 2; }

/* ====================== SCROLL PROGRESS ====================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 50; pointer-events: none;
  background: rgba(255,255,255,.04);
}
.scroll-progress span {
  display: block; height: 100%;
  width: var(--p, 0%);
  background: var(--grad-nova);
  box-shadow: 0 0 12px rgba(208,72,184,.55);
  transition: width .15s linear;
}

/* ====================== NAV ====================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex; align-items: center;
  gap: 24px;
  padding: 12px clamp(20px, 5vw, 56px);
  width: 100%;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 6, 13, 0.55);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  transition: transform .4s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.nav.hidden { transform: translateY(-130%); }
.nav.solid { background: rgba(5, 6, 13, .78); border-color: var(--line-strong); }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink-0);
}
.brand-name { font-size: 16px; }

.logo-mark {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.logo-mark img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
}
.logo-mark .logo-ring { width: 100%; height: 100%; }
.logo-mark .logo-star { width: 100%; height: 100%; left: 49.5%; top: 48.2%; }

.nav .brand-mark {
  width: 30px; height: 30px;
  filter: drop-shadow(0 0 8px rgba(217, 75, 208, 0.45));
}

.nav-links {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
}
.nav-links a {
  position: relative;
  padding: 8px 12px;
  font-size: 13.5px; color: var(--ink-3);
  border-radius: 999px;
  transition: color .25s var(--ease);
}
@media (any-hover: hover) {
  .nav-links a:hover { color: var(--ink-0); }
}
.nav-links a:active { color: var(--ink-0); }

.nav-links a:not(.nav-cta)::before {
  content: "";
  position: absolute;
  inset: -14px -10px;
  background: var(--nebula-bg);
  filter: blur(11px);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: -1;
}
@media (any-hover: hover) {
  .nav-links a:not(.nav-cta):hover::before { opacity: 1; }
}
.nav-links a:not(.nav-cta):active::before { opacity: 1; }

.nav-cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px !important;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--ink-0) !important;
  font-weight: 600;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease), border-color .2s, background .2s, color .2s, box-shadow .25s;
}
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nebula-bg);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
@media (any-hover: hover) {
  .nav-cta:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.32); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
  .nav-cta:hover::before { opacity: 1; }
}
.nav-cta:active { transform: translateY(-1px); border-color: rgba(255,255,255,.32); color: #fff; }
.nav-cta:active::before { opacity: 1; }

/* ============================================================
   LIQUID GLASS BUTTONS (shared across every CTA on the page)

   Three-layer stack inside each `.glass-slot` wrapper:

     .glass-back   — solid dark pill, anchors the button's look
                     so page gradients/nebula don't show through
                     at rest.
     .glass-bloom  — nebula sample, hidden by default, fades in on
                     hover. Sits BETWEEN back and button so the
                     button's backdrop-filter refracts it.
     .btn / .nav-cta — the liquid glass pill itself. Near-clear
                     tint + `backdrop-filter: url(#lg-lens)` for
                     the convex-lens edge refraction + chromatic
                     aberration. Samples the layers below.

   Chromium applies the displacement-map refraction; Safari/Firefox
   silently drop the `url()` value and fall back to the preceding
   plain blur declaration — still reads as glass, just no edge lens.
   ============================================================ */
.btn,
.nav-cta {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.08) 0%,
    rgba(255,255,255,.015) 45%,
    rgba(255,255,255,.05) 100%
  );
  backdrop-filter: blur(1.5px) saturate(1.3);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.3);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    inset 0  1px 0.5px rgba(255,255,255,.55),
    inset 0 -1px 0.5px rgba(0,0,0,.3),
    0 12px 40px rgba(0,0,0,.35),
    0 2px  6px  rgba(0,0,0,.25);
  color: var(--ink-0);
}
@media (any-hover: hover) {
  .btn:hover,
  .nav-cta:hover {
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.11) 0%,
      rgba(255,255,255,.03) 45%,
      rgba(255,255,255,.07) 100%
    );
    border-color: rgba(255,255,255,.28);
    box-shadow:
      inset 0  1px 0.5px rgba(255,255,255,.7),
      inset 0 -1px 0.5px rgba(0,0,0,.35),
      0 16px 48px rgba(0,0,0,.45),
      0 2px  8px  rgba(0,0,0,.3);
  }
}
/* Kill the inside-the-button ::before nebula — the external .glass-bloom
   does the same job but actually gets refracted by the glass. */
.btn::before,
.nav-cta::before {
  display: none;
}

/* Size modifier for secondary CTAs — same proportions as .btn, scaled to
   ~75% so the secondary action reads smaller than the primary. `.btn.btn-sm`
   outranks the later `.btn { padding; font-size }` rule at same specificity. */
.btn.btn-sm {
  padding: 10px 20px;
  font-size: 12px;
  gap: 7px;
}

/* Glass slot : wraps every CTA and holds the back + bloom layers.
   .glass-refract hosts the SVG displacement filter. We put it on OUR OWN
   layers (back + bloom) as a regular `filter: url()` instead of
   `backdrop-filter: url()` on the button — because `backdrop-filter: url()`
   is Chromium-only, but `filter: url()` works in every modern browser.
   So Safari and Firefox get the same lens + chromatic aberration. */
.glass-slot {
  position: relative;
  display: inline-flex;
  border-radius: 999px;
}
.glass-refract {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  /* clip-path masks the FILTER OUTPUT to the pill silhouette. overflow:hidden
     only clips the filter's INPUT (children) — the filter's rectangular
     output region can still paint dark displaced pixels into the rounded-
     corner "transparent" area. clip-path applies after the filter runs and
     guarantees no bleed outside the pill. */
  clip-path: inset(0 round 999px);
  filter: url(#lg-lens);
  pointer-events: none;
  isolation: isolate;
  will-change: filter, transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Prime element : forces Safari to compile the #lg-lens filter at page load
   by painting a real element that uses it, before any button is hovered.
   Needs to be (a) visible (opacity > 0, non-zero size), (b) NOT contained
   via `contain: strict` which was letting WebKit skip it entirely, and
   (c) have a non-uniform source graphic so the filter does real work. */
.lg-prime {
  position: fixed;
  right: 0; bottom: 0;
  display: block;
  width: 40px; height: 20px;
  pointer-events: none;
  z-index: 100;
  opacity: .01;
  background: linear-gradient(90deg, #000, #fff);
  filter: url(#lg-lens);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.glass-back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bg-0);
  pointer-events: none;
}
.glass-bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--nebula-bg);
  filter: blur(12px);
  /* 0.008 is essentially invisible over the dark backing, but it's non-zero
     AND non-uniform — which keeps WebKit's SVG filter continuously active
     instead of idling on a solid-color input. This is what eliminates the
     "muted flash" on first hover in Safari: the filter is always running,
     so there's no wake-up step when bloom transitions in. */
  opacity: .008;
  pointer-events: none;
  /* Fade-OUT lingers smoothly when the cursor leaves. Fade-IN is overridden
     in the :hover rule below to be effectively instant — Safari's
     backdrop-filter doesn't pick up the nebula sample until the bloom is
     actually opaque, so any perceptible fade-in reads as "muted flash →
     correct colors" latency rather than a deliberate transition. */
  transition: opacity .35s var(--ease);
}
@media (any-hover: hover) {
  .glass-slot:hover .glass-bloom {
    opacity: .95;
    transition: opacity 0s;
  }
}
.glass-slot:focus-within .glass-bloom {
  opacity: .95;
  transition: opacity 0s;
}

/* Mobile nav toggle : pinned to right */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  position: relative;
  flex-shrink: 0;
}
.nav-toggle-bar {
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: var(--ink-0); border-radius: 2px;
  transition: transform .25s, opacity .2s, top .25s;
}
.nav-toggle-bar:nth-child(1) { top: 12px; }
.nav-toggle-bar:nth-child(2) { top: 19px; }
.nav-toggle-bar:nth-child(3) { top: 26px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ====================== BUTTONS ====================== */
/* Buttons : structure only. Visuals (bg, box-shadow, liquid-glass backdrop)
   live in the scoped blocks above so they can differ per variant. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--ink-0);
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease), border-color .2s, background .2s, color .2s, box-shadow .25s;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nebula-bg);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
.btn:active {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.32);
}
.btn:active::before { opacity: 1; }
@media (any-hover: hover) {
  .btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.32);
  }
  .btn:hover::before { opacity: 1; }
}

/* ====================== CONTAINER ====================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ====================== HERO ====================== */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px var(--pad-x) 100px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
/* Full-bleed brand gradient + film grain, vignetted at the edges so the dark page bg bleeds in around the hero. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
  background:
    var(--grain),
    var(--grad-nova);
  background-blend-mode: overlay, normal;
  background-size: 220px 220px, 100% 100%;
  background-repeat: repeat, no-repeat;
  /* Rounded-rectangle mask: a blurred white rect inside an SVG. preserveAspectRatio='none' stretches it to the hero's box; stdDeviation controls how soft the edges fade. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 200 120'><filter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'><feGaussianBlur stdDeviation='1.4'/></filter><rect x='4' y='4' width='192' height='112' rx='10' ry='10' fill='white' filter='url(%23b)'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 200 120'><filter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'><feGaussianBlur stdDeviation='1.4'/></filter><rect x='4' y='4' width='192' height='112' rx='10' ry='10' fill='white' filter='url(%23b)'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Wraps the hero title so the supernova cloud can center on the title */
.hero-title-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  isolation: isolate;
}

/* Supernova cloud : centered behind the hero text */
.hero-cloud {
  display: none;
  position: absolute;
  left: 50%; top: 50%;
  width: 108%;
  max-width: 1040px;
  aspect-ratio: 2 / 1;
  translate: -50% -50%;
  z-index: -1;
  pointer-events: none;
  filter: blur(48px);
  opacity: .92;
  animation: cloudDrift 22s ease-in-out infinite;
}
.hero-cloud-inner {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 45% at 50% 35%, rgba(255, 108, 48, 0.55), transparent 60%),
    radial-gradient(45% 42% at 63% 40%, rgba(245, 70, 120, 0.55), transparent 60%),
    radial-gradient(45% 42% at 67% 52%, rgba(208, 72, 184, 0.55), transparent 60%),
    radial-gradient(50% 45% at 62% 62%, rgba(141, 84, 212, 0.48), transparent 60%),
    radial-gradient(45% 42% at 48% 65%, rgba(78, 125, 220, 0.50), transparent 60%),
    radial-gradient(45% 42% at 33% 60%, rgba(58, 168, 208, 0.48), transparent 60%),
    radial-gradient(45% 42% at 30% 48%, rgba(67, 206, 188, 0.48), transparent 60%),
    radial-gradient(45% 42% at 37% 38%, rgba(85, 218, 148, 0.40), transparent 60%);
  animation: cloudSpin 60s linear infinite;
}
.hero-cloud-shimmer {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 35% at 30% 30%, rgba(255, 108, 48, 0.35), transparent 60%),
    radial-gradient(40% 35% at 70% 70%, rgba(78, 125, 220, 0.35), transparent 60%);
  mix-blend-mode: screen;
  animation: cloudShimmer 8s ease-in-out infinite;
}

.hero-inner {
  position: relative; z-index: 2;
  max-width: 1100px;
  display: flex; flex-direction: column; align-items: center;
  isolation: isolate;
}

.hero-title {
  font-size: clamp(48px, 9vw, 128px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 26px;
  text-shadow: 0 0 60px rgba(0,0,0,.4);
}
.hero-title .line { display: block; }
.hero-title .word-sm {
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.hero-title .grad {
  display: inline-block;
  color: var(--ink-0);
  -webkit-text-fill-color: var(--ink-0);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  filter: none;
}
.hero-title .punct {
  color: var(--ink-0);
  -webkit-text-fill-color: var(--ink-0);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  display: inline-block;
  animation: punctTwinkle 5.2s ease-in-out infinite;
}
@keyframes punctTwinkle {
  0%, 100% { text-shadow: 0 0 4px rgba(255,255,255,.35), 0 0 12px rgba(255,255,255,.15); }
  50%      { text-shadow: 0 0 10px rgba(255,255,255,1),   0 0 26px rgba(255,255,255,.55); }
}
.hero-title .word-nova {
  display: inline-block;
  animation: novaTwinkle 5.2s ease-in-out infinite;
}
@keyframes novaTwinkle {
  0%, 100% { text-shadow: 0 0 10px rgba(255,255,255,.12), 0 0 28px rgba(255,255,255,.06); }
  50%      { text-shadow: 0 0 18px rgba(255,255,255,.46), 0 0 48px rgba(255,255,255,.22); }
}

/* Hidden twinkling star layer that fills the hero. Stars are absolutely
   placed at random percentages and twinkle on their own loops — they don't
   move. Two masks are intersected: a radial cursor spotlight and the same
   blurred rounded-rect vignette the hero::before gradient uses, so stars
   only reveal inside the colored nebula area, never in the black corners.
   z-index: 1 keeps them below .hero-inner (buttons/title at z:2).
   Disabled on coarse pointers and reduce-motion. */
.hero-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  --mx: 50%;
  --my: 50%;
  --reveal: 190px;
  opacity: 0;
  /* Slow linear fade-out so leaving the hero doesn't cut sparkles abruptly.
     Fade-in is also linear but shorter — see the .active rule below. */
  transition: opacity 3s linear;
  -webkit-mask-image:
    radial-gradient(circle var(--reveal) at var(--mx) var(--my),
      #000 0%, #000 35%, transparent 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 200 120'><filter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'><feGaussianBlur stdDeviation='1.4'/></filter><rect x='4' y='4' width='192' height='112' rx='10' ry='10' fill='white' filter='url(%23b)'/></svg>");
          mask-image:
    radial-gradient(circle var(--reveal) at var(--mx) var(--my),
      #000 0%, #000 35%, transparent 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 200 120'><filter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'><feGaussianBlur stdDeviation='1.4'/></filter><rect x='4' y='4' width='192' height='112' rx='10' ry='10' fill='white' filter='url(%23b)'/></svg>");
  -webkit-mask-size: 100% 100%, 100% 100%;
          mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.hero-sparkles.active { opacity: 0.3; transition: opacity 1s linear; }

/* Registered so it can be transitioned — without @property the browser treats
   custom props as strings and snaps instead of interpolating. */
@property --lit {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.hero-sparkles .spark {
  position: absolute;
  left: var(--sx);
  top:  var(--sy);
  width:  var(--sz);
  height: var(--sz);
  margin-left: calc(-0.5 * var(--sz));
  margin-top:  calc(-0.5 * var(--sz));
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 6px 1.5px rgba(255,255,255,.75),
    0 0 14px 3px  rgba(255,255,255,.25);
  opacity: 0;
  animation: sparkTwinkle var(--dur) ease-in-out var(--delay) infinite;
  /* --lit multiplies with the twinkle opacity so stars fade in over 1s as the
     cursor enters their reveal zone, instead of popping at whatever phase the
     animation is in when the mask sweeps over them. */
  filter: opacity(var(--lit));
  transition: --lit 1s linear;
}
.hero-sparkles .spark.lit { --lit: 1; }
@keyframes sparkTwinkle {
  0%, 100% { opacity: 0; }
  45%, 55% { opacity: 1; }
}

/* Gradient "NovaSeed" callout above tagline */
.hero-brand {
  margin: 0 0 8px;
  font-family: var(--brand);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  text-shadow: 0 0 30px rgba(0,0,0,.45);
}
.hero-brand .grad {
  display: inline-block;
  color: var(--ink-0);
  -webkit-text-fill-color: var(--ink-0);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

.hero-tagline {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  color: var(--ink-1);
  margin: 0 0 40px;
  letter-spacing: -0.01em;
  text-shadow: 0 0 30px rgba(0,0,0,.5);
}

.hero-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  margin-bottom: clamp(96px, 14vh, 160px);
}

.hero-meta {
  display: inline-flex; align-items: stretch; gap: 28px;
  padding: 18px 28px;
}
.hero-meta > div { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.hero-meta .num {
  font-weight: 200;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-0);
}
.hero-meta .lbl { font-size: 11.5px; color: var(--ink-0); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.hero-meta .div { width: 1px; background: var(--line); }

.scroll-hint {
  position: absolute;
  bottom: 32px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  display: flex; justify-content: center; align-items: flex-start; padding-top: 6px;
}
.scroll-hint span {
  width: 2px; height: 6px;
  background: var(--ink-2);
  border-radius: 2px;
  animation: hintFall 1.8s var(--ease) infinite;
}
@keyframes hintFall {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(14px); opacity: 0; }
  61% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ====================== SECTION COMMONS ====================== */
.section { padding: 96px 0; position: relative; }

/* Section kicker : big gradient number + tight label, no em-dash */
.section-kicker {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 28px;
}
.section-kicker.center { display: flex; justify-content: center; }
.kicker-num {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kicker-num .grad {
  background: var(--grad-nova);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  animation: gradShift 9s ease-in-out infinite;
}
/* Text variant : longer than 2 chars — dial the size down a touch so the
   kicker stays proportional to the section title instead of competing.
   Numbers have no descenders so line-height: 1 is safe; for text we bump
   line-height and add bottom breathing room so 'g' and 'p' don't clip when
   background-clip: text fences the span at the ascender height. */
.kicker-num.kicker-text {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  padding-bottom: 0.1em;
}
.kicker-label {
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding-bottom: 4px;
  position: relative;
}
.kicker-label::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  width: 1px; height: 22px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.2), transparent);
}

.section-title {
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  max-width: 20ch;
}
.section-title.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-title .muted { color: var(--ink-3); font-weight: 400; }
.section-lede {
  max-width: 640px;
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 0 64px;
  font-weight: 400;
}
.section-lede.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ====================== PITCH ====================== */
.pitch { padding: 100px 0 40px; text-align: center; position: relative; }
.pitch-title {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 auto 28px;
  max-width: 900px;
}
.pitch-lede {
  max-width: 760px; margin: 0 auto;
  font-size: 18px; color: var(--ink-2); line-height: 1.7;
}

/* ====================== SHARED TILE : animated nebula always on ====================== */
.tile, .pillar, .memory-card, .space-card, .t-step {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pillar::after,
.memory-card::after,
.space-card::after,
.t-step::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: var(--nebula-bg);
  filter: blur(28px);
  opacity: .11;
  pointer-events: none;
  z-index: -2;
}
.pillar::before,
.memory-card::before,
.space-card::before,
.t-step::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: var(--nebula-bg);
  filter: blur(28px);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.pillar > *,
.memory-card > *,
.space-card > *,
.t-step > * { position: relative; z-index: 1; }

@media (any-hover: hover) {
  .pillar:hover::before,
  .memory-card:hover::before,
  .space-card:hover::before,
  .t-step:hover::before { opacity: .85; }
}
/* Touch: brief boost on tap, fades back to always-on animation after release */
.pillar:active::before,
.memory-card:active::before,
.space-card:active::before,
.t-step:active::before { opacity: .85; }

/* ====================== PHILOSOPHY ====================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.pillar {
  padding: 32px 28px 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  backdrop-filter: blur(14px);
}
.pillar h3 { font-weight: 700; font-size: 20px; margin: 0 0 10px; letter-spacing: -0.015em; line-height: 1.25; }
.pillar p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0; }


.philosophy-tag {
  margin: 0;
  text-align: center;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-1);
  line-height: 1.35;
  padding: 28px var(--pad-x);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

/* ====================== AURORA ====================== */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.col-text { max-width: 520px; }

/* Aurora traits: nebula cloud reveals on hover */
.aurora-traits {
  list-style: none; padding: 0; margin: 36px 0 0;
  display: flex; flex-direction: column;
}
.aurora-traits li {
  position: relative;
  display: flex; align-items: baseline; gap: 24px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.aurora-traits li:last-child { border-bottom: 1px solid var(--line); }
.aurora-traits li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nebula-bg);
  filter: blur(24px);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: -1;
}
.aurora-traits li > * { position: relative; z-index: 1; }
@media (any-hover: hover) {
  .aurora-traits li:hover::before { opacity: 1; }
}
.aurora-traits li:active::before { opacity: 1; }

.trait-name {
  font-weight: 700;
  font-size: 19px;
  width: 110px;
  background: var(--grad-nova);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.02em;
  animation: gradShift 9s ease-in-out infinite;
}
.trait-desc { color: var(--ink-2); font-size: 14.5px; }

/* Aurora visual : cloud + static logo + simple name tag (NO animated cloud on name tag) */
.aurora-visual {
  position: relative;
  width: 100%; aspect-ratio: 1;
  display: grid; place-items: center;
  isolation: isolate;
}
/* Layout anchor for the oval gradient; the visual itself lives in ::before so tilt + mask don't have to compete with the square/sized layout box the flex layout uses on mobile. */
.aurora-cloud {
  position: absolute;
  width: 78%; aspect-ratio: 1;
  pointer-events: none;
}
.aurora-cloud::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 166%;
  aspect-ratio: 1.7 / 1;
  transform: translate(-50%, -50%) rotate(-35deg);
  opacity: 0.8;
  /* The gradient angle counter-rotates the element's tilt (90° + 35° = 125°) so color bands stay vertical in the viewport, matching the hero. Stops are compressed to 8%–92% so the full n1–n8 spectrum fits inside the elliptical mask instead of the rim colors being hidden under the fade. */
  background:
    var(--grain),
    linear-gradient(
      125deg,
      var(--n1) 8%, var(--n2) 20%, var(--n3) 32%, var(--n4) 44%,
      var(--n5) 56%, var(--n6) 68%, var(--n7) 80%, var(--n8) 92%
    );
  background-blend-mode: overlay, normal;
  background-size: 180px 180px, 100% 100%;
  background-repeat: repeat, no-repeat;
  /* Same mask recipe as the hero — a blurred shape inside an SVG — so the falloff is smooth everywhere (no visible crease where the fade starts) and tight (fade happens near the rim, not deep into the oval). */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 200 120'><filter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'><feGaussianBlur stdDeviation='3'/></filter><ellipse cx='100' cy='60' rx='92' ry='54' fill='white' filter='url(%23b)'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 200 120'><filter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'><feGaussianBlur stdDeviation='3'/></filter><ellipse cx='100' cy='60' rx='92' ry='54' fill='white' filter='url(%23b)'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.aurora-logo {
  position: relative;
  width: 60%; aspect-ratio: 1;
  z-index: 1;
  /* Blur radii stay constant across keyframes; only the shadow alpha animates. Varying blur radius per frame re-rasterizes the drop-shadow kernels, which on mobile WebKit flickers at sharp SVG vertices (star's top point). Will-change pins it to its own compositing layer. */
  will-change: filter;
  animation: auroraTwinkle 5.2s ease-in-out infinite;
}
@keyframes auroraTwinkle {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,.25))
      drop-shadow(0 0 18px rgba(255,255,255,.15))
      drop-shadow(0 0 48px rgba(255,255,255,.08));
  }
  50% {
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,.85))
      drop-shadow(0 0 18px rgba(255,255,255,.55))
      drop-shadow(0 0 48px rgba(255,255,255,.28));
  }
}
.aurora-logo img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
}
.aurora-logo .logo-ring {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 18px rgba(217, 75, 208, 0.45));
  opacity: 0.95;
}
.aurora-logo .logo-star {
  width: 100%; height: 100%;
  left: 49.5%; top: 48.2%;
  filter: drop-shadow(0 0 24px rgba(255, 200, 180, 0.55));
}

/* Static nameplate + dialogue : plain, no cloud, no pulse dot */
.aurora-caption {
  position: absolute;
  bottom: 0; left: 6%; right: 6%;
  padding: 16px 20px;
  border-radius: 18px;
  background: rgba(5, 6, 13, .85);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px);
  z-index: 2;
}
.aurora-name {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.aurora-msg {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-1);
  font-style: italic;
  font-weight: 400;
}

/* ====================== MEMORY ====================== */
.memory .container { display: flex; flex-direction: column; align-items: center; }
.memory-band {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 16px auto 40px;
  padding: 14px 24px;
  text-align: center;
  isolation: isolate;
}
.memory-band-cloud {
  position: absolute;
  inset: -14px -10px;
  background: var(--nebula-bg);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
}
.memory-band-text {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 12px;
  row-gap: 2px;
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 0 30px rgba(0,0,0,.45);
}
.memory-band-group {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  column-gap: 12px;
}

.memory-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; width: 100%; max-width: 980px;
}
.memory-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  backdrop-filter: blur(14px);
}
.memory-card h4 { font-weight: 700; font-size: 19px; margin: 0 0 10px; letter-spacing: -0.01em; }
.memory-card p { color: var(--ink-2); font-size: 14.5px; margin: 0; line-height: 1.6; }


/* ====================== SEEDSPACES ====================== */
.space-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.space-card {
  padding: 28px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  backdrop-filter: blur(14px);
}

.space-card h3 { font-weight: 700; font-size: 21px; margin: 0 0 10px; letter-spacing: -0.02em; }
.space-card p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; margin: 0; }


/* ====================== STEWARD ====================== */
.timeline {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.t-line {
  position: absolute;
  left: 6%; right: 6%;
  top: 86px; height: 1px;
  background: var(--line);
  z-index: 0;
}
.t-line-fill {
  display: block; height: 100%; width: 0%;
  background: var(--grad-nova);
  box-shadow: 0 0 12px rgba(208,72,184,.5);
  transition: width 1.4s var(--ease);
}
.t-step {
  padding: 32px 28px 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  backdrop-filter: blur(14px);
  z-index: 1;
}

.t-num {
  font-weight: 700;
  font-size: 13px; color: var(--ink-3);
  letter-spacing: 0.14em;
}
.t-stage {
  display: inline-block; margin: 12px 0 18px;
  font-weight: 800;
  font-size: 22px;
  background: var(--grad-nova);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.02em;
  animation: gradShift 9s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(208,72,184,.3));
}
.t-step h3 { font-weight: 700; font-size: 22px; margin: 0 0 10px; letter-spacing: -0.018em; }
.t-step p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.steward-cta {
  margin-top: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  backdrop-filter: blur(14px);
}
.steward-cta h4 { font-weight: 700; font-size: 22px; margin: 0 0 4px; letter-spacing: -0.02em; }
.steward-cta h4 .grad {
  display: inline-block;
  font-family: var(--brand);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  background: linear-gradient(90deg, var(--n5) 0%, var(--n6) 33%, var(--n7) 66%, var(--n8) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.steward-cta p { color: var(--ink-2); font-size: 14.5px; margin: 0; }

/* ====================== FAQ ====================== */
.faq-list {
  margin-top: 24px;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0;
  font-weight: 600; font-size: clamp(19px, 2.2vw, 24px);
  letter-spacing: -0.015em;
  color: var(--ink-1);
  cursor: pointer;
  transition: color .25s var(--ease);
}
@media (any-hover: hover) {
  .faq-item summary:hover { color: var(--ink-0); }
}
.faq-item summary:active { color: var(--ink-0); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  position: relative; width: 22px; height: 22px; flex-shrink: 0;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute;
  background: var(--ink-1);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.faq-icon::before { left: 0; right: 0; top: 50%; height: 1.4px; transform: translateY(-50%); }
.faq-icon::after  { top: 0; bottom: 0; left: 50%; width: 1.4px; transform: translateX(-50%); }
.faq-item[open] .faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-body {
  padding: 0 0 28px;
  max-width: 760px;
  color: var(--ink-2);
  font-size: 16px; line-height: 1.7;
  animation: faqOpen .5s var(--ease) both;
}
.faq-body p { margin: 0; }
.faq-body p + p { margin-top: 14px; }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====================== ACCESS / CTA ====================== */
.access { padding-bottom: 160px; }
.access-card {
  position: relative;
  padding: 72px clamp(24px, 5vw, 72px) 60px;
  border-radius: 32px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  backdrop-filter: blur(22px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.access-logo {
  width: 96px; height: 96px;
  margin: 0 auto 8px;
  position: relative;
  filter: drop-shadow(0 0 20px rgba(217, 75, 208, 0.45));
}
.access-logo img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
}
.access-logo .logo-ring { width: 100%; height: 100%; opacity: 0.95; }
.access-logo .logo-star { width: 100%; height: 100%; left: 49.5%; top: 48.2%; }

.access-title-brand,
.brand-name {
  font-family: var(--brand);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  display: inline-block;
  background: var(--grain), var(--grad-nova);
  background-blend-mode: overlay, normal;
  background-size: 180px 180px, 100% 100%;
  background-repeat: repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Product wordmark : Unbounded (the NovaSeed brand face) without the
   gradient/lowercase treatment — used for sibling products like SeedSteward
   so they read as family members of the brand. */
.product-name {
  font-family: var(--brand);
  font-weight: 400;
  letter-spacing: -0.01em;
}
/* Product wordmark inside a kicker : drop the kicker's all-caps + wide tracking
   so the camelcase product name reads naturally, and nudge the size up so it
   balances the gradient "Shipping first" next to it. */
.kicker-label.product-name {
  text-transform: none;
  font-size: clamp(15px, 1.4vw, 17px);
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--ink-1);
}
/* "Seed" accent : matches the cool end of the NovaSeed gradient (the same
   stops used for the nebula tail of the brand wordmark), so the "Seed" in
   SeedSteward reads as a sibling to the "seed" tail of "novaseed". */
.seed-accent {
  background: linear-gradient(90deg, var(--n5) 0%, var(--n6) 33%, var(--n7) 66%, var(--n8) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Brand wordmark, quiet : Unbounded + lowercase treatment of .brand-name,
   without the rainbow gradient. Use when a section is already crowded with
   colored moments and another full-gradient wordmark would compete. */
.brand-plain {
  font-family: var(--brand);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  display: inline-block;
}
.access-title {
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-weight: 800;
  font-size: clamp(36px, 5.4vw, 68px);
  line-height: 1.02; letter-spacing: -0.03em;
  margin: 22px 0 16px;
}
.access-title::before {
  content: "";
  position: absolute;
  inset: -24px -40px;
  background: var(--nebula-bg);
  filter: blur(22px);
  pointer-events: none;
  z-index: -1;
}
.access-lede { color: var(--ink-2); max-width: 520px; margin: 0 auto 36px; font-size: 17px; line-height: 1.65; }

.access-form {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-width: 520px; margin: 0 auto;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(5, 6, 13, .55);
  backdrop-filter: blur(18px);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
  z-index: 1;
}
.access-form:focus-within {
  border-color: rgba(208,72,184,.5);
  box-shadow: 0 0 0 6px rgba(208,72,184,.1);
}
.access-form input {
  flex: 1; min-width: 220px;
  padding: 12px 18px;
  background: transparent; border: none; outline: none;
  color: var(--ink-0); font-size: 15px;
}
.access-form input::placeholder { color: var(--ink-3); }
.access-form .btn { padding: 12px 22px; }

.access-fineprint { color: var(--ink-3); font-size: 13px; margin-top: 16px; }
.access-card.success .access-form { opacity: 0.5; pointer-events: none; }
.access-card.success #accessNote { color: var(--n3); }

/* ---------- Brevo signup plumbing ----------
   Brevo wraps each field in .sib-input / .sib-form-block / .form__entry /
   .form__label-row / .entry__field so its main.js can find inputs and
   render validation errors. We strip those wrappers' default padding/
   background so they behave as transparent flex children inside .access-form. */
.access-form .sib-input,
.access-form .sib-form-block,
.access-form .form__entry,
.access-form .form__label-row,
.access-form .entry__field {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.access-form .sib-input { flex: 1 1 0; min-width: 220px; }
.access-form .signup-submit-block { flex: 0 0 auto; }
.access-form .form__entry,
.access-form .form__label-row,
.access-form .entry__field {
  display: block;
  width: 100%;
}
.access-form input[type="email"] { width: 100%; }

/* Inline field error (Brevo writes validation messages into this label). */
.access-form .entry__error {
  display: block;
  flex-basis: 100%;
  margin: 6px 18px 0;
  min-height: 0;
  color: #ffc7c7;
  font-size: 13px;
  text-align: left;
}
.access-form .entry__error:empty { margin: 0; }

/* Brevo's loader SVG. Hidden at rest via .sib-hide-loader-icon; during
   submit Brevo removes that class and adds .sib-form-block__button-disabled
   to the button so we show + spin the loader and hide the arrow. */
.access-form .sib-hide-loader-icon { display: none; }
.access-form .progress-indicator__icon:not(.sib-hide-loader-icon) {
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  fill: currentColor;
  animation: access-submit-spin 0.9s linear infinite;
}
.access-form .sib-form-block__button-disabled .access-arrow { display: none; }
.sib-form-block__button-disabled { opacity: 0.7; cursor: wait; }
@keyframes access-submit-spin { to { transform: rotate(360deg); } }

/* Brevo honeypot — always visually hidden and unreachable. */
.input--hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Brevo inline panels are hidden — feedback is shown via #toast,
   mirrored from these panels by script.js. Keep them in the DOM so
   Brevo's main.js can still toggle the active class as it normally
   would. */
#sib-form-container { max-width: 540px; margin: 0 auto; }
#sib-form-container #error-message,
#sib-form-container #success-message,
#sib-form-container #error-message.sib-form-message-panel--active,
#sib-form-container #success-message.sib-form-message-panel--active {
  display: none !important;
}

/* ====================== TOAST (post-submit feedback) ======================
   A glassy pill that slides up from the bottom when Brevo signals
   success or error, then auto-dismisses. Success wears the nebula
   gradient ring; error wears a soft red. Click to dismiss.
*/
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 4vh, 32px);
  transform: translate(-50%, 24px);
  z-index: 100;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  max-width: min(calc(100vw - 32px), 440px);
  padding: 13px 20px 13px 18px;
  border-radius: 999px;

  background: rgba(10, 12, 22, 0.78);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);

  color: var(--ink-0);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;

  border: 1px solid var(--line-strong);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
}

.toast[aria-hidden="false"] { pointer-events: auto; cursor: pointer; }

.toast.toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Gradient ring accent — painted via a masked pseudo so it traces
   the rounded pill without affecting layout. */
.toast::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-nova);
  opacity: 0;
  transition: opacity 420ms var(--ease);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.toast.toast--success::before { opacity: 0.85; }
.toast.toast--error::before {
  background: linear-gradient(90deg, #ff5d5d, #ff8a8a 60%, #ffb3b3);
  opacity: 0.8;
}

/* Soft nebula glow behind the success toast — drifts subtly so it
   feels alive without being loud. */
.toast::after {
  content: "";
  position: absolute;
  inset: -40px -60px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(
    closest-side,
    rgba(85, 218, 148, 0.35),
    rgba(67, 206, 188, 0.18) 40%,
    transparent 72%
  );
  filter: blur(22px);
  opacity: 0;
  transition: opacity 520ms var(--ease);
  pointer-events: none;
}
.toast.toast--visible.toast--success::after { opacity: 0.9; }
.toast.toast--error::after {
  background: radial-gradient(
    closest-side,
    rgba(255, 93, 93, 0.35),
    rgba(255, 138, 138, 0.18) 45%,
    transparent 75%
  );
}
.toast.toast--visible.toast--error::after { opacity: 0.85; }

.toast-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--n8);
  box-shadow:
    0 0 10px rgba(85, 218, 148, 0.8),
    0 0 22px rgba(67, 206, 188, 0.6);
}
.toast--error .toast-dot {
  background: #ff6b6b;
  box-shadow:
    0 0 10px rgba(255, 93, 93, 0.75),
    0 0 22px rgba(255, 93, 93, 0.4);
}

.toast-text { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast::before,
  .toast::after { transition-duration: 0.001s; }
}

/* ====================== CLOSING : v1 feel (tagline gradient + nebula cloud) ====================== */
.closing {
  text-align: center;
  padding: 140px 0 160px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.closing::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100%, 720px);
  background:
    radial-gradient(28vmin 25vmin at 50% 35%, rgba(255, 108, 48, 0.55), transparent 55%),
    radial-gradient(26vmin 23vmin at 63% 40%, rgba(245, 70, 120, 0.52), transparent 55%),
    radial-gradient(26vmin 23vmin at 67% 52%, rgba(208, 72, 184, 0.48), transparent 55%),
    radial-gradient(28vmin 25vmin at 62% 62%, rgba(141, 84, 212, 0.42), transparent 55%),
    radial-gradient(26vmin 23vmin at 49% 65%, rgba(78, 125, 220, 0.44), transparent 55%),
    radial-gradient(26vmin 23vmin at 36% 60%, rgba(58, 168, 208, 0.42), transparent 55%),
    radial-gradient(26vmin 23vmin at 33% 48%, rgba(67, 206, 188, 0.42), transparent 55%),
    radial-gradient(26vmin 23vmin at 40% 38%, rgba(85, 218, 148, 0.36), transparent 55%);
  filter: blur(45px);
  pointer-events: none;
  z-index: -1;
  animation: cloudDrift 22s ease-in-out infinite;
}
.closing-stack {
  position: relative;
  display: inline-block;
  text-align: center;
}
.closing-title {
  font-size: clamp(28px, 6vw, 56px);
  margin: 0 auto 12px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  display: inline-block;
  background: var(--grad-nova);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: closingTitleCycle 20s ease-in-out infinite;
}
.closing-line {
  color: var(--ink-3);
  font-size: 17px;
  margin: 0;
  animation: closingLineCycle 20s ease-in-out infinite;
}
.closing-wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--brand);
  font-size: clamp(56px, 11vw, 112px);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  line-height: 1;
  white-space: nowrap;
  background: var(--grain), var(--grad-nova);
  background-blend-mode: overlay, normal;
  background-size: 180px 180px, 100% 100%;
  background-repeat: repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  pointer-events: none;
  animation: closingWordmarkCycle 20s ease-in-out infinite;
}
@keyframes closingTitleCycle {
  0%    { opacity: 1; background-position: 0% 50%; }
  22.5% { opacity: 1; background-position: 100% 50%; }
  45%   { opacity: 1; background-position: 0% 50%; }
  47.5% { opacity: 0; background-position: 0% 50%; }
  85%   { opacity: 0; background-position: 0% 50%; }
  90%   { opacity: 1; background-position: 0% 50%; }
  100%  { opacity: 1; background-position: 0% 50%; }
}
@keyframes closingLineCycle {
  0%, 45%   { opacity: 1; }
  47.5%     { opacity: 0; }
  85%       { opacity: 0; }
  90%, 100% { opacity: 1; }
}
@keyframes closingWordmarkCycle {
  0%, 50%  { opacity: 0; }
  55%      { opacity: 1; }
  80%      { opacity: 1; }
  82.5%    { opacity: 0; }
  100%     { opacity: 0; }
}

/* ====================== FOOTER ====================== */
.footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 28px;
  background: rgba(5,6,13,.6);
  backdrop-filter: blur(10px);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px; align-items: start;
}
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand .brand-mark {
  width: 52px; height: 52px;
  filter: drop-shadow(0 0 8px rgba(217, 75, 208, 0.45));
}
.foot-name { font-family: var(--brand); font-weight: 400; font-size: 16px; letter-spacing: -0.01em; text-transform: lowercase; }
.foot-tag { color: var(--ink-3); font-size: 14px; font-weight: 500; }

.foot-nav {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.foot-nav h5 {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px; font-weight: 700;
}
.foot-nav a {
  position: relative;
  display: block;
  width: fit-content;
  font-size: 14.5px; color: var(--ink-1);
  padding: 5px 0;
  transition: color .25s var(--ease);
}
.foot-nav a::before {
  content: "";
  position: absolute;
  inset: -14px -10px;
  background: var(--nebula-bg);
  filter: blur(11px);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: -1;
}
@media (any-hover: hover) {
  .foot-nav a:hover { color: var(--ink-0); }
  .foot-nav a:hover::before { opacity: 1; }
}
.foot-nav a:active { color: var(--ink-0); }
.foot-nav a:active::before { opacity: 1; }

.foot-base {
  max-width: var(--maxw); margin: 48px auto 0; padding: 24px var(--pad-x) 8px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--ink-3);
}
.footer-trademarks {
  max-width: var(--maxw); margin: 16px auto 0;
  padding: 0 var(--pad-x);
  font-size: 11px; color: var(--ink-4); line-height: 1.6;
}
.footer-recaptcha {
  max-width: var(--maxw); margin: 14px auto 0;
  padding: 0 var(--pad-x);
  font-size: 11px; color: var(--ink-4); line-height: 1.6;
}
.footer-recaptcha a {
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s var(--ease);
}
@media (any-hover: hover) {
  .footer-recaptcha a:hover { color: var(--ink-1); }
}

/* Hide the floating reCAPTCHA v3 badge site-wide; attribution lives in the footer. */
.grecaptcha-badge { visibility: hidden !important; }

/* ====================== REVEAL ANIMATIONS ====================== */
/* Pause all animations inside a section marked offscreen by the IntersectionObserver. */
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
  animation-play-state: paused !important;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

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

/* ====================== RESPONSIVE ====================== */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex !important;
    position: absolute;
    top: 64px; left: 12px; right: 12px;
    flex-direction: column;
    align-items: center;      /* <-- centered drawer links */
    gap: 4px;
    padding: 14px;
    background: rgba(5,6,13,.94);
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    backdrop-filter: blur(20px);
  }
  .nav-links.open a { padding: 12px 18px; text-align: center; width: 100%; }
  .nav-links.open .glass-slot { width: 100%; margin-top: 6px; }
  .nav-toggle { display: inline-flex; }
  .nav { gap: 12px; padding: 10px 16px; }
  .pillars, .memory-row, .space-grid, .timeline { grid-template-columns: 1fr; }
  .t-line { display: none; }
  .two-col { grid-template-columns: 1fr; gap: 48px; }
  .col-text { max-width: none; }
  .aurora-visual { aspect-ratio: 4/3; max-width: 520px; margin: 0 auto; }
  .aurora-caption { bottom: -32px; }
  .footer-inner { grid-template-columns: 1fr; }
  .foot-nav { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 80px 0; }
  .access { padding-bottom: 100px; }
  .access-card { padding: 72px 24px 56px; }
  .access-logo { width: 76px; height: 76px; }
  .hero { min-height: auto; padding: 120px var(--pad-x) 80px; }
  .hero-title { font-size: clamp(40px, 11vw, 84px); }
  .hero-brand { font-size: clamp(28px, 4.8vw, 42px); }
  .hero-tagline { margin-bottom: 32px; }
  .hero-cta { flex-direction: column; align-items: center; margin-bottom: 48px; }
  .hero-cta .btn { justify-content: center; }
  .hero-meta { flex-direction: column; align-items: center; gap: 14px; padding: 16px 20px; }
  .hero-meta .div { display: none; }
  .scroll-hint { display: none; }
  .steward-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
  .steward-cta .btn { width: 100%; }
  .foot-base { flex-direction: column; gap: 8px; text-align: center; }
  .footer-trademarks { font-size: 10.5px; }
  .footer-recaptcha { font-size: 10.5px; text-align: center; }
  .pitch { padding: 72px 0 24px; }
  .pitch-title { font-size: clamp(28px, 6vw, 44px); }
  .closing { padding: 100px 0 120px; }
  .closing-title { font-size: clamp(26px, 7vw, 44px); }
}

@media (max-width: 600px) {
  :root { --pad-x: 20px; }
  .nav { width: 100%; }
  .space-grid { gap: 14px; }
  .space-card { padding: 28px 22px; }
  .foot-nav { grid-template-columns: repeat(3, 1fr); }
  .aurora-traits { margin-top: 24px; }
  .aurora-traits li { gap: 10px; padding: 9px 10px; }
  .trait-name { width: 72px; flex-shrink: 0; font-size: 14px; }
  .trait-desc { font-size: 12.5px; line-height: 1.35; }

  .footer { padding: 36px 0 16px; }
  .footer-inner { gap: 24px; }
  .foot-brand .brand-mark { width: 44px; height: 44px; }
  .foot-name { font-size: 15px; }
  .foot-tag { font-size: 13px; }
  .foot-nav { gap: 16px 14px; }
  .foot-nav h5 { margin-bottom: 8px; font-size: 9.5px; letter-spacing: .14em; }
  .foot-nav a { font-size: 12.5px; padding: 2px 0; }
  .foot-base { margin-top: 24px; padding: 16px var(--pad-x) 4px; font-size: 11.5px; gap: 4px; }
  .footer-trademarks { margin-top: 14px; }
  .access-card { padding: 56px 20px 44px; }
  .access-logo { width: 64px; height: 64px; }
  .access-title { font-size: clamp(26px, 7vw, 44px); margin: 16px 0 12px; }
  .access-title::before { inset: -16px -24px; }
  .access-lede { font-size: 15px; margin-bottom: 28px; }
  .access-form { border-radius: 22px; flex-direction: column; padding: 10px; }
  .access-form input { width: 100%; }
  .access-form .btn { width: 100%; }
  .access-form .sib-input { width: 100%; min-width: 0; flex: 0 0 auto; }
  .access-form .signup-submit-block { width: 100%; }
  .access-form .signup-submit-block .glass-slot { width: 100%; }
  .closing-title { font-size: clamp(20px, 5.6vw, 32px); white-space: nowrap; }
  .hero { padding: 170px var(--pad-x) 110px; }
  .hero-title { font-size: clamp(40px, 12.4vw, 64px); letter-spacing: -0.03em; margin-bottom: 44px; }
  .hero-brand { font-size: clamp(34px, 9.5vw, 44px); margin-bottom: 14px; }
  .hero-meta .lbl { text-align: center; line-height: 1.35; }
  .hero-tagline { margin-bottom: 68px; }
  .hero-meta { gap: 8px; padding: 12px 18px; }
  .hero-meta > div { gap: 2px; }
  .hero-meta .num { font-size: 56px; }
  .hero-meta .lbl { font-size: 10.5px; }
  .section { padding: 72px 0; }
  .section-title { font-size: clamp(30px, 7vw, 44px); }
  .btn { padding: 12px 20px; font-size: 14px; }

  /* Aurora visual on narrow phones : stack caption below logo, don't cover it. clamp() keeps it generous on bigger phones (up to 380px) while still fitting small ones (down to 300px / 82vw). */
  .aurora-visual { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .aurora-cloud { position: relative; width: clamp(300px, 82vw, 380px); height: auto; aspect-ratio: 1; flex-shrink: 0; }
  .aurora-logo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: clamp(215px, 60vw, 270px); height: auto; aspect-ratio: 180 / 260; }
  .aurora-caption { position: static; transform: none; }

  .section-kicker { gap: 12px; margin-bottom: 20px; }
  .kicker-num { font-size: 32px; }
  .kicker-label { font-size: 10.5px; letter-spacing: 0.22em; }

  .memory-band-text { row-gap: 6px; }
  .memory-band-group { flex-basis: 100%; justify-content: center; }
}