/* 109 Games / Studio 2026. Public pages only; the admin keeps its own design. */
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/assets/fonts/unbounded-cyrillic.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/assets/fonts/unbounded-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/onest-cyrillic.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/onest-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/onest-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
  --bg: #faf8ff; --surface: #fff; --surface-soft: #f0eaf8;
  --text: #1a1225; --text-strong: #1a1225; --muted: #6b6177;
  --accent: #6030a8; --accent-button: #ddcfff; --accent-ink: #3c1770;
  --action-bg: #d8f36a; --action-hover: #e5ff86; --action-ink: #291046;
  --accent-soft: #f0e8ff; --highlight: #7949bd; --border-soft: #ddd4e8;
  --panel-bg: #38204f; --panel-text: #fff; --panel-muted: #dfd1ec;
  --panel-accent: #ddcfff; --panel-ink: #25103e; --panel-border: #584169;
  --brand-purple: #3c1770; --brand-lavender: #ddcfff;
  --brand-gradient: linear-gradient(90deg, #f5effc 0%, #e9dcf7 52%, #d8c2ee 100%);
  --hero-ink: #35135a; --hero-muted: #705383; --hero-outline: #a786c7;
  --hero-soft: #e5d5f4; --hero-border: #8f6aad; --nav-active: #42136e;
  --marquee-bg: #d8f36a; --browser-theme-color: #faf8ff;
  --hud-panel: #f9f5ff; --hud-edge: #b6a0cf; --hud-hover: #e7daf5;
  --button-shadow: transparent; --radius-card: 0; --shadow: none;
  --gutter: clamp(20px, 3vw, 64px); --space-section: clamp(88px, 10vw, 180px);
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #150d20; --surface: #20132f; --surface-soft: #291b39;
  --text: #faf7ff; --text-strong: #faf7ff; --muted: #c1b4ce;
  --accent: #d3b9ff; --accent-soft: #352249; --border-soft: #4a365e;
  --panel-bg: #21112f; --panel-muted: #cec0dc;
  --brand-gradient: linear-gradient(90deg, #24103f 0%, #35145f 52%, #492278 100%);
  --hero-ink: #fff; --hero-muted: #d9c9ed; --hero-outline: #c8afeb;
  --hero-soft: #522a83; --hero-border: #ffffffa8; --nav-active: #d8f36a;
  --browser-theme-color: #150d20;
  --hud-panel: #2a173f; --hud-edge: #775494; --hud-hover: #432958;
  color-scheme: dark;
}
html:has(.home-page) { --browser-theme-color: #f5effc; }
html[data-theme="dark"]:has(.home-page) { --browser-theme-color: #24103f; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height, 86px) + 24px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 "Onest", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1,h2,h3,h4,p,figure { margin: 0; }
h1,h2,h3,h4 { font-family: "Onest", Arial, sans-serif; font-weight: 700; line-height: 1.03; letter-spacing: -.055em; text-wrap: balance; }
h2 { font-size: clamp(36px, 5.7vw, 88px); }
h3 { font-size: clamp(24px, 2.5vw, 38px); }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button,input,summary { font: inherit; }
button,summary,a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button,summary { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
img,video { display: block; max-width: 100%; }
svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
::selection { color: #3c1770; background: #ddcfff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.wrapper { width: min(1800px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 18px; background: var(--text); color: var(--bg); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-header { background: var(--bg); position: relative; z-index: 20; }
.header-inner { min-height: 88px; display: flex; align-items: center; gap: 32px; }
.brand-button { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 0; background: none; border: 0; color: var(--text); }
.hero-logo { width: 52px; height: 52px; object-fit: contain; }
.brand-wordmark { font-size: 24px; letter-spacing: -.065em; font-weight: 700; white-space: nowrap; }
.header-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px,2.2vw,34px); font-size: 13px; font-weight: 500; }
.header-nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; position: relative; }
.header-nav a::after { content: ""; position: absolute; bottom: 6px; height: 1px; left: 0; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 180ms; }
.header-nav a:hover::after { transform: scaleX(1); }
.hero-controls { display: flex; align-items: center; gap: 20px; }
.header-location { display: none; }
.lang-switcher { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.lang-btn { display: flex; align-items: center; min-height: 44px; color: var(--muted); }
.lang-btn[aria-current="page"] { color: var(--text); font-weight: 700; }
.lang-divider::before { content: "/"; color: var(--muted); }
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--text); border-radius: 50%; }
.theme-toggle:hover { background: var(--surface-soft); }
.theme-sun { display: none; }
html[data-theme="dark"] .theme-sun { display: block; }
html[data-theme="dark"] .theme-moon { display: none; }
.menu-toggle { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; padding: 15px 26px; border-radius: 999px; border: 1px solid var(--action-bg); background: var(--action-bg); color: var(--action-ink); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; text-align: center; transition: background 180ms, color 180ms, border-color 180ms, transform 180ms; }
.btn svg { width: 24px; height: 24px; transition: transform 180ms; }
.btn:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-ink); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-soft); }
.text-link { display: inline-flex; gap: 14px; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link:hover { color: var(--accent); }
.eyebrow { font-size: 11px; letter-spacing: .08em; font-weight: 500; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.home-page .site-header { --text: var(--hero-ink); --muted: var(--hero-muted); --surface-soft: var(--hero-soft); position: sticky; top: 0; z-index: 30; color: var(--hero-ink); background: var(--brand-gradient); box-shadow: 0 1px 0 transparent; transition: box-shadow 220ms; }
.home-page .site-header.is-scrolled { box-shadow: 0 1px 0 #ddcfff30, 0 8px 28px #1c092a18; }
.home-page .header-nav a[aria-current="location"] { color: var(--nav-active); }
.home-page .header-nav a[aria-current="location"]::after { height: 2px; transform: scaleX(1); }
.home-page .site-header :focus-visible,.hero :focus-visible { outline-color: var(--hero-ink); }
.hero { padding-block: clamp(64px,5vw,88px) 0; background: var(--brand-gradient); color: var(--hero-ink); overflow: clip; }
/* Typography follows the capped content width, not an ultrawide viewport. */
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; container-type: inline-size; }
.hero-title { position: relative; z-index: 2; width: 100%; font-family: "Unbounded", "Onest", sans-serif; font-size: 25.4cqw; line-height: .8; letter-spacing: -.055em; font-weight: 750; text-wrap: nowrap; }
.hero-type-line { display: block; }
.hero-type-line--games { width: max-content; max-width: 100%; color: var(--hero-ink); }
.hero-type { display: block; overflow: clip; padding: .09em .08em .13em; margin: -.09em -.08em -.13em; }
.hero-glyph { display: inline-block; position: relative; transform-origin: 50% 100%; white-space: pre; }
.hero-type-line--games .hero-glyph::before { content: attr(data-letter); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: clamp(1px,.12vw,2px) var(--hero-outline); transform: translate(-.026em,-.025em); z-index: -1; }
.hero-title .hero-qualifier { display: block; width: max-content; max-width: 100%; margin-top: 16px; font-size: 10.7cqw; font-weight: 650; line-height: 1; letter-spacing: -.06em; white-space: nowrap; }
.hero-qualifier .hero-glyph[data-letter=" "] { min-width: .38em; }
html[lang="en"] .hero-title { font-size: 21.2cqw; }
html[lang="en"] .hero-title .hero-qualifier { font-size: 11.6cqw; }
.hero-copy { position: relative; z-index: 3; min-width: 0; justify-self: end; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 34px; }
.hero .hero-actions { margin-top: 0; justify-content: flex-end; gap: 18px; }
.hero .hero-actions .btn { min-height: 62px; border-radius: 999px; padding: 18px 30px; font-size: clamp(16px,1.3vw,20px); font-weight: 600; gap: 22px; background: var(--action-bg); border: 1.5px solid var(--action-bg); color: var(--action-ink); }
.hero .hero-actions .btn:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-ink); }
.hero .hero-actions .btn-secondary { background: transparent; border-color: var(--hero-border); color: var(--hero-ink); }
.hero .hero-actions .btn-secondary:hover { background: var(--hero-ink); border-color: var(--hero-ink); color: var(--bg); }
.hero-marquee { position: relative; margin-top: 64px; padding-block: 30px; overflow: clip; }
.hero-marquee::before { content: ""; position: absolute; inset: 50% 0 0; background: var(--bg); }
.marquee-band { position: relative; width: 104%; margin-left: -2%; transform: rotate(-1.7deg); background: var(--marquee-bg); color: var(--action-ink); padding-block: 18px; }
.marquee-track { display: flex; width: max-content; animation: hero-marquee 75s linear infinite; animation-play-state: paused; }
.hero-marquee.is-running .marquee-track { animation-play-state: running; }
.marquee-band:hover .marquee-track { animation-play-state: paused; }
/* Explicit non-shrinking phrases and separator margins keep the loop seam
   identical to internal spacing, including WebKit's max-content layout. */
