@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
      --bg: #f5f0e8;
      --bg2: #ede6d6;
      --bg3: #e4dbc8;
      --border: #c8b89a;
      --gold: #8b6914;
      --gold-dim: #b8922a;
      --gold-light: #d4aa50;
      --burgundy: #5c1a2a;
      --burgundy-dark: #3d1019;
      --burgundy-mid: #7a2535;
      --red: #8b1a1a;
      --green: #1a4d2a;
      --text: #1e0e08;
      --text-dim: #7a5c45;
      --chart-bg: #ffffff;
      --chart-grid: #ede6d6;
      --chart-tick: #9a7a60;
      --ingredient-bg: #ffffff;
      --stat-bg: #ede6d6;
      --hero-price-color: #3d1019;
    }

    [data-theme="dark"] {
      --bg: #0d0d0b;
      --bg2: #141410;
      --bg3: #1c1c17;
      --border: #2a2a22;
      --gold: #e8a020;
      --gold-dim: #a06c10;
      --gold-light: #e8a020;
      --burgundy: #2a2a22;
      --burgundy-dark: #0a0a08;
      --burgundy-mid: #1a1a14;
      --red: #d04040;
      --green: #4a9a5a;
      --text: #e8e0cc;
      --text-dim: #706860;
      --chart-bg: #141410;
      --chart-grid: #1c1c17;
      --chart-tick: #504840;
      --ingredient-bg: #141410;
      --stat-bg: #141410;
      --hero-price-color: #f0e6cc;
    }

    html { transition: background 0.3s, color 0.3s; }

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

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'IBM Plex Sans', sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      transition: background 0.3s, color 0.3s;
    }

    /* Faint paper texture overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.045;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23paper)'/%3E%3C/svg%3E");
      background-size: 400px 400px;
    }


    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
      position: relative;
      z-index: 1;
    }

    /* ── HEADER ── */
    header {
      background: var(--burgundy-dark);
      border-bottom: 4px solid var(--gold);
      padding: 0;
      transition: background 0.3s, border-color 0.3s;
    }

    .header-top {
      background: var(--burgundy);
      padding: 10px 0 8px;
      border-bottom: 1px solid var(--burgundy-mid);
    }

    .header-top-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header-main {
      padding: 18px 0 14px;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      gap: 16px;
      flex-wrap: wrap;
    }

    .header-inner > div:first-child {
      text-align: center;
    }

    .header-inner > div:last-child {
      position: absolute;
      right: 0;
    }

    .header-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }

    .header-buttons {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      color: #f0e8cc;
      text-transform: uppercase;
    }

    .logo span {
      color: var(--gold-light);
    }

    .logo-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold-light), transparent);
      margin: 4px 0 6px;
    }

    .logo-tagline {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--gold-dim);
      display: block;
      opacity: 0.8;
    }

    .header-date-weather {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.75);
      text-align: right;
    }

    .header-meta {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      color: rgba(240, 232, 204, 0.5);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* ── HERO PRICE ── */
    .hero {
      padding: 28px 0 28px;
      border-bottom: 2px solid var(--border);
    }

    /* ── HERO BADGE OUTER (spinning border wrapper) ── */
    @keyframes spin {
      0%   { --rotate: 0deg; }
      100% { --rotate: 360deg; }
    }

    .hero-badge-outer {
      flex: 1;
      min-width: 280px;
      padding: 3px;
      border-radius: 23px;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 4px 6px rgba(0,0,0,0.07),
        0 12px 32px rgba(61,16,25,0.18);
      transform: perspective(900px) rotateX(calc(var(--tilt-x, 0) * 1deg)) rotateY(calc(var(--tilt-y, 0) * 1deg)) scale(var(--hover-scale, 1));
      transition: transform 0.5s ease, box-shadow 0.5s ease;
    }

    .hero-badge-outer.tilt-active {
      transition: none;
    }

    @media (hover: hover) {
      .hero-badge-outer:hover {
        --hover-scale: 1.02;
        box-shadow:
          0 20px 40px rgba(0, 0, 0, 0.45),
          0 8px 16px rgba(0, 0, 0, 0.3);
      }
      [data-theme="dark"] .hero-badge-outer:hover {
        box-shadow:
          0 20px 40px rgba(0,0,0,0.45),
          0 8px 16px rgba(0,0,0,0.3),
          0 0 36px 8px rgba(212,170,80,0.2);
      }
      .hero-badge-outer:hover .hero-video-vignette {
        opacity: 0.4;
      }
    }

    .hero-badge-outer::before {
      content: "";
      position: absolute;
      width: 104%;
      height: 102%;
      top: -1%;
      left: -2%;
      border-radius: 23px;
      background: linear-gradient(
        var(--rotate),
        #fff0a0, #ffd700 43%, #c8860a
      );
      animation: spin 2.5s linear infinite;
      z-index: -1;
    }

    [data-theme="dark"] .hero-badge-outer::before {
      background: linear-gradient(
        var(--rotate),
        #fff0a0, #ffd700 43%, #c8860a
      );
    }

    /* ── HERO BADGE CARD ── */
    .hero-badge {
      background-image:
        url('Hero%20Card%20Images/FryUp.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 20px;
      padding: 36px 40px 32px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -2px 0 rgba(212,170,80,0.2),
        inset 0 0 40px rgba(5,1,4,1),
        inset 0 0 100px rgba(5,1,4,0.9);
      position: relative;
      overflow: hidden;
      animation: hero-glow-pulse 4.5s ease-in-out infinite;
    }


    [data-theme="dark"] .hero-badge-outer {
      box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 12px 32px rgba(0,0,0,0.4);
    }

    [data-theme="dark"] .hero-badge {
      background-image:
        url('Hero%20Card%20Images/FryUp.jpeg');
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 0 40px rgba(1,0,3,1),
        inset 0 0 100px rgba(1,0,3,0.95);
    }


    /* ── HERO BADGE SHINE ── */
    @keyframes badgeShine {
      0%   { left: -80%; }
      100% { left: 120%; }
    }

    .hero-shine {
      position: absolute;
      top: -10%;
      left: -80%;
      width: 45%;
      height: 120%;
      background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,248,220,0.14) 50%,
        transparent 80%
      );
      transform: skewX(-15deg);
      pointer-events: none;
      z-index: 5;
      opacity: 0;
      border-radius: 2px;
    }

    .hero-badge:hover .hero-shine {
      opacity: 1;
      animation: badgeShine 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    /* ── SIDE CARD SHINE (shared) ── */
    .card-shine {
      position: absolute;
      top: -10%;
      left: -80%;
      width: 45%;
      height: 120%;
      background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,248,220,0.1) 50%,
        transparent 80%
      );
      transform: skewX(-15deg);
      pointer-events: none;
      z-index: 4;
      opacity: 0;
      border-radius: 2px;
    }

    .afford-card:hover .card-shine,
    .since-card:hover .card-shine,
    .mover-card:hover .card-shine,
    .drop-card:hover .card-shine {
      opacity: 1;
      animation: badgeShine 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    /* ── SIDE CARD VIDEO ── */
    .card-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 16px;
      opacity: 0;
      transition: opacity 0.6s ease;
      z-index: 1;
      pointer-events: none;
    }

    .afford-card:hover .card-video,
    .since-card:hover .card-video,
    .mover-card:hover .card-video,
    .drop-card:hover .card-video {
      opacity: 1;
    }

    /* Noise/texture overlay */
    .hero-badge::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      opacity: 0.5;
    }

