:root { --paper:#fff9ec; --ink:#1b1b1b; --soft:#5b5346; --pond:#bfe8ff; --grass:#7cc474; --sun:#ffe066; --card:#ffffff; --link:#0b5fb0; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.6 ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
a { color:var(--link); }
a:focus-visible, summary:focus-visible { outline:3px solid var(--link); outline-offset:3px; border-radius:6px; }
img, video { max-width:100%; height:auto; display:block; }
video.clip { width:100%; }
.wrap { max-width:1040px; margin:0 auto; padding-inline:20px; }
header.site { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-weight:800; font-size:20px; }
.brand img { width:44px; height:44px; border-radius:11px; border:3px solid var(--ink); }
nav { display:flex; gap:18px; flex-wrap:wrap; }
nav a { color:var(--ink); font-weight:600; }
h1, h2, h3 { line-height:1.15; text-wrap:balance; margin:0; }
.hero { background:var(--pond); border-block:4px solid var(--ink); }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:32px; align-items:center; padding-block:44px; }
.hero h1 { font-size:clamp(34px, 6vw, 56px); font-weight:900; letter-spacing:-0.01em; }
.hero p { font-size:20px; margin:14px 0 0; max-width:30em; }
.soon { display:inline-block; margin-top:22px; background:var(--sun); border:4px solid var(--ink); border-radius:999px; padding:10px 20px; font-weight:800; }
.shot { border:4px solid var(--ink); border-radius:22px; overflow:hidden; background:var(--card); }
section { padding-block:48px; }
section h2 { font-size:clamp(26px, 4vw, 36px); font-weight:900; margin-bottom:8px; }
.lede { color:var(--soft); max-width:36em; margin:0 0 26px; }
.steps { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.step { background:var(--card); border:4px solid var(--ink); border-radius:22px; padding:20px; }
.step svg { display:block; margin:0 auto 8px; }
.step h3 { font-size:21px; margin-bottom:6px; }
.step p { margin:0; color:var(--soft); font-size:17px; }
.gallery { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.band { background:var(--grass); border-block:4px solid var(--ink); }
.band ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 24px; }
.band li { background:var(--paper); border:4px solid var(--ink); border-radius:16px; padding:12px 16px; font-weight:700; }
.band li span { display:block; font-weight:400; color:var(--soft); font-size:16px; }
.price { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.games { display:grid; gap:18px; max-width:640px; }
.game { display:flex; gap:18px; align-items:center; text-decoration:none; color:var(--ink); }
.game img { width:96px; height:96px; border-radius:22px; border:4px solid var(--ink); flex:none; }
.game div { min-width:0; }
a.shot { display:block; }
.ages { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:12px; }
.age { background:var(--card); border:4px solid var(--ink); border-radius:18px; padding:12px 14px; }
.age b { display:block; font-size:30px; font-weight:900; line-height:1.1; }
.age span { color:var(--soft); font-size:16px; }
.ticks { list-style:none; padding:0; margin:0 0 22px; display:flex; flex-wrap:wrap; gap:10px; }
.ticks li { background:var(--sun); border:4px solid var(--ink); border-radius:999px; padding:6px 16px; font-weight:800; }
.hero p.pitch { font-weight:800; }
.small { font-size:15px; color:var(--soft); margin:16px 0 0; max-width:60ch; }
.price .step b { display:block; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
footer { border-top:4px solid var(--ink); padding-block:28px 40px; font-size:16px; color:var(--soft); }
footer .wrap { display:flex; gap:10px 24px; flex-wrap:wrap; justify-content:space-between; }
.doc { max-width:720px; padding-block:36px 56px; }
.doc h1 { font-size:clamp(30px, 5vw, 42px); font-weight:900; margin-bottom:10px; }
.doc h2 { font-size:24px; margin:34px 0 8px; }
.doc p, .doc li { max-width:65ch; }
.mail { font-weight:800; font-size:22px; overflow-wrap:anywhere; }
details { background:var(--card); border:4px solid var(--ink); border-radius:16px; padding:12px 16px; margin-top:12px; }
summary { font-weight:800; cursor:pointer; }
@media (max-width: 760px) {
  .hero .wrap, .steps, .gallery, .band ul, .price { grid-template-columns:minmax(0,1fr); }
  body { font-size:17px; }
}