/* ============== TOKENS ============== */
:root{
  --bg:#0B1220;
  --surface:#0F1B2A;
  --surface-2:#0C1729;
  --card:#121E33;
  --text:#F8FAFC;
  --muted:#C9D3E3;
  --subtle:#9CB1CF;

  --accent:#F59E0B;         /* Primary orange */
  --accent-600:#f7b43e;
  --accent-700:#d98700;

  --link:#93C5FD;
  --focus:#93C5FD;

  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.30);
  --maxw:1100px;
}

/* ============== BASE ============== */
* { box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  background:var(--bg);
  color:var(--text);
  font: 400 16px/1.58 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:var(--link); text-decoration:none }
a:focus-visible, button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:10px;
}

.container{ max-width:var(--maxw); margin:0 auto; padding:0 16px }
.section{ padding:28px 0 }

/* ============== HEADER ============== */



/* ============== HERO ============== */
.hero{
  background: radial-gradient(120% 140% at 10% -20%, #12213d 0%, #0F1B2A 60%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:22px 18px;
  box-shadow:var(--shadow);
  margin:16px 0 18px;
}
.hero h1{
  font-size: clamp(24px, 3.6vw, 34px);
  line-height:1.2; margin:0 0 8px;
}
.hero p{ color:var(--muted); margin:0 0 12px; max-width:72ch }
.actions{ display:flex; gap:10px; flex-wrap:wrap }

/* ============== BUTTONS ============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:12px 16px; border:0; cursor:pointer;
  border-radius:12px; font-weight:800; letter-spacing:.2px;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
  text-decoration:none;
}
.btn--primary{ background:var(--accent); color:#0B1220; box-shadow:var(--shadow) }
.btn--primary:hover{ transform:translateY(-1px); background:var(--accent-600) }
.btn--primary:active{ transform:translateY(1px); background:var(--accent-700) }

.btn--ghost{
  background:#102037; color:#E2EEFF; border:1px solid rgba(147,197,253,.25)
}
.btn--ghost:hover{ transform:translateY(-1px) }

/* ============== GRID & CARDS ============== */
.grid{ display:grid; gap:18px }
@media (min-width: 960px){ .grid{ grid-template-columns: repeat(3,1fr) } }

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  display:flex; flex-direction:column; gap:10px;
}
.thumb{
  position:relative; width:100%; aspect-ratio:16/10;
  border-radius:10px; overflow:hidden;
  background:linear-gradient(180deg, #1e2b47 0%, #b27b34 100%);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block }

.card h3{ margin:4px 0 8px; font-size:18px; line-height:1.28 }
.meta{ display:flex; flex-wrap:wrap; gap:8px; color:var(--muted) }
.tag{ font-size:12px; color:#E9F0FF; background:#0E1A2B; border:1px solid rgba(201,211,227,.25); padding:4px 8px; border-radius:999px }
.pros{ margin:0 0 6px; color:#dbe6ff; font-size:14px }
.card .btn{ align-self:flex-start }

/* ============== TABLE ============== */
.table{
  margin-top:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow:var(--shadow);
  background:#0F1B2A;
}
.table table{ width:100%; border-collapse:collapse }
.table th, .table td{ padding:12px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left }
.table th{ background:#111f35; color:#dbe6ff; font-weight:600 }
.table td:last-child, .table th:last-child{ text-align:right }
.table tbody tr:last-child td{ border-bottom:0 }

/* ============== FOOTER ============== */
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:28px; padding:18px 0; color:var(--muted);
}
.footer .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.footer nav{ display:flex; gap:12px; flex-wrap:wrap }

/* ============== STORM BANNER ============== */
/* In /assets/styles.css */
.storm{display:none;background:#F59E0B;color:#0B1220;font-weight:800;text-align:center;padding:.6rem}
.storm.show{display:block}
@media (prefers-reduced-motion:no-preference){
  .storm.show{animation:slideDown .25s ease-out}
  @keyframes slideDown{from{transform:translateY(-6px);opacity:.6}to{transform:none;opacity:1}}
}


/* ============== STICKY CTA (mobile) ============== */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; gap:.5rem; padding:.75rem 1rem;
  background:#121E33; border-top:1px solid #0F1B2A;
}
@media(min-width:900px){ .sticky-cta{ display:none } }

/* ============== UTIL ============== */
.small{ font-size:.92rem; color:var(--muted) }
.center{ text-align:center }


/* ======= Header & Nav (single source of truth) ======= */
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(11,18,32,.92);
  -webkit-backdrop-filter:saturate(110%) blur(6px);
  backdrop-filter:saturate(110%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header .bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0;
}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; color:#E7F0FF; text-decoration:none}
.brand img{width:22px; height:22px; border-radius:6px; display:block}

/* Toggle (hidden on desktop) */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid rgba(255,255,255,.12);
  background:#0E1A2B; color:#E7F0FF; border-radius:10px; cursor:pointer;
}

/* Desktop ≥768px */
@media (min-width:768px){
  .nav{ display:flex; align-items:center; gap:14px; }
  .nav a{ color:#cfe1ff; text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px }
  .nav a:hover{ background:#0E1A2B }
  .nav-toggle{ display:none }
}

/* Mobile <768px */
@media (max-width:767.98px){
  .brand{ margin-right:auto }
  .nav-toggle{ display:inline-flex }

  .nav{
    position:fixed;
    left:12px; right:12px;
    top:calc(56px + env(safe-area-inset-top));
    background:#0F1B2A;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    padding:8px;
    box-shadow:0 16px 36px rgba(0,0,0,.45);
    display:none;           /* hidden by default */
    flex-direction:column;
    gap:4px;
    z-index:1000;
  }
  .nav.is-open{ display:flex }
  .nav a{ display:block; padding:12px; color:#E2EEFF; border-radius:10px }
  .nav a:active{ background:#0E1A2B }
}

/* Optional: prevent page jump while menu open */
body.nav-open{ overflow:hidden }