/* ==========================================================================
   AGI (Artificial Gato Intelligence) — Elite Web Architecture
   Robinhood L2 • Uniswap v4 • Tokenized $NVDA Parity
   High-Voltage Cyberpunk / Terminal Clean Aesthetic
   ========================================================================== */

:root {
  /* Color Tokens - Robinhood Neon Green & Deep OLED */
  --bg-oled: #050608;
  --bg-surface: #0a0c10;
  --bg-surface-2: #10131a;
  --bg-card: rgba(14, 18, 24, 0.85);

  --accent-rh-green: #ccff00; /* Robinhood electric chartreuse */
  --accent-rh-bright: #e2ff4f;
  --accent-rh-glow: rgba(204, 255, 0, 0.25);
  --accent-rh-subtle: rgba(204, 255, 0, 0.08);

  --accent-emerald: #00ff88;
  --accent-cyan: #00f0ff;
  --accent-red: #ff3b57;
  --accent-red-glow: rgba(255, 59, 87, 0.25);

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #7d8ea5;

  --border-hairline: rgba(255, 255, 255, 0.08);
  /* Tintes y lineas: se invierten segun el terreno de cada seccion. */
  --tint-1: rgba(255, 255, 255, 0.025);
  --tint-2: rgba(255, 255, 255, 0.05);
  --tint-3: rgba(255, 255, 255, 0.085);
  --line-1: rgba(255, 255, 255, 0.05);
  --line-2: rgba(255, 255, 255, 0.09);
  --line-3: rgba(255, 255, 255, 0.16);
  --ground: #050608;
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-grid-soft: rgba(255, 255, 255, 0.05);
  --chart-label: #7d8ea5;
  --chart-label-dim: #5c6875;
  --accent-on-ground: #ccff00;
  --border-green-subtle: rgba(204, 255, 0, 0.2);
  --border-green-bright: #ccff00;

  /* Hardcore AI / Robotized / Coded Terminal Typography */
  --font-display: 'Chakra Petch', 'JetBrains Mono', monospace, sans-serif;
  --font-sans: 'JetBrains Mono', monospace, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.18s ease;
  --transition-smooth: 0.4s var(--ease-spring);
}

/* Terminal Coded Blink Cursor */
@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.terminal-cursor {
  display: inline-block;
  color: var(--accent-on-ground);
  /* Capa propia: el parpadeo se compone en GPU y deja de contar como salto
     de layout en cada ciclo (lo marcaba la traza de rendimiento). */
  will-change: opacity;
  animation: cursorBlink 0.9s infinite;
  font-weight: 700;
  margin-left: 2px;
}

.code-prompt {
  color: var(--accent-on-ground);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: 6px;
  user-select: none;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: #000000;
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

body {
  position: relative;
  overflow-x: hidden;
  line-height: 1.5;
  background-color: #000000;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Accessible Focus States (Vercel Guidelines) */
:focus-visible {
  outline: 2px solid var(--accent-rh-green) !important;
  outline-offset: 3px !important;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Clean Modern Background Architecture (Inspired by Fwogs, Ponke, Pengu & Avara) */
.film-grain-overlay,
.ambient-hardware-bg {
  display: none !important;
}

body {
  position: relative;
  overflow-x: hidden;
  line-height: 1.5;
  background-color: #000000;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  padding-top: var(--header-h);
}

.ambient-grid {
  display: none !important;
}

.ambient-glow-top {
  display: none !important;
}

/* Typography & Helpers */
.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }

.text-rh { color: var(--accent-on-ground); }
.text-emerald { color: var(--accent-emerald); }
.text-cyan { color: var(--accent-cyan); }
.text-red { color: var(--accent-red); }
.text-muted { color: var(--text-muted); }

.container {
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   FULL-WIDTH STICKY HEADER (Pins across scroll on Desktop & Mobile)
   ========================================================================== */
.site-header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(5, 7, 10, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line-2);
}

/* Top Ticker Bar (Full Width) */
.ticker-tape-bar {
  background: rgba(3, 4, 6, 0.85);
  border-bottom: 1px solid var(--line-1);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 5px 24px;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.ticker-tape-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1520px;
  margin: 0 auto;
}

.ticker-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.pulse-dot-rh {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-rh-green);
  box-shadow: 0 0 6px var(--accent-rh-green);
  animation: pulse-rh 2s infinite ease-in-out;
}

@keyframes pulse-rh {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.85); }
}

.ticker-data-stream {
  display: flex;
  align-items: center;
  gap: 20px;
}

.data-node {
  display: flex;
  align-items: center;
  gap: 6px;
}

.data-node span:first-child {
  color: var(--text-muted);
}

.data-node span:last-child {
  color: var(--accent-on-ground);
  font-weight: 600;
}

/* Full-Width Navbar */
.navbar-fullwidth {
  width: 100%;
  padding: 8px 24px;
}

.nav-fullwidth-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1520px;
  margin: 0 auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text-primary);
}

.brand-pfp-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-rh-green);
  box-shadow: none;
  overflow: hidden;
  background: #000;
  position: relative;
}

.brand-pfp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

/* El brand no es interactivo, asi que tampoco reacciona al raton: una
   animacion al pasar por encima prometeria un click que no existe. */

.brand-titles {
  display: flex;
  flex-direction: column;
}

.brand-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tag-bengal {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--accent-rh-subtle);
  border: 1px solid var(--accent-rh-green);
  color: var(--accent-on-ground);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.brand-sub {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-menu a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.nav-menu a:hover {
  color: var(--accent-on-ground);
}

.nav-right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Audio button */


/* Primary CTA Button */
.btn-rh-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--accent-rh-green);
  color: #050608;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid var(--accent-rh-bright);
  box-shadow: 0 4px 20px var(--accent-rh-glow);
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.btn-rh-primary:hover {
  background: var(--accent-rh-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

.btn-rh-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--tint-2);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid var(--border-hairline);
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.btn-rh-secondary:hover {
  background: var(--tint-3);
  border-color: var(--border-green-subtle);
  transform: translateY(-1px);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
  padding: 60px 0 80px 0;
  position: relative;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero-badge-capsule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(204, 255, 0, 0.09);
  border: none;
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-on-ground);
  margin-bottom: 20px;
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}

.hero-h1 .gradient-word {
  background: linear-gradient(135deg, #ffffff 30%, var(--accent-rh-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 560px;
}

.hero-lead strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Jensen Huang Executive Quote Callout */
.jensen-quote-card {
  background: rgba(204, 255, 0, 0.025);
  border: 1px solid rgba(204, 255, 0, 0.22);
  border-left: 3.5px solid var(--accent-rh-green);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 28px;
  max-width: 560px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.jensen-quote-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.jensen-badge-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent-on-ground);
  font-weight: 700;
  text-transform: uppercase;
}

.jensen-quote-body {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  line-height: 1.45;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.jensen-agi-highlight {
  color: var(--accent-on-ground);
  font-weight: 800;
  font-style: normal;
  text-shadow: none;
}

.jensen-quote-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  flex-wrap: wrap;
  gap: 8px;
}

.jensen-tag-verified {
  color: var(--accent-on-ground);
  background: rgba(204, 255, 0, 0.08);
  border: 1px solid rgba(204, 255, 0, 0.2);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

/* Quick Copy Contract */
.hero-contract-box {
  display: flex;
  align-items: center;
  background: #090c10;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  padding: 10px 14px;
  gap: 10px;
  max-width: 540px;
}

.contract-chip-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.contract-hash-text {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.btn-mini-copy {
  background: #ccff00 !important;
  border: 1px solid #ccff00 !important;
  color: #000000 !important;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all var(--transition-fast);
}

.btn-mini-copy:hover {
  background: #e2ff4f !important;
  border-color: #e2ff4f !important;
  box-shadow: 0 0 14px rgba(204, 255, 0, 0.45);
  transform: translateY(-1px);
}

/* Neural Semantic Decoder (GATO = CAT) */
.neural-decoder-card {
  margin-top: 18px;
  max-width: 540px;
  background: rgba(10, 14, 20, 0.75);
  border: 1px solid rgba(204, 255, 0, 0.2);
  border-radius: 10px;
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  backdrop-filter: blur(8px);
}

.neural-decoder-card:hover {
  border-color: var(--accent-rh-green);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

.decoder-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.decoder-brand-chip {
  display: flex;
  align-items: center;
  gap: 6px;
}

.decoder-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-rh-green);
  box-shadow: 0 0 8px var(--accent-rh-green);
  animation: pulseNeon 2s infinite ease-in-out;
}

.decoder-title-text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-on-ground);
  text-transform: uppercase;
}

