@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&family=Lato:wght@300;400;700&display=swap');

/* ── Design tokens ── */
:root {
  --bg:        #06080f;
  --bg2:       #0d1120;
  --bg3:       #131929;
  --bg4:       #1a2235;
  --border:    #1e2d47;
  --border2:   #243552;

  --green:     #00e87a;
  --green2:    #00c464;
  --blue:      #2d7cff;
  --blue2:     #1a5fd4;
  --gold:      #f0b429;
  --orange:    #ff6b2b;
  --purple:    #8b5cf6;
  --red:       #f43f5e;
  --teal:      #06b6d4;

  --text:      #e2e8f7;
  --text2:     #94a3c4;
  --text3:     #56688a;

  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 2px 12px rgba(0,0,0,.4);
  --shadow:    0 8px 40px rgba(0,0,0,.55);
  --shadow-lg: 0 20px 80px rgba(0,0,0,.7);
  --glow-g:    0 0 40px rgba(0,232,122,.12);
  --glow-b:    0 0 40px rgba(45,124,255,.12);

  --font-head: 'Syne', sans-serif;
  --font-body: 'Lato', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Tier colors */
  --free-c:    #56688a;
  --pro-c:     #2d7cff;
  --proplus-c: #8b5cf6;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Noise overlay */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:.35;
}

/* ── Typography ── */
h1,h2,h3,h4,h5 { font-family:var(--font-head); letter-spacing:-.02em; }
.mono { font-family:var(--font-mono); }
a { color:var(--green); text-decoration:none; transition:opacity .2s; }
a:hover { opacity:.8; }
p { color:var(--text2); line-height:1.75; }

/* ── Layout ── */
.container  { max-width:1160px; margin:0 auto; padding:0 24px; }
.container-sm { max-width:820px; margin:0 auto; padding:0 24px; }
.container-lg { max-width:1360px; margin:0 auto; padding:0 24px; }

