/* ═══════════════════════════════════════════════════════════════
   page.css — LI.FI Shared Page-Level Styles
   ───────────────────────────────────────────────────────────────
   Load AFTER styles.css on every page.

   Contains: hero, carousels, stats, feature cards, CTAs, code
             block, 3-D visual, coins stage, testimonials,
             per-element light-theme overrides, and responsive
             breakpoints for page content.

   Does NOT contain: design tokens, reset, html/body, navbar,
   mobile menu, buttons, section primitives, footer, or theme
   toggle — those live in styles.css.

   Section map:
   1.  Canvas grid background
   2.  Animations / Keyframes
   3.  Hero section (shared)
   4.  Partners carousel
   5.  Stats bar (index.html)
   6.  Features section (3-col)
   7.  RWA Feature grid (2-col variant)
   8.  How it works
   9.  Integration / Code block
   10. Enterprise section (also used for rwa Use Cases)
   11. Section divider
   12. Chains marquee
   13. 3-D Token visual (index.html)
   14. Testimonials
   15. Coins stage (rwa.html)
   16. Logos band (rwa.html trusted-by)
   17. CTA section (shared)
   18. RWA badge
   19. Trust pills
   20. Light theme per-element overrides
   21. Responsive breakpoints
   ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════
   0. ANNOUNCEMENT BAR
   ══════════════════════════════════════════ */
.announcement-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1001; /* above navbar */
  background: linear-gradient(90deg, oklch(73% 0.16 308) 0%, oklch(68% 0.14 260) 50%, var(--accent-secondary) 100%);
  color: oklch(14% 0.015 264);
  text-align: center;
  padding: var(--space-8) var(--space-24);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal);
  line-height: var(--lh-sm);
}
.announcement-bar a {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  font-weight: var(--fw-bold); opacity: 0.85;
}
.announcement-bar a:hover { opacity: 1; }

/* Push navbar & hero down when announcement bar is present.
   Announcement bar is a marketing-surface primitive, so this targets the
   .navbar-site variant specifically (docs surface doesn't ship the bar). */
body:has(.announcement-bar) .navbar-site  { top: 38px; }
body:has(.announcement-bar) .hero-inner   { padding-top: 200px; }





/* ══════════════════════════════════════════
   1. PARTICLE CANVAS
   ══════════════════════════════════════════ */
#particleCanvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: -1; pointer-events: none;
  display: block;
}


/* ══════════════════════════════════════════
   2. ANIMATIONS / KEYFRAMES
   ══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollBounce {
  0%, 100% { top: 6px; opacity: 1; }
  50%       { top: 22px; opacity: 0.2; }
}
@keyframes orbitSpin1 { to { transform: rotate(360deg); } }
@keyframes orbitSpin2 { to { transform: rotate(-360deg); } }
@keyframes orbitSpin3 { to { transform: rotate(360deg); } }
@keyframes dashSpin { to { transform: rotate(360deg); } }
@keyframes partnerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes typeLine {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes codeScrollUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes chainScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes ringPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.05; }
  50%       { transform: translate(-50%, -50%) scale(1.1); opacity: 0.1; }
}
@keyframes stackFloat {
  0%, 100% { transform: rotateX(15deg) rotateY(-8deg); }
  25%       { transform: rotateX(15deg) rotateY(-3deg); }
  50%       { transform: rotateX(15deg) rotateY(8deg); }
  75%       { transform: rotateX(15deg) rotateY(3deg); }
}
@keyframes coinFloat {
  0%, 100% { transform: translateY(0px) rotate(var(--coin-r)); }
  50%       { transform: translateY(-12px) rotate(var(--coin-r)); }
}
@keyframes coinSpin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}


/* ══════════════════════════════════════════
   3. HERO SECTION (shared)
   ══════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden; z-index: 2;
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  justify-content: space-between; gap: 40px;
  max-width: 1440px; margin: 0 auto;
  padding: 192px 64px 192px; width: 100%;
}
/* Hero content */
.hero-content {
  position: relative; z-index: 2;
  flex: 1; max-width: 680px;
}

/* Hero 3-D Globe — absolutely pinned to bottom-right, larger than hero viewport for dramatic clip */
.hero-globe-wrap {
  position: absolute; z-index: 1;
  bottom: -120px; right: -90px;
  width: 992px; height: 992px;
  pointer-events: auto;
}
#globeCanvas {
  width: 100%; height: 100%;
  display: block;
  cursor: grab;
}
#globeCanvas:active { cursor: grabbing; }
/* Hero title — line-height literal (1.1) instead of `--lh-display`.
   `--lh-display` resolves to 4rem (64px); paired with the hero's 80px
   font-size that gives a 0.8 ratio, which collapses lines into each
   other (descenders on "g", "y" overlap the next line's ascenders,
   and "digital" visibly tucks under "market access"). 1.1 gives a
   true display cadence — tight, but with the single pixel of leading
   the gradient-text span also needs so `-webkit-background-clip: text`
   doesn't clip the descender bounding box. Same fix shipped on
   `.header-title` in doc-shared.css; this one is the marketing twin. */
