:root{--bg:#f4faf6;--fg:#10261c;--muted:#4a6358;--card:#fff;--accent:#2f8f67;--hero:#d3f5e2;--line:#d6e6dc}
@media (prefers-color-scheme:dark){:root{--bg:#0c1f17;--fg:#e6f3ec;--muted:#9bb5a8;--card:#13302400;--accent:#5fc496;--hero:#14402f;--line:#1f4333;--card:#123123}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.hero{background:var(--hero);padding:40px 0 0;overflow:hidden}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.icon{border-radius:22px;box-shadow:0 6px 20px #0003}
h1{font-size:2.6rem;margin:12px 0 4px;letter-spacing:-.02em}
.pitch{font-size:1.3rem;font-weight:600;margin:0 0 10px}
.sub{color:var(--muted);max-width:34em;margin:0 auto 22px}
.badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.badge{display:flex;flex-direction:column;background:#000;color:#fff;text-decoration:none;border-radius:10px;padding:8px 20px;border:1px solid #fff4;min-width:150px;text-align:left}
.badge span{font-size:.7rem;opacity:.85}.badge strong{font-size:1.15rem;line-height:1.2}
.hero-shot{width:min(280px,70%);height:auto;border-radius:28px 28px 0 0;margin-top:8px;box-shadow:0 0 40px #0002}
h2{font-size:1.6rem;margin:48px 0 18px;text-align:center}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.strip img{flex:0 0 auto;width:220px;height:auto;border-radius:18px;scroll-snap-align:center;border:1px solid var(--line)}
.grid{display:grid;gap:16px;grid-template-columns:1fr}
article{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
article h3{margin:0 0 6px;color:var(--accent)}article p{margin:0;color:var(--muted)}
footer{margin-top:56px;padding:32px 0;border-top:1px solid var(--line);text-align:center}
footer a{color:var(--accent)}.small{color:var(--muted);font-size:.85rem}
@media(min-width:760px){
 .hero-inner{flex-direction:row;text-align:left;justify-content:space-between;align-items:flex-end}
 .hero-text{padding-bottom:56px}.sub{margin-left:0}.badges{justify-content:flex-start}
 .hero-shot{width:300px;margin-top:0}
 .grid{grid-template-columns:1fr 1fr}.strip{justify-content:center}
}