/* ── Grid ── */
.g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:900px) { .g3,.g4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:580px) { .g2,.g3,.g4 { grid-template-columns:1fr; } }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:var(--radius); font-family:var(--font-head);
  font-size:.875rem; font-weight:600; cursor:pointer; border:none;
  transition:all .2s; white-space:nowrap; letter-spacing:.01em;
}
.btn-green  { background:var(--green);  color:#020a06; }
.btn-green:hover  { box-shadow:0 0 28px rgba(0,232,122,.45); transform:translateY(-1px); }
.btn-blue   { background:var(--blue);   color:#fff; }
.btn-blue:hover   { box-shadow:0 0 28px rgba(45,124,255,.45); transform:translateY(-1px); }
.btn-purple { background:var(--purple); color:#fff; }
.btn-purple:hover { box-shadow:0 0 28px rgba(139,92,246,.45); transform:translateY(-1px); }
.btn-ghost  { background:transparent; color:var(--text); border:1px solid var(--border2); }
.btn-ghost:hover  { border-color:var(--green); color:var(--green); }
.btn-danger { background:var(--red); color:#fff; }
.btn-sm  { padding:7px 14px; font-size:.8rem; }
.btn-lg  { padding:14px 32px; font-size:1rem; }
.btn-xl  { padding:17px 40px; font-size:1.05rem; }
.btn-full { width:100%; }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ── Cards ── */
.card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px;
}
.card-sm { padding:16px; border-radius:var(--radius); }
.card-hover { transition:border-color .2s, transform .2s, box-shadow .2s; }
.card-hover:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow); }

/* ── Form controls ── */
label { display:block; font-size:.8rem; font-weight:700; color:var(--text3); margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em; }
input[type=text],input[type=number],input[type=email],input[type=password],select,textarea {
  width:100%; padding:11px 14px; background:var(--bg4); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text); font-family:var(--font-body); font-size:.92rem;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
input:focus,select:focus,textarea:focus {
  border-color:var(--green); box-shadow:0 0 0 3px rgba(0,232,122,.1);
}
input[type=range] { -webkit-appearance:none; width:100%; height:4px; background:var(--border); border-radius:2px; outline:none; cursor:pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; background:var(--green); border-radius:50%; }
.input-wrap { position:relative; }
.input-wrap .prefix { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:.9rem; pointer-events:none; }
.input-wrap input { padding-left:26px; }
.field { margin-bottom:16px; }
select option { background:var(--bg3); }

/* ── Badges ── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:100px; font-size:.72rem; font-weight:700; letter-spacing:.04em;
}
.badge-green  { background:rgba(0,232,122,.1);  color:var(--green); }
.badge-blue   { background:rgba(45,124,255,.1);  color:var(--blue); }
.badge-gold   { background:rgba(240,180,41,.1);  color:var(--gold); }
.badge-orange { background:rgba(255,107,43,.1);  color:var(--orange); }
.badge-purple { background:rgba(139,92,246,.1);  color:var(--purple); }
.badge-red    { background:rgba(244,63,94,.1);   color:var(--red); }
.badge-gray   { background:rgba(86,104,138,.12); color:var(--text2); }
.badge-teal   { background:rgba(6,182,212,.1);   color:var(--teal); }

/* ── Tier badges ── */
.tier-free   { background:rgba(86,104,138,.15); color:var(--text2); border:1px solid var(--border2); }
.tier-pro    { background:rgba(45,124,255,.12); color:var(--blue);  border:1px solid rgba(45,124,255,.3); }
.tier-proplus{ background:rgba(139,92,246,.12); color:var(--purple);border:1px solid rgba(139,92,246,.3); }

/* ── Stat tiles ── */
.stat-tile {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:20px 22px; position:relative; overflow:hidden;
}
.stat-tile::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--green); }
.stat-tile.blue::before  { background:var(--blue); }
.stat-tile.gold::before  { background:var(--gold); }
.stat-tile.purple::before{ background:var(--purple); }
.stat-tile.red::before   { background:var(--red); }
.stat-tile .lbl { font-size:.72rem; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.stat-tile .val { font-family:var(--font-mono); font-size:1.75rem; font-weight:500; color:var(--text); line-height:1; }
.stat-tile .sub { font-size:.75rem; color:var(--text3); margin-top:6px; }
.stat-tile .chg { font-size:.75rem; font-weight:700; margin-top:4px; }
.chg-up   { color:var(--green); }
.chg-down { color:var(--red); }

/* ── Nav ── */
.nav {
  position:sticky; top:0; z-index:200;
  background:rgba(6,8,15,.88); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:60px; max-width:1360px; margin:0 auto; padding:0 24px;
}
.nav-logo {
  font-family:var(--font-head); font-size:1.25rem; font-weight:800;
  color:var(--text); text-decoration:none; display:flex; align-items:center; gap:8px;
}
.nav-logo .dot { width:8px; height:8px; background:var(--green); border-radius:50%; }
.nav-links { display:flex; align-items:center; gap:6px; list-style:none; }
.nav-links a {
  padding:6px 12px; border-radius:8px;
  font-size:.85rem; font-weight:600; color:var(--text2); transition:all .2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--text); background:var(--bg4); }
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-user { display:flex; align-items:center; gap:8px; cursor:pointer; position:relative; }
.nav-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--purple)); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:.8rem; font-weight:700; }
.nav-tier-pill { padding:3px 9px; border-radius:100px; font-size:.68rem; font-weight:700; }

/* ── Sidebar (app layout) ── */
.app-layout { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 60px); }
.sidebar {
  background:var(--bg2); border-right:1px solid var(--border);
  padding:20px 12px; position:sticky; top:60px; height:calc(100vh - 60px); overflow-y:auto;
}
.sidebar-section { margin-bottom:24px; }
.sidebar-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text3); padding:0 10px; margin-bottom:6px; }
.sidebar-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:8px; font-size:.855rem; font-weight:600;
  color:var(--text2); cursor:pointer; transition:all .15s; border:none; background:none; width:100%; text-align:left;
}
.sidebar-item:hover { background:var(--bg3); color:var(--text); }
.sidebar-item.active { background:rgba(0,232,122,.08); color:var(--green); }
.sidebar-item .icon { width:18px; height:18px; flex-shrink:0; opacity:.7; }
.sidebar-item.active .icon { opacity:1; }
.sidebar-badge { margin-left:auto; font-size:.65rem; font-weight:700; padding:2px 7px; border-radius:100px; }
@media(max-width:900px) { .app-layout { grid-template-columns:1fr; } .sidebar { display:none; } }

/* ── Main content ── */
.main-content { padding:32px 36px; overflow-y:auto; }
@media(max-width:900px) { .main-content { padding:20px; } }

/* ── Tables ── */
.tbl { width:100%; border-collapse:collapse; font-size:.875rem; }
.tbl th { text-align:left; padding:10px 14px; color:var(--text3); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border); }
.tbl td { padding:13px 14px; border-bottom:1px solid rgba(30,45,71,.5); }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:rgba(255,255,255,.015); }

