:root {
  --brand: #10A7B8;
  --brand-700: #0A7E8B;
  --brand-50: #ECFBFD;
  --bg: #ffffff;
  --surface: #f9fbfc;
  --card: #ffffff;
  --text: #1f2933;
  --muted: #51606c;
  --accent: #0B72E7;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,0.08);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1100px, 92%); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid #e9eef0; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.nav { display:flex; gap:28px; align-items:center; }
.nav-link { color:#1f2933; font-weight:600; position: relative; padding: 6px 0; }
.nav-link.active::after, .nav-link:hover::after { content:''; position:absolute; left:0; right:0; bottom:-10px; height:3px; background:var(--brand); border-radius:3px; }
.brand img { display:block; height:28px; }
.hero { padding:64px 0 40px; display:grid; grid-template-columns: 1.1fr 0.9fr; gap:28px; align-items:center; }
h1.display { font-family:Poppins, Inter, sans-serif; font-weight:800; font-size:48px; line-height:1.05; margin:0 0 10px; letter-spacing:-0.02em; }
p.lead { color:var(--muted); font-size:18px; margin: 0 0 18px; }
.kpis { display:flex; gap:14px; margin-top:8px; flex-wrap:wrap; }
.kpi { background:var(--brand-50); color:#0b5360; border:1px solid #cceff3; padding:10px 12px; border-radius:12px; box-shadow: var(--shadow); }
.hero-img { background:#fff; border:1px solid #e9eef0; border-radius: 18px; box-shadow: var(--shadow); overflow:hidden; }
.hero-img img { display:block; width:100%; height:auto; }
.section { padding:36px 0; }
.section-title { font-size:28px; font-weight:800; letter-spacing:-0.01em; margin:0 0 10px; }
.section-sub { color:var(--muted); margin:0 0 16px; }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.card { background: var(--card); border:1px solid #e9eef0; padding:18px; border-radius: var(--radius); box-shadow: var(--shadow); }
.card h3 { margin:0 0 8px; font-size:18px; }
.card p { color:var(--muted); margin:0 0 10px; }
.article { max-width: 860px; }
.article h1 { font-family:Poppins, Inter, sans-serif; font-weight:800; font-size:36px; letter-spacing:-0.02em; margin:0 0 10px; }
.article .meta { color:var(--muted); margin:0 0 18px; }
.article p, .article li { line-height:1.8; }
.article ol, .article ul { padding-left:20px; }
.breadcrumbs { font-size:14px; color:var(--muted); margin-bottom:14px; }
.breadcrumbs a { color:var(--muted); }
.breadcrumbs a:hover { color:var(--accent); }
.share { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.share a { display:inline-block; padding:8px 10px; border:1px solid #e1e8ee; border-radius:10px; background:#fff; }
.related { margin-top:28px; }
.related h3 { margin:0 0 10px; }
.related ul { padding-left:18px; }
.site-footer { padding:28px 0 40px; border-top:1px solid #e9eef0; margin-top:40px; text-align:center; color:var(--muted); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
  .nav { gap:16px; flex-wrap:wrap; justify-content:flex-end; }
}