/* ===== RESET ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:#f4f7fb;color:#0f172a;line-height:1.75;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}

/* ===== LAYOUT ===== */
.container{width:min(1140px,92%);margin:0 auto}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.6rem;border-radius:999px;
  font-weight:700;font-size:.9rem;border:none;
}
.btn-primary{background:#1d4ed8;color:#fff}
.btn-outline{border:2px solid #1d4ed8;color:#1d4ed8;background:transparent}
.btn-white{background:#fff;color:#0f172a}
.btn-outline-light{border:2px solid rgba(255,255,255,.6);color:#fff;background:transparent}

/* ===== HEADER ===== */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  padding:1rem 0;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);
  box-shadow:0 2px 20px rgba(0,0,0,.05);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-size:1.4rem;font-weight:900}
.logo span{color:#1d4ed8}
.nav{display:flex;gap:1.6rem;font-size:.9rem;font-weight:600}
.nav a{opacity:.7}
.nav a.active,.nav a:hover{opacity:1}
.header-btns{display:flex;gap:.6rem}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem}

/* ===== HERO ISLAND ===== */
.hero-island{
  padding:10rem 0 6rem;
  background:radial-gradient(1200px 600px at 50% -10%,#dbeafe,#f4f7fb);
}
.island{
  max-width:820px;margin:0 auto;
  background:#fff;border-radius:32px;
  padding:4rem 3rem;text-align:center;
  box-shadow:0 30px 80px rgba(29,78,216,.08);
}
.eyebrow{
  text-transform:uppercase;letter-spacing:.18em;
  font-size:.7rem;color:#1d4ed8;font-weight:800;
}
.island h1{font-size:clamp(2rem,4.5vw,3.4rem);margin:.6rem 0}
.sub{opacity:.65;max-width:620px;margin:0 auto 2rem}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ===== NAV INTRO ===== */
.nav-intro{padding:5rem 0;background:#fff}
.nav-intro h2{text-align:center;margin-bottom:2.5rem}
.nav-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;
}
.nav-card{
  background:#f8fafc;border-radius:20px;padding:2rem 1.5rem;
  text-align:center;transition:transform .25s,box-shadow .25s;
}
.nav-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(0,0,0,.06)}
.nav-card .icon{font-size:2rem;margin-bottom:.6rem}
.nav-card h3{font-size:1rem;margin-bottom:.3rem}
.nav-card p{font-size:.85rem;opacity:.6}

/* ===== FEATURES ===== */
.features{padding:5rem 0;background:#f1f5f9}
.features h2{text-align:center;margin-bottom:2rem}
.feature-blocks{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;
}
.feature{
  background:#fff;border-radius:18px;padding:2rem;
  border-top:4px solid #1d4ed8;
}
.feature h3{margin-bottom:.5rem;font-size:1rem}
.feature p{font-size:.88rem;opacity:.65}

/* ===== FAQ ===== */
.faq{padding:5rem 0;background:#fff}
.faq h2{text-align:center;margin-bottom:2rem}
details{
  border:1px solid #e2e8f0;border-radius:12px;
  margin-bottom:1rem;overflow:hidden;
}
summary{
  padding:1.1rem 1.4rem;font-weight:700;cursor:pointer;
}
details[open] summary{background:#f8fafc}
details p{padding:0 1.4rem 1.2rem;opacity:.7;font-size:.92rem}

/* ===== FOOTER ===== */
.site-footer{
  background:#0f172a;color:#94a3b8;
  padding:2rem 0;text-align:center;font-size:.82rem;
}
.site-footer a{color:#e2e8f0}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  .nav{position:fixed;inset:0;background:#fff;flex-direction:column;padding:6rem 2rem;gap:1.4rem;transform:translateX(-100%);transition:transform .3s}
  .nav.open{transform:translateX(0)}
  .menu-toggle{display:block}
  .header-btns{display:none}
}
/* ===== SPOT ===== */
body#spot{background:#0b1220;color:#e5e7eb}
.magazine-hero{padding:8rem 0;background:#111827}
.mag{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.mock-ui{background:#1e293b;border-radius:16px;padding:2rem}
.bar{height:12px;border-radius:6px;margin-bottom:10px}
.bar.b1{width:80%;background:#3b82f6}
.bar.b2{width:60%;background:#60a5fa}
.bar.b3{width:90%;background:#93c5fd}

/* ===== FUTURES ===== */
body#futures{background:#060b17;color:#cbd5e1}
.dash-hero{padding:7rem 0;background:#0a0f1f;text-align:center}
.dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;padding:4rem 0}
.card{background:#111827;border-radius:16px;padding:2rem;border:1px solid #1e293b}

/* ===== EARN ===== */
body#earn{background:#f0f6ff;color:#0f172a}
.earn-hero{padding:6rem 0;text-align:center;background:#dbeafe}
.earn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;padding:4rem 0}
.earn-card{background:#fff;border-radius:18px;padding:2rem;border-top:4px solid #2563eb}

/* ===== SECURITY ===== */
body#security{background:#fff;color:#0f172a}
.secure-hero{padding:6rem 0;text-align:center;background:#f1f5f9}
.timeline{padding:4rem 0;display:flex;flex-direction:column;gap:1.5rem}
.step{background:#f8fafc;border-left:4px solid #2563eb;padding:1.2rem 1.5rem;border-radius:0 12px 12px 0}