/* ── Tabs ── */
.tabs { display:flex; gap:4px; background:var(--bg3); border-radius:var(--radius); padding:4px; }
.tab { padding:8px 16px; border-radius:7px; font-size:.83rem; font-weight:600; cursor:pointer; color:var(--text2); border:none; background:none; transition:all .2s; white-space:nowrap; }
.tab.active { background:var(--bg); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.35); }

/* ── Progress bars ── */
.progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; transition:width .6s ease; }

/* ── Stack bars ── */
.stack-bar { display:flex; height:28px; border-radius:6px; overflow:hidden; }
.stack-seg { display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; transition:flex .5s ease; min-width:4px; }

/* ── Score ring ── */
.score-ring-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.score-ring-wrap .inner { position:absolute; text-align:center; }
.score-ring-wrap .sval { font-family:var(--font-mono); font-size:1.6rem; font-weight:500; line-height:1; }
.score-ring-wrap .slbl { font-size:.65rem; color:var(--text3); margin-top:3px; }

/* ── Modals ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(6,8,15,.85); backdrop-filter:blur(8px);
  z-index:500; display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal {
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--radius-xl); padding:32px; width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto; position:relative;
  box-shadow:var(--shadow-lg); animation:modalIn .25s ease;
}
.modal-close { position:absolute; top:16px; right:16px; background:var(--bg4); border:none; border-radius:8px; width:32px; height:32px; cursor:pointer; color:var(--text2); display:flex; align-items:center; justify-content:center; }
.modal-close:hover { color:var(--text); }
@keyframes modalIn { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:none; } }

/* ── Toast ── */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:9000; display:flex; flex-direction:column; gap:8px; }
.toast {
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--radius); padding:13px 18px;
  font-size:.875rem; min-width:260px; max-width:380px;
  box-shadow:var(--shadow); animation:toastIn .3s ease;
  display:flex; align-items:center; gap:10px;
}
.toast-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } }

/* ── Waterfall ── */
.wf-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(30,45,71,.5); font-size:.875rem; }
.wf-row:last-child { border-bottom:none; }
.wf-total { font-weight:700; border-top:1px solid var(--border2); padding-top:12px; margin-top:4px; }

/* ── Pricing cards ── */
.pricing-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-xl); padding:28px; position:relative; transition:all .2s; }
.pricing-card.featured { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue), var(--glow-b); }
.pricing-card .price-num { font-family:var(--font-mono); font-size:2.5rem; font-weight:500; }
.pricing-card .price-period { font-size:.85rem; color:var(--text3); }
.pricing-feature { display:flex; align-items:flex-start; gap:8px; padding:7px 0; font-size:.875rem; color:var(--text2); border-bottom:1px solid rgba(30,45,71,.35); }
.pricing-feature:last-child { border-bottom:none; }
.pricing-feature .chk { color:var(--green); flex-shrink:0; margin-top:2px; }
.pricing-feature .cross { color:var(--text3); flex-shrink:0; margin-top:2px; }

/* ── Animations ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pulse  { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.fade-up { animation:fadeUp .45s ease both; }
.au1 { animation-delay:.08s; }
.au2 { animation-delay:.16s; }
.au3 { animation-delay:.24s; }
.au4 { animation-delay:.32s; }

/* ── Utilities ── */
.flex   { display:flex; }
.fc     { display:flex; align-items:center; }
.fb     { display:flex; justify-content:space-between; align-items:center; }
.fwrap  { flex-wrap:wrap; }
.gap4  { gap:4px; }  .gap8  { gap:8px; }  .gap12 { gap:12px; }
.gap16 { gap:16px; } .gap20 { gap:20px; } .gap24 { gap:24px; }
.tc  { text-align:center; }
.tr  { text-align:right; }
.mt4 { margin-top:4px; }   .mt8 { margin-top:8px; }   .mt12 { margin-top:12px; }
.mt16{ margin-top:16px; }  .mt20{ margin-top:20px; }   .mt24{ margin-top:24px; }
.mt32{ margin-top:32px; }  .mt40{ margin-top:40px; }   .mt48{ margin-top:48px; }
.mb8 { margin-bottom:8px; }.mb12{ margin-bottom:12px; }.mb16{ margin-bottom:16px; }
.mb24{ margin-bottom:24px; }.mb32{ margin-bottom:32px; }
.c-green  { color:var(--green);  }  .c-blue { color:var(--blue);  }
.c-gold   { color:var(--gold);   }  .c-red  { color:var(--red);   }
.c-purple { color:var(--purple); }  .c-orange { color:var(--orange); }
.c-muted  { color:var(--text2);  }  .c-dim  { color:var(--text3); }
.fw6 { font-weight:600; } .fw7 { font-weight:700; }
.divider { border:none; border-top:1px solid var(--border); margin:20px 0; }
.w-full { width:100%; }
.hidden { display:none !important; }
.truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Ad slots ── */
.ad-slot { background:var(--bg3); border:1px dashed var(--border2); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:.75rem; font-style:italic; }
.ad-h  { height:90px; width:100%; }
.ad-sq { height:250px; width:300px; }
.ad-sb { height:280px; width:100%; }