.hero h1 {
  font-size: clamp(var(--text-h1), 6vw, var(--text-hero)); font-weight: var(--fw-extrabold);
  line-height: 1.1; letter-spacing: var(--tracking-tighter); margin-bottom: var(--space-24);
  opacity: 0; animation: fadeUp 1s 0.4s forwards;
}
.hero h1 .highlight {
  /* Rich multi-hue shimmer (blue → mid → teal → cyan → tertiary tint) */
  background: linear-gradient(var(--accent-primary), var(--accent-primary)); /* TEMP solid — gradient text paused */
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  /* Heavy weight + negative tracking clips the final glyph's right bearing
     when the background is clipped to the text box. A small inline padding
     extends the box past the last character so nothing is cut off. The
     vertical pair accommodates descender clipping when the gradient
     renders on letters like "g" (→ "digital assets"). */
  display: inline-block;
  padding: 0.04em 0.08em 0.04em 0;
  line-height: inherit;
}
.hero p {
  font-size: var(--text-body-xl); color: var(--text-muted);
  max-width: 560px; line-height: var(--lh-body-xl); margin: 0 0 var(--space-48);
  opacity: 0; animation: fadeUp 1s 0.6s forwards;
}
.hero-buttons {
  display: flex; gap: 16px; flex-wrap: wrap;
  opacity: 0; animation: fadeUp 1s 0.8s forwards;
}
/* Hero CTA — inherits standard btn styles from styles.css */

/* Scroll cue */
.hero-scroll {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; animation: fadeUp 1s 1.4s forwards;
}
.hero-scroll span { font-size: var(--text-caption); color: var(--text-faint); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.scroll-indicator { width: var(--space-24); height: var(--space-40); border: 1.5px solid var(--border-subtle); border-radius: var(--space-12); position: relative; }
.scroll-indicator::after {
  content: ''; width: var(--space-4); height: var(--space-8); background: var(--accent-primary);
  border-radius: var(--space-4); position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%); animation: scrollBounce 2.5s infinite;
}

/* Orbit rings (on 3D token visual) */
.orbit-ring-1 { animation: orbitSpin1 50s linear infinite; transform-origin: 320px 320px; }
.orbit-ring-2 { animation: orbitSpin2 70s linear infinite; transform-origin: 320px 320px; }
.orbit-ring-3 { animation: orbitSpin3 90s linear infinite; transform-origin: 320px 320px; }


/* ══════════════════════════════════════════
   4. PARTNERS CAROUSEL
   ══════════════════════════════════════════ */
.partners-carousel {
  position: relative; z-index: 2; padding: 80px 0; overflow: hidden;
  background: color-mix(in oklch, var(--accent-primary) 4%, transparent);
  border-top: 1px solid color-mix(in oklch, var(--accent-primary) 6%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--accent-primary) 6%, transparent);
}
.partners-label {
  text-align: center; font-size: var(--text-sm); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-faint);
  font-weight: var(--fw-semibold); margin-bottom: var(--space-48);
}
.partners-track-wrapper {
  position: relative; width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.partners-track {
  display: flex; align-items: center; gap: var(--space-64);
  width: max-content; animation: partnerScroll 90s linear infinite;
}
.partners-track:hover { animation-play-state: paused; }
.partner-logo {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  /* Uniform bounding box — every partner occupies the same visual space so
     wordmarks and logomarks read at consistent scale regardless of native aspect. */
  height: 56px; width: 180px;
  opacity: 0.85;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}
.partner-logo:hover { opacity: 1; transform: scale(1.08); }
/* Images scale proportionally to fit within the bounding box */
.partner-logo img,
.partner-logo svg {
  max-height: 36px; max-width: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
}

/* Dark/light logo variants — show the one matching the current theme.
   Must match .partner-logo img specificity (0,2,1) to override display:block. */
.partner-logo img.partner-logo-light { display: none; }
[data-theme="light"] .partner-logo img.partner-logo-dark  { display: none; }
[data-theme="light"] .partner-logo img.partner-logo-light { display: block; }


/* ══════════════════════════════════════════
   5. STATS BAR (index.html)
   ══════════════════════════════════════════ */
.stats-bar {
  background: transparent; padding: 240px 40px 280px;
  position: relative; z-index: 2;
}
.stats-header { text-align: center; max-width: 720px; margin: 0 auto 80px; }
.stats-header h2 {
  font-size: clamp(var(--text-h2), 5vw, var(--text-display)); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-snug); line-height: var(--lh-h1); margin-bottom: 24px;
  background: linear-gradient(var(--text-primary), var(--text-primary)); /* TEMP solid — gradient text paused */
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stats-header p { font-size: var(--text-body); line-height: var(--lh-body); color: var(--text-muted); }
/* Stats moved to .stat-tile in styles.css (May 2026 — .stat-bar removed). */


/* ══════════════════════════════════════════
   6. FEATURES SECTION (3-col grid)
   ══════════════════════════════════════════ */
.features {
  background: transparent; color: var(--text-primary);
  padding: 140px 40px; position: relative; overflow: hidden; z-index: 2;
}
.features-header { text-align: center; max-width: 648px; margin: 0 auto var(--space-80); }
.features-header h2 {
  font-size: clamp(var(--text-h2), 4vw, var(--text-display)); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-display); margin-bottom: 24px; color: var(--text-primary);
}
.features-header p { color: var(--text-muted); font-size: var(--text-body); line-height: var(--lh-body); }
.features-grid { max-width: 1200px; margin: 0 auto; }

/* Features grid card rules now live in styles.css under `.tile` —
   this file keeps only page-scoped tweaks (margin, max-width). The
   `.feature-card` / `.enterprise-card` / `.features-grid` / `.feature-grid`
   classes are compat-aliased to the new `.tile` family. */


/* ══════════════════════════════════════════
   7. RWA FEATURE GRID (2-col variant)
   ══════════════════════════════════════════ */
.feature-grid { margin-top: var(--space-48); }


