:root { --ink:#1d1830; --muted:#5f587a; --brand:#5b3cc4; --brand-d:#40229a; --fox:#ff8a3d; --bg:#ffffff;
  --soft:#f4f0ff; --line:#e4defa; --card:#ffffff; --f8:8px; --f13:13px; --f21:21px; --f34:34px; --f55:55px; --f89:89px; }
@media (prefers-color-scheme: dark) { :root { --ink:#efeaff; --muted:#b2aacd; --brand:#a993ff; --brand-d:#c9bcff;
  --bg:#141020; --soft:#1e1830; --line:#32294d; --card:#1b1530; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.62 -apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif; }
a { color:var(--brand); }
img { max-width:100%; height:auto; display:block; }
.wrap { max-width:1080px; margin:0 auto; padding:0 var(--f21); }
.narrow { max-width:720px; margin:0 auto; padding:var(--f34) var(--f21) var(--f89); }
header.top { position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header.top .wrap { display:flex; align-items:center; gap:var(--f21); min-height:62px; }
.brand { display:flex; align-items:center; gap:var(--f13); color:var(--ink); text-decoration:none; font-weight:800; font-size:20px; }
.brand img { width:34px; height:34px; }
nav.main { margin-left:auto; display:flex; gap:var(--f21); align-items:center; font-size:15px; flex-wrap:wrap; }
nav.main a { color:var(--muted); text-decoration:none; font-weight:600; }
nav.main a:hover { color:var(--brand); }
.lang { border:1px solid var(--line); border-radius:999px; padding:4px 12px; }
.hero { padding:var(--f55) 0 var(--f34); background:radial-gradient(900px 420px at 85% -10%, var(--soft), transparent 70%); }
.hero .grid { display:grid; grid-template-columns:1.618fr 1fr; gap:var(--f55); align-items:center; }
.eyebrow { display:inline-block; font-weight:800; font-size:14px; letter-spacing:.04em; color:var(--fox); text-transform:uppercase; margin-bottom:var(--f13); }
h1 { font-size:clamp(34px,5.2vw,55px); line-height:1.1; margin:0 0 var(--f21); letter-spacing:-.02em; }
h2 { font-size:clamp(26px,3.4vw,34px); line-height:1.2; margin:0 0 var(--f13); letter-spacing:-.01em; }
h3 { font-size:19px; margin:0 0 6px; }
.lead { font-size:19px; color:var(--muted); margin:0 0 var(--f34); max-width:34em; }
.badges { display:flex; gap:var(--f13); flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:14px; background:var(--ink); color:var(--bg); text-decoration:none; font-weight:700; line-height:1.2; }
.badge small { display:block; font-weight:500; font-size:12px; opacity:.75; }
.badge.soon { background:var(--soft); color:var(--muted); border:1px dashed var(--line); }
.mosaic { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--f13); transform:rotate(-3deg); }
.mosaic img { border-radius:22%; box-shadow:0 10px 24px rgba(40,20,90,.28); aspect-ratio:1; object-fit:cover; }
.mosaic img:nth-child(2n) { transform:translateY(var(--f21)); }
section { padding:var(--f55) 0; }
.sec-head { text-align:center; max-width:640px; margin:0 auto var(--f34); }
.sec-head p { color:var(--muted); margin:0; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--f21); }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:var(--f21); }
.card .ico { font-size:30px; margin-bottom:var(--f13); }
.card p { margin:0; color:var(--muted); font-size:16px; }
.games { display:grid; grid-template-columns:repeat(7,1fr); gap:var(--f13); }
.game { background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.game img { width:100%; aspect-ratio:1; object-fit:cover; }
.game div { padding:var(--f8) var(--f13) var(--f13); }
.game.more { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(160deg,var(--brand),var(--brand-d)); color:#fff; border:0; padding:var(--f13); }
.game.more img { width:55%; aspect-ratio:1; margin-bottom:var(--f8); }
.game.more b { color:#fff; } .game.more span { color:#e6defc; }
.game b { display:block; font-size:15px; line-height:1.25; }
.game span { color:var(--muted); font-size:12.5px; line-height:1.35; display:block; margin-top:3px; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--f21); align-items:stretch; }
.plan.pro { border:2px solid var(--brand); background:linear-gradient(180deg,var(--soft),var(--card)); }
.plan ul { padding-left:20px; margin:var(--f13) 0 0; color:var(--muted); font-size:16px; }
.plan li { margin-bottom:6px; }
.tag { font-size:13px; font-weight:800; color:var(--fox); text-transform:uppercase; letter-spacing:.04em; }
.band { background:var(--soft); }
form.notify { display:flex; gap:var(--f13); flex-wrap:wrap; max-width:620px; margin:0 auto; }
form.notify input[type=email] { flex:1 1 260px; min-height:52px; border-radius:14px; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:0 var(--f21); font-size:17px; }
form.notify button { min-height:52px; border:0; border-radius:14px; background:var(--brand); color:#fff; font-weight:800; font-size:17px; padding:0 var(--f34); cursor:pointer; }
form.notify label.consent { flex:1 1 100%; font-size:14px; color:var(--muted); display:flex; gap:10px; align-items:flex-start; }
form.notify .hp { position:absolute; left:-9999px; }
footer { border-top:1px solid var(--line); padding:var(--f34) 0 var(--f55); color:var(--muted); font-size:14px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:var(--f21); justify-content:space-between; }
footer a { color:var(--muted); margin-right:var(--f21); }
.doc h1 { font-size:34px; } .doc h2 { font-size:22px; margin-top:var(--f34); }
.doc table { width:100%; border-collapse:collapse; font-size:15px; display:block; overflow-x:auto; }
.doc th,.doc td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
.doc th { background:var(--soft); }
.doc hr { border:0; border-top:1px solid var(--line); margin:var(--f55) 0; }
.doc .langnote { font-size:14px; color:var(--muted); }
details { border:1px solid var(--line); border-radius:14px; padding:var(--f13) var(--f21); margin:0 0 var(--f13); background:var(--card); }
summary { font-weight:700; cursor:pointer; }
details p { color:var(--muted); margin:var(--f13) 0 0; }
.btn { display:inline-block; background:var(--brand); color:#fff; padding:12px 22px; border-radius:12px; text-decoration:none; font-weight:700; }
@media (max-width:820px) {
  .hero .grid { grid-template-columns:1fr; gap:var(--f34); } .mosaic { max-width:360px; margin:0 auto; }
  .features,.plans { grid-template-columns:1fr; } nav.main a:not(.lang) { display:none; }
}
@media (max-width:980px) { .games { grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px) { .games { grid-template-columns:repeat(2,1fr); } }