:root {
    --ink: #121212;
    --muted: #696969;
    --paper: #fffaf5;
    --white: #ffffff;
    --yellow: #ffd84d;
    --blue: #65a8ff;
    --pink: #ff77a8;
    --lime: #b7ef4a;
    --violet: #8b6cff;
    --cyan: #72e4e0;
    --red: #ff6d5f;
    --orange: #ff9d45;
    --line: rgba(48,58,72,.12);
    --glass-text: #1b222b;
    --glass-muted: rgba(30,39,50,.62);
    --glass-border: rgba(255,255,255,.82);
    --glass-edge: rgba(101,116,137,.16);
    --glass-fill: linear-gradient(135deg, rgba(255,255,255,.82), rgba(213,219,227,.72) 54%, rgba(245,247,250,.76));
    --glass-fill-strong: linear-gradient(135deg, rgba(248,250,253,.94), rgba(199,207,217,.84) 52%, rgba(239,243,247,.9));
    --glass-shadow: 0 20px 56px rgba(70,82,99,.18), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(107,121,142,.13);
    --shadow: 0 24px 70px rgba(30,24,15,.12);
    --shadow-soft: 0 14px 40px rgba(30,24,15,.08);
    --radius-xl: 42px;
    --radius-lg: 30px;
    --radius-md: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
::selection { color: #14202b; background: #c8e4ff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.section-shell { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }
.page-progress { position: fixed; z-index: 1000; inset: 0 0 auto; height: 3px; pointer-events: none; }
.page-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--pink),var(--yellow),var(--blue)); }

