:root{--bg:#0a1925;--bg2:#0f2433;--card:#112b3c;--line:#1d3d52;--text:#e6eef3;--muted:#9fb3c2;--teal:#2dd4bf;--gold:#f0be50}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif}
a{color:var(--teal)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--gold);color:#111;padding:8px 12px;z-index:9}
header.site{border-bottom:1px solid var(--line);background:rgba(10,25,37,.92);position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
.bar{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700;font-size:19px;letter-spacing:.2px}
.brand img{width:34px;height:34px;border-radius:8px}
nav.main{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.main a{color:var(--muted);text-decoration:none;font-size:14.5px;padding:8px 10px;border-radius:8px}
nav.main a:hover,nav.main a[aria-current=page]{color:var(--text);background:var(--card)}
.btn{display:inline-block;text-decoration:none;font-weight:650;border-radius:10px;padding:12px 20px;font-size:16px;line-height:1.2}
.btn.primary{background:var(--teal);color:#06231f}
.btn.primary:hover{background:#5eead4}
.btn.ghost{border:1px solid var(--gold);color:var(--gold)}
.btn.ghost:hover{background:rgba(240,190,80,.1)}
.btn.small{padding:9px 14px;font-size:14px}
.hero{padding:56px 0 28px}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700;margin:0 0 12px}
h1{font-size:clamp(30px,4.6vw,48px);line-height:1.14;margin:0 0 18px;letter-spacing:-.01em}
h1 .accent{color:var(--teal)}
h2{font-size:clamp(23px,3vw,30px);line-height:1.25;margin:52px 0 12px}
h3{font-size:19px;margin:28px 0 6px;color:#fff}
p.lead{font-size:clamp(17px,2.1vw,20px);color:#c9d7e1;max-width:760px;margin:0 0 26px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 6px}
.note{color:var(--muted);font-size:14px;margin-top:10px}
main p,main li{color:#d3dfe7}
main ul{padding-left:22px}
main li{margin:6px 0}
strong{color:#fff}
figure{margin:26px 0;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px}
figure img{display:block;width:100%;height:auto;border-radius:8px;background:#fff}
figcaption{color:var(--muted);font-size:14px;padding:10px 4px 2px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:22px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;text-decoration:none;color:var(--text);display:block}
a.card:hover{border-color:var(--teal)}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .go{color:var(--teal);font-size:14px;font-weight:600;margin-top:10px;display:block}
.feature{border-top:1px solid var(--line);margin-top:48px}
.kv{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.kv span{background:var(--card);border:1px solid var(--line);color:#cfe;border-radius:999px;padding:4px 12px;font-size:14px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:0 16px}
.faq summary{cursor:pointer;font-weight:650;padding:14px 0;color:#fff;list-style-position:outside}
.faq details p{margin:0 0 14px}
.band{background:linear-gradient(135deg,#102b3b,#0c2030);border:1px solid var(--line);border-radius:18px;padding:28px 24px;margin:56px 0 10px}
.band h2{margin-top:0}
.crumbs{font-size:14px;color:var(--muted);margin:22px 0 0}
.crumbs a{color:var(--muted)}
footer.site{border-top:1px solid var(--line);margin-top:60px;padding:30px 0 40px;color:var(--muted);font-size:14.5px}
footer.site nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px}
footer.site nav a{color:#c9d7e1;text-decoration:none}
footer.site nav a:hover{color:var(--teal)}
footer.site p{margin:6px 0}
code{background:#0f2433;border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:.92em}
@media (max-width:720px){
 .bar{padding:10px 0;gap:8px}
 nav.main{order:3;width:100%;margin:0 -4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 nav.main::-webkit-scrollbar{display:none}
 nav.main a{white-space:nowrap;font-size:14px;padding:7px 9px}
 .bar .btn.small{margin-left:auto}
 .hero{padding:34px 0 14px}
 h2{margin-top:40px}
 figure{padding:6px;margin:20px -6px}
 .cta .btn{flex:1 1 auto;text-align:center}
}