/* ===== Base / Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ffffff;--ink:#15192b;--muted:#5b6172;--line:#e6e8ef;--soft:#f6f7fb;
  --brand:#2b5cff;--brand-dark:#1d44d6;--accent:#ffb020;--green:#0f9d58;--red:#d33;
  --radius:14px;--maxw:1080px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{padding-left:1.25rem}

/* ===== Layout ===== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}
.logo span{color:var(--brand)}
.nav{display:flex;gap:22px;font-size:.94rem;font-weight:600}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--brand-dark)}
.menu-btn{display:none}

main{padding:34px 0 60px}
article{font-size:1.05rem}
article h1{font-size:2.15rem;line-height:1.22;font-weight:800;letter-spacing:-.02em;margin-bottom:.4rem}
article h2{font-size:1.5rem;font-weight:800;margin:2.2rem 0 .7rem;letter-spacing:-.01em}
article h3{font-size:1.18rem;font-weight:700;margin:1.5rem 0 .5rem}
article p{margin:.6rem 0}
article ul,article ol{margin:.6rem 0}

/* ===== Quick Answer ===== */
.quick-answer{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);padding:20px 24px;margin:1.2rem 0 1.8rem}
.quick-answer h2{margin:0 0 .6rem;font-size:1.15rem}
.quick-answer ol{margin:0}

/* ===== CTA blocks ===== */
.cta{background:linear-gradient(115deg,#1d44d6,#2b5cff);color:#fff;border-radius:var(--radius);padding:26px 28px;margin:1.6rem 0;box-shadow:0 10px 30px rgba(43,92,255,.18)}
.cta h3{color:#fff;margin:0 0 .35rem}
.cta p{color:rgba(255,255,255,.92);margin:.3rem 0 1rem}
.cta .btn{display:inline-block;background:#fff;color:var(--brand-dark);font-weight:800;padding:13px 26px;border-radius:50px;font-size:1.02rem}
.cta .btn:hover{text-decoration:none;background:#fff8e6}
.cta.soft{background:var(--soft);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.cta.soft h3{color:var(--ink)}
.cta.soft p{color:var(--muted)}
.cta.soft .btn{background:var(--brand);color:#fff}

/* ===== Service cards ===== */
.service{border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin:1.4rem 0;background:#fff;box-shadow:0 1px 2px rgba(20,25,40,.04)}
.service .badge{display:inline-block;font-size:.78rem;font-weight:800;padding:4px 12px;border-radius:50px;margin-bottom:.6rem}
.badge.gold{background:#fff3d6;color:#9a6b00}
.badge.silver{background:#eef1f6;color:#41506b}
.badge.bronze{background:#fde9e2;color:#b5421a}
.service h3{display:flex;align-items:center;gap:8px}
.service .pros{margin:.5rem 0}
.service .tag{font-size:.86rem;color:var(--muted);font-weight:600}

/* ===== Tables ===== */
.table-wrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--soft);font-weight:700;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
table a{font-weight:700}

/* ===== Boxes ===== */
.box{border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin:1.2rem 0;background:#fff}
.box.tip{border-left:4px solid var(--green);background:#f3fbf6}
.box.mistake{border-left:4px solid var(--red);background:#fdf4f3}
.box.expert{border-left:4px solid var(--accent);background:#fffbf1}
.box h3{margin-top:.1rem}

/* ===== Trust bar ===== */
.trust{display:flex;flex-wrap:wrap;gap:18px 28px;color:var(--muted);font-size:.9rem;margin:.8rem 0 1.6rem;font-weight:600}
.trust span::before{content:"✓ ";color:var(--green);font-weight:800}

/* ===== FAQ ===== */
.faq{border-top:1px solid var(--line);margin-top:2.2rem;padding-top:1rem}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:700;cursor:pointer;font-size:1.05rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--brand);font-weight:800}
.faq details[open] summary::before{content:"– "}
.faq p{color:var(--muted);margin-top:.5rem;font-size:.98rem}

/* ===== Footer ===== */
.site-footer{background:#0e1222;color:#aab2c8;padding:42px 0 28px;font-size:.92rem;margin-top:30px}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.site-footer h4{color:#fff;font-size:.95rem;margin-bottom:.7rem}
.site-footer a{color:#aab2c8;display:block;padding:.18rem 0}
.site-footer a:hover{color:#fff}
.site-footer .bottom{border-top:1px solid #232842;margin-top:26px;padding-top:18px;font-size:.82rem;color:#7a8299;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.disclosure{background:#fffbe6;border:1px solid #f3e9b5;border-radius:var(--radius);padding:14px 18px;font-size:.85rem;color:#7a6310;margin:1.4rem 0}

/* ===== Breadcrumb ===== */
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:.6rem}
.breadcrumb a{color:var(--muted)}

@media(max-width:860px){
  .nav{display:none}
  .menu-btn{display:inline-block;color:var(--muted);font-size:1.4rem;background:none;border:none;cursor:pointer}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  article h1{font-size:1.7rem}
}