/* ══════════════════════════════════════════
   8. HOW IT WORKS
   ══════════════════════════════════════════ */
.how-it-works { background: transparent; padding: 140px 40px; position: relative; overflow: hidden; z-index: 2; }
.how-header { text-align: center; max-width: 800px; margin: 0 auto 80px; }
.how-header h2 {
  font-size: clamp(var(--text-h2), 4vw, var(--text-display)); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-display); margin-bottom: var(--space-16); color: var(--text-primary);
}
.how-header p { color: var(--text-muted); font-size: var(--text-body); line-height: var(--lh-body); }
.how-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-40); max-width: 1200px; margin: 0 auto; align-items: start;
}
.how-step {
  display: flex; flex-direction: column; gap: var(--stack-md);
  align-items: flex-start; position: relative; opacity: 0; z-index: 1;
}
.how-step.visible { animation: fadeUp 0.8s forwards; }
.step-number {
  width: var(--space-64); height: var(--space-64); min-width: var(--space-64); border-radius: var(--space-12);
  background: color-mix(in oklch, var(--accent-primary) 6%, transparent); border: 1px solid color-mix(in oklch, var(--accent-primary) 15%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-body); font-weight: var(--fw-extrabold); color: var(--accent-primary);
}
.step-content h3 { font-size: var(--text-h3); font-weight: var(--fw-bold); margin-bottom: var(--space-8); letter-spacing: var(--tracking-snug); color: var(--text-primary); }
.step-content p  { color: var(--text-muted); line-height: var(--lh-body); font-size: var(--text-sm); }


/* ══════════════════════════════════════════
   9. INTEGRATION / CODE BLOCK
   ══════════════════════════════════════════ */
.integration {
  background: color-mix(in oklch, var(--accent-primary) 4%, transparent);
  border-top: 1px solid color-mix(in oklch, var(--accent-primary) 6%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--accent-primary) 6%, transparent);
  color: var(--text-primary); padding: 140px 40px;
  position: relative; overflow: hidden; z-index: 2;
}
.integration-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.integration-text h2 { font-size: clamp(var(--text-h2), 4vw, var(--text-h1)); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); line-height: var(--lh-display); margin-bottom: 24px; }
.integration-text p  { font-size: var(--text-body); line-height: var(--lh-body); color: var(--text-muted); margin-bottom: 40px; }
.integration-features { margin-top: var(--space-24); display: flex; flex-direction: column; gap: var(--cluster-sm); }
.int-feature { display: flex; align-items: center; gap: var(--cluster-sm); font-size: var(--text-sm); color: var(--text-secondary); }
.integration-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; /* hairline rule between cards — read as a separator, not spacing */
  max-width: 1200px; margin: var(--space-64) auto 0;
}
.integration-card {
  background: color-mix(in oklch, var(--accent-primary) 3%, transparent); border: 1px solid color-mix(in oklch, var(--accent-primary) 6%, transparent);
  padding: 40px 32px; position: relative; overflow: hidden;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.8s, transform 0.8s;
  opacity: 0; transform: translateY(30px);
}
.integration-card:first-child { border-radius: 20px 0 0 20px; }
.integration-card:last-child  { border-radius: 0 20px 20px 0; }
.integration-card.visible { animation: fadeUp 0.8s forwards; }
/* Hover — clean accent outline */
.integration-card:hover {
  background: color-mix(in oklch, var(--accent-primary) 6%, transparent);
  border-color: var(--accent-primary-mid);
}
/* Active — 2 px accent ring */
.integration-card:active {
  background: color-mix(in oklch, var(--accent-primary) 9%, transparent);
  border-color: var(--accent-primary-mid);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent-primary) 28%, transparent);
}
.integration-card h3 { font-size: var(--text-body); font-weight: var(--fw-bold); margin-bottom: var(--space-8); letter-spacing: var(--tracking-snug); }
.integration-card p  { color: var(--text-muted); line-height: var(--lh-body); font-size: var(--text-sm); }