.marquee-group { display: flex; align-items: center; flex: 0 0 auto; width: max-content; }
.marquee-group span { flex: 0 0 auto; font-size: clamp(20px,2vw,32px); font-weight: 650; letter-spacing: -.025em; white-space: nowrap; }
.marquee-group i { display: block; flex: 0 0 14px; width: 14px; height: 14px; margin-inline: clamp(30px,3vw,48px); background: currentColor; transform: rotate(45deg); }
@keyframes hero-marquee { to { transform: translateX(-50%); } }
.proof-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; margin: 0 0 100px; padding: 0; }
.proof-item { display: flex; flex-direction: column; gap: 8px; }
.proof-item strong { font-size: clamp(27px,3.1vw,48px); font-weight: 600; letter-spacing: -.06em; line-height: 1; }
.proof-item span { color: var(--muted); font-size: 12px; }
.section { padding-block: var(--space-section); }
.section-head { display: grid; grid-template-columns: 1.5fr .6fr; gap: 60px; align-items: end; margin-bottom: 54px; }
.section-head > p { font-size: 14px; color: var(--muted); max-width: 40ch; }
.cases-section { position: relative; }
.cases-section > .wrapper,.services-section,.mvp-section > .wrapper,.production-layout,.process-section > .wrapper,.founder-section,.contact-inner { container-type: inline-size; }
.anchor-target { position: absolute; top: 0; }
.cases-section .section-head { display: block; margin-bottom: 64px; }
.cases-section .section-head > p { max-width: 49ch; margin: 36px 0 0 auto; font-size: 15px; }
.cases-section h2 { font-size: 11.5cqw; line-height: .95; letter-spacing: -.075em; max-width: none; }
.cases-section h2 span { display: block; }
.cases-section h2 span:last-child { text-align: right; margin-top: .08em; color: var(--accent); }
.cases-section .eyebrow { margin-bottom: 24px; }
html[lang="en"] .cases-section h2 { font-size: 10.4cqw; }
.demo-invite { display: none; }
.tile-grid { display: grid; gap: 80px; }
.demo-row { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: 4%; align-items: start; }
.demo-row:nth-child(2) { grid-template-columns: minmax(0,1fr) minmax(0,1.65fr); }
.demo-row > :nth-child(2) { margin-top: 17cqw; }
.demo-row:nth-child(2) > :nth-child(2) { margin-top: 8cqw; }
.demo-row:last-child { grid-template-columns: minmax(0,1fr) minmax(0,1.65fr); }
.demo-card { display: block; min-width: 0; }
.demo-picture { overflow: hidden; background: var(--surface-soft); aspect-ratio: 3 / 2; }
.demo-picture img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.demo-card:hover .demo-picture img { transform: scale(1.025); }
.demo-meta { position: relative; display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 20px; padding: 22px 0 0; }
.demo-index { font-size: 11px; color: var(--muted); padding-top: 9px; }
.demo-meta h3 { font-size: clamp(28px,3.6vw,66px); letter-spacing: -.06em; line-height: 1; }
.demo-meta p { font-size: 13px; color: var(--muted); margin-top: 10px; }
.demo-action { align-self: center; display: flex; align-items: center; gap: 12px; font-size: 12px; }
.demo-open { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--text); color: var(--bg); transition: background 180ms,color 180ms; }
.demo-card:hover .demo-open { background: var(--accent-button); color: #171817; }
.playable-story { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; border-top: 1px solid var(--border-soft); margin-top: 44px; padding-top: 22px; font-size: 13px; color: var(--muted); }
.first-playable { display: grid; grid-template-columns: 1fr; gap: 30px; padding: 0; align-self: center; }
.first-playable h3 { font-size: clamp(40px,5.6vw,90px); letter-spacing: -.07em; }
.first-playable-note { max-width: 45ch; color: var(--muted); margin-top: 22px; font-size: 14px; }
.first-playable-action { align-self: end; max-width: 48ch; }
.first-playable-action > p { color: var(--muted); margin-bottom: 24px; }
.offer-email { display: block; width: fit-content; margin-top: 16px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.services-section { padding-top: 0; }
.services-head { display: block; }
.services-principle { display: grid; grid-template-columns: 1fr 1fr; gap: 2%; font-size: 8.5cqw; letter-spacing: -.075em; line-height: .94; text-wrap: auto; }
.services-principle > span { display: block; max-width: 9.5ch; }
.services-principle > span:last-child { align-self: end; font-size: .85em; max-width: 16ch; padding-bottom: .06em; }
.principle-accent { color: var(--accent); margin-left: .09em; }
.services-grid { counter-reset: services; display: grid; }
.service-card { counter-increment: services; position: relative; display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: 14px 7%; padding: 46px 0; border-top: 1px solid var(--border-soft); }
.service-card::before { display: none; }
.service-icon { display: none; }
.service-card h3 { font-size: clamp(32px,5.2cqw,94px); grid-row: 1 / 3; align-self: center; letter-spacing: -.065em; }
.service-card > p { color: var(--muted); font-size: 14px; max-width: 50ch; }
.service-card .service-detail-link { margin-top: 0; }
.service-detail-link .text-link { font-size: 12px; }
.service-note { display: flex; gap: 24px; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-soft); margin-top: 20px; padding-top: 26px; font-size: 13px; color: var(--muted); }
.service-note p { max-width: 70ch; }
.service-note a { flex-shrink: 0; }
.mvp-section { background: var(--panel-bg); color: var(--panel-text); padding-block: var(--space-section); }
.mvp-grid { display: block; }
.mvp-intro h2 { max-width: none; font-size: 10.9cqw; line-height: .94; letter-spacing: -.075em; word-spacing: .06em; }
.mvp-intro h2 > span { display: block; }
.mvp-intro h2 > span:last-child { text-align: right; color: var(--panel-accent); }
.mvp-label { color: var(--panel-muted); }
.mvp-lead,.mvp-description { font-size: 16px; color: var(--panel-muted); max-width: 49ch; }
.mvp-lead { display: none; }
.mvp-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; padding-top: 40px; align-items: start; }
.game-scope { display: grid; grid-template-rows: auto 1fr auto auto auto; align-self: stretch; min-width: 0; }
.game-scope h3 { font-size: clamp(30px,3.4cqw,56px); letter-spacing: -.055em; line-height: 1.08; margin-bottom: 28px; }
.game-scope > p:not(.mvp-price):not(.mvp-price-note) { font-size: clamp(18px,1.5vw,23px); color: var(--panel-muted); line-height: 1.55; max-width: 47ch; }
.game-scope .mvp-price { margin-top: 40px; }
.game-scope .mvp-price strong { font-size: clamp(28px,3cqw,48px); }
.game-scope .mvp-price-note { margin-top: 20px; font-size: 15px; line-height: 1.5; }
.game-scope .mvp-cta { justify-self: start; margin-top: 28px; border-radius: 8px; font-size: 17px; min-height: 60px; }
.mvp-section .game-scope--full .btn { color: var(--panel-text); background: transparent; border-color: var(--action-bg); }
.mvp-section .game-scope--full .btn:hover { color: var(--action-ink); background: var(--action-bg); }
.mvp-promise { font-size: 25px; line-height: 1.15; letter-spacing: -.045em; margin-top: 26px; }
.mvp-promise strong { font-weight: 500; }
.mvp-promise span { display: block; }
.mvp-growth { color: var(--panel-muted); font-size: 13px; margin-top: 16px; max-width: 42ch; }
.mvp-price { margin-top: 0; }
.mvp-price > span { display: block; font-size: 11px; text-transform: uppercase; color: var(--panel-muted); margin-bottom: 10px; }
.mvp-price strong { font-size: clamp(30px,3.6vw,54px); font-weight: 600; letter-spacing: -.055em; line-height: 1; color: var(--panel-accent); }
.mvp-section .btn { background: var(--action-bg); color: var(--action-ink); border-color: var(--action-bg); }
.mvp-section .btn:hover { background: var(--action-hover); border-color: var(--action-hover); }
.mvp-cta { margin-top: 26px; }
.mvp-price-note { margin-top: 16px; max-width: 46ch; font-size: 12px; color: var(--panel-muted); }
.mvp-section .mvp-live,.service-page .mvp-live { background: transparent; padding: 0; border: 0; border-radius: 0; box-shadow: none; gap: 56px; margin-top: 64px; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); }
.mvp-section .mvp-live { grid-template-columns: minmax(0,1fr); gap: 40px; margin-top: 70px; }
.mvp-section .mvp-live-screen { grid-row: 1; }
.mvp-section .mvp-live-copy { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 10%; align-items: start; }
.mvp-section .mvp-live-copy > .eyebrow { display: none; }
.mvp-section .mvp-live-copy h3 { grid-column: 1; grid-row: 1; }
.mvp-section .mvp-live-copy > p:not(.eyebrow) { grid-column: 1; grid-row: 2; max-width: 55ch; margin-top: 0; }
.mvp-section .mvp-live-copy .mvp-live-actions { grid-column: 2; grid-row: 1; margin: 0; justify-content: flex-end; }
.mvp-section .mvp-live-copy > .text-link { grid-column: 2; grid-row: 2; justify-self: end; }
.mvp-section .mvp-share-feedback,.mvp-section .mvp-share-link { grid-column: 2; }
.mvp-section .mvp-share-feedback:empty { display: none; }
.mvp-live .eyebrow { color: var(--panel-muted); }
.mvp-live h3 { font-family: "Onest",Arial,sans-serif; font-size: clamp(32px,4vw,60px); color: #fff; }
.mvp-live-copy > p:not(.eyebrow) { color: var(--panel-muted); font-size: 14px; line-height: 1.6; }
.mvp-live-copy > p:not(.eyebrow):nth-of-type(3) { display: none; }
.mvp-live .mvp-live-action { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-ink); }
.mvp-live .mvp-live-share { border-color: #676b62; background: transparent; color: #fff; }
.mvp-live .mvp-live-share:hover { background: #fff; border-color: #fff; color: #171817; }
.mvp-live .mvp-live-screen { border-radius: 0; box-shadow: none; }
.mvp-live .mvp-live-play { background: #fff; color: #171817; border-radius: 999px; box-shadow: none; padding: 14px 24px; }
.mvp-live .mvp-live-poster:hover .mvp-live-play { background: var(--accent-button); }
.mvp-live-copy .text-link,.mvp-share-feedback { color: var(--panel-text); }
.mvp-live-copy .text-link:hover { color: var(--panel-accent); }
.mvp-share-link { background: #22241f; color: #fff; border-color: #676b62; border-radius: 0; }
.mvp-validation { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 48px; list-style: none; padding: 0; margin: 48px 0 0; }
.mvp-validation li { padding-top: 24px; border-top: 1px solid var(--panel-border); }
.mvp-validation h3 { font-size: 24px; }
.mvp-validation p { font-size: 13px; color: var(--panel-muted); margin-top: 16px; }
.mvp-more { border-top: 1px solid var(--panel-border); margin-top: 40px; }
.mvp-more summary { padding: 22px 32px 22px 0; font-size: 14px; }
.mvp-audience { display: grid; grid-template-columns: .7fr 1.3fr; gap: 56px; padding-top: 24px; }
.mvp-audience h3 { font-size: 30px; }
.mvp-audience-copy { font-size: 14px; color: var(--panel-muted); }
.mvp-creatives { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; list-style: none; padding: 0; margin: 30px 0 24px; }
.mvp-creative-icon { display: none; }
.mvp-creatives h4 { font-size: 17px; color: #fff; margin-bottom: 10px; }
.mvp-creatives p,.mvp-options-note { font-size: 12px; }
.production-section { padding-block: var(--space-section) 0; }
.production-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 50px 8%; }
.production-intro { grid-column: 1/-1; }
.production-intro h2 { font-size: 10.3cqw; line-height: .95; max-width: none; letter-spacing: -.075em; }
.production-intro h2 > span { display: block; }
.production-intro h2 > span:nth-child(2) { margin-left: 12%; }
.production-intro h2 > span:last-child { color: var(--accent); }
.production-options { grid-column: 2; grid-row: 2; }
.production-scenarios { display: grid; gap: 36px; list-style: none; padding: 0; margin: 0; }
.production-scenarios li { display: grid; grid-template-columns: 32px 1fr; gap: 24px; padding: 0; }
.production-number { font-size: 12px; color: var(--accent); }
.production-scenarios h3 { font-size: 28px; }
.production-scenarios p { margin-top: 14px; color: var(--muted); font-size: 14px; max-width: 48ch; }
.production-note { font-size: 12px; color: var(--muted); margin-top: 16px; max-width: 55ch; }
.production-action { grid-column: 1; grid-row: 2; align-self: start; }
.production-action .btn { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-ink); }
.production-action p { font-size: 13px; margin-top: 20px; max-width: 42ch; color: var(--muted); }
.process-section { padding-block: var(--space-section); }
.process-section h2 { max-width: none; font-size: 10.5cqw; line-height: .94; letter-spacing: -.075em; }
.process-section h2 > span { display: block; }
.process-section h2 > span:last-child { margin-left: 26%; }
.process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; margin: 48px 0 0; gap: 32px; }
.process-grid li { padding-top: 22px; }
.process-grid li:nth-child(even) { margin-top: 54px; }
.item-number { display: block; font-size: 38px; letter-spacing: -.07em; line-height: 1; margin-bottom: 28px; }
.process-grid h3 { font-size: 24px; max-width: 16ch; }
.process-grid p { font-size: 14px; margin-top: 20px; color: var(--muted); }
.founder-section { padding-block: 0 var(--space-section); }
.team-heading { margin-bottom: 60px; }
.team-heading .eyebrow { display: none; }
.team-heading h2 { font-size: 10.8cqw; line-height: .95; letter-spacing: -.075em; }
.team-heading h2 > span { display: block; }
.team-heading h2 > span:last-child { text-align: right; }
.founder-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: 10%; }
.person-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 28px; align-items: start; }
.person-card:last-child { display: block; margin-top: 120px; }
.person-card:last-child .founder-copy { margin-top: 24px; }
.person-portrait { overflow: hidden; }
.founder-photo { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.founder-copy h3 { font-size: clamp(28px,3vw,46px); letter-spacing: -.055em; }
.founder-role { font-size: 12px; color: var(--muted); margin-top: 14px; }
.founder-bio { font-size: 13px; color: var(--muted); margin-top: 20px; }
.person-links { display: flex; flex-direction: column; align-items: start; gap: 2px; margin-top: 18px; }
.person-links a,.person-links .btn { min-height: 40px; padding: 10px 0; border: 0; background: none; border-radius: 0; color: var(--text); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.person-links a:hover { color: var(--accent); }
.faq-layout { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 64px; padding-top: 0; }
.faq-layout > h2 { min-width: 0; font-size: clamp(48px,7vw,100px); overflow-wrap: anywhere; max-width: 9ch; }
.faq-list details { border-top: 1px solid var(--border-soft); }
.faq-list details:last-child { border-bottom: 1px solid var(--border-soft); }
.faq-list summary { list-style: none; position: relative; padding: 24px 40px 24px 0; font-size: 17px; line-height: 1.4; letter-spacing: -.025em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 22px; font: 300 26px/1 "Onest",sans-serif; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 70ch; font-size: 14px; color: var(--muted); padding: 0 40px 24px 0; }
.contact-section { padding-block: var(--space-section); background: var(--panel-bg); color: #fff; }
.contact-inner { display: block; }
.contact-section .eyebrow { display: none; }
.contact-section h2 { font-size: 13.4cqw; line-height: .92; letter-spacing: -.075em; max-width: none; }
.contact-section h2 > span { display: block; }
.contact-section h2 > span:nth-child(2) { margin-left: 15%; }
.contact-section h2 > span:last-child { text-align: right; color: var(--panel-accent); }
html[lang="en"] .contact-section h2 { font-size: 11.4cqw; }
.contact-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; margin-top: 44px; }
.contact-text { font-size: 15px; color: #b9bcb5; margin-top: 28px; max-width: 50ch; }
.contact-route h3 { font-size: 26px; }
.contact-route > p { color: #b9bcb5; font-size: 13px; margin-top: 8px; }
.contact-primary-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 26px; }
.contact-section .btn { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-ink); }
.contact-section .btn:hover { background: var(--action-hover); border-color: var(--action-hover); }
.contact-email { font-size: 13px; text-decoration: underline; text-underline-offset: 4px; padding-block: 12px; }
.contact-secondary { align-self: end; font-size: 12px; color: #b9bcb5; }
.contact-secondary-links { margin-top: 12px; }
.contact-secondary-links a { display: inline-block; min-height: 36px; }
.footer { padding-block: 32px; }
.service-footer-links { display: flex; flex-wrap: wrap; gap: 4px 32px; align-items: center; font-size: 13px; margin-bottom: 24px; }
.service-footer-links span { margin-right: auto; font-weight: 600; }
.service-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-legal { font-size: 11px; color: var(--muted); max-width: 120ch; line-height: 1.7; }
.footer-privacy { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 11px; color: var(--muted); }
.footer-privacy a { padding-block: 12px; text-decoration: underline; text-underline-offset: 4px; }
.studio .autumn-leaves-toggle:not(.autumn-promo-pumpkin) { width: 48px; height: 48px; border-color: var(--border-soft); background: var(--bg); color: var(--text); box-shadow: none; }
.studio .autumn-offer-card { color: #171817; background: #fff; border-color: #d7d9d3; }
.studio .autumn-offer-next { color: var(--action-ink); background: var(--action-bg); border-color: var(--action-bg); box-shadow: none; border-radius: 999px; font-family: "Onest",Arial,sans-serif; }
.studio .autumn-offer-next:not(:disabled):hover { background: var(--action-hover); box-shadow: none; }
.studio .autumn-offer-next:not(:disabled):active { box-shadow: none; }
.studio .autumn-offer-discount { color: var(--brand-purple); background: var(--brand-lavender); }
.studio .autumn-offer :focus-visible { outline-color: var(--brand-purple); }
@media (min-width: 1101px) {
  .cases-section .section-head { position: relative; }
}
@media (max-width: 1150px) {
  .header-inner { gap: 20px; }
  .brand-wordmark { font-size: 21px; }
  .hero-controls { gap: 12px; }
  .header-nav { gap: 16px; font-size: 12px; }
  .hero-logo { width: 42px; height: 42px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { padding-inline: 18px; font-size: 12px; }
  .founder-grid { gap: 40px; }
  .person-card { grid-template-columns: 1fr; gap: 24px; }
  .person-portrait { width: 100%; }
  .section-head { gap: 36px; }
  .demo-action > span:last-child { display: none; }
  .mvp-section .mvp-live,.service-page .mvp-live { gap: 32px; }
}
@media (max-width: 800px) {
  .header-inner { min-height: 76px; flex-wrap: wrap; position: relative; gap: 12px; }
  .brand-wordmark { font-size: 20px; }
  .hero-controls { margin-left: auto; gap: 10px; }
  .home-page .header-location { display: block; position: relative; min-width: 0; max-width: clamp(56px, calc(100vw - 252px), 140px); padding-left: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.4; color: var(--hero-ink); }
  .home-page .header-location::before { content: ""; position: absolute; top: calc(50% - 3px); left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--nav-active); }
  .lang-switcher { font-size: 11px; gap: 6px; }
  .theme-toggle { width: 36px; }
  .studio-nav-ready .menu-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; padding: 12px 0 12px 10px; background: transparent; color: var(--text); border: 0; }
  .menu-toggle svg { width: 20px; height: 20px; }
  .header-nav { width: 100%; order: 3; margin: 0; padding-block: 12px 24px; gap: 12px 24px; flex-wrap: wrap; font-size: 14px; }
  .studio-nav-ready .header-nav { display: none; }
  .studio-nav-ready [data-menu-open="true"] .header-nav { display: flex; }
  .hero { padding-top: 48px; }
  .hero-grid { gap: 44px; }
  .hero-title { font-size: 27cqw; }
  html[lang="en"] .hero-title { font-size: 21cqw; }
  .hero-title .hero-qualifier { margin-top: 20px; font-size: 10.5cqw; }
  html[lang="en"] .hero-title .hero-qualifier { font-size: 11.8cqw; }
  .hero-copy { width: 100%; margin: 0; padding: 0; }
  .hero-actions .btn { font-size: 13px; padding-inline: 20px; }
  .proof-strip { margin-bottom: 64px; gap: 20px; }
  .proof-item span { font-size: 10px; }
  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
  .section-head > p { max-width: 60ch; }
  .tile-grid { gap: 40px; }
  .demo-row { gap: 5%; }
  .demo-row > :nth-child(2) { margin-top: 12cqw; }
  .demo-meta { padding-top: 18px; }
  .demo-meta { grid-template-columns: minmax(0,1fr) auto; gap: 14px; }
  .demo-index { display: none; }
  .demo-meta h3 { font-size: clamp(23px,4vw,32px); }
  .demo-open { width: 36px; height: 36px; }
  .demo-meta p { font-size: 11px; }
  .first-playable { gap: 24px; margin-top: 0 !important; }
  .first-playable h3 { font-size: 5.8cqw; }
  .first-playable .eyebrow { display: none; }
  .service-card { gap: 12px 5%; }
  .mvp-grid { gap: 36px; grid-template-columns: 1fr; }
  .mvp-offer { gap: 32px; padding-top: 32px; }
  .mvp-section .mvp-live,.service-page .mvp-live { grid-template-columns: 1fr; gap: 28px; }
  .mvp-live-copy > p:not(.eyebrow) { max-width: 60ch; }
  .mvp-section .mvp-live-copy { display: block; }
  .mvp-section .mvp-live-copy > p:not(.eyebrow) { margin-top: 20px; }
  .mvp-section .mvp-live-copy .mvp-live-actions { margin-top: 22px; justify-content: flex-start; }
  .mvp-validation { gap: 24px; margin-top: 36px; }
  .mvp-audience { grid-template-columns: 1fr; gap: 24px; }
  .production-layout { gap: 40px; }
  .production-scenarios li { gap: 14px; grid-template-columns: 24px 1fr; }
  .production-scenarios h3 { font-size: 24px; }
  .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; }
  .faq-layout { grid-template-columns: 1fr; gap: 36px; }
  .contact-routes { gap: 32px; }
}
@media (max-width: 520px) {
  :root { --gutter: 20px; --space-section: 72px; }
  .hero-logo { width: 36px; height: 36px; }
  .brand-button { gap: 6px; }
  .brand-wordmark { font-size: 17px; }
  .header-inner { gap: 6px; }
  .hero-controls { gap: 4px; }
  .studio-nav-ready .menu-toggle { font-size: 0; padding-left: 4px; }
  .menu-toggle svg { width: 22px; }
  .hero { padding-top: 72px; }
  .hero-title .hero-qualifier { margin-left: 0; font-size: 10.5cqw; }
  .hero-copy { width: 100%; padding: 0; }
  .hero .hero-actions { gap: 12px; flex-direction: column; align-items: stretch; }
  .hero .hero-actions .btn { font-size: 16px; gap: 18px; padding: 16px 22px; min-height: 56px; }
  .hero-actions .btn svg { width: 18px; }
  .hero-marquee { margin-top: 60px; padding-block: 24px; }
  .marquee-band { padding-block: 15px; }
  .marquee-group i { margin-inline: 26px; }
  .marquee-group span { font-size: 20px; }
  .proof-strip { gap: 16px; }
  .proof-item strong { font-size: 26px; }
  .proof-item span { font-size: 10px; line-height: 1.45; }
  .cases-section .section-head { margin-bottom: 36px; }
  .cases-section .section-head > p { margin-top: 24px; font-size: 14px; }
  .demo-row,.demo-row:nth-child(2),.demo-row:last-child { grid-template-columns: minmax(0,1fr); gap: 44px; }
  .demo-row > :nth-child(2),.demo-row:nth-child(2) > :nth-child(2) { margin-top: 0; }
  .demo-row:first-child > :nth-child(2),.demo-row:nth-child(2) > :first-child { width: 85%; margin-left: auto; }
  .demo-row:last-child > .demo-card { width: 88%; }
  .demo-meta { gap: 10px; padding-bottom: 22px; }
  .demo-meta h3 { font-size: clamp(24px,7.5vw,30px); }
  .demo-meta p { font-size: 12px; }
  .demo-open { width: 44px; height: 44px; }
  .demo-action > span:last-child { display: inline; }
  .first-playable { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .first-playable h3 { font-size: 12cqw; }
  .first-playable .eyebrow { margin-bottom: 16px; }
  .services-principle { grid-template-columns: 1fr; gap: 26px; font-size: 14.5cqw; }
  .services-principle > span:last-child { width: 85%; margin-left: auto; font-size: .72em; }
  .service-card { grid-template-columns: 1fr; padding: 28px 0; gap: 16px; }
  .service-card h3 { grid-row: auto; font-size: 11cqw; }
  .service-card > p { font-size: 13px; }
  .service-note { flex-direction: column; align-items: start; gap: 10px; }
  .mvp-offer { grid-template-columns: 1fr; }
  .home-page .mvp-offer { gap: 84px; }
  .game-scope h3 { font-size: 34px; margin-bottom: 22px; }
  .game-scope .mvp-price { margin-top: 28px; }
  .mvp-section .mvp-live { margin-top: 50px; }
  .mvp-live .mvp-live-screen { aspect-ratio: 4 / 3; }
  .mvp-live .mvp-live-actions { align-items: stretch; }
  .mvp-live .mvp-live-actions > .btn { min-height: 48px; }
  .mvp-validation { grid-template-columns: 1fr; gap: 24px; }
  .mvp-validation li { padding-top: 22px; }
  .mvp-validation h3 { font-size: 24px; }
  .mvp-validation p { margin-top: 10px; }
  .mvp-creatives { grid-template-columns: 1fr; gap: 20px; }
  .production-layout { grid-template-columns: 1fr; gap: 32px; }
  .production-intro h2 { font-size: 10.8cqw; }
  .production-options { grid-column: auto; grid-row: auto; }
  .production-action { grid-row: auto; }
  .production-intro { grid-column: auto; }
  .process-grid { gap: 30px 20px; }
  .process-grid h3 { font-size: 20px; overflow-wrap: anywhere; }
  .process-grid p { font-size: 13px; }
  .item-number { font-size: 36px; margin-bottom: 24px; }
  .founder-grid { grid-template-columns: 1fr; gap: 48px; }
  .person-card { grid-template-columns: minmax(0,.8fr) minmax(0,1fr); gap: 20px; }
  .person-card:last-child { display: grid; margin-top: 0; }
  .person-card:last-child .founder-copy { margin-top: 0; }
  .person-portrait { width: 100%; }
  .founder-copy h3 { font-size: clamp(24px,7.2vw,28px); }
  .founder-bio { font-size: 12px; }
  .founder-role { font-size: 11px; }
  .person-links a,.person-links .btn { font-size: 11px; }
  .faq-list summary { font-size: 16px; }
  .faq-list details p { padding-right: 0; }
  .contact-routes { grid-template-columns: 1fr; }
  .service-footer-links { gap: 4px 20px; }
  .service-footer-links span { width: 100%; }
}
/* Homepage pacing: large gestures, quiet space, no decorative micro-copy. */
.home-page { --space-section: clamp(220px,25vw,420px); }
.home-page .header-inner { min-height: 100px; }
.home-page .header-nav { font-size: 15px; }
.home-page .hero-logo { width: 64px; height: 64px; }
.home-page .hero { margin-bottom: var(--space-section); }
.home-page .mvp-section { position: relative; }
.home-page .services-section { padding-top: var(--space-section); padding-bottom: 0; }
.home-page .services-head { margin-bottom: clamp(64px,8vw,140px); }
.home-page .service-card { padding-block: clamp(40px,5vw,80px); }
.home-page .service-card > p { font-size: 16px; }
.home-page .mvp-offer { padding-top: clamp(56px,6vw,100px); }
.home-page .mvp-description { font-size: 20px; }
.home-page .mvp-growth { font-size: 15px; }
.home-page .mvp-section .mvp-live { margin-top: clamp(72px,9vw,150px); }
.home-page .mvp-live-copy > p:not(.eyebrow) { font-size: 16px; }
.home-page .mvp-live-copy > p:nth-of-type(2):not(.mvp-share-feedback) { display: none; }
.home-page .mvp-validation { margin-top: 80px; }
.home-page .production-layout { row-gap: 84px; }
.home-page .production-scenarios { gap: 56px; }
.home-page .production-scenarios p,.home-page .process-grid p { font-size: 16px; }
.home-page .process-grid { margin-top: 96px; }
.home-page .team-heading { margin-bottom: 96px; }
.home-page .contact-text { margin-top: 64px; font-size: 20px; }
.home-page .contact-routes { margin-top: 72px; }

/* Native horizontal gallery is the baseline, including without JavaScript. */
.cases-section { padding-bottom: 0; }
.cases-stage { padding-top: 24px; }
.cases-stage .section-head { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,.8fr); align-items: center; gap: 7%; margin-bottom: 64px; }
.cases-stage h2 { font-size: 6.1cqw; line-height: 1.02; }
.cases-stage h2 span:last-child { text-align: left; margin-left: 6%; }
html[lang="en"] .cases-stage h2 { font-size: 6.8cqw; }
.cases-stage .section-head > p { position: static; width: auto; max-width: 40ch; margin: 0; font-size: 16px; }
.case-viewport { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--accent-button) var(--surface-soft); }
.cases-stage .tile-grid { position: relative; display: flex; align-items: start; gap: 36px; width: max-content; padding: 0 var(--gutter) 12px; }
.cases-stage .demo-card { flex: 0 0 auto; width: min(55vw,780px); scroll-snap-align: center; }
.cases-stage .demo-card:nth-child(even) { padding-top: 32px; }
.cases-stage .demo-picture { aspect-ratio: 3/2; }
.cases-stage .demo-meta { grid-template-columns: minmax(0,1fr) auto; padding-top: 24px; gap: 20px; }
.cases-stage .demo-index { display: none; }
.cases-stage .demo-meta h3 { font-size: clamp(28px,3.1vw,46px); }
.cases-stage .demo-meta p { font-size: 14px; }
.cases-stage .demo-action > span:last-child { display: none; }
.rail-controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 32px; }
.rail-progress { width: min(260px,35%); height: 2px; background: var(--border-soft); margin-right: 24px; overflow: hidden; }
.rail-progress span { display: block; width: 100%; height: 100%; background: var(--accent-button); transform: scaleX(var(--rail-progress,.2)); transform-origin: left; }
.rail-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--border-soft); border-radius: 50%; color: var(--text); background: transparent; transition: background 180ms, color 180ms; }
.rail-arrow:hover:not(:disabled) { background: var(--text); color: var(--bg); }
.rail-arrow:disabled { opacity: .3; cursor: default; }
.cases-outro { padding-top: var(--space-section); }
.cases-outro .first-playable { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12%; }
.cases-outro .first-playable h3 { font-size: clamp(44px,6vw,90px); }
.cases-outro .first-playable-action { align-self: center; }
.cases-outro .playable-story { margin-top: 80px; }

