/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.7;
  color:#1a1a2e;
  background:#ffffff;
  font-size:18px;
}
img{max-width:100%;height:auto;display:block}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:960px;margin:0 auto;padding:0 20px}
.site-header{
  border-bottom:1px solid #e5e7eb;
  background:#0f172a;
  color:#fff;
  position:sticky;top:0;z-index:50;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:60px}
.site-header .brand{font-weight:700;font-size:20px;color:#fff;letter-spacing:-.3px}
.site-header nav a{color:#cbd5e1;margin-left:22px;font-size:15px;font-weight:500}
.site-header nav a:hover{color:#fff;text-decoration:none}

main{padding:36px 0 64px}

/* ===== Hero / H1 ===== */
.hero{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);color:#fff;padding:48px 0 44px}
.hero h1{font-size:38px;line-height:1.2;margin:0 0 14px;letter-spacing:-.5px;font-weight:800}
.hero p.lead{font-size:19px;color:#cbd5e1;margin:0;max-width:720px}

/* ===== Quick Answer ===== */
.quick-answer{
  background:#f0f9ff;
  border:1px solid #bae6fd;
  border-left:4px solid #0284c7;
  border-radius:10px;
  padding:22px 26px;
  margin:28px 0 10px;
}
.quick-answer h2{margin:0 0 10px;font-size:21px;color:#075985}
.quick-answer ol{margin:0;padding-left:22px}
.quick-answer li{margin:5px 0}

h2{font-size:27px;margin:40px 0 14px;letter-spacing:-.3px}
h3{font-size:21px;margin:26px 0 10px}
p{margin:0 0 14px}

/* ===== Service cards ===== */
.service{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:26px 28px;
  margin:22px 0;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.service.best{border-color:#fbbf24;background:#fffbeb;box-shadow:0 4px 14px rgba(251,191,36,.15)}
.service .rank{display:inline-block;background:#475569;color:#fff;font-weight:700;font-size:13px;padding:3px 11px;border-radius:999px;margin-bottom:10px}
.service.best .rank{background:#d97706}
.service h3{margin:0 0 8px;font-size:23px}
.service .desc{color:#475569;margin:0 0 12px}
.service ul{margin:8px 0 14px;padding-left:22px}
.service ul li{margin:4px 0}
.service .cta{display:inline-block;background:#2563eb;color:#fff;font-weight:600;padding:11px 22px;border-radius:8px;margin-top:6px}
.service .cta:hover{background:#1d4ed8;text-decoration:none}
.service.best .cta{background:#d97706}
.service.best .cta:hover{background:#b45309}

/* ===== Table ===== */
.table-wrap{overflow-x:auto;margin:24px 0}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:680px}
th,td{border:1px solid #e5e7eb;padding:11px 14px;text-align:left;vertical-align:top}
th{background:#f8fafc;font-weight:700}
tr:nth-child(even) td{background:#fcfcfd}

/* ===== Callouts ===== */
.tip{background:#f0fdf4;border-left:4px solid #16a34a;border-radius:8px;padding:16px 20px;margin:18px 0}
.tip strong{color:#15803d}
.mistake{background:#fef2f2;border-left:4px solid #dc2626;border-radius:8px;padding:16px 20px;margin:18px 0}
.mistake strong{color:#b91c1c}
.expert{background:#faf5ff;border-left:4px solid #9333ea;border-radius:8px;padding:16px 20px;margin:18px 0}
.expert strong{color:#7e22ce}

/* ===== Checklist ===== */
.checklist{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:22px 26px;margin:22px 0}
.checklist ul{list-style:none;padding:0;margin:0}
.checklist li{padding:6px 0 6px 30px;position:relative}
.checklist li::before{content:"\2713";position:absolute;left:0;top:6px;color:#16a34a;font-weight:700}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid #e5e7eb;padding:16px 0}
.faq-item h3{font-size:18px;margin:0 0 8px;color:#0f172a}
.faq-item p{margin:0;color:#475569}

/* ===== CTA banner ===== */
.cta-banner{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border-radius:14px;padding:34px;text-align:center;margin:34px 0}
.cta-banner h2{color:#fff;margin:0 0 8px}
.cta-banner p{color:#dbeafe;margin:0 0 18px}
.cta-banner a{display:inline-block;background:#fff;color:#1d4ed8;font-weight:700;padding:13px 30px;border-radius:8px;font-size:17px}
.cta-banner a:hover{text-decoration:none;background:#f0f9ff}

footer{background:#0f172a;color:#94a3b8;padding:34px 0;font-size:15px}
footer a{color:#cbd5e1}
footer .container{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center}
footer p{margin:0}

@media(max-width:640px){
  body{font-size:17px}
  .hero h1{font-size:29px}
  h2{font-size:23px}
  .site-header nav a{margin-left:14px;font-size:14px}
  .service{padding:20px}
}