:root { --bg:#f3f7fd; --panel:#ffffff; --ink:#0f2547; --muted:#4a5d7e; --line:#d3e0f3; --accent:#1749ce; --accent-ink:#ffffff; --hero-bg:#e3eefc; --card-edge:#1749ce; --brand:#1749ce; }
@media (prefers-color-scheme: dark) { :root { --bg:#0a1424; --panel:#101f38; --ink:#e6eefb; --muted:#a2b4d0; --line:#1f3558; --accent:#6aa5ff; --accent-ink:#071224; --hero-bg:#0f2142; --card-edge:#6aa5ff; --brand:#1749ce; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.skip { position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-ink); padding:.5rem 1rem; z-index:10; }
.skip:focus { left:0; }
.wrap { max-width: 56rem; margin: 0 auto; padding: 0 1.25rem; }
header { background:var(--brand); }
header .wrap { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:.5rem; padding-bottom:.5rem; flex-wrap:wrap; }
.brand { font-weight:800; font-size:1.4rem; letter-spacing:.02em; text-decoration:none; color:var(--ink); }
nav a { color:#ffffff; margin-left:1.25rem; text-decoration:none; font-size:.95rem; }
nav a:hover, nav a:focus-visible { color:#ffffff; text-decoration:underline; }
.hero { margin-top:1.5rem; padding: 3rem 1.75rem 2.5rem; background:var(--hero-bg); border:1px solid var(--line); border-radius:.9rem; }
h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); line-height:1.15; margin:0 0 1rem; letter-spacing:-.01em; }
.lead { font-size:1.2rem; color:var(--muted); max-width:40rem; margin:0 0 1.75rem; }
.btn { display:inline-block; background:var(--accent); color:var(--accent-ink); padding:.7rem 1.3rem; border-radius:.5rem; text-decoration:none; font-weight:600; }
.btn:hover, .btn:focus-visible { filter:brightness(1.1); }
section { padding: 2rem 0; border-top:1px solid var(--line); }
h2 { font-size:1.4rem; margin:0 0 1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; }
.card { background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--card-edge); border-radius:.6rem; padding:1.1rem 1.2rem; }
.card h3 { margin:0 0 .35rem; font-size:1.05rem; }
.card p { margin:0; color:var(--muted); font-size:.97rem; line-height:1.55; }
ul.plain { padding-left:1.2rem; margin:.5rem 0 1rem; }
ul.plain li { margin:.35rem 0; }
.note { color:var(--muted); }
a { color:var(--accent); }
footer { border-top:1px solid var(--line); margin-top:2rem; padding:1.5rem 0 2.5rem; color:var(--muted); font-size:.92rem; }
footer .wrap { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
footer a { margin-left:1rem; }

.brand { display:inline-flex; line-height:0; }
.brand img { height:44px; width:auto; display:block; }