/* Minimal, responsive, dark theme */
:root{
  --bg:#0b0f14; --panel:#101826; --text:#e5e7eb; --muted:#9aa5b1;
  --accent:#7dd3fc; --accent2:#60a5fa; --radius:14px; --border:rgba(125,211,252,.18);
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
.container{width:min(1100px,92vw);margin-inline:auto}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:linear-gradient(to bottom,rgba(16,24,38,.92),rgba(16,24,38,.6));border-bottom:1px solid var(--border);backdrop-filter:saturate(140%) blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--accent),var(--accent2))}
.brand-name{color:var(--text);text-decoration:none;font-weight:700}
.menu a{color:var(--text);text-decoration:none;margin-left:14px}
.menu a:hover{text-decoration:underline}
.menu .btn{background:linear-gradient(145deg,var(--accent),var(--accent2));color:#081018;padding:8px 12px;border-radius:10px;font-weight:800;margin-left:16px}

/* Hero */
.hero{padding:64px 0 28px;text-align:center}
.hero h1{font-size:clamp(28px,4.5vw,52px);margin:8px 0}
.hero p{color:var(--muted);max-width:720px;margin:0 auto}
.cta-row{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-primary{background:linear-gradient(145deg,var(--accent),var(--accent2));color:#081018;font-weight:800;padding:12px 16px;border-radius:10px}
.btn-secondary{background:var(--panel);border:1px solid var(--border);padding:12px 16px;border-radius:10px}

/* Cards */
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card{background:linear-gradient(180deg,rgba(13,19,31,.85),rgba(9,14,22,.92));border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}
.kpi{font-size:26px;font-weight:800}
.g12{grid-column:span 12}
.g6{grid-column:span 12}
.g4{grid-column:span 12}
@media(min-width:820px){.g6{grid-column:span 6}.g4{grid-column:span 4}}

/* Footer */
.site-footer{margin-top:38px;border-top:1px solid var(--border);padding:22px 0 40px;color:var(--muted)}