/* Code block */
.code-block {
  background: rgba(11, 13, 18, 0.9); border-radius: var(--space-12);
  font-family: var(--font-mono, 'Geist Mono', monospace);
  font-size: var(--text-caption); line-height: var(--lh-body); color: var(--text-primary);
  border: 1px solid color-mix(in oklch, var(--accent-primary) 10%, transparent);
  overflow: hidden; position: relative; height: 400px;
}
.code-block::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(to bottom, rgba(5,10,24,1) 0%, rgba(5,10,24,0.98) 70%, rgba(5,10,24,0.95) 100%);
  border-bottom: 1px solid color-mix(in oklch, var(--accent-primary) 8%, transparent); z-index: 4;
}
.code-block::after { content: '● ● ●'; position: absolute; top: 12px; left: 16px; font-size: var(--text-caption); letter-spacing: var(--tracking-wide); color: var(--border-subtle); z-index: 5; }
.code-scroll-inner { padding: var(--space-48) var(--space-32) var(--space-64); animation: codeScrollUp 25s linear infinite; will-change: transform; }
.code-block:hover .code-scroll-inner { animation-play-state: paused; }
.code-block .code-fade-top, .code-block .code-fade-bottom { position: absolute; left: 0; right: 0; height: 40px; pointer-events: none; z-index: 3; }
.code-block .code-fade-top    { top: 40px;  background: linear-gradient(to bottom, rgba(5,10,24,1), transparent); }
.code-block .code-fade-bottom { bottom: 0;  background: linear-gradient(to top,   rgba(5,10,24,1), transparent); }
.code-line    { opacity: 0; animation: typeLine 0.6s forwards; white-space: pre; }
.code-keyword { color: var(--accent-tertiary); }
.code-string  { color: #67e8f9; }
.code-func    { color: var(--text-primary); font-weight: var(--fw-semibold); }
.code-comment { color: var(--text-faint); font-style: italic; }
.code-type    { color: #a78bfa; }
.code-prop    { color: #93c5fd; }
.code-number  { color: #fbbf24; }
.code-bracket { color: var(--text-muted); }
.code-tag     { color: var(--accent-tertiary); }
.code-attr    { color: #93c5fd; }
.code-punct   { color: var(--text-secondary); }


/* ══════════════════════════════════════════
   10. ENTERPRISE SECTION
       (also used for rwa.html Use Cases grid)
   ══════════════════════════════════════════ */
.enterprise-section { padding: 120px 40px; position: relative; z-index: 2; }
.enterprise-inner   { max-width: 1200px; margin: 0 auto; }
.enterprise-header  { text-align: center; margin-bottom: 64px; }
.enterprise-header h2 {
  font-size: clamp(var(--text-h2), 4vw, var(--text-display)); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-display); margin-bottom: 16px; color: var(--text-primary);
}
/* Enterprise cards — all styles now live on the shared .tile family
   in styles.css. `.enterprise-card` / `.enterprise-card-icon` /
   `.enterprise-grid` are compat-aliased there. Page-scoped per-icon
   accent tints (.ent-icon-*) stay below for the existing legacy HTML. */
.ent-icon-support  { --tile-accent: var(--accent-tertiary); background: color-mix(in oklch, var(--accent-tertiary) 6%, transparent); border-color: color-mix(in oklch, var(--accent-tertiary) 10%, transparent); }
.ent-icon-releases { --tile-accent: var(--accent-primary);   background: color-mix(in oklch, var(--accent-primary) 8%, transparent);  border-color: color-mix(in oklch, var(--accent-primary) 12%, transparent); }
.ent-icon-scale    { --tile-accent: var(--accent-secondary); background: color-mix(in oklch, var(--accent-secondary) 6%, transparent); border-color: color-mix(in oklch, var(--accent-secondary) 10%, transparent); }
.ent-icon-analytics{ --tile-accent: var(--accent-primary);   background: color-mix(in oklch, var(--accent-primary) 8%, transparent);  border-color: color-mix(in oklch, var(--accent-primary) 12%, transparent); }


/* ══════════════════════════════════════════
   11. SECTION DIVIDER
   ══════════════════════════════════════════ */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--accent-primary) 15%, transparent), transparent);
  margin: var(--space-80) 0; position: relative; z-index: 2;
}


/* ══════════════════════════════════════════
   12. CHAINS MARQUEE
   ══════════════════════════════════════════
   Real chain avatars via the canonical `.avatar` component (see
   design-system/index.html#avatar). Each row is
   `<img class="avatar avatar--lg avatar--rounded">` + chain name —
   no bespoke wrapper. The old hand-rolled `.chain-icon` box was
   retired when the site adopted the pre-plated SVG library.
*/
.chains-section { padding: var(--pad-section-y-lg) var(--space-40); position: relative; z-index: 2; }
.chains-header  { text-align: center; margin-bottom: var(--space-64); }
.chains-header h2 {
  font-size: clamp(var(--text-h2), 4vw, var(--text-display)); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight); line-height: 1.18; margin-bottom: var(--space-16); color: var(--text-primary);
}
/* Edge-fade mask — same formula as `.partners-track-wrapper` above.
   Keeps the infinite marquee from hard-cutting at the viewport edge. */
.chains-marquee {
  width: 100%; overflow: hidden; position: relative; z-index: 1;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.chains-marquee-track {
  display: flex; gap: 32px; width: max-content;
  animation: chainScroll 120s linear infinite;
}
.chains-marquee-track:hover { animation-play-state: paused; }
.chain-item {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
}
.chain-item .avatar { --avatar-size: 48px; }
.chain-name {
  font-size: var(--text-body); font-weight: var(--fw-semibold);
  color: var(--text-primary); white-space: nowrap;
  letter-spacing: var(--tracking-snug);
}


/* ══════════════════════════════════════════
   13. 3-D TOKEN VISUAL (index.html)
   ══════════════════════════════════════════ */
.token-3d-visual {
  position: relative; width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; perspective: 1200px;
}
.logo-stack { position: relative; width: 320px; height: 320px; transform-style: preserve-3d; animation: stackFloat 12s ease-in-out infinite; }
.logo-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 32px; border: 1px solid color-mix(in oklch, var(--accent-primary) 12%, transparent); }
.logo-layer svg { width: 60%; height: 60%; }
.logo-layer-0 { background: color-mix(in oklch, var(--accent-primary) 3%, transparent); transform: translateZ(0px);   border-color: color-mix(in oklch, var(--accent-primary) 6%, transparent); }
.logo-layer-1 { background: color-mix(in oklch, var(--accent-primary) 4%, transparent); transform: translateZ(30px)  scale(0.92); border-color: color-mix(in oklch, var(--accent-primary) 10%, transparent); }
.logo-layer-2 { background: color-mix(in oklch, var(--accent-primary) 6%, transparent); transform: translateZ(60px)  scale(0.84); border-color: color-mix(in oklch, var(--accent-primary) 15%, transparent); }
.logo-layer-3 { background: color-mix(in oklch, var(--accent-primary) 8%, transparent); transform: translateZ(90px)  scale(0.76); border-color: color-mix(in oklch, var(--accent-primary) 20%, transparent); box-shadow: 0 0 60px color-mix(in oklch, var(--accent-primary) 15%, transparent); }
.logo-layer-4 { background: color-mix(in oklch, var(--accent-primary) 12%, transparent); transform: translateZ(120px) scale(0.68); border-color: color-mix(in oklch, var(--accent-primary) 30%, transparent); box-shadow: 0 0 80px color-mix(in oklch, var(--accent-primary) 20%, transparent); }
.stack-ring { position: absolute; border-radius: 50%; border: 1px solid; pointer-events: none; }
.stack-ring-1 { width: 420px; height: 420px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-color: color-mix(in oklch, var(--accent-primary) 6%, transparent); animation: ringPulse 6s ease-in-out infinite; }
.stack-ring-2 { width: 500px; height: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-color: color-mix(in oklch, var(--accent-secondary) 4%, transparent); animation: ringPulse 8s ease-in-out infinite reverse; }
.stack-ring-3 { width: 360px; height: 360px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-color: color-mix(in oklch, var(--accent-primary) 8%, transparent); border-style: dashed; border-width: 1px; animation: dashSpin 30s linear infinite, ringPulse 10s ease-in-out infinite; }


