:root{
  --bg:#fff; --fg:#0a0a0a; --muted:#666; --line:#eee; --accent:#111; --card:#fafafa;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; background:var(--bg); color:var(--fg); line-height:1.55}
a{color:var(--fg); text-decoration: none}
a:hover{text-decoration: underline}
.container{max-width:var(--maxw); margin:0 auto; padding:0 16px}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom: 1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(4px); z-index:9}
.nav .brand{font-weight:700; letter-spacing:.3px}
.nav ul{display:flex; list-style:none; padding:0; margin:0; gap:18px}
.hero{display:grid; grid-template-columns: 1.2fr .8fr; gap:32px; padding:48px 0 24px}
.hero h1{font-size: clamp(32px, 3.8vw, 48px); line-height:1.1; margin:0 0 12px}
.hero p.lead{font-size: clamp(16px, 2.1vw, 20px); color:var(--muted); margin:0 0 16px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border:1px solid var(--fg); border-radius:999px; font-weight:600}
.btn.primary{background:var(--fg); color:#fff}
.meta{display:flex; gap:16px; font-size:14px; color:var(--muted)}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} .grid.cols-3{grid-template-columns:1fr} .grid.cols-2{grid-template-columns:1fr}}
.slice{padding:32px 0; border-top: 1px solid var(--line)}
.slice h2{font-size: clamp(24px, 2.8vw, 32px); margin:0 0 16px}
.slice p{margin:0 0 12px; color:var(--muted)}
.kpis{display:grid; gap:12px; grid-template-columns: repeat(4, minmax(0,1fr))}
.kpi{padding:14px; border:1px dashed var(--line); border-radius:12px; text-align:center}
.kpi .v{font-weight:800; font-size:20px}
.feature{display:flex; gap:12px}
.feature svg{flex:0 0 28px}
.footer{border-top:1px solid var(--line); padding:24px 0; color:var(--muted); font-size:14px}
.breadcrumbs{font-size:12px; color:var(--muted); margin:8px 0}
.hero-ill{border:1px solid var(--line); border-radius:20px; overflow:hidden}
picture img{display:block; width:100%; height:auto}
figure{margin:0}
.small{font-size:13px; color:var(--muted)}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.badge{border:1px solid var(--line); border-radius:24px; padding:6px 10px; font-size:12px}
table.seo{width:100%; border-collapse:collapse; margin:8px 0}
table.seo td{border:1px solid var(--line); padding:8px; font-size:13px; color:var(--muted)}
blockquote{margin:0; padding:14px 16px; border-left:4px solid var(--fg); background:var(--card)}

:root{--brand:#10b981;--brand-700:#0e9f76}
.btn{border-radius:999px; padding:10px 14px; border:1px solid var(--brand)}
.btn.primary{background:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-700)}