/* Geneva cloud-gaming teasers (freelance). Drawn at 600×600 inside .mock-c and scaled to fit (see geneva.js). */
.gv { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0A1214; color: #fff; font-family: 'Inter', system-ui, sans-serif; --teal: #00DDD6; --teal2: #00A9C4; }
.gv-logo { height: 26px; display: block; }
.btn-teal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 3px; background: linear-gradient(180deg, #19E3DC, #00C6CF); color: #04201F; font: 800 12.5px 'Inter', sans-serif; letter-spacing: .09em; box-shadow: 0 10px 26px -10px rgba(0, 221, 214, .7); white-space: nowrap; }
.btn-teal svg { width: 12px; height: 12px; }

/* ---- 1. storefront coverflow ---- */
.gv-top { position: absolute; left: 34px; right: 34px; top: 34px; display: flex; align-items: center; justify-content: space-between; }
.gv-top span { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--teal); }
.cf { position: absolute; left: 0; right: 0; top: 150px; height: 230px; perspective: 1200px; }
.cf-i { position: absolute; left: 50%; top: 0; width: 340px; height: 198px; margin-left: -170px; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 30px 60px -20px #000, 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .9s ease, filter .9s ease; will-change: transform; }
.cf-i[data-p="0"] { transform: translateZ(0); z-index: 5; }
.cf-i[data-p="1"] { transform: translateX(220px) translateZ(-180px) rotateY(-28deg); z-index: 4; filter: brightness(.6); }
.cf-i[data-p="-1"] { transform: translateX(-220px) translateZ(-180px) rotateY(28deg); z-index: 4; filter: brightness(.6); }
.cf-i[data-p="2"] { transform: translateX(380px) translateZ(-380px) rotateY(-36deg); z-index: 3; opacity: 0; }
.cf-i[data-p="-2"] { transform: translateX(-380px) translateZ(-380px) rotateY(36deg); z-index: 3; opacity: 0; }
.cf-i[data-p="0"]::after { content: '1H FREE'; position: absolute; left: 12px; top: 12px; padding: 3px 7px; border-radius: 3px; font: 700 10px 'Inter', sans-serif; letter-spacing: .08em; color: var(--teal); background: rgba(5, 15, 18, .78); box-shadow: inset 0 0 0 1px rgba(0, 221, 214, .5); }
.cf-dots { position: absolute; left: 0; right: 0; top: 380px; display: flex; justify-content: center; gap: 6px; }
.cf-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .25); transition: width .5s, background .5s; }
.cf-dots i.on { width: 18px; background: var(--teal); }
.gv-meta { position: absolute; left: 0; right: 0; top: 410px; text-align: center; }
.gv-meta b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; transition: opacity .3s; }
.gv-meta small { display: block; margin-top: 6px; font-size: 12.5px; color: #8FA4A8; transition: opacity .3s; }
.gv-meta .swap { opacity: 0; }
.gv-cta { position: absolute; left: 0; right: 0; bottom: 42px; display: flex; justify-content: center; gap: 10px; }
.gv-cta .ghost { display: inline-grid; place-items: center; height: 40px; padding: 0 18px; border-radius: 3px; font: 700 12.5px 'Inter', sans-serif; letter-spacing: .09em; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }

/* ---- 2. try before you buy, on a monitor ---- */
.gv-desk { background: radial-gradient(60% 45% at 52% 50%, rgba(0, 169, 196, .12), transparent 70%), linear-gradient(180deg, #0B1416, #050809); perspective: 1400px; }
.mon { position: absolute; left: 50%; top: 116px; width: 562px; height: 358px; margin-left: -299px; padding: 9px; border-radius: 16px;
  background: linear-gradient(145deg, #2A3134, #12171A 45%, #0B0F11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 50px 80px -30px #000, -30px 40px 70px -40px rgba(0, 221, 214, .1);
  transform: rotateY(-16deg) rotateX(8deg) rotateZ(1deg); transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.mon::after { content: ''; position: absolute; left: 50%; bottom: 2.5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #00DDD6; box-shadow: 0 0 6px #00DDD6; opacity: .8; }
.mon-scr { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: #000; }
.mon-scr::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); pointer-events: none; }
.mon-scr > .gv-cloud { position: absolute; left: 0; top: 0; width: 800px; height: 500px; transform: scale(.68); transform-origin: 0 0; } /* 544×340 screen = 800×500 × .68 */
.mon-glare { position: absolute; inset: 9px; border-radius: 8px; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 38%); }
.mon-stand { position: absolute; left: 50%; top: 486px; width: 150px; height: 70px; margin-left: -93px; transform: perspective(600px) rotateX(55deg) rotateZ(-6deg) translateX(14px); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); }
.mock.in .gv-desk .mon { animation: gv-tilt 9s ease-in-out infinite alternate; }
@keyframes gv-tilt { from { transform: rotateY(-16deg) rotateX(8deg) rotateZ(1deg); } to { transform: rotateY(-10deg) rotateX(6deg) rotateZ(.5deg) translateY(-6px); } }

.gv-cloud { position: relative; overflow: hidden; color: #fff; font-family: 'Inter', system-ui, sans-serif; --teal: #00DDD6; --teal2: #00A9C4; }
.gv-cloud .bg { position: absolute; inset: 0; background: url(geneva/judy.jpg) 70% 30% / cover; transform: scale(1.04); }
.mock.in .gv-cloud .bg { animation: gv-kb 16s ease-in-out infinite alternate; }
.gv-cloud .gv-mid h4 { font-size: 32px; }
.gv-cloud .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 12, 14, .35), rgba(5, 12, 14, .74) 40%, rgba(5, 12, 14, .78) 75%, rgba(5, 12, 14, .55)); }
.gv-bar { position: absolute; left: 26px; right: 26px; top: 26px; display: flex; align-items: center; gap: 8px; }
.gv-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 4px; font-size: 11.5px; font-weight: 600; background: rgba(8, 18, 20, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-variant-numeric: tabular-nums; }
.gv-chip em { font-style: normal; color: var(--teal); }
.gv-chip.r { margin-left: auto; }
.gv-mid { position: absolute; left: 30px; right: 30px; top: 118px; text-align: center; }
.gv-mid h4 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.gv-mid p { margin: 10px auto 0; max-width: 430px; font-size: 13.5px; line-height: 1.5; color: #C3CED0; }
.gv-load { margin: 26px auto 0; width: 420px; text-align: left; }
.gv-load .ln { font: 500 12px 'Geist Mono', ui-monospace, monospace; letter-spacing: .04em; color: #E7ECED; white-space: nowrap; }
.gv-load .ln em { font-style: normal; color: var(--teal); }
.gv-load .tr { margin-top: 10px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.gv-load .tr i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal2), var(--teal)); box-shadow: 0 0 12px rgba(0, 221, 214, .8); }
.gv-specs { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.gv-specs span { padding: 4px 8px; border-radius: 3px; font: 600 10.5px 'Inter', sans-serif; color: #C3CED0; background: rgba(255, 255, 255, .07); }
.gv-ready { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; justify-content: center; gap: 10px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s cubic-bezier(.34, 1.4, .5, 1); }
.gv-ready.on { opacity: 1; transform: none; }
.gv-ready .buy { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 3px; background: #fff; color: #111; font: 800 12.5px 'Inter', sans-serif; letter-spacing: .09em; }

.mock.static * { transition: none !important; }
@keyframes gv-kb { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-2%, 1%); } }
@media (prefers-reduced-motion: reduce) { .mock * { animation: none !important; transition: none !important; } }

.gv-store { background: radial-gradient(70% 50% at 50% 42%, rgba(0, 169, 196, .16), transparent 70%), #0A1214; }

/* Cyberpunk wordmark in place of the title text; "Ultimate Edition" redrawn in white (the logo's version is black) */
.cp-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gv-cloud .gv-mid h4.cp-logo { font-size: 0; }
.cp-logo img { width: 330px; height: auto; display: block; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); }
.cp-logo span { display: inline-flex; align-items: center; gap: 10px; font: 600 12px 'Inter', sans-serif; letter-spacing: .5em; color: #fff; padding-left: .5em; }
.cp-logo span i { font-style: normal; font-size: 9px; letter-spacing: .45em; padding: 3px 4px 3px 9px; box-shadow: inset 0 0 0 1.5px #fff; }
.gv-cloud .gv-mid { top: 92px; }
.gv-cloud .gv-mid p { margin-top: 12px; }