.decoder-latency-tag {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  background: var(--tint-3);
  border: 1px solid var(--line-3);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.decoder-equation-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(204, 255, 0, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.decoder-tokens {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.token-gato {
  color: var(--text-primary);
  background: var(--tint-3);
  padding: 2px 8px;
  border-radius: 4px;
}

.token-equal {
  color: var(--accent-on-ground);
  font-size: 18px;
  font-weight: 800;
}

.token-cat {
  color: var(--accent-on-ground);
  background: rgba(204, 255, 0, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
  text-shadow: none;
}

.decoder-ai-bubble {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.5;
  color: #f1f5f9;
  font-style: italic;
}

.decoder-bottom-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: #cbd5e1;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line-2);
  padding-top: 14px;
}

.meta-tensor-desc {
  color: #cbd5e1;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.meta-status-chip {
  color: var(--accent-on-ground);
  font-weight: 600;
}

/* Nav brand pill */
.nav-gato-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-on-ground);
  background: rgba(204, 255, 0, 0.1);
  border: 1px solid rgba(204, 255, 0, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Hero Mascot — Frameless Floating Cat (no card, no frame) */
.hero-mascot-frameless {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mascot-floating {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  filter: none;
  animation: mascotFloat 6s ease-in-out infinite;
  transition: transform 0.6s var(--ease-spring);
  image-rendering: -webkit-optimize-contrast;
}

.hero-mascot-frameless:hover .mascot-floating {
  transform: scale(1.03);
  filter: none;
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Legacy card styles (kept for scrollytelling reuse) */
.mascot-display-card {
  position: relative;
  border-radius: 28px;
  background: rgba(6, 9, 14, 0.45);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(204, 255, 0, 0.18);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.85), 0 0 50px rgba(204, 255, 0, 0.1);
  overflow: visible;
  padding: 24px;
}

.mascot-img-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: crosshair;
  background: transparent !important;
  border: none !important;
}

.mascot-art-img {
  width: 100%;
  height: 540px;
  object-fit: contain;
  background: transparent !important;
  filter: none;
  transition: transform 0.6s var(--ease-spring);
  image-rendering: -webkit-optimize-contrast;
}

.mascot-display-card:hover .mascot-art-img {
  transform: scale(1.05);
}

/* Optical Scanning Laser Line disabled */
.optical-scanline {
  display: none !important;
}

/* Interactive Targeting Reticle Overlay */
.hud-target-reticle {
  position: absolute;
  width: 70px;
  height: 70px;
  border: 1.5px dashed var(--accent-rh-green);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
  box-shadow: 0 0 15px var(--accent-rh-glow);
  z-index: 10;
}

.hud-target-reticle::before {
  content: '';
  position: absolute;
  inset: 50%;
  width: 6px;
  height: 6px;
  background: var(--accent-rh-green);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.mascot-hud-footer {
  margin-top: 14px;
  padding: 12px 18px;
  background: rgba(8, 11, 16, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 12px;
  border: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hud-tag {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

.hud-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-on-ground);
}

/* ==========================================================================
   AI ORACLE SECTION // JENSEN HUANG & MULTIMODAL DECODER (GATO = CAT)
   ========================================================================== */
.section-oracle {
  padding: 80px 0;
  background: linear-gradient(180deg, #050608 0%, #080c12 50%, #050608 100%);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  position: relative;
}

.oracle-header {
  margin-bottom: 32px;
}

.oracle-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.oracle-card {
  background: rgba(8, 12, 18, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(204, 255, 0, 0.16);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s var(--ease-spring), border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.oracle-card:hover {
  transform: translateY(-4px);
  border-color: rgba(204, 255, 0, 0.4);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
}

.oracle-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
}

.oracle-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-on-ground);
  background: rgba(204, 255, 0, 0.11);
  padding: 6px 14px;
  border-radius: 7px;
  border: none;
  letter-spacing: 0.06em;
}

.oracle-tag-verified {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-on-ground);
  background: rgba(204, 255, 0, 0.12);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(204, 255, 0, 0.3);
  letter-spacing: 0.06em;
}

.oracle-quote-body {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0 0 28px 0;
  position: relative;
}

.oracle-quote-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
  border-top: 1px solid var(--line-2);
  padding-top: 18px;
}

.oracle-chip {
  color: var(--accent-on-ground);
  background: rgba(204, 255, 0, 0.06);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(204, 255, 0, 0.15);
}

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

/* ==========================================================================
   THE UNDERLYING — 2-Column Layout with GPU Video
   ========================================================================== */
.underlying-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}

.underlying-text-col {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.underlying-video-col {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100%;
}

.gpu-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 440px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(204, 255, 0, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
  display: flex;
}

.gpu-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* Flota sobre el video, que siempre es oscuro. Hereda --text-muted de su
   seccion, y en la seccion blanca eso es NEGRO: texto negro sobre video
   oscuro, ilegible. Fija su propio verde igual que el rotulo del escenario. */
.gpu-video-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 18px;
  /* Base solida hacia abajo: el fotograma puede tener zonas brillantes justo
     detras del texto, y un degradado que llega transparente no alcanza. */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 38%,
    rgba(0, 0, 0, 0.92) 100%
  );
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent-rh-green);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.06em;
}

@media (max-width: 768px) {
  .underlying-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .gpu-video-wrap {
    max-width: 100%;
  }
}


/* ==========================================================================
   LIVE HOLDINGS BAR (Like Artificial Inu)
   ========================================================================== */
.live-holdings-bar {
  padding: 40px 0;
  background: #080a0e;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

.holdings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.holding-item {
  background: rgba(10, 13, 18, 0.7);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 20px 22px;
  position: relative;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.holding-item:hover {
  border-color: var(--border-green-subtle);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Rock-Solid Stability: Terminals, Charts, Sliders, Feeds & Swap NEVER wobble */
.chart-card,
.tape-card,
.swap-terminal-box,
.overclock-card,
.scrolly-mascot-display-frame {
  transform: none !important;
}

.holding-label {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.holding-number {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.holding-sub {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent-on-ground);
}

/* ==========================================================================
   LIVE TRADING TERMINAL & CANVAS CHART (Interactive)
   ========================================================================== */
.section-terminal {
  padding: 80px 0;
  position: relative;
}

.terminal-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 24px;
}

.chart-card {
  background: #080a0f;
  border: 1px solid var(--border-hairline);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chart-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: rgba(0, 0, 0, 0.4);
}

.chart-pair-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pair-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
}

.pair-price {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-on-ground);
}

.chart-timeframes {
  display: flex;
  gap: 6px;
}

.tf-btn {
  background: var(--tint-2);
  border: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.tf-btn.active, .tf-btn:hover {
  background: var(--accent-rh-green);
  color: #000;
  font-weight: 700;
}

.canvas-container {
  height: 380px;
  width: 100%;
  position: relative;
  background: radial-gradient(circle at center, #0a0d14 0%, #050609 100%);
}

#chartCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Live Trade Tape */
.tape-card {
  background: #080a0f;
  border: 1px solid var(--border-hairline);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.tape-header {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 14px;
}

.trade-stream-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: hidden;
  max-height: 350px;
}

.trade-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--tint-1);
  border-left: 3px solid transparent;
  animation: slide-in 0.3s ease;
}

.trade-row.buy {
  border-left-color: var(--accent-on-ground);
}

.trade-row.sell {
  border-left-color: var(--accent-red);
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   SCROLLYTELLING COMPUTE ENGINE (Augen Pro & Shopify Editions)
   ========================================================================== */
.scrolly-showcase-section {
  position: relative;
  background: transparent;
  border-top: 1px solid var(--border-hairline);
  padding: 0;
}

.scrolly-container {
  position: relative;
  height: 280vh; /* Scroll distance to drive the 3 stages */
}

.scrolly-sticky-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 10;
}

.scrolly-inner-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}

.scrolly-stepper-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  font-family: var(--font-mono);
}

.scrolly-step-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--tint-2);
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.scrolly-step-tab:hover {
  background: var(--tint-3);
  color: var(--text-primary);
}

/* El activo se distingue por relleno solido, no por contorno ni halo. */
.scrolly-step-tab.active {
  background: var(--accent-rh-green);
  color: #05070a;
}

.scrolly-step-tab.active .step-idx {
  color: #05070a;
  font-weight: 700;
  opacity: 0.65;
}

.scrolly-chapter-block {
  display: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-spring), transform 0.5s var(--ease-spring);
}

.scrolly-chapter-block.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.chapter-badge {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-on-ground);
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.chapter-h3 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.chapter-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 28px;
  max-width: 540px;
}

.chapter-metric-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Mascot Stage & Morphing Poses Crossfade */
.scrolly-mascot-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrolly-mascot-display-frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 600px;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  background: #06090e;
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.scrolly-pose-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.5s ease, transform 0.5s ease;
  filter: none;
  pointer-events: none;
}

.scrolly-pose-img.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.scrolly-telemetry-tag-bottom {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.75);
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-hairline);
  z-index: 10;
}

/* ==========================================================================
   INTERACTIVE SWAP TERMINAL
   ========================================================================== */
.section-swap {
  padding: 80px 0;
  border-top: 1px solid var(--border-hairline);
}

.swap-terminal-box {
  max-width: 580px;
  margin: 0 auto;
  background: #090c12;
  border: 1.5px solid var(--border-green-subtle);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9);
  border-radius: 20px;
  padding: 32px;
}

.swap-mode-tabs {
  display: flex;
  gap: 8px;
  background: var(--tint-1);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 24px;
}

.swap-tab-btn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.swap-tab-btn.active {
  background: var(--accent-rh-green);
  color: #000;
}

.swap-tab-btn.sell-active {
  background: var(--accent-red);
  color: var(--text-primary);
}

.swap-card-input {
  background: #050609;
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.swap-input-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.swap-field-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.swap-field-group input {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  width: 100%;
}

.token-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--tint-2);
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
}

.swap-breakdown-box {
  background: var(--tint-1);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 14px;
}

.swap-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-hairline);
}

.swap-breakdown-row:last-child {
  border-bottom: none;
}

/* ==========================================================================
   CYBER BENGAL SOUNDBOARD & MEMES TRENCH
   ========================================================================== */
.section-memes {
  padding: 90px 0;
  border-top: 1px solid var(--border-hairline);
}






.memes-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.meme-box {
  background: rgba(8, 11, 16, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  overflow: hidden;
  transition: transform var(--transition-smooth), border-color var(--transition-smooth);
}

.meme-box:hover {
  transform: translateY(-6px);
  border-color: rgba(204, 255, 0, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
}

.meme-img-holder {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #06090e;
  padding: 0;
  display: block;
}

.meme-img-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  transition: transform 0.6s var(--ease-spring);
}

.meme-box:hover .meme-img-holder img {
  transform: scale(1.05);
}

.meme-meta {
  padding: 18px;
}

.meme-meta-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-on-ground);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.meme-meta-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ==========================================================================
   FOOTER & LEGAL
   ========================================================================== */
.footer {
  /* Mismo trato que el hero: fondo translucido para que el canvas de
     particulas se vea DETRAS del contenido. Antes se veian por accidente
     de apilado — el canvas es fixed con z-index 0 y el footer no estaba
     posicionado, asi que le pintaba encima al texto. */
  position: relative;
  z-index: 0;
  padding: 70px 0 40px 0;
  background: transparent;
  border-top: 1px solid var(--border-hairline);
  font-size: 15px;
  color: var(--text-muted);
}
.footer > * { position: relative; z-index: 1; }

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 36px;
  margin-bottom: 40px;
}

.footer-disc {
  padding: 18px 22px;
  background: var(--tint-1);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* Toast */
.toast-bar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--accent-rh-green);
  color: #000;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 8px 30px var(--accent-rh-glow);
  z-index: 1000;
  opacity: 0;
  transform: translateY(20px);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
}

.toast-bar.active {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 1100px) and (min-width: 768px) {
  .holdings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .hero-layout, .terminal-layout, .memes-masonry {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .holdings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .nav-menu {
    display: none;
  }

  /* Scrollytelling Mobile Graceful Fallback */
  .scrolly-container {
    height: auto;
  }
  .scrolly-sticky-stage {
    position: relative;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 60px 0;
  }
  .scrolly-container { max-height: none; }
  .scrolly-inner-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .scrolly-chapter-block {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 32px;
  }
  .scrolly-stepper-nav {
    display: none;
  }
  .scrolly-mascot-display-frame {
    min-height: 400px;
  }
}

/* ==========================================================================
   RECENT.DESIGN INSPIRED POWERS:
   1. Interactive Neural Tensor Canvas
   2. 3D Tilt Cards with Specular Spotlight (ibelick)
   3. GPU Cluster Overclocking Console (emil-design-eng)
   4. Morphing Sliding Pill Indicators
   ========================================================================== */

/* 1. Interactive Neural Tensor Canvas (disabled for performance & clean hero) */
#neuralCanvas {
  display: none !important;
}

/* 2. 3D Tilt Card & Specular Spotlight (ibelick inspired) */
.spotlight-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.spotlight-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  background: radial-gradient(
    circle 320px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.045),
    transparent 80%
  );
}

