:root{
  --bg:#0b0f16; --surface:#0f1624; --text:#e6e8ef; --muted:#a5adbd;
  --a1:#10b981; --a2:#0ea5e9; --a3:#a78bfa;
  --radius:14px; --shadow:0 12px 28px rgba(0,0,0,.25);
  --step--2: clamp(.78rem, .74rem + .12vw, .9rem);
  --step--1: clamp(.9rem, .86rem + .2vw, 1.05rem);
  --step-0: clamp(1rem, .98rem + .3vw, 1.25rem);
  --step-1: clamp(1.25rem, 1.1rem + .8vw, 1.8rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.6rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.4rem);
  --step-4: clamp(2.6rem, 2rem + 3.2vw, 4.8rem);
  --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.5rem; --space-5:2rem; --space-6:3rem;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f8fc; --surface:#ffffff; --text:#0b0f16; --muted:#475569; --shadow:0 8px 18px rgba(0,0,0,.08); }
}
*{box-sizing:border-box} html:focus-within{scroll-behavior:smooth} html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 15% -20%, rgba(167,139,250,.15), transparent 60%),
              radial-gradient(1200px 800px at 85% 120%, rgba(16,185,129,.15), transparent 60%),
              var(--bg);
  line-height:1.6;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--a2); outline-offset:2px; border-radius:8px}
.container{width:min(1120px, 92vw); margin-inline:auto}
.section{padding:var(--space-6) 0}
.muted{color:var(--muted)} .center{text-align:center} .stack>*+*{margin-top:var(--space-2)}
.badge{display:inline-flex; gap:.5rem; padding:.35rem .6rem; border-radius:999px; background: color-mix(in srgb, var(--a1) 18%, transparent); border:1px solid color-mix(in srgb, var(--a1) 45%, transparent); color:#05232a; font-weight:600}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.1rem; border-radius:12px; border:1px solid color-mix(in srgb, var(--text) 12%, transparent); background:var(--surface); color:var(--text); font-weight:700}
.btn:hover{background:color-mix(in srgb, var(--text) 10%, transparent)}
.btn.primary{background:linear-gradient(135deg, var(--a1), var(--a2)); color:#0b0f16; border:none; box-shadow:var(--shadow)}
.btn.ghost{background:transparent; border-color:color-mix(in srgb, var(--text) 20%, transparent)}
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid color-mix(in srgb, var(--text) 12%, transparent)}
.nav .row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0}
.brand{display:flex; align-items:center; gap:.75rem; font-weight:900; letter-spacing:.2px}
.brand img{width:40px; height:40px}
.menu{display:flex; align-items:center; gap:1rem}
.menu a{padding:.5rem .75rem; border-radius:10px}
.menu a:hover{background:color-mix(in srgb, var(--text) 8%, transparent)}
.menu-toggle{display:none}
@media (max-width:820px){ .menu{display:none} .menu.open{display:flex; position:absolute; top:60px; right:4vw; flex-direction:column; background:var(--surface); border:1px solid color-mix(in srgb, var(--text) 12%, transparent); padding:.75rem; border-radius:14px; box-shadow:var(--shadow)} .menu-toggle{display:inline-flex; align-items:center; gap:.5rem; background:transparent; border:1px solid color-mix(in srgb, var(--text) 25%, transparent); color:var(--text); padding:.6rem .9rem; border-radius:12px}}
.hero{padding: clamp(4rem, 8vw, 8rem) 0}
.grid-hero{display:grid; grid-template-columns: 1.2fr 1fr; gap:var(--space-5); align-items:center}
@media (max-width:880px){ .grid-hero{grid-template-columns:1fr}}
h1{font-size:var(--step-4); line-height:1.05; margin:0 0 var(--space-3)}
.lead{font-size:var(--step-0); color:var(--muted); max-width:65ch}
.card{border-radius:14px; border:1px solid color-mix(in srgb, var(--text) 12%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, transparent), var(--surface)); padding:var(--space-3); box-shadow:var(--shadow)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3)}
@media (max-width:900px){ .grid-3,.grid-2{grid-template-columns:1fr}}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:var(--space-4)}
.kpi b{display:block; font-size:var(--step-2)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-4)}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr}}
.tag{padding:.25rem .5rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--text) 14%, transparent); color:var(--muted)}
.post-list{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3)}
@media (max-width:900px){ .post-list{grid-template-columns:1fr}}
.post-card img{border-radius:12px}
.post-meta{font-size:var(--step--2); color:var(--muted)}
.reveal{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}
table{width:100%; border-collapse:collapse; font-size:var(--step--1)}
td, th{border-bottom:1px solid color-mix(in srgb, var(--text) 12%, transparent); padding:.6rem .5rem; text-align:left}
.note{background:color-mix(in srgb, var(--a2) 12%, transparent); border:1px solid color-mix(in srgb, var(--a2) 25%, transparent); padding:1rem; border-radius:12px}
.disclaimer{font-size:var(--step--2); color:var(--muted)}
footer{border-top:1px solid color-mix(in srgb, var(--text) 12%, transparent); padding:var(--space-5) 0}
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; clip:rect(0 0 0 0); overflow:hidden; }