:root{
  --c-primary:#0ea5e9;
  --c-primary-dark:#0369a1;
  --c-bg:#f0f9ff;
  --c-card:#ffffff;
  --c-text:#0c1e2e;
  --c-soft:#274b68;
  --c-muted:#64899e;
  --c-border:#bae6fd;
  --c-success:#16a34a;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Plus Jakarta Sans',sans-serif;background:var(--c-bg);color:var(--c-text);line-height:1.65}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;margin:0 0 .7rem}
a{text-decoration:none;color:inherit}
.top-nav{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--c-border);z-index:20}
.top-nav-inner{max-width:1120px;margin:0 auto;padding:0 18px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo{font-family:'Outfit',sans-serif;font-weight:900;color:var(--c-text);font-size:1.2rem}
.logo span{color:var(--c-primary)}
.top-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.top-links a{font-size:.92rem;color:var(--c-soft);padding:7px 11px;border-radius:9px}
.top-links a:hover{background:#f0f9ff;color:var(--c-primary-dark)}
.top-links .cta{background:var(--c-primary);color:#fff;font-weight:700}
.top-links .cta:hover{background:var(--c-primary-dark);color:#fff}
.hero{padding:56px 18px 40px;background:linear-gradient(145deg,#f0f9ff,#fff 60%)}
.hero-inner{max-width:1120px;margin:0 auto}
.breadcrumb{font-size:.83rem;color:var(--c-muted);margin-bottom:12px}
.badge{display:inline-block;background:#e0f2fe;color:var(--c-primary-dark);font-size:.76rem;font-weight:700;border-radius:999px;padding:5px 11px;margin-bottom:12px}
.hero h1{font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.15}
.hero p{color:var(--c-soft);max-width:820px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:10px;font-weight:700;font-size:.92rem;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--c-primary);color:#fff}
.btn-primary:hover{background:var(--c-primary-dark)}
.btn-outline{background:transparent;border-color:var(--c-primary);color:var(--c-primary)}
.btn-outline:hover{background:#e0f2fe}
.section{padding:40px 18px}
.section-inner{max-width:1120px;margin:0 auto}
.section-sub{color:var(--c-muted);margin-top:0}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius);padding:18px}
.card h3{font-size:1.05rem}
.card p{color:var(--c-soft);font-size:.92rem;margin:.35rem 0 0}
.tool-box{display:grid;gap:12px;background:#fff;border:1px solid var(--c-border);border-radius:16px;padding:20px}
.tool-row{display:grid;grid-template-columns:1fr 220px;gap:10px}
.tool-row label{font-size:.9rem;font-weight:600;color:var(--c-soft)}
.tool-row input,.tool-row select{padding:10px;border:1px solid var(--c-border);border-radius:10px;font:inherit}
.tool-result{background:#ecfeff;border:1px solid #a5f3fc;border-radius:12px;padding:14px;font-size:.95rem;color:#164e63}
.tool-result strong{display:block;font-size:1.1rem;color:#0c4a6e}
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--c-border);border-radius:14px;overflow:hidden}
.table th,.table td{border-bottom:1px solid var(--c-border);padding:10px 11px;text-align:left;font-size:.9rem}
.table th{background:#f0f9ff;color:#0c4a6e}
.table tr:last-child td{border-bottom:none}
.faq details{background:#fff;border:1px solid var(--c-border);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700}
.faq p{margin:.65rem 0 0;color:var(--c-soft);font-size:.92rem}
.kpi{font-family:'Outfit',sans-serif;font-size:2rem;color:var(--c-primary);font-weight:900}
.footer{background:#0c1e2e;color:#cbd5e1;padding:26px 18px;margin-top:30px}
.footer-inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.84rem}
.small{font-size:.83rem;color:var(--c-muted)}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;background:#f0f9ff;color:#0c4a6e;border:1px solid var(--c-border);padding:4px 9px;border-radius:999px;font-size:.74rem;font-weight:600}
.notice{background:#f8fafc;border-left:4px solid var(--c-primary);padding:12px 14px;border-radius:10px;color:var(--c-soft)}
@media (max-width:720px){
  .tool-row{grid-template-columns:1fr}
  .top-links a{display:none}
  .top-links .cta{display:inline-flex}
  input,select,textarea{font-size:16px!important}
}