/* ══════════════════════════════════════════
   14. TESTIMONIALS
   ══════════════════════════════════════════ */
.testimonials-section { padding: var(--pad-section-y-lg) 0 var(--space-96); position: relative; z-index: 2; }
.testimonials-section .section-header { text-align: center; margin-bottom: var(--space-64); padding: 0 var(--space-40); }

/* ── Carousel viewport ── */
.tc-carousel {
  overflow: hidden;
  position: relative;
}
.tc-track {
  display: flex;
  gap: 24px;
  /* JS sets transform: translateX(...) */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  padding: var(--space-16) 0 var(--space-24);
  /* Prevent layout shift before JS runs */
  transform: translateX(0);
}

/* ── Card ── */
.testimonial-card {
  flex-shrink: 0;
  /* width set dynamically by JS; fallback: */
  width: 560px;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: var(--space-40) var(--space-40) var(--space-32);
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, background 0.4s ease,
              opacity 0.4s ease, transform 0.4s ease;
  opacity: 0.4;
  transform: scale(0.97);
}
.testimonial-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in oklch, var(--accent-primary) 7%, transparent) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* Active card */
.testimonial-card.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255,255,255,0.12);
}
.testimonial-card.is-active::before { opacity: 1; }

/* ── Tag ── */
.tc-top { margin-bottom: 24px; }
.tc-tag {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--accent-secondary);
  background: color-mix(in oklch, var(--accent-secondary) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent-secondary) 22%, transparent);
  border-radius: var(--space-8);
  padding: var(--space-4) var(--space-8);
}

/* ── Quote ── */
.tc-quote {
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-primary);
  margin: 0 0 var(--space-32);
  padding: 0;
  border: none;
  flex: 1;
  position: relative;
}
.tc-quote::before {
  content: '\201C';
  position: absolute;
  top: -32px;
  left: -8px;
  font-size: var(--text-hero);
  line-height: 1;
  color: var(--accent-primary-mid);
  opacity: 0.2;
  font-family: Georgia, serif;
  pointer-events: none;
}

/* ── Footer: logo + attribution ── */
.tc-footer {
  display: flex;
  align-items: center;
  gap: var(--cluster-md);
  padding-top: var(--space-24);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.tc-logo {
  flex-shrink: 0;
  height: var(--space-20);
  width: auto;
  color: rgba(255,255,255,0.5);
}
.tc-logo--ledger     { height: var(--space-20); width: 88px; }
.tc-logo--blockchain { height: var(--space-20); width: 140px; }
.tc-logo--infinex    { height: var(--space-20); width: 88px; }
.tc-attribution  { display: flex; flex-direction: column; gap: var(--space-4); }
.tc-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.tc-role { font-size: var(--text-caption); color: var(--text-muted); }

/* ── Controls: arrows + dots ── */
.tc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-40);
}

/* tc-arrow extends .btn-primary.btn-outline.btn-icon.btn-circle (see index.html) */
.tc-arrow svg { stroke: currentColor; fill: none; }
.tc-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.tc-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tc-dot {
  width: var(--space-8); height: var(--space-8);
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.25s, width 0.25s;
  flex-shrink: 0;
}
.tc-dot.is-active {
  background: var(--accent-secondary);
  width: var(--space-24);
  border-radius: var(--space-4);
  transform: none;
}
.tc-dot:hover:not(.is-active) {
  background: rgba(255,255,255,0.45);
  transform: scale(1.3);
}


/* ══════════════════════════════════════════
   15. COINS STAGE (rwa.html)
   ══════════════════════════════════════════ */
.hero-visual {
  flex: 1; display: flex; align-items: center;
  justify-content: center; position: relative; min-width: 0;
}
.coin {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
}
.coin > .coin-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.coin > .coin-logo { position: absolute; inset: 22%; width: 56%; height: 56%; object-fit: contain; }


/* ══════════════════════════════════════════
   16. LOGOS BAND — rwa.html Trusted By
   ══════════════════════════════════════════ */