/* Only wide/tall viewports get scroll-driven pinning; no wheel interception. */
@media (min-width: 1100px) and (min-height: 760px) {
  .cases-runway.is-scroll-driven .cases-stage { position: sticky; top: calc(var(--header-height, 100px) + 24px); padding-bottom: 16px; }
  .is-scroll-driven .case-viewport { overflow: clip; scroll-snap-type: none; }
  .is-scroll-driven .tile-grid { will-change: transform; }
  .is-scroll-driven .demo-card { width: min(55vw,780px,var(--case-width,780px)); }
  .is-scroll-driven .cases-stage .section-head { margin-bottom: 40px; }
  .is-scroll-driven .rail-controls { padding-top: 20px; }
  .is-scroll-driven .demo-meta h3 { font-size: clamp(26px,2.6vw,42px); }
  .is-scroll-driven .demo-meta p { font-size: 13px; }
}
@media (max-width: 800px) {
  .home-page .header-inner { min-height: 76px; }
  .home-page .hero-logo { width: 44px; height: 44px; }
  .cases-stage .section-head { grid-template-columns: 1fr; gap: 36px; margin-bottom: 44px; }
  .cases-stage h2 { font-size: 10.1cqw; }
  .cases-stage h2 span:last-child { margin-left: 0; }
  html[lang="en"] .cases-stage h2 { font-size: 10.2cqw; }
  .cases-stage .section-head > p { max-width: 44ch; margin-left: 12%; }
  .cases-stage .demo-card { width: min(80vw,600px); }
  .cases-stage .tile-grid { gap: 24px; }
  .cases-stage .demo-meta h3 { font-size: 30px; }
  .cases-outro .first-playable { gap: 40px; }
}
@media (max-width: 520px) {
  .home-page { --space-section: 200px; }
  .home-page .hero { margin-bottom: var(--space-section); }
  .home-page .mvp-description { font-size: 18px; }
  .home-page .service-card > p { font-size: 15px; }
  .home-page .production-layout { row-gap: 48px; }
  .home-page .process-grid { margin-top: 56px; }
  .home-page .process-grid p { font-size: 14px; }
  .home-page .team-heading { margin-bottom: 56px; }
  .home-page .contact-text { margin-top: 40px; font-size: 18px; }
  .cases-stage .section-head > p { margin-left: 0; font-size: 16px; }
  .cases-stage .demo-meta h3 { font-size: 27px; }
  .cases-stage .demo-meta p { font-size: 13px; }
  .cases-stage .demo-card:nth-child(even) { padding-top: 20px; }
  .cases-stage .demo-meta { padding-bottom: 12px; }
  .cases-outro .first-playable { grid-template-columns: 1fr; padding: 0; }
  .cases-outro .first-playable h3 { font-size: 12cqw; }
  .rail-controls { padding-top: 24px; }
}
/* A restrained game HUD: actual navigation and system controls, no fake stats. */
.home-page .site-header .header-inner { gap: 24px; }
.home-page .site-header .header-nav { isolation: isolate; position: relative; padding: 6px; gap: 4px; font-size: 14px; }
.home-page .site-header .header-nav::before,
.home-page .site-header .header-nav::after { content: ""; position: absolute; pointer-events: none; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.home-page .site-header .header-nav::before { inset: 0; z-index: -2; background: var(--hud-edge); }
.home-page .site-header .header-nav::after { inset: 1px; z-index: -1; background: var(--hud-panel); }
.home-page .site-header .header-nav a { min-height: 40px; padding-inline: 16px; font-weight: 550; transition: background 180ms,color 180ms; clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.home-page .site-header .header-nav a::after { display: none; }
.home-page .site-header .header-nav a:hover { background: var(--hud-hover); }
.home-page .site-header .header-nav a[aria-current="location"] { color: var(--action-ink); background: var(--action-bg); box-shadow: inset 0 -2px 0 #29104624; }
.home-page .site-header .header-nav a:focus-visible { outline: none; background: var(--hud-hover); box-shadow: inset 0 0 0 2px var(--hero-ink); }
.home-page .site-header .hero-controls { gap: 8px; min-width: 0; }
.home-page .site-header .lang-switcher { min-height: 44px; padding: 3px; gap: 0; border: 1px solid var(--hud-edge); background: var(--hud-panel); }
.home-page .site-header .lang-btn { min-height: 36px; min-width: 30px; padding-inline: 6px; justify-content: center; }
.home-page .site-header .lang-btn[aria-current="page"] { background: var(--hero-soft); color: var(--hero-ink); }
.home-page .site-header .lang-divider { width: 1px; height: 16px; margin-inline: 3px; background: var(--hud-edge); }
.home-page .site-header .lang-divider::before { content: none; }
.home-page .site-header .theme-toggle { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--hud-edge); border-radius: 0; background: var(--hud-panel); }
.home-page .site-header .theme-toggle:hover { background: var(--hud-hover); border-color: var(--hero-ink); }
.home-page .site-header .brand-button { width: 72px; height: 72px; padding: 6px; position: relative; }
.home-page .site-header .brand-button .hero-logo { width: 100%; height: 100%; }
.home-page .site-header .brand-button::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--hud-edge),var(--hud-edge)) top left/15px 1px no-repeat, linear-gradient(var(--hud-edge),var(--hud-edge)) top left/1px 15px no-repeat, linear-gradient(var(--hud-edge),var(--hud-edge)) bottom right/15px 1px no-repeat, linear-gradient(var(--hud-edge),var(--hud-edge)) bottom right/1px 15px no-repeat; }
@media (max-width: 1050px) and (min-width: 801px) {
  .home-page .site-header .header-inner { gap: 14px; }
  .home-page .site-header .header-nav a { padding-inline: 11px; }
  .home-page .site-header .header-nav { font-size: 13px; }
}
@media (max-width: 800px) {
  .home-page .site-header .header-inner { gap: 8px; padding-block: 10px; }
  .home-page .site-header .brand-button { width: 48px; height: 48px; padding: 2px; }
  .home-page .site-header .header-nav { margin-bottom: 8px; gap: 4px; }
  .home-page .site-header .header-nav a { flex: 1 1 calc(50% - 4px); justify-content: center; min-height: 44px; padding-inline: 8px; }
  .home-page .site-header .hero-controls { gap: 4px; }
  .home-page .site-header .header-location { max-width: clamp(32px,calc(100vw - 294px),110px); }
  .home-page .site-header .lang-switcher { padding: 2px; }
  .home-page .site-header .lang-btn { min-width: 26px; padding-inline: 3px; }
  .home-page .site-header .lang-divider { margin-inline: 2px; }
  .home-page .site-header .theme-toggle { width: 40px; }
  .studio-nav-ready .home-page .menu-toggle { width: 40px; height: 44px; flex-shrink: 0; justify-content: center; padding: 0; border: 1px solid var(--hud-edge); background: var(--hud-panel); font-size: 0; }
}
/* Scroll depth uses individual transforms; entrance/reveal transforms stay intact. */
.home-page.has-scroll-depth .hero-type-line--games { translate: 0 var(--depth-title-y, 0px); }
.home-page.has-scroll-depth .hero-title .hero-qualifier { translate: 0 var(--depth-qualifier-y, 0px); }
.home-page.has-scroll-depth .hero-type-line--games .hero-glyph::before { translate: var(--depth-outline-x, 0px) var(--depth-outline-y, 0px); }
.home-page.has-scroll-depth .demo-picture > img,
.home-page.has-scroll-depth .person-portrait > img { translate: var(--depth-image-x, 0px) var(--depth-image-y, 0px); scale: 1.12; }
.home-page.has-scroll-depth .demo-picture.is-depth-visible > img,
.home-page.has-scroll-depth .person-portrait.is-depth-visible > img { will-change: translate; }
@media (max-width: 800px) {
  .home-page.has-scroll-depth .demo-picture > img,
  .home-page.has-scroll-depth .person-portrait > img { scale: 1.06; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page.has-scroll-depth .hero-type-line--games,
  .home-page.has-scroll-depth .hero-title .hero-qualifier,
  .home-page.has-scroll-depth .hero-type-line--games .hero-glyph::before,
  .home-page.has-scroll-depth .demo-picture > img,
  .home-page.has-scroll-depth .person-portrait > img { translate: none; scale: none; will-change: auto; }
}

/* A short brand reveal, not a fake download counter. CSS also has a fail-open. */
.intro-pending::before { content: ""; position: fixed; inset: 0; z-index: 90; background: #3c1770; pointer-events: none; animation: intro-failsafe 0s 2.8s forwards; }
.site-intro { position: fixed; inset: 0; z-index: 91; overflow: hidden; color: #fff; touch-action: manipulation; animation: intro-failsafe 0s 3s forwards; }
.site-intro-panel { position: absolute; inset-inline: 0; height: 51%; background: #3c1770; }
.site-intro-panel--top { top: 0; }
.site-intro-panel--bottom { bottom: 0; }
.site-intro-brand { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 32px; pointer-events: none; }
.site-intro-brand img { width: clamp(110px,13vw,190px); height: auto; }
.site-intro-word { display: flex; gap: .03em; overflow: hidden; font-size: clamp(50px,11vw,170px); line-height: .95; letter-spacing: -.075em; font-weight: 700; }
.site-intro-word span { display: inline-block; }
.site-intro-seam { position: absolute; width: 100%; height: 3px; background: var(--accent-button); top: calc(50% + clamp(120px,15vw,230px)); left: 0; transform-origin: center; }
.site-intro-skip { position: absolute; bottom: max(28px,env(safe-area-inset-bottom)); right: var(--gutter); min-height: 44px; padding: 12px 4px; background: transparent; color: #fff; border: 0; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
@keyframes intro-failsafe { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .marquee-band { transform: none; width: 100%; margin: 0; }
  .marquee-track { display: block; animation: none; width: 100%; padding: 12px var(--gutter); }
  .marquee-group { width: 100%; flex-wrap: wrap; gap: 14px 20px; padding: 0; }
  .marquee-group span { flex: 0 1 auto; max-width: 100%; white-space: normal; font-size: 18px; }
  .marquee-group i { flex-basis: 6px; width: 6px; height: 6px; margin-inline: 0; }
  .marquee-group + .marquee-group { display: none; }
  .intro-pending::before,.site-intro { display: none; }
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}