/* ============================================================================
   RWA.LAT — a "high-end-visual-design" pass over the existing brand tokens.

   Two rule-sets are in play and they partly disagree; the resolution is noted
   inline where it matters:
     • RWA DESIGN.md  — black canvas, mint restricted, NO page-level gradients,
                        Inter + Space Grotesk, H5-first.
     • high-end-visual-design — double-bezel cards, nested CTAs, macro whitespace,
                        custom cubic-beziers, scroll choreography, and a BAN on
                        Inter/generic borders/gray drop shadows.

   We keep RWA's fonts and colour (an existing brand system outranks the skill's
   anti-default rule, which exists to kill *unchosen* defaults). We take the
   skill's structure + motion wholesale. Every gradient here is component-bounded,
   which is what RWA's DESIGN.md explicitly permits.
   ============================================================================ */

:root {
  --canvas:      #000000;
  --surface:     #050506;
  --surface-2:   #0a0a0c;
  --glass:       rgba(12, 16, 20, .62);
  --glass-strong:rgba(18, 23, 28, .76);
  --hairline:    rgba(255, 255, 255, .12);
  --hairline-soft: rgba(255, 255, 255, .07);
  --rim:         rgba(218, 239, 255, .58);
  --text:        #F5F7F8;
  --text-2:      #929AA6;
  --text-3:      #626A75;
  --mint:        #2FE6BF;
  --ice:         #C5E3F7;

  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* the house curve from high-end-visual-design §5 */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);          /* RWA rule: page stays pure black */
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }

/* ---------------------------------------------------------------------------
   1. FLOATING NAV — §5A. Detached glass pill, never an edge-to-edge sticky bar.
   --------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 20px;
  padding: 8px 8px 8px 20px;
  width: min(1240px, 100% - 48px);
  justify-content: space-between;
  border-radius: 9999px;
  background: var(--glass);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(28px) saturate(160%);          /* fixed element only — §6 */
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 60px -28px #000;
}
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; letter-spacing: -.01em;
}
.nav__mark {
  width: 22px; height: 22px; border-radius: 7px;
  background: conic-gradient(from 210deg, #fff, var(--ice), var(--mint), #061814, #fff);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
}
.nav__links { display: flex; gap: 26px; }
.nav__links a {
  color: var(--text-2); text-decoration: none; font-size: 13.5px; font-weight: 500;
  transition: color .6s var(--ease);
}
.nav__links a:hover { color: var(--text); }
@media (max-width: 860px) { .nav__links { display: none; } }

/* ---------------------------------------------------------------------------
   2. THE NESTED CTA — §4B. Trailing icon never sits naked: it lives in its own
   circular wrapper, flush with the button's right inner padding.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  border-radius: 9999px;
  padding: 8px 8px 8px 22px;
  font-weight: 600; font-size: 14.5px; line-height: 1;
  text-decoration: none; cursor: pointer; border: 0;
  transition: transform .6s var(--ease), background .6s var(--ease);
}
.btn__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9999px;
  transition: transform .6s var(--ease), background .6s var(--ease);
}
.btn:hover  .btn__icon { transform: translate3d(4px, -2px, 0) scale(1.06); }
.btn:active            { transform: scale(.98); }        /* physical press — §5B */

.btn--mint { background: var(--mint); color: #04120E; }
.btn--mint .btn__icon { background: rgba(0,0,0,.12); }
.btn--mint:hover { background: #3ff2cb; }

.btn--ghost { background: rgba(255,255,255,.05); color: var(--text); padding-left: 22px;
              border: 1px solid var(--hairline); }
.btn--ghost .btn__icon { background: rgba(255,255,255,.09); }
.btn--ghost:hover { background: rgba(255,255,255,.08); }

/* ---------------------------------------------------------------------------
   3. EYEBROW TAG — §4C. Microscopic pill before every major heading.
   --------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content;          /* without this it stretches inside any flex column */
  border-radius: 9999px; padding: 5px 12px;
  font-size: 10px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-2);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hairline-soft);
}
.eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint);
             box-shadow: 0 0 10px var(--mint); }

/* ---------------------------------------------------------------------------
   4. TYPE — §4. Massive display scale, macro whitespace.
   --------------------------------------------------------------------------- */
h1.display {
  font-family: var(--font-display);
  font-size: clamp(46px, 8.4vw, 116px);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.035em;
  margin: 30px 0 0;
}
h2.display {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 62px);
  font-weight: 600; line-height: 1.02;
  letter-spacing: -.03em;
  margin: 22px 0 0;
}
.lede { font-size: clamp(16px, 1.35vw, 19px); color: var(--text-2); margin: 26px 0 0; max-width: 52ch; }
.mono { font-variant-numeric: tabular-nums; font-family: var(--font-display); }

/* macro whitespace — §4C says double it. These are the py-24…py-40 equivalents. */
section { padding: clamp(96px, 12vw, 168px) 0; }

/* ---------------------------------------------------------------------------
   5. THE DOUBLE-BEZEL — §4A. Hardware, not a flat card: outer shell + inner core
   with a concentric (calculated) radius.
   --------------------------------------------------------------------------- */
