:root{--blue:#1a6fc4;--blue-d:#1558a0;--ink:#1a2733;--muted:#5b6b7a;--line:#e3eaf2;--bg:#f6f9fc;--green:#2a9d4e;--gold:#e0a200}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:17px;line-height:1.72;color:var(--ink);background:#fff}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 6px rgba(0,0,0,.04)}
.hwrap{max-width:1080px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{font-weight:800;font-size:22px;color:var(--ink);white-space:nowrap}
.logo .logo-mark{background:var(--blue);color:#fff;padding:2px 8px;border-radius:7px;margin-right:2px}
.logo small{font-size:12px;color:var(--muted);font-weight:600}
.main-nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.main-nav a{padding:7px 11px;border-radius:7px;color:var(--muted);font-size:14.5px;font-weight:600}
.main-nav a:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.main-nav a.active{background:var(--blue);color:#fff}
/* layout */
.container{max-width:820px;margin:0 auto;padding:0 20px 60px}
.breadcrumbs{font-size:13.5px;color:var(--muted);padding:16px 0 6px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs span{color:var(--ink)}
/* typography */
h1{font-size:33px;line-height:1.22;margin:10px 0 20px;letter-spacing:-.01em}
h2{font-size:25px;line-height:1.3;margin:38px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--line)}
h3{font-size:20px;margin:24px 0 10px}
p{margin:0 0 16px}
article a{text-decoration:underline;text-underline-offset:2px}
/* CTA */
.cta{margin:22px 0}
.cta-btn{display:inline-block;background:var(--green);color:#fff!important;font-weight:700;padding:13px 22px;border-radius:10px;text-decoration:none!important;box-shadow:0 3px 10px rgba(42,157,78,.28)}
.cta-btn:hover{background:#23823f;text-decoration:none!important}
.cta-btn.big{font-size:19px;padding:16px 30px;margin-top:10px}
.cta-inline{background:#eef6ff;border-left:4px solid var(--blue);padding:12px 16px;border-radius:0 8px 8px 0;margin:18px 0}
/* services */
.service{border:1px solid var(--line);border-radius:14px;padding:6px 22px 18px;margin:18px 0;background:#fff;box-shadow:0 2px 10px rgba(20,50,90,.05)}
.service-1{border:2px solid var(--gold);background:linear-gradient(180deg,#fffdf5,#fff)}
.service h3{margin-top:14px}
.pros,.cons{border-radius:10px;padding:12px 16px;margin:12px 0;font-size:15.5px;line-height:1.85}
.pros{background:#eefaf1;border:1px solid #cdeed6}
.cons{background:#fef3f3;border:1px solid #f6d6d6}
.review{background:var(--bg);border-radius:10px;padding:12px 16px;font-style:italic;color:#33414f}
.more{margin:14px 0 4px}
/* see-also + faq */
.see-also{background:var(--bg);border-radius:10px;padding:12px 16px;font-size:15.5px}
.faq{margin-top:36px}
.faq-item{border-bottom:1px solid var(--line);padding:6px 0 10px}
.faq-item h3{font-size:18px;margin:14px 0 6px}
.faq-item p{color:#33414f}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:14px 0 6px}
.card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:15px 16px;background:#fff;transition:.15s;text-decoration:none!important}
.card:hover{border-color:var(--blue);box-shadow:0 6px 16px rgba(20,50,90,.1);transform:translateY(-2px)}
.card-cat{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--blue);font-weight:700}
.card-title{font-weight:700;font-size:16.5px;color:var(--ink);line-height:1.3}
.card-desc{font-size:13.5px;color:var(--muted);line-height:1.5}
.related{margin-top:40px}
/* hero / catalog */
.hero{text-align:center;padding:30px 16px 22px;background:linear-gradient(180deg,#eef6ff,#fff);border-radius:18px;margin:14px 0 10px}
.hero h1{font-size:36px;margin:6px 0 14px}
.hero-sub{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto 18px}
.catalog-title{margin-top:46px}
.cat-block{margin:26px 0}
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cat-head h2{border:0;margin:18px 0 6px;padding:0}
.more-link{font-size:14px;font-weight:600;white-space:nowrap}
.all-link{text-align:center;margin:34px 0}
.all-link a{display:inline-block;background:var(--bg);padding:12px 22px;border-radius:10px;font-weight:600}
.lead{font-size:18px;color:var(--muted)}
.sitemap-block{margin:18px 0}
.sitemap-block ul{columns:2;gap:24px;padding-left:18px}
.sitemap-block li{margin:3px 0;break-inside:avoid}
/* footer */
.site-footer{background:#0f2740;color:#b9c9d8;margin-top:50px}
.fwrap{max-width:1080px;margin:0 auto;padding:36px 20px 10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.fcol h4{color:#fff;font-size:15px;margin:0 0 10px}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:5px 0}
.fcol a{color:#9fb6cb;font-size:14px}
.fcol a:hover{color:#fff}
.fbottom{max-width:1080px;margin:0 auto;padding:14px 20px 30px;border-top:1px solid #1c3a59;font-size:12.5px;color:#7e93a8}
.fbottom p{margin:8px 0}
@media(max-width:640px){
  h1,.hero h1{font-size:27px}h2{font-size:21px}body{font-size:16px}
  .main-nav{width:100%;margin-left:0;overflow-x:auto}
  .sitemap-block ul{columns:1}
}