/* ── Section labels ── */
.eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; border-radius:100px;
  background:rgba(0,232,122,.07); border:1px solid rgba(0,232,122,.18);
  font-size:.75rem; font-weight:700; color:var(--green); letter-spacing:.06em; text-transform:uppercase;
}

/* ── Lock overlay ── */
.lock-overlay {
  position:absolute; inset:0; z-index:10;
  background:rgba(6,8,15,.75); backdrop-filter:blur(4px);
  border-radius:inherit; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
}
.lock-overlay .lock-icon { font-size:1.5rem; }
.lock-overlay p { font-size:.82rem; color:var(--text2); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text3); }

/* ════════════════════════════════════
   MOBILE RESPONSIVE
════════════════════════════════════ */

html, body { overflow-x:hidden; max-width:100vw; }

@media(max-width:768px) {
  .nav-links { display:none; }
  .nav-inner { padding:0 14px; }
  .nav-right .btn-ghost { display:none; }
  .nav-tier-pill { display:none; }
  .nav-avatar { width:30px; height:30px; font-size:.7rem; }
}
.mob-menu-btn {
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  background:var(--bg3); border:1px solid var(--border); cursor:pointer; flex-shrink:0;
}
@media(max-width:768px) { .mob-menu-btn { display:flex; } }

.mob-drawer {
  display:none; position:fixed; top:60px; left:0; right:0; bottom:0;
  background:var(--bg2); border-top:1px solid var(--border);
  padding:16px; z-index:300; flex-direction:column; gap:4px; overflow-y:auto;
}
.mob-drawer.open { display:flex; }
.mob-drawer a {
  display:flex; align-items:center; gap:10px;
  padding:13px 14px; border-radius:10px;
  color:var(--text2); font-size:.95rem; font-weight:600; text-decoration:none;
}
.mob-drawer a:hover { background:var(--bg3); color:var(--text); }
.mob-drawer .mob-hr { border:none; border-top:1px solid var(--border); margin:8px 0; }

@media(max-width:768px) {
  .app-layout { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .main-content { padding:14px 14px 28px; }
}
@media(max-width:620px) {
  .g4 { grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .g3 { grid-template-columns:1fr 1fr !important; gap:12px !important; }
}
@media(max-width:380px) {
  .g4, .g3, .g2 { grid-template-columns:1fr !important; }
}
@media(max-width:860px) { .sim-layout { grid-template-columns:1fr !important; } }
@media(max-width:760px) { .dr-grid { grid-template-columns:1fr !important; } .dr-sidebar { display:none !important; } }
@media(max-width:600px) { .pricing-grid { grid-template-columns:1fr !important; } }
@media(max-width:680px) { .learn-grid { grid-template-columns:1fr !important; } .learn-toc { display:none !important; } }
@media(max-width:680px) { .footer-grid { grid-template-columns:1fr 1fr !important; gap:20px !important; } }
@media(max-width:400px) { .footer-grid { grid-template-columns:1fr !important; } }
@media(max-width:600px) {
  .tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
  .tab { flex-shrink:0; font-size:.76rem; padding:7px 10px; }
}
.tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media(max-width:520px) {
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal { border-radius:var(--radius-xl) var(--radius-xl) 0 0; max-height:85vh; padding:24px 18px; }
}
@media(max-width:600px) {
  .hero-btns { flex-direction:column !important; }
  .hero-btns .btn { width:100% !important; }
  .hero-preview { display:none !important; }
}
@media(max-width:480px) {
  .stat-tile { padding:14px 16px; }
  .stat-tile .val { font-size:1.4rem; }
  .stat-tile .lbl { font-size:.65rem; }
  .container, .container-sm, .container-lg { padding:0 12px; }
  .card { padding:14px; }
}
@media(max-width:600px) {
  .ad-h { height:60px; }
  .ad-sq, .ad-sb { display:none; }
}

/* Desktop-only nav name */
@media(min-width:769px) {
  .nav-name-desktop { display:inline !important; }
  #nav-signout-btn { display:inline-flex !important; }
}