.logos-band {
  background: rgba(8,14,36,0.6);
  border: 1px solid color-mix(in oklch, var(--accent-primary) 12%, transparent);
  border-radius: 16px; padding: 48px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-bottom: 48px;
}
.logo-item { display: flex; flex-direction: column; align-items: center; gap: var(--cluster-sm); }
.logo-img  {
  width: 64px; height: 64px; object-fit: contain;
  filter: grayscale(1) brightness(1.8) invert(1); opacity: 0.5;
  transition: filter 0.3s, opacity 0.3s;
}
.logo-item:hover .logo-img { filter: grayscale(0) brightness(1); opacity: 1; }
.logo-name { font-size: var(--text-caption); font-weight: var(--fw-medium); color: var(--text-faint); text-align: center; white-space: nowrap; letter-spacing: var(--tracking-loose); }


/* ══════════════════════════════════════════
   17. CTA SECTION (shared)
   ══════════════════════════════════════════ */
.cta-section {
  background: transparent; padding: 160px 40px;
  text-align: center; position: relative; overflow: hidden; z-index: 2;
}
.cta-section::before {
  content: ''; position: absolute;
  width: 700px; height: 700px; border-radius: 50%;
  background: var(--accent-primary); filter: blur(200px); opacity: 0.08;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.cta-inner {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto;
}
.cta-inner h2 {
  font-size: clamp(var(--text-h2), 5vw, var(--text-display)); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-display); margin-bottom: 24px; color: var(--text-primary);
}
.cta-inner h2 .highlight {
  background: linear-gradient(var(--accent-primary), var(--accent-primary)); /* TEMP solid — gradient text paused */
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cta-inner p { font-size: var(--text-body-xl); color: var(--text-muted); line-height: var(--lh-body-xl); margin-bottom: 48px; }
.cta-buttons { display: flex; gap: var(--cluster-md); justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════
   18. GRADIENT TEXT HELPER
   ══════════════════════════════════════════ */
.gradient-text {
  background: linear-gradient(var(--accent-primary), var(--accent-primary)); /* TEMP solid — gradient text paused */
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}


/* ══════════════════════════════════════════
   19. RWA BADGE
   ══════════════════════════════════════════ */
.rwa-chip {
  display: inline-block; padding: var(--space-4) var(--space-8);
  background: color-mix(in oklch, var(--accent-tertiary) 12%, transparent); border: 1px solid color-mix(in oklch, var(--accent-tertiary) 25%, transparent);
  border-radius: var(--space-4); font-size: var(--text-caption); font-weight: var(--fw-bold);
  color: var(--accent-tertiary); letter-spacing: var(--tracking-loose);
  vertical-align: middle; margin-left: var(--space-4);
}


/* ══════════════════════════════════════════
   19. TRUST PILLS
   ══════════════════════════════════════════ */
.hero-trust {
  display: flex; gap: var(--space-16); flex-wrap: wrap; margin-top: var(--space-24);
  opacity: 0; animation: fadeUp 1s 1.0s forwards;
}
.trust-item {
  display: flex; align-items: center; gap: var(--space-8);
  font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--fw-medium);
}
.trust-item svg { flex-shrink: 0; }


/* ══════════════════════════════════════════
   20. LIGHT THEME — per-element overrides
   ══════════════════════════════════════════ */

/* Hero — all colors derive from palette tokens so the Theme Composer controls them */
[data-theme="light"] .hero p { color: var(--text-muted); }
[data-theme="light"] .hero h1 .highlight,
[data-theme="light"] .cta-inner h2 .highlight {
  background: linear-gradient(var(--accent-primary), var(--accent-primary)); /* TEMP solid — gradient text paused */
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="light"] .scroll-indicator { border-color: color-mix(in oklch, var(--text-primary) 15%, transparent); }
[data-theme="light"] .hero-scroll span  { color: color-mix(in oklch, var(--text-primary) 45%, transparent); }
[data-theme="light"] .trust-item        { color: color-mix(in oklch, var(--text-primary) 55%, transparent); }

/* Partners carousel */
[data-theme="light"] .partners-carousel { background: color-mix(in oklch, var(--accent-primary) 5%, transparent); border-color: color-mix(in oklch, var(--accent-primary) 10%, transparent); }
[data-theme="light"] .partners-label    { color: color-mix(in oklch, var(--text-primary) 35%, transparent); }
[data-theme="light"] .partner-logo      { opacity: 0.85; }
[data-theme="light"] .partner-logo:hover{ opacity: 1; }

/* Stats */
[data-theme="light"] .stats-header h2 {
  background: linear-gradient(var(--text-primary), var(--text-primary)); /* TEMP solid — gradient text paused */
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="light"] .stats-header p   { color: color-mix(in oklch, var(--text-primary) 50%, transparent); }
/* stat-tile light overrides live in styles.css. */

/* Features */
[data-theme="light"] .features-header h2   { color: var(--text-primary); }
[data-theme="light"] .features-header p    { color: color-mix(in oklch, var(--text-primary) 50%, transparent); }
/* Light-mode tile tuning — MIGRATED to the `frosted` material
   (May 2026). The translucent 72% white + accent-tinted hairline
   recipe lives in styles.css :root (--material-frosted-*) +
   [data-theme="light"] override. Tiles default to frosted via
   :where(.tile, .feature-card, .enterprise-card), brand-cards
   override to halo via :where(.brand-card). The hover state
   below is the only piece kept here — it's the marketing-page-
   specific accent reveal that doesn't fit cleanly into a material
   (it's a state, not a surface character). */
[data-theme="light"] .tile:not(.brand-card):hover,
[data-theme="light"] .feature-card:not(.brand-card):hover,
[data-theme="light"] .enterprise-card:not(.brand-card):hover { background: color-mix(in oklch, var(--tile-accent) 6%, #FFFFFF); border-color: var(--accent-primary-mid); }
[data-theme="light"] .tile-body,
[data-theme="light"] .tile p,
[data-theme="light"] .feature-card p,
[data-theme="light"] .enterprise-card p { color: color-mix(in oklch, var(--text-primary) 50%, transparent); }
/* Connected (flush) grid — slightly different backdrop so the 1px
   hairlines read as dividers on a light page. */
[data-theme="light"] .tile-grid--flush,
[data-theme="light"] .features-grid,
[data-theme="light"] .feature-grid { background: color-mix(in oklch, var(--accent-primary) 8%, transparent); border-color: color-mix(in oklch, var(--accent-primary) 12%, transparent); }
[data-theme="light"] .tile-grid--flush .tile,
[data-theme="light"] .features-grid .feature-card,
[data-theme="light"] .feature-grid .feature-card { background: rgba(255,255,255,0.85); }
[data-theme="light"] .tile-grid--flush .tile:hover,
[data-theme="light"] .features-grid .feature-card:hover,
[data-theme="light"] .feature-grid .feature-card:hover { background: color-mix(in oklch, var(--accent-primary) 7%, #FFFFFF); border-color: var(--accent-primary-mid); }

/* How it works */
[data-theme="light"] .how-header h2  { color: var(--text-primary); }
[data-theme="light"] .how-header p   { color: color-mix(in oklch, var(--text-primary) 50%, transparent); }
[data-theme="light"] .step-content h3{ color: var(--text-primary); }
[data-theme="light"] .step-content p { color: color-mix(in oklch, var(--text-primary) 50%, transparent); }
[data-theme="light"] .step-number    { background: color-mix(in oklch, var(--accent-primary) 8%, transparent); border-color: color-mix(in oklch, var(--accent-primary) 20%, transparent); }

/* Integration */
[data-theme="light"] .integration           { background: color-mix(in oklch, var(--accent-primary) 5%, transparent); border-color: color-mix(in oklch, var(--accent-primary) 10%, transparent); }
[data-theme="light"] .integration-text h2   { color: var(--text-primary); }
[data-theme="light"] .integration-text p    { color: color-mix(in oklch, var(--text-primary) 50%, transparent); }
[data-theme="light"] .int-feature           { color: color-mix(in oklch, var(--text-primary) 60%, transparent); }
[data-theme="light"] .integration-card      { background: rgba(255,255,255,0.72); border-color: color-mix(in oklch, var(--accent-primary) 10%, transparent); }
[data-theme="light"] .integration-card:hover{ background: color-mix(in oklch, var(--accent-primary) 6%, #FFFFFF); border-color: var(--accent-primary-mid); }
[data-theme="light"] .integration-card h3   { color: var(--text-primary); }
[data-theme="light"] .integration-card p    { color: color-mix(in oklch, var(--text-primary) 50%, transparent); }

/* Code block */
[data-theme="light"] .code-block { background: #fff; border-color: color-mix(in oklch, var(--accent-primary) 15%, transparent); color: color-mix(in oklch, var(--text-primary) 85%, transparent); }
[data-theme="light"] .code-block::before { background: linear-gradient(to bottom, #fff 0%, #fff 70%, #fff 100%); border-bottom-color: color-mix(in oklch, var(--accent-primary) 12%, transparent); }
[data-theme="light"] .code-block .code-fade-top    { background: linear-gradient(to bottom, #fff, transparent); }
[data-theme="light"] .code-block .code-fade-bottom { background: linear-gradient(to top,   #fff, transparent); }
[data-theme="light"] .code-comment { color: color-mix(in oklch, var(--text-primary) 30%, transparent); }
[data-theme="light"] .code-bracket { color: color-mix(in oklch, var(--text-primary) 50%, transparent); }
[data-theme="light"] .code-punct   { color: color-mix(in oklch, var(--text-primary) 50%, transparent); }

/* Enterprise / Use cases */
[data-theme="light"] .enterprise-header h2   { color: var(--text-primary); }
/* .enterprise-card light-mode styles moved into the shared tile block above. */

/* Chains */
[data-theme="light"] .chains-header h2 { color: var(--text-primary); }
[data-theme="light"] .chain-name        { color: color-mix(in oklch, var(--text-primary) 75%, transparent); }
[data-theme="light"] .chain-icon        { background: color-mix(in oklch, var(--accent-primary) 10%, transparent); }

/* Testimonials */
[data-theme="light"] .testimonial-card           { background: rgba(255,255,255,0.75); border-color: color-mix(in oklch, var(--accent-primary) 8%, transparent); }
[data-theme="light"] .testimonial-card.is-active { border-color: color-mix(in oklch, var(--accent-primary) 18%, transparent); background: rgba(255,255,255,0.97); }
[data-theme="light"] .tc-quote                   { color: color-mix(in oklch, var(--text-primary) 85%, transparent); }
[data-theme="light"] .tc-name                    { color: color-mix(in oklch, var(--text-primary) 90%, transparent); }
[data-theme="light"] .tc-role                    { color: color-mix(in oklch, var(--text-primary) 40%, transparent); }
[data-theme="light"] .tc-footer                  { border-top-color: color-mix(in oklch, var(--text-primary) 8%, transparent); }
[data-theme="light"] .tc-logo                    { color: color-mix(in oklch, var(--text-primary) 45%, transparent); }
[data-theme="light"] .tc-tag                     { color: oklch(from var(--accent-secondary) 40% c h); background: color-mix(in oklch, var(--accent-secondary) 8%, transparent); border-color: oklch(from var(--accent-secondary) 40% c h / 0.2); }
/* tc-arrow light-mode overrides removed — inherits from .btn-primary.btn-outline */
[data-theme="light"] .tc-dot                     { background: rgba(0,0,0,0.15); }
[data-theme="light"] .tc-dot:hover:not(.is-active) { background: rgba(0,0,0,0.35); }

/* 3D logo layers */
[data-theme="light"] .logo-layer { border-color: color-mix(in oklch, var(--accent-primary) 15%, transparent) !important; }
[data-theme="light"] .stack-ring-1 { border-color: color-mix(in oklch, var(--accent-primary) 10%, transparent); }
[data-theme="light"] .stack-ring-2 { border-color: rgba(210,94,236,0.07); }
[data-theme="light"] .stack-ring-3 { border-color: color-mix(in oklch, var(--accent-primary) 12%, transparent); }

/* Logos band */
[data-theme="light"] .logos-band { border-color: color-mix(in oklch, var(--accent-primary) 10%, transparent); background: color-mix(in oklch, var(--accent-primary) 4%, transparent); }
[data-theme="light"] .logos-band .logo-img { filter: grayscale(1); opacity: 0.45; }
[data-theme="light"] .logos-band .logo-img:hover { filter: none; opacity: 1; }

/* CTA */
[data-theme="light"] .cta-inner h2  { color: var(--text-primary); }
[data-theme="light"] .cta-inner p   { color: color-mix(in oklch, var(--text-primary) 50%, transparent); }


/* ══════════════════════════════════════════
   21. RESPONSIVE BREAKPOINTS
   (page content — complements styles.css)
   ══════════════════════════════════════════ */

/* ── 1100px: partial unwrap for rwa.html ── */
@media (max-width: 1100px) {
  .enterprise-grid { grid-template-columns: 1fr 1fr; }
  .logos-band { gap: var(--space-16); }
  .hero-globe-wrap { width: 780px; height: 780px; bottom: -88px; right: -64px; }
}

/* ── 860px: stack hero, collapse grids ── */
@media (max-width: 860px) {
  /* Hero */
  .hero-inner {
    flex-direction: column;
    padding: 120px 24px 80px;
    text-align: center; gap: 32px;
  }
  .hero-content { max-width: 100%; }
  .hero-globe-wrap { width: 568px; height: 568px; bottom: -48px; right: -48px; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .hero-trust   { justify-content: center; }

  /* 3D token visual */
  .token-3d-visual { max-width: 280px; margin: 0 auto; overflow: hidden; border-radius: 4px; }
  .logo-stack    { width: 240px; height: 240px; }
  .stack-ring-1  { width: 300px; height: 300px; }
  .stack-ring-2  { width: 360px; height: 360px; }
  .stack-ring-3  { width: 260px; height: 260px; }

  /* Coins stage hero */
  .hero-visual   { width: 100%; justify-content: center; }

  /* Section padding */
  .stats-bar          { padding: var(--space-80) var(--space-24) var(--space-96); }
  .features           { padding: var(--space-80) var(--space-24); }
  .how-it-works       { padding: var(--space-80) var(--space-24); }
  .integration        { padding: var(--space-80) var(--space-24); }
  .enterprise-section { padding: var(--space-80) var(--space-24); }
  .chains-section     { padding: var(--space-80) var(--space-24); }
  .testimonials-section { padding: var(--space-80) var(--space-24); }
  .cta-section        { padding: var(--space-80) var(--space-24); }

  /* Feature grids */
  .features-grid { grid-template-columns: 1fr; }
  .feature-grid  { grid-template-columns: 1fr; }
  .feature-card  { border-radius: 0 !important; }
  .feature-card:first-child { border-radius: 16px 16px 0 0 !important; }
  .feature-card:last-child  { border-radius: 0 0 16px 16px !important; }

  /* How it works */
  .how-steps { grid-template-columns: 1fr; gap: var(--space-24); }

  /* Integration */
  .integration-inner { grid-template-columns: 1fr; gap: 48px; }
  .integration-cards { grid-template-columns: 1fr; }
  .integration-card  { border-radius: 0 !important; }
  .integration-card:first-child { border-radius: 16px 16px 0 0 !important; }
  .integration-card:last-child  { border-radius: 0 0 16px 16px !important; }

  /* Enterprise / Use cases */
  .enterprise-grid { grid-template-columns: 1fr; }

  /* Chains */
  .chains-header  { margin-bottom: 48px; }

  /* Testimonials */
  .testimonial-card { padding: var(--space-24) var(--space-24) var(--space-24); }
  .tc-quote { font-size: var(--text-sm); }
  .tc-controls { gap: var(--cluster-md); }
  .tc-arrow { width: 36px; height: 36px; --btn-icon-size: 16px; }

  /* CTA */
  .cta-inner { padding: 0 8px; }
}

/* ── 600px: single-column footer, tightest padding ── */
@media (max-width: 600px) {
  .hero-inner  { padding: var(--space-96) var(--space-24) var(--space-64); }
  .hero h1     { letter-spacing: var(--tracking-snug); }
  .hero p      { font-size: var(--text-body); }
  .stats-bar   { padding: var(--space-64) var(--space-24) var(--space-80); }
  /* Hide extra rings on tiny screens */
  .token-3d-visual .stack-ring-1,
  .token-3d-visual .stack-ring-2,
  .token-3d-visual .stack-ring-3 { display: none; }
  /* Enterprise 2-col → 1-col */
  .enterprise-grid { grid-template-columns: 1fr; }
  /* Logos */
  .logos-band { flex-direction: column; align-items: flex-start; gap: var(--cluster-sm); }
}