:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  --ink: #eef3fb;
  --muted: #a6b2c5;
  --subtle: #77869d;
  --canvas: #080d16;
  --panel: #111925;
  --line: rgba(159, 180, 210, .15);
  --blue: #74b7ff;
  --violet: #9b83ff;
  --mint: #9ee4d0;
  --content: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--canvas); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
body::before { position: fixed; z-index: -1; content: ""; inset: 0; pointer-events: none; opacity: .18; background: radial-gradient(ellipse at 84% 8%, rgba(75, 103, 190, .2), transparent 42%), radial-gradient(ellipse at 2% 46%, rgba(38, 135, 170, .08), transparent 36%); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #b9d5ff; outline-offset: 4px; }
img { max-width: 100%; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px; transform: translateY(-160%); color: #07111b; background: #d7e7ff; border-radius: 8px; }
.skip-link:focus { transform: none; }
.section-wrap { width: min(var(--content), calc(100% - 64px)); margin-inline: auto; }
.site-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; width: min(1320px, calc(100% - 64px)); min-height: 84px; margin-inline: auto; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; width: 166px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 34px; }
.nav-link { color: #bdc7d7; font-size: .9rem; transition: color .18s ease; }
.nav-link:hover, .nav-link.current { color: #fff; }
.menu-toggle { display: none; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 24px; padding: 0 21px; border: 1px solid rgba(175, 199, 239, .55); border-radius: 7px; color: #0b1017; background: #e7edf6; font-size: .92rem; font-weight: 700; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-1px); background: #fff; border-color: #fff; }
.button span { font-size: 1.1rem; }
.button-small { min-height: 42px; gap: 16px; padding-inline: 16px; font-size: .84rem; }
.text-link { display: inline-flex; align-items: center; gap: 13px; color: #e3e9f3; font-size: .9rem; font-weight: 650; }
.text-link span { color: var(--blue); transition: transform .18s ease; }
.text-link:hover span { transform: translateX(3px); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; color: #aebad0; font-size: .68rem; font-weight: 750; letter-spacing: .17em; line-height: 1.4; }
.eyebrow-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 15px rgba(116, 183, 255, .65); }

/* Home */
.hero { position: relative; display: grid; min-height: 610px; grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr); align-items: center; gap: 52px; padding-block: 75px 82px; }
.hero-copy { position: relative; z-index: 2; min-width: 0; max-width: 590px; }
.hero h1 { margin: 27px 0 20px; font-size: clamp(3.3rem, 5.2vw, 4.4rem); font-weight: 650; line-height: .99; letter-spacing: -.067em; }
.hero h1 span, .section-heading h2 span, .experience-copy h2 span, .closing-cta h2 span, .catalog-intro h1 span { color: #9ba9c0; }
.hero h1 .hero-title-main, .hero h1 .hero-title-accent { display: block; }
.hero h1 .hero-title-main { color: var(--ink); }
.hero-lede { max-width: 480px; margin: 0; color: #b8c2d2; font-size: 1.05rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 27px; margin-top: 32px; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 13px 23px; margin: 38px 0 0; padding: 0; color: #a5b2c4; list-style: none; font-size: .78rem; }
.hero-notes li { display: flex; align-items: center; gap: 8px; }
.hero-notes li span { color: var(--mint); font-weight: 800; }
.hero-art { position: relative; min-height: 420px; overflow: hidden; isolation: isolate; }
.hero-art-glow { position: absolute; z-index: -1; top: 10%; right: -15%; width: 92%; height: 80%; border-radius: 50%; background: radial-gradient(ellipse, rgba(84, 108, 191, .23), rgba(73, 74, 129, .08) 42%, transparent 71%); filter: blur(12px); }
.showcase-card { position: absolute; display: block; overflow: hidden; border: 1px solid rgba(220, 229, 245, .25); border-radius: 8px; background: #1a2230; box-shadow: 0 22px 65px rgba(0, 0, 0, .44); }
.showcase-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.showcase-card:hover img { transform: scale(1.035); }
.showcase-main { inset: 8% 18% 11% 1%; }
.showcase-side { right: 0; width: 41%; height: 31%; }
.showcase-side-top { top: 4%; }
.showcase-side-bottom { bottom: 16%; }
.showcase-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 9, 17, .91), transparent 70%); }
.showcase-copy { position: absolute; right: 18px; bottom: 19px; left: 21px; display: grid; gap: 2px; }
.showcase-kicker { color: #bad1eb; font-size: .58rem; font-weight: 800; letter-spacing: .15em; }
.showcase-copy strong { font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.25; }
.showcase-platform { color: #bdc8d9; font-size: .74rem; }
.showcase-mini-title { position: absolute; right: 12px; bottom: 10px; left: 12px; color: white; font-size: .73rem; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 6px #000; }
.art-caption { position: absolute; right: 1%; bottom: 0; display: flex; align-items: center; gap: 9px; color: #a4b0c1; font-size: .7rem; }
.art-caption span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.platform-strip { border-block: 1px solid var(--line); background: rgba(17, 25, 37, .52); }
.platform-strip-inner { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 18px; color: #c0cada; font-size: .84rem; }
.platform-strip-inner .strip-label { color: #8390a4; font-size: .73rem; }
.platform-strip-inner i { width: 3px; height: 3px; border-radius: 50%; background: #68768b; }
.how-section { padding-block: 124px 137px; }
.section-heading { max-width: 600px; }
.section-heading h2, .experience-copy h2, .closing-cta h2 { margin: 20px 0 14px; font-size: clamp(2.65rem, 4.5vw, 4rem); font-weight: 620; line-height: 1.03; letter-spacing: -.06em; }
.section-heading > p:last-child, .experience-copy > p:not(.eyebrow) { max-width: 480px; color: var(--muted); font-size: .96rem; line-height: 1.75; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 53px; }
.step-card { position: relative; min-height: 240px; padding: 25px 26px 27px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(155deg, rgba(22, 31, 45, .78), rgba(12, 18, 28, .55)); }
.step-number { position: absolute; top: 24px; right: 24px; color: #68768d; font-size: .71rem; font-weight: 700; letter-spacing: .08em; }
.step-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(135, 171, 220, .27); border-radius: 50%; color: #c3d3e9; font-size: 1.3rem; }
.step-card:nth-child(2) .step-icon { color: #c4b6ff; }
.step-card:nth-child(3) .step-icon { color: #9ee4d0; }
.step-card h3 { margin: 24px 0 5px; font-size: 1.16rem; font-weight: 650; }
.step-card p { max-width: 280px; margin: 0; color: #9eabbe; font-size: .84rem; line-height: 1.7; }
.experience-section { border-block: 1px solid var(--line); background: #0d131d; }
.experience-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 70px; padding-block: 106px; }
.experience-copy .text-link { margin-top: 17px; }
.experience-visual { overflow: hidden; padding: 18px; border: 1px solid rgba(165, 183, 211, .2); border-radius: 9px; background: linear-gradient(150deg, #151f2d, #0b111a 75%); box-shadow: 0 30px 85px rgba(0, 0, 0, .34); }
.experience-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 15px; }
.experience-topbar img { width: 106px; height: auto; }
.experience-topbar > span { display: flex; align-items: center; gap: 8px; color: #9aa8ba; font-size: .67rem; }
.experience-topbar i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.experience-feature { position: relative; display: flex; min-height: 244px; align-items: end; overflow: hidden; padding: 21px; border-radius: 5px; background: #182338; background-image: linear-gradient(90deg, rgba(5, 9, 17, .76), rgba(5, 9, 17, .05)), linear-gradient(0deg, rgba(5, 9, 17, .8), transparent 60%), var(--feature-image); background-position: center; background-size: cover; }
.experience-feature-copy { display: grid; gap: 3px; }
.experience-feature-copy span { color: #c0cce0; font-size: .6rem; font-weight: 700; letter-spacing: .14em; }
.experience-feature-copy strong { font-size: 1.45rem; line-height: 1.2; }
.experience-feature-copy small { color: #c2c9d5; font-size: .75rem; }
.experience-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.experience-thumb { display: flex; min-width: 0; align-items: center; gap: 9px; overflow: hidden; padding: 7px; border: 1px solid rgba(165, 183, 211, .13); border-radius: 5px; background: rgba(6, 11, 18, .44); }
.experience-thumb img { width: 38px; height: 45px; flex: 0 0 auto; border-radius: 3px; object-fit: cover; }
.experience-thumb span { display: grid; min-width: 0; gap: 2px; }
.experience-thumb strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.experience-thumb small { color: #97a5b9; font-size: .57rem; }
.benefits-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; padding-block: 125px; }
.benefits-heading h2 { font-size: clamp(2.5rem, 4.2vw, 3.7rem); }
.benefit-list article { display: grid; grid-template-columns: 42px minmax(0, 1fr) 40px; align-items: center; gap: 14px; min-height: 98px; border-bottom: 1px solid var(--line); }
.benefit-list article:first-child { border-top: 1px solid var(--line); }
.benefit-index { color: #77859a; font-size: .68rem; font-weight: 700; }
.benefit-list h3 { margin: 0; font-size: .95rem; font-weight: 650; }
.benefit-list p { margin: 2px 0 0; color: #97a5b8; font-size: .76rem; }
.benefit-symbol { justify-self: end; color: #97a8c1; font-size: 1.15rem; }
.closing-cta { position: relative; display: flex; min-height: 282px; align-items: center; justify-content: space-between; gap: 28px; overflow: hidden; margin-bottom: 82px; padding: 40px 52px; border: 1px solid rgba(158, 179, 211, .2); border-radius: 8px; background: linear-gradient(115deg, #151e2b, #101722 70%, #171a2b); }
.closing-cta h2 { margin-bottom: 0; font-size: clamp(2.4rem, 4vw, 3.5rem); }
.closing-cta .button { position: relative; z-index: 2; }
.closing-orbit { position: absolute; top: -114px; right: 19%; width: 340px; height: 340px; border: 1px solid rgba(134, 155, 211, .16); border-radius: 50%; box-shadow: 0 0 0 25px rgba(134, 155, 211, .025), 0 0 0 62px rgba(134, 155, 211, .02); }
.site-footer { display: flex; min-height: 90px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px max(32px, calc((100vw - 1180px) / 2)); border-top: 1px solid var(--line); color: #9aa7b9; font-size: .72rem; }
.site-footer img { display: block; height: auto; }
.site-footer > a:last-child { color: #dce5f1; }

/* Catalog */
.catalog-main { padding-top: 60px; padding-bottom: 72px; }
.catalog-intro { display: flex; align-items: end; justify-content: space-between; gap: 25px; padding-bottom: 41px; border-bottom: 1px solid var(--line); }
.catalog-intro h1 { margin: 18px 0 13px; font-size: clamp(2.7rem, 5.5vw, 4.5rem); font-weight: 630; line-height: 1.02; letter-spacing: -.065em; }
.catalog-intro > div:first-child > p:last-child { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.7; }
.catalog-count-block { display: grid; justify-items: end; flex: 0 0 auto; padding-bottom: 5px; }
.catalog-count-block strong { font-size: 2.45rem; font-weight: 600; line-height: 1.1; letter-spacing: -.06em; }
.catalog-count-block span { color: #9aa8bb; font-size: .76rem; }
.catalog-controls { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); align-items: end; gap: 35px; padding-block: 25px 20px; border-bottom: 1px solid var(--line); }
.search-control { display: flex; min-width: 0; min-height: 47px; align-items: center; gap: 10px; padding-inline: 13px; border: 1px solid rgba(158, 180, 210, .23); border-radius: 5px; background: rgba(17, 25, 37, .72); }
.search-control > span { color: #9fb3cc; font-size: 1.22rem; }
.search-control input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .84rem; }
.search-control input::placeholder { color: #78869a; }
.search-control button { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 4px; color: #dfe7f2; background: transparent; font-size: 1.3rem; cursor: pointer; }
.search-control button[hidden] { display: none; }
.search-control button:hover { background: rgba(255,255,255,.08); }
.platform-filter-group { display: grid; gap: 9px; }
.filter-label { color: #8997aa; font-size: .66rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.platform-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip { min-height: 37px; padding: 0 13px; border: 1px solid rgba(151, 172, 202, .2); border-radius: 4px; color: #aab7c9; background: #111925; font-size: .72rem; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.filter-chip:hover { border-color: rgba(163, 197, 242, .52); color: white; }
.filter-chip[aria-pressed="true"] { border-color: rgba(162, 198, 244, .54); color: #f3f7ff; background: #1c2a3c; }
.catalog-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 19px 13px; }
.catalog-results-bar p { margin: 0; color: #dce4ef; font-size: .78rem; font-weight: 650; }
.catalog-results-bar > span { color: #7f8da1; font-size: .7rem; }
.commercial-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 17px; }
.commercial-game { min-width: 0; }
.game-open { display: grid; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 1px solid rgba(158, 180, 210, .13); border-radius: 5px; color: inherit; text-align: left; background: #111823; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.game-open:hover { transform: translateY(-3px); border-color: rgba(157, 195, 241, .45); box-shadow: 0 15px 32px rgba(0, 0, 0, .24); }
.game-image-frame { position: relative; display: grid; min-height: 250px; place-items: center; overflow: hidden; aspect-ratio: 1.2 / 1; background: linear-gradient(145deg, #1b2938, #121925); }
.game-image-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.game-open:hover .game-image-frame img { transform: scale(1.035); }
.game-catalog-label { position: absolute; top: 12px; left: 12px; padding: 5px 7px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 3px; color: #f2f5fa; background: rgba(7, 11, 17, .68); font-size: .53rem; font-weight: 750; letter-spacing: .1em; backdrop-filter: blur(8px); }
.game-card-copy { display: grid; min-height: 94px; align-content: center; gap: 3px; padding: 12px 14px; }
.game-card-copy strong { overflow: hidden; font-size: .85rem; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.game-card-copy > span:not(.game-card-action) { color: #919eb0; font-size: .67rem; }
.game-card-action { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: #cbd6e5; font-size: .67rem; }
.game-card-action::after { content: "→"; color: var(--blue); font-size: .9rem; }
.catalog-empty { display: grid; min-height: 300px; align-content: center; justify-items: center; text-align: center; }
.catalog-empty > span { color: #b9c8dc; font-size: 2rem; }
.catalog-empty h2 { margin: 10px 0 2px; font-size: 1.3rem; }
.catalog-empty p { margin: 0 0 18px; color: var(--muted); font-size: .85rem; }
.catalog-empty[hidden] { display: none; }
.catalog-note { margin: 25px 0 0; color: #7f8b9d; font-size: .7rem; }
.game-detail { width: min(820px, calc(100% - 28px)); max-height: min(740px, calc(100dvh - 28px)); padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(173, 194, 223, .24); border-radius: 8px; color: var(--ink); background: #111925; }
.game-detail::backdrop { background: rgba(2, 5, 10, .82); backdrop-filter: blur(5px); }
.detail-top { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(17, 25, 37, .96); }
.detail-top button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid transparent; border-radius: 4px; color: #d8e2ef; background: transparent; font-size: 1.5rem; cursor: pointer; }
.detail-top button:hover { border-color: var(--line); background: rgba(255,255,255,.05); }
.detail-content { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr); gap: 23px; padding: 19px; }
.detail-media { min-width: 0; }
.detail-media > img { display: block; width: 100%; max-height: 390px; aspect-ratio: 16 / 10; object-fit: contain; border-radius: 4px; background: #080d16; }
.detail-gallery { display: flex; gap: 8px; overflow-x: auto; padding: 9px 1px 2px; }
.detail-gallery button { width: 78px; min-width: 78px; height: 58px; padding: 2px; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: #080d16; cursor: pointer; }
.detail-gallery button[aria-pressed="true"] { border-color: #aac9f4; }
.detail-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-copy { align-self: center; }
.platform-pill { color: #a4b7d0; font-size: .67rem; font-weight: 700; }
.detail-copy h2 { margin: 10px 0; font-size: 1.8rem; line-height: 1.12; letter-spacing: -.04em; }
.detail-copy > p { color: #a8b4c5; font-size: .86rem; line-height: 1.7; }
.catalog-presence { display: inline-block; margin-top: 10px; padding: 5px 8px; border: 1px solid rgba(163, 221, 203, .24); border-radius: 3px; color: #b8dfd2; font-size: .66rem; }

@media (max-width: 980px) {
  .section-wrap { width: min(var(--content), calc(100% - 48px)); }
  .site-header { width: calc(100% - 48px); }
  .hero { min-height: 555px; grid-template-columns: minmax(0, 1.03fr) minmax(310px, .9fr); gap: 22px; padding-block: 60px; }
  .hero h1 { font-size: clamp(3rem, 6.8vw, 4.2rem); }
  .hero-art { min-height: 355px; }
  .platform-strip-inner { justify-content: center; flex-wrap: wrap; padding-block: 14px; }
  .platform-strip-inner .strip-label { width: 100%; text-align: center; }
  .experience-grid, .benefits-section { gap: 38px; }
  .commercial-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-image-frame { min-height: 210px; }
}
@media (max-width: 680px) {
  body { font-size: 15px; }
  .section-wrap { width: calc(100% - 36px); }
  .site-header { width: calc(100% - 36px); min-height: 68px; }
  .brand img { width: 137px; }
  .menu-toggle { display: inline-flex; min-height: 40px; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: #111925; font-size: .78rem; }
  .site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; align-items: stretch; gap: 0; padding: 7px 12px 13px; border: 1px solid var(--line); border-top: 0; background: #0e151f; box-shadow: 0 12px 24px rgba(0,0,0,.3); }
  .site-nav.is-open { display: grid; }
  .site-nav .nav-link { min-height: 45px; display: flex; align-items: center; border-bottom: 1px solid var(--line); font-size: .86rem; }
  .site-nav .button { margin-top: 11px; }
  .hero { display: flex; min-height: 0; flex-direction: column; align-items: stretch; gap: 24px; padding-block: 57px 37px; }
  .hero-copy { width: 100%; }
  .hero h1 { max-width: 100%; margin: 20px 0 13px; font-size: clamp(2.15rem, 8.5vw, 2.75rem); }
  .hero-lede { width: 100%; max-width: 100%; font-size: .91rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 22px; }
  .hero-actions .button { min-height: 48px; }
  .hero-actions .text-link { min-height: 48px; font-size: .8rem; }
  .hero-notes { display: grid; gap: 8px; margin-top: 21px; font-size: .74rem; }
  .hero-art { width: 100%; min-height: min(74vw, 340px); }
  .showcase-main { inset: 5% 17% 11% 1%; }
  .showcase-side { width: 40%; height: 31%; }
  .showcase-copy { right: 12px; bottom: 12px; left: 13px; }
  .showcase-copy strong { font-size: 1rem; }
  .showcase-platform { font-size: .65rem; }
  .showcase-mini-title { right: 8px; bottom: 7px; left: 8px; font-size: .64rem; }
  .platform-strip-inner { column-gap: 9px; row-gap: 8px; font-size: .68rem; }
  .platform-strip-inner .strip-label { font-size: .65rem; }
  .platform-strip-inner i { width: 2px; height: 2px; }
  .how-section { padding-block: 79px 86px; }
  .section-heading h2, .experience-copy h2, .closing-cta h2 { margin-top: 15px; font-size: clamp(2.35rem, 9vw, 3.1rem); }
  .section-heading > p:last-child, .experience-copy > p:not(.eyebrow) { font-size: .86rem; }
  .steps-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .step-card { min-height: 0; padding: 18px; }
  .step-number { top: 18px; right: 18px; }
  .step-icon { width: 38px; height: 38px; font-size: 1.1rem; }
  .step-card h3 { margin-top: 15px; font-size: 1rem; }
  .step-card p { font-size: .79rem; }
  .experience-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 76px; }
  .experience-visual { padding: 12px; }
  .experience-feature { min-height: 190px; padding: 15px; }
  .experience-thumbs { gap: 6px; }
  .experience-thumb { align-items: start; gap: 6px; padding: 5px; }
  .experience-thumb img { width: 27px; height: 34px; }
  .experience-thumb strong { font-size: .56rem; }
  .experience-thumb small { font-size: .5rem; }
  .benefits-section { grid-template-columns: 1fr; gap: 25px; padding-block: 79px; }
  .benefit-list article { grid-template-columns: 31px minmax(0, 1fr) 24px; gap: 9px; min-height: 85px; }
  .benefit-list h3 { font-size: .83rem; }
  .benefit-list p { font-size: .68rem; }
  .closing-cta { min-height: 0; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 54px; padding: 25px 22px; }
  .closing-cta h2 { font-size: 2.5rem; }
  .closing-orbit { top: -33px; right: -171px; width: 270px; height: 270px; }
  .site-footer { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 17px 18px max(17px, env(safe-area-inset-bottom)); font-size: .65rem; }
  .site-footer > span { grid-column: 1; grid-row: 2; }
  .site-footer > a:last-child { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .site-footer img { width: 105px; }
  .catalog-main { padding-top: 39px; padding-bottom: 48px; }
  .catalog-intro { align-items: start; padding-bottom: 25px; }
  .catalog-intro h1 { margin: 15px 0 10px; font-size: clamp(2.35rem, 9vw, 3.35rem); }
  .catalog-intro > div:first-child > p:last-child { max-width: 390px; font-size: .84rem; }
  .catalog-count-block { display: none; }
  .catalog-controls { grid-template-columns: 1fr; gap: 18px; padding-block: 18px; }
  .search-control { min-height: 46px; }
  .platform-filter-group { gap: 8px; }
  .platform-filters { gap: 6px; }
  .filter-chip { min-height: 36px; padding-inline: 10px; font-size: .67rem; }
  .catalog-results-bar { align-items: start; padding-block: 16px 11px; }
  .catalog-results-bar > span { max-width: 44%; text-align: right; font-size: .63rem; }
  .commercial-games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 10px; }
  .game-open { border-radius: 4px; }
  .game-image-frame { min-height: 0; aspect-ratio: .94 / 1; }
  .game-image-frame img { object-fit: cover; }
  .game-catalog-label { top: 7px; left: 7px; padding: 4px 5px; font-size: .47rem; }
  .game-card-copy { min-height: 78px; padding: 9px; }
  .game-card-copy strong { font-size: .75rem; }
  .game-card-copy > span:not(.game-card-action), .game-card-action { font-size: .61rem; }
  .game-card-action { margin-top: 5px; }
  .catalog-note { margin-top: 19px; font-size: .65rem; }
  .detail-content { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
  .detail-media > img { max-height: 38dvh; }
  .detail-copy { padding: 3px 5px 10px; }
  .detail-copy h2 { font-size: 1.5rem; }
  .detail-copy > p { margin-block: 7px; font-size: .8rem; }
}
@media (max-width: 360px) {
  .section-wrap { width: calc(100% - 28px); }
  .site-header { width: calc(100% - 28px); }
  .hero h1 { font-size: 2.45rem; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { gap: 12px; padding-inline: 13px; font-size: .8rem; }
  .hero-actions .text-link { font-size: .72rem; }
  .platform-strip-inner { column-gap: 6px; font-size: .61rem; }
  .game-card-copy { padding: 7px; }
  .game-card-copy strong { font-size: .69rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Commercial journey: shared Home/Catalog tokens and controls. */
.auth-main { min-height: 70vh; padding-block: 52px 72px; }
.auth-panel { max-width: 520px; margin-inline: auto; padding: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.auth-panel h1, .account-heading h1 { margin: 20px 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 620; line-height: 1.1; letter-spacing: -.05em; }
.auth-panel h1 span { color: var(--muted); }
.auth-panel > p:not(.eyebrow), .account-panel > p, .account-heading p, .account-download p { color: var(--muted); }
#auth-status { min-height: 24px; font-size: .85rem; color: #b4c9e5; overflow-wrap: anywhere; }
#auth-status[data-error=true] { color: #f4bbb7; }
#auth-form { display: grid; gap: 18px; margin-top: 25px; }
#auth-form label { display: grid; gap: 7px; font-size: .85rem; }
#auth-form input { min-width: 0; width: 100%; min-height: 47px; padding: 10px 12px; border: 1px solid #43536c; border-radius: 5px; background: var(--canvas); color: var(--ink); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-top: 25px; color: #c5d5eb; font-size: .82rem; }
.auth-links a:hover { text-decoration: underline; }
#account-content[hidden], #password-content[hidden] { display: none; }
.account-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-block: 28px; }
.account-heading h1 { margin-bottom: 8px; }
.account-heading p { overflow-wrap: anywhere; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-block: 30px; }
.account-panel { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.account-panel h2, .account-download h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; }
.account-panel p { font-size: .87rem; }
.account-device-list { margin: 15px 0; padding: 0; list-style: none; }
.account-device-list li { display: grid; gap: 6px; padding-block: 14px; border-top: 1px solid var(--line); }
.account-device-list strong { overflow-wrap: anywhere; font-size: .9rem; }
.account-device-list span { color: var(--muted); font-size: .8rem; }
.account-download { margin-top: 35px; }
@media (max-width: 680px) { .auth-main { padding-block: 30px 48px; } .auth-panel { padding: 25px 20px; } .account-grid { grid-template-columns: 1fr; gap: 16px; } .account-panel { padding: 23px; } }
.button:disabled { cursor: not-allowed; color: #8995a8; border-color: #344156; background: #1c2738; transform: none; }
.button-outline { border-color: #6c809c; color: var(--ink); background: transparent; }
.button-outline:hover { color: #101722; }
.journey-main { padding-block: 65px 88px; }
.journey-intro { max-width: 840px; margin-bottom: 34px; }
.journey-intro h1, .confirmation-hero h1 { margin: 24px 0 20px; font-size: clamp(2.8rem, 5.1vw, 4.5rem); font-weight: 640; line-height: 1.04; letter-spacing: -.06em; }
.journey-intro h1 span, .confirmation-hero h1 span, .preview-explainer h2 span { color: #9ba9c0; }
.journey-intro > p:not(.eyebrow) { max-width: 610px; color: var(--muted); line-height: 1.8; }
.demo-notice { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 32px; padding: 15px 18px; border: 1px solid var(--line); border-left: 2px solid #799ec9; color: #b5c3d7; background: #101a28; font-size: .8rem; }
.demo-notice > span { color: var(--blue); }
.plans-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.plan-panel { display: flex; flex-direction: column; min-width: 0; padding: 36px; border: 1px solid #29384e; border-radius: 8px; background: #0e1724; }
.plan-premium { border-color: #637fa5; background: linear-gradient(145deg, #152338, #101825 75%); }
.plan-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 28px; }
.plan-symbol { color: #5b6b84; font-size: .85rem; letter-spacing: .12em; }
.subtle-badge { display: inline-block; padding: 5px 8px; border: 1px solid #465772; border-radius: 3px; color: #b2c7e4; font-size: .59rem; font-weight: 750; letter-spacing: .11em; }
.plan-panel h2 { margin: 26px 0 5px; font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 620; letter-spacing: -.04em; }
.plan-lede { margin: 0; color: #d5deeb; font-size: 1.05rem; }
.plan-description { min-height: 60px; margin: 19px 0 14px; color: var(--muted); font-size: .88rem; line-height: 1.8; }
.check-list { display: grid; gap: 16px; margin: 12px 0 35px; padding: 0; list-style: none; color: #c2cddd; font-size: .86rem; }
.check-list li { position: relative; padding-left: 25px; }
.check-list li::before { position: absolute; left: 0; content: '✓'; color: var(--mint); }
.plan-panel > .button { width: 100%; margin-top: auto; }
.plan-footnote { margin: 14px 0 0; color: #94a4bc; font-size: .73rem; }
.price-pending { display: grid; gap: 4px; margin: auto 0 22px; padding-top: 23px; border-top: 1px solid var(--line); }
.price-pending strong { font-size: 1.3rem; font-weight: 600; }
.price-pending span { max-width: 340px; color: var(--muted); font-size: .75rem; }
.plan-premium > .button { margin-top: 0; }
.preview-explainer { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; margin-block: 86px 56px; }
.preview-explainer h2 { margin: 18px 0; font-size: clamp(2rem, 3.5vw, 3.1rem); font-weight: 620; letter-spacing: -.05em; line-height: 1.1; }
.rule-list article { display: flex; gap: 22px; padding-block: 20px; border-top: 1px solid var(--line); }
.rule-list article > span { color: var(--blue); font-size: .76rem; padding-top: 3px; }
.rule-list h3 { margin: 0 0 6px; font-size: .95rem; font-weight: 600; }
.rule-list p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.8; }
.quiet-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 25px; border-block: 1px solid var(--line); }
.quiet-cta p { margin: 0; color: #c6d0df; }
.journey-fineprint { color: #94a3b9; font-size: .74rem; line-height: 1.8; }
.journey-main > .journey-fineprint { max-width: 800px; margin-top: 24px; }
.journey-steps { display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: center; margin-bottom: 50px; color: #91a0b7; font-size: .8rem; }
.journey-steps > a, .journey-steps > strong, .journey-steps > span { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.journey-steps > strong { color: #e3ecfa; }
.journey-steps span span, .journey-steps a span, .journey-steps strong span, .journey-steps b { font-size: .65rem; font-weight: 700; color: #9dbbdf; }
.journey-steps a:hover { color: white; }
.compact { margin-bottom: 28px; }
.compact h1 { font-size: clamp(2.8rem, 4.8vw, 3.9rem); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); gap: 28px; align-items: start; }
.checkout-main, .order-summary { min-width: 0; padding: 32px; border: 1px solid #2d3d54; border-radius: 8px; background: #0f1826; }
.checkout-main h2, .order-summary h2 { margin: 17px 0 10px; font-size: 1.7rem; font-weight: 600; letter-spacing: -.04em; }
.checkout-main > p:not(.eyebrow) { color: var(--muted); font-size: .9rem; }
.checkout-main .selected-benefit { padding-left: 14px; border-left: 2px solid #688ab4; color: #c8d6ea; }
.checkout-main > .text-link { margin-top: 8px; font-size: .8rem; }
.payment-preview { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.payment-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.payment-heading h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.payment-preview > p:not(.journey-fineprint) { color: var(--muted); font-size: .83rem; }
.payment-preview fieldset { min-width: 0; margin: 22px 0 0; padding: 0; border: 0; color: #8493aa; }
.payment-preview legend { font-size: .74rem; margin-bottom: 12px; }
.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.payment-methods label { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #354258; border-radius: 4px; background: #142034; font-size: .82rem; }
.payment-methods input { accent-color: #8da7cd; }
.payment-preview fieldset > label, .payment-field-row label { display: grid; min-width: 0; gap: 6px; font-size: .72rem; }
.payment-preview input[type=text] { min-width: 0; width: 100%; padding: 12px 10px; border: 1px solid #344259; border-radius: 4px; background: #0c1420; color: #8a9ab2; font-size: .8rem; }
.payment-preview input::placeholder { color: #7d8da6; opacity: 1; }
.payment-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.order-summary { position: sticky; top: 24px; background: #131f30; }
.order-summary dl { margin: 26px 0 22px; }
.order-summary dl > div { display: flex; gap: 20px; justify-content: space-between; padding-block: 15px; border-bottom: 1px solid var(--line); font-size: .78rem; }
.order-summary dt { flex: 0 0 38%; color: var(--muted); }
.order-summary dd { min-width: 0; margin: 0; color: #d4e1f1; text-align: right; }
.summary-next { margin-bottom: 26px; color: #aebdd1; font-size: .83rem; line-height: 1.8; }
.demo-acknowledgement { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; color: #c1cee1; font-size: .76rem; line-height: 1.7; cursor: pointer; }
.demo-acknowledgement input { flex-shrink: 0; margin: 5px 0 0; accent-color: var(--blue); width: 16px; height: 16px; }
.order-summary .button { width: 100%; padding-inline: 14px; gap: 14px; font-size: .83rem; }
.summary-reassurance { margin: 14px 0 0; text-align: center; color: #94a5bd; font-size: .69rem; }
.confirmation-main { max-width: 920px; }
.confirmation-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 24px 50px; }
.confirmation-mark { display: grid; width: 72px; height: 72px; margin-bottom: 25px; place-items: center; border: 1px solid #456861; border-radius: 50%; color: var(--mint); background: #112623; font-size: 1.7rem; }
.confirmation-hero h1 { margin-top: 19px; }
.confirmation-hero > p:not(.eyebrow) { max-width: 500px; margin-top: 0; color: var(--muted); }
.confirmation-plan { display: grid; gap: 3px; margin: 14px 0 27px; font-size: .84rem; }
.confirmation-plan span { color: var(--muted); }
.confirmation-plan strong { color: #ccdaee; font-weight: 600; }
.confirmation-hero > .text-link { margin-top: 22px; font-size: .8rem; }
.confirmation-detail { display: flex; align-items: center; gap: 20px; max-width: 660px; margin-inline: auto; padding: 24px 0; border-top: 1px solid var(--line); }
.confirmation-detail > span { color: #98badf; font-size: 2rem; }
.confirmation-detail p { margin: 0; color: var(--muted); font-size: .81rem; line-height: 1.8; }
.confirmation-detail strong { color: #d9e2ef; }
.install-hero { display: grid; grid-template-columns: 1.25fr .85fr; align-items: start; gap: 60px; margin-bottom: 72px; }
.install-hero h1 { font-size: clamp(2.8rem, 4.6vw, 4.1rem); }
.install-hero .install-lede { max-width: 470px; margin-top: 24px; font-size: .86rem; }
.download-panel { min-width: 0; padding: 32px; border: 1px solid #435a79; border-radius: 8px; background: #111d2d; }
.download-symbol { display: block; color: #9fbee5; font-size: 2rem; line-height: 1; margin-bottom: 20px; }
.download-panel h2 { margin: 0 0 12px; font-size: 1.4rem; letter-spacing: -.03em; font-weight: 600; }
.download-panel > p { margin: 0 0 22px; color: var(--muted); font-size: .85rem; }
.download-panel .button { width: 100%; }
.download-panel #download-availability { margin: 16px 0 20px; font-size: .74rem; line-height: 1.8; }
.installation-guide { margin-bottom: 40px; }
.installation-guide .section-heading h2 { font-size: 2.5rem; }
.install-steps { margin: 35px 0 0; padding: 0; list-style: none; }
.install-steps li { display: grid; grid-template-columns: 54px minmax(0, 1fr) 150px; align-items: start; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.install-step-number { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #394c67; border-radius: 50%; color: #a3c2e9; font-size: .73rem; }
.install-steps h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; }
.install-steps p { max-width: 650px; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.8; }
.install-step-note { padding-top: 4px; text-align: right; color: #96a7be; font-size: .73rem; }
@media (max-width: 980px) {
  .site-nav { gap: 20px; }
  .journey-main { padding-top: 48px; }
  .plan-panel { padding: 26px; }
  .plan-description { min-height: 95px; }
  .checkout-layout { grid-template-columns: 1.1fr 1fr; gap: 18px; }
  .checkout-main, .order-summary { padding: 24px; }
  .preview-explainer { gap: 40px; }
  .install-hero { gap: 30px; grid-template-columns: 1.1fr 1fr; }
  .download-panel { padding: 26px; }
}
@media (max-width: 680px) {
  .journey-main { padding-block: 34px 50px; }
  .journey-intro { margin-bottom: 25px; }
  .journey-intro h1, .compact h1, .confirmation-hero h1, .install-hero h1 { font-size: clamp(2.25rem, 9.4vw, 3.2rem); margin-block: 20px 15px; }
  .journey-intro > p:not(.eyebrow) { font-size: .87rem; }
  .demo-notice { margin-bottom: 24px; padding: 13px; font-size: .74rem; }
  .plans-grid, .preview-explainer, .checkout-layout, .install-hero { grid-template-columns: 1fr; gap: 20px; }
  .plan-panel { padding: 25px 22px; }
  .plan-panel h2 { font-size: 1.85rem; }
  .plan-lede { font-size: .96rem; }
  .plan-description { min-height: 0; }
  .check-list { margin-bottom: 25px; font-size: .81rem; }
  .plan-panel > .button { min-height: 50px; }
  .preview-explainer { margin-block: 55px 30px; }
  .preview-explainer h2 { font-size: 2.2rem; }
  .rule-list article { padding-block: 17px; }
  .quiet-cta { flex-direction: column; align-items: flex-start; gap: 12px; font-size: .88rem; }
  .journey-steps { gap: 17px; margin-bottom: 35px; font-size: .69rem; }
  .journey-steps > a, .journey-steps > strong, .journey-steps > span { gap: 6px; }
  .checkout-main, .order-summary { padding: 23px 20px; }
  .order-summary { position: static; }
  .order-summary .button { min-height: 52px; }
  .confirmation-main { padding-top: 28px; }
  .confirmation-hero { padding-block: 16px 35px; }
  .confirmation-hero .button { width: 100%; }
  .confirmation-detail { align-items: start; gap: 14px; padding-inline: 7px; }
  .confirmation-detail > span { line-height: 1; }
  .install-hero { margin-bottom: 49px; }
  .install-hero .journey-intro { margin-bottom: 0; }
  .download-panel { padding: 25px 22px; }
  .download-panel .subtle-badge { font-size: .56rem; }
  .installation-guide .section-heading h2 { font-size: 2.1rem; }
  .install-steps { margin-top: 24px; }
  .install-steps li { grid-template-columns: 35px minmax(0, 1fr); gap: 13px; padding-block: 22px; }
  .install-step-number { width: 32px; height: 32px; }
  .install-steps h3 { font-size: 1rem; }
  .install-steps p { font-size: .81rem; }
  .install-step-note { grid-column: 2; padding: 0; text-align: left; font-size: .65rem; }
}