/* Tokenomics Audit Desk — dark theme (2026-10-28 redesign)
   Brand: deep ink navy, cyan-blue gradient (logo family), gold for price/premium. */
:root{
  --bg:#070b14; --bg2:#0a1120; --panel:#0d1628; --panel2:#111d33;
  --line:#1e2c47; --line2:#2a3d61;
  --ink:#e8eefb; --muted:#9db1d1; --faint:#64769a;
  --cyan:#38bdf8; --blue:#3b82f6; --gold:#f5b544; --gold2:#ffd479;
  --green:#34d399; --amber:#fbbf24; --red:#fb7185; --rose:#f43f5e;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(900px 480px at 85% -80px, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(760px 420px at -120px 240px, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg) 340px);
  color:var(--ink); max-width:1120px; margin:0 auto; padding:0 20px 64px;
  line-height:1.6; font-size:16.5px;
}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:34px; line-height:1.15; letter-spacing:-.02em; margin:.4em 0 .35em; font-weight:800}
h2{font-size:25px; letter-spacing:-.015em; margin:1.6em 0 .55em; font-weight:800;
   padding-bottom:10px; border-bottom:1px solid var(--line)}
h3{font-size:18.5px; margin:.2em 0 .35em; font-weight:700}
p{margin:.55em 0}
.small{font-size:13px; color:var(--muted)}
.f{color:var(--muted); font-size:15px}
.v{font-weight:700; color:var(--ink)}
.lede{font-size:19px; color:var(--muted); max-width:46em}
.disc{background:rgba(245,181,68,.08); border:1px solid rgba(245,181,68,.35);
  color:#f3d9a4; border-radius:12px; padding:12px 16px; font-size:14px; margin:18px 0}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; margin:18px 0; box-shadow:0 12px 32px rgba(0,0,0,.35)}
table{border-collapse:collapse; width:100%; margin:14px 0 20px}
th,td{border:1px solid var(--line); padding:9px 12px; text-align:left; font-size:15px}
th{background:var(--panel2); color:var(--ink)}
td{color:var(--muted)}
ul,ol{padding-left:1.3em} li{margin:.3em 0; color:var(--muted)}
li b,li strong{color:var(--ink)}
code{background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.92em; color:var(--gold2)}
hr{border:none; border-top:1px solid var(--line); margin:28px 0}

/* ——— Site nav ——— */
.site-nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:22px;
  flex-wrap:wrap; padding:14px 4px; margin:0 -4px;
  background:rgba(7,11,20,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-nav .brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink);
  letter-spacing:-.01em; font-size:17px}
.site-nav .brand:hover{text-decoration:none}
.site-nav .brand img{width:34px; height:34px}
.site-nav .brand span em{font-style:normal; color:var(--cyan)}
.site-nav nav{display:flex; gap:18px; flex-wrap:wrap; margin-left:auto; align-items:center}
.site-nav nav a{color:var(--muted); font-size:15px; font-weight:600}
.site-nav nav a:hover{color:var(--ink); text-decoration:none}
.btn{display:inline-block; background:linear-gradient(135deg,var(--cyan),var(--blue));
  color:#04101f !important; font-weight:800; padding:11px 20px; border-radius:12px;
  border:none; cursor:pointer; font-size:15.5px; box-shadow:0 8px 22px rgba(56,189,248,.25)}
.btn:hover{text-decoration:none; filter:brightness(1.08)}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold)); box-shadow:0 8px 22px rgba(245,181,68,.22)}
.btn.ghost{background:transparent; color:var(--ink) !important; border:1px solid var(--line2); box-shadow:none}
.btn.sm{padding:8px 15px; font-size:14.5px}

