:root {
  color-scheme: light;
  --ink: #17213a;
  --muted: #58647d;
  --paper: #fffdf8;
  --surface: rgba(255,255,255,.88);
  --line: rgba(48,67,125,.14);
  --blue: #087ef5;
  --cyan: #14c7df;
  --violet: #7b57f2;
  --pink: #ed4cb7;
  --amber: #ffad29;
  --green: #38b875;
  --shadow: 0 22px 60px rgba(45,67,126,.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background:
    radial-gradient(circle at 88% 5%, rgba(255,197,61,.24), transparent 27rem),
    radial-gradient(circle at 8% 24%, rgba(28,200,224,.20), transparent 32rem),
    radial-gradient(circle at 75% 60%, rgba(237,76,183,.10), transparent 30rem),
    linear-gradient(145deg, #f5fbff, #fff9fd 52%, #fffdf2);
  font: 16px/1.6 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}
a { color: var(--blue); }
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 14px; border-radius: 10px; color: white; background: #101528;
  font-weight: 800; text-decoration: none; transform: translateY(-180%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
a:focus-visible, summary:focus-visible { outline: 3px solid rgba(8,126,245,.42); outline-offset: 4px; border-radius: 4px; }
.wrap { width: min(1120px, calc(100% - 36px)); margin: auto; }
.site-header { padding: 22px 0; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-weight: 800; }
.brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 7px 18px rgba(25,45,100,.2); }
.nav-links { display: flex; flex-wrap: wrap; gap: 18px; }
.nav-links a { color: var(--ink); text-decoration: none; font-weight: 650; }
.theme-toggle { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); box-shadow: 0 8px 24px rgba(45,67,126,.10); font: inherit; font-size: 1.15rem; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.theme-toggle:hover { transform: translateY(-2px) rotate(-8deg); }
.theme-toggle:focus-visible { outline: 3px solid rgba(8,126,245,.35); outline-offset: 3px; }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 56px; padding: 74px 0 92px; }
.eyebrow { color: #0879be; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
h1 { font-size: clamp(3.1rem, 8vw, 6.6rem); line-height: .92; letter-spacing: -.065em; margin: 16px 0 24px; }
h1 span { background: linear-gradient(105deg, var(--blue), var(--violet) 60%, #d13ac4); -webkit-background-clip: text; color: transparent; }
.lede { color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.32rem); max-width: 700px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 21px; border-radius: 15px; background: var(--ink); color: white; text-decoration: none; font-weight: 800; box-shadow: var(--shadow); }
.button.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.hero-art { position: relative; display: grid; place-items: center; min-height: 430px; }
.hero-art::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 42%; background: conic-gradient(from 20deg, var(--cyan), var(--violet), var(--amber), var(--cyan)); filter: blur(45px); opacity: .28; animation: drift 9s ease-in-out infinite alternate; }
.app-icon { width: min(330px, 78vw); border-radius: 28%; position: relative; box-shadow: 0 35px 85px rgba(30,40,90,.28); transform: rotate(3deg); }
.section { padding: 72px 0; }
.section h2 { font-size: clamp(2.1rem, 5vw, 3.7rem); letter-spacing: -.045em; line-height: 1.05; margin: 0 0 14px; }
.section-intro { color: var(--muted); max-width: 720px; font-size: 1.1rem; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.card { padding: 25px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 12px 35px rgba(47,58,105,.08); backdrop-filter: blur(12px); }
.card:nth-child(6n+1) { border-top: 4px solid var(--blue); }
.card:nth-child(6n+2) { border-top: 4px solid var(--violet); }
.card:nth-child(6n+3) { border-top: 4px solid var(--pink); }
.card:nth-child(6n+4) { border-top: 4px solid var(--amber); }
.card:nth-child(6n+5) { border-top: 4px solid var(--green); }
.card:nth-child(6n+6) { border-top: 4px solid var(--cyan); }
.card .icon { font-size: 2rem; }
.card h3 { margin: 12px 0 6px; font-size: 1.22rem; }
.card p { color: var(--muted); margin: 0; }
.game-catalogue { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 14px; margin-top: 32px; }
.game-card { width: 100%; height: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 10px 30px rgba(47,58,105,.08); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.game-card:hover { transform: translateY(-3px); box-shadow: 0 17px 38px rgba(47,58,105,.13); }
.game-card summary { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 17px; cursor: default; list-style: none; }
.game-card summary::-webkit-details-marker { display: none; }
.game-card summary::after { display: none; }
.game-symbol { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; border-radius: 16px; color: white; background: linear-gradient(145deg, var(--blue), var(--violet)); box-shadow: 0 9px 20px rgba(72,76,190,.22); font-size: 1.15rem; font-weight: 900; }
.game-card:nth-child(5n+2) .game-symbol { background: linear-gradient(145deg, var(--violet), var(--pink)); }
.game-card:nth-child(5n+3) .game-symbol { background: linear-gradient(145deg, var(--pink), #ff7455); }
.game-card:nth-child(5n+4) .game-symbol { background: linear-gradient(145deg, var(--amber), #f06d2f); }
.game-card:nth-child(5n+5) .game-symbol { background: linear-gradient(145deg, var(--green), var(--cyan)); }
.game-card strong, .game-card small { display: block; }
.game-card strong { color: var(--ink); font-size: 1.03rem; line-height: 1.25; }
.game-card small { color: var(--muted); margin-top: 4px; line-height: 1.35; }
.game-card p { margin: 0; padding: 0 18px 19px 84px; color: var(--muted); line-height: 1.5; }
.game-card.designer-card { grid-column: 1 / -1; height: auto; background: linear-gradient(120deg, rgba(8,126,245,.10), rgba(123,87,242,.10), rgba(237,76,183,.10)); border-color: rgba(123,87,242,.30); }
.game-card.designer-card summary { min-height: 104px; }
.game-card.designer-card .game-symbol { background: linear-gradient(145deg, var(--violet), var(--pink)); }
.game-card.designer-card p { max-width: 850px; }
.tier-label { display: inline-block; margin-bottom: 5px; color: #7a3fd0; font-size: .68rem; font-weight: 900; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.card > .tier-label { margin-bottom: 14px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 18px; margin-top: 36px; }
.price-card { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: 0 14px 38px rgba(47,58,105,.09); }
.price-card.featured { border: 2px solid var(--violet); background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(247,239,255,.94)); box-shadow: 0 20px 48px rgba(111,71,204,.18); }
.price-name { margin: 0; color: var(--ink); font-size: 1.15rem; font-weight: 850; }
.price { margin: 8px 0 2px; color: var(--ink); font-size: clamp(2.7rem, 5vw, 4rem); font-weight: 900; letter-spacing: -.06em; line-height: 1; }
.price-summary { min-height: 3.2em; margin: 13px 0 22px; color: var(--muted); }
.price-card ul { padding-left: 1.25rem; margin: 0; color: var(--muted); }
.price-card li { margin: 8px 0; }
.value-badge { position: absolute; top: 18px; right: 18px; padding: 6px 10px; border-radius: 999px; color: white; background: linear-gradient(120deg, var(--violet), var(--pink)); font-size: .72rem; font-weight: 900; letter-spacing: .04em; }
.price-note { max-width: 850px; margin: 22px auto 0; color: var(--muted); text-align: center; font-size: .9rem; }
.callout { padding: clamp(28px, 6vw, 60px); border-radius: 32px; color: white; background: linear-gradient(125deg, #087ef5, #7558ef 52%, #d83aa9); box-shadow: var(--shadow); }
.callout h2 { color: white; }
.callout p { color: rgba(255,255,255,.76); max-width: 700px; }
.legal { max-width: 820px; padding: 50px 0 90px; }
.legal h1 { font-size: clamp(2.5rem, 7vw, 4.8rem); }
.legal h2 { margin-top: 2.2em; line-height: 1.2; }
.legal .meta, .legal li, .legal p { color: var(--muted); }
.legal strong { color: var(--ink); }
.notice { padding: 16px 18px; border-left: 4px solid var(--amber); background: rgba(255,173,41,.11); border-radius: 10px; }
footer { border-top: 1px solid var(--line); padding: 30px 0 42px; color: var(--muted); }
.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
@keyframes drift { to { transform: translate(18px, 22px) rotate(20deg); } }
@media (max-width: 900px) { .game-catalogue { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; padding-top: 44px; } .hero-art { min-height: 320px; order: -1; } .app-icon { width: 230px; } .grid, .game-catalogue, .pricing-grid { grid-template-columns: 1fr; } .nav-links { display: none; } .price-summary { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-art::before { animation: none; } .skip-link { transition: none; } }
[data-theme="dark"] { color-scheme: dark; --ink: #f5f7ff; --muted: #b2bad0; --paper: #07101f; --surface: rgba(18,27,52,.82); --line: rgba(182,198,255,.16); --shadow: 0 22px 60px rgba(0,0,0,.32); }
[data-theme="dark"] body { background: radial-gradient(circle at 85% 8%, rgba(25,203,228,.12), transparent 30rem), radial-gradient(circle at 15% 28%, rgba(117,88,239,.20), transparent 34rem), radial-gradient(circle at 78% 70%, rgba(237,76,183,.10), transparent 30rem), #07101f; }
[data-theme="dark"] .button { background: #f6f8ff; color: #101528; }
[data-theme="dark"] .button.secondary { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .price-card.featured { background: linear-gradient(155deg, rgba(28,34,65,.96), rgba(51,29,73,.94)); }
[data-theme="dark"] .tier-label { color: #c5a8ff; }