/* Header: compact iPhone-inspired Liquid Glass navigation */
.site-header { position: fixed; z-index: 900; isolation: isolate; left: 50%; top: 22px; width: min(780px, calc(100% - 34px)); height: 64px; padding: 0 18px 0 22px; display: grid; grid-template-columns: 190px 1fr; align-items: center; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 22px; color: var(--glass-text); background: var(--glass-fill); box-shadow: var(--glass-shadow); transform: translateX(-50%); transition: top .25s ease, height .25s ease, background .25s ease, box-shadow .25s ease; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); }
.site-header::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(112deg, rgba(255,255,255,.72) 0 14%, rgba(255,255,255,.08) 32%, rgba(129,144,164,.1) 57%, rgba(255,255,255,.45) 100%); pointer-events: none; }
.site-header::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.98), transparent); pointer-events: none; }
.site-header.scrolled { top: 12px; height: 58px; background: var(--glass-fill-strong); box-shadow: 0 18px 48px rgba(58,70,86,.2), inset 0 1px 0 rgba(255,255,255,.94); }
.brand, .site-nav, .menu-toggle { position: relative; z-index: 2; }
.brand { display: flex; align-items: center; height: 100%; }
.brand img { width: 105px; max-height: 43px; object-fit: contain; object-position: left center; }
.site-nav { justify-self: end; display: flex; align-items: center; gap: 28px; }
.site-nav a { position: relative; color: rgba(28,36,46,.58); font-size: 13px; font-weight: 700; transition: color .2s ease, text-shadow .2s ease; }
.site-nav a:hover, .site-nav a.active { color: #111a23; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.site-nav a.active::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(145deg,#7cb8ff,#765cff); box-shadow: 0 0 12px rgba(101,168,255,.72); transform: translateX(-50%); }
.menu-toggle { display: none; border: 0; color: #1c2732; background: transparent; }
.menu-toggle span:not(.sr-only) { display: block; width: 22px; height: 2px; margin: 5px 0; border-radius: 2px; background: currentColor; }

/* Generic typography and controls */
.section-kicker { display: inline-flex; align-items: center; gap: 9px; color: #654dff; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.section-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); transform: rotate(12deg); }
.section-kicker-light { color: #566476; }
.section-kicker-light::before { background: linear-gradient(145deg,#7cb8ff,#765cff); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 0 22px; border-radius: 14px; font-size: 13px; font-weight: 700; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.button:hover { transform: translateY(-2px); }
.button-dark { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.86); color: #17212b; background: var(--glass-fill-strong); box-shadow: 0 14px 34px rgba(68,80,96,.2), inset 0 1px 0 rgba(255,255,255,.95); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.button-dark::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg,rgba(255,255,255,.5),transparent 38%,rgba(110,126,147,.08) 68%,rgba(255,255,255,.32)); pointer-events: none; }
.button-dark > * { position: relative; z-index: 1; }
.button-dark:hover { background: linear-gradient(135deg,rgba(255,255,255,.98),rgba(192,203,216,.9)); box-shadow: 0 18px 38px rgba(62,77,96,.25), inset 0 1px 0 #fff; }
.button-light { border: 1px solid rgba(255,255,255,.9); color: #17212b; background: rgba(255,255,255,.76); box-shadow: 0 14px 34px rgba(70,82,98,.15), inset 0 1px 0 rgba(255,255,255,.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }
.platform-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 23px 0 27px; }
.platform-row span { padding: 9px 13px; border: 1px solid rgba(0,0,0,.09); border-radius: 999px; background: rgba(255,255,255,.68); font-size: 10px; font-weight: 700; }
.reveal { opacity: 0; transform: translateY(25px); transition: opacity .72s cubic-bezier(.2,.75,.2,1), transform .72s cubic-bezier(.2,.75,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

/* Home hero */
.home-hero { position: relative; min-height: 850px; padding: 170px 0 75px; display: grid; grid-template-columns: .88fr 1.12fr; grid-template-rows: 1fr auto; column-gap: 54px; align-items: center; }
.home-hero::before { content: ""; position: absolute; z-index: -2; width: 490px; height: 490px; left: -280px; top: 260px; border-radius: 50%; background: radial-gradient(circle,var(--pink),rgba(255,119,168,.12) 55%,transparent 70%); filter: blur(4px); opacity: .38; }
.home-hero::after { content: ""; position: absolute; z-index: -2; width: 430px; height: 430px; right: -250px; top: 190px; border-radius: 50%; background: radial-gradient(circle,var(--blue),rgba(101,168,255,.1) 55%,transparent 70%); opacity: .34; }
.hero-copy { position: relative; z-index: 3; padding-left: 18px; }
.hero-copy h1 { margin: 25px 0 22px; font-size: clamp(64px,7.1vw,104px); line-height: .87; letter-spacing: -.075em; }
.hero-copy h1 span { color: #654dff; }
.hero-copy p { max-width: 520px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.hero-world { position: relative; min-height: 570px; }
.hero-main-card { position: absolute; z-index: 4; right: 32px; bottom: 18px; width: 420px; height: 465px; padding: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 120px 38px 110px 44px; background: rgba(255,255,255,.74); box-shadow: var(--shadow); transform: rotate(2.5deg); transition: translate .3s ease; }
.hero-main-card > img { width: 100%; height: 100%; border-radius: 108px 28px 98px 34px; object-fit: cover; }
.main-card-label { position: absolute; left: 30px; right: 30px; bottom: 28px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.78); border-radius: 17px; color: #17212b; background: linear-gradient(135deg,rgba(255,255,255,.82),rgba(200,209,221,.7)); box-shadow: 0 12px 28px rgba(25,35,48,.18), inset 0 1px 0 rgba(255,255,255,.94); -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%); }
.main-card-label small { display: block; margin-bottom: 4px; color: rgba(23,33,43,.56); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.main-card-label strong { font-size: 14px; }
.hero-blob { position: absolute; border-radius: 48% 52% 60% 40% / 48% 35% 65% 52%; filter: saturate(1.05); }
.blob-pink { width: 270px; height: 280px; left: 18px; top: 64px; background: linear-gradient(145deg,#ff93bc,#ffcb5e); transform: rotate(-18deg); }
.blob-blue { width: 250px; height: 270px; right: 0; top: 0; background: linear-gradient(145deg,#71e6e3,#7b7dff); transform: rotate(20deg); opacity: .78; }
.hero-icon { position: absolute; z-index: 6; width: 82px; height: 82px; padding: 6px; border: 2px solid #fff; border-radius: 25px; object-fit: cover; background: #fff; box-shadow: 0 18px 38px rgba(30,20,15,.16); transition: translate .3s ease; }
.hero-icon-a { left: 58px; top: 130px; transform: rotate(-10deg); }
.hero-icon-b { left: 34px; bottom: 75px; transform: rotate(8deg); }
.hero-icon-c { right: 36px; top: 80px; transform: rotate(10deg); }
.hero-sticker { position: absolute; z-index: 8; padding: 13px 17px; border-radius: 13px; font-size: 12px; font-weight: 900; letter-spacing: .04em; box-shadow: 0 14px 28px rgba(30,20,15,.12); transition: translate .3s ease; }
.sticker-a { left: 47%; top: 350px; color: #352900; background: var(--yellow); transform: rotate(-8deg); }
.sticker-b { right: 4%; top: 410px; background: var(--lime); transform: rotate(7deg); }
.sticker-c { right: 31%; bottom: 185px; background: #ffacd0; transform: rotate(-4deg); }
.hero-spark { position: absolute; z-index: 7; font-size: 26px; animation: floatSpark 4s ease-in-out infinite; }
.spark-a { left: 51%; top: 230px; color: var(--violet); }
.spark-b { right: 12%; top: 210px; color: var(--yellow); animation-delay: -1.3s; }
.spark-c { right: 44%; bottom: 235px; color: var(--pink); animation-delay: -2.1s; }
.hero-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 28px; }
.stat-card { min-height: 105px; padding: 22px 24px; border-radius: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.stat-card strong { font-size: 31px; line-height: 1; letter-spacing: -.04em; }
.stat-card span { max-width: 150px; font-size: 11px; line-height: 1.4; }
.stat-yellow { background: #fff0a8; }
.stat-blue { background: #cce2ff; }
.stat-pink { background: #ffd1e3; }
.stat-green { background: #ddf5a9; }

/* Liquid Glass game collection stage */
.collection-stage { position: relative; isolation: isolate; min-height: 670px; margin-top: 55px; padding: 64px; border: 1px solid var(--glass-border); border-radius: 42px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 52px; align-items: center; color: var(--glass-text); background: radial-gradient(circle at 8% 15%,rgba(101,168,255,.28),transparent 28%), radial-gradient(circle at 92% 86%,rgba(255,119,168,.23),transparent 30%), var(--glass-fill-strong); box-shadow: var(--glass-shadow); overflow: hidden; -webkit-backdrop-filter: blur(28px) saturate(165%); backdrop-filter: blur(28px) saturate(165%); }
.collection-stage::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(118deg,rgba(255,255,255,.54),transparent 33%,rgba(118,97,233,.06) 62%,rgba(255,255,255,.28)); pointer-events: none; }
.collection-copy h2 { margin: 22px 0 19px; font-size: clamp(52px,5.6vw,78px); line-height: .92; letter-spacing: -.065em; }
.collection-copy h2 span { color: #654dff; }
.collection-copy p { max-width: 430px; margin: 0 0 28px; color: var(--glass-muted); font-size: 15px; line-height: 1.7; }
.collection-mosaic { position: relative; min-height: 540px; transition: transform .25s ease; }
.mosaic-tile { position: absolute; overflow: hidden; border: 5px solid rgba(255,255,255,.64); border-radius: 25px; box-shadow: 0 22px 45px rgba(62,75,93,.22), inset 0 1px 0 rgba(255,255,255,.9); }
.mosaic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mosaic-tile:hover img { transform: scale(1.05); }
.mosaic-tile span { position: absolute; left: 13px; bottom: 13px; padding: 7px 10px; border-radius: 10px; color: #111; background: rgba(255,255,255,.88); font-size: 9px; font-weight: 900; }
.mosaic-1 { left: 0; top: 72px; width: 235px; height: 280px; transform: rotate(-7deg); }
.mosaic-2 { left: 210px; top: 0; width: 235px; height: 250px; transform: rotate(5deg); }
.mosaic-3 { right: 0; top: 80px; width: 190px; height: 235px; transform: rotate(8deg); }
.mosaic-4 { left: 95px; bottom: 0; width: 220px; height: 210px; transform: rotate(4deg); }
.mosaic-5 { right: 105px; bottom: 18px; width: 220px; height: 235px; transform: rotate(-6deg); }
.mosaic-6 { right: -35px; bottom: -12px; width: 160px; height: 185px; transform: rotate(10deg); }

/* Mood / bento section */
.mood-section { padding: 125px 0 90px; }
.section-heading { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 45px; margin-bottom: 50px; }
.section-heading h2 { margin: 16px 0 0; font-size: clamp(48px,5vw,72px); line-height: .94; letter-spacing: -.06em; }
.section-heading > p { max-width: 480px; justify-self: end; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.mood-grid { display: grid; grid-template-columns: repeat(12,1fr); grid-auto-rows: 275px; gap: 16px; }
.mood-card { position: relative; padding: 28px; border-radius: 28px; overflow: hidden; transition: transform .22s ease; transform-style: preserve-3d; }
.mood-card::after { content: ""; position: absolute; right: -45px; bottom: -55px; width: 190px; height: 190px; border: 3px solid rgba(0,0,0,.09); border-radius: 50%; }
.mood-card span { font-size: 11px; font-weight: 900; }
.mood-card h3 { margin: 82px 0 10px; font-size: 36px; letter-spacing: -.05em; }
.mood-card p { max-width: 250px; margin: 0; font-size: 13px; line-height: 1.55; }
.mood-card i { position: absolute; right: 25px; bottom: 24px; font-style: normal; font-size: 11px; font-weight: 900; }
.mood-red { grid-column: span 5; background: #ff9c91; }
.mood-violet { grid-column: span 7; color: #fff; background: #765cff; }
.mood-cyan { grid-column: span 7; background: #9be8e7; }
.mood-lime { grid-column: span 5; background: #cef172; }

/* Featured games */
.featured-strip { padding: 40px 0 125px; }
.featured-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.featured-heading h2 { margin: 0; font-size: clamp(44px,4.5vw,65px); letter-spacing: -.055em; }
.featured-cards { display: grid; gap: 18px; }
.featured-card { min-height: 360px; padding: 16px; border-radius: 34px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center; overflow: hidden; }
.featured-card:nth-child(even) { grid-template-columns: .85fr 1.15fr; }
.featured-card:nth-child(even) .featured-image { order: 2; }
.featured-image { height: 328px; border-radius: 24px; overflow: hidden; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.featured-card:hover .featured-image img { transform: scale(1.035); }
.featured-copy { padding: 30px; }
.featured-copy > span { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.featured-copy h3 { margin: 18px 0 13px; font-size: clamp(35px,4vw,55px); line-height: .95; letter-spacing: -.055em; }
.featured-copy p { max-width: 390px; margin: 0; font-size: 14px; line-height: 1.65; }
.featured-copy i { display: inline-block; margin-top: 24px; font-style: normal; font-size: 12px; font-weight: 900; }
.featured-lime, .featured-green { background: #dff3ab; }
.featured-violet { color: #fff; background: #7761e9; }
.featured-violet p { color: rgba(255,255,255,.75); }
.featured-orange { background: #ffc181; }
.featured-blue, .featured-teal { background: #b9ddff; }
.featured-pink, .featured-red { background: #ffc0d8; }

/* Final CTA */
.final-cta { position: relative; min-height: 500px; margin-bottom: 100px; padding: 85px 70px; border-radius: 42px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; background: linear-gradient(120deg,#f8db58 0 38%,#ff8fb8 38% 67%,#76b8ff 67%); }
.final-cta h2 { position: relative; z-index: 2; max-width: 780px; margin: 22px 0 30px; font-size: clamp(48px,5.5vw,77px); line-height: .92; letter-spacing: -.065em; }
.final-cta > *:not(.cta-bubble) { position: relative; z-index: 2; }
.cta-bubble { position: absolute; border: 4px solid rgba(255,255,255,.45); border-radius: 50%; }
.cta-bubble-a { width: 230px; height: 230px; right: 80px; top: -80px; }
.cta-bubble-b { width: 140px; height: 140px; right: 200px; bottom: -45px; }

/* Games page */
.games-hero { min-height: 710px; padding: 175px 0 80px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.games-hero-copy h1 { margin: 24px 0 22px; font-size: clamp(62px,6.5vw,92px); line-height: .89; letter-spacing: -.073em; }
.games-hero-copy h1 span { color: #ff5b83; }
.games-hero-copy p { max-width: 530px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.games-icon-cloud { position: relative; min-height: 500px; }
.games-icon-cloud::before, .games-icon-cloud::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(0,0,0,.13); border-radius: 50%; transform: translate(-50%,-50%); }
.games-icon-cloud::before { width: 370px; height: 370px; }
.games-icon-cloud::after { width: 500px; height: 500px; }
.cloud-icon { position: absolute; z-index: 2; width: 82px; height: 82px; padding: 6px; border: 2px solid #fff; border-radius: 25px; object-fit: cover; background: #fff; box-shadow: var(--shadow-soft); transition: translate .3s ease; }
.cloud-icon-1 { left: 10%; top: 22%; transform: rotate(-10deg); }
.cloud-icon-2 { left: 34%; top: 2%; transform: rotate(8deg); }
.cloud-icon-3 { right: 12%; top: 17%; transform: rotate(-5deg); }
.cloud-icon-4 { right: 1%; top: 50%; transform: rotate(12deg); }
.cloud-icon-5 { right: 29%; bottom: 1%; transform: rotate(-9deg); }
.cloud-icon-6 { left: 18%; bottom: 8%; transform: rotate(6deg); }
.cloud-icon-7 { left: 0; top: 52%; transform: rotate(-4deg); }
.cloud-core { position: absolute; z-index: 3; left: 50%; top: 50%; width: 150px; height: 150px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--yellow); box-shadow: var(--shadow); transform: translate(-50%,-50%); }
.cloud-core strong { font-size: 44px; line-height: 1; }
.cloud-core span { margin-top: 4px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.genre-marquee { overflow: hidden; padding: 17px 0; border-block: 1px solid rgba(255,255,255,.72); color: #24303c; background: linear-gradient(90deg,rgba(230,235,241,.9),rgba(255,255,255,.78),rgba(210,218,228,.88)); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(91,107,128,.1); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.genre-marquee > div { width: max-content; display: flex; animation: marquee 24s linear infinite; }
.genre-marquee span { padding: 0 28px; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.genre-marquee i { margin-left: 25px; color: #765cff; font-style: normal; }
.game-list { padding: 100px 0 125px; }
.game-row { --accent-bg: #dff3ab; margin-bottom: 34px; padding: 18px; border-radius: 38px; display: grid; grid-template-columns: 1.12fr .88fr; gap: 46px; align-items: center; background: var(--accent-bg); }
.game-row-reverse { grid-template-columns: .88fr 1.12fr; }
.game-row-reverse .game-row-visual { order: 2; }
.game-row-lime, .game-row-green { --accent-bg: #dff3ab; }
.game-row-violet { --accent-bg: #d8ccff; }
.game-row-orange { --accent-bg: #ffd0a0; }
.game-row-blue, .game-row-teal { --accent-bg: #c8e5ff; }
.game-row-red, .game-row-pink { --accent-bg: #ffc7d9; }
.game-row-visual { position: relative; height: 460px; overflow: hidden; border-radius: 27px; transform-style: preserve-3d; transition: transform .22s ease; }
.game-row-visual > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.game-row-icon { position: absolute; right: 20px; bottom: 20px; width: 78px; height: 78px; padding: 6px; border: 2px solid #fff; border-radius: 23px; object-fit: cover; background: #fff; box-shadow: var(--shadow-soft); }
.game-row-number { position: absolute; left: 20px; top: 20px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.78); border-radius: 11px; color: #17212b; background: linear-gradient(135deg,rgba(255,255,255,.82),rgba(198,207,219,.68)); box-shadow: 0 10px 24px rgba(26,38,51,.16); font-size: 10px; font-weight: 900; letter-spacing: .08em; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
.game-row-copy { padding: 28px 30px; }
.game-row-genre { font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.game-row-copy h2 { margin: 16px 0 16px; font-size: clamp(43px,4.6vw,66px); line-height: .92; letter-spacing: -.06em; }
.game-row-copy p { max-width: 450px; margin: 0; color: rgba(18,18,18,.65); font-size: 14px; line-height: 1.68; }

/* About */
.about-hero { min-height: 760px; padding: 175px 0 80px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; align-items: center; }
.about-copy h1 { margin: 24px 0 22px; font-size: clamp(62px,6.5vw,92px); line-height: .89; letter-spacing: -.073em; }
.about-copy h1 span { color: #ff5b83; }
.about-copy p { max-width: 540px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.72; }
.about-collage { position: relative; min-height: 520px; }
.about-shape { position: absolute; border-radius: 45% 55% 60% 40% / 48% 35% 65% 52%; }
.shape-yellow { width: 330px; height: 330px; left: 20px; top: 80px; background: var(--yellow); transform: rotate(-12deg); }
.shape-blue { width: 260px; height: 260px; right: 5px; top: 25px; background: var(--blue); transform: rotate(16deg); }
.about-img { position: absolute; z-index: 3; object-fit: cover; border: 7px solid #fff; box-shadow: var(--shadow); }
.about-img-a { left: 85px; top: 40px; width: 270px; height: 360px; border-radius: 70px 28px 70px 28px; transform: rotate(-5deg); }
.about-img-b { right: 30px; bottom: 15px; width: 260px; height: 300px; border-radius: 30px 70px 30px 70px; transform: rotate(7deg); }
.about-note { position: absolute; z-index: 5; padding: 15px 18px; border-radius: 14px; font-size: 11px; font-weight: 900; line-height: 1.2; box-shadow: var(--shadow-soft); }
.note-a { left: 12px; bottom: 80px; background: var(--lime); transform: rotate(-8deg); }
.note-b { right: 10px; top: 190px; color: #fff; background: var(--violet); transform: rotate(8deg); }
.values-section { padding: 70px 0 110px; }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.value-card { min-height: 320px; padding: 30px; border-radius: 29px; }
.value-card span { font-size: 11px; font-weight: 900; }
.value-card h3 { margin: 105px 0 14px; font-size: 28px; line-height: 1.03; letter-spacing: -.04em; }
.value-card p { margin: 0; color: rgba(18,18,18,.65); font-size: 13px; line-height: 1.6; }
.value-yellow { background: #fff0a8; }
.value-pink { background: #ffc9df; }
.value-blue { background: #c8e4ff; }
.mission-band { position: relative; margin-bottom: 100px; padding: 55px; border: 1px solid var(--glass-border); border-radius: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 55px; color: var(--glass-text); background: radial-gradient(circle at 14% 22%,rgba(101,168,255,.2),transparent 30%), radial-gradient(circle at 88% 78%,rgba(139,108,255,.16),transparent 30%), var(--glass-fill-strong); box-shadow: var(--glass-shadow); overflow: hidden; -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%); }
.mission-band > div + div { padding-left: 55px; border-left: 1px solid rgba(58,71,88,.14); }
.mission-band span { color: #654dff; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.mission-band h2 { margin: 28px 0 0; font-size: clamp(30px,3.2vw,45px); line-height: 1.08; letter-spacing: -.045em; }

/* Contact */
.contact-page { min-height: 780px; padding: 175px 0 100px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.contact-intro h1 { margin: 24px 0 22px; font-size: clamp(58px,6vw,86px); line-height: .9; letter-spacing: -.068em; }
.contact-intro h1 span { color: #654dff; }
.contact-intro > p { max-width: 500px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.72; }
.contact-chip { margin-top: 34px; padding: 22px 24px; border-radius: 22px; display: grid; gap: 6px; background: #dff3ab; }
.contact-chip small { font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.contact-chip a { font-size: 18px; font-weight: 700; }
.contact-chip span { color: rgba(18,18,18,.6); font-size: 11px; }
.contact-form { position: relative; padding: 35px; border: 1px solid var(--line); border-radius: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.contact-form::before { content: ""; position: absolute; width: 180px; height: 180px; right: -55px; top: -65px; border-radius: 50%; background: rgba(101,168,255,.2); }
.contact-form > * { position: relative; z-index: 2; }
.form-heading { grid-column: 1/-1; display: flex; align-items: end; justify-content: space-between; margin-bottom: 8px; }
.form-heading span { font-size: 24px; font-weight: 900; }
.form-heading small { color: var(--muted); font-size: 10px; }
.contact-form label { display: grid; gap: 8px; }
.contact-form label.full { grid-column: 1/-1; }
.contact-form label > span { font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; padding: 14px 15px; border: 1px solid rgba(0,0,0,.12); border-radius: 14px; color: var(--ink); background: #fffaf5; outline: none; transition: border .2s ease, box-shadow .2s ease; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #654dff; box-shadow: 0 0 0 4px rgba(101,77,255,.1); }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form button, .form-success, .form-errors { grid-column: 1/-1; }
.form-success, .form-errors { padding: 13px 15px; border-radius: 13px; font-size: 12px; }
.form-success { color: #1f623f; background: #d8f2df; }
.form-errors { color: #8e3737; background: #ffe1e1; }

/* Game detail */
.game-detail { --detail-bg: #dff3ab; min-height: 780px; padding: 175px 30px 70px; border-radius: 0 0 50px 50px; display: grid; grid-template-columns: .88fr 1.12fr; gap: 65px; align-items: center; background: var(--detail-bg); }
.game-detail-lime, .game-detail-green { --detail-bg: #dff3ab; }
.game-detail-violet { --detail-bg: #d8ccff; }
.game-detail-orange { --detail-bg: #ffd0a0; }
.game-detail-blue, .game-detail-teal { --detail-bg: #c8e5ff; }
.game-detail-red, .game-detail-pink { --detail-bg: #ffc7d9; }
.back-link { display: inline-flex; margin-bottom: 28px; font-size: 12px; font-weight: 700; }
.detail-icon { width: 80px; height: 80px; margin-bottom: 18px; padding: 6px; border: 2px solid #fff; border-radius: 24px; object-fit: cover; background: #fff; box-shadow: var(--shadow-soft); }
.game-detail-copy h1 { margin: 14px 0 20px; font-size: clamp(54px,5.5vw,80px); line-height: .9; letter-spacing: -.067em; }
.game-detail-copy p { max-width: 560px; margin: 0; color: rgba(18,18,18,.65); font-size: 16px; line-height: 1.72; }
.store-note { max-width: 500px; color: rgba(18,18,18,.55); font-size: 11px; line-height: 1.5; }
.game-detail-art { position: relative; height: 570px; padding: 12px; border-radius: 40px; overflow: hidden; background: rgba(255,255,255,.55); box-shadow: var(--shadow); }
.game-detail-art > img { width: 100%; height: 100%; border-radius: 31px; object-fit: cover; }
.detail-ribbon { position: absolute; right: -35px; top: 55px; padding: 13px 45px; color: #111; background: var(--yellow); font-size: 11px; font-weight: 900; transform: rotate(12deg); box-shadow: var(--shadow-soft); }
.detail-principles { padding: 90px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.detail-principles article { min-height: 230px; padding: 28px; border-radius: 26px; background: #fff; box-shadow: var(--shadow-soft); }
.detail-principles article:nth-child(1) { background: #fff0a8; }
.detail-principles article:nth-child(2) { background: #c8e4ff; }
.detail-principles article:nth-child(3) { background: #ffc9df; }
.detail-principles span { font-size: 10px; font-weight: 900; }
.detail-principles h2 { margin: 70px 0 10px; font-size: 24px; letter-spacing: -.035em; }
.detail-principles p { margin: 0; color: rgba(18,18,18,.63); font-size: 13px; line-height: 1.6; }
.related { padding-bottom: 120px; }
.related .section-heading { display: block; }
.related .section-heading h2 { margin: 15px 0 35px; font-size: 48px; letter-spacing: -.05em; }
.game-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.game-tile { border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); }
.game-tile-media { position: relative; height: 300px; overflow: hidden; }
.game-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.game-tile:hover .game-tile-media img { transform: scale(1.04); }
.game-tile-arrow { position: absolute; right: 16px; top: 16px; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.88); }
.game-tile-copy { padding: 23px; }
.game-meta-row { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.game-tile h3 { margin: 13px 0 10px; font-size: 23px; }
.game-tile p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Legal */
.legal-page { max-width: 860px; padding: 170px 0 110px; }
.legal-page h1 { margin: 15px 0 35px; font-size: clamp(48px,5vw,72px); line-height: .94; letter-spacing: -.058em; }
.legal-content { padding: 35px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-soft); }
.legal-content h2 { margin: 30px 0 12px; }
.legal-content p, .legal-content li { color: var(--muted); font-size: 14px; line-height: 1.75; }

/* Footer */
.site-footer { position: relative; isolation: isolate; margin-bottom: 24px; padding: 48px; border: 1px solid var(--glass-border); border-radius: 34px; color: var(--glass-text); background: radial-gradient(circle at 12% 18%,rgba(101,168,255,.18),transparent 28%), radial-gradient(circle at 88% 82%,rgba(255,119,168,.16),transparent 28%), var(--glass-fill-strong); box-shadow: var(--glass-shadow); overflow: hidden; -webkit-backdrop-filter: blur(28px) saturate(165%); backdrop-filter: blur(28px) saturate(165%); }
.footer-top { display: grid; grid-template-columns: 1.1fr .8fr 1fr; gap: 40px; align-items: start; }
.footer-brand img { width: 105px; }
.footer-brand p { max-width: 280px; margin: 20px 0 0; color: var(--glass-muted); font-size: 13px; line-height: 1.6; }
.footer-links { display: grid; gap: 12px; }
.footer-links a { color: rgba(28,38,49,.68); font-size: 13px; }
.footer-mail { justify-self: end; font-size: 14px; font-weight: 700; }
.footer-bottom { margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(55,68,84,.13); display: flex; justify-content: space-between; color: rgba(29,39,50,.5); font-size: 10px; }
.footer-bottom div { display: flex; gap: 18px; }

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes floatSpark { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(14deg); } }

@media (max-width: 1050px) {
    .home-hero, .games-hero, .about-hero, .contact-page { grid-template-columns: 1fr; gap: 35px; }
    .home-hero { padding-top: 145px; }
    .hero-world, .games-icon-cloud, .about-collage { min-height: 520px; }
    .hero-main-card { right: 12%; }
    .hero-stats { margin-top: 5px; }
    .collection-stage { grid-template-columns: 1fr; }
    .collection-mosaic { min-height: 500px; }
    .section-heading { grid-template-columns: 1fr; }
    .section-heading > p { justify-self: start; }
    .mood-red, .mood-violet, .mood-cyan, .mood-lime { grid-column: span 6; }
    .game-row, .game-row-reverse { grid-template-columns: 1fr; }
    .game-row-reverse .game-row-visual { order: initial; }
    .featured-card, .featured-card:nth-child(even) { grid-template-columns: 1fr; }
    .featured-card:nth-child(even) .featured-image { order: initial; }
    .values-grid, .detail-principles, .game-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .section-shell { width: min(100% - 28px, 1180px); }
    .site-header { top: 12px; width: calc(100% - 24px); height: 58px; grid-template-columns: 1fr auto; padding: 0 14px 0 18px; }
    .brand img { width: 92px; }
    .menu-toggle { display: block; }
    .site-nav { position: absolute; top: 68px; left: 0; right: 0; padding: 16px; border-radius: 18px; display: none; flex-direction: column; align-items: stretch; gap: 4px; border: 1px solid var(--glass-border); background: var(--glass-fill-strong); box-shadow: 0 18px 40px rgba(62,75,93,.2); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }
    .site-nav.open { display: flex; }
    .site-nav a { padding: 12px 10px; }
    .site-nav a.active::after { display: none; }
    .home-hero, .games-hero, .about-hero, .contact-page { min-height: auto; padding: 125px 0 65px; }
    .hero-copy { padding-left: 0; }
    .hero-copy h1, .games-hero-copy h1, .about-copy h1, .contact-intro h1 { font-size: clamp(52px,15vw,72px); }
    .hero-actions { align-items: flex-start; flex-direction: column; }
    .hero-world { min-height: 420px; }
    .hero-main-card { right: 3%; width: 76%; height: 360px; border-radius: 85px 30px 80px 34px; }
    .hero-main-card > img { border-radius: 74px 21px 68px 25px; }
    .blob-pink { width: 190px; height: 205px; left: 0; }
    .blob-blue { width: 170px; height: 180px; }
    .hero-icon { width: 62px; height: 62px; border-radius: 19px; }
    .hero-icon-a { left: 10px; top: 95px; }
    .hero-icon-b { left: 3px; bottom: 45px; }
    .hero-icon-c { right: 0; top: 54px; }
    .hero-sticker { display: none; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .collection-stage { padding: 35px 22px; border-radius: 30px; }
    .collection-copy h2 { font-size: 50px; }
    .collection-mosaic { min-height: 420px; transform: scale(.88); transform-origin: center; }
    .mood-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; }
    .mood-red, .mood-violet, .mood-cyan, .mood-lime { grid-column: auto; }
    .featured-heading { align-items: flex-start; flex-direction: column; }
    .featured-card { padding: 12px; gap: 10px; border-radius: 27px; }
    .featured-image { height: 260px; }
    .featured-copy { padding: 23px 17px 28px; }
    .final-cta { padding: 60px 28px; border-radius: 30px; }
    .games-icon-cloud { min-height: 400px; transform: scale(.82); }
    .game-row { padding: 12px; gap: 12px; border-radius: 28px; }
    .game-row-visual { height: 300px; }
    .game-row-copy { padding: 22px 13px 28px; }
    .game-row-copy h2 { font-size: 44px; }
    .about-collage { min-height: 420px; transform: scale(.88); transform-origin: center; }
    .mission-band { padding: 35px 25px; grid-template-columns: 1fr; }
    .mission-band > div + div { padding: 35px 0 0; border-left: 0; border-top: 1px solid rgba(58,71,88,.14); }
    .contact-form { padding: 25px; grid-template-columns: 1fr; }
    .contact-form label.full, .contact-form button, .form-heading { grid-column: 1; }
    .form-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
    .game-detail { width: 100%; padding: 125px 18px 55px; border-radius: 0 0 35px 35px; grid-template-columns: 1fr; }
    .game-detail-art { height: 380px; }
    .site-footer { padding: 34px 25px; border-radius: 28px; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-mail { justify-self: start; }
    .footer-bottom { align-items: flex-start; flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ========================================
   V5 polish: darker crystal header + refined home/games layout
   ======================================== */
:root {
    --glass-text: #f4f7fb;
    --glass-muted: rgba(237,242,249,.72);
    --glass-border: rgba(255,255,255,.14);
    --glass-edge: rgba(255,255,255,.1);
    --glass-fill: linear-gradient(135deg, rgba(33,38,46,.84), rgba(52,58,68,.78) 52%, rgba(28,33,40,.84));
    --glass-fill-strong: linear-gradient(135deg, rgba(28,32,39,.94), rgba(52,57,67,.9) 50%, rgba(22,25,31,.95));
    --glass-shadow: 0 20px 56px rgba(7,10,16,.22), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.05);
}

body {
    background:
        radial-gradient(circle at 10% 22%, rgba(255,119,168,.08), transparent 18%),
        radial-gradient(circle at 86% 12%, rgba(101,168,255,.08), transparent 20%),
        var(--paper);
}

.site-header {
    border-color: rgba(255,255,255,.16);
    color: #f5f8fc;
    background: var(--glass-fill-strong);
    box-shadow: 0 22px 56px rgba(10,12,18,.2), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.05);
}
.site-header::before {
    background: linear-gradient(112deg, rgba(255,255,255,.14) 0 14%, rgba(255,255,255,.03) 34%, rgba(174,191,213,.08) 58%, rgba(255,255,255,.12) 100%);
}
.site-header::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); }
.site-header.scrolled {
    background: linear-gradient(135deg, rgba(24,28,34,.96), rgba(49,55,64,.92) 50%, rgba(20,23,28,.96));
    box-shadow: 0 18px 48px rgba(8,10,16,.24), inset 0 1px 0 rgba(255,255,255,.16);
}
.site-nav a { color: rgba(244,247,251,.68); }
.site-nav a:hover,
.site-nav a.active { color: #ffffff; text-shadow: 0 1px 8px rgba(255,255,255,.2); }
.menu-toggle { color: #f2f5f9; }

.section-kicker { font-size: 11px; }
.section-heading { margin-bottom: 56px; }
.section-heading h2 { font-size: clamp(56px, 5.8vw, 86px); line-height: .92; }
.section-heading > p { font-size: 16px; line-height: 1.75; }
.section-heading-large h2 { font-size: clamp(60px, 6vw, 92px); }

.button-dark {
    border-color: rgba(255,255,255,.15);
    color: #ffffff;
    background: linear-gradient(135deg, rgba(24,28,34,.94), rgba(63,71,82,.88) 52%, rgba(25,29,35,.95));
    box-shadow: 0 18px 42px rgba(11,14,20,.18), inset 0 1px 0 rgba(255,255,255,.16);
}
.button-dark::before {
    background: linear-gradient(115deg, rgba(255,255,255,.16), transparent 42%, rgba(255,255,255,.04) 68%, rgba(255,255,255,.12));
}
.button-dark:hover {
    background: linear-gradient(135deg, rgba(36,40,48,.98), rgba(82,92,107,.9), rgba(31,35,43,.98));
    box-shadow: 0 20px 46px rgba(10,12,18,.24), inset 0 1px 0 rgba(255,255,255,.18);
}
.button-light {
    border-color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.72);
}

.hero-main-card {
    right: 50px;
    width: 360px;
    height: 408px;
    border-radius: 95px 34px 88px 36px;
}
.hero-main-card > img { border-radius: 84px 24px 78px 26px; }
.main-card-label {
    color: #15202b;
    background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(213,221,232,.78));
}
.hero-copy h1 span,
.about-copy h1 span,
.contact-intro h1 span,
.games-hero-copy h1 span { color: #4a54ff; }
.hero-copy p,
.games-hero-copy p,
.about-copy p,
.contact-intro > p,
.section-heading > p,
.collection-copy p { color: #5b626d; }

.collection-snapshot { padding: 26px 0 22px; }
.compact-game-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.compact-game-pill {
    min-height: 108px;
    padding: 16px 18px;
    border-radius: 26px;
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-soft);
    transition: transform .22s ease, box-shadow .22s ease;
}
.compact-game-pill:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(30,24,15,.12); }
.compact-game-pill img {
    width: 58px;
    height: 58px;
    padding: 4px;
    border-radius: 18px;
    object-fit: cover;
    background: rgba(255,255,255,.86);
}
.compact-game-pill strong { display: block; font-size: 16px; line-height: 1.08; }
.compact-game-pill span { display: block; margin-top: 6px; color: rgba(18,18,18,.58); font-size: 12px; }
.compact-game-pill i {
    align-self: start;
    padding: 8px 10px;
    border-radius: 999px;
    font-style: normal;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    background: rgba(255,255,255,.64);
}
.accent-lime, .accent-green { background: linear-gradient(135deg, #dff3ab, #f3ffd6); }
.accent-violet { background: linear-gradient(135deg, #ddd4ff, #f1ecff); }
.accent-orange { background: linear-gradient(135deg, #ffd3a6, #ffe8cc); }
.accent-blue, .accent-teal { background: linear-gradient(135deg, #cfe8ff, #e9f5ff); }
.accent-pink, .accent-red { background: linear-gradient(135deg, #ffd0df, #ffe8ef); }

.mood-section { padding-top: 36px; }
.mood-grid { gap: 18px; }
.mood-card { border: 0; box-shadow: var(--shadow-soft); }

.play-principles { padding: 34px 0 108px; }
.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.principle-card {
    min-height: 270px;
    padding: 30px;
    border-radius: 30px;
    box-shadow: var(--shadow-soft);
}
.principle-card small {
    display: inline-flex;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    background: rgba(255,255,255,.25);
}
.principle-card h3 {
    margin: 74px 0 14px;
    font-size: clamp(28px, 2.7vw, 38px);
    line-height: .98;
    letter-spacing: -.04em;
}
.principle-card p { margin: 0; font-size: 14px; line-height: 1.68; }
.principle-card-dark {
    color: #f5f8fb;
    background: linear-gradient(135deg, rgba(28,32,39,.95), rgba(58,66,77,.93), rgba(25,29,35,.95));
}
.principle-card-dark p { color: rgba(245,248,251,.78); }
.principle-card-pink { background: linear-gradient(135deg, #ffb8d4, #ffdcea); }
.principle-card-blue { background: linear-gradient(135deg, #bedcff, #e2f0ff); }

.games-hero { min-height: 670px; }
.genre-marquee {
    color: #f4f7fb;
    border-block-color: rgba(255,255,255,.1);
    background: linear-gradient(90deg, rgba(28,32,39,.95), rgba(56,63,73,.9), rgba(25,28,34,.95));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.05);
}
.genre-marquee i { color: #8ddf6a; }

.game-catalog { padding: 96px 0 125px; }
.catalog-heading { margin-bottom: 38px; }
.catalog-card {
    margin-bottom: 28px;
    padding: 28px;
    border-radius: 34px;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 34px;
    align-items: center;
    background: rgba(255,255,255,.8);
    box-shadow: var(--shadow-soft);
}
.catalog-card-reverse { grid-template-columns: 1.05fr .95fr; }
.catalog-card-reverse .catalog-visual { order: 2; }
.catalog-visual {
    position: relative;
    min-height: 380px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.catalog-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255,255,255,.58), rgba(255,255,255,.18));
}
.catalog-phone-shadow {
    position: absolute;
    left: 50%;
    bottom: 34px;
    width: 56%;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,.12);
    filter: blur(10px);
    transform: translateX(-50%);
}
.catalog-phone {
    position: relative;
    z-index: 2;
    width: 160px;
    height: 310px;
    padding: 12px;
    border-radius: 36px;
    background: linear-gradient(180deg, #20242b, #090b0f);
    box-shadow: 0 22px 48px rgba(0,0,0,.22);
}
.catalog-phone::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 78px;
    height: 18px;
    border-radius: 0 0 16px 16px;
    background: #0e1116;
    transform: translateX(-50%);
}
.catalog-phone img {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    object-fit: cover;
}
.catalog-copy { padding-right: 8px; }
.catalog-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #6e747c;
    font-size: 13px;
    font-weight: 900;
}
.catalog-meta img {
    width: 44px;
    height: 44px;
    padding: 3px;
    border-radius: 14px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.catalog-copy h2 {
    margin: 12px 0 16px;
    font-size: clamp(36px, 4vw, 52px);
    line-height: .95;
    letter-spacing: -.05em;
}
.catalog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.catalog-tags span {
    padding: 8px 12px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 999px;
    color: #5c6168;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
}
.catalog-copy p {
    max-width: 520px;
    margin: 0 0 24px;
    color: #666d76;
    font-size: 15px;
    line-height: 1.7;
}
.catalog-visual.accent-lime, .catalog-visual.accent-green { background: linear-gradient(135deg, #f0f9d5, #e4f5b8); }
.catalog-visual.accent-violet { background: linear-gradient(135deg, #ede8ff, #ddd2ff); }
.catalog-visual.accent-orange { background: linear-gradient(135deg, #ffe8cf, #ffd7ad); }
.catalog-visual.accent-blue, .catalog-visual.accent-teal { background: linear-gradient(135deg, #e3f1ff, #cde5ff); }
.catalog-visual.accent-red, .catalog-visual.accent-pink { background: linear-gradient(135deg, #ffe6ee, #ffd0df); }

.cloud-core {
    color: #fff;
    background: linear-gradient(135deg, rgba(28,32,39,.95), rgba(63,71,82,.92), rgba(25,29,35,.95));
    box-shadow: 0 18px 44px rgba(10,12,18,.24), inset 0 1px 0 rgba(255,255,255,.15);
}
.cloud-core span { color: rgba(255,255,255,.72); }

.mission-band,
.site-footer {
    color: #f4f7fb;
    background: radial-gradient(circle at 14% 22%, rgba(101,168,255,.16), transparent 30%), radial-gradient(circle at 88% 78%, rgba(255,119,168,.12), transparent 28%), var(--glass-fill-strong);
    box-shadow: 0 24px 60px rgba(7,10,16,.18), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.05);
}
.mission-band > div + div { border-left-color: rgba(255,255,255,.08); }
.footer-brand p,
.footer-links a,
.footer-bottom,
.footer-mail { color: rgba(241,245,250,.72); }
.footer-bottom { border-top-color: rgba(255,255,255,.08); }

@media (max-width: 1050px) {
    .compact-game-band,
    .principles-grid,
    .catalog-card,
    .catalog-card-reverse { grid-template-columns: 1fr 1fr; }
    .catalog-card,
    .catalog-card-reverse { grid-template-columns: 1fr; }
    .catalog-card-reverse .catalog-visual { order: initial; }
}

@media (max-width: 760px) {
    .section-heading h2,
    .section-heading-large h2 { font-size: clamp(48px, 12vw, 66px); }
    .hero-main-card {
        right: 4%;
        width: 72%;
        height: 330px;
        border-radius: 76px 28px 72px 28px;
    }
    .hero-main-card > img { border-radius: 66px 20px 62px 20px; }
    .compact-game-band,
    .principles-grid { grid-template-columns: 1fr; }
    .compact-game-pill { grid-template-columns: 54px 1fr auto; min-height: 96px; }
    .play-principles { padding-bottom: 84px; }
    .catalog-card { padding: 18px; border-radius: 26px; }
    .catalog-visual { min-height: 300px; }
    .catalog-phone { width: 138px; height: 270px; }
    .catalog-copy h2 { font-size: 38px; }
}

/* V6 refinement: restore collection feature and rebalance Why Players Stay */
.play-principles .why-stays-kicker {
    display: inline-flex;
    padding: 10px 14px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #2a3039, #555f6d);
    box-shadow: 0 12px 28px rgba(17, 22, 30, .16), inset 0 1px 0 rgba(255,255,255,.16);
    letter-spacing: .16em;
}
.play-principles .why-stays-kicker::before {
    background: linear-gradient(135deg, #9ed4ff, #8b74ff);
}
.play-principles .why-stays-heading {
    max-width: 820px;
    font-size: clamp(52px, 5.25vw, 78px);
    line-height: .94;
}

@media (max-width: 760px) {
    .play-principles .why-stays-heading {
        font-size: clamp(44px, 11vw, 60px);
    }
}


/* V7 refinement: consistent solid section labels (no gradients) */
.section-title-pill {
    display: inline-flex;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #ffffff;
    background: #343a43;
    box-shadow: 0 12px 28px rgba(17,22,30,.14), inset 0 1px 0 rgba(255,255,255,.12);
    letter-spacing: .16em;
}
.section-title-pill::before {
    background: #9ed4ff;
}
.collection-stage .section-title-pill {
    background: #2f3540;
    border-color: rgba(255,255,255,.2);
}
.play-principles .why-stays-kicker {
    background: #343a43;
}

/* V8 refinement: outside collection label + true dark liquid glass */
:root {
    --dark-glass: rgba(38, 43, 52, .76);
    --dark-glass-strong: rgba(30, 34, 41, .88);
    --dark-glass-border: rgba(255, 255, 255, .16);
    --dark-glass-highlight: rgba(255, 255, 255, .055);
    --dark-glass-shadow: 0 24px 64px rgba(14, 18, 25, .22), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.05);
}

/* No grey gradients: use translucent dark material, blur and reflective edges. */
.site-header,
.site-header.scrolled {
    border-color: var(--dark-glass-border);
    background: var(--dark-glass-strong);
    box-shadow: var(--dark-glass-shadow);
    -webkit-backdrop-filter: blur(30px) saturate(145%);
    backdrop-filter: blur(30px) saturate(145%);
}
.site-header::before {
    background: var(--dark-glass-highlight);
}
.site-header::after {
    left: 10%;
    right: 10%;
    background: rgba(255,255,255,.34);
}

.section-title-pill,
.play-principles .why-stays-kicker,
.collection-stage .section-title-pill {
    border-color: var(--dark-glass-border);
    color: #ffffff;
    background: rgba(42, 47, 56, .82);
    box-shadow: 0 12px 30px rgba(14,18,25,.16), inset 0 1px 0 rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
}
.section-title-pill::before,
.play-principles .why-stays-kicker::before {
    background: #9ed4ff;
}

.collection-label-row {
    margin-top: 55px;
    margin-bottom: 18px;
}
.collection-stage {
    margin-top: 0;
    border-color: var(--dark-glass-border);
    color: #f5f7fb;
    background: var(--dark-glass);
    box-shadow: var(--dark-glass-shadow);
    -webkit-backdrop-filter: blur(34px) saturate(150%);
    backdrop-filter: blur(34px) saturate(150%);
}
.collection-stage::before {
    background: var(--dark-glass-highlight);
}
.collection-copy p { color: rgba(245,247,251,.68); }
.collection-copy h2 span { color: #8069ff; }
.main-card-label,
.game-row-number {
    border-color: rgba(255,255,255,.2);
    background: rgba(240,244,250,.68);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
}

.button-dark,
.button-dark:hover {
    border-color: var(--dark-glass-border);
    color: #ffffff;
    background: rgba(35, 40, 48, .86);
    box-shadow: 0 17px 40px rgba(12,15,21,.2), inset 0 1px 0 rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
}
.button-dark::before {
    background: rgba(255,255,255,.035);
}
.button-light {
    border-color: rgba(255,255,255,.3);
    color: #f7f9fc;
    background: rgba(255,255,255,.12);
    box-shadow: 0 14px 34px rgba(10,13,18,.16), inset 0 1px 0 rgba(255,255,255,.2);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
}

.genre-marquee {
    border-block-color: rgba(255,255,255,.1);
    color: #f5f7fb;
    background: rgba(36, 41, 49, .9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.05);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
}
.cloud-core {
    color: #ffffff;
    background: rgba(36, 41, 49, .88);
    box-shadow: var(--dark-glass-shadow);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
}

.mission-band,
.site-footer {
    border-color: var(--dark-glass-border);
    color: #f5f7fb;
    background: var(--dark-glass);
    box-shadow: var(--dark-glass-shadow);
    -webkit-backdrop-filter: blur(32px) saturate(145%);
    backdrop-filter: blur(32px) saturate(145%);
}
.mission-band span { color: #b9dfff; }
.mission-band > div + div { border-left-color: rgba(255,255,255,.1); }
.footer-brand p,
.footer-links a,
.footer-bottom,
.footer-mail { color: rgba(244,247,251,.72); }
.footer-bottom { border-top-color: rgba(255,255,255,.1); }

/* Give page-level labels the same hierarchy as the home section labels. */
.games-hero-copy > .section-title-pill,
.about-copy > .section-title-pill,
.contact-intro > .section-title-pill,
.game-detail-copy > .section-title-pill,
.legal-page > .section-title-pill {
    margin-bottom: 4px;
}

@media (max-width: 760px) {
    .collection-label-row {
        margin-top: 34px;
        margin-bottom: 14px;
    }
    .mission-band > div + div {
        border-left: 0;
        border-top-color: rgba(255,255,255,.1);
    }
}

/* ========================================
   V9 — smooth liquid glass, no scroll strips, store badges
   ======================================== */

/* Removed in markup; defensive fallback for cached views. */
.page-progress,
.genre-marquee { display: none !important; }

:root {
    --liquid-glass: rgba(42, 47, 56, .72);
    --liquid-glass-deep: rgba(33, 37, 45, .84);
    --liquid-border: rgba(255, 255, 255, .22);
    --liquid-inner: rgba(255, 255, 255, .12);
    --liquid-shadow: 0 22px 56px rgba(18, 22, 30, .18), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.055);
}

/* Smooth dark-grey crystal material: solid translucent fill, no visible grey gradient. */
.site-header,
.site-header.scrolled,
.collection-stage,
.mission-band,
.site-footer,
.cloud-core,
.section-title-pill,
.button-dark,
.principle-card-dark {
    border: 1px solid var(--liquid-border);
    background-color: var(--liquid-glass);
    background-image: none;
    box-shadow: var(--liquid-shadow);
    background-clip: padding-box;
    -webkit-backdrop-filter: blur(28px) saturate(165%);
    backdrop-filter: blur(28px) saturate(165%);
}

.site-header,
.site-header.scrolled {
    border-radius: 24px;
    background-color: var(--liquid-glass-deep);
    box-shadow: 0 22px 54px rgba(15,18,25,.2), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.06);
}
.site-header::before {
    inset: 1px;
    border-radius: 22px;
    background: rgba(255,255,255,.035);
}
.site-header::after {
    left: 8%;
    right: 8%;
    top: 1px;
    height: 1px;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
}

.collection-stage {
    border-radius: 42px;
    background-color: rgba(51, 55, 64, .73);
    box-shadow: 0 28px 68px rgba(19,23,31,.2), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.055);
}
.collection-stage::before {
    inset: 1px;
    border-radius: 40px;
    background: rgba(255,255,255,.025);
}

.section-title-pill {
    border-radius: 999px;
    background-color: rgba(44, 49, 58, .8);
    box-shadow: 0 12px 28px rgba(15,18,25,.14), inset 0 1px 0 rgba(255,255,255,.18);
}

.button-dark {
    background-color: rgba(45, 50, 59, .9);
    border-radius: 14px;
}
.button-dark:hover {
    background-color: rgba(58, 64, 75, .94);
    border-color: rgba(255,255,255,.28);
}
.button-dark::before { background: rgba(255,255,255,.025); }

/* Collection CTA must remain strongly visible on the dark panel. */
.collection-stage .button-light {
    color: #15191f;
    border: 1px solid rgba(255,255,255,.96);
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(12,15,21,.2), inset 0 1px 0 #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.collection-stage .button-light:hover {
    color: #11151a;
    background: #f4f6f9;
    box-shadow: 0 19px 39px rgba(12,15,21,.24);
}

.mission-band,
.site-footer {
    background-color: rgba(40, 45, 54, .76);
    border-radius: 36px;
}
.site-footer::before,
.mission-band::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: rgba(255,255,255,.025);
}

.cloud-core {
    background-color: rgba(45, 50, 59, .86);
    border-radius: 50%;
}

/* Game District-style category pills plus dedicated store badges. */
.catalog-tags {
    gap: 8px;
    margin-bottom: 17px;
}
.catalog-tags span {
    padding: 7px 12px;
    border: 1px solid rgba(28, 34, 42, .14);
    color: #616770;
    background: rgba(255,255,255,.76);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .015em;
    text-transform: uppercase;
}
.catalog-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.store-badge {
    min-height: 47px;
    padding: 7px 13px;
    border: 1px solid rgba(25, 31, 38, .3);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #20252c;
    background: rgba(255,255,255,.86);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.store-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(25,31,38,.5);
    background: #ffffff;
}
.store-badge-icon {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: #252a31;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}
.store-badge-play { padding-left: 2px; font-size: 11px; }
.store-badge-app { font-size: 13px; }
.store-badge > span:last-child { display: grid; gap: 0; }
.store-badge small {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1.15;
}
.store-badge strong {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .025em;
    line-height: 1.2;
}
.catalog-view-button { min-height: 47px; }

/* Without the scrolling strip, preserve comfortable separation. */
.game-catalog { padding-top: 68px; }

@media (max-width: 760px) {
    .site-header,
    .site-header.scrolled { border-radius: 20px; }
    .site-header::before { border-radius: 18px; }
    .collection-stage { border-radius: 30px; }
    .collection-stage::before { border-radius: 28px; }
    .catalog-actions { align-items: stretch; }
    .store-badge,
    .catalog-view-button { justify-content: center; }
}

/* ========================================
   V10 — real game assets, flagship spotlight and unified typography
   ======================================== */
:root {
    --site-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html, body, button, input, textarea, select { font-family: var(--site-font); }
h1, h2, h3, h4, h5, h6, p, a, span, small, strong, em, i, label { font-family: inherit; }

/* Slightly larger, smoother crystal header. We keep existing weights and spacing rules. */
.site-header,
.site-header.scrolled {
    top: 18px;
    width: min(860px, calc(100% - 34px));
    height: 72px;
    padding: 0 24px 0 26px;
    grid-template-columns: 220px 1fr;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 26px;
    background: rgba(38,43,51,.78);
    box-shadow: 0 24px 58px rgba(13,17,24,.2), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(255,255,255,.055);
    -webkit-backdrop-filter: blur(32px) saturate(170%);
    backdrop-filter: blur(32px) saturate(170%);
}
.site-header.scrolled { top: 10px; height: 66px; background: rgba(32,36,43,.86); }
.site-header::before {
    inset: 1px;
    border-radius: 24px;
    background: rgba(255,255,255,.028);
}
.site-header::after {
    left: 7%;
    right: 7%;
    top: 1px;
    height: 1px;
    border-radius: 999px;
    background: rgba(255,255,255,.46);
}
.brand img { width: 122px; max-height: 50px; }
.site-nav { gap: 34px; }
.site-nav a { font-size: 13px; }

/* Hero now uses supplied production artwork. */
.hero-main-card { width: 390px; height: 440px; }
.hero-main-card > img { object-position: center; }

/* Flagship 4x4 spotlight. */
.collection-label-row { margin-top: 58px; margin-bottom: 14px; }
.flagship-stage {
    position: relative;
    min-height: 650px;
    padding: 56px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 42px;
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 48px;
    align-items: center;
    color: #f7f9fc;
    background: rgba(48,53,62,.76);
    box-shadow: 0 30px 72px rgba(18,22,30,.2), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.055);
    overflow: hidden;
    -webkit-backdrop-filter: blur(30px) saturate(165%);
    backdrop-filter: blur(30px) saturate(165%);
}
.flagship-stage::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 40px;
    background: rgba(255,255,255,.018);
    pointer-events: none;
}
.flagship-copy,
.flagship-gallery { position: relative; z-index: 2; }
.flagship-eyebrow {
    display: inline-flex;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    color: rgba(255,255,255,.76);
    background: rgba(255,255,255,.06);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}
.flagship-copy h2 {
    margin: 22px 0 20px;
    font-size: clamp(52px, 5vw, 76px);
    line-height: .91;
    letter-spacing: -.06em;
}
.flagship-copy p {
    max-width: 520px;
    margin: 0;
    color: rgba(245,248,252,.72);
    font-size: 15px;
    line-height: 1.72;
}
.flagship-momentum {
    margin-top: 22px;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.055);
    font-size: 12px;
    line-height: 1.45;
}
.flagship-momentum span { color: #b9ef61; }
.flagship-actions { margin-top: 28px; }
.flagship-stage .button-light {
    color: #171b21;
    border-color: rgba(255,255,255,.98);
    background: #fff;
    box-shadow: 0 16px 36px rgba(9,12,18,.22);
}
.flagship-gallery { min-height: 500px; }
.flagship-shot {
    position: absolute;
    overflow: hidden;
    border: 5px solid rgba(244,247,251,.78);
    border-radius: 28px;
    box-shadow: 0 22px 48px rgba(5,8,13,.24);
    transition: transform .3s ease, box-shadow .3s ease;
}
.flagship-shot:hover { z-index: 8; transform: translateY(-6px) rotate(0); box-shadow: 0 28px 58px rgba(5,8,13,.3); }
.flagship-shot img { width: 100%; height: 100%; object-fit: cover; }
.flagship-shot-1 { left: 2%; top: 18%; width: 48%; height: 45%; transform: rotate(-6deg); }
.flagship-shot-2 { right: 4%; top: 1%; width: 47%; height: 42%; transform: rotate(6deg); }
.flagship-shot-3 { left: 18%; bottom: 0; width: 47%; height: 42%; transform: rotate(5deg); }
.flagship-shot-4 { right: 0; bottom: 5%; width: 43%; height: 39%; transform: rotate(-5deg); }
.flagship-pop {
    position: absolute;
    z-index: 10;
    padding: 11px 14px;
    border-radius: 12px;
    color: #12151a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.pop-stunt { left: 1%; bottom: 22%; background: #ff83b1; transform: rotate(-8deg); }
.pop-race { right: 5%; top: 40%; background: #b9ef61; transform: rotate(7deg); }
.pop-4x4 { left: 43%; top: 3%; background: #7fc4ff; transform: rotate(-5deg); }

/* Keep the CTA label outside its coloured panel. */
.final-cta-label { margin-top: 20px; margin-bottom: 14px; }
.final-cta { margin-top: 0; }

/* Footer social system. */
.footer-connect { display: grid; justify-items: end; gap: 20px; }
.social-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.social-link {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #f5f8fc;
    background: rgba(255,255,255,.06);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.social-link:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); }
.social-link svg { width: 19px; height: 19px; fill: currentColor; }
.social-link.is-disabled { opacity: .42; cursor: not-allowed; }

/* Games catalogue: realistic device, title-first content, no download or view-game row. */
.game-catalog { padding-top: 80px; }
.catalog-card {
    grid-template-columns: .98fr 1.02fr;
    gap: 50px;
    padding: 34px;
    border-radius: 34px;
    background: rgba(255,255,255,.86);
}
.catalog-card-reverse { grid-template-columns: 1.02fr .98fr; }
.catalog-card-reverse .catalog-device-stage { order: 2; }
.catalog-device-stage {
    position: relative;
    min-height: 460px;
    border-radius: 29px;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.catalog-device-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.18);
}
.phone-device { position: relative; z-index: 3; width: 205px; height: 415px; perspective: 1200px; }
.phone-frame {
    position: absolute;
    inset: 0;
    padding: 11px;
    border: 2px solid rgba(255,255,255,.22);
    border-radius: 46px;
    background: #11151b;
    box-shadow: 0 26px 52px rgba(10,12,17,.28), inset 0 0 0 2px rgba(255,255,255,.045);
    transform: rotateY(-7deg) rotateX(2deg);
    transform-style: preserve-3d;
}
.phone-frame img { width: 100%; height: 100%; border-radius: 35px; object-fit: cover; }
.phone-dynamic-island {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 18px;
    width: 88px;
    height: 24px;
    border-radius: 999px;
    background: #07090d;
    transform: translateX(-50%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.phone-side {
    position: absolute;
    z-index: 1;
    width: 4px;
    border-radius: 4px;
    background: #151920;
}
.phone-side-left { left: -3px; top: 92px; height: 72px; box-shadow: 0 88px 0 #151920; }
.phone-side-right { right: -3px; top: 120px; height: 98px; }
.device-floor-shadow {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 34px;
    width: 48%;
    height: 24px;
    border-radius: 50%;
    background: rgba(22,26,33,.15);
    filter: blur(12px);
    transform: translateX(-50%);
}
.catalog-copy { padding: 12px 20px 12px 0; }
.catalog-title-link { display: inline-block; }
.catalog-copy h2 {
    margin: 0 0 18px;
    font-size: clamp(42px, 4.4vw, 62px);
    line-height: .92;
    letter-spacing: -.055em;
}
.catalog-copy p {
    max-width: 590px;
    margin-bottom: 26px;
    font-size: 15px;
    line-height: 1.78;
}
.catalog-tags { margin-bottom: 18px; }
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.store-badge {
    min-height: 51px;
    padding: 8px 15px;
    border-color: rgba(25,31,38,.28);
    border-radius: 999px;
}
.store-badge-placeholder { cursor: default; }
.store-badge-placeholder:hover { transform: none; border-color: rgba(25,31,38,.28); background: rgba(255,255,255,.86); }
.store-badge-icon svg { width: 15px; height: 15px; fill: currentColor; }
.store-badge-app svg { width: 16px; height: 16px; }

/* Game detail reuses the same real device and supplied screenshots. */
.game-detail { grid-template-columns: 1.05fr .95fr; }
.game-detail-device { min-height: 620px; display: grid; place-items: center; }
.phone-device-large { width: 270px; height: 550px; }
.detail-tags { margin: 20px 0 18px; }
.game-detail-copy .store-badges { margin-top: 28px; }
.screenshot-section { padding: 100px 0 30px; }
.screenshot-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.screenshot-card {
    margin: 0;
    min-height: 300px;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-soft);
}
.screenshot-card img { width: 100%; height: 100%; object-fit: cover; }
.screenshot-card-1 { grid-column: span 7; }
.screenshot-card-2 { grid-column: span 5; }
.screenshot-card-3 { grid-column: span 5; }
.screenshot-card-1:nth-child(n+3) { grid-column: span 7; }

/* Full legal copy. */
.legal-page { max-width: 980px; }
.legal-content { padding: 46px; }
.legal-lead { font-size: 17px !important; color: #303640 !important; }
.legal-content h2 {
    margin: 42px 0 14px;
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.05;
    letter-spacing: -.035em;
}
.legal-content h3 { margin: 28px 0 10px; font-size: 20px; letter-spacing: -.02em; }
.legal-content ul { padding-left: 22px; }
.legal-content a { text-decoration: underline; text-underline-offset: 3px; }
.legal-emphasis {
    padding: 20px;
    border-radius: 18px;
    color: #303640 !important;
    background: #f1f3f6;
    font-size: 12px !important;
    font-weight: 700;
}
.legal-chip-list { display: flex; flex-wrap: wrap; gap: 9px; padding: 0 !important; list-style: none; }
.legal-chip-list li { padding: 8px 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; background: #f7f8fa; }
.representative-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.representative-grid article { padding: 24px; border-radius: 22px; background: #f3f5f8; }
.representative-grid span { color: #565eff; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.representative-grid h3 { margin: 12px 0 8px; }
.representative-grid p { margin: 0; }
.legal-signoff { margin-top: 42px; padding-top: 26px; border-top: 1px solid rgba(0,0,0,.08); display: grid; gap: 8px; color: #59616c; }

@media (max-width: 1050px) {
    .flagship-stage { grid-template-columns: 1fr; }
    .flagship-gallery { min-height: 520px; }
    .catalog-card,
    .catalog-card-reverse { grid-template-columns: 1fr; }
    .catalog-card-reverse .catalog-device-stage { order: initial; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-connect { justify-items: start; }
    .social-links { justify-content: flex-start; }
}

@media (max-width: 760px) {
    .site-header,
    .site-header.scrolled {
        top: 12px;
        width: calc(100% - 24px);
        height: 64px;
        grid-template-columns: 1fr auto;
        padding: 0 15px 0 18px;
        border-radius: 22px;
    }
    .brand img { width: 105px; }
    .site-nav { top: 74px; background: rgba(36,41,49,.9); }
    .flagship-stage { padding: 34px 23px; border-radius: 31px; }
    .flagship-copy h2 { font-size: 50px; }
    .flagship-gallery { min-height: 390px; }
    .flagship-shot { border-width: 4px; border-radius: 19px; }
    .flagship-pop { padding: 9px 11px; font-size: 9px; }
    .catalog-card { padding: 18px; gap: 24px; }
    .catalog-device-stage { min-height: 370px; }
    .phone-device { width: 170px; height: 345px; }
    .phone-frame { border-radius: 39px; }
    .phone-frame img { border-radius: 29px; }
    .phone-dynamic-island { width: 72px; height: 20px; top: 16px; }
    .catalog-copy { padding: 4px 4px 14px; }
    .catalog-copy h2 { font-size: 40px; }
    .game-detail-device { min-height: 470px; }
    .phone-device-large { width: 205px; height: 420px; }
    .screenshot-grid { grid-template-columns: 1fr; }
    .screenshot-card,
    .screenshot-card-1,
    .screenshot-card-2,
    .screenshot-card-3,
    .screenshot-card-1:nth-child(n+3) { grid-column: auto; min-height: 230px; }
    .representative-grid { grid-template-columns: 1fr; }
    .legal-content { padding: 26px; }
    .footer-top { grid-template-columns: 1fr; }
}

/* ========================================
   V11 — open flagship momentum + editorial game showcases
   ======================================== */

/* Homepage flagship: no heavy outer card, just an open editorial moment. */
.momentum-showcase {
    position: relative;
    min-height: 650px;
    padding: 92px 0 108px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 72px;
    align-items: center;
    isolation: isolate;
}
.momentum-showcase::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -160px;
    top: 110px;
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: rgba(255,148,190,.22);
    filter: blur(2px);
}
.momentum-showcase::after {
    content: "";
    position: absolute;
    z-index: -2;
    right: -170px;
    bottom: 50px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(118,181,255,.2);
}
.momentum-copy { position: relative; z-index: 3; }
.momentum-title-lockup {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.momentum-title-lockup img {
    width: 60px;
    height: 60px;
    padding: 4px;
    border-radius: 18px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 14px 32px rgba(20,24,31,.12);
}
.momentum-title-lockup div { display: grid; gap: 5px; }
.momentum-title-lockup span {
    color: #111318;
    font-size: 13px;
    font-weight: 900;
}
.momentum-title-lockup small {
    color: #757b84;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.momentum-copy h2 {
    max-width: 610px;
    margin: 0 0 22px;
    font-size: clamp(54px, 5.7vw, 84px);
    line-height: .91;
    letter-spacing: -.062em;
}
.momentum-copy > p {
    max-width: 610px;
    margin: 0;
    color: #666d76;
    font-size: 15px;
    line-height: 1.78;
}
.momentum-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 530px;
    margin: 28px 0 24px;
}
.momentum-metrics div {
    min-height: 96px;
    padding: 18px 20px;
    border: 1px solid rgba(24,29,36,.08);
    border-radius: 24px;
    display: grid;
    align-content: center;
    background: rgba(255,255,255,.72);
    box-shadow: 0 14px 36px rgba(25,28,35,.07);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.momentum-metrics strong {
    font-size: 31px;
    line-height: 1;
    letter-spacing: -.04em;
}
.momentum-metrics span {
    margin-top: 7px;
    color: #707780;
    font-size: 11px;
    font-weight: 700;
}
.momentum-link { margin-top: 2px; }

.momentum-visual {
    position: relative;
    min-height: 540px;
}
.momentum-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(72,82,96,.12);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.orbit-one { width: 420px; height: 420px; }
.orbit-two { width: 540px; height: 540px; border-style: dashed; }
.momentum-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
}
.glow-pink { width: 250px; height: 250px; left: 5%; top: 4%; background: rgba(255,139,183,.38); }
.glow-blue { width: 235px; height: 235px; right: 0; bottom: 2%; background: rgba(104,171,255,.34); }
.momentum-shot {
    position: absolute;
    z-index: 3;
    overflow: hidden;
    border: 6px solid rgba(255,255,255,.88);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 24px 54px rgba(24,28,36,.2);
    transition: transform .3s ease, box-shadow .3s ease;
}
.momentum-shot:hover { z-index: 8; transform: translateY(-8px) rotate(0deg); box-shadow: 0 32px 66px rgba(24,28,36,.24); }
.momentum-shot img { width: 100%; height: 100%; object-fit: cover; }
.momentum-shot-1 { left: 3%; top: 21%; width: 47%; height: 45%; transform: rotate(-7deg); }
.momentum-shot-2 { right: 3%; top: 5%; width: 46%; height: 42%; transform: rotate(7deg); }
.momentum-shot-3 { left: 27%; bottom: 3%; width: 49%; height: 42%; transform: rotate(3deg); }
.momentum-pop {
    position: absolute;
    z-index: 10;
    padding: 11px 14px;
    border-radius: 13px;
    color: #11151a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    box-shadow: 0 14px 30px rgba(20,24,31,.13);
}
.momentum-pop-a { left: 6%; top: 13%; background: #82c7ff; transform: rotate(-7deg); }
.momentum-pop-b { right: 9%; top: 42%; background: #ff8fba; transform: rotate(8deg); }
.momentum-pop-c { right: 18%; bottom: 4%; background: #b9ef61; transform: rotate(-5deg); }

/* Games page: wider, calmer editorial panels like the reference, with icon/title lockup and tilted phones. */
.game-catalog { padding-top: 72px; }
.game-showcase {
    position: relative;
    min-height: 500px;
    margin-bottom: 28px;
    padding: 38px 52px;
    border-radius: 32px;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 58px;
    align-items: center;
    overflow: hidden;
    background: #f2f2f2;
}
.game-showcase::before {
    content: "";
    position: absolute;
    width: 270px;
    height: 270px;
    left: -110px;
    bottom: -115px;
    border-radius: 50%;
    background: var(--showcase-pop, rgba(188,221,255,.55));
}
.game-showcase::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -100px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.75);
}
.game-showcase-reverse { grid-template-columns: 1.08fr .92fr; }
.game-showcase-reverse .game-showcase-device { order: 2; }
.game-showcase.accent-lime,
.game-showcase.accent-green { --showcase-pop: rgba(190,235,93,.48); }
.game-showcase.accent-violet { --showcase-pop: rgba(178,157,255,.48); }
.game-showcase.accent-orange { --showcase-pop: rgba(255,183,113,.5); }
.game-showcase.accent-blue,
.game-showcase.accent-teal { --showcase-pop: rgba(126,193,255,.48); }
.game-showcase.accent-pink,
.game-showcase.accent-red { --showcase-pop: rgba(255,139,183,.46); }

.game-showcase-device {
    position: relative;
    z-index: 2;
    min-height: 400px;
    display: grid;
    place-items: center;
}
.game-device-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(60,68,80,.12);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.orbit-small { width: 260px; height: 260px; }
.orbit-large { width: 365px; height: 365px; border-style: dashed; }
.showcase-phone {
    position: relative;
    z-index: 3;
    width: 178px;
    height: 360px;
    perspective: 1200px;
    transform-style: preserve-3d;
}
.showcase-phone.tilt-left { transform: rotate(-5deg); }
.showcase-phone.tilt-right { transform: rotate(5deg); }
.showcase-frame {
    position: absolute;
    inset: 0;
    padding: 10px;
    border: 2px solid rgba(255,255,255,.18);
    border-radius: 42px;
    background: #11151b;
    box-shadow: 0 24px 50px rgba(10,12,17,.26), inset 0 0 0 2px rgba(255,255,255,.04);
}
.showcase-frame img {
    width: 100%;
    height: 100%;
    border-radius: 32px;
    object-fit: cover;
}
.showcase-island {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 17px;
    width: 78px;
    height: 22px;
    border-radius: 999px;
    background: #07090d;
    transform: translateX(-50%);
}
.showcase-side-button {
    position: absolute;
    z-index: 4;
    width: 4px;
    border-radius: 999px;
    background: #151920;
}
.side-button-one { left: -3px; top: 88px; height: 48px; }
.side-button-two { left: -3px; top: 148px; height: 72px; }
.side-button-three { right: -3px; top: 116px; height: 88px; }
.showcase-phone-shadow {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 22px;
    width: 48%;
    height: 25px;
    border-radius: 50%;
    background: rgba(18,22,28,.15);
    filter: blur(12px);
    transform: translateX(-50%);
}
.game-showcase-copy {
    position: relative;
    z-index: 3;
    padding: 12px 0;
}
.game-title-lockup {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}
.game-title-lockup img {
    width: 58px;
    height: 58px;
    padding: 4px;
    border-radius: 18px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 12px 28px rgba(22,26,33,.1);
}
.game-title-lockup h2 {
    margin: 0;
    font-size: clamp(38px, 4.1vw, 56px);
    line-height: .94;
    letter-spacing: -.052em;
}
.game-showcase-copy .catalog-tags { margin: 0 0 18px 74px; }
.game-showcase-copy > p {
    max-width: 590px;
    margin: 0 0 24px 74px;
    color: #686f78;
    font-size: 15px;
    line-height: 1.78;
}
.game-showcase-copy .store-badges { margin-left: 74px; }

@media (max-width: 1050px) {
    .momentum-showcase { grid-template-columns: 1fr; gap: 20px; }
    .momentum-visual { min-height: 540px; }
    .game-showcase,
    .game-showcase-reverse { grid-template-columns: 1fr; gap: 24px; }
    .game-showcase-reverse .game-showcase-device { order: initial; }
}

@media (max-width: 760px) {
    .momentum-showcase { padding: 72px 0 82px; }
    .momentum-copy h2 { font-size: 50px; }
    .momentum-metrics { grid-template-columns: 1fr 1fr; }
    .momentum-visual { min-height: 400px; }
    .orbit-one { width: 300px; height: 300px; }
    .orbit-two { width: 390px; height: 390px; }
    .momentum-shot { border-width: 4px; border-radius: 20px; }
    .momentum-pop { padding: 8px 10px; font-size: 8px; }
    .game-showcase { min-height: auto; padding: 24px 20px 32px; border-radius: 26px; }
    .game-showcase-device { min-height: 340px; }
    .orbit-small { width: 220px; height: 220px; }
    .orbit-large { width: 305px; height: 305px; }
    .showcase-phone { width: 154px; height: 315px; }
    .showcase-frame { border-radius: 37px; }
    .showcase-frame img { border-radius: 28px; }
    .showcase-island { width: 68px; height: 19px; top: 15px; }
    .game-title-lockup { grid-template-columns: 52px 1fr; gap: 13px; }
    .game-title-lockup img { width: 52px; height: 52px; border-radius: 16px; }
    .game-title-lockup h2 { font-size: 38px; }
    .game-showcase-copy .catalog-tags,
    .game-showcase-copy > p,
    .game-showcase-copy .store-badges { margin-left: 0; }
}

/* ========================================
   V12 — motion, landscape mockups, team grid and scale refinements
   ======================================== */
body { position: relative; }
main, .site-header, .site-footer { position: relative; z-index: 1; }

/* Slow ambient colour fields that move automatically behind every page. */
.ambient-blobs {
    position: fixed;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.ambient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    opacity: .2;
    will-change: transform;
}
.ambient-blob-one {
    width: 430px;
    height: 430px;
    left: -170px;
    top: 14%;
    background: #ff8fba;
    animation: ambientDriftOne 18s ease-in-out infinite alternate;
}
.ambient-blob-two {
    width: 470px;
    height: 470px;
    right: -190px;
    top: 5%;
    background: #78b9ff;
    animation: ambientDriftTwo 22s ease-in-out infinite alternate;
}
.ambient-blob-three {
    width: 390px;
    height: 390px;
    left: 40%;
    bottom: -210px;
    background: #c6ef72;
    opacity: .13;
    animation: ambientDriftThree 20s ease-in-out infinite alternate;
}

/* Header is intentionally taller, while keeping the same dark crystal language. */
.site-header,
.site-header.scrolled {
    width: min(900px, calc(100% - 34px));
    height: 82px;
    padding: 0 28px 0 30px;
    grid-template-columns: 235px 1fr;
    border-radius: 29px;
}
.site-header.scrolled { height: 74px; }
.site-header::before { border-radius: 27px; }
.brand img { width: 134px; max-height: 57px; }
.site-nav { gap: 36px; }

/* The home hero now highlights the actual flagship app icon/logo. */
.hero-main-card {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #dff4a7, #efffd1 48%, #c7e6ff);
}
.hero-main-card > .hero-logo-art {
    width: 82%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 42px;
    object-fit: cover;
    box-shadow: 0 24px 54px rgba(24,28,36,.2);
}

/* Auto-motion for the existing colourful blobs and flagship background circles. */
.hero-blob { will-change: transform; }
.blob-pink { animation: heroBlobPink 10s ease-in-out infinite alternate; }
.blob-blue { animation: heroBlobBlue 13s ease-in-out infinite alternate; }
.momentum-showcase::before { animation: momentumFieldOne 14s ease-in-out infinite alternate; }
.momentum-showcase::after { animation: momentumFieldTwo 17s ease-in-out infinite alternate; }

/* Larger icons with no thick white frame. */
.hero-icon,
.cloud-icon {
    width: 94px;
    height: 94px;
    padding: 0;
    border: 0;
    border-radius: 27px;
    background: transparent;
    box-shadow: 0 18px 38px rgba(30,20,15,.16);
}
.momentum-title-lockup img {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 21px;
    background: transparent;
}
.game-title-lockup {
    grid-template-columns: 72px 1fr;
    gap: 18px;
}
.game-title-lockup img {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 21px;
    background: transparent;
    box-shadow: 0 14px 30px rgba(22,26,33,.12);
}
.game-showcase-copy .catalog-tags,
.game-showcase-copy > p,
.game-showcase-copy .store-badges { margin-left: 90px; }

/* About heading now uses the same two-column section structure as the rest of the site. */
.values-section .section-heading { align-items: end; }

/* Team section replacing the previous mission/vision panel. */
.team-section { padding: 12px 0 110px; }
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.team-card {
    min-height: 330px;
    padding: 16px;
    border: 1px solid rgba(30,36,45,.07);
    border-radius: 30px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 16px;
    background: rgba(255,255,255,.74);
    box-shadow: 0 18px 42px rgba(27,31,39,.08);
    overflow: hidden;
}
.team-avatar {
    position: relative;
    min-height: 235px;
    border-radius: 23px;
    overflow: hidden;
    background: linear-gradient(150deg, #cce5ff, #f5d6ea);
}
.team-card-2 .team-avatar,
.team-card-6 .team-avatar { background: linear-gradient(150deg, #e8ddff, #cfeeff); }
.team-card-3 .team-avatar,
.team-card-7 .team-avatar { background: linear-gradient(150deg, #e7f6bb, #cde9ff); }
.team-card-4 .team-avatar,
.team-card-8 .team-avatar { background: linear-gradient(150deg, #ffd9e6, #ffeab8); }
.avatar-face {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 55px;
    width: 92px;
    height: 112px;
    border-radius: 46% 46% 42% 42%;
    background: #f1bd92;
    transform: translateX(-50%);
    box-shadow: inset 0 -8px 0 rgba(167,87,54,.08);
}
.avatar-hair {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 41px;
    width: 102px;
    height: 61px;
    border-radius: 56px 56px 26px 30px;
    background: #2f2b31;
    transform: translateX(-50%) rotate(-2deg);
}
.avatar-body {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -46px;
    width: 190px;
    height: 145px;
    border-radius: 90px 90px 25px 25px;
    background: linear-gradient(145deg, #4f5bff, #8d79ff);
    transform: translateX(-50%);
}
.team-card-2 .avatar-body,
.team-card-6 .avatar-body { background: linear-gradient(145deg, #ff7fae, #ffae6e); }
.team-card-3 .avatar-body,
.team-card-7 .avatar-body { background: linear-gradient(145deg, #42bda8, #75d9c6); }
.team-card-4 .avatar-body,
.team-card-8 .avatar-body { background: linear-gradient(145deg, #242a33, #5f6978); }
.team-card-copy { padding: 2px 5px 7px; }
.team-card-copy strong { display: block; font-size: 17px; }
.team-card-copy span { display: block; margin-top: 5px; color: #737a83; font-size: 12px; }

/* Games page uses the supplied iPhone 17 Pro Max landscape frame. */
.games-hero { padding-top: 195px; }
.game-showcase {
    min-height: 475px;
    padding: 44px 52px;
}
.game-showcase-device {
    min-height: 365px;
    display: grid;
    place-items: center;
}
.device-soft-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
}
.device-soft-shape-a {
    width: 250px;
    height: 250px;
    left: 3%;
    bottom: 2%;
    background: var(--showcase-pop, rgba(188,221,255,.45));
}
.device-soft-shape-b {
    width: 140px;
    height: 140px;
    right: 4%;
    top: 4%;
    border: 2px solid rgba(255,255,255,.7);
    background: rgba(255,255,255,.08);
}
.landscape-mockup {
    position: relative;
    z-index: 3;
    width: min(100%, 520px);
    aspect-ratio: 1240 / 670;
    transform-origin: center;
    filter: drop-shadow(0 25px 28px rgba(18,22,29,.22));
}
.mockup-tilt-left { transform: rotate(-4deg); }
.mockup-tilt-right { transform: rotate(4deg); }
.landscape-screen {
    position: absolute;
    z-index: 1;
    left: 7.1%;
    top: 10.2%;
    width: 85.5%;
    height: 80.7%;
    overflow: hidden;
    border-radius: 9% / 16%;
    clip-path: polygon(1.1% 2%, 99% 0, 99% 96%, 1.1% 100%);
    background: #111;
}
.landscape-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.035);
}
.landscape-frame {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Wider footer, closer to the reference site's horizontal footprint. */
.site-footer.section-shell {
    width: min(1540px, calc(100% - 40px));
    max-width: none;
    padding: 42px 48px;
}
.footer-top { grid-template-columns: 1.15fr .55fr 1fr; }

@keyframes ambientDriftOne {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(120px, -50px, 0) scale(1.14); }
    100% { transform: translate3d(45px, 130px, 0) scale(.94); }
}
@keyframes ambientDriftTwo {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-130px, 90px, 0) scale(.92); }
    100% { transform: translate3d(-45px, 190px, 0) scale(1.13); }
}
@keyframes ambientDriftThree {
    0% { transform: translate3d(0, 0, 0) scale(.94); }
    50% { transform: translate3d(-110px, -120px, 0) scale(1.12); }
    100% { transform: translate3d(130px, -60px, 0) scale(1); }
}
@keyframes heroBlobPink {
    from { transform: translate3d(0, 0, 0) rotate(-18deg) scale(1); }
    to { transform: translate3d(38px, -24px, 0) rotate(-8deg) scale(1.08); }
}
@keyframes heroBlobBlue {
    from { transform: translate3d(0, 0, 0) rotate(20deg) scale(1); }
    to { transform: translate3d(-44px, 32px, 0) rotate(8deg) scale(.93); }
}
@keyframes momentumFieldOne {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(70px, -32px, 0) scale(1.08); }
}
@keyframes momentumFieldTwo {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-65px, -45px, 0) scale(.92); }
}

@media (max-width: 1050px) {
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .game-showcase-device { min-height: 410px; }
    .landscape-mockup { width: min(92%, 620px); }
}

@media (max-width: 760px) {
    .site-header,
    .site-header.scrolled {
        height: 68px;
        grid-template-columns: 1fr auto;
        padding: 0 16px 0 20px;
    }
    .site-header.scrolled { height: 64px; }
    .brand img { width: 112px; }
    .hero-icon,
    .cloud-icon { width: 70px; height: 70px; border-radius: 20px; }
    .hero-main-card > .hero-logo-art { width: 84%; border-radius: 30px; }
    .team-grid { grid-template-columns: 1fr; }
    .team-card { min-height: 315px; }
    .game-showcase { padding: 26px 18px 34px; }
    .game-showcase-device { min-height: 290px; }
    .landscape-mockup { width: 100%; }
    .game-title-lockup { grid-template-columns: 60px 1fr; gap: 14px; }
    .game-title-lockup img { width: 60px; height: 60px; border-radius: 18px; }
    .game-showcase-copy .catalog-tags,
    .game-showcase-copy > p,
    .game-showcase-copy .store-badges { margin-left: 0; }
    .site-footer.section-shell { width: calc(100% - 24px); padding: 34px 25px; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-blob,
    .hero-blob,
    .momentum-showcase::before,
    .momentum-showcase::after { animation: none !important; }
}

/* =========================================================
   V14 — supplied game mockups, sticky header and team capsule
   ========================================================= */

/* Keep the navigation fixed while scrolling and improve readability. */
.site-header,
.site-header.scrolled {
    position: fixed !important;
    z-index: 1200 !important;
    left: 50%;
    width: min(820px, calc(100% - 34px));
    height: 78px;
    padding-inline: 24px;
    transform: translateX(-50%);
}
.site-header.scrolled {
    top: 12px;
    height: 72px;
}
.site-nav { gap: 34px; }
.site-nav a {
    font-size: 15px;
    font-weight: 700;
}
.site-nav a.active::after { bottom: -12px; }
.brand img { width: 116px; max-height: 50px; }

/* Supplied ready-made landscape mockups. */
.mockup-game-list {
    display: grid;
    gap: 30px;
}
.mockup-game-card {
    --mockup-pop: rgba(190,235,93,.42);
    position: relative;
    min-height: 520px;
    padding: 34px 42px;
    border: 1px solid rgba(26,32,40,.06);
    border-radius: 38px;
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    align-items: center;
    gap: 34px;
    overflow: hidden;
    background: rgba(255,255,255,.88);
    box-shadow: 0 18px 48px rgba(35,29,22,.075);
}
.mockup-game-card-reverse { grid-template-columns: .94fr 1.06fr; }
.mockup-game-card-reverse .mockup-game-visual { order: 2; }
.mockup-game-card.accent-lime,
.mockup-game-card.accent-green { --mockup-pop: rgba(190,235,93,.5); }
.mockup-game-card.accent-violet { --mockup-pop: rgba(178,157,255,.48); }
.mockup-game-card.accent-orange { --mockup-pop: rgba(255,183,113,.5); }
.mockup-game-card.accent-blue,
.mockup-game-card.accent-teal { --mockup-pop: rgba(126,193,255,.48); }
.mockup-game-card.accent-pink,
.mockup-game-card.accent-red { --mockup-pop: rgba(255,139,183,.46); }

.mockup-game-visual {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center;
}
.mockup-pop {
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: var(--mockup-pop);
    filter: blur(1px);
    opacity: .7;
}
.mockup-pop-a { left: -48px; bottom: 2px; }
.mockup-pop-b {
    right: -20px;
    top: 12px;
    width: 118px;
    height: 118px;
    opacity: .35;
}
.supplied-game-mockup {
    position: relative;
    z-index: 2;
    width: min(100%, 650px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 28px rgba(20,24,30,.12));
}
.mockup-game-card:nth-child(odd) .supplied-game-mockup { transform: rotate(-1.4deg); }
.mockup-game-card:nth-child(even) .supplied-game-mockup { transform: rotate(1.4deg); }

.mockup-game-copy { position: relative; z-index: 3; }
.mockup-game-copy .game-title-lockup {
    display: grid;
    grid-template-columns: 76px 1fr;
    align-items: center;
    gap: 18px;
}
.mockup-game-copy .game-title-lockup img {
    width: 76px;
    height: 76px;
    padding: 0;
    border: 0;
    border-radius: 19px;
    object-fit: cover;
    background: transparent;
    box-shadow: none;
}
.mockup-game-copy .game-title-lockup h2 {
    margin: 0;
    font-size: clamp(40px,4.1vw,58px);
    line-height: .94;
    letter-spacing: -.055em;
}
.mockup-game-copy .catalog-tags { margin: 20px 0 18px; }
.mockup-game-copy > p {
    max-width: 540px;
    margin: 0 0 26px;
    color: #656c75;
    font-size: 15px;
    line-height: 1.72;
}

/* Correctly proportioned, official-looking store badges. */
.store-badges { gap: 12px; }
.store-badge {
    min-width: 148px;
    min-height: 52px;
    padding: 8px 14px 8px 12px;
    border: 1px solid rgba(21,27,34,.22);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #11161c;
    background: #fff;
    box-shadow: none;
}
.store-badge:hover {
    border-color: rgba(21,27,34,.4);
    background: #fff;
    transform: translateY(-1px);
}
.store-badge-icon {
    width: 30px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.store-badge-icon svg { width: 100%; height: 100%; }
.apple-mark { width: 27px !important; height: 29px !important; fill: currentColor; }
.store-badge-copy { display: grid; gap: 0; text-align: left; }
.store-badge-copy small {
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .015em;
}
.store-badge-copy strong {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.025em;
    text-transform: none;
}

/* About collage images must remain fully visible. */
.about-img-shell {
    position: absolute;
    z-index: 3;
    padding: 8px;
    overflow: hidden;
    border-radius: 42px;
    background: rgba(255,255,255,.9);
    box-shadow: var(--shadow);
}
.about-img-shell-a {
    left: 68px;
    top: 34px;
    width: 300px;
    height: 330px;
    transform: rotate(-4deg);
}
.about-img-shell-b {
    right: 18px;
    bottom: 24px;
    width: 300px;
    height: 300px;
    transform: rotate(5deg);
}
.about-img-shell .about-img,
.about-img-shell .about-img-a,
.about-img-shell .about-img-b {
    position: static;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 34px;
    object-fit: contain;
    object-position: center;
    background: #eef3f7;
    box-shadow: none;
    transform: none;
}
.about-work-heading {
    grid-template-columns: 1.15fr .85fr;
    align-items: end;
}
.about-work-heading > div { min-width: 0; }
.about-work-heading h2 { margin-bottom: 0; }

/* One wide team portrait replaces individual employee cards. */
.team-group-section { padding: 12px 0 110px; }
.team-group-heading {
    max-width: 900px;
    margin: 0 auto 52px;
    text-align: center;
}
.team-group-heading h2 {
    margin: 22px 0 18px;
    font-size: clamp(56px,6vw,86px);
    line-height: .92;
    letter-spacing: -.06em;
}
.team-group-heading p {
    max-width: 660px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}
.team-group-photo {
    position: relative;
    width: min(920px, 100%);
    min-height: 470px;
    margin: 0 auto;
    border: 1px dashed rgba(36,45,56,.2);
    border-radius: 46% / 34%;
    display: grid;
    place-content: end center;
    gap: 7px;
    padding: 38px;
    overflow: hidden;
    color: rgba(25,32,40,.64);
    text-align: center;
    background:
        radial-gradient(circle at 20% 25%, rgba(255,119,168,.19), transparent 32%),
        radial-gradient(circle at 82% 28%, rgba(101,168,255,.2), transparent 34%),
        linear-gradient(180deg,#f7f8fa,#eceff3);
}
.team-group-photo > strong { position: relative; z-index: 2; font-size: 13px; letter-spacing: .13em; }
.team-group-photo > span { position: relative; z-index: 2; font-size: 12px; }
.team-placeholder-people {
    position: absolute;
    inset: 38px 70px 82px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 10px;
}
.team-placeholder-person {
    position: relative;
    width: 58px;
    height: 150px;
    border-radius: 32px 32px 22px 22px;
    background: rgba(91,102,116,.16);
}
.team-placeholder-person::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -31px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(91,102,116,.22);
    transform: translateX(-50%);
}
.team-placeholder-person:nth-child(3n) { height: 170px; }
.team-placeholder-person:nth-child(4n) { height: 135px; }
.team-placeholder-person:nth-child(2n) { background: rgba(101,168,255,.18); }
.team-placeholder-person:nth-child(5n) { background: rgba(255,119,168,.18); }

/* Footer legal links match the email hierarchy. */
.footer-bottom div a {
    color: rgba(244,247,251,.88);
    font-size: 14px;
    font-weight: 700;
}
.footer-bottom div a:hover { color: #fff; }

@media (max-width: 1000px) {
    .mockup-game-card,
    .mockup-game-card-reverse { grid-template-columns: 1fr; }
    .mockup-game-card-reverse .mockup-game-visual { order: initial; }
    .mockup-game-visual { min-height: 370px; }
    .about-img-shell-a { left: 5%; }
    .about-img-shell-b { right: 2%; }
}

@media (max-width: 760px) {
    .site-header,
    .site-header.scrolled {
        width: calc(100% - 22px);
        height: 68px;
        padding-inline: 17px;
    }
    .site-header.scrolled { height: 64px; }
    .site-nav {
        top: 76px;
        gap: 0;
    }
    .site-nav a { font-size: 14px; }
    .mockup-game-card {
        min-height: auto;
        padding: 22px 18px 30px;
        border-radius: 28px;
    }
    .mockup-game-visual { min-height: 270px; }
    .mockup-game-copy .game-title-lockup { grid-template-columns: 62px 1fr; gap: 14px; }
    .mockup-game-copy .game-title-lockup img { width: 62px; height: 62px; border-radius: 16px; }
    .mockup-game-copy .game-title-lockup h2 { font-size: 38px; }
    .store-badge { min-width: 142px; }
    .about-img-shell-a { left: 5%; width: 260px; height: 285px; }
    .about-img-shell-b { right: 2%; width: 245px; height: 250px; }
    .about-work-heading { grid-template-columns: 1fr; }
    .team-group-photo {
        min-height: 360px;
        border-radius: 42% / 28%;
        padding: 28px 20px;
    }
    .team-placeholder-people { inset: 52px 24px 75px; gap: 5px; }
    .team-placeholder-person { width: 34px; height: 105px; }
    .team-placeholder-person::before { top: -22px; width: 38px; height: 38px; }
    .footer-bottom div { flex-wrap: wrap; }
}

/* =========================================================
   V15 — transparent mockups, footer address and hidden team
   ========================================================= */

/* Transparent supplied mockups: only the device remains visible. */
.mockup-game-visual {
    overflow: visible;
    background: transparent;
}
.supplied-game-mockup {
    width: min(112%, 720px);
    max-height: 430px;
    object-fit: contain;
    filter: drop-shadow(0 28px 30px rgba(20,24,30,.18));
}

/* About hero now uses complete square game icons instead of cropped gameplay art. */
.about-img-shell {
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}
.about-img-shell-a {
    left: 92px;
    top: 58px;
    width: 250px;
    height: 250px;
    border-radius: 42px;
}
.about-img-shell-b {
    right: 42px;
    bottom: 42px;
    width: 230px;
    height: 230px;
    border-radius: 40px;
}
.about-img-shell .about-img,
.about-img-shell .about-img-a,
.about-img-shell .about-img-b {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: inherit;
    object-fit: contain;
    background: transparent;
    box-shadow: 0 22px 48px rgba(28,32,38,.16);
}

/* Copyright and office address remain grouped on the left. */
.footer-copyright-stack {
    display: grid !important;
    gap: 7px !important;
    max-width: 660px;
}
.footer-copyright-stack address {
    margin: 0;
    color: rgba(244,247,251,.68);
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.55;
}
.footer-legal-links {
    display: flex !important;
    align-items: center;
    gap: 18px !important;
}

@media (max-width: 1000px) {
    .supplied-game-mockup { width: min(100%, 680px); }
    .about-img-shell-a { left: 8%; }
    .about-img-shell-b { right: 5%; }
}

@media (max-width: 760px) {
    .supplied-game-mockup {
        width: 108%;
        max-height: 300px;
    }
    .about-img-shell-a {
        left: 7%;
        top: 54px;
        width: 190px;
        height: 190px;
    }
    .about-img-shell-b {
        right: 5%;
        bottom: 44px;
        width: 170px;
        height: 170px;
    }
    .footer-copyright-stack { max-width: 100%; }
    .footer-copyright-stack address { font-size: 10px; }
}

/* =========================================================
   V20 — store badge icon cleanup only
   ========================================================= */
.store-badge-icon {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.store-badge-icon img {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
    opacity: 1 !important;
}

.store-badge-google .store-badge-icon img {
    width: 27px !important;
    height: 27px !important;
}

.store-badge-apple .store-badge-icon img {
    width: 28px !important;
    height: 28px !important;
}


/* =========================================================
   V24 — targeted content typography and metric refinements
   No header, footer, mockup, layout or animation changes.
   ========================================================= */

/* Featured release lockup: cleaner hierarchy and stronger studio typography. */
.momentum-title-lockup div {
    gap: 4px;
}
.momentum-title-lockup span {
    color: #15171c;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.018em;
}
.momentum-title-lockup small {
    color: #727985;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: .105em;
}

/* Featured performance cards. */
.momentum-metrics strong {
    display: flex;
    align-items: center;
    gap: 8px;
}
.momentum-metrics strong em {
    color: #f4ad18;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .06em;
    transform: translateY(1px);
}

/* Games catalogue: use concise short names and keep titles on one line on desktop. */
.mockup-game-copy .game-title-lockup {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 15px;
}
.mockup-game-copy .game-title-lockup img {
    width: 64px;
    height: 64px;
    border-radius: 17px;
}
.mockup-game-copy .game-title-lockup h2 {
    min-width: 0;
    font-size: clamp(26px, 2.15vw, 36px);
    line-height: 1;
    letter-spacing: -.045em;
    white-space: nowrap;
}
.game-tile h3 {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .mockup-game-copy .game-title-lockup {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 12px;
    }
    .mockup-game-copy .game-title-lockup img {
        width: 54px;
        height: 54px;
        border-radius: 15px;
    }
    .mockup-game-copy .game-title-lockup h2 {
        font-size: clamp(23px, 7vw, 32px);
        white-space: normal;
    }
    .momentum-metrics strong em {
        font-size: 11px;
    }
}

/* =========================================================
   V25 — featured title size reduction + selected mockup/icon swaps
   Only the requested homepage title scale is adjusted.
   ========================================================= */
.momentum-copy h2 {
    max-width: 560px;
    font-size: clamp(42px, 4.55vw, 68px);
    line-height: .94;
    letter-spacing: -.055em;
}

@media (max-width: 760px) {
    .momentum-copy h2 {
        font-size: clamp(34px, 9vw, 50px);
        line-height: .95;
    }
}

/* V26 — Legal pages: approved Privacy Policy + Terms of Service presentation */
.legal-page .updated {
    margin: -18px 0 32px;
    color: var(--muted);
    font-size: 13px;
}
.legal-page .updated strong { color: var(--ink); }
.legal-content .legal-lead {
    font-size: 17px;
    line-height: 1.7;
    color: #303640;
}
.legal-content h4 {
    margin: 22px 0 8px;
    font-size: 15px;
    letter-spacing: -.01em;
}
.legal-content .toc {
    margin: 30px 0 0;
    padding: 24px 26px;
    border: 1px solid rgba(48,58,72,.12);
    border-radius: 20px;
    background: #f5f7fa;
}
.legal-content .toc h2 {
    margin: 0 0 12px !important;
    color: #565eff;
    font-size: 13px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.legal-content .toc ol {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 34px;
}
.legal-content .toc li {
    margin-bottom: 5px;
    font-size: 13.5px;
}
.legal-content .toc a { text-decoration: none; }
.legal-content .toc a:hover { text-decoration: underline; }
.legal-content .callout {
    margin: 22px 0;
    padding: 20px 24px;
    border-left: 4px solid #565eff;
    border-radius: 18px;
    background: #f3f5f8;
}
.legal-content .callout h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 15px;
}
.legal-content .callout p {
    margin: 0;
    color: #303640;
}
.legal-content .callout p + p { margin-top: 10px; }
.legal-content .table-wrap {
    overflow-x: auto;
    margin: 18px 0;
    border: 1px solid rgba(48,58,72,.12);
    border-radius: 16px;
}
.legal-content table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 13.5px;
}
.legal-content th,
.legal-content td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(48,58,72,.12);
    color: var(--muted);
    line-height: 1.6;
    text-align: left;
    vertical-align: top;
}
.legal-content th {
    color: var(--ink);
    background: #f7f8fa;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.legal-content tr:last-child td { border-bottom: 0; }
.legal-content .chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 14px 0;
    padding: 0 !important;
    list-style: none;
}
.legal-content .chip-list li {
    margin: 0;
    padding: 8px 14px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 999px;
    background: #f7f8fa;
    font-size: 13px;
}
.legal-content .rights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 20px 0;
}
.legal-content .rights-grid article {
    padding: 20px 22px;
    border: 1px solid rgba(48,58,72,.12);
    border-radius: 18px;
    background: #f7f8fa;
}
.legal-content .rights-grid h4 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 14.5px;
}
.legal-content .rights-grid p {
    margin: 0;
    font-size: 13.5px;
}
.legal-content .contact-block {
    margin-top: 20px;
    padding: 26px;
    border: 1px solid rgba(48,58,72,.12);
    border-radius: 22px;
    background: #f7f8fa;
}
.legal-content .contact-block p { margin: 0 0 6px; }
.legal-content .signoff {
    display: grid;
    gap: 8px;
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid rgba(0,0,0,.08);
    color: #59616c;
    font-size: 14px;
}
.legal-content .signoff strong { color: var(--ink); }

@media (max-width: 760px) {
    .legal-content .toc ol { columns: 1; }
    .legal-content .rights-grid { grid-template-columns: 1fr; }
    .legal-page .updated { margin-top: -10px; line-height: 1.65; }
}

/* =========================================================
   V27 — Visual/Text Audit: minimal premium consolidation layer
   Keeps existing layout architecture but removes visual noise.
   ========================================================= */
:root {
    --ink: #0e0e10;
    --muted: #6b6b72;
    --paper: #fbfaf8;
    --white: #ffffff;
    --surface: #ffffff;
    --line: rgba(14,14,16,.08);
    --accent: #654dff;
    --accent-2: #b7ef4a;
    --yellow: var(--accent-2);
    --blue: var(--accent);
    --pink: var(--accent);
    --lime: var(--accent-2);
    --violet: var(--accent);
    --cyan: var(--accent);
    --red: var(--accent);
    --orange: var(--accent-2);
    --r-sm: 12px;
    --r-md: 20px;
    --r-lg: 28px;
    --r-pill: 999px;
    --shadow-soft: 0 14px 34px rgba(14,14,16,.07);
    --shadow: 0 24px 62px rgba(14,14,16,.10);
}

body { background: var(--paper); }
::selection { color: #fff; background: var(--accent); }

/* One subtle ambient field instead of multiple competing blobs. */
.ambient-blobs { opacity: .22; }
.ambient-blob-one {
    width: 520px;
    height: 520px;
    background: rgba(101,77,255,.08);
    filter: blur(72px);
}
.ambient-blob-two,
.ambient-blob-three { display: none !important; }

/* Keep the glass header, but allow the mobile menu to escape its bounds. */
.site-header,
.site-header.scrolled {
    overflow: visible;
    border-radius: var(--r-md);
}
.site-header::before { border-radius: var(--r-md); }
.site-nav a.active::after { background: var(--accent); box-shadow: 0 0 10px rgba(101,77,255,.42); }

.section-kicker { color: var(--accent); font-weight: 700; }
.section-kicker::before { background: var(--accent-2); }
.section-title-pill {
    border-radius: var(--r-pill);
    background: rgba(101,77,255,.07);
}

.button,
.contact-form input,
.contact-form textarea { border-radius: var(--r-sm); }
.button { font-weight: 700; }
.button-dark {
    border-color: transparent;
    color: #fff;
    background: var(--ink);
    box-shadow: 0 12px 28px rgba(14,14,16,.14);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.button-dark::before { display: none; }
.button-dark:hover { color: #fff; background: var(--accent); box-shadow: 0 14px 30px rgba(101,77,255,.22); }
.button-light { border-color: rgba(255,255,255,.18); color: #fff; background: rgba(255,255,255,.10); }
.button-light:hover { background: rgba(255,255,255,.16); }
.text-link { font-weight: 700; }

/* Hero: fewer decorative elements, consistent geometry, calmer spacing. */
.home-hero::before {
    width: 440px;
    height: 440px;
    background: radial-gradient(circle,rgba(101,77,255,.12),rgba(101,77,255,.04) 55%,transparent 72%);
    opacity: 1;
    filter: blur(18px);
}
.home-hero::after { display: none; }
.hero-copy h1 span,
.games-hero-copy h1 span,
.about-copy h1 span { color: var(--accent); }
.hero-copy p,
.games-hero-copy p,
.about-copy p,
.contact-intro p { color: var(--muted); }
.hero-main-card {
    right: 34px;
    bottom: 28px;
    width: 410px;
    height: 455px;
    border-radius: var(--r-lg);
    transform: none;
}
.hero-main-card > img { border-radius: var(--r-md); }
.main-card-label { border-radius: var(--r-sm); }
.blob-pink {
    width: 280px;
    height: 280px;
    left: 16px;
    top: 88px;
    border-radius: 50%;
    background: rgba(101,77,255,.12);
    filter: blur(16px);
    transform: none;
}
.blob-blue { display: none; }
.hero-sticker {
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.sticker-b,
.sticker-c,
.hero-spark { display: none !important; }
.hero-icon {
    width: 72px;
    height: 72px;
    padding: 4px;
    border-width: 1px;
    border-radius: var(--r-md);
    transform: none !important;
    box-shadow: var(--shadow-soft);
}
.hero-icon-b { display: none !important; }
.hero-icon-a { left: 42px; top: 150px; }
.hero-icon-c { right: 22px; top: 92px; }

.hero-stats { gap: 14px; }
.stat-card,
.stat-yellow,
.stat-blue,
.stat-pink,
.stat-green {
    min-height: 108px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: none;
}
.stat-card strong { color: var(--ink); }
.stat-card:nth-child(2) strong { color: var(--accent); }
.stat-card:nth-child(4) strong { color: #5e8318; }
.stat-card span { color: var(--muted); }

/* Featured game becomes the one strong dark moment on the page. */
.momentum-showcase {
    min-height: 620px;
    margin-top: 60px;
    margin-bottom: 90px;
    padding: 58px 60px;
    border-radius: var(--r-lg);
    grid-template-columns: 1.08fr .92fr;
    gap: 54px;
    color: #fff;
    background: var(--ink);
    overflow: hidden;
}
.momentum-showcase::before {
    left: auto;
    right: -130px;
    top: -150px;
    width: 420px;
    height: 420px;
    background: rgba(101,77,255,.18);
    filter: blur(34px);
}
.momentum-showcase::after { display: none; }
.momentum-visual { order: 1; min-height: 500px; }
.momentum-copy { order: 2; }
.momentum-title-lockup span,
.momentum-copy h2 { color: #fff; }
.momentum-title-lockup small,
.momentum-copy > p,
.momentum-metrics span { color: rgba(255,255,255,.62); }
.momentum-title-lockup img { border-radius: var(--r-sm); box-shadow: none; }
.momentum-metrics div {
    border-color: rgba(255,255,255,.10);
    border-radius: var(--r-md);
    background: rgba(255,255,255,.06);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.momentum-shot {
    border-width: 3px;
    border-color: rgba(255,255,255,.14);
    border-radius: var(--r-md);
    box-shadow: 0 22px 45px rgba(0,0,0,.24);
}
.momentum-shot:hover { transform: translateY(-3px) rotate(0deg); }
.momentum-orbit,
.momentum-glow,
.momentum-pop { display: none !important; }
.momentum-showcase .text-link { color: #fff; }
.momentum-showcase .store-badges { margin: 4px 0 20px; }
.rating-stars { display: inline-flex; gap: 1px; color: #f3b11b; font-style: normal; }
.rating-stars i {
    position: relative;
    overflow: hidden;
    width: .5em;
    color: #f3b11b;
    font-style: normal;
    white-space: nowrap;
}

/* One neutral card language for studio principles. */
.mood-section { padding-top: 54px; padding-bottom: 90px; }
.mood-grid { grid-auto-rows: 250px; gap: 14px; }
.mood-card,
.mood-red,
.mood-violet,
.mood-cyan,
.mood-lime,
.value-card,
.value-yellow,
.value-pink,
.value-blue,
.detail-principles article,
.detail-principles article:nth-child(1),
.detail-principles article:nth-child(2),
.detail-principles article:nth-child(3) {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    background: var(--surface);
    box-shadow: none;
}
.mood-card i { display: none; }
.mood-card p,
.value-card p,
.detail-principles p { color: var(--muted); }
.play-principles { display: none !important; }

.final-cta {
    min-height: 360px;
    margin-bottom: 90px;
    padding: 64px;
    border-radius: var(--r-lg);
    color: #fff;
    background: var(--accent);
}
.final-cta h2 { margin: 16px 0 16px; max-width: 760px; }
.final-cta p { max-width: 620px; margin: 0 0 28px; color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.7; }
.cta-bubble { display: none !important; }

/* Games: clean icon matrix and neutral catalogue cards. */
.games-hero { min-height: 620px; }
.games-icon-cloud { display: none !important; }
.games-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 92px);
    justify-content: end;
    gap: 16px;
}
.games-icon-grid img {
    width: 92px;
    height: 92px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    object-fit: cover;
    background: #fff;
    box-shadow: var(--shadow-soft);
}
.mockup-game-list { gap: 22px; }
.mockup-game-card,
.mockup-game-card.accent-lime,
.mockup-game-card.accent-green,
.mockup-game-card.accent-violet,
.mockup-game-card.accent-orange,
.mockup-game-card.accent-blue,
.mockup-game-card.accent-teal,
.mockup-game-card.accent-pink,
.mockup-game-card.accent-red {
    --mockup-pop: rgba(101,77,255,.10);
    min-height: 500px;
    padding: 34px 42px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: none;
}
.mockup-pop { opacity: .55; }
.mockup-pop-b { display: none; }
.supplied-game-mockup { filter: drop-shadow(0 20px 24px rgba(14,14,16,.10)); }
.mockup-game-card:nth-child(odd) .supplied-game-mockup,
.mockup-game-card:nth-child(even) .supplied-game-mockup { transform: none; }
.mockup-game-copy .game-title-lockup h2,
.mockup-game-copy .game-title-lockup h3 {
    min-width: 0;
    margin: 0;
    font-size: clamp(26px,2.15vw,36px);
    line-height: 1;
    letter-spacing: -.045em;
    white-space: nowrap;
}
.mockup-game-copy > p { color: var(--muted); }
.catalog-tags span { border-color: var(--line); color: var(--muted); background: #f7f7f8; }
.game-detail-link { margin-top: 20px; color: var(--accent); }

/* Store badges: image-only, compact and actually clickable. */
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.store-badge.store-badge-full-image {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.store-badge.store-badge-full-image:hover { background: transparent; transform: translateY(-1px); }
.store-badge.store-badge-full-image img { display: block; width: 142px; max-width: 100%; height: auto; object-fit: contain; }

/* About and contact: keep content, remove decorative self-praise/noise. */
.about-shape { border-radius: 50%; background: rgba(101,77,255,.10) !important; filter: blur(10px); }
.shape-blue,
.about-note { display: none !important; }
.about-img-shell { border-radius: var(--r-lg); box-shadow: var(--shadow-soft); }
.value-card { min-height: 270px; }
.value-card h3 { margin-top: 78px; }
.contact-form {
    border-radius: var(--r-lg);
    box-shadow: none;
}
.contact-form::before { display: none; }
.contact-chip { border-radius: var(--r-md); }
.field-error { color: #b42318; font-size: 11px; line-height: 1.4; }

/* Detail pages: neutral base with the game artwork providing the colour. */
.game-detail,
.game-detail-lime,
.game-detail-green,
.game-detail-violet,
.game-detail-orange,
.game-detail-blue,
.game-detail-teal,
.game-detail-red,
.game-detail-pink {
    --detail-bg: #f4f3f1;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: var(--detail-bg);
}
.screenshot-card { border-radius: var(--r-md); }
.detail-principles h2,
.detail-principles h3 { margin: 70px 0 10px; font-size: 24px; letter-spacing: -.035em; }

/* Footer and legal surfaces use the same radius language. */
.site-footer,
.legal-content,
.legal-content .toc,
.legal-content .callout,
.legal-content .contact-block,
.legal-content .rights-grid article { border-radius: var(--r-lg); }

@media (max-width: 980px) {
    .games-icon-grid { justify-content: start; grid-template-columns: repeat(4, 78px); }
    .games-icon-grid img { width: 78px; height: 78px; }
    .momentum-showcase { grid-template-columns: 1fr; padding: 48px; }
    .momentum-visual { order: 2; }
    .momentum-copy { order: 1; }
}

@media (max-width: 760px) {
    .site-header,
    .site-header.scrolled { overflow: visible; }
    body.menu-open { overflow: hidden; }
    .site-nav.open { z-index: 5; }
    .home-hero { padding-top: 128px; }
    .hero-main-card { width: min(82vw, 390px); height: 420px; right: 5%; }
    .hero-icon-a { left: 4%; }
    .hero-icon-c { right: 2%; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .momentum-showcase { margin-inline: 12px; width: calc(100% - 24px); padding: 42px 24px 48px; }
    .momentum-visual { min-height: 390px; }
    .games-icon-grid { grid-template-columns: repeat(4, 62px); gap: 10px; }
    .games-icon-grid img { width: 62px; height: 62px; border-radius: 16px; }
    .mockup-game-card { border-radius: var(--r-md); padding: 24px 20px; }
    .mockup-game-copy .game-title-lockup h2,
    .mockup-game-copy .game-title-lockup h3 { font-size: clamp(23px,7vw,32px); white-space: normal; }
    .final-cta { padding: 50px 28px; border-radius: var(--r-md); }
    .store-badge.store-badge-full-image img { width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ========================================
   V11 — requested content and layout polish
   ======================================== */

/* Home hero heading: tighten the two-line lockup so the spacing feels cleaner. */
.hero-copy h1 {
    max-width: 6.15ch;
    margin-bottom: 18px;
    line-height: .91;
    letter-spacing: -.08em;
}
.hero-copy h1 .hero-highlight {
    display: block;
    margin-top: 6px;
}
.stat-card:nth-child(3) strong { color: var(--accent); }
.stat-card:nth-child(3) span {
    max-width: none;
    font-size: 12px;
}

/* Four rules section: restore proper card widths and add a cleaner card identity. */
.mood-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(250px, auto);
    gap: 18px;
}
.mood-card {
    min-height: 250px;
    padding: 28px 24px;
}
.mood-card::after {
    right: -30px;
    bottom: -32px;
    width: 150px;
    height: 150px;
    border-width: 2px;
}
.mood-card span {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(101,77,255,.12);
    border-radius: 50%;
    color: var(--accent);
    background: #f4f1ff;
    font-size: 12px;
    font-weight: 800;
}
.mood-card h3 {
    margin: 72px 0 12px;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: .98;
}
.mood-card p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.65;
}

/* Games hero: circular icon cluster with a bit more personality. */
.games-icon-grid {
    grid-template-columns: repeat(4, 88px);
    gap: 18px 20px;
}
.games-icon-grid img {
    width: 88px;
    height: 88px;
    padding: 5px;
    border: 1px solid rgba(26, 28, 32, .08);
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #f5f4ff 100%);
    box-shadow: 0 12px 30px rgba(18,18,18,.09);
}
.games-icon-grid img:nth-child(1),
.games-icon-grid img:nth-child(3),
.games-icon-grid img:nth-child(6),
.games-icon-grid img:nth-child(8) {
    transform: translateY(-8px);
}
.games-icon-grid img:nth-child(2),
.games-icon-grid img:nth-child(4),
.games-icon-grid img:nth-child(5),
.games-icon-grid img:nth-child(7) {
    transform: translateY(8px);
}
.mockup-game-copy > .store-badges { margin-top: 4px; }
.mockup-game-copy > p { margin-bottom: 18px; }

/* Footer: rebalance columns and tighten the visual structure. */
.site-footer.section-shell {
    width: min(1240px, calc(100% - 44px));
    padding: 46px 40px 30px;
}
.footer-top {
    grid-template-columns: minmax(0, 1.2fr) minmax(130px, .5fr) minmax(0, .9fr);
    gap: 46px;
}
.footer-brand img {
    width: 132px;
    height: auto;
}
.footer-brand p {
    max-width: 360px;
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.75;
}
.footer-links {
    align-content: start;
    gap: 14px;
}
.footer-links a {
    font-size: 14px;
    font-weight: 600;
}
.footer-connect {
    align-content: start;
    justify-items: end;
    gap: 18px;
}
.footer-mail {
    font-size: 15px;
    font-weight: 700;
}
.social-link {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}
.footer-bottom {
    margin-top: 34px;
    padding-top: 20px;
    align-items: center;
    gap: 18px;
}
.footer-copyright-stack {
    display: grid;
    gap: 6px;
}
.footer-copyright-stack address {
    margin: 0;
    font-style: normal;
}
.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

@media (max-width: 1100px) {
    .mood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-connect {
        justify-items: start;
        grid-column: 1 / -1;
    }
    .social-links { justify-content: flex-start; }
}

@media (max-width: 760px) {
    .hero-copy h1 { max-width: none; }
    .mood-grid { grid-template-columns: 1fr; }
    .games-icon-grid {
        grid-template-columns: repeat(4, 64px);
        gap: 12px;
    }
    .games-icon-grid img {
        width: 64px;
        height: 64px;
        padding: 4px;
    }
    .site-footer.section-shell {
        width: min(100%, calc(100% - 24px));
        padding: 34px 24px 26px;
    }
    .footer-top { grid-template-columns: 1fr; gap: 28px; }
    .footer-connect { justify-items: start; }
    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ========================================
   V12 — audit follow-up refinements
   ======================================== */

/* Home rating card gets visible stars. */
.stat-card-rating strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.stat-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: #f3b11b;
    font-style: normal;
    font-size: 18px;
    letter-spacing: .02em;
}

/* Home "How we work" gets slightly cleaner content spacing. */
.mood-section .section-heading { margin-bottom: 24px; }
.mood-card h3 { max-width: 9ch; }

/* Games icons: rounded-square cards arranged around a circle/clock, not circular crops. */
.games-icon-grid {
    position: relative;
    width: 360px;
    height: 360px;
    display: block;
    justify-self: end;
}
.games-icon-grid img {
    position: absolute;
    width: 82px;
    height: 82px;
    padding: 0;
    border-radius: 22px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 12px 28px rgba(18,18,18,.09);
    transform: none !important;
}
.games-icon-grid img:nth-child(1) { top: 16px; left: 139px; }
.games-icon-grid img:nth-child(2) { top: 60px; right: 54px; }
.games-icon-grid img:nth-child(3) { top: 140px; right: 8px; }
.games-icon-grid img:nth-child(4) { bottom: 58px; right: 46px; }
.games-icon-grid img:nth-child(5) { bottom: 14px; left: 139px; }
.games-icon-grid img:nth-child(6) { bottom: 58px; left: 48px; }
.games-icon-grid img:nth-child(7) { top: 140px; left: 10px; }
.games-icon-grid img:nth-child(8) { top: 60px; left: 56px; }
.games-icon-grid::before {
    content: "";
    position: absolute;
    inset: 72px;
    border: 1px dashed rgba(101,77,255,.16);
    border-radius: 50%;
}
.games-icon-grid::after {
    content: "ACE";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 94px;
    height: 94px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(101,77,255,.12);
    border-radius: 50%;
    color: var(--accent);
    background: #f8f6ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .06em;
    transform: translate(-50%, -50%);
}

/* About page: make this section feel different from home. */
.about-work-heading h2 { max-width: 8ch; }
.about-principles-grid {
    grid-template-columns: 1fr;
    gap: 14px;
}
.about-principle-card {
    min-height: auto;
    padding: 22px 26px 22px 96px;
    position: relative;
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.about-principle-card span {
    position: absolute;
    left: 26px;
    top: 50%;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(101,77,255,.12);
    border-radius: 50%;
    color: var(--accent);
    background: #f4f1ff;
    font-size: 12px;
    font-weight: 800;
    transform: translateY(-50%);
}
.about-principle-card h3 {
    margin: 0 0 8px;
    font-size: clamp(28px, 2.5vw, 36px);
    line-height: 1.02;
}
.about-principle-card p {
    max-width: 680px;
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 980px) {
    .games-icon-grid {
        width: 320px;
        height: 320px;
        justify-self: start;
    }
    .games-icon-grid img {
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }
    .games-icon-grid img:nth-child(1) { top: 14px; left: 124px; }
    .games-icon-grid img:nth-child(2) { top: 52px; right: 44px; }
    .games-icon-grid img:nth-child(3) { top: 124px; right: 4px; }
    .games-icon-grid img:nth-child(4) { bottom: 52px; right: 36px; }
    .games-icon-grid img:nth-child(5) { bottom: 14px; left: 124px; }
    .games-icon-grid img:nth-child(6) { bottom: 52px; left: 36px; }
    .games-icon-grid img:nth-child(7) { top: 124px; left: 4px; }
    .games-icon-grid img:nth-child(8) { top: 52px; left: 44px; }
    .games-icon-grid::after {
        width: 84px;
        height: 84px;
        font-size: 20px;
    }
}

@media (max-width: 760px) {
    .games-icon-grid {
        width: 100%;
        max-width: 288px;
        height: 288px;
        margin-inline: auto;
        justify-self: center;
    }
    .games-icon-grid img {
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }
    .games-icon-grid img:nth-child(1) { top: 12px; left: 112px; }
    .games-icon-grid img:nth-child(2) { top: 46px; right: 36px; }
    .games-icon-grid img:nth-child(3) { top: 112px; right: 4px; }
    .games-icon-grid img:nth-child(4) { bottom: 46px; right: 30px; }
    .games-icon-grid img:nth-child(5) { bottom: 12px; left: 112px; }
    .games-icon-grid img:nth-child(6) { bottom: 46px; left: 30px; }
    .games-icon-grid img:nth-child(7) { top: 112px; left: 4px; }
    .games-icon-grid img:nth-child(8) { top: 46px; left: 36px; }
    .games-icon-grid::before { inset: 56px; }
    .games-icon-grid::after {
        width: 76px;
        height: 76px;
        font-size: 18px;
    }
    .about-principle-card {
        padding: 84px 22px 22px;
    }
    .about-principle-card span {
        left: 22px;
        top: 24px;
        transform: none;
    }
}

/* ========================================
   V13 — about values + true 4.5 rating
   ======================================== */

/* True 4.5-star treatment: four full stars + one clipped half star. */
.stat-stars i {
    display: inline-block;
    width: .52em;
    overflow: hidden;
    color: #f3b11b;
    font-style: normal;
    white-space: nowrap;
}

/* About page values: inspired by the reference composition, rebuilt in Ace's own system. */
.about-values-section {
    padding: 36px 0 110px;
}
.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
.about-values-intro {
    min-height: 250px;
    padding: 24px 28px 24px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.about-values-intro h2 {
    max-width: 7.5ch;
    margin: 22px 0 16px;
    font-size: clamp(48px, 5vw, 72px);
    line-height: .92;
    letter-spacing: -.065em;
}
.about-values-intro p {
    max-width: 330px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}
.about-value-card {
    min-height: 250px;
    padding: 26px 28px 28px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #f7f7f8;
    box-shadow: none;
}
.about-value-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.about-value-top > span:first-child {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}
.about-value-icon,
.about-value-icon svg,
.about-value-card h3 {
    margin: 34px 0 12px;
    color: var(--accent);
    font-size: 21px;
    line-height: 1.05;
    letter-spacing: -.035em;
}
.about-value-card p {
    max-width: 31ch;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.58;
}


@media (max-width: 980px) {
    .about-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-values-intro { padding-right: 20px; }
}

@media (max-width: 760px) {
    .about-values-section { padding-top: 10px; padding-bottom: 82px; }
    .about-values-grid,
    .about-values-intro {
        min-height: auto;
        padding: 10px 0 18px;
    }
    .about-values-intro h2 { max-width: 9ch; font-size: clamp(44px, 13vw, 62px); }
    .about-value-card { min-height: 225px; padding: 24px; border-radius: var(--r-md); }
}

/* ========================================
   V14 — restore old orbit icon composition + responsive hardening
   ======================================== */

/* Games hero icon composition restored from the older build:
   rounded-square icons, generous spacing, orbit/connector lines. */
.games-icon-orbit {
    position: relative;
    width: min(520px, 100%);
    aspect-ratio: 1 / 1;
    justify-self: end;
    isolation: isolate;
}
.games-orbit-lines {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.games-orbit-lines circle,
.games-orbit-lines line {
    fill: none;
    stroke: rgba(101,77,255,.16);
    stroke-width: 1.25;
    stroke-dasharray: 5 8;
    vector-effect: non-scaling-stroke;
}
.games-orbit-lines line {
    stroke: rgba(101,77,255,.10);
    stroke-dasharray: 3 10;
}
.orbit-game-icon {
    position: absolute;
    z-index: 2;
    width: clamp(72px, 7vw, 86px);
    height: clamp(72px, 7vw, 86px);
    padding: 0;
    border: 0;
    border-radius: 24px;
    object-fit: cover;
    object-position: center;
    background: transparent;
    box-shadow: 0 15px 34px rgba(18,18,18,.10);
}
.orbit-game-icon-1 { left: 50%; top: 1%; transform: translateX(-50%) rotate(5deg); }
.orbit-game-icon-2 { right: 5%; top: 17%; transform: rotate(-5deg); }
.orbit-game-icon-3 { right: 0; top: 50%; transform: translateY(-50%) rotate(6deg); }
.orbit-game-icon-4 { right: 10%; bottom: 8%; transform: rotate(-4deg); }
.orbit-game-icon-5 { left: 50%; bottom: 0; transform: translateX(-50%) rotate(5deg); }
.orbit-game-icon-6 { left: 10%; bottom: 8%; transform: rotate(-6deg); }
.orbit-game-icon-7 { left: 0; top: 50%; transform: translateY(-50%) rotate(4deg); }
.orbit-game-icon-8 { left: 5%; top: 17%; transform: rotate(-5deg); }
.games-orbit-core {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: clamp(118px, 12vw, 148px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-content: center;
    text-align: center;
    border: 1px solid rgba(101,77,255,.14);
    border-radius: 50%;
    color: var(--ink);
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 42px rgba(18,18,18,.08), inset 0 1px 0 #fff;
    transform: translate(-50%, -50%);
}
.games-orbit-core strong {
    color: var(--accent);
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1;
    letter-spacing: -.05em;
}
.games-orbit-core span {
    margin-top: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* General responsive hardening: every major grid may shrink without overflow. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, main { width: 100%; max-width: 100%; }
main, main > *,
.section-shell,
.home-hero > *,
.games-hero > *,
.about-hero > *,
.contact-page > *,
.game-detail > *,
.section-heading > *,
.mockup-game-card > *,
.footer-top > * { min-width: 0; }
img, svg, video { max-width: 100%; }

@media (max-width: 1180px) {
    .section-shell { width: min(1180px, calc(100% - 36px)); }
    .home-hero,
    .games-hero,
    .about-hero,
    .contact-page { gap: clamp(34px, 5vw, 64px); }
    .games-icon-orbit { width: min(470px, 100%); }
}

@media (max-width: 980px) {
    .home-hero,
    .games-hero,
    .about-hero,
    .contact-page,
    .game-detail {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .games-hero { gap: 28px; }
    .games-icon-orbit {
        width: min(440px, 82vw);
        justify-self: center;
        margin-inline: auto;
    }
    .section-heading,
    .section-heading-large,
    .catalog-heading,
    .about-work-heading {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px;
    }
    .mockup-game-card,
    .mockup-game-card-reverse {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .mockup-game-card-reverse .mockup-game-visual { order: initial; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-connect { grid-column: 1 / -1; justify-items: start; }
    .social-links { justify-content: flex-start; }
}

@media (max-width: 760px) {
    .section-shell { width: calc(100% - 24px); }
    .site-header,
    .site-header.scrolled {
        width: calc(100% - 20px);
        max-width: none;
        left: 50%;
    }
    .home-hero,
    .games-hero,
    .about-hero,
    .contact-page { padding-top: 122px; }

    .hero-copy h1,
    .games-hero-copy h1,
    .about-copy h1,
    .contact-intro h1,
    .game-detail-copy h1 {
        max-width: 100%;
        font-size: clamp(44px, 13vw, 68px);
        line-height: .92;
        overflow-wrap: anywhere;
    }
    .section-heading-large h2,
    .about-values-intro h2 {
        font-size: clamp(42px, 12.5vw, 62px);
        line-height: .94;
    }

    .games-icon-orbit {
        width: min(360px, 92vw);
    }
    .orbit-game-icon {
        width: clamp(58px, 18vw, 70px);
        height: clamp(58px, 18vw, 70px);
        padding: 4px;
        border-radius: 19px;
    }
    .games-orbit-core { width: clamp(96px, 29vw, 118px); }
    .games-orbit-core strong { font-size: clamp(28px, 9vw, 36px); }

    .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card { padding: 20px; }
    .stat-card-rating strong { align-items: flex-start; flex-direction: column; gap: 5px; }

    .momentum-showcase {
        width: calc(100% - 24px);
        margin-inline: auto;
        padding-inline: 24px;
    }
    .mood-grid,
    .about-values-grid,
    .values-grid,
    .detail-principles,
    .game-grid,
    .screenshot-grid { grid-template-columns: minmax(0, 1fr) !important; }

    .mockup-game-card { padding: 24px 18px; }
    .mockup-game-visual { min-height: clamp(230px, 72vw, 330px); }
    .supplied-game-mockup { width: 100%; max-width: 100%; }
    .game-title-lockup { min-width: 0; }
    .game-title-lockup h3,
    .game-title-lockup h2 { white-space: normal !important; overflow-wrap: anywhere; }
    .catalog-tags,
    .store-badges { flex-wrap: wrap; }

    .about-collage {
        width: 100%;
        max-width: 520px;
        margin-inline: auto;
    }
    .contact-form { width: 100%; grid-template-columns: minmax(0, 1fr); }
    .game-detail-device { min-height: 450px; }
    .phone-device-large { max-width: 68vw; }

    .site-footer.section-shell { width: calc(100% - 24px); }
    .footer-top { grid-template-columns: minmax(0, 1fr); }
    .footer-connect { grid-column: auto; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
    .section-shell { width: calc(100% - 20px); }
    .site-header,
    .site-header.scrolled { width: calc(100% - 16px); padding-inline: 14px; }
    .brand img { width: 108px; }

    .games-icon-orbit { width: min(310px, 94vw); }
    .orbit-game-icon {
        width: clamp(52px, 17vw, 62px);
        height: clamp(52px, 17vw, 62px);
        border-radius: 17px;
    }
    .games-orbit-core { width: clamp(86px, 28vw, 104px); }
    .games-orbit-core span { font-size: 8px; }

    .final-cta { padding: 42px 22px; }
    .about-value-card { min-height: auto; }
    .store-badge.store-badge-full-image img { width: min(132px, 42vw); }
}

@media (max-width: 380px) {
    .hero-stats { grid-template-columns: minmax(0, 1fr); }
    .stat-card-rating strong { flex-direction: row; align-items: center; }
    .games-icon-orbit { width: min(286px, 94vw); }
    .orbit-game-icon {
        width: 54px;
        height: 54px;
        border-radius: 16px;
    }
    .games-orbit-core { width: 88px; }
    .games-orbit-core strong { font-size: 28px; }
}

/* ========================================
   V14 — final hero/content refinements
   ======================================== */

/* Home hero: one strong visual, no floating app icons, stickers or feature label. */
.hero-copy h1.home-brand-title {
    max-width: 10.5ch;
    margin: 20px 0 22px;
    font-size: clamp(64px, 5.8vw, 90px);
    line-height: .91;
    letter-spacing: -.072em;
}
.hero-copy h1.home-brand-title span {
    display: inline;
    margin: 0;
    color: var(--accent);
}
.hero-actions { gap: 0; }
.hero-world-clean {
    min-height: 530px;
}
.hero-main-card.hero-main-card-clean {
    right: 24px;
    bottom: 34px;
    width: min(430px, 92%);
    height: auto;
    aspect-ratio: 1;
    padding: 20px;
    border: 1px solid rgba(101,77,255,.08);
    border-radius: 34px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #e3f6af 0%, #f2ffd8 48%, #cde9ff 100%);
    box-shadow: 0 24px 58px rgba(28,32,38,.12);
}
.hero-main-card.hero-main-card-clean > .hero-feature-art {
    width: 88%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 28px;
    object-fit: cover;
    box-shadow: 0 20px 42px rgba(24,28,36,.16);
}
.hero-world-clean .hero-blob {
    width: 300px;
    height: 300px;
    left: 12px;
    top: 106px;
    opacity: .7;
}

/* About hero: same wording, fewer lines, smaller three-image composition. */
.about-copy h1.about-brand-title {
    max-width: 11.5ch;
    font-size: clamp(60px, 5.4vw, 84px);
    line-height: .91;
    letter-spacing: -.068em;
}
.about-copy h1.about-brand-title span {
    display: inline;
}
.about-collage {
    min-height: 470px;
}
.about-img-shell-a {
    left: 12%;
    top: 44px;
    width: 205px;
    height: 205px;
    border-radius: 34px;
    transform: rotate(-4deg);
}
.about-img-shell-b {
    right: 9%;
    top: 155px;
    bottom: auto;
    width: 185px;
    height: 185px;
    border-radius: 32px;
    transform: rotate(5deg);
}
.about-img-shell-c {
    position: absolute;
    z-index: 4;
    left: 41%;
    bottom: 30px;
    width: 165px;
    height: 165px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 30px;
    background: transparent;
    box-shadow: var(--shadow-soft);
    transform: rotate(-2deg);
}
.about-img-shell .about-img-c {
    position: static;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    object-fit: contain;
    background: transparent;
    box-shadow: 0 18px 40px rgba(28,32,38,.14);
}

/* Footer social buttons back to the original compact size. */
.social-link {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}
.social-link svg {
    width: 19px;
    height: 19px;
}

@media (max-width: 980px) {
    .hero-copy h1.home-brand-title { max-width: 10.5ch; }
    .hero-main-card.hero-main-card-clean {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(410px, 78vw);
        margin: 18px auto 0;
    }
    .hero-world-clean { min-height: 470px; }

    .about-copy h1.about-brand-title { max-width: 12ch; }
    .about-collage {
        max-width: 500px;
        min-height: 400px;
        margin-inline: auto;
    }
    .about-img-shell-a { left: 8%; top: 36px; width: 180px; height: 180px; }
    .about-img-shell-b { right: 7%; top: 128px; width: 165px; height: 165px; }
    .about-img-shell-c { left: 38%; bottom: 22px; width: 145px; height: 145px; }
}

@media (max-width: 760px) {
    .hero-copy h1.home-brand-title {
        max-width: 9.7ch;
        font-size: clamp(48px, 13vw, 66px);
        line-height: .92;
        overflow-wrap: normal;
    }
    .hero-world-clean {
        min-height: clamp(350px, 104vw, 450px);
    }
    .hero-main-card.hero-main-card-clean {
        width: min(380px, 88vw);
        padding: 16px;
        border-radius: 28px;
    }
    .hero-main-card.hero-main-card-clean > .hero-feature-art {
        width: 90%;
        border-radius: 24px;
    }

    .about-copy h1.about-brand-title {
        max-width: 10.8ch;
        font-size: clamp(48px, 13vw, 66px);
        line-height: .92;
        overflow-wrap: normal;
    }
    .about-collage {
        min-height: 340px;
        transform: none;
    }
    .about-img-shell-a { left: 3%; top: 30px; width: 145px; height: 145px; border-radius: 26px; }
    .about-img-shell-b { right: 2%; top: 92px; width: 135px; height: 135px; border-radius: 25px; }
    .about-img-shell-c { left: 35%; bottom: 18px; width: 120px; height: 120px; border-radius: 23px; }
}

@media (max-width: 420px) {
    .hero-copy h1.home-brand-title,
    .about-copy h1.about-brand-title {
        max-width: 9.2ch;
        font-size: clamp(44px, 12.5vw, 56px);
    }
    .about-collage { min-height: 300px; }
    .about-img-shell-a { width: 128px; height: 128px; }
    .about-img-shell-b { width: 120px; height: 120px; top: 84px; }
    .about-img-shell-c { width: 106px; height: 106px; left: 34%; }
}


/* ========================================
   V15 — retro hero restoration + tighter spacing + shared 4x4 artwork
   ======================================== */
.home-hero,
.games-hero,
.about-hero {
    padding-top: 142px;
}
.home-hero {
    min-height: 760px;
    gap: 36px;
    align-items: start;
}
.games-hero,
.about-hero {
    min-height: auto;
    gap: 42px;
    align-items: start;
}
.hero-copy { padding-top: 10px; }
.hero-copy h1.home-brand-title {
    max-width: 8.6ch;
    margin: 8px 0 18px;
    font-size: clamp(66px, 7vw, 92px);
    line-height: .92;
    letter-spacing: -.07em;
}
.hero-copy p { max-width: 470px; }
.hero-world-retro {
    position: relative;
    min-height: 520px;
    isolation: isolate;
}
.hero-disc {
    position: absolute;
    border-radius: 50%;
    filter: saturate(105%);
    opacity: .95;
}
.hero-disc-rose {
    width: 240px;
    height: 240px;
    left: 12%;
    top: 32px;
    background: radial-gradient(circle at 30% 30%, #ffc8d1 0, #ffb794 48%, #ff8cbc 100%);
}
.hero-disc-blue {
    width: 220px;
    height: 220px;
    right: 4%;
    top: 0;
    background: radial-gradient(circle at 30% 30%, #9de6ff 0, #98b7ff 52%, #74a8ff 100%);
}
.hero-disc-lime {
    width: 350px;
    height: 350px;
    right: 7%;
    top: 104px;
    border-radius: 34px;
    background: linear-gradient(180deg, #e2f0a8 0%, #cfecc3 48%, #c5dff8 100%);
    box-shadow: 0 26px 54px rgba(48,58,72,.08);
}
.hero-floating-card {
    position: absolute;
    z-index: 3;
    margin: 0;
    width: 92px;
    height: 92px;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(22,24,29,.14);
}
.hero-floating-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-floating-card-a { left: 18%; top: 104px; transform: rotate(-7deg); }
.hero-floating-card-b { right: 5%; top: 84px; transform: rotate(8deg); }
.hero-floating-card-c { left: 20%; bottom: 34px; transform: rotate(6deg); }
.hero-main-card.hero-main-card-retro {
    right: 10%;
    bottom: 22px;
    width: 330px;
    height: 360px;
    padding: 16px;
    border: 0;
    border-radius: 34px;
    background: transparent;
    box-shadow: none;
    transform: none;
}
.hero-main-card.hero-main-card-retro > .hero-feature-art {
    width: 100%;
    height: 100%;
    border-radius: 32px;
    object-fit: cover;
    box-shadow: 0 22px 48px rgba(20,24,31,.14);
}

.games-hero-copy h1 { margin: 8px 0 18px; }
.games-hero-copy p,
.about-copy p { max-width: 500px; }
.about-copy h1.about-brand-title {
    max-width: 8.4ch;
    margin: 8px 0 18px;
    line-height: .92;
}
.about-collage {
    min-height: 430px;
}
.about-shape.shape-yellow {
    width: 330px;
    height: 280px;
    left: 20%;
    top: 92px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(115,92,255,.14), rgba(115,92,255,.03) 70%, transparent 72%);
    filter: blur(0);
}
.about-img-shell,
.about-img-shell-a,
.about-img-shell-b,
.about-img-shell-c {
    background: transparent;
}
.about-img-shell-a {
    left: 6%;
    top: 28px;
    width: 205px;
    height: 205px;
    border-radius: 34px;
    transform: rotate(-4deg);
}
.about-img-shell-b {
    right: 8%;
    top: 86px;
    width: 185px;
    height: 185px;
    border-radius: 30px;
    transform: rotate(6deg);
}
.about-img-shell-c {
    left: 38%;
    bottom: 18px;
    width: 160px;
    height: 160px;
    border-radius: 28px;
    transform: rotate(-3deg);
}
.about-img-shell .about-img,
.about-img-shell .about-img-a,
.about-img-shell .about-img-b,
.about-img-shell .about-img-c {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    object-fit: cover;
    box-shadow: 0 18px 40px rgba(28,32,38,.14);
}

.momentum-title-lockup > img,
.game-title-lockup > img,
.orbit-game-icon {
    object-fit: cover;
}
.game-title-lockup > img {
    border-radius: 18px;
}
.orbit-game-icon {
    border-radius: 22px;
}

@media (max-width: 1180px) {
    .home-hero,
    .games-hero,
    .about-hero {
        padding-top: 134px;
    }
}

@media (max-width: 980px) {
    .home-hero,
    .games-hero,
    .about-hero {
        padding-top: 124px;
        gap: 28px;
    }
    .hero-copy h1.home-brand-title,
    .games-hero-copy h1,
    .about-copy h1.about-brand-title {
        margin-top: 0;
    }
    .hero-world-retro {
        min-height: 470px;
        max-width: 520px;
        width: 100%;
        margin-inline: auto;
    }
    .hero-disc-rose {
        width: 210px;
        height: 210px;
        left: 10%;
        top: 28px;
    }
    .hero-disc-blue {
        width: 190px;
        height: 190px;
        right: 3%;
        top: 10px;
    }
    .hero-disc-lime {
        width: 310px;
        height: 310px;
        right: 7%;
        top: 102px;
    }
    .hero-main-card.hero-main-card-retro {
        right: 8%;
        bottom: 22px;
        width: 290px;
        height: 320px;
    }
    .hero-floating-card { width: 84px; height: 84px; }
    .hero-floating-card-a { left: 12%; top: 94px; }
    .hero-floating-card-b { right: 4%; top: 82px; }
    .hero-floating-card-c { left: 18%; bottom: 28px; }
    .about-collage {
        max-width: 500px;
        margin-inline: auto;
    }
}

@media (max-width: 760px) {
    .home-hero,
    .games-hero,
    .about-hero {
        padding-top: 118px;
    }
    .hero-copy h1.home-brand-title {
        max-width: 8.3ch;
        font-size: clamp(50px, 13.4vw, 66px);
    }
    .hero-world-retro {
        min-height: 410px;
    }
    .hero-disc-rose {
        width: 160px;
        height: 160px;
        left: 8%;
        top: 36px;
    }
    .hero-disc-blue {
        width: 145px;
        height: 145px;
        right: 2%;
        top: 6px;
    }
    .hero-disc-lime {
        width: min(72vw, 270px);
        height: min(72vw, 270px);
        right: 7%;
        top: 92px;
        border-radius: 26px;
    }
    .hero-main-card.hero-main-card-retro {
        right: 7%;
        bottom: 20px;
        width: min(64vw, 250px);
        height: min(72vw, 285px);
        padding: 12px;
        border-radius: 26px;
    }
    .hero-main-card.hero-main-card-retro > .hero-feature-art { border-radius: 22px; }
    .hero-floating-card { width: 68px; height: 68px; border-radius: 20px; }
    .hero-floating-card-a { left: 6%; top: 100px; }
    .hero-floating-card-b { right: 2%; top: 76px; }
    .hero-floating-card-c { left: 16%; bottom: 22px; }

    .about-copy h1.about-brand-title {
        max-width: 8.9ch;
        font-size: clamp(48px, 13vw, 64px);
    }
    .about-collage { min-height: 320px; }
    .about-img-shell-a { left: 2%; top: 18px; width: 145px; height: 145px; border-radius: 24px; }
    .about-img-shell-b { right: 2%; top: 84px; width: 130px; height: 130px; border-radius: 24px; }
    .about-img-shell-c { left: 34%; bottom: 10px; width: 112px; height: 112px; border-radius: 22px; }
}


/* ========================================
   V16 — about raceoff icon + hero artwork polish
   ======================================== */
@media (min-width: 981px) {
    .about-collage {
        transform: translateX(18px);
    }
}

.about-img-shell-d {
    position: absolute;
    z-index: 3;
    right: 1%;
    bottom: 10px;
    width: 118px;
    height: 118px;
    border-radius: 24px;
    transform: rotate(5deg);
}

.about-img-shell .about-img-d {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    object-fit: cover;
    box-shadow: 0 18px 40px rgba(28,32,38,.14);
}

.hero-main-card.hero-main-card-retro {
    isolation: isolate;
}
.hero-main-card.hero-main-card-retro::before {
    content: "";
    position: absolute;
    inset: 20px 22px 6px 22px;
    z-index: -1;
    border-radius: 36px;
    background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.56), rgba(255,255,255,0) 58%),
                radial-gradient(circle at 75% 76%, rgba(139,108,255,.20), rgba(139,108,255,0) 48%);
    filter: blur(18px);
    opacity: .95;
}
.hero-main-card.hero-main-card-retro > .hero-feature-art {
    box-shadow: 0 26px 60px rgba(20,24,31,.18), 0 0 0 1px rgba(255,255,255,.45);
    filter: saturate(1.06) contrast(1.02);
}
.hero-floating-card,
.about-img-shell,
.about-img-shell-a,
.about-img-shell-b,
.about-img-shell-c,
.about-img-shell-d {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.46);
    box-shadow: 0 18px 42px rgba(20,24,31,.14), 0 0 0 1px rgba(255,255,255,.2) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.hero-floating-card::after,
.about-img-shell::after,
.about-img-shell-a::after,
.about-img-shell-b::after,
.about-img-shell-c::after,
.about-img-shell-d::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.48);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%);
}
.hero-floating-card:hover,
.about-img-shell:hover,
.about-img-shell-a:hover,
.about-img-shell-b:hover,
.about-img-shell-c:hover,
.about-img-shell-d:hover,
.hero-main-card.hero-main-card-retro:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 56px rgba(20,24,31,.18), 0 0 0 1px rgba(255,255,255,.24) inset;
}

@media (max-width: 980px) {
    .about-collage {
        transform: none;
    }
    .about-img-shell-d {
        right: 3%;
        bottom: 6px;
        width: 104px;
        height: 104px;
    }
}

@media (max-width: 760px) {
    .about-img-shell-d {
        right: 3%;
        bottom: 2px;
        width: 92px;
        height: 92px;
        border-radius: 20px;
    }
}

@media (max-width: 420px) {
    .about-img-shell-d {
        right: 0;
        bottom: 0;
        width: 82px;
        height: 82px;
        border-radius: 18px;
    }
}


/* ========================================
   V17 — animated objects, tighter spacing, orbit fix, stronger ambient colour
   ======================================== */
body {
    background: #f8f6f2;
}

.ambient-blobs {
    opacity: .9 !important;
}
.ambient-blob {
    display: block !important;
    opacity: .28;
    filter: blur(88px);
}
.ambient-blob-one {
    width: 430px;
    height: 430px;
    left: -120px;
    top: 12%;
    background: rgba(255, 153, 193, .78);
}
.ambient-blob-two {
    display: block !important;
    width: 470px;
    height: 470px;
    right: -140px;
    top: 8%;
    background: rgba(129, 188, 255, .72);
}
.ambient-blob-three {
    display: block !important;
    width: 420px;
    height: 420px;
    left: 33%;
    bottom: -170px;
    opacity: .18;
    background: rgba(200, 239, 114, .82);
}

.home-hero,
.games-hero,
.about-hero {
    position: relative;
}
.home-hero {
    padding-bottom: 34px;
}
.games-hero {
    min-height: 540px;
    padding-bottom: 34px;
}
.about-hero {
    padding-bottom: 38px;
}
.hero-stats {
    margin-top: 8px;
}
.momentum-showcase {
    margin-top: 24px;
}
.game-catalog {
    padding-top: 28px !important;
}
.catalog-heading {
    margin-bottom: 22px;
}

.games-hero::before,
.games-hero::after,
.about-hero::before,
.about-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    animation: sectionBlobDrift 18s ease-in-out infinite alternate;
}
.games-hero::before {
    width: 220px;
    height: 220px;
    left: -34px;
    top: 126px;
    background: rgba(255, 163, 198, .18);
}
.games-hero::after {
    width: 240px;
    height: 240px;
    right: -44px;
    top: 92px;
    background: rgba(131, 189, 255, .18);
    animation-delay: -6s;
}
.about-hero::before {
    width: 220px;
    height: 220px;
    left: -24px;
    top: 132px;
    background: rgba(255, 167, 195, .18);
}
.about-hero::after {
    width: 230px;
    height: 230px;
    right: -26px;
    top: 110px;
    background: rgba(120, 182, 255, .16);
    animation-delay: -8s;
}

.hero-disc,
.about-shape.shape-yellow {
    animation: gentleBob 8.5s ease-in-out infinite alternate;
}
.hero-disc-blue { animation-delay: -2s; }
.hero-disc-lime { animation-delay: -4s; }
.about-shape.shape-yellow { animation-delay: -3s; }

.hero-floating-card,
.about-img-shell {
    transform-style: preserve-3d;
    will-change: transform, translate;
}
.hero-floating-card {
    animation: cardFloat 6.4s ease-in-out infinite;
}
.hero-floating-card-b { animation-delay: -2s; }
.hero-floating-card-c { animation-delay: -4s; }
.about-img-shell-a { animation: cardFloat 6.8s ease-in-out infinite; }
.about-img-shell-b { animation: cardFloat 7.4s ease-in-out infinite -2s; }
.about-img-shell-c { animation: cardFloat 6.1s ease-in-out infinite -3s; }
.about-img-shell-d { animation: cardFloat 7.1s ease-in-out infinite -1s; }
.hero-floating-card:hover,
.about-img-shell:hover {
    transform: perspective(900px) rotateX(var(--hover-tilt-x, 0deg)) rotateY(var(--hover-tilt-y, 0deg)) translateY(-6px) !important;
}

.hero-float-ornament {
    position: absolute;
    z-index: 4;
    display: block;
    animation: objectFloat 5.8s ease-in-out infinite;
    box-shadow: 0 16px 30px rgba(20,24,31,.08);
}
.hero-float-ornament-star {
    left: 18%;
    top: 36px;
    width: 16px;
    height: 16px;
    clip-path: polygon(50% 0%, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0% 50%, 39% 36%);
    background: #7a61ff;
    animation-delay: -1s;
}
.hero-float-ornament-pill {
    right: 7%;
    top: 208px;
    width: 52px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #b7ef4a, #d6ff8d);
    animation-delay: -2.5s;
}
.hero-float-ornament-pill::after {
    content: "GO";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #0e1116;
    font-size: 12px;
    font-weight: 800;
}
.hero-float-ornament-dot {
    z-index: 2;
    left: 24%;
    bottom: 22px;
    width: 14px;
    height: 14px;
    border-radius: 6px;
    transform: rotate(45deg);
    background: #ff8fba;
    animation-delay: -3.8s;
}
.hero-float-ornament-diamond {
    left: 58%;
    bottom: -2px;
    width: 48px;
    height: 32px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffb7d3, #ffdceb);
    animation-delay: -1.6s;
}
.hero-float-ornament-diamond::after {
    content: "NEW";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #7a2e62;
    font-size: 11px;
    font-weight: 800;
}

.games-icon-orbit {
    position: relative;
    min-height: 500px;
}
.orbit-game-icon-1,
.orbit-game-icon-2,
.orbit-game-icon-3,
.orbit-game-icon-4,
.orbit-game-icon-5,
.orbit-game-icon-6,
.orbit-game-icon-7,
.orbit-game-icon-8 {
    animation: iconBreathe 7s ease-in-out infinite;
}
.orbit-game-icon-2 { animation-delay: -1s; }
.orbit-game-icon-3 { animation-delay: -2s; }
.orbit-game-icon-4 { animation-delay: -3s; }
.orbit-game-icon-5 { animation-delay: -4s; }
.orbit-game-icon-6 { animation-delay: -5s; }
.orbit-game-icon-7 { animation-delay: -6s; }
.orbit-game-icon-8 { animation-delay: -2.5s; }

.about-collage {
    min-height: 380px;
    max-width: 470px;
    margin-inline: auto;
}
.about-shape.shape-yellow {
    width: 280px;
    height: 240px;
    left: 25%;
    top: 104px;
}
.about-img-shell-a {
    left: 8%;
    top: 22px;
    width: 190px;
    height: 190px;
}
.about-img-shell-b {
    right: 7%;
    top: 66px;
    width: 162px;
    height: 162px;
}
.about-img-shell-c {
    left: 44%;
    bottom: 70px;
    width: 126px;
    height: 126px;
}
.about-img-shell-d {
    right: 0;
    bottom: 8px;
    width: 118px;
    height: 118px;
}

@keyframes objectFloat {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
    100% { transform: translate3d(0, 3px, 0); }
}
@keyframes gentleBob {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, -10px, 0) scale(1.03); }
}
@keyframes cardFloat {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -8px, 0); }
    100% { transform: translate3d(0, 4px, 0); }
}
@keyframes iconBreathe {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.03) translateY(-5px); }
    100% { transform: scale(1) translateY(2px); }
}
@keyframes sectionBlobDrift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(18px, -18px, 0) scale(1.08); }
}

@media (max-width: 980px) {
    .games-hero,
    .about-hero {
        padding-bottom: 28px;
    }
    .game-catalog {
        padding-top: 20px !important;
    }
    .hero-float-ornament-star { left: 14%; top: 42px; }
    .hero-float-ornament-pill { right: 10%; top: 190px; }
    .hero-float-ornament-diamond { left: 56%; bottom: 6px; }
    .about-collage {
        max-width: 430px;
        min-height: 352px;
    }
    .about-img-shell-a { width: 170px; height: 170px; }
    .about-img-shell-b { width: 146px; height: 146px; top: 72px; }
    .about-img-shell-c { width: 116px; height: 116px; left: 42%; bottom: 56px; }
    .about-img-shell-d { width: 100px; height: 100px; right: 1%; bottom: 12px; }
}

@media (max-width: 760px) {
    .ambient-blob {
        opacity: .22;
        filter: blur(72px);
    }
    .hero-world-retro {
        min-height: 430px;
    }
    .hero-float-ornament-pill {
        width: 46px;
        height: 24px;
        right: 6%;
        top: 178px;
    }
    .hero-float-ornament-pill::after,
    .hero-float-ornament-diamond::after {
        font-size: 10px;
    }
    .hero-float-ornament-diamond {
        width: 42px;
        height: 28px;
        left: 54%;
        bottom: 8px;
    }
    .about-collage {
        min-height: 330px;
        max-width: 360px;
    }
    .about-img-shell-a { left: 0; top: 18px; width: 146px; height: 146px; }
    .about-img-shell-b { right: 0; top: 74px; width: 124px; height: 124px; }
    .about-img-shell-c { left: 38%; bottom: 56px; width: 104px; height: 104px; }
    .about-img-shell-d { right: 2%; bottom: 8px; width: 90px; height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-float-ornament,
    .hero-disc,
    .about-shape.shape-yellow,
    .hero-floating-card,
    .about-img-shell,
    .orbit-game-icon,
    .games-hero::before,
    .games-hero::after,
    .about-hero::before,
    .about-hero::after,
    .ambient-blob {
        animation: none !important;
    }
}


/* V17.1 — preserve original rotations/positions while floating */
@keyframes objectFloat {
    0% { translate: 0 0; }
    50% { translate: 0 -10px; }
    100% { translate: 0 3px; }
}
@keyframes gentleBob {
    0% { translate: 0 0; }
    100% { translate: 0 -10px; }
}
@keyframes cardFloat {
    0% { translate: 0 0; }
    50% { translate: 0 -8px; }
    100% { translate: 0 4px; }
}
@keyframes iconBreathe {
    0% { translate: 0 0; }
    50% { translate: 0 -5px; }
    100% { translate: 0 2px; }
}


/* ========================================
   V18 — smooth floating, no ornament text, clean hero frame, open about collage
   ======================================== */
/* Decorative pieces stay graphical only — no GO / NEW labels. */
.hero-float-ornament-pill::after,
.hero-float-ornament-diamond::after {
    content: none !important;
    display: none !important;
}
.hero-float-ornament-pill {
    width: 42px;
    height: 20px;
    border-radius: 999px;
}
.hero-float-ornament-diamond {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    transform: rotate(45deg);
}

/* Remove the translucent grey frame around the large truck artwork. */
.hero-main-card.hero-main-card-retro {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.hero-main-card.hero-main-card-retro::before {
    display: none !important;
}
.hero-main-card.hero-main-card-retro > .hero-feature-art {
    border: 0 !important;
    box-shadow: 0 20px 46px rgba(20,24,31,.14) !important;
}
.hero-main-card.hero-main-card-retro:hover {
    box-shadow: none !important;
}

/* Smooth, continuous floating with no loop snap. */
.hero-floating-card,
.about-img-shell,
.hero-float-ornament {
    will-change: translate, transform;
}
.hero-floating-card {
    animation-name: smoothCardFloat !important;
    animation-duration: 7.2s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
}
.hero-floating-card-b { animation-duration: 8.1s !important; animation-delay: -2.1s !important; }
.hero-floating-card-c { animation-duration: 7.7s !important; animation-delay: -4.2s !important; }

.about-img-shell-a,
.about-img-shell-b,
.about-img-shell-c,
.about-img-shell-d {
    animation-name: smoothCardFloat !important;
    animation-duration: 7.8s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
}
.about-img-shell-b { animation-duration: 8.6s !important; animation-delay: -2.4s !important; }
.about-img-shell-c { animation-duration: 7.1s !important; animation-delay: -3.2s !important; }
.about-img-shell-d { animation-duration: 8.2s !important; animation-delay: -1.4s !important; }

.hero-float-ornament {
    animation-name: smoothObjectFloat !important;
    animation-duration: 7.4s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
}
.hero-float-ornament-star { animation-delay: -1.1s !important; }
.hero-float-ornament-pill { animation-delay: -2.8s !important; }
.hero-float-ornament-dot { animation-delay: -4.1s !important; }
.hero-float-ornament-diamond { animation-delay: -1.8s !important; }

@keyframes smoothCardFloat {
    from { translate: 0 3px; }
    to   { translate: 0 -9px; }
}
@keyframes smoothObjectFloat {
    from { translate: 0 2px; }
    to   { translate: 0 -10px; }
}

/* About collage: spread the four images out instead of stacking them into one cluster. */
@media (min-width: 981px) {
    .about-collage {
        width: min(520px, 100%);
        max-width: 520px;
        min-height: 410px;
        transform: translateX(10px);
    }
    .about-shape.shape-yellow {
        width: 300px;
        height: 255px;
        left: 22%;
        top: 92px;
    }
    .about-img-shell-a {
        left: auto;
        right: 1%;
        top: 14px;
        width: 178px;
        height: 178px;
        transform: rotate(4deg);
    }
    .about-img-shell-b {
        left: 3%;
        right: auto;
        top: 64px;
        width: 154px;
        height: 154px;
        transform: rotate(-5deg);
    }
    .about-img-shell-c {
        left: 34%;
        bottom: 14px;
        width: 126px;
        height: 126px;
        transform: rotate(-2deg);
    }
    .about-img-shell-d {
        right: 4%;
        bottom: 8px;
        width: 108px;
        height: 108px;
        transform: rotate(5deg);
    }
}

@media (max-width: 980px) {
    .about-collage {
        max-width: 450px;
        min-height: 365px;
    }
    .about-img-shell-a { left: auto; right: 2%; top: 18px; width: 164px; height: 164px; }
    .about-img-shell-b { left: 1%; right: auto; top: 72px; width: 138px; height: 138px; }
    .about-img-shell-c { left: 35%; bottom: 20px; width: 112px; height: 112px; }
    .about-img-shell-d { right: 3%; bottom: 4px; width: 94px; height: 94px; }
}

@media (max-width: 760px) {
    .hero-float-ornament-pill { width: 34px; height: 16px; }
    .hero-float-ornament-diamond { width: 14px; height: 14px; }
    .about-collage {
        max-width: 360px;
        min-height: 330px;
    }
    .about-img-shell-a { right: 1%; top: 14px; width: 142px; height: 142px; }
    .about-img-shell-b { left: 0; top: 70px; width: 120px; height: 120px; }
    .about-img-shell-c { left: 34%; bottom: 24px; width: 102px; height: 102px; }
    .about-img-shell-d { right: 2%; bottom: 4px; width: 84px; height: 84px; }
}



/* ========================================
   V17B — smooth orbit motion + crystal dark glossy header
   ======================================== */

/* Dark crystal glossy header */
.site-header,
.site-header.scrolled {
    border: 1px solid rgba(255,255,255,.18) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 28%, rgba(255,255,255,.02) 100%),
        linear-gradient(135deg, rgba(49,53,63,.78), rgba(34,38,46,.72) 52%, rgba(25,29,36,.74)) !important;
    box-shadow:
        0 22px 56px rgba(13,17,24,.22),
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 -1px 0 rgba(255,255,255,.05) !important;
    -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
    backdrop-filter: blur(22px) saturate(165%) !important;
}

.site-header::before {
    background:
        linear-gradient(110deg,
            rgba(255,255,255,.26) 0%,
            rgba(255,255,255,.12) 16%,
            rgba(255,255,255,.04) 34%,
            rgba(255,255,255,.02) 54%,
            rgba(255,255,255,.12) 78%,
            rgba(255,255,255,.20) 100%) !important;
    opacity: .92;
}

.site-header::after {
    left: 6%;
    right: 6%;
    top: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent) !important;
    opacity: .9;
}

.site-header.scrolled {
    background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 26%, rgba(255,255,255,.018) 100%),
        linear-gradient(135deg, rgba(43,47,56,.82), rgba(30,34,41,.78) 56%, rgba(23,27,33,.80)) !important;
}

/* Smooth, non-jerky orbit motion.
   Important: animate with translate (not transform) so the base rotate/placement stays intact. */
.games-icon-orbit .orbit-game-icon {
    will-change: translate, transform;
    animation: orbitIconDrift 8.8s ease-in-out infinite !important;
}

.games-icon-orbit .orbit-game-icon-1 { --drift-x: 0px;  --drift-y: -10px; animation-delay: -0.2s !important; }
.games-icon-orbit .orbit-game-icon-2 { --drift-x: 8px;  --drift-y: -6px;  animation-delay: -1.2s !important; }
.games-icon-orbit .orbit-game-icon-3 { --drift-x: 10px; --drift-y: 0px;   animation-delay: -2.3s !important; }
.games-icon-orbit .orbit-game-icon-4 { --drift-x: 7px;  --drift-y: 8px;   animation-delay: -3.5s !important; }
.games-icon-orbit .orbit-game-icon-5 { --drift-x: 0px;  --drift-y: 10px;  animation-delay: -4.6s !important; }
.games-icon-orbit .orbit-game-icon-6 { --drift-x: -8px; --drift-y: 7px;   animation-delay: -5.7s !important; }
.games-icon-orbit .orbit-game-icon-7 { --drift-x: -10px;--drift-y: 0px;   animation-delay: -6.6s !important; }
.games-icon-orbit .orbit-game-icon-8 { --drift-x: -7px; --drift-y: -7px;  animation-delay: -7.5s !important; }

@keyframes orbitIconDrift {
    0% {
        translate: 0 0;
    }
    25% {
        translate: calc(var(--drift-x, 0px) * .55) calc(var(--drift-y, 0px) * .55);
    }
    50% {
        translate: var(--drift-x, 0px) var(--drift-y, 0px);
    }
    75% {
        translate: calc(var(--drift-x, 0px) * .45) calc(var(--drift-y, 0px) * .45);
    }
    100% {
        translate: 0 0;
    }
}

/* Keep icon hover pleasant without snapping */
.games-icon-orbit .orbit-game-icon:hover {
    animation-play-state: paused;
    translate: 0 -4px;
    transform:
        var(--orbit-base-transform, none)
        scale(1.045) !important;
}

/* Preserve original placement transforms for hover state */
.games-icon-orbit .orbit-game-icon-1 { --orbit-base-transform: translateX(-50%) rotate(5deg); }
.games-icon-orbit .orbit-game-icon-2 { --orbit-base-transform: rotate(-5deg); }
.games-icon-orbit .orbit-game-icon-3 { --orbit-base-transform: translateY(-50%) rotate(6deg); }
.games-icon-orbit .orbit-game-icon-4 { --orbit-base-transform: rotate(-4deg); }
.games-icon-orbit .orbit-game-icon-5 { --orbit-base-transform: translateX(-50%) rotate(5deg); }
.games-icon-orbit .orbit-game-icon-6 { --orbit-base-transform: rotate(-6deg); }
.games-icon-orbit .orbit-game-icon-7 { --orbit-base-transform: translateY(-50%) rotate(4deg); }
.games-icon-orbit .orbit-game-icon-8 { --orbit-base-transform: rotate(-5deg); }



/* ========================================
   V18 — lighter crystal header
   ======================================== */
.site-header,
.site-header.scrolled {
    border: 1px solid rgba(255,255,255,.28) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14) 28%, rgba(255,255,255,.08) 100%),
        linear-gradient(135deg, rgba(236,240,248,.56), rgba(217,224,235,.42) 52%, rgba(205,213,226,.34)) !important;
    box-shadow:
        0 22px 56px rgba(78,92,116,.14),
        inset 0 1px 0 rgba(255,255,255,.52),
        inset 0 -1px 0 rgba(255,255,255,.14) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
    backdrop-filter: blur(24px) saturate(170%) !important;
}

.site-header::before {
    background:
        linear-gradient(108deg,
            rgba(255,255,255,.60) 0%,
            rgba(255,255,255,.24) 18%,
            rgba(245,248,255,.12) 40%,
            rgba(255,255,255,.08) 62%,
            rgba(255,255,255,.30) 82%,
            rgba(255,255,255,.48) 100%) !important;
    opacity: .96 !important;
}

.site-header::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.96), transparent) !important;
    opacity: .95 !important;
}

.site-header.scrolled {
    background:
        linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.16) 28%, rgba(255,255,255,.10) 100%),
        linear-gradient(135deg, rgba(230,236,246,.62), rgba(214,222,234,.48) 52%, rgba(202,210,223,.38)) !important;
}



/* ========================================
   V19 — move Monster Hero icon outside the truck card
   ======================================== */
.hero-world.hero-world-retro {
    overflow: visible !important;
}

/* Put the Monster Hero floating icon in the blue-blob zone instead of behind the truck card. */
.hero-floating-card-b {
    right: -1.5% !important;
    top: 68px !important;
    z-index: 5 !important;
    transform: rotate(8deg) !important;
}

@media (max-width: 1100px) {
    .hero-floating-card-b {
        right: -1% !important;
        top: 72px !important;
    }
}

@media (max-width: 767px) {
    .hero-floating-card-b {
        right: -2px !important;
        top: 70px !important;
    }
}


/* ========================================
   V20 — restore dark header with glossy crystal look
   ======================================== */
.site-header,
.site-header.scrolled {
    border: 1px solid rgba(255,255,255,.17) !important;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,.16) 0%,
            rgba(255,255,255,.06) 18%,
            rgba(255,255,255,.02) 40%,
            rgba(255,255,255,.015) 100%),
        linear-gradient(135deg,
            rgba(70,74,84,.82) 0%,
            rgba(52,56,66,.80) 45%,
            rgba(39,43,52,.82) 100%) !important;
    box-shadow:
        0 20px 52px rgba(18,22,30,.22),
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 -1px 0 rgba(255,255,255,.05) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
}

.site-header::before {
    background:
        linear-gradient(108deg,
            rgba(255,255,255,.28) 0%,
            rgba(255,255,255,.14) 14%,
            rgba(255,255,255,.05) 30%,
            rgba(255,255,255,.02) 48%,
            rgba(255,255,255,.10) 74%,
            rgba(255,255,255,.22) 100%) !important;
    opacity: .92 !important;
}

.site-header::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent) !important;
    opacity: .88 !important;
}

.site-header.scrolled {
    background:
        linear-gradient(180deg,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.065) 18%,
            rgba(255,255,255,.02) 42%,
            rgba(255,255,255,.015) 100%),
        linear-gradient(135deg,
            rgba(64,68,78,.86) 0%,
            rgba(47,51,60,.84) 46%,
            rgba(36,40,48,.86) 100%) !important;
}


/* ========================================
   V21 — smoother hero motion, cleaner truck aura, tighter values layout
   ======================================== */
.hero-disc,
.hero-floating-card,
.hero-float-ornament,
.orbit-game-icon,
.about-img-shell,
.ambient-blob {
    will-change: transform, translate, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Make the parrot / lime panel sit tight to the hero art instead of looking like a loose block. */
.hero-disc-lime {
    width: 346px !important;
    height: 372px !important;
    right: 8.5% !important;
    top: 100px !important;
    border-radius: 38px !important;
    opacity: .18 !important;
    background: linear-gradient(180deg, rgba(221, 242, 161, .94) 0%, rgba(207, 237, 193, .76) 48%, rgba(197, 223, 248, .62) 100%) !important;
    box-shadow: 0 20px 38px rgba(48, 58, 72, .05) !important;
}

.hero-main-card.hero-main-card-retro {
    right: 10% !important;
    bottom: 18px !important;
    width: 334px !important;
    height: 360px !important;
    padding: 0 !important;
}

.hero-main-card.hero-main-card-retro::before {
    inset: 10px !important;
    border-radius: 36px !important;
    background:
        radial-gradient(circle at 26% 24%, rgba(255,255,255,.44), rgba(255,255,255,0) 52%),
        radial-gradient(circle at 78% 74%, rgba(122,97,255,.14), rgba(122,97,255,0) 44%),
        radial-gradient(circle at 50% 100%, rgba(174, 231, 132, .16), rgba(174, 231, 132, 0) 52%) !important;
    filter: blur(18px) !important;
    opacity: .9 !important;
}

.hero-main-card.hero-main-card-retro > .hero-feature-art {
    border-radius: 34px !important;
    box-shadow: 0 24px 58px rgba(20,24,31,.18), 0 0 0 1px rgba(255,255,255,.34) !important;
}

.hero-disc-rose {
    animation: v21BlobSlow 15.5s cubic-bezier(.42,0,.24,1) infinite !important;
}
.hero-disc-blue {
    animation: v21BlobMedium 13.8s cubic-bezier(.42,0,.24,1) infinite -4.2s !important;
}
.hero-disc-lime {
    animation: v21BlobCardAura 17.2s cubic-bezier(.42,0,.24,1) infinite -7.5s !important;
}

.hero-floating-card-a {
    animation: v21FloatA 10.2s cubic-bezier(.42,0,.24,1) infinite !important;
}
.hero-floating-card-b {
    animation: v21FloatB 8.8s cubic-bezier(.42,0,.24,1) infinite -2.4s !important;
}
.hero-floating-card-c {
    animation: v21FloatC 9.6s cubic-bezier(.42,0,.24,1) infinite -4.6s !important;
}

.hero-float-ornament-star {
    animation: v21TinyFloat 7.8s cubic-bezier(.42,0,.24,1) infinite -1.2s !important;
}
.hero-float-ornament-pill {
    animation: v21TinyFloatAlt 8.4s cubic-bezier(.42,0,.24,1) infinite -2.1s !important;
}
.hero-float-ornament-dot {
    animation: v21TinyFloat 6.8s cubic-bezier(.42,0,.24,1) infinite -3.2s !important;
}
.hero-float-ornament-diamond {
    animation: v21TinyFloatAlt 7.4s cubic-bezier(.42,0,.24,1) infinite -1.6s !important;
}

.orbit-game-icon-1 { animation: v21OrbitTop 9.2s cubic-bezier(.42,0,.24,1) infinite -1s !important; }
.orbit-game-icon-2 { animation: v21OrbitHigh 8.6s cubic-bezier(.42,0,.24,1) infinite -2.2s !important; }
.orbit-game-icon-3 { animation: v21OrbitMid 9.8s cubic-bezier(.42,0,.24,1) infinite -1.4s !important; }
.orbit-game-icon-4 { animation: v21OrbitLow 8.8s cubic-bezier(.42,0,.24,1) infinite -4.1s !important; }
.orbit-game-icon-5 { animation: v21OrbitBottom 10.1s cubic-bezier(.42,0,.24,1) infinite -3.3s !important; }
.orbit-game-icon-6 { animation: v21OrbitLow 9.1s cubic-bezier(.42,0,.24,1) infinite -5.6s !important; }
.orbit-game-icon-7 { animation: v21OrbitMid 8.9s cubic-bezier(.42,0,.24,1) infinite -6.2s !important; }
.orbit-game-icon-8 { animation: v21OrbitHigh 9.4s cubic-bezier(.42,0,.24,1) infinite -2.8s !important; }

.ambient-blob {
    opacity: .32 !important;
    animation: v21AmbientWander 24s ease-in-out infinite alternate !important;
}
.ambient-blob-two { animation-duration: 28s !important; }
.ambient-blob-three { animation-duration: 30s !important; }

.about-values-section {
    padding: 24px 0 86px !important;
}
.about-values-grid {
    grid-template-columns: minmax(250px, .92fr) repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
}
.about-values-intro {
    min-height: 0 !important;
    padding: 10px 16px 0 0 !important;
    justify-content: flex-start !important;
}
.about-values-intro h2 {
    max-width: 7.8ch !important;
    margin: 18px 0 12px !important;
    font-size: clamp(46px, 4.5vw, 72px) !important;
}
.about-values-intro p {
    max-width: 34ch !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}
.about-value-card {
    min-height: 220px !important;
    padding: 24px 26px 26px !important;
}
.about-value-icon,
.about-value-icon svg,
.about-value-card h3 {
    margin: 26px 0 10px !important;
}
.about-value-card p {
    max-width: none !important;
    line-height: 1.62 !important;
}

@keyframes v21BlobSlow {
    0% { translate: 0 0; scale: 1; }
    38% { translate: 0 -12px; scale: 1.02; }
    70% { translate: 0 -18px; scale: 1.03; }
    100% { translate: 0 7px; scale: 1.015; }
}
@keyframes v21BlobMedium {
    0% { translate: 0 4px; scale: 1; }
    34% { translate: 0 -10px; scale: 1.015; }
    72% { translate: 0 -20px; scale: 1.03; }
    100% { translate: 0 8px; scale: 1.01; }
}
@keyframes v21BlobCardAura {
    0% { translate: 0 0; scale: 1; opacity: .16; }
    50% { translate: 0 -12px; scale: 1.018; opacity: .2; }
    100% { translate: 0 6px; scale: 1.01; opacity: .17; }
}
@keyframes v21FloatA {
    0% { translate: 0 0; }
    40% { translate: 0 -10px; }
    75% { translate: 0 -17px; }
    100% { translate: 0 7px; }
}
@keyframes v21FloatB {
    0% { translate: 0 6px; }
    35% { translate: 0 -6px; }
    70% { translate: 0 -15px; }
    100% { translate: 0 8px; }
}
@keyframes v21FloatC {
    0% { translate: 0 2px; }
    48% { translate: 0 -11px; }
    78% { translate: 0 -16px; }
    100% { translate: 0 6px; }
}
@keyframes v21TinyFloat {
    0% { translate: 0 0; }
    50% { translate: 0 -9px; }
    100% { translate: 0 5px; }
}
@keyframes v21TinyFloatAlt {
    0% { translate: 0 4px; }
    46% { translate: 0 -7px; }
    100% { translate: 0 6px; }
}
@keyframes v21OrbitTop {
    0% { translate: 0 0; scale: 1; }
    45% { translate: 0 -8px; scale: 1.02; }
    100% { translate: 0 4px; scale: 1.01; }
}
@keyframes v21OrbitHigh {
    0% { translate: 0 3px; scale: 1; }
    45% { translate: 0 -7px; scale: 1.018; }
    100% { translate: 0 5px; scale: 1.005; }
}
@keyframes v21OrbitMid {
    0% { translate: 0 1px; scale: 1; }
    45% { translate: 0 -9px; scale: 1.022; }
    100% { translate: 0 6px; scale: 1.008; }
}
@keyframes v21OrbitLow {
    0% { translate: 0 4px; scale: 1; }
    45% { translate: 0 -6px; scale: 1.018; }
    100% { translate: 0 5px; scale: 1.006; }
}
@keyframes v21OrbitBottom {
    0% { translate: 0 5px; scale: 1; }
    45% { translate: 0 -8px; scale: 1.02; }
    100% { translate: 0 6px; scale: 1.008; }
}
@keyframes v21AmbientWander {
    0% { translate: 0 0; scale: 1; }
    50% { translate: 14px -18px; scale: 1.04; }
    100% { translate: -10px 10px; scale: 1.08; }
}

@media (max-width: 980px) {
    .hero-disc-lime {
        width: 322px !important;
        height: 348px !important;
        right: 8% !important;
        top: 104px !important;
    }
    .about-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .about-values-intro {
        grid-column: 1 / -1;
        padding-right: 0 !important;
    }
}

@media (max-width: 760px) {
    .hero-disc-lime {
        width: min(74vw, 292px) !important;
        height: min(80vw, 316px) !important;
        right: 5% !important;
        top: 104px !important;
        opacity: .14 !important;
    }
    .about-values-section {
        padding: 14px 0 74px !important;
    }
    .about-values-grid {
        gap: 14px !important;
    }
    .about-values-intro h2 {
        max-width: 9ch !important;
        font-size: clamp(40px, 11vw, 58px) !important;
    }
    .about-value-card {
        min-height: auto !important;
        padding: 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-disc,
    .hero-floating-card,
    .hero-float-ornament,
    .orbit-game-icon,
    .ambient-blob {
        animation: none !important;
    }
}


/* ========================================
   V22 — remove remaining lime rectangle behind hero truck
   ======================================== */
.hero-disc-lime {
    background: transparent !important;
    opacity: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}


/* ========================================
   V23 — smooth and slower home hero motion
   ======================================== */
/* Main page hero only: reduce speed and remove the jerky feel. */
.home-hero .hero-disc,
.home-hero .hero-floating-card,
.home-hero .hero-float-ornament,
.home-hero .ambient-blob {
    will-change: transform, translate, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
}

.home-hero .hero-disc-rose {
    animation-name: v23HeroDiscRose !important;
    animation-duration: 22s !important;
}
.home-hero .hero-disc-blue {
    animation-name: v23HeroDiscBlue !important;
    animation-duration: 26s !important;
    animation-delay: -6s !important;
}
.home-hero .hero-disc-lime {
    animation-name: v23HeroDiscLime !important;
    animation-duration: 28s !important;
    animation-delay: -9s !important;
}

.home-hero .hero-floating-card-a {
    animation-name: v23HeroCardA !important;
    animation-duration: 15s !important;
    animation-delay: -1.5s !important;
}
.home-hero .hero-floating-card-b {
    animation-name: v23HeroCardB !important;
    animation-duration: 17s !important;
    animation-delay: -4s !important;
}
.home-hero .hero-floating-card-c {
    animation-name: v23HeroCardC !important;
    animation-duration: 16s !important;
    animation-delay: -7s !important;
}

.home-hero .hero-float-ornament-star {
    animation-name: v23HeroTinyA !important;
    animation-duration: 12s !important;
    animation-delay: -2s !important;
}
.home-hero .hero-float-ornament-pill {
    animation-name: v23HeroTinyB !important;
    animation-duration: 14s !important;
    animation-delay: -5s !important;
}
.home-hero .hero-float-ornament-dot {
    animation-name: v23HeroTinyA !important;
    animation-duration: 11s !important;
    animation-delay: -3.2s !important;
}
.home-hero .hero-float-ornament-diamond {
    animation-name: v23HeroTinyB !important;
    animation-duration: 13s !important;
    animation-delay: -1.6s !important;
}

.home-hero .ambient-blob-one {
    animation-name: v23AmbientOne !important;
    animation-duration: 34s !important;
}
.home-hero .ambient-blob-two {
    animation-name: v23AmbientTwo !important;
    animation-duration: 40s !important;
    animation-delay: -10s !important;
}
.home-hero .ambient-blob-three {
    animation-name: v23AmbientThree !important;
    animation-duration: 38s !important;
    animation-delay: -18s !important;
}

@keyframes v23HeroDiscRose {
    from { translate: 0 8px; }
    to   { translate: 0 -14px; }
}
@keyframes v23HeroDiscBlue {
    from { translate: 0 10px; }
    to   { translate: 0 -16px; }
}
@keyframes v23HeroDiscLime {
    from { translate: 0 6px; opacity: 0; }
    to   { translate: 0 -10px; opacity: 0; }
}
@keyframes v23HeroCardA {
    from { translate: 0 5px; }
    to   { translate: 0 -11px; }
}
@keyframes v23HeroCardB {
    from { translate: 0 7px; }
    to   { translate: 0 -9px; }
}
@keyframes v23HeroCardC {
    from { translate: 0 4px; }
    to   { translate: 0 -10px; }
}
@keyframes v23HeroTinyA {
    from { translate: 0 4px; }
    to   { translate: 0 -8px; }
}
@keyframes v23HeroTinyB {
    from { translate: 0 2px; }
    to   { translate: 0 -7px; }
}
@keyframes v23AmbientOne {
    from { translate: 0 0; scale: 1; }
    to   { translate: 14px -18px; scale: 1.04; }
}
@keyframes v23AmbientTwo {
    from { translate: 0 0; scale: 1; }
    to   { translate: -16px 14px; scale: 1.05; }
}
@keyframes v23AmbientThree {
    from { translate: 0 0; scale: 1; }
    to   { translate: 12px 10px; scale: 1.03; }
}


/* =========================================================
   V25 — requested final website polish
   Scope: logo sizing, Contact cleanup, Home hero/stats,
          Games mobile orbit responsiveness.
   ========================================================= */

/* 1) GLOBAL — smaller Ace Games logos only. */
.brand img {
    width: 90px !important;
    max-height: 38px !important;
}
.footer-brand img {
    width: 104px !important;
    height: auto !important;
}

/* 2) CONTACT — remove the old email chip space and move the content upward. */
.contact-page {
    padding-top: 138px !important;
    align-items: start !important;
}
.contact-intro {
    padding-top: 18px;
}
.form-heading {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-bottom: 10px !important;
}
.form-heading small {
    display: block;
    max-width: 440px;
    font-size: 11px !important;
    line-height: 1.55;
}

/* 3) HOME — keep the 70+ label aligned/wrapped like the other stat cards. */
.stat-card-published span {
    max-width: 175px !important;
    line-height: 1.42 !important;
}

/* Home hero composition: roughly 30% smaller overall on desktop.
   Main truck, blobs, floating icons and small objects scale together. */
@media (min-width: 981px) {
    .home-hero .hero-world-retro {
        min-height: 410px !important;
        transform: scale(.70);
        transform-origin: 56% 48%;
        margin-top: -8px;
        margin-bottom: -38px;
    }
}

/* Tablet: slightly less aggressive shrink so the composition stays balanced. */
@media (min-width: 761px) and (max-width: 980px) {
    .home-hero .hero-world-retro {
        min-height: 430px !important;
        transform: scale(.84);
        transform-origin: 50% 48%;
        margin-top: -6px;
        margin-bottom: -24px;
    }
}

/* Mobile already uses a compact composition; keep it only mildly reduced. */
@media (max-width: 760px) {
    .home-hero .hero-world-retro {
        min-height: 380px !important;
        transform: scale(.92);
        transform-origin: 50% 46%;
        margin-top: -4px;
        margin-bottom: -14px;
    }
}

/* 4) GAMES — keep every mobile icon inside the orbit instead of letting
   the cards drift outside the SVG rings. */
@media (max-width: 760px) {
    .games-icon-orbit {
        width: min(340px, 88vw) !important;
        aspect-ratio: 1 / 1;
        overflow: visible;
    }

    .games-icon-orbit .orbit-game-icon {
        width: clamp(46px, 14vw, 54px) !important;
        height: clamp(46px, 14vw, 54px) !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) rotate(var(--mobile-orbit-rotation, 0deg)) !important;
        transform-origin: center !important;
    }

    .games-icon-orbit .orbit-game-icon-1 {
        left: 50% !important;
        top: 14% !important;
        --mobile-orbit-rotation: 5deg;
        --orbit-base-transform: translate(-50%, -50%) rotate(5deg);
    }
    .games-icon-orbit .orbit-game-icon-2 {
        left: 75% !important;
        top: 25% !important;
        --mobile-orbit-rotation: -5deg;
        --orbit-base-transform: translate(-50%, -50%) rotate(-5deg);
    }
    .games-icon-orbit .orbit-game-icon-3 {
        left: 86% !important;
        top: 50% !important;
        --mobile-orbit-rotation: 6deg;
        --orbit-base-transform: translate(-50%, -50%) rotate(6deg);
    }
    .games-icon-orbit .orbit-game-icon-4 {
        left: 75% !important;
        top: 75% !important;
        --mobile-orbit-rotation: -4deg;
        --orbit-base-transform: translate(-50%, -50%) rotate(-4deg);
    }
    .games-icon-orbit .orbit-game-icon-5 {
        left: 50% !important;
        top: 86% !important;
        --mobile-orbit-rotation: 5deg;
        --orbit-base-transform: translate(-50%, -50%) rotate(5deg);
    }
    .games-icon-orbit .orbit-game-icon-6 {
        left: 25% !important;
        top: 75% !important;
        --mobile-orbit-rotation: -6deg;
        --orbit-base-transform: translate(-50%, -50%) rotate(-6deg);
    }
    .games-icon-orbit .orbit-game-icon-7 {
        left: 14% !important;
        top: 50% !important;
        --mobile-orbit-rotation: 4deg;
        --orbit-base-transform: translate(-50%, -50%) rotate(4deg);
    }
    .games-icon-orbit .orbit-game-icon-8 {
        left: 25% !important;
        top: 25% !important;
        --mobile-orbit-rotation: -5deg;
        --orbit-base-transform: translate(-50%, -50%) rotate(-5deg);
    }

    .games-icon-orbit .orbit-game-icon:hover {
        transform: translate(-50%, -50%) rotate(var(--mobile-orbit-rotation, 0deg)) scale(1.035) !important;
    }

    .games-orbit-core {
        width: clamp(82px, 24vw, 96px) !important;
    }
    .games-orbit-core strong {
        font-size: clamp(27px, 8vw, 34px) !important;
    }
}

/* Extra-small phones: pull icons another step inward. */
@media (max-width: 420px) {
    .games-icon-orbit {
        width: min(300px, 90vw) !important;
    }
    .games-icon-orbit .orbit-game-icon {
        width: 46px !important;
        height: 46px !important;
        border-radius: 15px !important;
    }
    .games-icon-orbit .orbit-game-icon-1 { top: 15% !important; }
    .games-icon-orbit .orbit-game-icon-3 { left: 85% !important; }
    .games-icon-orbit .orbit-game-icon-5 { top: 85% !important; }
    .games-icon-orbit .orbit-game-icon-7 { left: 15% !important; }

    .brand img {
        width: 84px !important;
        max-height: 36px !important;
    }
    .footer-brand img {
        width: 98px !important;
    }
}


/* =========================================================
   V25.1 — three requested visual fixes only
   ========================================================= */

/* 70+ card: first line aligns like the other stat labels;
   only "our network" drops to line two. */
.stat-card-published span {
    max-width: 190px !important;
    line-height: 1.42 !important;
}

/* Keep the Monster Hero floating icon clear of the main truck artwork. */
@media (min-width: 981px) {
    .home-hero .hero-floating-card-b {
        right: -13% !important;
        top: 64px !important;
    }
}

/* Footer Ace Games logo — smaller than V25. */
.footer-brand img {
    width: 82px !important;
    height: auto !important;
}

@media (max-width: 760px) {
    .footer-brand img {
        width: 78px !important;
    }
}


/* =========================================================
   V25.2 — 70+ stat text alignment fix only
   ========================================================= */
.stat-card-published span {
    max-width: none !important;
    white-space: nowrap !important;
}

/* On narrower screens, allow natural wrapping to avoid overflow. */
@media (max-width: 760px) {
    .stat-card-published span {
        white-space: normal !important;
    }
}


/* =========================================================
   V25.3 — hero detail sizing + mobile stats/orbit cleanup
   ========================================================= */

/* HOME HERO — slightly larger supporting icons and blobs while
   keeping the truck composition itself at the V25 compact scale. */
@media (min-width: 981px) {
    .home-hero .hero-floating-card {
        width: 108px !important;
        height: 108px !important;
        border-radius: 28px !important;
    }

    .home-hero .hero-disc-rose {
        width: 276px !important;
        height: 276px !important;
        left: 8% !important;
        top: 18px !important;
    }

    .home-hero .hero-disc-blue {
        width: 252px !important;
        height: 252px !important;
        right: 0 !important;
        top: -10px !important;
    }

    /* Keep Monster Hero clear of the main truck image. */
    .home-hero .hero-floating-card-b {
        right: -17% !important;
        top: 58px !important;
    }

    .home-hero .hero-floating-card-a {
        left: 12% !important;
        top: 92px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 15% !important;
        bottom: 18px !important;
    }
}

/* HOME STATS — mobile labels and rating stay visually aligned. */
@media (max-width: 760px) {
    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .hero-stats .stat-card {
        min-height: 112px !important;
        padding: 17px 16px !important;
        justify-content: flex-start !important;
        gap: 17px !important;
    }

    .hero-stats .stat-card strong {
        min-height: 31px;
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        white-space: nowrap;
    }

    .hero-stats .stat-card span {
        max-width: 100% !important;
        min-height: 31px;
        margin: 0 !important;
        line-height: 1.42 !important;
        white-space: normal !important;
    }

    .hero-stats .stat-card-published span {
        white-space: normal !important;
    }

    .hero-stats .stat-stars {
        display: inline-flex !important;
        flex: 0 0 auto;
        white-space: nowrap !important;
        font-size: clamp(12px, 3.6vw, 16px) !important;
        letter-spacing: -1px !important;
        line-height: 1 !important;
    }

    .hero-stats .stat-card-rating strong {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
}

@media (max-width: 420px) {
    .hero-stats .stat-card {
        min-height: 108px !important;
        padding: 15px 14px !important;
        gap: 15px !important;
    }

    .hero-stats .stat-card strong {
        font-size: 27px !important;
    }

    .hero-stats .stat-card span {
        font-size: 10px !important;
    }

    .hero-stats .stat-stars {
        font-size: 11px !important;
        letter-spacing: -1.3px !important;
    }
}

/* GAMES ORBIT — mobile:
   square cards, edge-to-edge artwork and stable positions on the orbit. */
@media (max-width: 760px) {
    .games-icon-orbit {
        width: min(330px, 86vw) !important;
        aspect-ratio: 1 / 1 !important;
        overflow: visible !important;
    }

    .games-icon-orbit .games-orbit-lines {
        width: 100% !important;
        height: 100% !important;
        inset: 0 !important;
    }

    .games-icon-orbit .orbit-game-icon {
        width: clamp(48px, 14vw, 56px) !important;
        height: clamp(48px, 14vw, 56px) !important;
        aspect-ratio: 1 / 1 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 16px !important;
        object-fit: cover !important;
        object-position: center !important;
        background: transparent !important;
        box-shadow: 0 10px 22px rgba(18,18,18,.10) !important;
        overflow: hidden !important;

        /* Lock cards to their mobile orbit coordinates.
           Disable the desktop float animation that pushes them off-ring. */
        animation: none !important;
        translate: none !important;
        scale: none !important;
    }

    /* Outer ring coordinates, pulled slightly inward so cards sit ON the ring
       and remain fully inside the mobile viewport. */
    .games-icon-orbit .orbit-game-icon-1 {
        left: 50% !important;
        top: 7% !important;
        transform: translate(-50%, -50%) rotate(5deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-2 {
        left: 80.5% !important;
        top: 19.5% !important;
        transform: translate(-50%, -50%) rotate(-5deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-3 {
        left: 93% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) rotate(6deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-4 {
        left: 80.5% !important;
        top: 80.5% !important;
        transform: translate(-50%, -50%) rotate(-4deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-5 {
        left: 50% !important;
        top: 93% !important;
        transform: translate(-50%, -50%) rotate(5deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-6 {
        left: 19.5% !important;
        top: 80.5% !important;
        transform: translate(-50%, -50%) rotate(-6deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-7 {
        left: 7% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) rotate(4deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-8 {
        left: 19.5% !important;
        top: 19.5% !important;
        transform: translate(-50%, -50%) rotate(-5deg) !important;
    }

    .games-orbit-core {
        width: clamp(88px, 26vw, 102px) !important;
        aspect-ratio: 1 / 1 !important;
    }

    .games-orbit-core strong {
        font-size: clamp(28px, 8vw, 35px) !important;
    }
}

@media (max-width: 420px) {
    .games-icon-orbit {
        width: min(286px, 86vw) !important;
    }

    .games-icon-orbit .orbit-game-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
    }

    /* Pull all eight cards a touch inward on very small screens. */
    .games-icon-orbit .orbit-game-icon-1 { top: 8.5% !important; }
    .games-icon-orbit .orbit-game-icon-2 { left: 79.5% !important; top: 20.5% !important; }
    .games-icon-orbit .orbit-game-icon-3 { left: 91.5% !important; }
    .games-icon-orbit .orbit-game-icon-4 { left: 79.5% !important; top: 79.5% !important; }
    .games-icon-orbit .orbit-game-icon-5 { top: 91.5% !important; }
    .games-icon-orbit .orbit-game-icon-6 { left: 20.5% !important; top: 79.5% !important; }
    .games-icon-orbit .orbit-game-icon-7 { left: 8.5% !important; }
    .games-icon-orbit .orbit-game-icon-8 { left: 20.5% !important; top: 20.5% !important; }

    .games-orbit-core {
        width: 84px !important;
    }
    .games-orbit-core strong {
        font-size: 27px !important;
    }
}


/* =========================================================
   V25.4 — PC icon sizing + mobile hero/orbit composition polish
   ========================================================= */

/* HOME / DESKTOP:
   Make the three supporting game icons a little more prominent
   without changing the current truck size. */
@media (min-width: 981px) {
    .home-hero .hero-floating-card {
        width: 122px !important;
        height: 122px !important;
        border-radius: 30px !important;
    }

    .home-hero .hero-floating-card-a {
        left: 8% !important;
        top: 84px !important;
    }

    .home-hero .hero-floating-card-b {
        right: -20% !important;
        top: 52px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 10% !important;
        bottom: 10px !important;
    }
}


/* HOME / MOBILE:
   Rebuild the visual as a compact composition instead of simply
   scaling the desktop stage. This prevents the truck from dominating
   the screen and keeps the three game icons visible around it. */
@media (max-width: 760px) {
    .home-hero .hero-world-retro {
        width: min(330px, 90vw) !important;
        min-height: 315px !important;
        height: 315px !important;
        margin: 0 auto 4px !important;
        transform: none !important;
        overflow: visible !important;
    }

    .home-hero .hero-main-card.hero-main-card-retro {
        width: min(230px, 64vw) !important;
        height: min(250px, 69vw) !important;
        right: 50% !important;
        left: auto !important;
        bottom: 30px !important;
        padding: 0 !important;
        border-radius: 26px !important;
        transform: translateX(50%) !important;
    }

    .home-hero .hero-main-card.hero-main-card-retro > .hero-feature-art {
        width: 100% !important;
        height: 100% !important;
        border-radius: 26px !important;
        object-fit: cover !important;
    }

    .home-hero .hero-disc-rose {
        width: 150px !important;
        height: 150px !important;
        left: 2% !important;
        top: 35px !important;
    }

    .home-hero .hero-disc-blue {
        width: 142px !important;
        height: 142px !important;
        right: 0 !important;
        top: 18px !important;
    }

    .home-hero .hero-floating-card {
        width: 58px !important;
        height: 58px !important;
        border-radius: 17px !important;
        box-shadow: 0 12px 24px rgba(22,24,29,.13) !important;
        animation: none !important;
        translate: none !important;
    }

    .home-hero .hero-floating-card-a {
        left: -1% !important;
        top: 104px !important;
        right: auto !important;
        bottom: auto !important;
        transform: rotate(-6deg) !important;
    }

    .home-hero .hero-floating-card-b {
        right: -1% !important;
        top: 76px !important;
        left: auto !important;
        bottom: auto !important;
        transform: rotate(7deg) !important;
    }

    .home-hero .hero-floating-card-c {
        left: 4% !important;
        bottom: 23px !important;
        right: auto !important;
        top: auto !important;
        transform: rotate(5deg) !important;
    }

    .home-hero .hero-float-ornament {
        transform: scale(.78) !important;
    }
}

@media (max-width: 420px) {
    .home-hero .hero-world-retro {
        width: min(300px, 88vw) !important;
        min-height: 286px !important;
        height: 286px !important;
    }

    .home-hero .hero-main-card.hero-main-card-retro {
        width: min(208px, 62vw) !important;
        height: min(226px, 67vw) !important;
        bottom: 28px !important;
    }

    .home-hero .hero-disc-rose {
        width: 132px !important;
        height: 132px !important;
        left: 1% !important;
        top: 34px !important;
    }

    .home-hero .hero-disc-blue {
        width: 126px !important;
        height: 126px !important;
        right: 1% !important;
        top: 20px !important;
    }

    .home-hero .hero-floating-card {
        width: 52px !important;
        height: 52px !important;
        border-radius: 15px !important;
    }

    .home-hero .hero-floating-card-a {
        left: 0 !important;
        top: 94px !important;
    }

    .home-hero .hero-floating-card-b {
        right: 0 !important;
        top: 72px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 4% !important;
        bottom: 18px !important;
    }
}


/* GAMES / MOBILE:
   Use one compact circle and place all eight icons evenly on that same ring.
   Positions are expressed around a ~39% radius from the center. */
@media (max-width: 760px) {
    .games-hero {
        gap: 18px !important;
    }

    .games-icon-orbit {
        width: min(310px, 84vw) !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        margin: 8px auto 10px !important;
        overflow: visible !important;
    }

    .games-icon-orbit .games-orbit-lines {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* De-emphasize the inner circle/connectors on phones so the composition
       reads as one clean orbit instead of several oversized rings. */
    .games-icon-orbit .games-orbit-lines circle:first-of-type {
        opacity: .42;
    }

    .games-icon-orbit .orbit-game-icon {
        width: 54px !important;
        height: 54px !important;
        aspect-ratio: 1 / 1 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 16px !important;
        object-fit: cover !important;
        background: transparent !important;
        animation: none !important;
        translate: none !important;
        scale: none !important;
        margin: 0 !important;
        box-shadow: 0 10px 22px rgba(18,18,18,.10) !important;
    }

    /* Clock positions: 12, 1:30, 3, 4:30, 6, 7:30, 9, 10:30 */
    .games-icon-orbit .orbit-game-icon-1 {
        left: 50% !important; top: 11% !important;
        transform: translate(-50%, -50%) rotate(5deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-2 {
        left: 77.5% !important; top: 22.5% !important;
        transform: translate(-50%, -50%) rotate(-5deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-3 {
        left: 89% !important; top: 50% !important;
        transform: translate(-50%, -50%) rotate(6deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-4 {
        left: 77.5% !important; top: 77.5% !important;
        transform: translate(-50%, -50%) rotate(-4deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-5 {
        left: 50% !important; top: 89% !important;
        transform: translate(-50%, -50%) rotate(5deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-6 {
        left: 22.5% !important; top: 77.5% !important;
        transform: translate(-50%, -50%) rotate(-6deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-7 {
        left: 11% !important; top: 50% !important;
        transform: translate(-50%, -50%) rotate(4deg) !important;
    }
    .games-icon-orbit .orbit-game-icon-8 {
        left: 22.5% !important; top: 22.5% !important;
        transform: translate(-50%, -50%) rotate(-5deg) !important;
    }

    .games-orbit-core {
        width: 92px !important;
        aspect-ratio: 1 / 1 !important;
    }

    .games-orbit-core strong {
        font-size: 31px !important;
    }

    .games-orbit-core span {
        font-size: 8px !important;
        margin-top: 5px !important;
    }
}

@media (max-width: 420px) {
    .games-icon-orbit {
        width: min(282px, 84vw) !important;
    }

    .games-icon-orbit .orbit-game-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
    }

    .games-orbit-core {
        width: 84px !important;
    }

    .games-orbit-core strong {
        font-size: 28px !important;
    }
}


/* =========================================================
   V25.6 — hero cleanup: remove extra game icons, smaller MT art,
            larger blobs, and richer decorative floating items
   ========================================================= */

/* New decorative floating ornaments (not game icons). */
.home-hero .hero-float-ornament-ring,
.home-hero .hero-float-ornament-chip,
.home-hero .hero-float-ornament-spark,
.home-hero .hero-float-ornament-micro {
    position: absolute;
    display: block;
    z-index: 4;
    animation: objectFloat 6s ease-in-out infinite;
    box-shadow: 0 14px 28px rgba(20, 24, 31, .08);
}

.home-hero .hero-float-ornament-ring {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 6px solid rgba(122, 97, 255, .24);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(3px);
    animation-delay: -1.4s;
}

.home-hero .hero-float-ornament-chip {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: linear-gradient(135deg, #fff4be 0%, #ffd66b 100%);
    transform: rotate(16deg);
    animation-delay: -2.4s;
}

.home-hero .hero-float-ornament-chip::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 5px;
    border: 2px solid rgba(135, 94, 0, .28);
}

.home-hero .hero-float-ornament-spark {
    width: 18px;
    height: 18px;
    clip-path: polygon(50% 0%, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0% 50%, 34% 34%);
    background: #8f7aff;
    animation-delay: -3.1s;
}

.home-hero .hero-float-ornament-micro {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #ff9ac1;
    animation-delay: -4s;
}

/* DESKTOP / LAPTOP */
@media (min-width: 981px) {
    .home-hero .hero-world-retro {
        min-height: 398px !important;
        margin-top: -6px !important;
        margin-bottom: -18px !important;
    }

    .home-hero .hero-main-card.hero-main-card-retro {
        width: 270px !important;
        height: 294px !important;
        right: 12.5% !important;
        bottom: 40px !important;
        border-radius: 30px !important;
    }

    .home-hero .hero-main-card.hero-main-card-retro > .hero-feature-art {
        border-radius: 30px !important;
        box-shadow: 0 20px 42px rgba(20, 24, 31, .13) !important;
    }

    .home-hero .hero-disc-rose {
        width: 214px !important;
        height: 214px !important;
        left: 11% !important;
        top: 78px !important;
    }

    .home-hero .hero-disc-blue {
        width: 196px !important;
        height: 196px !important;
        right: 4% !important;
        top: 54px !important;
    }

    .home-hero .hero-disc-lime {
        right: -1% !important;
        top: 156px !important;
        width: 72px !important;
        height: 18px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #c4ef69 0%, #d6ff8d 100%) !important;
        box-shadow: none !important;
        opacity: .95 !important;
    }

    .home-hero .hero-floating-card {
        width: 122px !important;
        height: 122px !important;
        border-radius: 30px !important;
    }

    .home-hero .hero-floating-card-a {
        left: 8.5% !important;
        top: 92px !important;
    }

    .home-hero .hero-floating-card-b {
        right: -18.5% !important;
        top: 70px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 11% !important;
        bottom: 8px !important;
    }

    .home-hero .hero-float-ornament-star {
        left: 20% !important;
        top: 64px !important;
    }

    .home-hero .hero-float-ornament-pill {
        right: 4% !important;
        top: 184px !important;
    }

    .home-hero .hero-float-ornament-dot {
        left: 38% !important;
        bottom: 14px !important;
    }

    .home-hero .hero-float-ornament-diamond {
        left: 61% !important;
        bottom: 18px !important;
    }

    .home-hero .hero-float-ornament-ring {
        left: 29% !important;
        top: 30px !important;
    }

    .home-hero .hero-float-ornament-chip {
        right: 17% !important;
        bottom: 28px !important;
    }

    .home-hero .hero-float-ornament-spark {
        right: 26% !important;
        top: 34px !important;
    }

    .home-hero .hero-float-ornament-micro {
        left: 29% !important;
        bottom: 56px !important;
    }
}

/* TABLET */
@media (min-width: 761px) and (max-width: 980px) {
    .home-hero .hero-world-retro {
        min-height: 368px !important;
        margin-bottom: -10px !important;
    }

    .home-hero .hero-main-card.hero-main-card-retro {
        width: 248px !important;
        height: 272px !important;
        right: 10.5% !important;
        bottom: 38px !important;
        border-radius: 28px !important;
    }

    .home-hero .hero-main-card.hero-main-card-retro > .hero-feature-art {
        border-radius: 28px !important;
    }

    .home-hero .hero-disc-rose {
        width: 194px !important;
        height: 194px !important;
        left: 9% !important;
        top: 80px !important;
    }

    .home-hero .hero-disc-blue {
        width: 176px !important;
        height: 176px !important;
        right: 3% !important;
        top: 56px !important;
    }

    .home-hero .hero-disc-lime {
        right: 1% !important;
        top: 168px !important;
        width: 66px !important;
        height: 16px !important;
        border-radius: 999px !important;
    }

    .home-hero .hero-floating-card-a { left: 8% !important; top: 98px !important; }
    .home-hero .hero-floating-card-b { right: -10% !important; top: 84px !important; }
    .home-hero .hero-floating-card-c { left: 10% !important; bottom: 18px !important; }

    .home-hero .hero-float-ornament-ring { left: 28% !important; top: 36px !important; }
    .home-hero .hero-float-ornament-chip { right: 16% !important; bottom: 34px !important; }
    .home-hero .hero-float-ornament-spark { right: 24% !important; top: 42px !important; }
    .home-hero .hero-float-ornament-micro { left: 28% !important; bottom: 62px !important; }
}

/* MOBILE */
@media (max-width: 760px) {
    .home-hero .hero-world-retro {
        width: min(304px, 86vw) !important;
        min-height: 284px !important;
        height: 284px !important;
        margin: 0 auto 2px !important;
        overflow: visible !important;
    }

    .home-hero .hero-main-card.hero-main-card-retro {
        width: min(188px, 55vw) !important;
        height: min(204px, 60vw) !important;
        right: 50% !important;
        bottom: 22px !important;
        transform: translateX(50%) !important;
        border-radius: 24px !important;
    }

    .home-hero .hero-main-card.hero-main-card-retro > .hero-feature-art {
        border-radius: 24px !important;
    }

    .home-hero .hero-disc-rose {
        width: 126px !important;
        height: 126px !important;
        left: -1% !important;
        top: 62px !important;
    }

    .home-hero .hero-disc-blue {
        width: 118px !important;
        height: 118px !important;
        right: -1% !important;
        top: 48px !important;
    }

    .home-hero .hero-disc-lime {
        width: 44px !important;
        height: 14px !important;
        right: 0 !important;
        top: 170px !important;
        border-radius: 999px !important;
        box-shadow: none !important;
    }

    .home-hero .hero-floating-card {
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 20px rgba(22,24,29,.12) !important;
    }

    .home-hero .hero-floating-card-a {
        left: -2% !important;
        top: 126px !important;
        transform: rotate(-6deg) !important;
    }

    .home-hero .hero-floating-card-b {
        right: -1% !important;
        top: 118px !important;
        transform: rotate(7deg) !important;
    }

    .home-hero .hero-floating-card-c {
        left: 4% !important;
        bottom: 6px !important;
        transform: rotate(5deg) !important;
    }

    .home-hero .hero-float-ornament-star {
        left: 12% !important;
        top: 102px !important;
        transform: scale(.88) !important;
    }

    .home-hero .hero-float-ornament-pill {
        right: -1% !important;
        top: 172px !important;
        transform: scale(.78) !important;
    }

    .home-hero .hero-float-ornament-dot {
        left: 50% !important;
        bottom: 6px !important;
        transform: scale(.82) !important rotate(45deg) !important;
    }

    .home-hero .hero-float-ornament-diamond {
        left: 64% !important;
        bottom: 16px !important;
        transform: scale(.74) !important;
    }

    .home-hero .hero-float-ornament-ring {
        left: 24% !important;
        top: 42px !important;
        transform: scale(.72) !important;
    }

    .home-hero .hero-float-ornament-chip {
        right: 17% !important;
        bottom: 14px !important;
        transform: scale(.74) rotate(14deg) !important;
    }

    .home-hero .hero-float-ornament-spark {
        right: 26% !important;
        top: 46px !important;
        transform: scale(.84) !important;
    }

    .home-hero .hero-float-ornament-micro {
        left: 26% !important;
        bottom: 44px !important;
        transform: scale(.84) !important;
    }
}

@media (max-width: 420px) {
    .home-hero .hero-world-retro {
        width: min(290px, 84vw) !important;
        min-height: 270px !important;
        height: 270px !important;
    }

    .home-hero .hero-main-card.hero-main-card-retro {
        width: min(178px, 54vw) !important;
        height: min(194px, 58vw) !important;
        bottom: 20px !important;
    }

    .home-hero .hero-floating-card {
        width: 48px !important;
        height: 48px !important;
        border-radius: 15px !important;
    }

    .home-hero .hero-floating-card-a { left: -2% !important; top: 122px !important; }
    .home-hero .hero-floating-card-b { right: -1% !important; top: 114px !important; }
    .home-hero .hero-floating-card-c { left: 4% !important; bottom: 6px !important; }

    .home-hero .hero-disc-rose {
        width: 118px !important;
        height: 118px !important;
    }

    .home-hero .hero-disc-blue {
        width: 110px !important;
        height: 110px !important;
    }
}

/* Extra safety for the mobile published-games orbit so it stays circular. */
@media (max-width: 760px) {
    .games-icon-orbit {
        width: min(286px, 82vw) !important;
        height: min(286px, 82vw) !important;
        aspect-ratio: 1 / 1 !important;
        align-self: center !important;
    }

    .games-icon-orbit .games-orbit-lines,
    .games-icon-orbit svg {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }
}


/* =========================================================
   V25.6.1 — fine tune hero cluster placement
   - lower left peach blob
   - remove lime horizontal lines
   - bring 3 game cards closer to main card
   ========================================================= */

@media (min-width: 981px) {
    .home-hero .hero-disc-rose {
        top: 98px !important;
        left: 12.5% !important;
    }

    .home-hero .hero-disc-lime {
        display: none !important;
    }

    .home-hero .hero-floating-card-a {
        left: 12.5% !important;
        top: 102px !important;
    }

    .home-hero .hero-floating-card-b {
        right: -11.5% !important;
        top: 86px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 15% !important;
        bottom: 16px !important;
    }
}

@media (min-width: 761px) and (max-width: 980px) {
    .home-hero .hero-disc-rose {
        top: 96px !important;
        left: 10.5% !important;
    }

    .home-hero .hero-disc-lime {
        display: none !important;
    }

    .home-hero .hero-floating-card-a {
        left: 11.5% !important;
        top: 106px !important;
    }

    .home-hero .hero-floating-card-b {
        right: -6% !important;
        top: 92px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 13% !important;
        bottom: 22px !important;
    }
}

@media (max-width: 760px) {
    .home-hero .hero-disc-rose {
        top: 78px !important;
        left: 2% !important;
    }

    .home-hero .hero-disc-lime {
        display: none !important;
    }

    .home-hero .hero-floating-card-a {
        left: 1% !important;
        top: 134px !important;
    }

    .home-hero .hero-floating-card-b {
        right: 1% !important;
        top: 126px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 8% !important;
        bottom: 8px !important;
    }
}

@media (max-width: 420px) {
    .home-hero .hero-disc-rose {
        top: 82px !important;
        left: 3% !important;
    }

    .home-hero .hero-floating-card-a {
        left: 2% !important;
        top: 130px !important;
    }

    .home-hero .hero-floating-card-b {
        right: 2% !important;
        top: 122px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 8% !important;
        bottom: 8px !important;
    }
}


/* =========================================================
   V25.6.2 — remove remaining lime line and tighten hero icons
   ========================================================= */

.home-hero .hero-disc-lime {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

@media (min-width: 981px) {
    .home-hero .hero-disc-rose {
        top: 108px !important;
        left: 15.5% !important;
    }

    .home-hero .hero-floating-card-a {
        left: 15.5% !important;
        top: 112px !important;
    }

    .home-hero .hero-floating-card-b {
        right: -8.5% !important;
        top: 94px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 18% !important;
        bottom: 26px !important;
    }
}

@media (min-width: 761px) and (max-width: 980px) {
    .home-hero .hero-disc-rose {
        top: 102px !important;
        left: 12.5% !important;
    }

    .home-hero .hero-floating-card-a {
        left: 13% !important;
        top: 110px !important;
    }

    .home-hero .hero-floating-card-b {
        right: -4% !important;
        top: 98px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 14.5% !important;
        bottom: 26px !important;
    }
}

@media (max-width: 760px) {
    .home-hero .hero-disc-rose {
        top: 88px !important;
        left: 4% !important;
    }

    .home-hero .hero-floating-card-a {
        left: 3% !important;
        top: 138px !important;
    }

    .home-hero .hero-floating-card-b {
        right: 2.5% !important;
        top: 134px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 7% !important;
        bottom: 16px !important;
    }
}

@media (max-width: 420px) {
    .home-hero .hero-disc-rose {
        top: 92px !important;
        left: 5% !important;
    }

    .home-hero .hero-floating-card-a {
        left: 4% !important;
        top: 136px !important;
    }

    .home-hero .hero-floating-card-b {
        right: 3% !important;
        top: 132px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 8% !important;
        bottom: 18px !important;
    }
}


/* =========================================================
   V25.6.3 — MOBILE ONLY hero sizing polish
   ========================================================= */
@media (max-width: 760px) {
    /* Main Monster Truck artwork: slightly smaller on phones only. */
    .home-hero .hero-main-card.hero-main-card-retro {
        width: min(168px, 49vw) !important;
        height: min(184px, 54vw) !important;
        bottom: 28px !important;
        border-radius: 22px !important;
    }

    .home-hero .hero-main-card.hero-main-card-retro > .hero-feature-art {
        border-radius: 22px !important;
    }

    /* Existing 3 supporting game icons: a little bigger, true edge-to-edge artwork. */
    .home-hero .hero-floating-card-a,
    .home-hero .hero-floating-card-b,
    .home-hero .hero-floating-card-c {
        width: 58px !important;
        height: 58px !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 17px !important;
        overflow: hidden !important;
        background: transparent !important;
        box-shadow: 0 10px 20px rgba(22,24,29,.10) !important;
    }

    .home-hero .hero-floating-card-a img,
    .home-hero .hero-floating-card-b img,
    .home-hero .hero-floating-card-c img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        border: 0 !important;
        border-radius: inherit !important;
    }

    /* Move cards outward just enough to prevent overlap with the smaller center card. */
    .home-hero .hero-floating-card-a {
        left: 1% !important;
        top: 130px !important;
    }

    .home-hero .hero-floating-card-b {
        right: 1% !important;
        top: 126px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 5% !important;
        bottom: 10px !important;
    }
}

@media (max-width: 420px) {
    .home-hero .hero-main-card.hero-main-card-retro {
        width: min(158px, 48vw) !important;
        height: min(174px, 53vw) !important;
        bottom: 26px !important;
    }

    .home-hero .hero-floating-card-a,
    .home-hero .hero-floating-card-b,
    .home-hero .hero-floating-card-c {
        width: 54px !important;
        height: 54px !important;
        border-radius: 16px !important;
    }

    .home-hero .hero-floating-card-a {
        left: 1% !important;
        top: 128px !important;
    }

    .home-hero .hero-floating-card-b {
        right: 1% !important;
        top: 124px !important;
    }

    .home-hero .hero-floating-card-c {
        left: 5% !important;
        bottom: 10px !important;
    }
}