/* ——— Hero ——— */
.hero{padding:58px 0 10px; text-align:left}
.eyebrow{color:var(--gold); font-weight:800; letter-spacing:.22em; font-size:12.5px; text-transform:uppercase}
.hero h1{font-size:52px; max-width:15.5em; margin:.25em 0 .3em}
.hero h1 .grad{background:linear-gradient(92deg,var(--cyan),#818cf8 55%,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lede{font-size:20px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 8px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:34px 0 6px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px}
.stat .n{font-size:27px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.stat .n span{color:var(--cyan)}
.stat .t{font-size:13.5px; color:var(--faint); margin-top:2px}

/* ——— Products ——— */
.products{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; margin:22px 0}
.product{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:18px; padding:26px 26px 24px; display:flex; flex-direction:column; position:relative;
  box-shadow:0 14px 34px rgba(0,0,0,.35)}
.product.featured{border:1.5px solid var(--gold); box-shadow:0 18px 44px rgba(245,181,68,.13)}
.product .tag{position:absolute; top:-13px; left:22px; background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#221600; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px}
.product .pname{font-size:14px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan)}
.product.featured .pname{color:var(--gold)}
.product .price{font-size:44px; font-weight:800; letter-spacing:-.03em; margin:6px 0 2px}
.product .price small{font-size:15px; color:var(--faint); font-weight:600; letter-spacing:0}
.product .pdesc{color:var(--muted); font-size:15.5px}
.product ul{margin:12px 0 20px; padding-left:1.15em}
.product li{font-size:15px; margin:.42em 0}
.product .pcta{margin-top:auto; display:flex; flex-direction:column; gap:9px}
.product .pcta .alt{font-size:13.5px; color:var(--faint); text-align:center}
.product .btn{text-align:center}

/* ——— Audit cards ——— */
.audits{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; margin:20px 0}
.audit{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; box-shadow:0 10px 26px rgba(0,0,0,.3)}
.audit .ahead{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.audit h3{font-size:19px}
.audit .chain{font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.12em; font-weight:700}
.audit .score-n{font-size:31px; font-weight:800; letter-spacing:-.02em}
.audit .score-n small{font-size:14px; color:var(--faint); font-weight:600}
.pill{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 11px; border-radius:999px; border:1px solid}
.pill.sound{color:var(--green); border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.09)}
.pill.work{color:var(--amber); border-color:rgba(251,191,36,.5); background:rgba(251,191,36,.09)}
.pill.fragile{color:var(--red); border-color:rgba(251,113,133,.5); background:rgba(251,113,133,.09)}
.audit .links{margin-top:12px; display:flex; gap:16px; font-weight:700; font-size:15px}

/* ——— Steps ——— */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:20px 0}
.step{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 22px}
.step .sn{font-size:13px; font-weight:800; color:var(--gold); letter-spacing:.18em}
.step h3{margin-top:6px}

/* ——— FAQ / footer ——— */
details{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:10px 0}
summary{cursor:pointer; font-weight:700; color:var(--ink)}
details p{color:var(--muted); font-size:15.5px}
.site-foot{margin-top:56px; border-top:1px solid var(--line); padding:26px 0 8px;
  display:flex; gap:26px; flex-wrap:wrap; justify-content:space-between}
.site-foot .cols{display:flex; gap:44px; flex-wrap:wrap}
.site-foot h4{margin:0 0 8px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.site-foot a{display:block; color:var(--muted); font-size:14.5px; margin:5px 0}
.site-foot a:hover{color:var(--ink)}

/* ——— Score page widgets ——— */
.grid{display:flex; flex-wrap:wrap; gap:12px}
.tok{background:var(--panel); border:1px solid var(--line2); border-radius:14px; padding:14px 16px;
  cursor:pointer; min-width:104px; text-align:center; font:inherit; color:var(--ink)}
.tok:hover,.tok.sel{background:var(--panel2); border-color:var(--cyan)}
.tok .sym{font-weight:800; font-size:16px; display:block}
.tok .sc{font-size:23px; font-weight:800; display:block}
.band{display:inline-block; border:1px solid var(--line2); border-radius:999px; padding:1px 10px; font-size:12px; font-weight:700}
.b-Low{background:rgba(52,211,153,.13); color:var(--green)}
.b-Guarded{background:rgba(253,224,71,.13); color:#fde047}
.b-Elevated{background:rgba(251,146,60,.15); color:#fb923c}
.b-High{background:rgba(248,113,113,.14); color:#f87171}
.b-Severe{background:rgba(244,63,94,.18); color:var(--red)}
.big{font-size:46px; font-weight:800; line-height:1; letter-spacing:-.02em}
.bar{height:8px; background:var(--panel2); border-radius:99px; margin:8px 0 12px; overflow:hidden}
.bar>div{height:100%; background:linear-gradient(90deg,var(--cyan),var(--gold),var(--rose))}
.sev{font-weight:800; font-size:11.5px; border:1px solid var(--line2); border-radius:6px; padding:1px 7px; color:var(--muted)}
input,select,textarea{font:inherit; padding:10px 12px; border:1px solid var(--line2); border-radius:10px;
  background:var(--bg2); color:var(--ink)}
input[type=email],input[type=text]{width:100%}
button.go{font:inherit; font-weight:800; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#04101f; padding:12px 24px}
.hp{position:absolute; left:-9999px}
#detail{display:none} #reqbox{display:none}
iframe{max-width:100%}

@media (max-width:640px){
  .hero h1{font-size:36px}
  h1{font-size:27px}
  body{font-size:15.5px; padding:0 14px 48px}
  .site-nav{gap:12px}
  .site-nav nav{margin-left:0}
}
