:root{
      --bg:#ffffff; --text:#0b1324; --muted:#5a6780; --brand:#1e90ff; --brand-2:#0f6bdc;
      --card:#f6f8fc; --border:#e6eaf2; --ok:#12b886;
    }
    *{box-sizing:border-box}
    body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;color:var(--text);background:var(--bg)}
    .wrap{max-width:1100px;margin:0 auto;padding:20px}
    header.hero{display:grid;gap:16px;padding:28px 20px;background:
      radial-gradient(1200px 600px at 80% -10%, #e9f2ff 10%, transparent 60%)}
    .badge{display:inline-block;font-size:12px;padding:6px 10px;border-radius:20px;background:var(--card);border:1px solid var(--border);color:var(--muted)}
    h1{font-size:clamp(26px,5vw,40px);margin:8px 0 4px}
    .lead{color:var(--muted);max-width:760px}
    .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;border:1px solid var(--brand);color:#fff;background:linear-gradient(180deg,var(--brand),var(--brand-2));text-decoration:none;font-weight:600}
    .btn.secondary{color:var(--brand-2);background:#fff;border:1px solid var(--border)}
    .meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:14px}
    .cover{width:100%;border:1px solid var(--border);border-radius:14px;background:var(--card);padding:8px}
    .cover img{width:100%;height:auto;border-radius:10px;display:block}

    nav.toc{margin:26px 0;border:1px solid var(--border);border-radius:12px;background:#fff}
    nav.toc h3{margin:0;padding:12px 14px;border-bottom:1px solid var(--border)}
    nav.toc ul{list-style:none;margin:0;padding:10px 16px;display:grid;gap:8px}
    nav.toc a{color:var(--brand-2);text-decoration:none}
    section{padding:18px 0;border-bottom:1px solid var(--border)}
    h2{font-size:clamp(20px,4vw,28px);margin:0 0 8px}
    .grid{display:grid;gap:16px}
    .grid.cols-3{grid-template-columns:1fr}
    .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
    .kpis{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
    .kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
    .kpi strong{font-size:20px;color:var(--ok)}

    table.compare{width:100%;border-collapse:collapse;border:1px solid var(--border);background:#fff;border-radius:12px;overflow:hidden}
    table.compare th,table.compare td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
    table.compare tr:nth-child(even){background:#fafbfe}

    .faq details{border:1px solid var(--border);border-radius:10px;padding:12px;background:#fff}
    .faq details+details{margin-top:10px}
    footer{padding:26px 0;color:var(--muted)}
    @media(min-width:800px){
      .grid.cols-3{grid-template-columns:repeat(3,1fr)}
      .kpis{grid-template-columns:repeat(4,1fr)}
      header.hero{grid-template-columns:1.2fr .8fr;align-items:center}
    }