/* ---------- bolder dark theme ---------- */
[data-theme="dark"]{
  --fog:#0A1117; --paper:#101A23; --ink:#EAF0F5; --ink2:#8D9DAC; --rule:#1E2B37;
  --cobalt:#7186FF; --field:#14212C;
}
[data-theme="dark"] body{
  background:
    radial-gradient(900px 480px at 78% -80px, rgba(113,134,255,.16), transparent 70%),
    linear-gradient(var(--fog),var(--fog));
}
[data-theme="dark"] header{background:rgba(10,17,23,.82);backdrop-filter:blur(12px)}
[data-theme="dark"] .field{box-shadow:0 0 0 1px rgba(113,134,255,.08),0 30px 80px -30px rgba(113,134,255,.35)}
[data-theme="dark"] .btn:not(.line){background:var(--cobalt);border-color:var(--cobalt);color:#fff}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- market stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.stat{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:18px 18px 10px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.stat span{color:var(--ink2);font-size:13px}
.stat b{font:700 32px/1.1 var(--display);letter-spacing:-.02em}
.stat small{font-size:13px}
.stat svg{margin-top:6px;height:44px}

/* ---------- trending ---------- */
.trend-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.trend-head h2{font-size:28px}
.trend-ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.arrows{display:flex;gap:6px}
.arrows button{width:38px;height:38px;border-radius:10px;border:1px solid var(--rule);background:var(--paper);display:grid;place-items:center}
.arrows button:hover{border-color:var(--ink2)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin;cursor:grab}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.tcard{scroll-snap-align:start;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .2s}
.tcard:hover{border-color:var(--cobalt);transform:translateY(-2px)}
.tcard .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tcard .p{display:flex;justify-content:space-between;align-items:baseline}
.tcard .p b{font:700 20px var(--display)}
.tcard .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2)}
.rank{font:700 13px var(--display);color:var(--ink2)}

/* ---------- features ---------- */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fcard{background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px}
.fcard h3{font-size:20px}
.fcard p{margin:0;color:var(--ink2)}
.fvis{background:var(--fog);border:1px solid var(--rule);border-radius:12px;padding:14px;font-size:13px;display:flex;flex-direction:column;gap:8px;min-height:150px}
.fvis .row{display:flex;justify-content:space-between;gap:10px}
.fvis .row span{color:var(--ink2)}
.minigauge{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--up),var(--amber),var(--down));position:relative;margin:6px 0 4px}
.minigauge i{position:absolute;top:-4px;left:22%;width:3px;height:14px;background:var(--ink);border-radius:2px}
.fvis .al{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule)}
.fvis .al:last-child{border:0}
.fvis .al i{width:8px;height:8px;border-radius:2px;flex:none}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:step}
.step{border-top:2px solid var(--cobalt);padding-top:16px}
.step .n{font:700 14px var(--display);color:var(--cobalt)}
.step h3{font-size:20px;margin:6px 0}
.step p{margin:0;color:var(--ink2);max-width:36ch}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:0 18px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:400 22px/1 var(--body);color:var(--ink2);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{margin:0 0 16px;color:var(--ink2);max-width:70ch}

/* ---------- closing CTA ---------- */
.cta-band{margin-top:72px;border-radius:20px;padding:40px;background:linear-gradient(135deg,var(--cobalt),#4D5FE0);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta-band h2{font-size:32px;color:#fff}
.cta-band p{margin:6px 0 0;opacity:.85}
.cta-band .btn{background:#fff!important;color:#15212B!important;border-color:#fff!important}

@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat b{font-size:24px}
  .feat,.steps{grid-template-columns:1fr}
  .cta-band{padding:28px}
  .cta-band h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}