:root { --ink:#1B2430; --muted:#5B6675; --accent:#1F5F8B; --soft:#F3F5F8; --line:#D5DAE1; --bg:#fff; }
@media (prefers-color-scheme: dark) { :root { --ink:#E8ECF1; --muted:#A7B0BC; --accent:#7DB5DC; --soft:#1C232C; --line:#2E3742; --bg:#12171D; } }
* { box-sizing:border-box; }
body { margin:0; font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
.narrow { max-width:760px; }
header { padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.logo { font-weight:700; color:var(--accent); font-size:20px; text-decoration:none; }
.hero { padding:40px 0 32px; display:grid; gap:32px; grid-template-columns:1.3fr 1fr; align-items:center; }
h1 { font-size:clamp(30px,5vw,46px); line-height:1.1; margin:0 0 16px; }
h2 { font-size:26px; margin:0 0 16px; }
h3 { font-size:19px; margin:24px 0 8px; }
.lead { color:var(--muted); font-size:19px; margin:0 0 24px; }
.btn { display:inline-block; background:var(--accent); color:#fff; padding:14px 22px; border-radius:10px; text-decoration:none; font-weight:600; }
.btn.alt { background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
.shot img { width:100%; max-width:340px; border-radius:24px; border:1px solid var(--line); display:block; margin:0 auto; }
section { padding:36px 0; border-top:1px solid var(--line); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.card { background:var(--soft); border-radius:14px; padding:20px; }
.card b { display:block; margin-bottom:6px; }
.note { color:var(--muted); font-size:14px; }
a { color:var(--accent); }
footer { padding:28px 0; color:var(--muted); font-size:14px; border-top:1px solid var(--line); margin-top:24px; }
footer a { margin-right:14px; }
table { border-collapse:collapse; width:100%; margin:8px 0 16px; }
td, th { border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; vertical-align:top; }
@media (max-width:760px) { .hero { grid-template-columns:1fr; } }