:root{
  --ink:#0f172a;          /* slate-900 */
  --muted:#334155;        /* slate-700 */
  --bg:#ffffff;           /* white */
  --tint:#0ea5e9;         /* sky-500 */
  --tint-ink:#0b7fb4;     /* darker tint */
  --accent:#16a34a;       /* green-600 */
  --ring: rgba(14,165,233,.35);
  --card:#f8fafc;         /* slate-50 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--tint);text-decoration:none}
a:hover{color:var(--tint-ink)}
.container{width:min(1100px,92vw);margin-inline:auto}
.btn{display:inline-block;padding:.8rem 1.05rem;border-radius:.8rem;font-weight:600;border:1px solid transparent;transition:.2s box-shadow,.2s transform,.2s background,.2s color}
.btn:focus{outline:none;box-shadow:0 0 0 .2rem var(--ring)}
.btn-primary{background:var(--tint);color:#fff}
.btn-primary:hover{background:var(--tint-ink)}
.btn-ghost{background:transparent;border-color:#cbd5e1;color:var(--ink);border:1px solid #cbd5e1}
.btn-ghost:hover{background:#f1f5f9}
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #e2e8f0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.logo{display:flex;align-items:center;gap:.55rem;font-weight:800;letter-spacing:.2px}
.logo img{width:28px;height:28px}
.nav .links{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.hero{padding:4.5rem 0 3rem;background:linear-gradient(180deg,#f8fafc 0%,#fff 70%)}
.hero h1{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.1;margin:0 0 1rem;font-weight:800}
.hero p{font-size:clamp(1.05rem,1.5vw,1.15rem);color:var(--muted);margin:0 0 1.2rem}
.hero .cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.4rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:1fr}
@media (min-width:860px){.grid-2{grid-template-columns:1.1fr .9fr}}
section{padding:2.5rem 0;border-top:1px solid #e2e8f0}
h2{font-size:clamp(1.35rem,2.5vw,1.9rem);margin:0 0 .75rem}
.lead{color:var(--muted)}
.card{background:var(--card);border:1px solid #e2e8f0;border-radius:1rem;padding:1.1rem}
.kpis{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:1rem}
.kpis .k{background:#fff;border:1px solid #e2e8f0;border-radius:.9rem;padding:.9rem}
.k .n{font-size:1.2rem;font-weight:800;margin-bottom:.25rem}
.pill{display:inline-block;padding:.25rem .55rem;border-radius:999px;background:#e2e8f0;color:#334155;font-size:.8rem;font-weight:600}
.list{margin:.6rem 0 0; padding-left:1.1rem}
.list li{margin:.35rem 0}
.muted{color:#64748b}
.embed{background:#0b1220;border-radius:1rem;overflow:hidden;border:1px solid #0f172a}
footer{padding:2.5rem 0;color:#64748b}
.footgrid{display:grid;gap:1rem}
@media (min-width:720px){.footgrid{grid-template-columns:1fr auto}}
.hr{height:1px;background:#e2e8f0;margin:1.25rem 0}
.note{font-size:.9rem;color:#475569}
.badges{display:flex;gap:.5rem;flex-wrap:wrap}
.badge{border:1px dashed #cbd5e1;border-radius:.7rem;padding:.2rem .5rem;font-size:.78rem;color:#475569}
.nav a.active{font-weight:700}
main{min-height:60vh}
/* simple responsive nav (no JS): stack links on small screens */
@media (max-width:540px){.nav .links{gap:.6rem}}