:root{--ink:#0b1f33;--panel:#eef1f4;--line:#c9d1da;--muted:#53636f;--hi:#ffc600}
*{box-sizing:border-box}html{scroll-padding-top:4rem}
body{margin:0;font:17px/1.6 "Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:#fff}
a{color:inherit}:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
header{background:var(--ink);color:#fff;position:sticky;top:0;z-index:5}
header .wrap{display:flex;align-items:center;gap:1.5rem;min-height:3.5rem;flex-wrap:wrap}
.brand{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;text-decoration:none;margin-right:auto}
nav{display:flex;gap:1.25rem;flex-wrap:wrap}
nav a,.lang{text-decoration:none;font-size:.95rem;opacity:.85}nav a:hover,.lang:hover{opacity:1;text-decoration:underline}
.lang{border:1px solid rgba(255,255,255,.45);padding:.1rem .6rem;border-radius:3px}
.hero{background:var(--ink);color:#fff;padding:3.5rem 0 0}
h1{font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 1rem;max-width:20ch}
.lead{font-size:1.2rem;max-width:42rem;color:#d5dde6;margin:0 0 1.75rem}
.btn{display:inline-block;background:var(--hi);color:var(--ink);font-weight:700;padding:.8rem 1.4rem;border-radius:3px;text-decoration:none;margin:0 .5rem .5rem 0}
.btn:hover{background:#ffd633}.btn.ghost{background:transparent;color:inherit;border:2px solid currentColor;padding:.7rem 1.3rem}
.btn.ghost:hover{background:var(--ink);color:#fff}
.note{color:#aab7c4;font-size:.95rem;margin:1rem 0 0}
.modes{display:grid;grid-template-columns:repeat(4,1fr);margin-top:3rem;border-top:1px solid rgba(255,255,255,.3)}
.modes span{padding:1rem 1rem 1.25rem;font-size:clamp(1.1rem,3vw,1.75rem);font-weight:700;border-left:1px solid rgba(255,255,255,.3)}
.modes span:first-child{border-left:0;padding-left:0}
section{padding:3.5rem 0}section.alt{background:var(--panel)}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 1.25rem}
h3{font-size:1.15rem;margin:0 0 .6rem}p{max-width:44rem;margin:0 0 1rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:2rem;margin-bottom:2rem}
.cols>div{border-top:3px solid var(--ink);padding-top:1rem}
ul{padding-left:1.2rem;margin:0 0 1rem}li{margin:.35rem 0}
footer{padding:2rem 0;color:var(--muted);font-size:.9rem}
@media(max-width:560px){.modes{grid-template-columns:repeat(2,1fr)}.modes span:nth-child(3){border-left:0;padding-left:0}
.modes span:nth-child(n+3){border-top:1px solid rgba(255,255,255,.3)}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}