.bezel {
  background: rgba(255,255,255,.028);
  border: 1px solid var(--hairline-soft);
  border-radius: 2rem;
  padding: 6px;
  transition: transform .7s var(--ease), background .7s var(--ease);
}
.bezel:hover { transform: translateY(-4px); background: rgba(255,255,255,.05); }
.bezel__core {
  position: relative;
  height: 100%;
  border-radius: calc(2rem - 6px);          /* concentric with the shell */
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.09);
  padding: 30px;
  overflow: hidden;
}
/* a bounded specular highlight — allowed by RWA DESIGN.md (glass refraction) */
.bezel__core::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 78% -10%, rgba(47,230,191,.13), transparent 58%);
}
.bezel__idx {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .16em;
  color: var(--text-3); text-transform: uppercase;
}
.bezel h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600;
            letter-spacing: -.02em; margin: 16px 0 8px; }
.bezel p  { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }

/* spec rows — fill a tall bezel card with hierarchy instead of empty space */
.spec { margin-top: 26px; border-top: 1px solid var(--hairline-soft); }
.spec__r { display: flex; justify-content: space-between; align-items: baseline;
           padding: 13px 0; border-bottom: 1px solid var(--hairline-soft); }
.spec__r span:first-child { font-size: 12.5px; color: var(--text-3); }
.spec__r span:last-child  { font-family: var(--font-display); font-variant-numeric: tabular-nums;
                            font-size: 14px; color: var(--ice); letter-spacing: -.01em; }

/* ASYMMETRICAL BENTO — §3B. Deliberately uneven spans, not a 3-up row. */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.bento > :nth-child(1) { grid-column: span 7; grid-row: span 2; }
.bento > :nth-child(2) { grid-column: span 5; }
.bento > :nth-child(3) { grid-column: span 5; }
.bento > :nth-child(4) { grid-column: span 5; }
.bento > :nth-child(5) { grid-column: span 7; }
/* §3 mobile collapse: everything to a single column, no overlaps */
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento > * { grid-column: span 1 !important; grid-row: auto !important; }
}

/* ---------------------------------------------------------------------------
   6. PINNED METRICS — the SCRUB section. Numbers read on tabular figures.
   --------------------------------------------------------------------------- */
.pin { position: relative; }
/* the flex column must not stretch its children either.
   100dvh, not 100vh — 100vh jumps on iOS Safari as the URL bar hides. */
.pin__stage { min-height: 100vh; min-height: 100dvh;
              display: flex; flex-direction: column;
              justify-content: center; align-items: flex-start; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 62px;
           align-self: stretch; width: 100%;
           border-radius: 2rem; overflow: hidden; background: var(--hairline-soft); }
@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  /* no pinned stage on mobile — let it be a normal block so nothing is clipped */
  .pin__stage { min-height: 0; justify-content: flex-start; }
}
.metric { background: var(--surface); padding: 34px 26px; }
.metric__n {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 4.4vw, 60px); font-weight: 600;
  letter-spacing: -.035em; line-height: 1;
  color: var(--text);
}
.metric__n em { font-style: normal; color: var(--mint); }
.metric__l { margin-top: 12px; font-size: 11px; letter-spacing: .16em;
             text-transform: uppercase; color: var(--text-3); }

/* ---------------------------------------------------------------------------
   7. HORIZONTAL RAIL — containerAnimation target. Must be ease:"none" in GSAP.
   --------------------------------------------------------------------------- */
.rail__viewport { overflow: hidden; }
.rail__track { display: flex; gap: 14px; will-change: transform; }

.asset {
  flex: 0 0 auto;
  width: min(400px, 78vw);
}
.asset__core { padding: 28px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; }
.asset__ticker { font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; color: var(--mint); }
.asset__name { font-family: var(--font-display); font-size: 27px; font-weight: 600;
               letter-spacing: -.025em; margin: 14px 0 auto; }
.asset__row { display: flex; justify-content: space-between; align-items: baseline;
              padding-top: 18px; border-top: 1px solid var(--hairline-soft); margin-top: 18px; }
.asset__y { font-family: var(--font-display); font-variant-numeric: tabular-nums;
            font-size: 22px; color: var(--ice); }
.asset__k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

/* MOBILE: the JS only builds the pinned rail tween on desktop, so below 900px
   this stays a plain overflow:hidden box — the later cards would be unreachable.
   Fall back to native touch scrolling with snap. Placed AFTER the base .asset
   rule on purpose: same specificity, so source order decides the winner. */
@media (max-width: 900px) {
  .rail__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch;
                    scroll-snap-type: x mandatory; padding-inline: 24px; }
  .rail__track { padding-right: 24px; }
  .rail .asset { width: min(320px, 82vw); scroll-snap-align: center; }
}

/* ---------------------------------------------------------------------------
   8. CLOSING
   --------------------------------------------------------------------------- */
.close { text-align: center; }
.close .display { margin-inline: auto; max-width: 20ch; }
.cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 42px; flex-wrap: wrap; }

.foot {
  border-top: 1px solid var(--hairline-soft);
  padding: 34px 0 60px; display: flex; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  color: var(--text-3); font-size: 12.5px;
}

/* ---------------------------------------------------------------------------
   9. SCROLL ENTRY — §5C. Elements never appear statically. The JS sets these
   initial states; if JS fails, `no-js` keeps everything visible.
   --------------------------------------------------------------------------- */
.js .rise { opacity: 0; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise { opacity: 1 !important; transform: none !important; }
  .bezel, .btn, .nav__links a { transition: none !important; }
}