:root{--navy:#0b1f4d;--blue:#1650d8;--sky:#e8f0ff;--ink:#14213d;--mute:#51607d;--amber:#ffb703;--line:#d6e0f5;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--navy:#06122e;--blue:#6b9bff;--sky:#0f1d3f;--ink:#e6edff;--mute:#a3b2d6;--line:#233563}body{background:#081330}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 "Public Sans",system-ui,sans-serif;color:var(--ink);background:#fff;padding-top:env(safe-area-inset-top,0)}
h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",sans-serif;line-height:1.15;color:var(--navy)}
@media(prefers-color-scheme:dark){h1,h2,h3{color:#fff}}
a{color:var(--blue)}.w{max-width:1080px;margin:auto;padding:0 20px}
header{background:var(--navy);position:sticky;top:0;z-index:20}
header .w{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:12px}
.logo{color:#fff;font:700 20px "Bricolage Grotesque",sans-serif;text-decoration:none}.logo b{color:var(--amber)}
nav{display:flex;gap:18px;flex-wrap:wrap}nav a{color:#cfe0ff;text-decoration:none;font-size:15px}nav a:hover,nav a:focus{color:#fff}
.btn{display:inline-block;background:var(--amber);color:#1a1200;font-weight:700;padding:13px 22px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;font-size:16px}
.btn:hover{filter:brightness(1.07)}.btn.s{padding:9px 16px;font-size:14px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.hero{background:linear-gradient(160deg,var(--navy),#123a9c);color:#fff;padding:44px 0 52px}
.hero h1{color:#fff;font-size:clamp(30px,5vw,50px);margin:0 0 14px;max-width:16em}
.hero p{color:#d6e4ff;max-width:34em}
.hg{display:grid;gap:32px;grid-template-columns:1.1fr .9fr;align-items:center}
@media(max-width:820px){.hg{grid-template-columns:1fr}nav{display:none}}
.calc{background:#fff;color:#14213d;border-radius:14px;padding:22px;box-shadow:0 14px 40px #0006}
.calc h2{font-size:20px;margin:0 0 10px;color:#0b1f4d}.calc label{display:block;font-size:14px;font-weight:600;margin-top:12px}
.calc input[type=range]{width:100%}.calc output{float:right;color:#1650d8}
.res{background:#e8f0ff;border-radius:10px;padding:14px;margin-top:16px;font-size:15px}.res strong{font-size:26px;display:block;color:#0b1f4d}
.small{font-size:13px;color:var(--mute)}.calc .small{color:#51607d}
.pick{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.pick a{background:#ffffff1c;color:#fff;border:1px solid #ffffff55;padding:9px 15px;border-radius:99px;text-decoration:none;font-size:15px}
.pick a:hover{background:#fff;color:#0b1f4d}
main{padding:36px 0}main h2{font-size:28px;margin:38px 0 8px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:18px 0}
.grid a{display:block;background:var(--sky);border:1px solid var(--line);border-radius:10px;padding:18px;text-decoration:none;color:var(--ink)}
.grid a strong{display:block;color:var(--blue);font-size:18px;margin-bottom:4px}
.box{background:var(--sky);border-left:5px solid var(--blue);padding:18px 20px;border-radius:6px;margin:26px 0}
.box.c{border-color:var(--amber)}
details{border-bottom:1px solid var(--line);padding:12px 0}summary{font-weight:600;cursor:pointer}
.crumb{font-size:14px;color:var(--mute)}.crumb a{color:var(--mute)}
article{max-width:760px}
footer{background:var(--navy);color:#b5c7f2;padding:34px 0 90px;font-size:14px}footer a{color:#dbe7ff}
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--navy);color:#fff;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0));display:flex;gap:12px;align-items:center;justify-content:center;z-index:30;box-shadow:0 -4px 20px #0005;font-size:15px}
.bar span{max-width:34em}
#pop{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
#pop.on{display:flex}#pop div{background:#fff;color:#14213d;max-width:420px;border-radius:14px;padding:28px;position:relative}
#pop h2{margin:0 0 8px;font-size:24px;color:#0b1f4d}#pop .x{position:absolute;right:12px;top:8px;background:none;border:0;font-size:26px;cursor:pointer}
@media(prefers-reduced-motion:no-preference){.hero h1{animation:u .6s ease both}@keyframes u{from{opacity:0;transform:translateY(10px)}}}