.spotlight-card:hover .spotlight-sheen {
  opacity: 1;
}

/* 3. GPU Cluster Overclocking Console */
.overclock-card {
  background: #0a0d13;
  border: none;
  border-radius: 16px;
  padding: 22px 26px;
  margin-top: 24px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.overclock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.overclock-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.overclock-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--accent-rh-subtle);
  color: var(--accent-on-ground);
  border: 1px solid var(--accent-rh-green);
  text-transform: uppercase;
}

.overclock-readout {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-on-ground);
}

.overclock-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.overclock-slider-wrap {
  flex: 1;
  position: relative;
}

.overclock-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--tint-3);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.overclock-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-rh-green);
  box-shadow: 0 0 16px var(--accent-rh-green);
  cursor: grab;
  border: 2px solid #000;
  transition: transform var(--transition-fast);
}

.overclock-range::-webkit-slider-thumb:active {
  transform: scale(1.25);
  cursor: grabbing;
}

.overclock-stats-strip {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

.overclock-stats-strip span strong {
  color: var(--text-primary);
}

/* 4. Morphing Sliding Pill Indicators */
.sliding-track {
  position: relative;
  display: inline-flex;
  background: var(--tint-2);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
}

.sliding-glider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: var(--accent-rh-green);
  border-radius: 6px;
  pointer-events: none;
  transition: left 0.32s cubic-bezier(0.16, 1, 0.3, 1), width 0.32s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
  z-index: 1;
  box-shadow: 0 0 14px var(--accent-rh-glow);
}

.sliding-track button {
  position: relative;
  z-index: 2;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* ==========================================================================
   AUGEN PRO INSPIRED HUD CALIPERS & HARDWARE TELEMETRY
   ========================================================================== */

/* Caliper Corners removed per design audit (clean luxury aesthetics) */
.caliper-card::before,
.caliper-card::after,
.caliper-tr,
.caliper-bl {
  display: none !important;
}

/* Augen Precision Crosshair Tick */
.augen-crosshair {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-on-ground);
  opacity: 0.45;
  user-select: none;
  line-height: 1;
}

/* Augen Hardware Telemetry Tag */
.augen-telemetry-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 3px 8px;
  background: var(--tint-1);
  border: 1px solid var(--line-1);
  border-radius: 4px;
}




/* ==========================================================================
   ==========================================================================
   V6.0 — PRE-LAUNCH MODE, NEW SECTIONS, REAL MOBILE PASS
   Everything below is additive. Later rules intentionally override earlier
   ones of equal specificity (hero h1 sizing, contract box width, ticker wrap).
   ==========================================================================
   ========================================================================== */

:root {
  /* Antes era ambar para marcar "pendiente". Ahora es el verde de marca:
     asi el estado previo y el definitivo se ven igual, y el dia del
     lanzamiento no cambia ningun color. */
  --accent-amber: #ccff00;
  --accent-amber-wash: rgba(204, 255, 0, 0.10);
  --header-h: 68px;   /* altura real de la cabecera en escritorio */
}

/* NOTE: do NOT put `overflow-x: hidden` on <html>. It computes overflow-y to
   `auto`, which turns the root into a scroll container and silently kills
   `position: sticky` for the scrollytelling stage. The horizontal overflow it
   was papering over is fixed properly by the `min-width: 0` rules further
   down — that was the actual cause. */

/* Anchor targets clear the fixed header */
section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.text-red { color: var(--accent-red); }
.ticker-sep { color: var(--text-dim); }

.section-lede {
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 62ch;
}

.tokenomics-lede { margin-bottom: 40px; }
.contracts-lede { margin-bottom: 26px; }

.section-head-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.section-head-row .section-h2 { margin-bottom: 0; }

/* ==========================================================================
   SCROLL PROGRESS RAIL
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1200;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent-rh-green);
  box-shadow: 0 0 10px var(--accent-rh-glow);
  transition: width 0.1s linear;
}

/* ==========================================================================
   PRE-LAUNCH RIBBON
   ========================================================================== */







/* When the ribbon is present the sticky header sits below it */

/* ==========================================================================
   SIMULATION BADGES
   ========================================================================== */
.sim-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-amber);
  background: var(--accent-amber-wash);
  border: 1px solid rgba(255, 183, 3, 0.42);
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  vertical-align: middle;
}
.sim-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-amber);
  flex: none;
}
.sim-badge-lg { font-size: 12.5px; padding: 5px 10px; }
.swap-sim { margin-top: 14px; }

/* ==========================================================================
   SOCIAL ROW (config-driven)
   ========================================================================== */
.social-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0;
}
.social-row:empty { display: none; }

.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.social-chip svg { flex: none; }
.social-chip:hover {
  border-color: var(--border-green-subtle);
  color: var(--accent-on-ground);
  transform: translateY(-1px);
}

.social-chip.is-soon {
  cursor: default;
  opacity: 0.55;
  border-style: dashed;
}
.social-chip.is-soon:hover { border-color: var(--border-hairline); color: var(--text-secondary); transform: none; }
.social-soon-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  border: 1px solid var(--border-hairline);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ==========================================================================
   NAV TOGGLE + MOBILE DRAWER
   ========================================================================== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--text-primary);
  transition: transform 0.25s var(--ease-spring), opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(5.5px) 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) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 6, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1400;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.drawer-scrim[hidden] { display: none; }
.drawer-scrim.is-open { opacity: 1; }

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  z-index: 1500;
  background: #080a0e;
  border-left: 1px solid var(--border-green-subtle);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s var(--ease-spring);
  overscroll-behavior: contain;
}
.mobile-drawer[hidden] { display: none; }
.mobile-drawer.is-open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border-hairline);
  flex: none;
}
.drawer-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.drawer-close {
  background: transparent;
  border: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: 15.5px;
  cursor: pointer;
  line-height: 1;
}
.drawer-close:hover { border-color: var(--border-green-subtle); color: var(--accent-on-ground); }

.drawer-links {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}
.drawer-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  border-bottom: 1px solid var(--line-1);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.drawer-links a:hover,
.drawer-links a.is-active { background: var(--accent-rh-subtle); color: var(--accent-on-ground); }
.drawer-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
.drawer-links a.is-active .drawer-idx { color: var(--accent-on-ground); }

.drawer-foot {
  flex: none;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-hairline);
}
.drawer-foot .social-row { margin: 0 0 14px; }
.drawer-cta { width: 100%; justify-content: center; text-align: center; }

body.drawer-open { overflow: hidden; }

/* ==========================================================================
   NAV ACTIVE STATE (scrollspy)
   ========================================================================== */
.nav-menu a {
  position: relative;
  padding-bottom: 3px;
}
.nav-menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--accent-rh-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease-spring);
}
.nav-menu a.is-active { color: var(--accent-on-ground); }
.nav-menu a.is-active::after { transform: scaleX(1); }

/* ==========================================================================
   HERO REFINEMENTS
   ========================================================================== */
.hero-h1 { font-size: clamp(32px, 6.6vw, 84px); }

.hero-contract-box {
  max-width: 100%;
  min-width: 0;
}
.contract-hash-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contract-wide { max-width: 100%; }
.contract-chip-wide { min-width: 118px; }
.contracts-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}

/* Contract slot in TBA state */
.hero-contract-box.is-tba {
  border-style: dashed;
  border-color: rgba(255, 183, 3, 0.34);
}
.hero-contract-box.is-tba .contract-hash-text {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

/* Mascot */
.hero-mascot-box { position: relative; display: flex; align-items: center; }
.mascot-art-img {
  will-change: transform;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.mascot-hint {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border-hairline);
  background: rgba(5, 7, 10, 0.72);
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hero-mascot-box:hover .mascot-hint { opacity: 1; }
.mascot-hint.is-hidden { opacity: 0 !important; }

/* Cat reaction pop */
@keyframes mascotPounce {
  0%   { transform: scale(1) rotate(0deg); }
  28%  { transform: scale(1.07) rotate(-3.5deg); }
  55%  { transform: scale(0.97) rotate(2.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.mascot-art-img.is-pouncing { animation: mascotPounce 0.55s var(--ease-spring); }

/* Thrown paw stickers (Fwog-style toss) */

/* ==========================================================================
   HOLDINGS — stable number rows
   ========================================================================== */
.holdings-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.holding-item { display: flex; flex-direction: column; }

.holding-number-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.holding-number {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 31px);
  font-weight: 800;
  line-height: 1.08;
  color: var(--text-primary);
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}
.holding-unit {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.holding-sub { margin-top: auto; }

/* ==========================================================================
   TERMINAL — tape fade + change pill
   ========================================================================== */
.pair-change {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-on-ground);
  background: var(--accent-rh-subtle);
  padding: 2px 6px;
  border-radius: 4px;
}
.pair-change.is-down { color: var(--accent-red); background: var(--accent-red-glow); }

.tape-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.tape-scroll::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(transparent, var(--bg-oled));
  pointer-events: none;
}
.overclock-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }

/* ==========================================================================
   THE UNDERLYING
   ========================================================================== */
.section-underlying { padding: 90px 0; border-top: 1px solid var(--border-hairline); }
.underlying-body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 36px;
}
.underlying-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  font-family: var(--font-mono);
}
.u-stat {
  background: var(--bg-surface);
  padding: 18px;
  border-radius: 12px;
  border: 1px solid var(--border-hairline);
}
.u-stat-label { font-size: 12.5px; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; }
.u-stat-value { font-size: 17px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   SCROLLY TELEMETRY CHIP — readable scrim
   ========================================================================== */
/* Este rotulo flota sobre la imagen del escenario y trae su propio fondo
   oscuro, asi que usa el verde de marca aunque la seccion sea blanca. */
.scrolly-telemetry-tag-bottom {
  --accent-on-ground: #ccff00;
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-green-subtle);
  border-radius: 6px;
  color: var(--accent-on-ground) !important;
  padding: 7px 12px !important;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   TOKENOMICS
   ========================================================================== */
.section-tokenomics { padding: 90px 0; border-top: 1px solid var(--border-hairline); }

.tokenomics-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.tokenomics-chart-col { display: flex; flex-direction: column; align-items: center; gap: 26px; }

.donut-wrap { position: relative; width: 300px; max-width: 100%; }
#supplyDonut { width: 100%; height: auto; display: block; }

.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.donut-center-n {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.donut-center-l {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-top: 6px;
}

.donut-legend { list-style: none; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; }
.donut-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-secondary);
}
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legend-name { flex: 1 1 auto; }
.legend-pct { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.fact-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 18px;
}
.fact-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.fact-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 8px;
}
.fact-note { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.proof-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.proof-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15.5px;
  color: var(--text-secondary);
}
.proof-mark {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  border: 1px solid var(--border-hairline);
}
.proof-item.is-verified .proof-mark { color: var(--accent-on-ground); border-color: var(--border-green-subtle); background: var(--accent-rh-subtle); }
.proof-text { flex: 1 1 220px; }
.proof-text strong { color: var(--text-primary); }
.proof-status {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 3px;
  color: var(--accent-amber);
  background: var(--accent-amber-wash);
  border: 1px solid rgba(255, 183, 3, 0.35);
}
.proof-item.is-verified .proof-status {
  color: var(--accent-on-ground);
  background: var(--accent-rh-subtle);
  border-color: var(--border-green-subtle);
}

