/* ==========================================================================
   EXONIX — Design Tokens
   ========================================================================== */
:root{
  --bg: #070F17;
  --bg-panel: #0E1D29;
  --bg-panel-raised: #142B3B;
  --bg-panel-hover: #173245;
  --border: rgba(233, 244, 248, 0.09);
  --border-strong: rgba(233, 244, 248, 0.16);

  --teal: #2DD9C4;
  --teal-dim: #1C9E8F;
  --teal-glow: rgba(45, 217, 196, 0.35);
  --gold: #E8B84B;
  --gold-dim: #B98F34;
  --coral: #FF6B5E;

  --text: #EAF3F6;
  --text-muted: #8FA6B3;
  --text-faint: #5C7280;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before{
  content:"";
  position: fixed; inset:0;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(45,217,196,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(232,184,75,0.06), transparent 55%);
  pointer-events:none;
  z-index:0;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
input, textarea, select{font-family:inherit; color:var(--text);}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:1;}
@media (max-width:720px){.wrap{padding:0 20px;}}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; color:var(--text);}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal-glow);}
.muted{color:var(--text-muted);}
.mono{font-family:var(--font-mono);}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background: rgba(7,15,23,0.82);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-0.01em;}
.logo-mark{
  width:28px; height:28px; border-radius:7px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dim));
  display:flex; align-items:center; justify-content:center;
  color:#04121A; font-weight:800; font-size:14px;
  box-shadow: 0 0 18px var(--teal-glow);
}
.logo span{color:var(--gold);}
.nav-links{display:flex; align-items:center; gap:30px; font-size:14.5px; font-weight:500;}
.nav-links a{color:var(--text-muted); transition:color .15s; position:relative; padding:6px 0;}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--teal);}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--teal); border-radius:2px;}
.nav-right{display:flex; align-items:center; gap:14px;}
.icon-btn{
  width:38px; height:38px; border-radius:10px; background:var(--bg-panel); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); position:relative;
}
.avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--teal-dim)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#04121A;}
.dot-alert{position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%; background:var(--coral); border:2px solid var(--bg);}
.nav-toggle{display:none; background:none; border:none; color:var(--text); font-size:22px;}
@media (max-width:900px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:10px; font-weight:600; font-size:14.5px;
  border:1px solid transparent; transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-primary{background:linear-gradient(135deg, var(--teal), var(--teal-dim)); color:#04141A; box-shadow:0 4px 20px rgba(45,217,196,0.25);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 26px rgba(45,217,196,0.35);}
.btn-ghost{background:var(--bg-panel); border:1px solid var(--border-strong); color:var(--text);}
.btn-ghost:hover{background:var(--bg-panel-raised);}
.btn-gold{background:linear-gradient(135deg, var(--gold), var(--gold-dim)); color:#1A1204;}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px; font-size:13.5px;}

/* ---------- Panels / Cards ---------- */
.panel{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:24px;
}
.panel-raised{background:var(--bg-panel-raised);}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--border); padding:56px 0 28px; margin-top:80px;}
.footer-top{
  background:linear-gradient(120deg, var(--teal-dim), var(--teal));
  border-radius:var(--radius-lg); padding:38px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin-bottom:60px; color:#04141A;
}
.footer-top h3{color:#04141A; font-size:26px; margin-bottom:6px;}
.footer-form{display:flex; gap:10px;}
.footer-form input{padding:12px 16px; border-radius:9px; border:1px solid rgba(4,20,26,0.25); background:rgba(4,20,26,0.08); min-width:230px;}
.footer-form input::placeholder{color:rgba(4,20,26,0.55);}
.footer-cols{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.footer-brand{max-width:280px;}
.footer-links h5{font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:14px;}
.footer-links li{margin-bottom:9px; font-size:14px;}
.footer-links a{color:var(--text-muted);}
.footer-links a:hover{color:var(--teal);}
.footer-bottom{text-align:center; margin-top:50px; color:var(--text-faint); font-size:13px; font-family:var(--font-mono);}
.social-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.social-row a{width:34px; height:34px; border-radius:9px; background:var(--bg-panel); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-muted);}

/* ---------- Page header ---------- */
.page-head{padding:44px 0 8px;}
.page-head h1{font-size:32px;}

/* ---------- Section spacing ---------- */
section{padding:56px 0;}

/* ---------- Disclaimer strip ---------- */
.disclaimer{
  border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:20px 24px;
  background:var(--bg-panel); font-size:13.5px; color:var(--text-muted); margin-top:40px;
}
.disclaimer strong{color:var(--text);}

/* ---------- Utility grid ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.badge{display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; padding:4px 10px; border-radius:20px; border:1px solid var(--border-strong); color:var(--text-muted);}
.badge-teal{color:var(--teal); border-color:rgba(45,217,196,0.35); background:rgba(45,217,196,0.08);}
.badge-gold{color:var(--gold); border-color:rgba(232,184,75,0.35); background:rgba(232,184,75,0.08);}
.badge-up{color:#3FD97A;}
.badge-down{color:var(--coral);}

/* Mobile nav drawer */
.mobile-drawer{
  position:fixed; inset:0; background:rgba(4,10,15,0.75); backdrop-filter:blur(6px);
  z-index:60; display:none; align-items:flex-start; justify-content:flex-end;
}
.mobile-drawer.open{display:flex;}
.mobile-drawer-panel{
  width:78%; max-width:320px; height:100%; background:var(--bg-panel); border-left:1px solid var(--border);
  padding:24px; display:flex; flex-direction:column; gap:6px;
}
.mobile-drawer-panel a{padding:14px 6px; border-bottom:1px solid var(--border); color:var(--text-muted); font-weight:500;}
.mobile-drawer-panel a.active{color:var(--teal);}
.mobile-close{align-self:flex-end; background:none; border:none; color:var(--text); font-size:22px; margin-bottom:10px;}