/* VAL Store of Value — extracted from live page; cache-busted via __DXV__ */
:root{
      --val-bg: #f7f8fb;
      --val-card: 255 255 255;
      --val-line: 0 0 0;
      --val-text: #0b0b10;
      --val-muted: #5b5b65;
      /* DiamondX / DXFI brand accents (shared with dxfi.diamondx.exchange) */
      --val-gold: #F4B73E;
      --val-emerald: #10B981;
      --val-cyan: #1FDDFE;
      /* VAL meme signature — the one accent DXFI doesn't have */
      --val-pink: #ff58b6;
      --val-purple: #8a5cff;
    }
    html, body {
      background:
        radial-gradient(1200px 800px at 15% -10%, rgba(138,92,255,.12), transparent),
        radial-gradient(1000px 700px at 90% 10%, rgba(31,221,254,.08), transparent),
        radial-gradient(900px 600px at 80% 70%, rgba(244,183,62,.05), transparent),
        var(--val-bg);
      color: var(--val-text);
      font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui;
    }
    .container{ max-width: 1120px; }
    h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; letter-spacing: .2px; }
    .text-gradient { background-image: linear-gradient(90deg, var(--val-cyan), var(--val-emerald) 45%, var(--val-gold) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .text-gradient-meme { background-image: linear-gradient(90deg, var(--val-pink), var(--val-gold) 40%, var(--val-emerald) 80%, var(--val-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .gold { background-image: linear-gradient(90deg, var(--val-gold), #FFD700); -webkit-background-clip: text; color: transparent; text-shadow: 0 0 20px rgba(244,183,62,.2); }
    .btn { display:inline-flex; align-items:center; gap:.5rem; border-radius:9999px; padding:.75rem 1rem; transition: all .25s ease; }
    /* Primary CTA matches DXFI's cyan→emerald so the click destination looks like the button */
    .btn-primary { background: linear-gradient(135deg, var(--val-cyan), var(--val-emerald)); color:#04121c; font-weight:600; box-shadow: 0 6px 16px rgba(31,221,254,.28); }
    .btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(31,221,254,.45); }
    /* Meme CTA (token buys) keeps VAL's pink signature */
    .btn-meme { background: linear-gradient(90deg, var(--val-gold), var(--val-pink) 60%, var(--val-purple)); color:#fff; box-shadow: 0 6px 16px rgba(255,88,182,.25); }
    .btn-meme:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(255,88,182,.4); }
    .btn-ghost { background: rgba(0,0,0,.05); color: var(--val-text); }
    .card { background: rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.06); border-radius:1rem; backdrop-filter: blur(8px); transition: transform .25s ease, border-color .25s ease; }
    .card:hover { transform: translateY(-2px); border-color: rgba(255,209,102,.5); }
    .card-strong { background:#fff; border-color: rgba(0,0,0,.08); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
    .tag { background: rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.05); padding:.25rem .65rem; border-radius:9999px; font-size:.8rem; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
    .tag:hover { transform: scale(1.05); }
    .tag.access  { background: rgba(31,221,254,.16); border-color: rgba(31,221,254,.35); }
    .tag.fees    { background: rgba(244,183,62,.18); border-color: rgba(244,183,62,.45); }
    .tag.rewards { background: rgba(255,88,182,.16); border-color: rgba(255,88,182,.40); }
    .tag.staking { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.40); }
    .hero-img-border { position: relative; border-radius:1rem; overflow:hidden; }
    .hero-img-border::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(130deg,var(--val-gold),var(--val-pink),var(--val-cyan)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:borderSpin 6s linear infinite; }
    @keyframes borderSpin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }
    .hero-mascot { filter: drop-shadow(0 18px 44px rgba(244,183,62,.30)) drop-shadow(0 6px 22px rgba(31,221,254,.18)); animation: mascotFloat 6s ease-in-out infinite; }
    @keyframes mascotFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
    @media (prefers-reduced-motion: reduce) { .hero-mascot { animation: none; } }
    .pulse { animation:pulseBtn 2s infinite ease-in-out; }
    @keyframes pulseBtn { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }
    a:hover { text-decoration-color: var(--val-cyan); }

    /* particles */
    /* Keep parallax above the background but below your content */
#particles { position: fixed; inset: 0; z-index: 0; }
.parallax  { position: fixed; inset: 0; z-index: 1; pointer-events: none; will-change: transform, opacity; }

/* Your content is already using `relative z-10` in many places,
   so you don't need a global z-index override for section/header/footer. */

    #particles span { position:absolute; display:block; border-radius:9999px; opacity:.35; filter: blur(0.5px); }
    @keyframes floatUp { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(-40vh) translateX(20px); } }

    /* Parallax */
    .parallax { position: fixed; inset:0; pointer-events:none; z-index: 1; opacity: var(--parallax-opacity, 1); transition: opacity .3s ease; }
    .layer { position:absolute; left:0; right:0; bottom:0; height: 260px; background-repeat: repeat-x; background-position: bottom left; background-size: 1600px auto; will-change: transform; }
    .layer.back { height: 280px; background-image: url('assets/layer-3.png'); opacity:.9; }
    .layer.mid  { height: 260px; background-image: url('assets/layer-2.png'); }
    .layer.front{ height: 240px; background-image: url('assets/layer-1.png'); }
    body { padding-bottom: 280px; }

    @media (max-width: 767px) {
      .parallax { position:fixed; }
      .layer { background-position: bottom center; background-size: 1200px auto; height: 180px; }
      .layer.back { height: 190px; }
      .layer.mid  { height: 180px; }
      .layer.front{ height: 170px; }
      #particles { opacity:.25; }
    }

/* --- Parallax layers (auto-pan) --- */
.parallax { position: fixed; inset: 0; pointer-events:none; z-index: 1; }
.layer {
  position:absolute; left:0; right:0; bottom:0;
  height: 260px;
  background-repeat: repeat-x;
  background-position: bottom left;   /* starts at left edge */
  background-size: 1600px auto;
  will-change: background-position;
}

/* images (same URLs you use) */
.layer.back  { height: 280px; background-image: url('assets/layer-3.png'); }
.layer.mid   { height: 260px; background-image: url('assets/layer-2.png'); }
.layer.front { height: 240px; background-image: url('assets/layer-1.png'); }

/* continuous pan (larger number = slower) */
.layer.back  { animation: pan 90s linear infinite; }
.layer.mid   { animation: pan 60s linear infinite; }
.layer.front { animation: pan 40s linear infinite; }

@keyframes pan {
  from { background-position-x: 0; }
  to   { background-position-x: -1600px; } /* exactly one texture width */
}

/* Mobile: keep them subtle */
@media (max-width: 767px) {
  .layer { background-position: bottom center; background-size: 1200px auto; }
  .layer.back  { height: 190px; animation-duration: 120s; }
  .layer.mid   { height: 180px; animation-duration: 90s;  }
  .layer.front { height: 170px; animation-duration: 70s;  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .layer { animation: none !important; }
}

    /* Dark theme — DiamondX navy/teal environment (matches dxfi.diamondx.exchange) */
    .theme-dark{ --val-bg: #0a2240; --val-text: rgba(255,255,255,.95); --val-muted: rgba(255,255,255,.65); }
    .theme-dark body { background:
      radial-gradient(1200px 800px at 15% -10%, rgba(31,221,254,.12), transparent),
      radial-gradient(1000px 700px at 90% 10%, rgba(16,185,129,.10), transparent),
      radial-gradient(900px 600px at 80% 70%, rgba(244,183,62,.06), transparent),
      linear-gradient(160deg, #0b2f53 0%, #0a2240 45%, #0b0b10 100%) fixed; color: var(--val-text); }
    .theme-dark .card { background: rgba(255,255,255,.06); border-color: rgb(255 255 255 / .12); box-shadow: 0 10px 30px rgba(0,0,0,.30); }
    .theme-dark .btn-ghost { background: rgb(255 255 255 / .06); color: var(--val-text); }
    .theme-dark header { background: rgba(10,34,64,.55); border-bottom: 1px solid rgba(255,255,255,.12); }
    .mobile-panel.hidden{ display:none; }
    .mobile-panel.show{ display:block; }
    .mobile-overlay{ background: rgba(0,0,0,.35); transition: background .2s ease; }
    .theme-dark .mobile-overlay{ background: rgba(0,0,0,.55); }
    .mobile-drawer{ transform: translateX(100%); transition: transform .25s ease, background .2s ease, border-color .2s ease, color .2s ease; background:#fff; border-left:1px solid rgba(0,0,0,.10); color: var(--val-text); }
    .mobile-panel.show .mobile-drawer{ transform: translateX(0); }
    .mobile-drawer a{ color: inherit; }
    .theme-dark .mobile-drawer{ background:#0a2240; border-left:1px solid rgba(255,255,255,.12); color: var(--val-text); }

    /* ===== FLYWHEEL ===== */
    .utility-section { padding-block: 3rem; }
    @media (min-width: 1024px) {
      .utility-section .utility-inner{ display:flex; align-items:center; justify-content:space-between; gap:4rem; }
    }

    /* container we can query for font sizing */
    .flywheel{ display:flex; justify-content:center; align-items:center; width:100%; aspect-ratio:1/1; border-radius:50%; overflow:visible; max-width: clamp(420px, 52vw, 640px) !important; container-type:inline-size; }
    .flywheel-svg { display:block; height:auto; overflow:visible; }

    /* Ring labels */
    .flywheel-svg .wedge-label textPath{ font-size: clamp(16px, 3.8vw, 22px); letter-spacing:.25px; dominant-baseline: middle; font-weight:700; }
    .theme-dark .flywheel-svg .wedge-label textPath { fill:#fff; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
    body:not(.theme-dark) .flywheel-svg .wedge-label textPath { fill:#0b0b10; }

    /* Spin rotor */
    .fw-rotor { transform-origin: 300px 300px; animation: fwspin 40s linear infinite; }
    @keyframes fwspin { to { transform: rotate(360deg); } }
    @media (hover:hover){ .flywheel-svg:hover .fw-rotor{ animation-play-state: paused; } }
    @media (prefers-reduced-motion: reduce){ .fw-rotor{ animation: none; } }

    /* Glow & hover */
    .fw-rotor g[transform] > circle.seg { transition: filter .25s ease, stroke-width .25s ease, opacity .25s ease; cursor: pointer; }
    .fw-rotor g[transform] > circle.seg:hover { filter: drop-shadow(0 0 12px var(--glow)) drop-shadow(0 0 24px color-mix(in srgb, var(--glow) 65%, transparent)); stroke-width: 128; opacity: 1; }

    /* Center text */
    .flywheel-svg .hole { fill: rgba(255,255,255,.92); stroke: rgba(0,0,0,.28); stroke-width: 10; }
    .theme-dark .flywheel-svg .hole { fill: rgba(17,20,27,.95); stroke: rgba(255,255,255,.14); }
    .flywheel-svg .center .cx { font: 700 clamp(28px, 7vw, 42px) 'Space Grotesk',sans-serif; fill: var(--val-text); }
    .flywheel-svg .center .cx-sub { font: 600 clamp(18px, 5vw, 26px) 'Plus Jakarta Sans',sans-serif; fill: color-mix(in srgb, var(--val-text) 80%, transparent); }

    /* Prevent bleed & jitter */
    .card{ background-clip: padding-box; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow:hidden; }
    html,body{ overflow-x:hidden; }
    
    .card p em {
  font-style: normal;
  opacity: 0.75;
  letter-spacing: 0.3px;
}

/* ===== Social links ===== */
.social-links a { color: var(--val-muted); transition: color .2s ease, transform .2s ease; }
.social-links a:hover { color: var(--val-text); transform: translateY(-1px); }
.theme-dark .social-links a:hover { color: var(--val-gold); }

/* ===== Live stats ===== */
.stat-value { color: var(--val-text); }
.stat-burn { background-image: linear-gradient(90deg, #ff8a3d, var(--val-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-chip { display: inline-flex; margin-top: .35rem; border-radius: 9999px; padding: .1rem .6rem; font-size: .72rem; border: 1px solid transparent; }
.chip-up { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.4); color: #067a53; }
.chip-down { background: rgba(255,88,88,.12); border-color: rgba(255,88,88,.4); color: #b91c1c; }
.theme-dark .chip-up { color: var(--val-emerald); }
.theme-dark .chip-down { color: #ff7b7b; }

/* ===== DXFI offer banner ===== */
.offer-banner { text-decoration: none; border-color: rgba(244,183,62,.45); }
.offer-banner:hover { border-color: var(--val-gold); }
.offer-banner .btn { white-space: nowrap; }

/* ===== Diamond Hands game art ===== */
.game-art img { filter: drop-shadow(0 12px 32px rgba(138,92,255,.35)); }

/* ===== Stake VAL. Earn USDC. ===== */
.stake-swap__row { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; margin-top:1rem; }
.stake-chip { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; border-radius:9999px; padding:.65rem 1.15rem; }
.stake-chip--val { background:linear-gradient(90deg, var(--val-gold), var(--val-pink)); color:#1a0b12; }
.stake-chip--usdc { background:linear-gradient(135deg, var(--val-cyan), var(--val-emerald)); color:#04121c; }
.stake-arrow { font-size:1.6rem; color:var(--val-muted); }

.stake-clock { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin-top:1rem; }
.stake-clock__face { position:relative; width:88px; height:88px; border-radius:50%; border:3px solid var(--val-cyan); box-shadow:0 0 24px rgba(31,221,254,.25); flex-shrink:0; }
.stake-clock__hand { position:absolute; left:50%; top:18%; width:3px; height:32%; background:var(--val-gold); transform-origin:bottom center; border-radius:2px; animation:stakeTick 8s linear infinite; }
.stake-clock__label { position:absolute; inset:auto 0 10px; text-align:center; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--val-muted); }
.stake-clock__io { display:grid; gap:.45rem; flex:1; min-width:12rem; }
.stake-io { display:flex; justify-content:space-between; gap:.75rem; border:1px solid rgba(0,0,0,.08); border-radius:.75rem; padding:.45rem .7rem; font-size:.88rem; }
.stake-io strong { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.stake-io--in { border-color:rgba(31,221,254,.4); }
.stake-io--out { border-color:rgba(244,183,62,.4); }
.theme-dark .stake-io { border-color:rgba(255,255,255,.12); }
.theme-dark .stake-io--in { border-color:rgba(31,221,254,.45); }
.theme-dark .stake-io--out { border-color:rgba(244,183,62,.45); }
@keyframes stakeTick { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stake-clock__hand { animation:none; } }

.stake-stack { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.55rem; }
.stake-stack li { display:grid; grid-template-columns:7.5rem 1fr; gap:.75rem; align-items:baseline; padding:.55rem .15rem; border-bottom:1px solid rgba(0,0,0,.06); }
.theme-dark .stake-stack li { border-bottom-color:rgba(255,255,255,.1); }
.stake-stack li:last-child { border-bottom:0; }
.stake-stack span { color:var(--val-muted); font-size:.9rem; }