/* Gold top border accent */
    .hero-badge::after {
      content: '';
      position: absolute;
      top: 0; left: 40px; right: 40px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(232,180,80,0.8), transparent);
      border-radius: 0 0 2px 2px;
      z-index: 3;
    }

    /* Ensure noise overlay is above video */
    .hero-badge::before {
      z-index: 3;
    }

    /* ── HERO VIDEO ── */
    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 1;
      pointer-events: none;
    }

    .hero-video-vignette {
      position: absolute;
      inset: 0;
      border-radius: 20px;
      background-image: radial-gradient(ellipse 60% 60% at center, rgba(40,8,16,0.62) 0%, rgba(5,1,4,1) 100%);
      pointer-events: none;
      z-index: 2;
      transition: opacity 0.5s ease;
    }

    [data-theme="dark"] .hero-video-vignette {
      background-image: radial-gradient(ellipse 60% 60% at center, rgba(5,2,10,0.68) 0%, rgba(1,0,3,1) 100%);
    }

    .hero-badge:hover .hero-video {
      opacity: 1;
    }

    /* Ensure text content is above video layers */
    .hero-label,
    .hero-sub,
    .hero-price-row,
    .hero-actions {
      position: relative;
      z-index: 4;
    }

    /* ── ONS Info Button ─────────────────────────────────────── */
    .hero-info-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 10;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid rgba(212,170,80,0.5);
      background: rgba(212,170,80,0.12);
      color: var(--gold-light, #d4aa50);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: infoBtnPulse 3s ease-in-out infinite;
      transition: background 0.2s, border-color 0.2s;
    }
    .hero-info-btn:hover {
      background: rgba(212,170,80,0.25);
      border-color: rgba(212,170,80,0.8);
    }
    @keyframes infoBtnPulse {
      0%, 100% { box-shadow: 0 0 0px 0px rgba(212,170,80,0); opacity: 0.7; }
      50%       { box-shadow: 0 0 6px 2px rgba(212,170,80,0.4); opacity: 1; }
    }

    /* ── ONS Modal ───────────────────────────────────────────── */
    .ons-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0,0,0,0.55);
      align-items: center;
      justify-content: center;
    }
    .ons-modal-overlay.open {
      display: flex;
    }
    .ons-modal {
      background: rgba(40, 10, 18, 0.55);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(212,170,80,0.35);
      border-radius: 16px;
      padding: 28px 24px 24px;
      width: 235px;
      text-align: center;
      position: relative;
      box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,170,80,0.2);
    }
    .ons-modal-close {
      position: absolute;
      top: 10px; right: 14px;
      background: none; border: none;
      color: rgba(212,170,80,0.6);
      font-size: 20px; cursor: pointer;
    }
    .ons-modal-close:hover { color: var(--gold-light, #d4aa50); }
    .ons-modal-title {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(212,170,80,0.7);
      margin-bottom: 10px;
    }
    .ons-modal-date {
      font-family: 'Playfair Display', serif;
      font-size: 1.35rem;
      font-weight: 700;
      color: #d4aa50;
      margin-bottom: 6px;
    }
    .ons-modal-countdown {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: #e8e0cc;
      margin-bottom: 10px;
    }
    /* ── Social nudge popup ──────────────────────────────────────── */
    .social-nudge {
      position: fixed;
      background: rgba(30, 8, 14, 0.78);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(212,170,80,0.3);
      border-radius: 14px;
      padding: 12px 14px 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,170,80,0.1);
      z-index: 900;
      opacity: 0;
      transform: translateY(-6px) scale(0.96);
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
    }
    .social-nudge.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .social-nudge.dismissed {
      opacity: 0;
      transform: translateY(-6px) scale(0.96);
      pointer-events: none;
    }
    .social-nudge-arrow {
      position: absolute;
      top: -6px;
      width: 10px;
      height: 10px;
      background: rgba(30, 8, 14, 0.85);
      border-left: 1px solid rgba(212,170,80,0.3);
      border-top: 1px solid rgba(212,170,80,0.3);
      transform: rotate(45deg);
    }
    .social-nudge-close {
      position: absolute;
      top: 7px;
      right: 9px;
      background: none;
      border: none;
      color: rgba(212,170,80,0.4);
      font-size: 10px;
      cursor: pointer;
      line-height: 1;
      padding: 2px 4px;
      transition: color 0.2s;
    }
    .social-nudge-close:hover { color: rgba(212,170,80,0.85); }
    .social-nudge-emoji {
      font-size: 1.3rem;
      margin-bottom: 5px;
    }
    .social-nudge-title {
      font-family: 'Playfair Display', serif;
      font-size: 0.88rem;
      font-weight: 700;
      color: #d4aa50;
      margin-bottom: 4px;
      line-height: 1.2;
    }
    .social-nudge-body {
      font-family: Georgia, serif;
      font-size: 0.68rem;
      line-height: 1.5;
      color: rgba(232,224,204,0.7);
    }

    .ons-modal-note {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.55rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(232,224,204,0.4);
    }

    /* ── ONS Modal: MoM Summary ──────────────────────────────────── */
    .ons-modal {
      width: 280px;
    }
    .ons-modal-summary {
      text-align: left;
      margin-bottom: 0;
    }
    .modal-summary-header {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(212,170,80,0.9);
      margin-bottom: 6px;
    }
    .modal-summary-vs {
      color: rgba(212,170,80,0.45);
    }
    .modal-summary-total {
      font-family: 'Playfair Display', serif;
      font-size: 0.95rem;
      font-weight: 700;
      margin-bottom: 10px;
      line-height: 1.2;
    }
    .modal-summary-total.up   { color: #e8735a; }
    .modal-summary-total.down { color: #50c078; }
    .modal-summary-total.flat { color: rgba(232,224,204,0.6); }
    .modal-ing-list {
      display: flex;
      flex-direction: column;
      gap: 3px;
      margin-bottom: 4px;
    }
    .modal-ing-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
    }
    .modal-ing-icon {
      font-size: 0.75rem;
      width: 16px;
      text-align: center;
    }
    .modal-ing-name {
      flex: 1;
      color: rgba(232,224,204,0.65);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .modal-ing-mom {
      font-weight: 700;
      white-space: nowrap;
    }
    .modal-ing-mom.up   { color: #e8735a; }
    .modal-ing-mom.down { color: #50c078; }
    .modal-ing-mom.flat { color: rgba(232,224,204,0.4); }
    .ons-modal-divider {
      border: none;
      border-top: 1px solid rgba(212,170,80,0.15);
      margin: 14px 0 14px;
    }

    /* ── ONS Modal: Newsletter view ─────────────────────────────── */
    .ons-modal.newsletter-mode {
      width: min(460px, 92vw);
      padding: 0;
    }
    #onsModalNewsletter {
      display: flex;
      flex-direction: column;
      max-height: min(72vh, 560px);
    }
    .nl-text {
      overflow-y: auto;
      padding: 24px 22px 12px;
      scrollbar-width: thin;
      scrollbar-color: rgba(212,170,80,0.25) transparent;
    }
    .nl-text::-webkit-scrollbar { width: 4px; }
    .nl-text::-webkit-scrollbar-thumb { background: rgba(212,170,80,0.25); border-radius: 2px; }
    .nl-header {
      font-family: 'Playfair Display', serif;
      font-size: 1rem;
      font-weight: 700;
      color: #d4aa50;
      margin-bottom: 14px;
      line-height: 1.3;
    }
    .nl-section {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(212,170,80,0.7);
      margin: 16px 0 6px;
    }
    .nl-body {
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 0.78rem;
      line-height: 1.65;
      color: rgba(232,224,204,0.88);
      margin-bottom: 8px;
    }
    .nl-note {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.62rem;
      color: rgba(232,224,204,0.45);
      line-height: 1.5;
      margin-bottom: 8px;
    }
    @keyframes nlBtnBounceIn {
      0%   { opacity: 0; transform: scale(0.82); }
      60%  { opacity: 1; transform: scale(1.04); }
      80%  { opacity: 1; transform: scale(0.97); }
      100% { opacity: 1; transform: scale(1); }
    }
    .nl-read-more-btn {
      display: block;
      width: 100%;
      margin-top: 14px;
      padding: 9px 0;
      background: transparent;
      border: 1px solid rgba(212,170,80,0.4);
      border-radius: 8px;
      color: rgba(212,170,80,0.9);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(212,170,80,0.18), 0 0 22px rgba(212,170,80,0.07), inset 0 0 6px rgba(212,170,80,0.04);
      transition: border-color 0.25s, color 0.25s, box-shadow 0.25s, background 0.25s;
    }
    .ons-modal-overlay.open .nl-read-more-btn {
      animation: nlBtnBounceIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s both;
    }
    .nl-read-more-btn:hover {
      border-color: rgba(212,170,80,0.75);
      color: #d4aa50;
      background: rgba(212,170,80,0.06);
      box-shadow: 0 0 16px rgba(212,170,80,0.32), 0 0 32px rgba(212,170,80,0.12);
    }
    .nl-back-btn {
      flex-shrink: 0;
      margin: 0;
      padding: 10px 22px;
      background: transparent;
      border: none;
      border-top: 1px solid rgba(212,170,80,0.15);
      color: rgba(212,170,80,0.55);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.08em;
      text-align: left;
      cursor: pointer;
      transition: color 0.2s;
    }
    .nl-back-btn:hover { color: #d4aa50; }

    /* ── Ingredient card: MoM badge ──────────────────────────────── */
    .card-front-mom {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      margin-top: 3px;
    }
    .card-front-mom.up   { color: #e8735a; }
    .card-front-mom.down { color: #50c078; }
    .card-front-mom.flat { color: rgba(232,224,204,0.4); }

    .hero-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.9);
      margin-bottom: 6px;
    }

    .hero-price-row {
      display: flex;
      align-items: flex-end;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 0;
    }

    .hero-price {
      font-family: 'Playfair Display', serif;
      font-size: clamp(5rem, 12vw, 9.5rem);
      font-weight: 900;
      line-height: 1;
      color: #ffffff;
      letter-spacing: -0.02em;
      display: inline-block;
      cursor: default;
      position: relative;
      transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
    }

    @keyframes priceBump {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.055); }
      70%  { transform: scale(0.985); }
      100% { transform: scale(1); }
    }

    .hero-price.bump {
      animation: priceBump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .hero-change {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.9rem;
      font-weight: 600;
      padding: 5px 11px;
      border-radius: 6px;
      margin-bottom: 10px;
    }

    @keyframes badge-pulse {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.1); }
      70%  { transform: scale(0.96); }
      100% { transform: scale(1); }
    }

    .hero-change.pulse {
      animation: badge-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .hero-change.up {
      color: #fff;
      background: rgba(180,40,40,0.7);
      border: 1px solid rgba(255,100,100,0.2);
    }

    .hero-change.down {
      color: #fff;
      background: rgba(30,100,50,0.7);
      border: 1px solid rgba(80,200,100,0.2);
    }



    .hero-sub {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.7);
      font-weight: 400;
      margin-bottom: 18px;
    }

    .hero-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .hero-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 8px 16px;
      border-radius: 6px;
      border: none;
      background: #000;
      color: #fff;
      cursor: pointer;
      transition: background 0.18s, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s;
      user-select: none;
      white-space: nowrap;
      font-weight: 600;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    .hero-action-btn:hover {
      background: #1a1a1a;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }

    .hero-action-btn:active {
      transform: scale(0.95) translateY(1px);
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
      transition: transform 0.08s, box-shadow 0.08s;
    }

    .hero-action-btn svg {
      width: 13px;
      height: 13px;
      fill: #fff;
      flex-shrink: 0;
    }

    /* ── CHART EVENT TOOLTIP ── */
    #chart-event-tooltip {
      position: absolute;
      z-index: 999;
      pointer-events: none;
      background: rgba(30, 8, 12, 0.96);
      border: 1px solid rgba(212,170,80,0.5);
      border-radius: 8px;
      padding: 10px 14px;
      max-width: 240px;
      transform: translate(-50%, -100%);
      margin-top: -10px;
      opacity: 0;
      transition: opacity 0.15s ease;
      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    }

    #chart-event-tooltip.visible {
      opacity: 1;
    }

    #chart-event-tooltip .cet-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      color: rgba(212,170,80,0.9);
      margin-bottom: 5px;
      text-transform: uppercase;
    }

    #chart-event-tooltip .cet-detail {
      font-family: 'Playfair Display', serif;
      font-size: 0.82rem;
      color: rgba(240,232,204,0.92);
      line-height: 1.4;
    }

    /* SVG illustration watermark */
    /* ── S-CURVE STEAM above watermark ── */


    /* ── S-CURVE STEAM ── */
    .hero-steam {
      display: none;
      position: absolute;
      bottom: 136px;
      right: 8px;
      width: 220px;
      height: 180px;
      pointer-events: none;
      overflow: visible;
    }

    .hero-steam path {
      fill: none;
      stroke-linecap: round;
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      opacity: 0;
    }

    /* Blur on SVG element — Safari ignores filter on individual SVG paths */
    .hero-steam svg {
      filter: blur(3.5px);
      overflow: visible;
    }

    /* Draw from bottom upward, fade out at top — no pauses, pure continuous motion */
    @keyframes steamDraw {
      0%   { stroke-dashoffset: 200; opacity: 0; }
      20%  { opacity: 0.6; }
      45%  { stroke-dashoffset: 0;   opacity: 1; }
      65%  { stroke-dashoffset: -30; opacity: 0.25; }
      80%  { stroke-dashoffset: -50; opacity: 0.04; }
      100% { stroke-dashoffset: -60; opacity: 0; }
    }

    /* Line 1 starts first, line 2 at ~35% of cycle, line 3 at ~70% */
    .hero-steam path:nth-child(1) {
      stroke: rgba(240,232,204,0.22);
      stroke-width: 2;
      animation: steamDraw 4.5s cubic-bezier(0.4,0,0.2,1) 0s infinite;
    }
    .hero-steam path:nth-child(2) {
      stroke: rgba(240,232,204,0.18);
      stroke-width: 1.8;
      animation: steamDraw 4.5s cubic-bezier(0.4,0,0.2,1) 1.58s infinite;
    }
    .hero-steam path:nth-child(3) {
      stroke: rgba(240,232,204,0.16);
      stroke-width: 1.6;
      animation: steamDraw 4.5s cubic-bezier(0.4,0,0.2,1) 3.15s infinite;
    }

    .hero-badge-illustration {
      display: none;
      position: absolute;
      right: -50px;
      bottom: -50px;
      width: 320px;
      height: 320px;
      opacity: 0.07;
      pointer-events: none;
    }

    [data-theme="dark"] .hero-badge-illustration {
      opacity: 0.05;
    }

    /* ── STATS ROW ── */

    /* ── CHART ── */
    .chart-section {
      padding: 48px 0 48px;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.01em;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .section-title::before {
      content: '';
      display: inline-block;
      width: 28px;
      height: 2px;
      background: linear-gradient(to right, transparent, var(--gold));
      flex-shrink: 0;
    }

    .section-title::after {
      content: '';
      display: inline-block;
      width: 28px;
      height: 2px;
      background: linear-gradient(to left, transparent, var(--gold));
      flex-shrink: 0;
    }

    .chart-controls-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .events-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: transparent;
      color: var(--text-dim);
      cursor: pointer;
      transition: all 0.25s;
      white-space: nowrap;
    }

    .events-toggle:hover {
      border-color: rgba(212,170,80,0.4);
      color: var(--text-muted);
    }

    .events-toggle.active {
      background: linear-gradient(145deg, #5c1a2a 0%, #3d1019 60%, #521525 100%);
      border-color: rgba(212,170,80,0.55);
      color: rgba(240,232,204,0.92);
      box-shadow:
        0 0 0 1px rgba(212,170,80,0.2),
        0 0 8px 2px rgba(212,170,80,0.15),
        0 0 16px 4px rgba(139,26,26,0.25),
        inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .events-toggle-globe {
      font-size: 0.85rem;
      opacity: 0.35;
      transition: opacity 0.2s;
      display: inline-block;
    }

    .events-toggle.active .events-toggle-globe {
      opacity: 1;
    }

    @keyframes globe-flip {
      0%   { transform: rotateY(0deg); }
      50%  { transform: rotateY(90deg); }
      100% { transform: rotateY(0deg); }
    }

    .events-toggle-globe.spinning {
      animation: globe-flip 0.35s ease-in-out;
    }

    .timeframe-tabs {
      display: flex;
      gap: 2px;
      position: relative;
    }

    .tab {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      padding: 5px 10px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-dim);
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.1s;
      text-transform: uppercase;
      position: relative;
    }

    .tab:hover {
      border-color: var(--gold);
      color: var(--gold);
    }

    .tab:active {
      transform: scale(0.93);
      transition: transform 0.07s;
    }

    .tab.active {
      border-color: var(--gold);
      color: #fff;
      background: var(--burgundy);
    }


    .tab.active::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--gold);
      border-radius: 1px;
      animation: tab-slide-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
    }

    @keyframes tab-slide-in {
      from { transform: scaleX(0); opacity: 0; }
      to   { transform: scaleX(1); opacity: 1; }
    }

    .chart-box-outer {
      padding: 3px;
      border-radius: 13px;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 4px 6px rgba(0,0,0,0.07),
        0 12px 32px rgba(61,16,25,0.18);
    }

    .chart-box-outer::before {
      content: "";
      position: absolute;
      width: 104%;
      height: 102%;
      top: -1%;
      left: -2%;
      border-radius: 13px;
      background: linear-gradient(
        var(--rotate),
        #fff0a0, #ffd700 43%, #c8860a
      );
      animation: spin 2.5s linear infinite;
      z-index: -1;
    }

    [data-theme="dark"] .chart-box-outer {
      box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 12px 32px rgba(0,0,0,0.4);
    }

    .chart-wrap {
      background: linear-gradient(160deg, #3d1019 0%, #28080f 60%, #1e0810 100%);
      border: none;
      border-radius: 10px;
      padding: 28px 20px 60px;
      position: relative;
      overflow: visible;
      box-shadow:
        0 8px 32px rgba(0,0,0,0.45),
        0 2px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.04);
    }

    .chart-wrap canvas {
      width: 100% !important;
      overflow: visible;
    }

    /* ── INGREDIENTS ── */
    .ingredients-section {
      padding: 28px 0 48px;
      overflow: visible;
    }

    .ingredients-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 8px;
      background: transparent;
      border-top: 3px solid var(--gold);
      border-bottom: 1px solid var(--border);
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      padding: 8px;
      margin-top: 20px;
      overflow: visible;
    }

    /* ── FLIP CARD WRAPPER ── */
    .ingredient-card {
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0;
      position: relative;
      -webkit-perspective: 900px;
      perspective: 900px;
      cursor: pointer;
      border-radius: 10px;
    }

    .card-flipper {
      position: relative;
      width: 100%;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      transform: rotateX(calc(var(--tilt-x, 0) * 1deg)) rotateY(calc(var(--tilt-y, 0) * 1deg));
      transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
      border-radius: 10px;
      min-height: 220px;
    }

    /* Drop shadow on hover */
    @media (hover: hover) {
      .ingredient-card:hover .card-flipper {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.3);
      }
    }

    /* Spinning gold border on hover — lives on card-flipper so it tilts and flips with the card */
    .card-flipper::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 11px;
      padding: 1px;
      background: linear-gradient(var(--rotate), #fff0a0, #ffd700 43%, #c8860a);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transform: translateZ(0.5px);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      animation: spin 3s linear infinite paused;
    }

    @media (hover: hover) {
      .ingredient-card:hover .card-flipper::before {
        opacity: 1;
        animation-play-state: running;
      }
    }

    /* No transition while tracking mouse — smooth return on leave */
    .ingredient-card.tilt-active .card-flipper {
      transition: none;
    }

    /* Click-to-flip via JS class — overrides tilt transform */
    .ingredient-card.flipped .card-flipper {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    }

    /* Front & back shared */
    .card-front, .card-back {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 10px;
    }

    /* FRONT */
    .card-front {
      position: relative;
      min-height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      overflow: hidden;
    }

    /* Blurred background image layer */
    .card-front-bg {
      position: absolute;
      inset: 0;
      border-radius: 10px;
      overflow: hidden;
      z-index: 0;
    }

    .card-front-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--card-img) center / cover no-repeat;
    }

    /* Vignette overlay — light mode (burgundy) */
    .card-front-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 70% at center, rgba(40,8,16,0.72) 0%, rgba(5,1,4,0.98) 100%);
      box-shadow:
        inset 0 0 30px rgba(5,1,4,0.9),
        inset 0 0 60px rgba(5,1,4,0.7);
    }

    /* Vignette overlay — dark mode (navy) */
    [data-theme="dark"] .card-front-bg::after {
      background: radial-gradient(ellipse 70% 70% at center, rgba(4,8,20,0.72) 0%, rgba(1,2,8,0.98) 100%);
      box-shadow:
        inset 0 0 30px rgba(1,2,8,0.9),
        inset 0 0 60px rgba(1,2,8,0.7);
    }

    /* Content with 3D depth pop */
    .card-front-inner {
      position: relative;
      z-index: 1;
      -webkit-transform: translateZ(50px) scale(0.9);
      transform: translateZ(50px) scale(0.9);
      width: 100%;
      padding: 1.5rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.45rem;
      color: #fff;
    }

    .card-front-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: rgba(255, 255, 255, 0.95);
    }

    .card-front-qty {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.9);
      margin-bottom: 4px;
      position: relative;
      z-index: 1;
    }

    .card-front-sep {
      width: 3rem;
      height: 1px;
      background: rgba(255, 255, 255, 0.5);
      margin: 0.15rem 0;
    }

    .card-front-price {
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
    }

    .ingredient-card:hover .card-front-price {
      transform: scale(1.12);
    }

    .card-front-delta {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .card-front-delta.up   { color: #ff7070; }
    .card-front-delta.down { color: #6ee86e; }
    .card-front-delta.flat { color: rgba(255, 255, 255, 0.85); }

    .card-front-tags {
      display: flex;
      gap: 0.4rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 0.15rem;
    }

    .card-front-tags .src-tag.live   { color: #6ee86e; }
    .card-front-tags .src-tag.hybrid { color: #e8994a; }
    .card-front-tags .src-tag.cpi    { color: #ffd966; }
    .card-front-tags .src-tag.static { color: rgba(255, 255, 255, 0.85); }

    /* BACK — overlaid on front */
    .card-back {
      position: absolute !important;
      inset: 0;
      background: #3d1019 !important;
      border: 1px solid rgba(212, 170, 80, 0.3) !important;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    [data-theme="dark"] .card-back {
      background: #070d14 !important;
      border: 1px solid rgba(212, 170, 80, 0.35) !important;
    }

    /* Faint ingredient image on back — mirrored horizontally */
    .card-back::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--card-img) center / cover no-repeat;
      opacity: 0.07;
      border-radius: 10px;
      transform: scaleX(-1);
    }

    /* Back content with 3D depth pop */
    .card-back-inner {
      position: relative;
      -webkit-transform: translateZ(50px) scale(0.9);
      transform: translateZ(50px) scale(0.9);
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 18px 20px;
    }

    .card-back-name {
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(240,232,204,0.5);
      margin-bottom: 6px;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .card-back-ingname {
      font-size: 0.6rem;
      color: rgba(240,232,204,0.7);
    }

    .card-back-since {
      font-size: 0.52rem;
      color: rgba(240,232,204,0.4);
    }

    .card-back-chart {
      flex: 1;
      position: relative;
      min-height: 70px;
    }

    .card-back-chart canvas {
      width: 100% !important;
      height: 100% !important;
      clip-path: inset(0 100% 0 0);
    }

    .card-back-chart canvas.chart-revealed {
      clip-path: inset(0 0% 0 0);
      transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-back-footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 8px;
    }

    .card-back-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      color: rgba(240,232,204,0.4);
      line-height: 1.4;
    }

    .card-back-label span {
      display: block;
      font-size: 0.72rem;
      color: rgba(240,232,204,0.85);
    }

    .card-back-change {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      font-weight: 700;
      line-height: 1;
    }

    .card-back-change.up   { color: #e05050; }
    .card-back-change.down { color: #50c050; }
    .card-back-change.flat { color: rgba(240,232,204,0.5); }




    /* Biggest mover badge */
    .ing-mover {
      display: inline-block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      font-weight: 600;
      color: var(--red);
      letter-spacing: 0.04em;
      margin-left: 4px;
      opacity: 0.85;
    }

    /* ── ANIMATED GLOW BORDER FOR #1 ── */
    @keyframes glow-pulse {
      0%   { box-shadow: 0 0 4px 1px rgba(212,170,80,0.25), 0 0 0 1px rgba(212,170,80,0.35); }
      50%  { box-shadow: 0 0 12px 3px rgba(212,170,80,0.45), 0 0 0 1px rgba(240,210,100,0.7); }
      100% { box-shadow: 0 0 4px 1px rgba(212,170,80,0.25), 0 0 0 1px rgba(212,170,80,0.35); }
    }

    @keyframes hero-glow-pulse {
      0%   {
        box-shadow:
          0 4px 6px rgba(0,0,0,0.07),
          0 12px 32px rgba(61,16,25,0.18),
          0 0 0 1px rgba(212,170,80,0.3),
          0 0 8px 2px rgba(212,170,80,0.1),
          inset 0 1px 0 rgba(255,255,255,0.08);
      }
      50%  {
        box-shadow:
          0 4px 6px rgba(0,0,0,0.07),
          0 12px 40px rgba(61,16,25,0.22),
          0 0 0 1px rgba(212,170,80,0.6),
          0 0 22px 6px rgba(212,170,80,0.22),
          inset 0 1px 0 rgba(255,255,255,0.08);
      }
      100% {
        box-shadow:
          0 4px 6px rgba(0,0,0,0.07),
          0 12px 32px rgba(61,16,25,0.18),
          0 0 0 1px rgba(212,170,80,0.3),
          0 0 8px 2px rgba(212,170,80,0.1),
          inset 0 1px 0 rgba(255,255,255,0.08);
      }
    }






    /* ── FOOTER ── */
    footer {
      background: var(--burgundy-dark);
      border-top: none;
      padding: 0;
      transition: background 0.3s;
      position: relative;
    }

    .footer-rule {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent 0%, rgba(212,170,80,0.6) 30%, rgba(240,200,80,0.85) 50%, rgba(212,170,80,0.6) 70%, transparent 100%);
    }

    .footer-meta {
      border-bottom: 1px solid rgba(212,170,80,0.08);
      padding: 10px 0;
    }

    .footer-meta-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 6px;
    }

    .footer-meta-text {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(212,170,80,0.4);
    }

    .footer-main {
      padding: 24px 0 28px;
    }

    .footer-main-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .footer-divider {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      color: rgba(212,170,80,0.25);
    }

    .footer-note {
      font-size: 0.58rem;
      color: rgba(240, 232, 204, 0.45);
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .footer-note a {
      color: rgba(212,170,80,0.7);
      text-decoration: none;
      border-bottom: 1px solid rgba(212,170,80,0.0);
      transition: color 0.2s, border-color 0.2s;
    }

    .footer-note a:hover {
      color: rgba(212,170,80,1);
      border-bottom-color: rgba(212,170,80,0.4);
    }

    .footer-crest {
      display: block;
      width: 120px;
      height: 100px;
      opacity: 0.55;
      filter: brightness(1.1);
    }

    .footer-crest.visible {
      animation: crestGlow 1.8s ease-out forwards;
    }

    @keyframes crestGlow {
      0%   { filter: brightness(1.1) drop-shadow(0 0 0px rgba(212,170,80,0));   opacity: 0.55; }
      40%  { filter: brightness(1.3) drop-shadow(0 0 12px rgba(212,170,80,0.7)); opacity: 0.85; }
      100% { filter: brightness(1.1) drop-shadow(0 0 0px rgba(212,170,80,0));   opacity: 0.55; }
    }

    .footer-charm {
      font-size: 0.58rem;
      color: rgba(240,232,204,0.35);
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    @media (max-width: 640px) {
      .footer-main-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
      }
    }

    /* ── TICKER TAPE ── */
    .ticker {
      background: var(--burgundy);
      border-top: 1px solid rgba(212,170,80,0.15);
      border-bottom: 2px solid var(--gold);
      overflow: hidden;
      white-space: nowrap;
      padding: 9px 0;
      margin: 0;
      transition: background 0.3s, border-color 0.3s;
      position: relative;
    }

    /* Fade edges */
    .ticker::before,
    .ticker::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 2;
      pointer-events: none;
    }
    .ticker::before {
      left: 0;
      background: linear-gradient(to right, var(--burgundy), transparent);
    }
    .ticker::after {
      right: 0;
      background: linear-gradient(to left, var(--burgundy), transparent);
    }

    .ticker-inner {
      display: inline-flex;
      align-items: center;
      gap: 0;
      animation: ticker 32s linear infinite;
    }
    .ticker:hover .ticker-inner { animation-play-state: paused; }

    .ticker-item {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      color: rgba(240, 232, 204, 0.65);
      padding: 0 0;
      letter-spacing: 0.05em;
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    /* Separator dot between items */
    .ticker-item::after {
      content: '·';
      color: rgba(212,170,80,0.3);
      font-size: 1rem;
      margin: 0 18px;
      line-height: 1;
    }

    .ticker-item span.up { color: #e88a8a; }
    .ticker-item span.dn { color: #7acc8a; }
    .ticker-item span.nm { color: var(--gold-light); }

    /* Ingredient name slightly brighter */
    .ticker-item .ticker-name {
      color: rgba(240,232,204,0.85);
      font-weight: 600;
    }

    .ticker-item .ticker-price {
      color: var(--gold);
    }

    @keyframes ticker {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ── ANIMATIONS ── */
    .fade-up {
      opacity: 0;
      transform: translateY(16px);
      animation: fadeUp 0.6s ease forwards;
    }

    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }

    .fade-up:nth-child(1) { animation-delay: 0.05s; }
    .fade-up:nth-child(2) { animation-delay: 0.15s; }
    .fade-up:nth-child(3) { animation-delay: 0.25s; }
    .fade-up:nth-child(4) { animation-delay: 0.35s; }
    .fade-up:nth-child(5) { animation-delay: 0.45s; }
    .fade-up:nth-child(6) { animation-delay: 0.55s; }
    .fade-up:nth-child(7) { animation-delay: 0.65s; }
    .fade-up:nth-child(8) { animation-delay: 0.75s; }
    .fade-up:nth-child(9) { animation-delay: 0.85s; }
    /* ── DARK MODE TOGGLE ── */
    /* ── EGG TOGGLE ── */
    .theme-toggle {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
      gap: 7px;
      user-select: none;
      color: rgba(240,232,204,0.7);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: color 0.2s;
    }

    .theme-toggle:hover { color: #f0e8cc; }

    .egg-toggle {
      width: 36px;
      height: 36px;
      position: relative;
      perspective: 200px;
    }

    .egg-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .egg-inner.flipping {
      animation: eggFlip 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes eggFlip {
      0%   { transform: rotateY(0deg) scale(1); }
      35%  { transform: rotateY(90deg) scale(1.12); }
      65%  { transform: rotateY(90deg) scale(1.12); }
      100% { transform: rotateY(0deg) scale(1); }
    }

    /* Splat lines container */
    .egg-splat {
      position: absolute;
      inset: -8px;
      pointer-events: none;
      opacity: 0;
    }

    .egg-splat.splatting {
      animation: splatFade 0.35s ease-out forwards;
    }

    @keyframes splatFade {
      0%   { opacity: 0; transform: scale(0.6); }
      25%  { opacity: 1; transform: scale(1.1); }
      100% { opacity: 0; transform: scale(1.3); }
    }

    .egg-splat line {
      stroke: rgba(212,170,80,0.7);
      stroke-width: 1.5;
      stroke-linecap: round;
    }

    [data-theme="dark"] .egg-splat line {
      stroke: rgba(160,110,40,0.6);
    }

    .egg-face {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Light mode egg — sunny side up, bright white, golden yolk */
    .egg-light svg .egg-white { fill: #f5f0e0; }
    .egg-light svg .egg-yolk  { fill: #e8a020; }
    .egg-light svg .egg-yolk-hi { fill: #f4c040; opacity: 0.7; }

    /* Dark mode egg — flipped, browned underside, hidden yolk */
    .egg-dark svg .egg-white  { fill: #c8a870; }
    .egg-dark svg .egg-yolk   { fill: #7a5010; }
    .egg-dark svg .egg-yolk-hi { fill: #9a6820; opacity: 0.5; }

    .egg-dark { display: none; }
    [data-theme="dark"] .egg-light { display: none; }
    [data-theme="dark"] .egg-dark  { display: flex; }

    /* ── DATA BADGE ── */
    .data-badge-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .data-badge {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 2px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      position: relative;
      cursor: default;
    }
    .data-badge em {
      font-style: normal;
      opacity: 0.65;
      font-size: 0.9em;
    }

    .data-badge.live {
      color: #4a9a5a;
      background: rgba(74, 154, 90, 0.12);
      border: 1px solid rgba(74, 154, 90, 0.3);
    }
    .data-badge.hybrid {
      color: #d4813a;
      background: rgba(212,129,58,0.1);
      border: 1px solid rgba(212,129,58,0.28);
    }
    .data-badge.cpi {
      color: var(--gold);
      background: rgba(139,105,20,0.1);
      border: 1px solid rgba(139,105,20,0.25);
    }
    .data-badge.fallback {
      color: var(--text-dim);
      background: transparent;
      border: 1px solid var(--border);
    }

    /* Tooltip */
    .badge-tooltip {
      display: none;
      position: absolute;
      top: calc(100% + 7px);
      right: 0;
      width: 210px;
      background: var(--card-bg, #1a0a0a);
      border: 1px solid rgba(212,170,80,0.2);
      border-radius: 4px;
      padding: 8px 10px;
      font-size: 0.68rem;
      letter-spacing: 0.02em;
      text-transform: none;
      color: var(--text-secondary, #ccc);
      line-height: 1.5;
      z-index: 100;
      pointer-events: none;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    }
    .data-badge:hover .badge-tooltip,
    .data-badge:focus .badge-tooltip {
      display: block;
    }

    @keyframes liveDotPulse {
      0%   { opacity: 1; box-shadow: 0 0 0px 0px rgba(74,200,100,0); }
      50%  { opacity: 0.6; box-shadow: 0 0 5px 2px rgba(74,200,100,0.6); }
      100% { opacity: 1; box-shadow: 0 0 0px 0px rgba(74,200,100,0); }
    }

    .live-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4a9a5a;
      vertical-align: middle;
      margin-right: 4px;
      flex-shrink: 0;
      animation: liveDotPulse 2.2s ease-in-out infinite;
    }

    .hero-change.flat {
      color: var(--text-dim);
      background: rgba(128,128,128,0.1);
    }

    /* ── DID YOU KNOW ── */
    .hero-row {
      display: flex;
      flex-direction: row;
      gap: 24px;
      align-items: stretch;
    }

    .hero-side-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 16px;
      flex: 1;
    }

    .since-card {
      border-radius: 16px;
      width: 100%;
      flex: 1;
      position: relative;
      overflow: hidden;
      padding: 24px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-image: url('Hero%20Card%20Images/Since.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      box-shadow:
        0 4px 6px rgba(0,0,0,0.1),
        0 12px 32px rgba(0,0,0,0.15),
        0 0 0 1px rgba(80,130,220,0.2),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 0 40px rgba(2,5,12,1),
        inset 0 0 100px rgba(2,5,12,0.9);
    }

    [data-theme="dark"] .since-card {
      box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 12px 32px rgba(0,0,0,0.4),
        0 0 0 1px rgba(80,130,220,0.45),
        inset 0 1px 0 rgba(80,130,220,0.08),
        inset 0 0 40px rgba(1,2,8,1),
        inset 0 0 100px rgba(1,2,8,0.95);
    }

    .since-watermark {
      position: absolute;
      right: -40px;
      bottom: -40px;
      width: 220px;
      height: 220px;
      opacity: 0.07;
      pointer-events: none;
    }

    [data-theme="dark"] .since-watermark { opacity: 0.05; }

    .since-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.9);
      position: relative;
      z-index: 3;
      margin-bottom: 8px;
    }

    .since-pct-row {
      display: flex;
      align-items: baseline;
      gap: 4px;
      position: relative;
      z-index: 3;
    }

    .since-pct {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.8rem, 7vw, 3.8rem);
      font-weight: 900;
      line-height: 1;
      color: #ffffff;
      letter-spacing: -0.02em;
    }

    .since-pct-sign {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.6rem, 4vw, 2.2rem);
      font-weight: 700;
      color: rgba(255,255,255,0.7);
      line-height: 1;
    }

    .since-sublabel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      position: relative;
      z-index: 3;
    }

    @media (max-width: 700px) {
      .hero-row { flex-direction: column; }
      .hero-side-cards { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    }


    /* ── HERO SIDE CARD OVERLAY (::before transitions on hover) ── */
    .afford-card::before,
    .since-card::before,
    .mover-card::before,
    .drop-card::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }

    .afford-card::before {
      background: radial-gradient(ellipse 60% 60% at center, rgba(10,20,10,0.62) 0%, rgba(3,8,3,1) 100%);
    }
    [data-theme="dark"] .afford-card::before {
      background: radial-gradient(ellipse 60% 60% at center, rgba(5,12,5,0.68) 0%, rgba(1,4,1,1) 100%);
    }

    .since-card::before {
      background: radial-gradient(ellipse 60% 60% at center, rgba(8,15,30,0.62) 0%, rgba(2,5,12,1) 100%);
    }
    [data-theme="dark"] .since-card::before {
      background: radial-gradient(ellipse 60% 60% at center, rgba(4,8,18,0.68) 0%, rgba(1,2,8,1) 100%);
    }

    .mover-card::before {
      background: radial-gradient(ellipse 60% 60% at center, rgba(25,12,4,0.62) 0%, rgba(10,4,1,1) 100%);
    }
    [data-theme="dark"] .mover-card::before {
      background: radial-gradient(ellipse 60% 60% at center, rgba(15,8,2,0.68) 0%, rgba(5,2,0,1) 100%);
    }

    .drop-card::before {
      background: radial-gradient(ellipse 60% 60% at center, rgba(4,18,14,0.62) 0%, rgba(1,6,5,1) 100%);
    }
    [data-theme="dark"] .drop-card::before {
      background: radial-gradient(ellipse 60% 60% at center, rgba(2,10,8,0.68) 0%, rgba(0,3,2,1) 100%);
    }

    /* ── HERO SIDE CARD TILT ── */
    .afford-card,
    .since-card,
    .mover-card,
    .drop-card {
      transform: perspective(800px) rotateX(calc(var(--tilt-x, 0) * 1deg)) rotateY(calc(var(--tilt-y, 0) * 1deg)) scale(var(--hover-scale, 1));
      transition: transform 0.5s ease, box-shadow 0.5s ease;
    }

    .afford-card.tilt-active,
    .since-card.tilt-active,
    .mover-card.tilt-active,
    .drop-card.tilt-active {
      transition: none;
    }

    @media (hover: hover) {
      /* Scale up and fade the dark overlay on hover */
      .afford-card:hover,
      .since-card:hover,
      .mover-card:hover,
      .drop-card:hover {
        --hover-scale: 1.02;
      }

      .afford-card:hover::before,
      .since-card:hover::before,
      .mover-card:hover::before,
      .drop-card:hover::before {
        opacity: 0.4;
      }

      /* Light mode hover shadows — inset softened, border preserved */
      .afford-card:hover {
        box-shadow:
          0 20px 40px rgba(0,0,0,0.45),
          0 8px 16px rgba(0,0,0,0.3),
          0 0 0 1px rgba(80,192,80,0.2),
          inset 0 1px 0 rgba(255,255,255,0.06),
          inset 0 0 20px rgba(3,8,3,0.5),
          inset 0 0 50px rgba(3,8,3,0.35);
      }
      .since-card:hover {
        box-shadow:
          0 20px 40px rgba(0,0,0,0.45),
          0 8px 16px rgba(0,0,0,0.3),
          0 0 0 1px rgba(80,130,220,0.2),
          inset 0 1px 0 rgba(255,255,255,0.06),
          inset 0 0 20px rgba(2,5,12,0.5),
          inset 0 0 50px rgba(2,5,12,0.35);
      }
      .mover-card:hover {
        box-shadow:
          0 20px 40px rgba(0,0,0,0.45),
          0 8px 16px rgba(0,0,0,0.3),
          0 0 0 1px rgba(220,120,40,0.2),
          inset 0 1px 0 rgba(255,255,255,0.06),
          inset 0 0 20px rgba(10,4,1,0.5),
          inset 0 0 50px rgba(10,4,1,0.35);
      }
      .drop-card:hover {
        box-shadow:
          0 20px 40px rgba(0,0,0,0.45),
          0 8px 16px rgba(0,0,0,0.3),
          0 0 0 1px rgba(80,192,120,0.2),
          inset 0 1px 0 rgba(255,255,255,0.06),
          inset 0 0 20px rgba(1,6,5,0.5),
          inset 0 0 50px rgba(1,6,5,0.35);
      }

      /* Dark mode hover shadows — colored border + soft outer glow */
      [data-theme="dark"] .afford-card:hover {
        box-shadow:
          0 20px 40px rgba(0,0,0,0.45),
          0 8px 16px rgba(0,0,0,0.3),
          0 0 28px 6px rgba(80,192,80,0.18),
          0 0 0 1px rgba(80,192,80,0.55),
          inset 0 1px 0 rgba(80,192,80,0.12),
          inset 0 0 20px rgba(1,4,1,0.5),
          inset 0 0 50px rgba(1,4,1,0.35);
      }
      [data-theme="dark"] .since-card:hover {
        box-shadow:
          0 20px 40px rgba(0,0,0,0.45),
          0 8px 16px rgba(0,0,0,0.3),
          0 0 28px 6px rgba(80,130,220,0.18),
          0 0 0 1px rgba(80,130,220,0.55),
          inset 0 1px 0 rgba(80,130,220,0.12),
          inset 0 0 20px rgba(1,2,8,0.5),
          inset 0 0 50px rgba(1,2,8,0.35);
      }
      [data-theme="dark"] .mover-card:hover {
        box-shadow:
          0 20px 40px rgba(0,0,0,0.45),
          0 8px 16px rgba(0,0,0,0.3),
          0 0 28px 6px rgba(220,120,40,0.18),
          0 0 0 1px rgba(220,120,40,0.55),
          inset 0 1px 0 rgba(220,120,40,0.12),
          inset 0 0 20px rgba(5,2,0,0.5),
          inset 0 0 50px rgba(5,2,0,0.35);
      }
      [data-theme="dark"] .drop-card:hover {
        box-shadow:
          0 20px 40px rgba(0,0,0,0.45),
          0 8px 16px rgba(0,0,0,0.3),
          0 0 28px 6px rgba(80,192,120,0.18),
          0 0 0 1px rgba(80,192,120,0.55),
          inset 0 1px 0 rgba(80,192,120,0.12),
          inset 0 0 20px rgba(0,3,2,0.5),
          inset 0 0 50px rgba(0,3,2,0.35);
      }
    }

    .afford-card {
      border-radius: 16px;
      width: 100%;
      flex: 1;
      position: relative;
      overflow: hidden;
      padding: 24px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-image: url('Hero%20Card%20Images/Afford.jpeg');
      background-size: 130%;
      background-position: center;
      background-repeat: no-repeat;
      box-shadow:
        0 4px 6px rgba(0,0,0,0.1),
        0 12px 32px rgba(0,0,0,0.15),
        0 0 0 1px rgba(80,192,80,0.2),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 0 40px rgba(3,8,3,1),
        inset 0 0 100px rgba(3,8,3,0.9);
    }

    [data-theme="dark"] .afford-card {
      box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 12px 32px rgba(0,0,0,0.4),
        0 0 0 1px rgba(80,192,80,0.45),
        inset 0 1px 0 rgba(80,192,80,0.08),
        inset 0 0 40px rgba(1,4,1,1),
        inset 0 0 100px rgba(1,4,1,0.95);
    }

    .afford-watermark {
      position: absolute;
      right: -40px;
      bottom: -40px;
      width: 220px;
      height: 220px;
      opacity: 0.07;
      pointer-events: none;
    }

    [data-theme="dark"] .afford-watermark {
      opacity: 0.05;
    }

    .afford-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.9);
      position: relative;
      z-index: 3;
      margin-bottom: 8px;
    }

    .afford-mins-row {
      position: relative;
      z-index: 3;
    }

    .afford-mins {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.8rem, 7vw, 3.8rem);
      font-weight: 900;
      line-height: 1;
      color: #ffffff;
      letter-spacing: -0.02em;
    }

    .afford-sublabel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      position: relative;
      z-index: 3;
    }









    @media (max-width: 700px) {
      .afford-card { width: 100%; }
      .afford-watermark { width: 264px; height: 264px; }
    }

    /* ── BIGGEST MOVER CARD ── */
    .mover-card {
      border-radius: 16px;
      width: 100%;
      flex: 1;
      position: relative;
      overflow: hidden;
      padding: 20px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-image: url('Hero%20Card%20Images/Mover.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      box-shadow:
        0 4px 6px rgba(0,0,0,0.1),
        0 12px 32px rgba(0,0,0,0.15),
        0 0 0 1px rgba(220,120,40,0.2),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 0 40px rgba(10,4,1,1),
        inset 0 0 100px rgba(10,4,1,0.9);
    }

    [data-theme="dark"] .mover-card {
      box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 12px 32px rgba(0,0,0,0.4),
        0 0 0 1px rgba(220,120,40,0.45),
        inset 0 1px 0 rgba(220,120,40,0.08),
        inset 0 0 40px rgba(5,2,0,1),
        inset 0 0 100px rgba(5,2,0,0.95);
    }

    .mover-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.9);
      position: relative;
      z-index: 3;
      margin-bottom: 6px;
    }

    .mover-name {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.15rem, 2.8vw, 1.65rem);
      font-weight: 900;
      line-height: 1.1;
      color: #ffffff;
      letter-spacing: -0.01em;
      position: relative;
      z-index: 3;
    }

    .mover-pct {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.92rem;
      font-weight: 600;
      color: #e05050;
      position: relative;
      z-index: 3;
      margin-top: 4px;
    }

    .mover-pct.down { color: #50c050; }

    .mover-sublabel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      position: relative;
      z-index: 3;
    }

    .mover-watermark {
      position: absolute;
      right: -110px;
      top: 50%;
      transform: translateY(-50%);
      width: 260px;
      height: 260px;
      opacity: 0.07;
      pointer-events: none;
    }

    /* ── PRICE DROP CARD ── */
    .drop-card {
      border-radius: 16px;
      width: 100%;
      flex: 1;
      position: relative;
      overflow: hidden;
      padding: 20px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-image: url('Hero%20Card%20Images/Drop.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      box-shadow:
        0 4px 6px rgba(0,0,0,0.1),
        0 12px 32px rgba(0,0,0,0.15),
        0 0 0 1px rgba(80,192,120,0.2),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 0 40px rgba(1,6,5,1),
        inset 0 0 100px rgba(1,6,5,0.9);
    }

    [data-theme="dark"] .drop-card {
      box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 12px 32px rgba(0,0,0,0.4),
        0 0 0 1px rgba(80,192,120,0.45),
        inset 0 1px 0 rgba(80,192,120,0.08),
        inset 0 0 40px rgba(0,3,2,1),
        inset 0 0 100px rgba(0,3,2,0.95);
    }

    .drop-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.9);
      position: relative;
      z-index: 3;
      margin-bottom: 6px;
    }

    .drop-name {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.15rem, 2.8vw, 1.65rem);
      font-weight: 900;
      line-height: 1.1;
      color: #ffffff;
      letter-spacing: -0.01em;
      position: relative;
      z-index: 3;
    }

    .drop-pct {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.92rem;
      font-weight: 600;
      color: #50c078;
      position: relative;
      z-index: 3;
      margin-top: 4px;
    }

    .drop-sublabel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      position: relative;
      z-index: 3;
    }

    .drop-watermark {
      position: absolute;
      right: -80px;
      top: 50%;
      transform: translateY(-50%);
      width: 240px;
      height: 240px;
      opacity: 0.07;
      pointer-events: none;
    }

    [data-theme="dark"] .drop-watermark { opacity: 0.05; }



    .src-tag {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.08em;
      padding: 2px 6px;
      border-radius: 2px;
      display: inline-block;
    }

    .src-tag.live {
      color: #4a9a5a;
      background: rgba(74,154,90,0.1);
      border: 1px solid rgba(74,154,90,0.25);
      display: inline-flex;
      align-items: center;
    }

    .src-tag.live .live-dot {
      animation: liveDotPulse 2.2s ease-in-out infinite;
    }

    .src-tag.hybrid {
      color: #d4813a;
      background: rgba(212,129,58,0.1);
      border: 1px solid rgba(212,129,58,0.28);
    }

    .src-tag.cpi {
      color: var(--gold);
      background: rgba(139,105,20,0.1);
      border: 1px solid rgba(139,105,20,0.25);
    }

    .src-tag.static {
      color: var(--text-dim);
      background: transparent;
      border: 1px solid var(--border);
    }

  



    /* ── DATA STORYTELLING ── */
    .data-headline {
      max-width: 780px;
      margin: 0 auto;
      padding: 20px 16px 6px;
      text-align: center;
    }

    .data-headline-text {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1rem, 2.2vw, 1.25rem);
      font-weight: 400;
      font-style: italic;
      color: var(--text-dim);
      line-height: 1.5;
      letter-spacing: 0.01em;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .data-headline-text.loaded {
      opacity: 1;
      transform: translateY(0);
    }

    .data-headline-text em {
      font-style: italic;
      color: var(--gold);
      font-weight: 600;
      display: inline-block;
    }

    .data-headline-text.loaded em {
      animation:
        emPop  0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s both,
        emGlow 3s  ease-in-out                         1.5s infinite;
    }

    @keyframes emPop {
      0%   { transform: translateY(0)   scale(1);    }
      45%  { transform: translateY(-4px) scale(1.08); }
      100% { transform: translateY(0)   scale(1);    }
    }

    @keyframes emGlow {
      0%, 100% { text-shadow: none; }
      50%      { text-shadow: 0 0 10px rgba(212, 170, 80, 0.4); }
    }

    /* Chart caption */
    .chart-caption {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      color: var(--text-dim);
      margin-top: 14px;
      padding: 0 4px;
      opacity: 0;
      transition: opacity 0.7s ease 0.3s;
      text-align: center;
    }

    .chart-caption.loaded {
      opacity: 1;
    }

    .chart-caption em {
      font-style: normal;
      color: var(--gold);
    }

    .methodology-btn {
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      font-family: 'IBM Plex Mono', monospace;
      font-size: inherit;
      color: var(--text-dim);
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
      opacity: 0.8;
    }
    .methodology-btn:hover { opacity: 1; color: var(--gold); }

    .methodology-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 12px;
    }
    .methodology-section { display: flex; flex-direction: column; gap: 4px; }
    .methodology-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .live-label   { color: #5cba7d; }
    .hybrid-label { color: var(--gold); }
    .cpi-label    { color: var(--text-dim); }
    .methodology-text {
      font-size: 0.78rem;
      line-height: 1.55;
      color: var(--text-secondary, #ccc);
    }
    .methodology-note {
      font-size: 0.68rem;
      font-family: 'IBM Plex Mono', monospace;
      color: var(--text-dim);
      border-top: 1px solid rgba(212,170,80,0.15);
      padding-top: 12px;
      line-height: 1.5;
    }


    /* ── DONATE ── */
    .donate-section {
      text-align: center;
      padding: 28px 16px 28px;
      max-width: 600px;
      margin: 0 auto;
    }

    .donate-text {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.72rem;
      color: var(--text-dim);
      margin-bottom: 14px;
      line-height: 1.6;
      white-space: nowrap;
    }

    .donate-addresses {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .donate-coin {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.62rem;
      color: var(--text-dim);
      opacity: 0.6;
    }

    .donate-addr {
      color: var(--gold);
      opacity: 0.7;
      letter-spacing: 0.02em;
      word-break: break-all;
    }


    /* ── X / TWITTER FOLLOW BUTTON ── */
    .social-buttons {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .social-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      text-decoration: none;
      transition: opacity 0.2s, transform 0.15s;
      flex-shrink: 0;
    }
    .social-btn:hover {
      opacity: 0.82;
      transform: translateY(-1px);
    }

    .social-btn--x {
      background: #000;
      color: #fff;
    }
    [data-theme="dark"] .social-btn--x {
      background: #fff;
      color: #000;
    }

    .social-btn--ig {
      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
      color: #fff;
    }

    /* ── FAQ ── */
    .faq-section {
      max-width: 780px;
      margin: 0 auto;
      padding: 28px 16px 28px;
    }
    .faq-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.01em;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }

    .faq-title::before {
      content: '';
      display: inline-block;
      width: 28px;
      height: 2px;
      background: linear-gradient(to right, transparent, var(--gold));
      flex-shrink: 0;
    }

    .faq-title::after {
      content: '';
      display: inline-block;
      width: 28px;
      height: 2px;
      background: linear-gradient(to left, transparent, var(--gold));
      flex-shrink: 0;
    }
    .faq-item {
      border-top: 1px solid var(--border);
    }
    .faq-item:last-child { border-bottom: 1px solid var(--border); }
    .faq-q {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      padding: 14px 0;
      cursor: pointer;
      user-select: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      color: var(--text);
      gap: 12px;
    }
    .faq-q:hover { color: var(--gold); }
    .faq-chevron {
      font-size: 10px;
      color: var(--gold);
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }
    .faq-a {
      font-size: 13px;
      color: var(--text-muted, #7a6a5a);
      line-height: 1.65;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      padding: 0;
    }
    .faq-item.open .faq-a {
      max-height: 200px;
      padding-bottom: 14px;
    }
    .faq-item--methodology.open .faq-a {
      max-height: 900px;
    }

    .faq-methodology-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      display: block;
      margin: 14px 0 5px;
    }
    .faq-methodology-label.live   { color: #5cba7d; }
    .faq-methodology-label.hybrid { color: var(--gold); }
    .faq-methodology-label.cpi    { color: var(--gold); }

    .method-table {
      width: 100%;
      border-collapse: collapse;
      margin: 6px 0 2px;
    }
    .method-table td {
      padding: 3px 0;
      font-size: 0.78rem;
      vertical-align: middle;
      color: var(--text-muted, #7a6a5a);
    }
    .method-table td:last-child { text-align: right; }

    .series-code {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.72rem;
      color: var(--gold);
    }
    .series-code-dim {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.68rem;
      color: var(--text-dim);
      opacity: 0.75;
    }

  
    /* ═══════════════════════════════════════════════════════════════
       MOBILE — max-width: 768px
    ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ── CONTAINER ── */
      .container { padding: 0 16px; }

      /* ── INFO BUTTON ── */
      .hero-info-btn { animation: none; box-shadow: none; opacity: 1; border: none; background: none; }

      /* ── HEADER ── */
      .header-main { padding: 12px 0 10px; }

      .header-inner {
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }

      .header-inner > div:first-child {
        width: 100%;
      }

      .header-inner > div:last-child {
        position: static;
        width: 100%;
      }

      .logo {
        max-width: 100%;
        height: auto;
      }

      .header-right {
        width: 100%;
        align-items: center;
      }

      .header-buttons {
        justify-content: center;
      }

      .header-date-weather {
        text-align: center;
      }

      .logo { font-size: 1.4rem; }

      .logo-tagline { font-size: 0.52rem; }

      /* ── HERO ── */
      .hero { padding: 32px 0 36px; }

      .hero-row {
        flex-direction: column;
        gap: 16px;
      }

      .hero-badge-outer {
        min-width: unset;
        width: 100%;
      }

      .hero-badge {
        padding: 28px 24px 24px;
      }

      .hero-price {
        font-size: clamp(3rem, 14vw, 4.5rem);
      }

      .hero-price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .did-you-know {
        width: 100%;
        padding: 22px 22px 20px;
      }

      /* ── DATA HEADLINE ── */
      .data-headline { padding: 32px 16px 8px; }
      .data-headline-text { font-size: 0.95rem; }

      /* ── CHART ── */
      .chart-section { padding: 36px 0 32px; }

      .chart-wrap {
        padding-bottom: 8px !important;
      }

      .chart-wrap canvas {
        max-height: 260px;
      }

      .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
      }

      .chart-controls-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .events-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: transparent;
      color: var(--text-dim);
      cursor: pointer;
      transition: all 0.25s;
      white-space: nowrap;
    }

    .events-toggle:hover {
      border-color: rgba(212,170,80,0.4);
      color: var(--text-muted);
    }

    .events-toggle.active {
      background: linear-gradient(145deg, #5c1a2a 0%, #3d1019 60%, #521525 100%);
      border-color: rgba(212,170,80,0.55);
      color: rgba(240,232,204,0.92);
      box-shadow:
        0 0 0 1px rgba(212,170,80,0.2),
        0 0 8px 2px rgba(212,170,80,0.15),
        0 0 16px 4px rgba(139,26,26,0.25),
        inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .events-toggle-globe {
      font-size: 0.85rem;
      opacity: 0.35;
      transition: opacity 0.2s;
      display: inline-block;
    }

    .events-toggle.active .events-toggle-globe {
      opacity: 1;
    }

    @keyframes globe-flip {
      0%   { transform: rotateY(0deg); }
      50%  { transform: rotateY(90deg); }
      100% { transform: rotateY(0deg); }
    }

    .events-toggle-globe.spinning {
      animation: globe-flip 0.35s ease-in-out;
    }

    .timeframe-tabs { width: 100%; }

      .tab {
        flex: 1;
        text-align: center;
        padding: 7px 6px;
        font-size: 0.65rem;
      }

      .chart-caption { font-size: 0.65rem; text-align: center; }

      /* ── INGREDIENTS ── */
      .ingredients-section { padding: 36px 0 32px; }

      .ingredients-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 6px;
        padding: 6px;
      }

      .card-front { min-height: 190px; }

      .card-front-inner { padding: 1rem; }

      .card-front-name { font-size: 0.95rem; }

      .card-front-price { font-size: 1.4rem; }

      .card-front-delta { font-size: 0.66rem; }

      /* ── CARD BACK MOBILE ── */
      .card-back-inner {
        padding: 12px 14px;
      }

      .card-back-name {
        margin-bottom: 4px;
        gap: 0;
      }

      .card-back-ingname { font-size: 0.5rem; }
      .card-back-since { font-size: 0.46rem; }

      .card-back-chart {
        min-height: 55px;
      }

      .card-back-footer {
        margin-top: 5px;
      }

      .card-back-label {
        font-size: 0.42rem;
      }

      .card-back-label span {
        font-size: 0.51rem;
      }

      .card-back-change {
        font-size: 1rem;
      }

      /* ── FAQ ── */
      .faq-section { padding: 36px 12px 36px; }

      .faq-q { font-size: 0.82rem; padding: 14px 0; }

      .faq-a { font-size: 0.82rem; }

      /* ── DONATE ── */
      .donate-section { padding: 36px 16px 36px; }

      .donate-text {
        font-size: 0.68rem;
        white-space: normal;
      }

      .donate-coin { font-size: 0.58rem; }

      .donate-addr {
        display: block;
        font-size: 0.55rem;
        margin-top: 2px;
        word-break: break-all;
      }

      /* ── FOOTER ── */
      .footer-meta-inner {
        text-align: center;
      }

      .footer-main-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      /* ── SOCIAL BUTTONS ── */
      .social-btn { width: 28px; height: 28px; }
    }

    /* ═══════════════════════════════════════════════════════════════
       SMALL PHONES — max-width: 400px
    ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 400px) {
      .logo { font-size: 1.2rem; }
      .hero-badge { padding: 22px 18px 20px; }
      .ingredients-grid {
        grid-template-columns: 1fr 1fr;
      }
      .hero-price { font-size: clamp(3rem, 16vw, 4.2rem); }
    }