:root{
  --bg:#f7f8fb;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --brand:#0b5fff;
  --brand-2:#00a3ff;
  --ok:#0ea5e9;
  --shadow:0 10px 30px rgba(2,8,23,.08);
  --radius:18px;
  --radius-sm:14px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background: radial-gradient(900px 400px at 20% -10%, rgba(11,95,255,.10), transparent 60%),
              radial-gradient(900px 400px at 80% -10%, rgba(0,163,255,.10), transparent 60%),
              var(--bg);
  line-height:1.55;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:18px; top:18px; width:auto; height:auto; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); z-index:9999}
.topbar{position:sticky; top:0; z-index:50; background:rgba(247,248,251,.85); backdrop-filter: blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.brand svg{width:34px; height:34px}
.navlinks{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.badge{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.7)}
.hero{padding:36px 0 22px}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:stretch}
@media (max-width: 900px){.hero-grid{grid-template-columns:1fr}}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-card{padding:22px}
.kicker{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
h1{font-size: clamp(28px, 3.2vw, 44px); line-height:1.12; margin:0 0 10px}
.lead{font-size: 1.08rem; color:var(--muted); margin:0 0 16px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 14px; border-radius:14px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); font-weight:650;
}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-color:transparent}
.btn.primary:hover{text-decoration:none; filter:brightness(1.02)}
.btn:hover{text-decoration:none}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media (max-width: 900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
.section{padding:18px 0}
.section h2{font-size: clamp(20px, 2vw, 28px); margin:0 0 12px}
.section p{margin:0 0 12px; color:var(--muted)}
.tile{padding:16px; border-radius:var(--radius-sm); border:1px solid var(--line); background:linear-gradient(180deg, rgba(11,95,255,.05), rgba(255,255,255,.0) 55%), var(--surface)}
.tile h3{margin:0 0 6px; font-size:1.05rem}
.tile ul{margin:10px 0 0 18px; color:var(--muted)}
hr.sep{border:0; height:1px; background:var(--line); margin:18px 0}
.breadcrumbs{font-size:.95rem; color:var(--muted); padding:12px 0}
.breadcrumbs a{color:var(--muted)}
.note{padding:14px 16px; border:1px dashed rgba(2,8,23,.25); border-radius:var(--radius-sm); background:rgba(255,255,255,.7); color:var(--muted)}
.faq details{border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:12px 14px; margin:10px 0}
.faq summary{cursor:pointer; font-weight:650}
.faq p{margin:10px 0 0; color:var(--muted)}
.footer{padding:26px 0 40px; border-top:1px solid var(--line); margin-top:20px}
.small{font-size:.92rem; color:var(--muted)}
.kpis{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 0}
.kpi{flex:1 1 220px; padding:14px 16px}
.kpi strong{display:block; font-size:1.1rem}
.list-inline{display:flex; gap:10px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.65); color:var(--muted); font-size:.92rem}