/* ==========================================================================
   SWAP REFINEMENTS
   ========================================================================== */
.swap-intro { text-align: center; margin-bottom: 36px; }
.swap-intro .section-lede { margin-left: auto; margin-right: auto; }
.swap-card-output {
  background: rgba(204, 255, 0, 0.03);
  border-color: rgba(204, 255, 0, 0.2);
}
.swap-input-row label { cursor: pointer; }
.bd-label { color: var(--text-muted); }
.bd-value { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); }
.btn-swap-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 14px 0;
  font-size: 15.5px;
}
.swap-warn {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-amber);
}
.swap-warn[hidden] { display: none; }

/* ==========================================================================
   HOW TO BUY
   ========================================================================== */
.section-buy { padding: 90px 0; border-top: 1px solid var(--border-hairline); }
.buy-steps { list-style: none; display: flex; flex-direction: column; gap: 2px; counter-reset: none; }
.buy-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 24px;
  padding: 26px 0;
  border-top: 1px solid var(--border-hairline);
}
.buy-step:last-child { border-bottom: 1px solid var(--border-hairline); }
.buy-step-n {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--accent-on-ground);
  line-height: 1;
  opacity: 0.85;
}
.buy-step-h { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.buy-step-body p { color: var(--text-secondary); font-size: 16.5px; line-height: 1.65; max-width: 62ch; margin: 0; }
.buy-contract { margin-top: 16px; max-width: 560px; }
.buy-step-cta { display: inline-flex; margin-top: 16px; }

/* ==========================================================================
   MEME LAB
   ========================================================================== */
.section-memelab { padding: 90px 0; border-top: 1px solid var(--border-hairline); }

.memelab-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: start;
}

.memelab-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background:
    repeating-conic-gradient(#0d1016 0% 25%, #12161d 0% 50%) 50% / 24px 24px;
  touch-action: none;
}
.memelab-canvas-wrap.is-dragover { border-color: var(--accent-rh-green); box-shadow: 0 0 0 3px var(--accent-rh-subtle); }
#memeCanvas { width: 100%; height: 100%; display: block; cursor: grab; }
#memeCanvas.is-grabbing { cursor: grabbing; }

.memelab-drop-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  padding: 20px;
}
.memelab-drop-hint[hidden] { display: none; }
.memelab-drop-hint strong { color: var(--text-secondary); font-size: 15.5px; font-weight: 600; }
.drop-icon {
  font-size: 22px;
  color: var(--accent-on-ground);
  border: 1px dashed var(--border-green-subtle);
  border-radius: 50%;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: 4px;
}

.memelab-selected-hud {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  background: rgba(5, 7, 10, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 6px;
}
.memelab-selected-hud[hidden] { display: none; }
.hud-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.hud-btn:hover { border-color: var(--border-green-subtle); color: var(--accent-on-ground); }
.hud-btn-danger:hover { border-color: var(--accent-red); color: var(--accent-red); }

.memelab-tip {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}

.memelab-controls-col { display: flex; flex-direction: column; gap: 22px; }
.memelab-group {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  padding: 18px;
}
.memelab-group-title {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.memelab-upload-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px dashed var(--border-green-subtle);
  background: var(--accent-rh-subtle);
  color: var(--accent-on-ground);
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.memelab-upload-btn:hover { background: rgba(204, 255, 0, 0.14); }

.memelab-preset-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.memelab-preset {
  width: 54px; height: 54px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background: #0d1016;
  cursor: pointer;
  padding: 0;
  flex: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.memelab-preset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.memelab-preset:hover { border-color: var(--accent-rh-green); transform: translateY(-2px); }
.memelab-preset.is-active { border-color: var(--accent-rh-green); box-shadow: 0 0 0 2px var(--accent-rh-subtle); }
.memelab-preset-none {
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

.memelab-sticker-tray {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.memelab-sticker {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  background: #0d1016;
  cursor: pointer;
  padding: 4px;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.memelab-sticker img { width: 100%; height: 100%; object-fit: contain; display: block; }
.memelab-sticker:hover { border-color: var(--accent-rh-green); transform: translateY(-2px); }

.memelab-caption-input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid var(--border-hairline);
  background: #050609;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.memelab-caption-input::placeholder { color: var(--text-dim); font-weight: 400; }
.memelab-caption-row { display: flex; gap: 8px; margin-top: 10px; }
.memelab-mini-btn {
  flex: 1 1 0;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.memelab-mini-btn:hover { border-color: var(--border-green-subtle); color: var(--accent-on-ground); }

.memelab-actions { display: flex; gap: 10px; }
.memelab-export { flex: 1 1 auto; justify-content: center; text-align: center; }
.memelab-reset { flex: none; }

/* ==========================================================================
   MEDIA KIT
   ========================================================================== */
.meme-dl { display: inline-block; margin-top: 12px; text-decoration: none; }

.mediakit {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border-hairline);
}
.mediakit-head { margin-bottom: 24px; }
.mediakit-h { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.mediakit-head p { color: var(--text-secondary); font-size: 16px; max-width: 58ch; }

.mediakit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.mediakit-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.mediakit-item:hover { border-color: var(--border-green-subtle); transform: translateY(-2px); }
.mk-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: repeating-conic-gradient(#0d1016 0% 25%, #12161d 0% 50%) 50% / 16px 16px;
  margin-bottom: 10px;
}
.mk-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mk-name { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--text-primary); }
.mk-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); }

/* ==========================================================================
   ROADMAP
   ========================================================================== */
.section-roadmap { padding: 90px 0; border-top: 1px solid var(--border-hairline); }
.roadmap-track { list-style: none; display: flex; flex-direction: column; }
.roadmap-phase { display: grid; grid-template-columns: 40px 1fr; gap: 0 20px; }
.rm-marker { position: relative; display: flex; justify-content: center; }
.rm-marker::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--border-hairline);
}
.roadmap-phase:first-child .rm-marker::before { top: 12px; }
.roadmap-phase:last-child .rm-marker::before { bottom: calc(100% - 12px); }
.rm-dot {
  position: relative;
  z-index: 1;
  width: 11px; height: 11px;
  border-radius: 50%;
  margin-top: 7px;
  background: var(--bg-oled);
  border: 1.5px solid var(--text-dim);
}
.roadmap-phase.is-current .rm-dot {
  background: var(--accent-rh-green);
  border-color: var(--accent-rh-green);
  box-shadow: 0 0 0 4px var(--accent-rh-subtle), 0 0 12px var(--accent-rh-glow);
}
.rm-body { padding-bottom: 34px; }
.rm-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.roadmap-phase.is-current .rm-tag { color: var(--accent-on-ground); }
.rm-h { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.rm-body p { color: var(--text-secondary); font-size: 16px; line-height: 1.65; max-width: 62ch; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.section-faq { padding: 90px 0; border-top: 1px solid var(--border-hairline); }
.faq-list { display: flex; flex-direction: column; max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--border-hairline); }
.faq-item:first-child { border-top: 1px solid var(--border-hairline); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--accent-on-ground);
  transition: transform 0.3s var(--ease-spring);
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent-on-ground); }
.faq-body { padding: 0 0 22px; }
.faq-body p { color: var(--text-secondary); font-size: 16.5px; line-height: 1.7; max-width: 66ch; }

/* ==========================================================================
   CONTRACTS SECTION
   ========================================================================== */
.section-contracts { padding: 70px 0; border-top: 1px solid var(--border-hairline); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer-brand-col { max-width: 420px; }
.footer-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.footer-logo { width: 28px; height: 28px; border-radius: 50%; }
.footer-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text-primary); }
.brand-wordmark-img { height: 26px; width: auto; display: block; }
.footer-wordmark-img { height: 22px; width: auto; display: block; }
.footer-blurb { font-size: 15px; color: var(--text-muted); line-height: 1.6; }
.footer-brand-col .social-row { margin: 18px 0 0; }

.footer-links { display: flex; gap: 40px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 15px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col-h { color: var(--text-primary); font-weight: 700; margin-bottom: 4px; }
.footer-col a { color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); }
.footer-col a:hover { color: var(--accent-on-ground); }
.footer-col a[data-footer-link] { color: var(--accent-on-ground); }
.footer-studio { color: var(--text-dim); margin-top: 6px; font-size: 13px; }
.footer-studio strong { color: var(--text-primary); }

/* ==========================================================================
   PRE-LAUNCH MODAL
   ========================================================================== */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: rgba(3, 4, 6, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
  overflow-y: auto;
}
.modal-scrim[hidden] { display: none; }
.modal-scrim.is-open { opacity: 1; }

.modal-panel {
  position: relative;
  width: min(560px, 100%);
  margin: auto;
  background: #0a0d12;
  border: 1px solid var(--border-green-subtle);
  border-radius: 18px;
  padding: 34px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.3s var(--ease-spring);
}
.modal-scrim.is-open .modal-panel { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.modal-close:hover { border-color: var(--accent-rh-green); color: var(--accent-on-ground); }

.modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent-amber);
  margin-bottom: 10px;
}
.modal-h { font-family: var(--font-display); font-size: 25px; font-weight: 800; color: var(--text-primary); margin-bottom: 16px; }
.modal-panel p { color: var(--text-secondary); font-size: 16px; line-height: 1.68; margin-bottom: 14px; }
.modal-panel p strong { color: var(--text-primary); }
.modal-warn {
  background: var(--accent-amber-wash);
  border: 1px solid rgba(255, 183, 3, 0.3);
  border-radius: 10px;
  padding: 13px 15px;
  color: #ffdf9e !important;
}
.modal-warn strong { color: var(--accent-amber) !important; }
.modal-social { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-hairline); }
.modal-social-label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.1em; color: var(--text-dim); }
.modal-social .social-row { margin: 12px 0 0; }

/* ==========================================================================
   SOUND TOGGLE ICON STATE
   ========================================================================== */



/* ==========================================================================
   RESPONSIVE — the real mobile pass
   ========================================================================== */

/* Tablet / small laptop */
@media (max-width: 1080px) {
  .tokenomics-layout { grid-template-columns: 1fr; gap: 44px; }
  .tokenomics-chart-col { align-items: flex-start; }
  .donut-legend { max-width: none; }
  .memelab-layout { grid-template-columns: 1fr; gap: 28px; }
  .memelab-canvas-wrap { max-width: 520px; }
}

/* Where the desktop nav gives way to the drawer */
@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .holdings-grid { grid-template-columns: repeat(2, 1fr); }
  .underlying-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* Phones */
