:root { --ink:#0e2a21; --muted:#435a51; --forest:#24584a; --mint:#e4f0df; --bg:#fffcf6; --rule:#d9e3d6; --deep:#0e2a21; }
@media (prefers-color-scheme: dark) { :root { --ink:#ecf3ef; --muted:#bdc9c3; --forest:#80caab; --mint:#203129; --bg:#222523; --rule:#33403a; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", system-ui, sans-serif; }
a { color:var(--forest); }
img { max-width:100%; height:auto; display:block; }
.wrap { max-width:1080px; margin:0 auto; padding:0 16px; }
.narrow { max-width:720px; }
.site-header { border-bottom:1px solid var(--rule); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; color:var(--ink); text-decoration:none; }
.brand img { width:32px; height:32px; border-radius:8px; }
.nav { display:flex; gap:18px; font-size:15px; flex-wrap:wrap; }
.nav a { text-decoration:none; }
.hero { padding:48px 0 32px; }
.hero h1 { font-size:clamp(34px, 6vw, 56px); line-height:1.1; margin:0 0 12px; letter-spacing:-0.01em; }
.lede { font-size:20px; color:var(--muted); max-width:640px; margin:0 0 20px; }
.soon { display:inline-block; background:var(--forest); color:#fffcf6; padding:10px 18px; border-radius:999px; font-weight:600; font-size:15px; }
.hero-grid { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns:1.1fr 1fr; } }
.hero-art { border-radius:20px; }
h1, h2 { line-height:1.15; }
h2 { font-size:28px; margin:56px 0 12px; }
h3 { font-size:19px; margin:24px 0 4px; }
.features { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; margin-top:16px; }
.feature { background:var(--mint); border-radius:16px; padding:20px; }
.feature h3 { margin-top:0; }
.feature p { margin:0; color:var(--muted); font-size:16px; }
.shots { display:flex; gap:14px; overflow-x:auto; padding:8px 0 16px; scroll-snap-type:x mandatory; }
.shots img { width:220px; flex:none; border-radius:18px; scroll-snap-align:start; }
.note { color:var(--muted); font-size:15px; }
.subtitle { color:var(--muted); font-size:15px; margin-top:0; }
hr { border:0; border-top:1px solid var(--rule); margin:56px 0; }
.site-footer { border-top:1px solid var(--rule); margin-top:64px; padding:24px 0 40px; font-size:14px; color:var(--muted); }
.site-footer .wrap { display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; }
.site-footer nav { display:flex; gap:16px; flex-wrap:wrap; }