:root
{
    --bg:               #0d1117;
    --surface:          #151b23;
    --surface2:         #1b2330;
    --text:             #f4f7fb;
    --muted:            #aab4c1;
    --line:             #2a3442;
    --accent:           #25f4ee;
    --pink:             #fe2c55;
    --max:              1120px;
}

*
{
    box-sizing:border-box
}

html
{
    scroll-behavior:smooth
}

body
{
    margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55
}

.container{max-width:var(--max);margin:auto;padding:0 24px}
.topbar{position:sticky;top:0;z-index:10;background:rgba(13,17,23,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;color:#fff;text-decoration:none}
.nav nav{display:flex;gap:24px}
.nav nav a,footer a{color:var(--muted);text-decoration:none}
.hero{padding:96px 0 72px;background:radial-gradient(circle at 80% 10%,rgba(37,244,238,.12),transparent 30%),radial-gradient(circle at 70% 50%,rgba(254,44,85,.08),transparent 30%)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--accent);font-weight:800}
h1{font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.02;margin:.45rem 0 1.2rem;letter-spacing:-.04em}
h2{font-size:2rem;margin:0 0 24px}
h3{margin-top:0}
.hero p{font-size:1.16rem;color:var(--muted);max-width:720px}
.actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:1px solid var(--line);border-radius:12px;color:#fff;text-decoration:none;background:var(--surface)}
.btn.primary{background:#fff;color:#080b0f;border-color:#fff;font-weight:800}
.hero-card{background:linear-gradient(145deg,var(--surface2),#10161e);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.metric{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.metric span,.card span{color:var(--muted)}
.metric strong{font-size:1.4rem}
.mini-chart{height:120px;display:flex;align-items:flex-end;gap:10px;padding-top:28px}
.mini-chart i{display:block;flex:1;background:linear-gradient(var(--accent),var(--pink));border-radius:8px 8px 2px 2px}
.mini-chart i:nth-child(1){height:35%}
.mini-chart i:nth-child(2){height:52%}
.mini-chart i:nth-child(3){height:46%}
.mini-chart i:nth-child(4){height:70%}
.mini-chart i:nth-child(5){height:62%}
.mini-chart i:nth-child(6){height:88%}
.mini-chart i:nth-child(7){height:100%}
.section{padding:72px 0}
.section.alt{background:#10161e}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
.card p,.legal-note p,.prose p{color:var(--muted)}
.dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.dashboard-head h1{font-size:2.4rem}
.notice{padding:14px 16px;margin:4px 0 24px;background:rgba(37,244,238,.08);border:1px solid rgba(37,244,238,.3);border-radius:12px;color:#d8fffd}
.metrics-grid{grid-template-columns:repeat(4,1fr);margin-bottom:24px}.metrics-grid strong{display:block;font-size:2rem;margin-top:8px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px}table{width:100%;border-collapse:collapse;background:var(--surface)}
th,td{text-align:left;padding:16px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
td:first-child{white-space:normal;min-width:280px}
small{color:var(--muted)}.prose{max-width:820px}
.prose h1{font-size:3rem}
.prose h2{font-size:1.35rem;margin-top:34px;margin-bottom:8px}
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted)}
.footer-grid{display:flex;justify-content:space-between;gap:24px}
.badge
{
    display:            inline-block;
    margin-left:        8px;
    padding:            3px 8px;
    border-radius:      999px;
    font-size:          12px;
    font-weight:        600;
    vertical-align:     middle;
}


@media(max-width:800px)
{
    .hero-grid,.cards,.metrics-grid
    {
        grid-template-columns:1fr
    }
    .nav nav
    {
        display:none
    }
    .hero
    {
        padding-top:64px
    }
    .footer-grid
    {
        flex-direction:column
    }
    .dashboard-head
    {
        align-items:flex-start
    }
    .hero-card
    {
        margin-top:10px
    }
}