@media (max-width: 640px) {
  :root { --header-h: 51px; }

  .container { padding: 0 16px; }

  /* --- Header ------------------------------------------------------- */
  .ticker-tape-bar { padding: 5px 16px; font-size: 12px; }
  .ticker-tape-inner { gap: 4px 10px; justify-content: flex-start; }
  .ticker-status-badge { gap: 6px; }
  .ticker-data-stream { gap: 4px 12px; flex-wrap: wrap; }
  .ticker-data-stream .data-node:nth-child(1) { display: none; }

  .navbar-fullwidth { padding: 8px 16px; }
  .nav-fullwidth-inner { gap: 10px; }
  .brand-pfp-box { width: 36px; height: 36px; }
  .brand-h1 { font-size: 17px; }
  .brand-wordmark-img { height: 21px; }
  .brand-sub { display: none; }
  .nav-right-actions { gap: 8px; }
  .btn-nav-cta { display: none; }


  /* --- Hero --------------------------------------------------------- */
  /* Va con el selector largo a proposito: `main > section[id]` pone el
     padding de seccion y gana en especificidad a un `.hero` suelto, asi
     que la version corta se ignoraba y el hero seguia con 64px arriba. */
  main > section[id].hero { padding-top: 10px; padding-bottom: 40px; }
  /* En una columna el gato va PRIMERO: es la cara del proyecto y en un
     telefono debe aparecer antes que el texto. El orden del HTML se mantiene
     por accesibilidad (titular antes que imagen decorativa); solo cambia el
     orden visual.
     Las medidas de abajo estan calculadas para que los tres botones entren
     por encima del pliegue en un iPhone de 844-874px de alto. Medido: sin
     esto los botones terminaban 36px por debajo. */
  .hero-layout { grid-template-columns: 1fr; gap: 14px; }
  .hero-layout .hero-mascot-box { order: -1; padding: 0; }
  .mascot-stage { max-width: 262px; }
  .hero-mascot-box { margin-bottom: -4px; }
  .hero-lead { margin-bottom: 18px; }
  .hero-h1 { margin-bottom: 14px; }
  .hero-h1 { font-size: clamp(30px, 9.6vw, 44px); line-height: 1.04; }
  .hero-lead { font-size: 16px; }
  .hero-cta-group { flex-wrap: wrap; gap: 10px; }
  .hero-cta-group > * { flex: 1 1 100%; justify-content: center; text-align: center; }
  .hero-contract-box { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .hero-contract-box .contract-hash-text { flex: 1 1 100%; font-size: 13px; order: 3; }
  .btn-mini-copy { flex: none; }
  .hero-mascot-box { justify-content: center; }
  .mascot-hint { opacity: 1; }

  .social-row { gap: 8px; margin: 18px 0; }
  .social-chip { font-size: 13px; padding: 7px 11px; }

  /* --- Sections ----------------------------------------------------- */
  .section-oracle,
  .section-terminal,
  .section-underlying,
  .section-tokenomics,
  .section-swap,
  .section-buy,
  .section-memelab,
  .section-memes,
  .section-roadmap,
  .section-faq,
  .section-contracts { padding: 56px 0; }

  .section-h2 { font-size: clamp(24px, 7vw, 32px); }
  .section-lede { font-size: 15.5px; }
  .section-head-row { gap: 10px; }

  /* --- Holdings ----------------------------------------------------- */
  .holdings-grid { grid-template-columns: 1fr; gap: 12px; }
  .holding-item { padding: 16px 18px; }
  .holding-number { font-size: 26px; }

  /* --- Terminal ----------------------------------------------------- */
  .terminal-layout { grid-template-columns: 1fr; gap: 16px; }
  .canvas-container { height: 260px; }
  .chart-header { flex-wrap: wrap; gap: 12px; }
  .chart-timeframes { width: 100%; }
  .tf-btn { flex: 1 1 0; }
  .tape-card { max-height: 320px; }
  .overclock-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .overclock-stats-strip { flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; }
  .overclock-title-group { flex-wrap: wrap; gap: 8px; }
  .overclock-name { font-size: 14px; }

  /* --- Underlying --------------------------------------------------- */
  .underlying-layout { grid-template-columns: 1fr; gap: 26px; }
  .underlying-body { font-size: 17px; margin-bottom: 26px; }
  .underlying-stats { grid-template-columns: 1fr; gap: 10px; }
  .u-stat { padding: 14px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .u-stat-label { margin-bottom: 0; }
  .gpu-video-wrap { min-height: 260px; }

  /* --- Scrollytelling ----------------------------------------------- */
  .scrolly-mascot-display-frame { min-height: 300px; }
  .chapter-h3 { font-size: 21px; }
  .chapter-metric-strip { flex-wrap: wrap; gap: 6px; }
  .augen-telemetry-tag { font-size: 11.5px; }

  /* --- Tokenomics --------------------------------------------------- */
  .donut-wrap { width: 240px; margin: 0 auto; }
  .donut-center-n { font-size: 31px; }
  .tokenomics-chart-col { align-items: center; }
  .fact-grid { grid-template-columns: 1fr; gap: 10px; }
  .fact-card { padding: 15px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .fact-label { margin-bottom: 0; flex: 1 1 100%; }
  .fact-value { font-size: 25px; margin-bottom: 0; }
  .fact-note { flex: 1 1 100%; }
  .proof-item { font-size: 14.5px; padding: 12px 14px; }
  .proof-status { font-size: 11px; }

  /* --- Swap --------------------------------------------------------- */
  .swap-terminal-box { padding: 18px 16px; }
  .swap-mode-tabs { flex-wrap: nowrap; }
  .swap-tab-btn { font-size: 13.5px; padding: 10px 6px; }
  .swap-field-group input { font-size: 24px; min-width: 0; }
  .swap-input-row { font-size: 13px; gap: 8px; }
  .swap-breakdown-row { flex-wrap: wrap; gap: 2px; font-size: 14px; }
  .bd-value { font-size: 14px; }

  /* --- How to buy --------------------------------------------------- */
  .buy-step { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .buy-step-n { font-size: 22px; }
  .buy-step-h { font-size: 18px; }
  .buy-step-body p { font-size: 16px; }

  /* --- Meme lab ----------------------------------------------------- */
  .memelab-canvas-wrap { max-width: 100%; }
  .memelab-sticker-tray { grid-template-columns: repeat(4, 1fr); }
  .memelab-group { padding: 15px; }
  .memelab-actions { flex-direction: column; }
  .memelab-reset { width: 100%; justify-content: center; text-align: center; }
  .memelab-selected-hud { top: 8px; right: 8px; padding: 5px; gap: 5px; }
  .hud-btn { width: 34px; height: 34px; }

  /* --- Memes / kit -------------------------------------------------- */
  .memes-masonry { grid-template-columns: 1fr; gap: 16px; }
  .mediakit { margin-top: 40px; padding-top: 30px; }
  .mediakit-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* --- Roadmap ------------------------------------------------------ */
  .roadmap-phase { grid-template-columns: 26px 1fr; gap: 0 14px; }
  .rm-h { font-size: 18px; }
  .rm-body { padding-bottom: 26px; }
  .rm-body p { font-size: 16px; }

  /* --- FAQ ---------------------------------------------------------- */
  .faq-item summary { font-size: 16.5px; padding: 17px 0; }
  .faq-body p { font-size: 16px; }

  /* --- Footer ------------------------------------------------------- */
  .footer-top { flex-direction: column; gap: 32px; }
  .footer-links { gap: 28px; }
  .footer-brand-col { max-width: none; }
  .footer-disc { font-size: 13.5px; }

  /* --- Modal -------------------------------------------------------- */
  .modal-panel { padding: 26px 20px; border-radius: 14px; }
  .modal-h { font-size: 21px; }
  .modal-panel p { font-size: 15.5px; }

  /* Ambient canvas is expensive and barely visible on a phone */
  #neuralCanvas { display: none; }
}

/* Very small phones */
@media (max-width: 380px) {
  .hero-h1 { font-size: 29px; }
  .memelab-sticker-tray { grid-template-columns: repeat(3, 1fr); }
  .mediakit-grid { grid-template-columns: 1fr; }
}

/* Coarse pointers: no hover-dependent affordances */
@media (hover: none) {
  .mascot-hint { opacity: 1; }
  .memelab-tip::after { content: ' · tap a sticker to add it'; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mascot-floating { animation: none !important; }
  .mobile-drawer { transition: none; }
}


/* ==========================================================================
   V6.0 — LATE OVERRIDES (must come after the originals they replace)
   ========================================================================== */

/* Mascot float now carries the cursor lean, so both can run at once */
@keyframes mascotFloat {
  0%, 100% {
    transform: translate(var(--lean-x, 0px), var(--lean-y, 0px)) rotate(var(--lean-r, 0deg));
  }
  50% {
    transform: translate(var(--lean-x, 0px), calc(var(--lean-y, 0px) - 12px)) rotate(var(--lean-r, 0deg));
  }
}

.mascot-floating {
  transition: filter 0.25s ease;
}

/* Trade tape rows */
.trade-col-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.trade-tag { font-weight: 700; flex: none; }
.trade-col-right { text-align: right; flex: none; }
.trade-effect { font-size: 12px; }
.trade-addr { font-size: 12px; color: var(--text-dim); }

.trade-stream-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

/* Oracle decoder ping feedback */
.oracle-card.is-pinged {
  border-color: var(--accent-rh-green);
  box-shadow: 0 0 26px rgba(204, 255, 0, 0.18);
}

/* The chart needs a predictable box for the canvas to measure */
.canvas-container { position: relative; }
#chartCanvas { display: block; width: 100%; height: 100%; }

/* Ribbon pins above the sticky header; JS keeps body padding in sync */

/* The ribbon is fixed over scrolling content, so it needs an opaque ground.
   The amber wash sits on top of that instead of being the whole background. */


/* Grid/flex children default to min-width:auto, which means a wide non-wrapping
   child can force its track wider than the viewport. This is what made the
   scrollytelling column resolve to 450px inside a 393px screen. */
.scrolly-inner-layout > *,
.hero-layout > *,
.terminal-layout > *,
.underlying-layout > *,
.tokenomics-layout > *,
.memelab-layout > *,
.holdings-grid > *,
.fact-grid > *,
.buy-step > *,
.roadmap-phase > * {
  min-width: 0;
}

.chapter-metric-strip { flex-wrap: wrap; }
.augen-telemetry-tag { max-width: 100%; overflow-wrap: anywhere; }

/* ==========================================================================
   MOBILE HEADER DIET
   Ribbon + ticker + navbar were eating 194px of an 852px screen.
   ========================================================================== */
@media (max-width: 640px) {
  /* The explainer collapses to a tap target; the label is kept for screen readers */


  .ticker-tape-bar { padding: 4px 16px; font-size: 11.5px; }
  .ticker-tape-inner { gap: 2px 10px; }
  .ticker-status-badge { gap: 5px; }
  .navbar-fullwidth { padding: 6px 16px; }
  .brand-pfp-box { width: 34px; height: 34px; }
  .nav-toggle { width: 38px; height: 38px; }
}

@media (max-width: 640px) {
  /* Primary CTA gets the full row; the two secondaries share the next one,
     so the mascot still peeks above the fold. */
  .hero-cta-group > *:first-child { flex: 1 1 100%; }
  .hero-cta-group > *:not(:first-child) { flex: 1 1 calc(50% - 5px); }
  .hero-cta-group > *:not(:first-child) span { font-size: 14.5px; }
}

/* Swap tabs must stay on one line or the pill row goes ragged */
.swap-tab-btn { white-space: nowrap; }

@media (max-width: 640px) {
  .swap-mode-tabs { display: flex; }
  .swap-tab-btn { flex: 1 1 0; font-size: 14px; padding: 11px 4px; }
}


/* ==========================================================================
   SCROLLYTELLING — STACKED PRESENTATION
   Used on phones and wherever the window cannot scroll (content-sized
   iframes), where the pinned version would strand the reader on step 01.
   Each chapter carries its own image instead of sharing one pinned stage.
   ========================================================================== */

/* Hidden while the pinned stage is doing the work */
.chapter-inline-figure { display: none; }

body.scrolly-stacked .scrolly-container,
body.scrolly-stacked .scrolly-sticky-stage {
  position: relative;
  height: auto;
  overflow: visible;
}
body.scrolly-stacked .scrolly-sticky-stage { padding: 20px 0 60px; }

body.scrolly-stacked .scrolly-inner-layout {
  grid-template-columns: 1fr;
  gap: 0;
}

/* The shared pinned stage has no job in stacked mode */
body.scrolly-stacked .scrolly-mascot-stage { display: none; }

body.scrolly-stacked .scrolly-chapter-block {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  padding: 40px 0;
  border-top: 1px solid var(--border-hairline);
}
body.scrolly-stacked #chapter0 { border-top: none; }

body.scrolly-stacked .chapter-inline-figure { display: block; }

/* Base presentation for the per-chapter image. This was lost in an earlier
   rewrite, which left the raw <img> at its natural width and overflowing. */
.chapter-inline-figure {
  margin: 0 0 22px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-green-subtle);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  background: #05070a;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  min-width: 0;
}
.chapter-inline-figure img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

/* Wide stacked (artifact preview on a laptop): image beside the words.
   The .chapter-copy wrapper is what makes this a clean two-column pair —
   without it the badge, heading, body and tags each become their own grid
   row and stretch to match the image. */
@media (min-width: 860px) {
  body.scrolly-stacked .scrolly-chapter-block {
    display: grid !important;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 48px;
    align-items: center;
    padding: 56px 0;
  }
  body.scrolly-stacked .chapter-inline-figure {
    margin: 0;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    justify-self: center;
    width: 100%;
  }
  /* The middle chapter mirrors, so the run doesn't read as three identical rows */
  body.scrolly-stacked #chapter1 { grid-template-columns: 1.08fr 0.92fr; }
  body.scrolly-stacked #chapter1 .chapter-inline-figure { order: 2; }
}

/* In stacked mode the stepper is decoration — the chapters are all visible */
body.scrolly-stacked .scrolly-stepper-nav { display: none; }

/* ---- Phones: same treatment, driven by the breakpoint ---- */
@media (max-width: 980px) {
  .scrolly-mascot-stage { display: none; }

  .scrolly-chapter-block {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 34px 0;
    margin-bottom: 0;
    border-top: 1px solid var(--border-hairline);
  }
  .scrolly-chapter-block:first-of-type { border-top: none; padding-top: 8px; }

  .chapter-inline-figure { display: block; }

  .scrolly-sticky-stage { padding: 20px 0 40px; }
  .scrolly-inner-layout { gap: 0; }
}

@media (max-width: 640px) {
  .chapter-inline-figure { aspect-ratio: 3 / 2; border-radius: 14px; margin-bottom: 18px; }
}

/* Hard ceilings on the vh-driven scrollytelling boxes.
   In a content-sized iframe the viewer grows the frame to fit the content,
   which grows 280vh, which grows the content again — a runaway that reached
   33 million pixels in testing. These caps are far above any real monitor,
   so they never bite on a normal page but they stop the loop dead. */
/* El techo aplica SOLO al modo pegajoso, que es el que se mide en vh y el
   unico que podia dispararse. En pantalla estrecha el escenario apila sus
   tres capitulos y necesita crecer: con el techo puesto se recortaban 316px
   de texto y la seccion siguiente se le montaba encima. */
@media (min-width: 981px) {
  body:not(.scrolly-stacked) .scrolly-sticky-stage { max-height: 1600px; }
  body:not(.scrolly-stacked) .scrolly-container { max-height: 4800px; }
}

/* ==========================================================================
   HERO MASCOT — POSE STACK
   Three cut-outs stacked in one box, cross-faded. The cat idles standing,
   flicks a paw every so often, and switches to the sprint pose when clicked.
   ========================================================================== */
.mascot-poses {
  position: relative;
  display: block;
  height: 540px;
  max-height: 620px;
}

.mascot-pose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.22s ease, transform 0.32s var(--ease-spring);
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.mascot-pose.is-active {
  opacity: 1;
  transform: scale(1);
}

/* The wave is a quick flick, so it reads as a gesture rather than a dissolve */
.mascot-poses[data-state="wave"] .mascot-pose[data-pose="wave"] { transition-duration: 0.12s; }

@media (max-width: 640px) {
  .mascot-poses { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-pose { transition: none; }
}

/* ==========================================================================
   HERO MASCOT — SPRITE FILM
   The turn-and-sit animation lives in one transparent WebP grid. It plays
   once when the hero comes into view and rests on the final sitting frame.
   The <img> underneath is both the fallback and what phones get instead of
   downloading 1.5MB of sprite sheet.
   ========================================================================== */
.mascot-stage {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  aspect-ratio: 310 / 331;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.mascot-rest {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
}


/* The old pose-stack rules no longer apply to anything, but a stale
   `height: 540px` on .mascot-art-img would still fight the stage. */
.mascot-stage.mascot-floating { height: auto; max-height: none; }

@media (max-width: 640px) {
  .mascot-stage { max-width: 262px; }
}

/* Once the sprite film is running the still pose must go, or its transparent
   artwork shows a second cat through the animated one. */
.mascot-stage.film-on .mascot-rest {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   WAITING STATES — before the pool exists
   ========================================================================== */
.tape-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px 18px;
  text-align: center;
  font-family: var(--font-mono);
}
.tape-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.tape-empty-sub {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* A disabled amount field should read as "not yet", not as broken */
#swapInAmount:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The media kit is its own section now, so it drops the divider it carried
   when it hung off the bottom of the meme gallery. */
.mediakit-standalone {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* The tape's bottom fade exists to cut off a scrolling list. With the empty
   state there is nothing to cut, so it just reads as a stray dark block. */
.tape-scroll:has(.tape-empty)::after { display: none; }

/* Hero clip: same box as the sprite film, chosen at runtime depending on
   whether the browser actually composites WebM alpha. */
.mascot-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}
.mascot-video.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mascot-video { display: none; }
}

/* ==========================================================================
   BREATHING ROOM & SECTION IDENTITY
   Sections were all the same flat slab at 80–90px of padding, which made the
   page read as one long scroll with no rhythm. More air, and alternating
   ground tones so each section registers as its own place.
   ========================================================================== */

:root {
  --section-pad: 132px;
  --bg-lift: #080a0f;
}

/* `main > section` alone loses to the older `.section-tokenomics` rules,
   which are a class and therefore more specific. The [id] attribute lifts
   these above them without having to list every class by hand. */
main > section[id] {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  position: relative;
}

/* The scrollytelling drives its own spacing from a pinned stage */
main > section[id].scrolly-showcase-section { padding: 0; }

/* ==========================================================================
   TERRENOS DE SECCION — BLANCO Y NEGRO PUROS
   Dos fondos alternados, sin grises intermedios: #000 y #fff. El texto de
   cuerpo tambien es puro; solo las etiquetas mas chicas bajan un escalon,
   o la pagina pierde toda jerarquia de color y queda plana.
   El verde de marca cambia de papel: sobre negro es texto (19,56:1), sobre
   blanco es ilegible (1,18:1) y solo sirve de relleno. Por eso todo lo que
   pinte verde como TEXTO usa --accent-on-ground y no el token de marca.
   ========================================================================== */
main > section[id].ground-dark,
.ground-dark {
  --ground: #000000;
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --text-muted: #ffffff;
  --text-dim: #b4b4b4;
  --border-hairline: rgba(255, 255, 255, 0.14);
  --tint-1: rgba(255, 255, 255, 0.03);
  --tint-2: rgba(255, 255, 255, 0.06);
  --tint-3: rgba(255, 255, 255, 0.10);
  --line-1: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);
  --bg-surface: #0b0b0b;
  --bg-surface-2: #131313;
  --bg-card: rgba(16, 16, 16, 0.88);
  --chart-grid: rgba(255, 255, 255, 0.1);
  --chart-grid-soft: rgba(255, 255, 255, 0.06);
  --chart-label: #c4c4c4;
  --chart-label-dim: #8f8f8f;
  --accent-on-ground: #ccff00;
  --accent-amber: #ccff00;
  --accent-amber-wash: rgba(204, 255, 0, 0.12);
  background: var(--ground);
  color: var(--text-secondary);
}

main > section[id].ground-light,
.ground-light {
  --ground: #ffffff;
  --text-primary: #000000;
  --text-secondary: #000000;
  --text-muted: #000000;
  --text-dim: #4b4b4b;
  --border-hairline: rgba(0, 0, 0, 0.14);
  --tint-1: rgba(0, 0, 0, 0.025);
  --tint-2: rgba(0, 0, 0, 0.05);
  --tint-3: rgba(0, 0, 0, 0.085);
  --line-1: rgba(0, 0, 0, 0.09);
  --line-2: rgba(0, 0, 0, 0.15);
  --line-3: rgba(0, 0, 0, 0.24);
  --bg-surface: #f4f4f4;
  --bg-surface-2: #ebebeb;
  --bg-card: rgba(0, 0, 0, 0.03);
  --chart-grid: rgba(0, 0, 0, 0.11);
  --chart-grid-soft: rgba(0, 0, 0, 0.07);
  --chart-label: #333333;
  --chart-label-dim: #5c5c5c;
  --accent-on-ground: #4a6300;
  --accent-amber: #4a6300;
  --accent-amber-wash: rgba(74, 99, 0, 0.12);
  background: var(--ground);
  color: var(--text-secondary);
}

/* Los paneles con fondo oscuro propio dentro de una seccion blanca tienen que
   restablecer los tokens oscuros, o su contenido hereda texto negro sobre
   fondo negro. */
.ground-light .oracle-card,
.ground-light .chart-card,
.ground-light .tape-card,
.ground-light .overclock-card,
.ground-light .holding-item,
.ground-light .hero-contract-box,
.ground-light .swap-terminal-box {
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --text-muted: #ffffff;
  --text-dim: #b4b4b4;
  --border-hairline: rgba(255, 255, 255, 0.14);
  --tint-1: rgba(255, 255, 255, 0.03);
  --tint-2: rgba(255, 255, 255, 0.06);
  --tint-3: rgba(255, 255, 255, 0.10);
  --line-1: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);
  --chart-grid: rgba(255, 255, 255, 0.1);
  --chart-grid-soft: rgba(255, 255, 255, 0.06);
  --chart-label: #c4c4c4;
  --chart-label-dim: #8f8f8f;
  --accent-on-ground: #ccff00;
  --accent-amber: #ccff00;
  --accent-amber-wash: rgba(204, 255, 0, 0.12);
  color: var(--text-secondary);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
}

/* En blanco el verde de marca no se usa como texto. */
.ground-light .hero-badge-capsule,
.ground-light .oracle-badge,
.ground-light .oracle-chip {
  background: rgba(90, 120, 0, 0.12);
}

/* Los botones si lo conservan: ahi el verde es relleno, no texto. */
.ground-light .btn-rh-primary {
  background: var(--accent-rh-green);
  color: #000000;
}

.ground-light .scrolly-step-tab {
  background: var(--tint-2);
  color: var(--text-muted);
}
.ground-light .scrolly-step-tab:hover {
  background: var(--tint-3);
  color: var(--text-primary);
}
.ground-light .scrolly-step-tab.active {
  background: var(--accent-rh-green);
  color: #000000;
}
.ground-light .scrolly-step-tab.active .step-idx { color: #000000; opacity: .6; }

/* Sobre blanco una sombra negra fuerte se ve sucia. */
.ground-light .fact-card,
.ground-light .holding-item:hover,
.ground-light .neural-decoder-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
}

/* El resplandor que sigue al mouse se apaga en blanco. */
.ground-light .spotlight-sheen { display: none; }

/* El hero deja pasar el canvas de particulas que vive detras de todo
   (#neuralCanvas, position:fixed). Un fondo opaco aqui lo tapaba, que es
   por que los puntos solo se veian en el footer. El degradado mantiene
   legible el titular sin volver a sellar la seccion. */
/* Hero y footer no pintan fondo: dejan ver el negro puro del body y, encima,
   el canvas de particulas (#neuralCanvas, position:fixed, z-index 0). Pintar
   cualquier color aqui —aunque sea negro— tapaba los puntos. */
main > section[id].hero {
  background: transparent;
  /* En pantallas altas (4K a zoom normal) el hero se quedaba corto y asomaba
     la seccion blanca de abajo. Se estira a la altura de la ventana menos la
     cabecera fija, sin dejar de crecer si el contenido pide mas. */
  min-height: calc(100vh - var(--header-h, 92px));
  min-height: calc(100svh - var(--header-h, 92px));
  display: flex;
  align-items: center;
}
main > section[id].hero > .container { width: 100%; }

/* The hairline borders are redundant once the tone alternates */
.section-underlying,
.section-tokenomics,
.section-buy,
.section-memelab,
.section-roadmap,
.section-faq,
.section-contracts,
.live-holdings-bar { border-top: none; }
.live-holdings-bar { border-bottom: none; }

/* Give the headings room to land before their content */
.section-eyebrow-rh { margin-bottom: 14px; }
.section-h2 { margin-bottom: 18px; }
.section-lede { margin-bottom: 44px; line-height: 1.7; }
.section-head-row { margin-bottom: 40px; }

/* Internal rhythm inside the denser blocks */
.holdings-grid { gap: 24px; }
.terminal-layout { gap: 24px; }
.tokenomics-layout { gap: 68px; }
.memelab-layout { gap: 52px; }
.buy-step { padding: 34px 0; }
.rm-body { padding-bottom: 42px; }
.faq-item summary { padding: 24px 0; }
.faq-body { padding-bottom: 28px; }
.mediakit-grid { gap: 18px; }

@media (max-width: 980px) {
  :root { --section-pad: 96px; }
  .tokenomics-layout { gap: 44px; }
  .memelab-layout { gap: 32px; }
}

@media (max-width: 640px) {
  :root { --section-pad: 68px; }
  .section-lede { margin-bottom: 32px; }
  .buy-step { padding: 26px 0; }
  .rm-body { padding-bottom: 30px; }
  .holdings-grid { gap: 14px; }
}

/* ==========================================================================
   POSTER PASS
   The page read as an instrument panel: small type, a narrow centred column,
   and fourteen competing sections. Ponke reads as a poster — big type, content
   reaching the edges, one idea per screen. These rules move us toward that.
   ========================================================================== */

/* Headlines carry the page now, so they get real scale */
.section-h2 {
  font-size: clamp(30px, 4.2vw, 58px);
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.hero-h1 { font-size: clamp(34px, 7vw, 104px); letter-spacing: -0.04em; }
.hero-lead { font-size: 19px; line-height: 1.65; max-width: 44ch; }

.section-eyebrow-rh {
  font-size: 13px;
  letter-spacing: 0.18em;
}
.section-lede { font-size: 18px; max-width: 58ch; }

/* Wide screens: let the grids actually use the room */
@media (min-width: 1200px) {
  .holdings-grid { gap: 28px; }
  .oracle-grid { gap: 32px; }
  .terminal-layout { grid-template-columns: 1.55fr 1fr; gap: 28px; }
  .hero-layout { grid-template-columns: 1fr 1fr; gap: 56px; }
  .memes-masonry, .mediakit-grid { gap: 22px; }
}

/* Cards were sized for small type; they need room for the new scale */
.fact-card { padding: 26px; }
.fact-value { font-size: 38px; }
.holding-item { padding: 26px 28px; }
.holding-number { font-size: clamp(26px, 2.4vw, 38px); }
.proof-item { padding: 16px 20px; }
.u-stat { padding: 22px; }
.u-stat-value { font-size: 20px; }
.buy-step-h { font-size: 23px; }
.rm-h { font-size: 24px; }
.faq-item summary { font-size: 19px; }
.chapter-h3 { font-size: clamp(24px, 2.6vw, 34px); }
.donut-center-n { font-size: 44px; }

/* Every tap target reaches the 44px a finger needs */
.btn-mini-copy,
.social-chip,
.tf-btn,
.memelab-mini-btn,
.hud-btn,
.drawer-links a { min-height: 52px; }
.footer-col a { display: inline-block; padding: 5px 0; }
.nav-menu a { padding: 10px 0; }

@media (max-width: 980px) {
  .container { padding: 0 32px; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .hero-lead { font-size: 17px; }
  .section-lede { font-size: 16.5px; }
  .fact-card { padding: 18px; }
  .holding-item { padding: 20px; }
}

/* ==========================================================================
   MERGED BLOCKS
   Sections that used to stand alone now live inside a parent. They keep their
   old id so every existing anchor still resolves, and get a rule above them
   so the join reads as a deliberate chapter break rather than a collision.
   ========================================================================== */
.merged-block {
  margin-top: 96px;
  padding-top: 80px;
  border-top: 1px solid var(--border-hairline);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.merged-block .section-h2 { font-size: clamp(26px, 3.2vw, 42px); }

@media (max-width: 640px) {
  .merged-block { margin-top: 56px; padding-top: 48px; }
}

/* Header and ribbon must share the container's measure, or the logo sits
   tight against the glass while the content below has 48px of air. */
.navbar-fullwidth { padding: 10px 48px; }
.ticker-tape-bar { padding: 6px 48px; }
.nav-fullwidth-inner, .ticker-tape-inner { max-width: 1520px; }

/* The hero column grew with the type; the mascot needs to keep pace and stop
   colliding with its own hint. */
.mascot-stage { max-width: 620px; }
.mascot-hint { bottom: -6px; }
.hero-mascot-box { align-items: center; justify-content: center; padding: 8px 0; }

/* 132px between sections plus 96px at every merged block was too much air
   once the blocks carry their own rule. */
:root { --section-pad: 108px; }

@media (max-width: 980px) {
  .navbar-fullwidth { padding: 8px 32px; }
  :root { --header-h: 64px; }
  .ticker-tape-bar { padding: 5px 32px; }
  :root { --section-pad: 84px; }
}
@media (max-width: 640px) {
  .navbar-fullwidth { padding: 6px 20px; }
  .ticker-tape-bar { padding: 4px 20px; }
  .mascot-stage { max-width: 262px; }
  :root { --section-pad: 64px; }
}

/* ==========================================================================
   MARQUEE
   Two identical runs side by side, the pair translated by exactly -50%, so the
   loop is seamless. Full-bleed on purpose — it is the one element that ignores
   the container and touches both edges.
   ========================================================================== */
.marquee {
  overflow: hidden;
  background: var(--accent-rh-green);
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding: 16px 0;
  position: relative;
  z-index: 2;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeSlide 38s linear infinite;
}

.marquee-run {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #050608;
}
.marquee-run b { font-weight: 700; }
.marquee-run span { font-weight: 400; opacity: 0.72; }
.marquee-run i { font-style: normal; opacity: 0.45; }

@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@media (max-width: 640px) {
  .marquee { padding: 12px 0; }
  .marquee-run { font-size: 14px; gap: 16px; padding-right: 16px; }
}

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

/* ==========================================================================
   LLUVIA BINARIA
   Es el fondo de la seccion entera, no una banda. Los caracteres caen por
   CELDAS, no por pixeles sueltos: dibujar cada glifo entero en su casilla es
   lo que hace que se distinga un 1 de un 0. Con desplazamiento continuo el
   trazo vertical del 1 se confunde con la estela y solo se leen los ceros.
   ========================================================================== */
main > section[id].has-rain {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.rain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
/* Velo detras del encabezado: sin esto la lluvia le pasa por encima al
   titular y hay que esforzarse para leer. Se desvanece hacia abajo, donde
   las tarjetas ya traen su propio fondo. */
main > section[id].has-rain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 26% at 28% 16%,
      rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 34%, rgba(0, 0, 0, 0.62) 100%);
}
main > section[id].has-rain > .container { position: relative; z-index: 2; }

.rain-toggle {
  position: absolute;
  right: 48px;
  bottom: 28px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #cfd8de;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.rain-toggle:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.rain-toggle:focus-visible { outline: 2px solid var(--accent-rh-green); outline-offset: 2px; }
.rain-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-rh-green); }
.rain-toggle[aria-pressed="false"] .rain-dot { background: #5d6873; }

@media (max-width: 980px) { .rain-toggle { right: 32px; bottom: 22px; } }
@media (max-width: 640px) { .rain-toggle { right: 20px; bottom: 18px; } }

/* Sobre terreno claro las tarjetas del oracle iban al 75% de opacidad, lo que
   sobre blanco daba un gris. Se vuelven negras solidas. */
.ground-light .oracle-card,
.ground-light .chart-card,
.ground-light .tape-card,
.ground-light .overclock-card,
.ground-light .holding-item,
.ground-light .swap-terminal-box {
  background: #000000;
}


/* ==========================================================================
   CHIPS DE REDES — SOLO LOGO
   El nombre no aporta: el icono de X y el de Telegram se reconocen solos, y
   sin texto la fila ocupa la mitad. El nombre sigue en el DOM para lectores
   de pantalla.
   ========================================================================== */
.social-chip > span:not(.social-soon-tag) {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.social-chip {
  gap: 6px;
  padding-left: 14px;
  padding-right: 14px;
}
.social-chip svg { width: 17px; height: 17px; }

/* ==========================================================================
   TITULAR QUE SE TECLEA
   El fantasma es una copia invisible de la frase final: ocupa la caja
   definitiva desde el primer fotograma, asi el resto del hero no se mueve
   mientras la frase crece. La capa viva va encima, en la misma caja.
   ========================================================================== */
.typed-a11y {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.typed-stage { display: block; position: relative; }
/* pre-wrap conserva el espacio final mientras se teclea: sin el, el cursor
   salta hacia atras cada vez que la palabra en curso empieza por espacio. */
.typed-ghost,
.typed-live { white-space: pre-wrap; }
.typed-ghost { visibility: hidden; }
.typed-live { position: absolute; top: 0; left: 0; right: 0; }

/* A 84px el glifo de bloque queda como un ladrillo. Se estrecha por escala
   en vez de cambiar de caracter, asi conserva altura y linea base. */
.hero-h1 .terminal-cursor {
  transform: scaleX(0.3);
  transform-origin: left center;
  margin-left: 0;
}

/* La palabra que se corrige va en color plano, no en degradado: sobre cuatro
   letras el degradado deja la primera casi blanca y "G" parece de "Artificial". */
.hero-h1 .typed-word { color: var(--accent-rh-green); }

/* El boton del nav cambia de texto por JS ("Trade $AGI" en el HTML, "Launch
   status" antes del lanzamiento) y se ensanchaba al vuelo: era el salto de
   layout que medía Lighthouse. Se reserva el ancho del texto mas largo. */
.btn-nav-cta { min-width: 170px; text-align: center; }

/* La fila de chips sociales del hero la rellena el JS. Con red lenta el
   navegador pinta antes de que llegue app.js, la fila mide 0, y al aparecer
   los chips el hero (centrado con flex) se recoloca entero: ese era el
   salto de layout que medía Lighthouse. Se reserva la altura del chip. */
.hero .social-row[data-social-row] { min-height: 52px; }
/* La fila vacia se ocultaba con :empty, asi que el min-height no llegaba a
   aplicarse y el hueco aparecia de golpe al rellenarla el JS. En el hero se
   pinta siempre, vacia o no, con la altura del chip ya reservada. */
.hero .social-row[data-social-row]:empty { display: flex; min-height: 52px; }

/* La direccion de cada trade ahora es un enlace a su transaccion. */
a.trade-addr { color: inherit; text-decoration: none; }
a.trade-addr:hover { text-decoration: underline; }

/* Enlace de verificacion bajo la cifra de quemado. */
.holding-sub a { color: var(--accent-on-ground); text-decoration: none; }
.holding-sub a:hover { text-decoration: underline; }

/* Recibos de quema bajo la tarjeta: cada linea es una transaccion real. */
.burn-receipts { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 12px; }
.burn-receipts-h { color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; margin-bottom: 2px; }
.burn-receipts a { color: var(--text-secondary); text-decoration: none; }
.burn-receipts a:hover { color: var(--accent-on-ground); text-decoration: underline; }

/* Que la flecha de los enlaces de verificacion no se quede sola en la linea siguiente. */
.holding-sub a, .burn-receipts a { white-space: nowrap; }

/* ==========================================================================
   AGI UTILITY SUITE — WEB3, TELEMETRY, IN-APP SWAP, MEME VIRAL, AI TERMINAL
   ========================================================================== */

/* 1. WEB3 WALLET BUTTON & CHIPS — Matching Site Secondary Rectangular Aesthetic */
.btn-wallet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--tint-2);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 6px;
  border: 1px solid var(--border-hairline);
  cursor: pointer;
  transition: all var(--transition-smooth);
  text-decoration: none;
  white-space: nowrap;
}
.btn-wallet:hover {
  background: var(--tint-3);
  border-color: var(--accent-rh-green);
  color: #ffffff;
  transform: translateY(-1px);
}
.btn-wallet.is-connected {
  border-color: var(--border-green-subtle);
  background: rgba(204, 255, 0, 0.06);
  color: var(--accent-rh-green);
}
.btn-wallet.is-connected:hover {
  background: rgba(204, 255, 0, 0.12);
  border-color: var(--accent-rh-green);
}
.wallet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #757f88;
  display: inline-block;
  transition: background 0.3s ease;
}
.wallet-dot.online {
  background: var(--accent-rh-green);
  box-shadow: 0 0 8px var(--accent-rh-green);
}
.wallet-dot.wrong-chain {
  background: #f0a35e;
  box-shadow: 0 0 8px #f0a35e;
}
.wallet-user-balances {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* 2. ESCROW TELEMETRY & BURN VERIFICATION */
.escrow-telemetry-strip {
  margin-top: 24px;
  padding: 16px 20px;
  background: rgba(14, 18, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
}
.escrow-status-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.escrow-chain-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 200, 5, 0.12);
  border: 1px solid rgba(0, 200, 5, 0.3);
  color: var(--accent-rh-green);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.escrow-values {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  color: var(--text-secondary);
}
.escrow-values strong {
  color: var(--text-primary);
  font-size: 13px;
}
.escrow-link {
  color: var(--accent-rh-green);
  text-decoration: none;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.escrow-link:hover { text-decoration: underline; }

/* 3. IN-APP SWAP WEB3 LAYER */
.swap-wallet-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}
.swap-wallet-strip .max-btn {
  background: rgba(0, 200, 5, 0.15);
  border: 1px solid rgba(0, 200, 5, 0.4);
  color: var(--accent-rh-green);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 6px;
}
.swap-wallet-strip .max-btn:hover {
  background: var(--accent-rh-green);
  color: #000;
}
.swap-action-container {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-swap-execute {
  width: 100%;
  padding: 14px 20px;
  font-family: var(--font-display, 'Chakra Petch', sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.btn-swap-execute.is-primary {
  background: var(--accent-rh-green);
  color: #000000;
}
.btn-swap-execute.is-primary:hover:not(:disabled) {
  background: #00e806;
  box-shadow: 0 0 20px rgba(0, 200, 5, 0.4);
}
.btn-swap-execute.is-approve {
  background: #ffaa00;
  color: #000000;
}
.btn-swap-execute.is-switch {
  background: #ff5500;
  color: #ffffff;
}
.btn-swap-execute:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.swap-tx-toast {
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.swap-tx-toast.pending {
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.35);
  color: #ffaa00;
}
.swap-tx-toast.success {
  background: rgba(0, 200, 5, 0.12);
  border: 1px solid rgba(0, 200, 5, 0.35);
  color: var(--accent-rh-green);
}
.swap-tx-toast.error {
  background: rgba(255, 50, 50, 0.12);
  border: 1px solid rgba(255, 50, 50, 0.35);
  color: #ff5555;
}

/* 4. MEME LAB VIRAL BUTTONS */
.memelab-viral-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
.memelab-btn-secondary {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.memelab-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.memelab-btn-secondary.is-copied {
  background: rgba(0, 200, 5, 0.2);
  border-color: var(--accent-rh-green);
  color: var(--accent-rh-green);
}

/* 5. OVERCLOCK GAMIFICATION & PFLOPS MINER */
.overclock-miner-bar {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(0, 200, 5, 0.05);
  border: 1px dashed rgba(0, 200, 5, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
}
.miner-score-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.miner-score-wrap strong {
  color: var(--accent-rh-green);
  font-size: 14px;
}
.miner-rank-tag {
  background: rgba(0, 200, 5, 0.15);
  color: var(--accent-rh-green);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.btn-mine-click {
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--accent-rh-green);
  color: #000000;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.btn-mine-click:active {
  transform: scale(0.94);
  box-shadow: 0 0 16px rgba(0, 200, 5, 0.6);
}

/* 6. AGI NEURAL TERMINAL (AI CHATBOT) — Clean Rectangular Styling */
.agi-chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: #090c10;
  border: 1px solid var(--border-green-subtle);
  border-radius: 6px;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75), 0 0 16px rgba(204, 255, 0, 0.15);
  cursor: pointer;
  transition: all var(--transition-smooth);
}
.agi-chat-fab:hover {
  background: #10141a;
  border-color: var(--accent-rh-green);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 24px rgba(204, 255, 0, 0.3);
}
.agi-chat-fab-avatar {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--border-green-subtle);
}

.agi-chat-modal {
  position: fixed;
  bottom: 84px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: #090c10;
  border: 1px solid var(--border-green-subtle);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 24px rgba(204, 255, 0, 0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.agi-chat-modal.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.agi-chat-header {
  padding: 12px 16px;
  background: rgba(14, 18, 22, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.agi-chat-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-rh-green);
}
.agi-chat-close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.agi-chat-close-btn:hover { color: #ffffff; }

.agi-chat-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.agi-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  line-height: 1.45;
}
.agi-chat-msg.bot {
  align-self: flex-start;
  background: rgba(20, 24, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  border-radius: 12px 12px 12px 2px;
  color: #e4e7eb;
}
.agi-chat-msg.bot strong { color: var(--accent-rh-green); }
.agi-chat-msg.user {
  align-self: flex-end;
  background: rgba(0, 200, 5, 0.15);
  border: 1px solid rgba(0, 200, 5, 0.4);
  padding: 10px 14px;
  border-radius: 12px 12px 2px 12px;
  color: #ffffff;
}

.agi-chat-chips {
  padding: 8px 16px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.agi-chat-chips::-webkit-scrollbar { display: none; }
.agi-chip-btn {
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 4px 10px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.agi-chip-btn:hover {
  background: rgba(0, 200, 5, 0.15);
  border-color: var(--accent-rh-green);
  color: #ffffff;
}

.agi-chat-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 8px;
}
.agi-chat-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 13px;
}
.agi-chat-input:focus {
  outline: none;
  border-color: var(--accent-rh-green);
  box-shadow: 0 0 10px rgba(0, 200, 5, 0.2);
}
.agi-chat-send-btn {
  background: var(--accent-rh-green);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  color: #000000;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.agi-chat-send-btn:hover { background: #00e806; }