*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#222;line-height:1.8;font-size:18px;background:#fff}
h1,h2,h3,.logo,.card h3{font-family:'Poppins',system-ui,sans-serif;font-weight:700;color:#1a2a4a}
.hero h1{color:#fff}
.hero p{color:#fff}
a{color:#3367D6;text-decoration:none}
a:hover{text-decoration:underline}
header{background:#fff;border-bottom:1px solid #e5e8ef;position:sticky;top:0;z-index:10}
.nav{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{font-size:22px;font-weight:800;color:#1a2a4a}
.logo span{color:#3367D6}
.nav-links{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
.nav-links a{color:#333;font-weight:600}
.hero{background:linear-gradient(135deg,#3367D6,#1a3a8a);color:#fff;padding:48px 20px;text-align:center}
.hero h1{font-size:34px;line-height:1.25;max-width:800px;margin:0 auto 12px}
.hero p{max-width:720px;margin:0 auto;font-size:17px;opacity:.95}
.search{max-width:560px;margin:22px auto 0;display:flex}
.search input{flex:1;padding:13px 16px;border:none;border-radius:8px 0 0 8px;font-size:16px;outline:none}
.search button{padding:13px 20px;border:none;background:#ffb703;color:#222;font-weight:700;border-radius:0 8px 8px 0;cursor:pointer;font-size:16px}
.container{max-width:1080px;margin:0 auto;padding:28px 20px}
h2{font-size:24px;margin:28px 0 12px;color:#3367D6;border-bottom:3px solid #3367D6;padding-bottom:6px}
h3{font-size:19px;margin:20px 0 8px;color:#0f766e}
.callout-example{background:#e8f0fe;border:1px solid #3367D6;border-left:5px solid #3367D6;border-radius:10px;padding:18px;margin:18px 0}
.callout-tip{background:#e6f4ea;border:1px solid #34a853;border-left:5px solid #34a853;border-radius:10px;padding:18px;margin:18px 0}
.callout-note{background:#fef7e0;border:1px solid #f9ab00;border-left:5px solid #f9ab00;border-radius:10px;padding:18px;margin:18px 0}
.callout-example h3,.callout-tip h3,.callout-note h3{margin-top:0}
p{margin:0 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:20px}
.card{background:#fff;border:1px solid #e5e8ef;border-radius:12px;padding:20px;display:block;color:#222}
.card:hover{border-color:#3367D6;box-shadow:0 4px 16px rgba(51,103,214,.12);text-decoration:none}
.card .ico{font-size:30px}
.card h3{margin:8px 0 4px;font-size:18px}
.card p{font-size:14px;color:#555;margin:0}
.toolbox{background:#fff;border:1px solid #e5e8ef;border-radius:12px;padding:24px;max-width:720px;margin:20px auto}
.toolbox label{display:block;font-weight:600;margin:14px 0 6px}
.toolbox input,.toolbox select,.toolbox textarea{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:8px;font-size:16px;font-family:inherit}
.toolbox textarea{min-height:140px;resize:vertical}
.btn{display:inline-block;background:#3367D6;color:#fff;border:none;padding:13px 26px;border-radius:8px;font-size:16px;font-weight:700;font-family:'Poppins',sans-serif;cursor:pointer;margin-top:16px}
.btn:hover{background:#254f9e}
.btn2{background:#eef2fb;color:#3367D6}
.result{background:#eef6ee;border:1px solid #bfe3bf;border-radius:10px;padding:18px;margin-top:18px;display:none}
.result.show{display:block}
.result .big{font-size:28px;font-weight:800;color:#1a2a4a}
.result table{width:100%;border-collapse:collapse;margin-top:10px}
.result td{padding:8px 4px;border-bottom:1px solid #dfe8df}
.result td:last-child{text-align:right;font-weight:700}
.note{font-size:14px;color:#666}
.faq{margin-top:8px}
.faq p{margin:0 0 10px}
footer{background:#1a2a4a;color:#cdd8ee;padding:36px 20px;margin-top:40px}
footer .inner{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:#cdd8ee}
footer h4{color:#fff;margin-bottom:10px}
.footer-tools{max-width:1080px;margin:28px auto 0;padding-top:24px;border-top:1px solid #2c4a7a}
.footer-tools h4{color:#fff;margin-bottom:16px;font-size:17px}
.footer-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.footer-tools h5{color:#fff;font-size:14px;margin-bottom:8px;font-family:'Poppins',system-ui,sans-serif}
.footer-tools ul{list-style:none}
.footer-tools li{margin:0 0 5px}
.footer-tools a{color:#cdd8ee;font-size:14px}
.footer-tools a:hover{color:#fff}
.ad-slot{background:#eef2fb;border:1px dashed #9db4e0;color:#5b6b8c;text-align:center;padding:18px;border-radius:8px;margin:24px 0;font-size:14px}
.badge{display:inline-block;background:#e6f0ff;color:#3367D6;font-size:13px;font-weight:700;padding:4px 10px;border-radius:20px;margin-bottom:10px}
.rating-widget{background:#fff8e1;border:1px solid #f9ab00;border-radius:12px;padding:22px;text-align:center;margin:28px 0 8px}
.rating-widget .stars{font-size:34px;letter-spacing:6px;cursor:pointer;line-height:1.2}
.rating-widget .stars span{color:#ccc}
.rating-widget .stars span:hover{transform:scale(1.15);display:inline-block}
.checks{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.checks label{font-weight:400;display:flex;gap:6px;align-items:center;margin:0}
.checks input{width:auto}
@media(max-width:640px){.hero h1{font-size:26px}.toolbox{padding:18px}}