:root{
  --primary-color:#0a84ff;
  --secondary-color:#ff6b00;
  --background:#ffffff;
  --surface:#f8f9fa;
  --text-primary:#1a1a1a;
  --text-secondary:#6c757d;
  --border:#e9ecef;
  --font-heading:'Inter','Segoe UI',sans-serif;
  --font-body:'Inter','Segoe UI',sans-serif;
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:32px;
  --space-xl:64px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--background);color:var(--text-primary);font-family:var(--font-body);line-height:1.6}
h1{font-size:2.5rem;font-weight:700;letter-spacing:-0.02em;margin:0 0 var(--space-md)}
h2{font-size:2rem;font-weight:600;margin:0 0 var(--space-md)}
h3{font-size:1.5rem;font-weight:600;margin:0 0 var(--space-sm)}
p{margin:0 0 var(--space-md)}
a{color:var(--primary-color);text-decoration:none;transition:color .2s ease}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 var(--space-md)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-md)}
.btn{display:inline-block;border-radius:8px;padding:12px 24px;transition:all .3s ease;border:1px solid var(--border)}
.btn.primary{background:var(--primary-color);color:#fff;border-color:transparent}
.btn.primary:hover{transform:scale(1.05)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:var(--space-md);box-shadow:0 2px 8px rgba(0,0,0,.08);transition:box-shadow .2s ease}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.link-card{display:block}
.lead{color:var(--text-secondary)}
.hero{padding:var(--space-xl) 0 var(--space-lg)}
.actions{margin-top:var(--space-md)}
.icon-dot{width:16px;height:16px;border-radius:50%;background:var(--primary-color);margin-bottom:var(--space-sm)}
.animated-infographic .bar{fill:var(--primary-color);opacity:.2}
.animated-infographic .curve{stroke:var(--secondary-color);stroke-width:3;fill:none}
.animated-infographic .node{fill:#fff;stroke:var(--primary-color);stroke-width:3}
.animated-infographic .edge{stroke:#cbd3da;stroke-width:2}
.reveal{opacity:0;transform:translateY(20px)}
.reveal.visible{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}
.game{padding:var(--space-lg) 0}
.latest{padding:var(--space-lg) 0}
@media (prefers-color-scheme:dark){
  :root{--background:#0f1113;--surface:#14171a;--text-primary:#e6e6e6;--text-secondary:#9aa0a6;--border:#2a2f34}
}