:root { --bg:#f2fbf5; --fg:#1d2b3a; --muted:#5b6b7b; --card:#ffffff; --accent:#ff5f9e; --accent2:#2fb67a; --line:#d8e7de; }
@media (prefers-color-scheme: dark) { :root { --bg:#121a23; --fg:#eef3f8; --muted:#9fb0c0; --card:#1c2733; --line:#2a3846; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--accent); }
nav { display:flex; gap:18px; align-items:center; max-width:1040px; margin:0 auto; padding:14px 16px; }
nav .brand { display:flex; gap:10px; align-items:center; font-weight:800; font-size:20px; color:var(--fg); text-decoration:none; margin-right:auto; }
nav .brand img { width:36px; height:36px; border-radius:10px; }
nav a { text-decoration:none; font-weight:600; }
main { max-width:1040px; margin:0 auto; padding:0 16px 48px; }
.hero { display:grid; grid-template-columns:1fr; gap:24px; align-items:center; padding:28px 0; }
@media (min-width:860px) { .hero { grid-template-columns: 1fr 1.25fr; } }
.hero h1 { font-size:clamp(38px, 6vw, 60px); line-height:1.05; margin:0 0 10px; }
.hero p.lead { font-size:20px; color:var(--muted); margin:0 0 18px; }
.badge { display:inline-block; background:var(--accent2); color:#fff; font-weight:700; padding:8px 16px; border-radius:999px; }
img.shot { width:100%; height:auto; aspect-ratio:1600/720; border-radius:18px; box-shadow:0 10px 30px #0003; display:block; }
.grid { display:grid; grid-template-columns:1fr; gap:22px; margin-top:20px; }
@media (min-width:760px) { .grid { grid-template-columns:1fr 1fr; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.card div { padding:14px 18px 18px; }
.card h2 { margin:0 0 6px; font-size:22px; }
.card p { margin:0; color:var(--muted); }
article { max-width:820px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px 26px 30px; }
article h1 { font-size:30px; margin:8px 0 2px; }
article h2 { font-size:20px; margin:26px 0 6px; }
article .meta { color:var(--muted); margin:0 0 14px; }
article li { margin:4px 0; }
.callout { background:color-mix(in srgb, var(--accent2) 14%, transparent); border-radius:12px; padding:12px 16px; }
footer { max-width:1040px; margin:0 auto; padding:20px 16px 40px; color:var(--muted); font-size:14px; display:flex; gap:16px; flex-wrap:wrap; }