:root{
  --bg-grad: linear-gradient(180deg,#0b0d12 0%, #0d1117 35%, #0f141c 100%);
  --surface: rgba(255,255,255,.03);
  --surface-2: rgba(255,255,255,.01);
  --ink: #e6e8ec;
  --ink-dim: #a7aab0;
  --stroke: #1c2330;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --maxw: 1100px;
  --accent-grad: linear-gradient(180deg,#1dd2a3,#0fa47a);
  --accent-shadow: 0 8px 24px rgba(16,185,129,.35);
  --accent-shadow-h: 0 12px 32px rgba(16,185,129,.5);
  --logo-filter: brightness(2) invert(1);
  --logo-halo: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 62%);
}
@media (prefers-color-scheme: light){
  :root{
    --bg-grad: linear-gradient(180deg,#f7fafc 0%, #f2f5f9 60%, #eef2f7 100%);
    --surface: rgba(0,0,0,.04);
    --surface-2: rgba(0,0,0,.02);
    --ink: #0b1420;
    --ink-dim: #4a5568;
    --stroke: #dde3ec;
    --accent-shadow: 0 8px 24px rgba(16,185,129,.22);
    --accent-shadow-h: 0 12px 32px rgba(16,185,129,.28);
    --logo-filter: none;
    --logo-halo: radial-gradient(circle, rgba(0,0,0,0.05) 0%, transparent 62%);
  }
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg-grad);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
.container{max-width:var(--maxw); margin-inline:auto; padding:0 24px}

/* Header / Nav */
.header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(180%) blur(14px);
  background:color-mix(in oklab, white 8%, transparent);
  border-bottom:1px solid var(--stroke);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:42px; filter: var(--logo-filter); background: var(--logo-halo); border-radius:12px; padding:6px}
.brand .name{font-weight:700; letter-spacing:.6px; text-transform:uppercase; font-size:14px}
.nav{display:flex; gap:14px; flex-wrap:wrap}
.nav a{
  text-decoration:none; padding:8px 12px; border-radius:10px; color:var(--ink-dim);
}
.nav a:hover{background:var(--surface); color:var(--ink)}
.nav a.active{background:var(--surface); color:#fff}
.lang{opacity:.9; font-size:14px}

/* Hero */
.hero{padding:80px 0 56px; background:
  radial-gradient(1200px 600px at 50% -100px, rgba(138,180,255,.18), transparent 60%),
  radial-gradient(900px 400px at 80% 30%, rgba(16,185,129,.16), transparent 60%);
}
.hero h1{font-size:clamp(32px,6vw,58px); font-weight:800; letter-spacing:-.02em; line-height:1.05}
.hero p{margin-top:12px; color:var(--ink-dim); font-size:18px; max-width:860px}

/* Sections / cards */
.section{padding:60px 0}
.h2{font-size:clamp(24px,3.6vw,36px); font-weight:800; letter-spacing:-.01em; margin-bottom:10px}
.kicker{color:var(--ink-dim); margin-bottom:24px}
.grid{display:grid; gap:18px}
@media (min-width:860px){.cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)}}
.card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--stroke); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)
}
.card h3{font-size:18px; margin-bottom:6px}
.card p{color:var(--ink-dim)}
.pill{background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--stroke); border-radius:12px; padding:16px}

/* Tables */
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid var(--stroke)}
.table th,.table td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--stroke); color:var(--ink)}
.table thead th{background:var(--surface); font-weight:700}
.table tr:last-child td{border-bottom:none}

/* CTA */
.cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--accent-grad); color:#05130f; font-weight:700;
  border-radius:999px; padding:10px 18px; box-shadow:var(--accent-shadow);
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease;
}
.cta:hover{transform:translateY(-2px); box-shadow:var(--accent-shadow-h)}

/* Footer */
.footer{padding:40px 0 60px; text-align:center; color:var(--ink-dim)}
.footer .logo{height:76px; filter: var(--logo-filter); background: var(--logo-halo); border-radius:12px; padding:6px}
.footer a{color:inherit; text-decoration:none; border-bottom:1px solid transparent}
.footer a:hover{border-bottom-color:currentColor}

/* Reveal */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.reveal{transition:none}}