:root{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#1d73d8;
  --primary-2:#0f5ec0;
  --accent:#ff4d2d;
  --border:#e5e7eb;
  --success:#129c57;
  --shadow:0 8px 24px rgba(17,24,39,.08);
  --radius:16px;
  --radius-sm:10px;
  --container:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}
.container{max-width:var(--container); margin:0 auto; padding:0 16px}
.topbar{height:4px; background:#0a6c71}
.site-header{
  background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30;
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; color:#143a76}
.logo-mark{
  width:38px;height:38px;border-radius:12px;
  background: conic-gradient(from 210deg, #ff9a3c, #ff6b2c 58%, #ffc46b);
  display:grid; place-items:center; color:#fff; font-weight:900;
  box-shadow: var(--shadow);
}
.logo small{display:block; color:var(--muted); font-size:.7rem; font-weight:600; letter-spacing:.02em}
nav ul{display:flex; gap:18px; list-style:none; padding:0; margin:0; align-items:center; flex-wrap:wrap}
nav a{color:#374151; font-weight:600}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:12px; border:1px solid transparent;
  background:var(--primary); color:#fff; font-weight:700; box-shadow:var(--shadow); cursor:pointer;
  transition:.18s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px); background:var(--primary-2)}
.btn.ghost{background:#fff;color:var(--primary); border-color:var(--border); box-shadow:none}
.btn.accent{background:var(--accent)}
.hero{
  padding:36px 0 18px;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:start}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero-copy h1{
  margin:.2rem 0 .8rem; font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.15; letter-spacing:-.02em;
}
.hero-copy p{color:var(--muted); margin:0 0 1rem}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px}
.badge{
  background:#eef4ff; color:#1f4fa3; border:1px solid #dbeafe; border-radius:999px; padding:6px 10px; font-size:.83rem; font-weight:700;
}
.checker-card{padding:18px}
.input-row{display:flex; gap:10px; flex-wrap:wrap}
.input-row input{
  flex:1 1 380px; min-width:240px; padding:14px 15px; border:1px solid var(--border); border-radius:12px; font-size:1rem;
}
.helper{font-size:.9rem; color:var(--muted)}
.result-heading{padding:4px 0 0; font-weight:700}
.metrics-grid{
  margin-top:16px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
}
.metric{
  padding:16px; border:1px solid var(--border); border-radius:14px; background:#fff; min-height:108px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}
.metric .label{font-size:.93rem; color:#374151; line-height:1.35}
.metric .value{font-size:1.7rem; font-weight:800; color:var(--primary); line-height:1.1; margin-top:8px}
.metric .sub{font-size:.8rem; color:var(--muted); margin-top:6px}
.section{padding:18px 0}
.section h2{font-size:1.8rem; line-height:1.2; margin:0 0 .8rem}
.section p.lead{color:var(--muted); margin:0 0 1rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.feature-card, .content-card, .faq-item, .price-card{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow);
}
.feature-card h3, .content-card h3, .price-card h3{margin:.2rem 0 .35rem; font-size:1.1rem}
.feature-card p, .content-card p, .price-card p{margin:0; color:var(--muted)}
.kpi-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px;
}
.kpi{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px;
}
.kpi .n{font-weight:800; font-size:1.4rem}
.kpi .t{color:var(--muted); font-size:.92rem}
ul.clean{padding-left:18px; margin:.3rem 0}
ul.clean li{margin:.25rem 0}
.breadcrumb{font-size:.9rem; color:var(--muted); margin:10px 0}
.breadcrumb a{color:var(--muted)}
.faq-item details{border-radius:12px}
.faq-item summary{cursor:pointer; font-weight:700}
.faq-item p{color:var(--muted)}
.cta-band{
  background:linear-gradient(135deg, #0f172a, #1e293b); color:#fff; padding:24px; border-radius:18px; box-shadow:var(--shadow)
}
.cta-band p{color:#cbd5e1}
footer{
  margin-top:24px; background:#fff; border-top:1px solid var(--border);
}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:16px; padding:22px 0}
.footer-grid h4{margin:.15rem 0 .35rem}
.footer-grid p, .footer-grid li{color:var(--muted); font-size:.94rem}
.footer-grid ul{list-style:none; padding:0; margin:0}
.copy{
  padding:12px 0 22px; color:var(--muted); border-top:1px dashed var(--border); font-size:.9rem;
}
.note{
  background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:10px 12px;border-radius:12px;font-size:.9rem
}
.ok{
  color:var(--success); font-weight:700;
}
.table-like{display:grid; gap:8px}
.table-like .row{display:grid; grid-template-columns:180px 1fr; gap:10px; padding:8px 10px; background:#fff; border:1px solid var(--border); border-radius:10px}
.tag-list{display:flex;flex-wrap:wrap; gap:8px}
.tag{font-size:.78rem; background:#f3f4f6; border:1px solid var(--border); color:#374151; padding:4px 8px; border-radius:999px}
.blog-list{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.blog-card{background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.blog-card .thumb{aspect-ratio:16/9; background:linear-gradient(135deg,#dbeafe,#eef2ff); display:grid; place-items:center; font-weight:800; color:#1e3a8a}
.blog-card .body{padding:14px}
.blog-card h3{margin:.1rem 0 .35rem; font-size:1.05rem}
.blog-card p{margin:0; color:var(--muted)}
.meta-inline{display:flex; gap:10px; flex-wrap:wrap; font-size:.86rem; color:var(--muted)}
.article{background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); border-radius:16px; padding:18px}
.article h1{line-height:1.15; margin:.2rem 0 .4rem}
.article h2{margin-top:1.3rem}
.article p, .article li{color:#374151}
.article blockquote{border-left:4px solid #bfdbfe; background:#eff6ff; padding:8px 12px; margin:12px 0; border-radius:8px}
form .field{margin:10px 0}
form label{display:block; font-weight:700; margin-bottom:6px}
form input, form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; font:inherit; background:#fff
}
form textarea{min-height:140px; resize:vertical}
small.muted{color:var(--muted)}
@media (max-width: 980px){
  .hero-grid,.grid-3,.blog-list,.footer-grid,.metrics-grid,.kpi-strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 680px){
  nav ul{display:none}
  .hero-grid,.grid-2,.grid-3,.blog-list,.footer-grid,.metrics-grid,.kpi-strip{grid-template-columns:1fr}
  .table-like .row{grid-template-columns:1fr}
  .btn{width:100%}
  .input-row .btn{width:auto}
}