/* ============================================================
   Moony — homepage design system v2
   Structural · near-monochrome · hairline grids · O-mark motif
   Signature lavender→peach gradient reserved for accent moments.
   ============================================================ */

:root {
  /* per-item accent family (icon tiles) */
  --c-violet: #7c4dde;  --c-violet-bg: #ece2ff;
  --c-peach:  #e07a4f;  --c-peach-bg:  #fbe7da;
  --c-blue:   #4a6fd0;  --c-blue-bg:   #e1e8fb;
  --c-green:  #1f8a5b;  --c-green-bg:  #d8f0e4;
  --c-magenta:#c2569a;  --c-magenta-bg:#fbe1f0;
  --c-gold:   #c2902b;  --c-gold-bg:   #f7ecd2;
  /* surfaces (warm, violet-tinted neutrals) */
  --w: #ffffff;
  --paper: #faf7ff;
  --ink-panel: #140d22;

  /* ink / text (warm near-black) */
  --ink: #17111f;
  --ink-2: #5b5369;
  --ink-3: #8d8599;
  --on-dark: #f4f1fa;
  --on-dark-2: #a9a1bb;

  /* hairlines (warm) */
  --line: rgba(23,17,31,.09);
  --line-2: rgba(23,17,31,.14);
  --line-d: rgba(255,255,255,.11);
  --line-d2: rgba(255,255,255,.2);

  /* signature gradient (used sparingly) */
  --lav: #d8c5fd;
  --peach: #fff2d9;
  --grad: linear-gradient(115deg, var(--lav) 0%, var(--peach) 100%); /* exact brand pair */
  --grad-vivid: linear-gradient(115deg, #8a5cf0 0%, #f0b479 100%); /* the brand hues deepened for text on light */
  --grad-text-dark: linear-gradient(100deg, #c9b4ff 0%, #f0a568 100%); /* the brand hues brightened for text on dark */
  --violet: #5a2ec4;
  --violet-deep: #47228f;
  --violet-tint: #f0e9fc;

  /* radii — soft, premium */
  --r: 20px; --r-s: 14px; --r-l: 28px;

  /* soft, violet-tinted depth (Circle/Apple elevation) */
  --sh-soft: 0 2px 8px rgba(23,17,31,.04), 0 14px 32px -14px rgba(90,46,196,.15);
  --sh-card: 0 1px 3px rgba(23,17,31,.05), 0 22px 46px -22px rgba(90,46,196,.2);
  --sh-lift: 0 8px 18px rgba(23,17,31,.06), 0 36px 70px -28px rgba(90,46,196,.32);
  --sh-panel: 0 50px 120px -34px rgba(52,26,104,.5);

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;

  --maxw: 1120px;
  --gutter: 26px;
  /* Fluid-scaling unit: behaves as 1vw up to the container width (1120px), then
     freezes. Above 1120px the layout AND type are fixed, so nothing rewraps as
     the window grows. Below it, everything still scales for tablet/mobile. */
  --vu: min(1vw, 11.2px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: 84px; background: #fff; }
body {
  margin: 0; background: linear-gradient(180deg, #efe7fc, #fff 760px) #fff; color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  letter-spacing: -0.011em; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--violet); text-decoration: none; transition: color .18s ease, opacity .18s ease; }
a:hover { color: var(--violet-deep); }
/* prose links: underline grows in from the left */
p a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 1px; transition: background-size .3s cubic-bezier(.16,.8,.24,1), color .18s ease; }
p a:hover { background-size: 100% 1px; }
h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -0.038em; line-height: 1.02; color: var(--ink); }
p { margin: 0; }
::selection { background: #e7d8fb; color: #3c1f8f; }
.sec-dark ::selection, .rdark ::selection, .rcurve ::selection { background: #7c4dde; color: #fff; }
:focus-visible { outline: 2px solid var(--violet, #6b3fd4); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .pill:focus-visible, a.cta:focus-visible { outline-offset: 2px; border-radius: 999px; }

.num { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }
.serif { }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* Sections breathe on whitespace + soft luminous surfaces (no hard rules). */
.sec { padding: clamp(88px, calc(10 * var(--vu)), 156px) 0; position: relative; }
/* boot choreography: page arrives composed once React mounts (moony-reveal.js adds .booted) */
#root { opacity: 0; transform: translateY(8px); transition: opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1); }
body.booted #root { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { #root { opacity: 1; transform: none; transition: none; } }
.sec-plain { border-top: none; }
.sec-paper { background: var(--paper); }
.sec-dark { background: var(--ink-panel); color: var(--on-dark); border-top-color: transparent; }

/* numbered / labelled section header — LEFT aligned, structural */
.shead { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: start; }
.shead-idx { display: flex; align-items: baseline; gap: 12px; padding-top: 8px; }
.shead-idx .n { font-family: var(--mono); font-size: 13px; color: var(--violet); letter-spacing: 0; }
.shead-idx .lbl { font-size: 12.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink); }
.shead-main { max-width: 760px; }
.shead h2 { font-size: clamp(31px, calc(4.3 * var(--vu)), 58px); }
.shead p { color: var(--ink-2); font-size: clamp(17px, calc(1.5 * var(--vu)), 20px); line-height: 1.45; margin-top: 20px; font-weight: 420; max-width: 640px; }
.shead-cta { margin-top: 24px; }
.shead--lg h2 { font-size: clamp(34px, calc(5 * var(--vu)), 68px); letter-spacing: -0.042em; }
@media (max-width: 560px) { .shead--lg h2 { font-size: clamp(29px, 8.6vw, 35px); } }
.sec-dark .shead-idx .lbl, .sec-dark .shead h2 { color: #fff; }
.sec-dark .shead-idx .n { color: #c9aef7; }
.sec-dark .shead p { color: var(--on-dark-2); }

@media (max-width: 820px) {
  .shead { grid-template-columns: 1fr; gap: 14px; }
  .shead-idx { padding-top: 0; }
}

/* eyebrow — mono, tracked, ring bullet (no color chips) */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font);
  font-size: 12.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink); }
.eyebrow .ring { display: none; }
.sec-dark .eyebrow, .sec-dark .eyebrow .ring { color: #fff; border-color: #fff; }

.grad-word { background: var(--grad-vivid); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.dim { color: var(--ink-3); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  border-radius: 12px; padding: 13px 22px; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s cubic-bezier(.16,.8,.24,1), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; white-space: nowrap; }
.btn svg { flex-shrink: 0; transition: transform .25s cubic-bezier(.16,.8,.24,1); }
.btn:hover svg { transform: translateX(2px); }
.btn--primary { background: var(--violet); color: #fff; box-shadow: 0 1px 2px rgba(52,26,104,.2), 0 10px 24px -8px rgba(90,46,196,.4); }
.btn--primary:hover { color: #fff; background: var(--violet-deep); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(52,26,104,.24), 0 16px 34px -10px rgba(90,46,196,.5); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
.btn--lg { padding: 15px 27px; font-size: 16px; }
.btn--sm { padding: 9px 17px; font-size: 13.5px; }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { color: var(--ink); transform: translateY(-2px); }
.btn--dark { background: transparent; color: #fff; border-color: var(--line-d2); }
.btn--dark:hover { color: #fff; border-color: #fff; transform: translateY(-2px); }

.txtlink { display: inline-flex; align-items: center; gap: 7px; font-weight: 540; font-size: 15px; color: var(--ink);
  border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.txtlink:hover { color: var(--ink); border-bottom-color: var(--ink); }
.txtlink svg { transition: transform .2s ease; }
.txtlink:hover svg { transform: translateX(3px); }
.sec-dark .txtlink { color: #fff; border-bottom-color: var(--line-d2); }
.sec-dark .txtlink:hover { border-bottom-color: #fff; }

/* app badges */
.badges { display: flex; gap: 11px; flex-wrap: wrap; }
.appbadge { display: inline-flex; align-items: center; gap: 11px; padding: 10px 18px 10px 15px; border-radius: 12px;
  background: var(--ink); color: #fff; transition: transform .2s ease; }
.appbadge:hover { color: #fff; transform: translateY(-2px); }
.appbadge span { display: flex; flex-direction: column; line-height: 1.1; }
.appbadge small { font-size: 10px; opacity: .8; }
.appbadge b { font-size: 16px; font-weight: 550; }

/* pill / tag */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 540; background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.pill .dot.live { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.16); }

/* ---------- soft rounded card grid (Circle/Apple elevation) ---------- */
.sheet { display: grid; gap: 18px; }
.sheet-cell { padding: 34px 30px 36px; position: relative; background: var(--w); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-soft); transition: transform .3s cubic-bezier(.16,.8,.24,1), box-shadow .3s ease, border-color .3s ease; }
.sheet-cell:hover { transform: translateY(-5px); box-shadow: var(--sh-lift); border-color: transparent; }
.sheet-cell .cn { position: absolute; top: 30px; right: 30px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.sheet-cell .ic { color: var(--violet); margin-bottom: 26px; }
.sheet-cell h3, .sheet-cell h4 { font-size: 19px; letter-spacing: -0.025em; }
.sheet-cell p { color: var(--ink-2); font-size: 14.6px; line-height: 1.55; margin-top: 10px; }
.sec-dark .sheet-cell { background: rgba(255,255,255,.045); border-color: var(--line-d); box-shadow: none; }
.sec-dark .sheet-cell:hover { background: rgba(255,255,255,.08); border-color: var(--line-d2); }
.sec-dark .sheet-cell .ic { color: #d6c4f5; }
.sec-dark .sheet-cell h3, .sec-dark .sheet-cell h4 { color: #fff; }
.sec-dark .sheet-cell p { color: var(--on-dark-2); }
.sec-dark .sheet-cell .cn { color: var(--on-dark-2); }

/* ============================================================
   NAV
   ============================================================ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.nav.stuck { background: rgba(255,255,255,.75); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 34px; height: 60px; }
.nav-brand img { height: 24px; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.nav-links a { color: var(--ink-2); font-size: 14.5px; font-weight: 460; padding: 8px 12px; border-radius: 8px; transition: color .18s ease, background .2s ease; }
.nav-links a:hover { color: var(--ink); background: rgba(124,77,222,.07); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-x { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 9px; color: var(--ink); border: 1px solid var(--line-2); transition: all .18s ease; }
.nav-x:hover { color: var(--ink); border-color: var(--ink); }
.nav-burger { display: none; background: none; border: none; color: var(--ink); cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-mobile { display: none; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav.open { background: #fff; border-bottom-color: var(--line); }
  .nav-mobile { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 99; display: flex; flex-direction: column; padding: 14px var(--gutter) 30px; overflow: auto; background: linear-gradient(180deg, #ffffff 0%, #f6f0fc 78%, #f3ebfc 100%); animation: navIn .28s cubic-bezier(.16,.8,.24,1); }
  @keyframes navIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  .nav-mobile-links { display: flex; flex-direction: column; }
  .nav-mobile-links a { display: flex; align-items: center; justify-content: space-between; padding: 19px 2px; font-size: 23px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav-mobile-links a svg { color: var(--ink-3); }
  .nav-mobile-foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 26px; }
  .nav-mobile-foot .btn { justify-content: center; padding: 15px; font-size: 16px; }
  .nav-mobile-soc { display: flex; justify-content: center; gap: 10px; }
  .nav-mobile-soc a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--line-2); color: var(--ink); background: #fff; }
}

/* ============================================================
   TICKER — thin mono strip
   ============================================================ */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: var(--w); }
.ticker-track { display: flex; width: max-content; animation: tick 44s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker-item { display: inline-flex; align-items: center; gap: 9px; padding: 13px 28px; font-size: 13px; color: var(--ink-2);
  white-space: nowrap; border-right: 1px solid var(--line); font-family: var(--mono); letter-spacing: -0.01em; }
.ticker-item b { color: var(--ink); font-weight: 500; }
.ticker-item i { color: var(--ink-3); font-style: normal; }
.ticker-live { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.ticker-live .ld { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.16); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust { padding: 40px 0; border-top: 1px solid var(--line); }
.trust-in { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 20px 44px; }
.trust-lbl { font-size: 15px; line-height: 1.4; letter-spacing: .085em; text-transform: uppercase; color: var(--ink); font-weight: 600; max-width: 340px; border-right: 1px solid var(--line-2); padding-right: 40px; }
.trust-row { display: flex; align-items: center; flex: 1; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap; }
.trust-item { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 540; font-size: 15px; filter: grayscale(1); opacity: .74; transition: opacity .2s ease; }
.trust-item:hover { opacity: 1; }
.trust-item img { height: 22px; }
.trust-item img[alt="Solana"] { height: 17px; }
@media (max-width: 620px) { .trust-lbl { border-right: none; padding-right: 0; max-width: none; } }
.cb-lockup { gap: 6px; }
.cb-word { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { position: relative; overflow: hidden; margin: 0 clamp(10px, 1.6vw, 26px) clamp(10px, 1.6vw, 26px); border-radius: clamp(28px, 3.4vw, 48px); background: radial-gradient(120% 90% at 50% -8%, rgba(124,77,222,.34), transparent 62%), radial-gradient(100% 55% at 14% 112%, rgba(232,150,90,.09), transparent 62%), var(--ink-panel); color: var(--on-dark); padding: clamp(72px, calc(8 * var(--vu)), 108px) 0 42px; }
.footer > .wrap-wide { position: relative; z-index: 1; }
.footer::before { content: ""; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 80%; height: 60%; background: radial-gradient(closest-side, rgba(216,197,253,.16), rgba(255,242,217,.06) 55%, transparent 78%); filter: blur(30px); pointer-events: none; }
/* top lede: brand statement + newsletter */
.foot-lede { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px 72px; align-items: stretch; padding-bottom: clamp(44px, calc(5 * var(--vu)), 66px); border-bottom: 1px solid var(--line-d); }
.foot-lede-l { align-self: center; }
.foot-statement { font-family: var(--font-head); font-size: clamp(34px, calc(4.6 * var(--vu)), 56px); line-height: 1.02; letter-spacing: -0.034em; color: #fff; }
.foot-statement em { font-style: normal; background: var(--grad-text-dark); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn--ghost-dark { color: #fff; border-color: rgba(216,197,253,.32); }
.btn--ghost-dark:hover { color: #fff; border-color: rgba(216,197,253,.6); background: rgba(216,197,253,.08); }
.foot-lede-l .foot-about { color: var(--on-dark-2); font-size: 14.5px; line-height: 1.6; max-width: 44ch; margin-top: 20px; }
.foot-brief { display: flex; flex-direction: column; gap: 7px; justify-content: center; padding: clamp(24px, calc(2.4 * var(--vu)), 32px); border-radius: 20px; background: linear-gradient(158deg, rgba(216,197,253,.12), rgba(255,242,217,.045)); border: 1px solid rgba(216,197,253,.16); transition: border-color .3s ease, transform .3s ease; }
.foot-brief:hover { border-color: rgba(216,197,253,.4); transform: translateY(-3px); }
.foot-brief-ey { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #d8c5fd; }
.foot-brief b { font-family: var(--font-head); font-size: clamp(20px, calc(2 * var(--vu)), 25px); letter-spacing: -0.025em; color: #fff; margin-top: 5px; }
.foot-brief-sub { font-size: 14px; line-height: 1.55; color: var(--on-dark-2); max-width: 40ch; }
.foot-brief-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: #fff; font-weight: 600; font-size: 14.5px; }
.foot-brief:hover .foot-brief-cta { gap: 11px; }
.foot-brief-cta svg { color: #d8c5fd; }
/* link grid */
.foot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; padding: clamp(44px, calc(5 * var(--vu)), 60px) 0 clamp(36px, calc(4 * var(--vu)), 48px); border-bottom: 1px solid var(--line-d); }
.footer-col h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #b3a1d9; font-weight: 500; margin-bottom: 15px; }
.footer-col a, .footer-col span { display: block; color: var(--on-dark); opacity: .8; font-size: 14px; padding: 6px 0; font-style: normal; }
.footer-col a { transition: opacity .2s ease, color .2s ease, transform .25s cubic-bezier(.16,.8,.24,1); }
.footer-col a:hover { color: #fff; opacity: 1; transform: translateX(3px); }
/* base row */
.foot-base { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding-top: 30px; }
.footer-soc { display: flex; gap: 10px; }
.footer-soc a { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-dark); border: 1px solid var(--line-d); transition: color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease; }
.footer-soc a:hover { color: #fff; border-color: rgba(216,197,253,.5); background: rgba(216,197,253,.08); transform: translateY(-2px); }
.foot-base-meta { display: flex; align-items: center; gap: 10px; color: var(--on-dark-2); font-size: 13px; }
.foot-base-meta a.foot-terms { color: var(--on-dark-2); text-decoration: none; border-bottom: 1px solid rgba(216,197,253,.3); }
.foot-base-meta a.foot-terms:hover { color: #fff; border-bottom-color: rgba(216,197,253,.7); }
.foot-dot { opacity: .45; }
.footer-legal { color: rgba(190,176,222,.5); font-size: 11.5px; line-height: 1.6; margin-top: 22px; max-width: 780px; }
.footer address { font-style: normal; }
/* finale: giant dimmed wordmark cropped by the container base */
.foot-finale { margin-top: clamp(40px, calc(4.6 * var(--vu)), 64px); margin-bottom: calc(-1 * clamp(8px, 1.4vw, 18px)); }
.foot-finale img { display: block; width: 100%; height: auto; opacity: .07;
  -webkit-mask-image: linear-gradient(180deg, #000 46%, rgba(0,0,0,.25) 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 46%, rgba(0,0,0,.25) 88%, transparent 100%); }
.foot-finale.reveal { transform: translateY(30px); transition-duration: 1.1s, 1.1s; }
.foot-finale.reveal.in { transform: none; }
@media (max-width: 900px) { .foot-lede { grid-template-columns: 1fr; gap: 34px; } .foot-grid { grid-template-columns: 1fr 1fr 1fr; gap: 30px 24px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-base { flex-direction: column-reverse; align-items: flex-start; gap: 22px; } }

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie { position: fixed; z-index: 200; bottom: 24px; left: 24px; max-width: 434px; animation: cookieUp .55s cubic-bezier(.16,.8,.24,1); }
@keyframes cookieUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.cookie-card { background: var(--w); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--sh-panel); padding: 30px 30px 26px; }
.cookie-h { font-size: 24px; letter-spacing: -0.03em; margin-top: 14px; }
.cookie-p { color: var(--ink-2); font-size: 14.6px; line-height: 1.58; margin-top: 12px; }
.cookie-actions { display: flex; gap: 10px; margin-top: 24px; }
.cookie-actions .btn { flex: 1 1 0; padding: 12px 8px; font-size: 14px; white-space: nowrap; }
@media (max-width: 520px) {
  .cookie { left: 14px; right: 14px; bottom: 14px; max-width: none; }
  .cookie-actions { flex-wrap: wrap; }
  .cookie-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .cookie { animation: none; } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1); }
.reveal.in { opacity: 1; transform: none; }
/* staggered child reveals: put .stagger on a grid/list inside (or on) a .reveal */
.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .65s cubic-bezier(.16,.8,.24,1), transform .65s cubic-bezier(.16,.8,.24,1); }
.reveal.in .stagger > *, .stagger.reveal.in > * { opacity: 1; transform: none; }
.stagger > *:nth-child(1) { transition-delay: .05s; } .stagger > *:nth-child(2) { transition-delay: .13s; } .stagger > *:nth-child(3) { transition-delay: .21s; } .stagger > *:nth-child(4) { transition-delay: .29s; } .stagger > *:nth-child(5) { transition-delay: .37s; } .stagger > *:nth-child(6) { transition-delay: .45s; } .stagger > *:nth-child(7) { transition-delay: .53s; } .stagger > *:nth-child(8) { transition-delay: .61s; }
@media (prefers-reduced-motion: reduce) { .stagger > * { opacity: 1; transform: none; transition: none; } }
/* panel entrance: big rounded containers arrive with scale + longer ease */
.reveal--panel { transform: translateY(34px) scale(.984); transform-origin: 50% 100%; transition-duration: 1.05s, 1.05s; will-change: opacity, transform; }
.reveal--panel.in { transform: none; }
.reveal[data-d="1"] { transition-delay: .06s; }
.reveal[data-d="2"] { transition-delay: .12s; }
.reveal[data-d="3"] { transition-delay: .18s; }
.reveal[data-d="4"] { transition-delay: .24s; }
.reveal[data-d="5"] { transition-delay: .3s; }
@media (max-width: 560px) {
  /* tighter vertical rhythm: desktop sections are far too tall on phone */
  .sec { padding: 64px 0; }
  .shead h2 { font-size: clamp(27px, 8vw, 32px); }
  .shead p { font-size: 16px; margin-top: 14px; }
  .pill { font-size: 11.5px; padding: 6px 12px 6px 11px; }
  /* cookie: bottom sheet */
  .cookie { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  .cookie-card { padding: 22px 20px 18px; border-radius: 18px; }
  .cookie-h { font-size: 19px; margin-top: 10px; }
  .cookie-p { font-size: 13.5px; }
  .cookie-actions { flex-wrap: wrap; }
  .cookie-actions .btn--primary { flex: 1 1 100%; justify-content: center; order: -1; }
  .sheet-cell { padding: 26px 22px 28px; }
  .btn { padding: 12px 18px; }
  .btn--lg { padding: 14px 20px; }
  .foot-grid a { display: inline-block; padding: 4px 0; }
  .foot-ctas .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }
  /* swipe carousels: any .msnap grid becomes an edge-bleed scroll-snap rail */
  .msnap { display: grid; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: min(80%, 300px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 20px; scrollbar-width: none; }
  .msnap::-webkit-scrollbar { display: none; }
  .msnap > * { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* footer CTAs: stack full-width on phones (side-by-side they read as one control) */
@media (max-width: 700px) {
  .foot-ctas { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .foot-ctas .btn { flex: none; width: 100%; justify-content: center; min-height: 50px; font-size: 15.5px; }
  .btn--ghost-dark { border-color: rgba(216,197,253,.45); }
  /* footer link columns: one link per row with real separation */
  .foot-grid { gap: 26px 20px; }
  .foot-grid a, .footer-col span { display: block; width: 100%; padding: 8px 0; font-size: 14.5px; }
  .footer-col h4 { margin-bottom: 8px; }
  /* footer + panels share a wider inset on phones */
  .footer { margin: 0 14px 14px; }
}

/* phones: roomier gutter so panels and footer sit closer to the edge */
@media (max-width: 700px) { :root { --gutter: 14px; } }

/* footer statement: hold one line down to the narrowest phones */
@media (max-width: 700px) {
  .foot-statement { font-size: clamp(19px, 6.4vw, 27px); line-height: 1.16; letter-spacing: -.042em; white-space: nowrap; }
}
@media (max-width: 340px) { .foot-statement { font-size: 18px; } }

/* footer base row: copyright + legal links only, at every breakpoint */
.foot-base-meta > span:nth-of-type(2), .foot-base-meta > span:nth-of-type(3),
.foot-base-meta > span:nth-of-type(4), .foot-base-meta > span:nth-of-type(5) { display: none; }
/* footer statement holds one line at every width */
.foot-statement { white-space: nowrap; font-size: clamp(18px, 4.4vw, 56px); }