:root{
  --bg:#0d0e0f; --bg2:#151618;
  --card:#f7f5ef; --card-ink:#0b0b0b; --muted:#5b5b5b; --line:#e3dfd2;
  --ink:#f5f5f5;
  --gold:#d4b24f; --bronze:#7c5a2e; --red:#d36b2d;
  --shadow: rgba(0,0,0,.25);
  --hero-glow: rgba(212,178,79,.18);
}
html[data-theme="neutral"]{
  --bg:#faf7f0; --bg2:#f1ede3;
  --card:#ffffff; --card-ink:#0b0b0b; --muted:#666; --line:#e6e1d2;
  --ink:#101010; --gold:#caa642; --bronze:#7c5a2e; --red:#d36b2d; --hero-glow: rgba(202,166,66,.22);
}
html[data-theme="dark"]{
  --bg:#0a0a0a; --bg2:#101010;
  --card:#121212; --card-ink:#f3f3f3; --muted:#b8b8b8; --line:#1b1b1b;
  --ink:#f5f5f5; --gold:#c8a74a; --bronze:#75522a; --red:#d36b2d; --hero-glow: rgba(200,167,74,.16);
}
img {width:100%;}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px,92%);margin-inline:auto}
.flex{display:flex;gap:1rem}.between{justify-content:space-between}.center{align-items:center}
.grid-2{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:900px){.grid-2{grid-template-columns:1.1fr .9fr}}

.site-header{position:sticky;top:0;background:linear-gradient(180deg, color-mix(in oklab, var(--bg), black 8%), color-mix(in oklab, var(--bg2), black 8%));backdrop-filter:saturate(130%) blur(8px);border-bottom:1px solid color-mix(in oklab, var(--line), black 10%);z-index:50}
.site-header .brand{display:flex;gap:.75rem;align-items:center;padding:.75rem 0}
.logo{height:40px}.logo.tiny{height:24px}

.nav a{padding:1rem .75rem;display:inline-block;border-radius:8px}
.nav a:hover{background:color-mix(in oklab, var(--bg2), white 6%);text-decoration:none}

.theme-toggle{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{border:1px solid color-mix(in oklab, var(--line), black 10%);background:color-mix(in oklab, var(--card), var(--bg) 25%);color:inherit;padding:.4rem .7rem;border-radius:999px;font-weight:600;cursor:pointer}
.chip.active,.chip:hover{background:var(--gold);color:#0b0b09;border-color:color-mix(in oklab, var(--gold), black 25%)}

.hero{padding:6rem 0 4rem;background:radial-gradient(1200px 500px at 20% -10%, var(--hero-glow), transparent)}
.hero h1{font-size:clamp(2rem,4vw,3rem);margin:.25rem 0 .5rem}
.subtitle{color:color-mix(in oklab, var(--ink), var(--muted) 55%);max-width:55ch}
.cta-row{display:flex;gap:.75rem;margin:1rem 0 1.25rem}
.btn{border:1px solid color-mix(in oklab, var(--line), black 15%);background:color-mix(in oklab, var(--card), var(--bg) 30%);color:inherit;padding:.8rem 1rem;border-radius:12px;font-weight:700;letter-spacing:.2px;cursor:pointer;display:inline-block;box-shadow:0 1px 0 var(--shadow)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow)}
.btn.primary{background:linear-gradient(180deg, var(--gold), color-mix(in oklab, var(--gold), black 15%));border-color:color-mix(in oklab, var(--gold), black 25%);color:#0b0b09}
.btn.accent{background:linear-gradient(180deg, var(--bronze), color-mix(in oklab, var(--bronze), black 15%));border-color:color-mix(in oklab, var(--bronze), black 25%);color:#fff}
.btn.primary:hover,.btn.accent:hover{outline:2px solid color-mix(in oklab, var(--red), white 40%);outline-offset:2px}
.btn.ghost{background:transparent}

.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.badge{background:color-mix(in oklab, var(--card), var(--bg) 35%);border:1px solid color-mix(in oklab, var(--line), black 10%);padding:.35rem .6rem;border-radius:999px;font-size:.85rem;color:inherit}

.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-art{display:flex;justify-content:center}
.hero-img{width:100%;max-width:520px;height:auto;border-radius:16px;border:1px solid color-mix(in oklab, var(--line), black 10%);background:color-mix(in oklab, var(--card), var(--bg) 30%)}

.section{padding:4rem 0;border-top:1px solid color-mix(in oklab, var(--line), black 8%)}
.section.alt{background:color-mix(in oklab, var(--bg2), var(--card) 28%)}
.card{background:var(--card);color:var(--card-ink);padding:1.25rem;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 22px rgba(0,0,0,.12)}
.card.warning{border-color:color-mix(in oklab, var(--red), black 20%)}
.card.promo{border-color:color-mix(in oklab, var(--gold), black 25%)}

.card.form label{display:block;font-size:.95rem;margin:.5rem 0;color:var(--card-ink)}
.card.form input,.card.form textarea{width:100%;margin-top:.35rem;border:1px solid color-mix(in oklab, var(--line), black 10%);background:#fff;color:#111;padding:.75rem;border-radius:10px}
.card.form button{width:100%;margin-top:.5rem}

.feature-list{list-style:none;padding:0;margin:.25rem 0;display:grid;gap:.5rem;color:var(--card-ink)}
.price-note{margin-top:1rem;color:color-mix(in oklab, var(--card-ink), var(--muted) 45%)}

.site-footer{padding:1.5rem 0;border-top:1px solid color-mix(in oklab, var(--line), black 8%);background:linear-gradient(180deg, var(--bg2), var(--bg))}
.site-footer .legal{color:color-mix(in oklab, var(--ink), var(--muted) 65%);font-size:.85rem;margin-top:.5rem;text-align:center}

.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.65)}
.modal.hidden{display:none}
.modal-card{background:var(--card);color:var(--card-ink);border:1px solid var(--line);border-radius:16px;padding:1.25rem;max-width:520px;width:92%;text-align:center}
.age-actions{display:flex;gap:.75rem;justify-content:center;margin:.75rem 0}
.age-note{color:var(--muted);font-size:.85rem}