:root {
  --game-navy: #06162a;
  --game-ink: #0a2540;
  --game-blue: #65a9dd;
  --game-cyan: #18c7ff;
  --game-magenta: #ff3ea5;
  --game-yellow: #ffd23e;
  --game-warm: #f7f6f2;
  --game-green: #74d6a5;
}

html { scroll-behavior: smooth; }
body[data-service-guide-page] { overflow-x: clip; background: var(--game-warm); }
body[data-service-guide-page] .site-header { border-bottom-color: rgba(10,37,64,.1); }
body[data-service-guide-page] [hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.btn--ghost-light { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--game-ink); }
.btn--outline { color: var(--game-ink); background: transparent; border-color: rgba(10,37,64,.24); }
.btn--outline:hover { color: #fff; background: var(--game-ink); border-color: var(--game-ink); }

/* Hero */
.game-hero { position: relative; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); display: grid; align-items: center; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(circle at 78% 30%, rgba(24,199,255,.22), transparent 23%), radial-gradient(circle at 72% 72%, rgba(255,62,165,.13), transparent 25%), linear-gradient(135deg, #0b2c4b 0%, #06162a 54%, #030b16 100%); }
.game-hero::before { content: ""; position: absolute; width: 48vw; height: 48vw; min-width: 480px; min-height: 480px; right: -14vw; top: -21vw; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.018), 0 0 0 160px rgba(255,255,255,.014); z-index: -1; }
.game-hero__grid { position: absolute; inset: 0; z-index: -1; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, #000, transparent 80%); }
.game-hero__inner { display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, .72fr); gap: clamp(60px,9vw,150px); align-items: center; padding-block: clamp(76px,10vh,130px); }
.game-hero__copy { max-width: 720px; }
.game-eyebrow { color: rgba(255,255,255,.65); }
.game-eyebrow b { color: #fff; }
.game-hero h1 { margin-top: 24px; color: #fff; font-family: var(--font-display); font-size: clamp(3.3rem,6.5vw,7.2rem); line-height: .88; letter-spacing: -.055em; text-wrap: balance; }
.game-hero__lede { max-width: 56ch; margin-top: 28px; color: rgba(255,255,255,.78); font-size: clamp(1rem,1.3vw,1.2rem); line-height: 1.65; }
.game-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.game-hero__proof { display: flex; flex-wrap: wrap; gap: 22px; margin-top: clamp(42px,7vh,76px); }
.game-hero__proof span { display: flex; align-items: baseline; gap: 8px; color: rgba(255,255,255,.58); font-family: var(--font-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.game-hero__proof b { color: #fff; font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -.04em; }
.game-scroll { position: absolute; left: var(--gutter); bottom: 22px; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.52); font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.game-scroll i { display: block; width: 56px; height: 1px; background: rgba(255,255,255,.28); overflow: hidden; }
.game-scroll i::after { content: ""; display: block; width: 45%; height: 100%; background: var(--game-cyan); animation: scrollSignal 2.2s ease-in-out infinite; }
@keyframes scrollSignal { 0%,100% { transform: translateX(-110%); } 50% { transform: translateX(230%); } }

.game-hero__artifact { position: relative; aspect-ratio: 4 / 5; width: min(100%, 480px); justify-self: end; perspective: 1200px; transform: rotate(4deg); }
.artifact-sheet { position: absolute; inset: 8% 4%; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 36px 80px rgba(0,0,0,.35); transition: transform .5s ease; }
.artifact-sheet--c { background: #18c7ff; transform: translate3d(-42px,-28px,-80px) rotate(-6deg); opacity: .8; }
.artifact-sheet--m { background: #ff3ea5; transform: translate3d(28px,-14px,-50px) rotate(5deg); opacity: .72; }
.artifact-sheet--y { background: #ffd23e; transform: translate3d(-13px,24px,-25px) rotate(-2deg); opacity: .84; }
.artifact-sheet--k { background: #f7f6f2; transform: translateZ(12px); }
.artifact-copy { position: absolute; inset: 8%; z-index: 5; padding: 11%; display: flex; flex-direction: column; color: var(--game-ink); border: 1px solid rgba(10,37,64,.15); background: linear-gradient(145deg, rgba(255,255,255,.72), transparent); transform: translateZ(30px); }
.artifact-copy::before,.artifact-copy::after { content: ""; position: absolute; width: 20px; height: 20px; border: 1px solid var(--game-ink); border-radius: 50%; opacity: .38; }
.artifact-copy::before { left: 18px; top: 18px; }.artifact-copy::after { right: 18px; bottom: 18px; }
.artifact-copy small { font-family: var(--font-mono); letter-spacing: .17em; font-size: 9px; }
.artifact-copy strong { margin-block: auto; font-family: var(--font-display); font-size: clamp(2rem,4vw,4.2rem); line-height: .9; letter-spacing: -.05em; }
.artifact-copy span { font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
.game-hero__artifact:hover .artifact-sheet--c { transform: translate3d(-58px,-38px,-80px) rotate(-8deg); }
.game-hero__artifact:hover .artifact-sheet--m { transform: translate3d(42px,-24px,-50px) rotate(8deg); }

/* Intro and interactive guide */
.guide-shell { background: var(--game-warm); }
.guide-shell__intro { display: grid; grid-template-columns: 1.1fr .65fr; gap: 60px; align-items: end; padding-block: clamp(80px,11vw,150px) clamp(52px,7vw,90px); }
.guide-shell__intro h2,.atlas-head h2,.example-reel__head h2 { margin-top: 15px; font-family: var(--font-display); font-size: clamp(2.7rem,5.5vw,5.6rem); line-height: .9; letter-spacing: -.05em; color: var(--game-ink); }
.guide-shell__intro > p { max-width: 44ch; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.guide-experience { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(470px,.95fr); min-height: 900px; background: var(--game-navy); }
.guide-visual { min-width: 0; background: radial-gradient(circle at 50% 48%, rgba(101,169,221,.18), transparent 38%), linear-gradient(145deg,#0a2946,#030b16); }
.guide-visual__sticky { position: sticky; top: 72px; height: calc(100vh - 72px); min-height: 650px; display: flex; flex-direction: column; }
.three-stage { position: relative; flex: 1; min-height: 0; isolation: isolate; overflow: hidden; }
.three-stage::before { content: ""; position: absolute; inset: 8%; z-index: -1; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.018), 0 0 0 120px rgba(255,255,255,.012); }
.three-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(3,11,22,.45), transparent 22%, transparent 78%, rgba(3,11,22,.3)), linear-gradient(0deg, rgba(3,11,22,.7), transparent 25%); }
.game-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity .65s ease; }
.three-stage.is-three-ready .game-canvas { opacity: 1; }
.three-fallback { position: absolute; inset: 0; z-index: 0; transition: opacity .45s ease; }
.three-stage.is-three-ready .three-fallback { opacity: 0; }
.three-stage.is-three-fallback .three-fallback { opacity: 1; }
.fallback-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(101,169,221,.22); border-radius: 50%; transform: translate(-50%,-50%) rotate(-12deg); }
.fallback-orbit--one { width: 68%; aspect-ratio: 1.55; }.fallback-orbit--two { width: 48%; aspect-ratio: 1.25; transform: translate(-50%,-50%) rotate(22deg); }
.fallback-object { position: absolute; filter: drop-shadow(0 22px 25px rgba(0,0,0,.28)); }
.fallback-object--sheet { left: 40%; top: 38%; width: 21%; aspect-ratio: 1.4; }
.fallback-object--sheet i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.3); }
.fallback-object--sheet i:nth-child(1){background:var(--game-cyan);transform:translate(-10px,-7px) rotate(-5deg);opacity:.8}.fallback-object--sheet i:nth-child(2){background:var(--game-magenta);transform:translate(8px,-3px) rotate(4deg);opacity:.75}.fallback-object--sheet i:nth-child(3){background:var(--game-yellow);transform:translate(-2px,8px) rotate(-1deg);opacity:.84}.fallback-object--sheet i:nth-child(4){background:#f7f6f2;transform:translate(0);}
.fallback-object--roll { right: 17%; top: 18%; width: 13%; aspect-ratio: 1; border: 22px solid #f7f6f2; border-radius: 50%; transform: rotateX(58deg); }
.fallback-object--box { right: 17%; bottom: 22%; width: 16%; aspect-ratio: 1.4; background: var(--game-blue); transform: rotate(-8deg) skewY(5deg); }
.fallback-object--form { left: 14%; bottom: 22%; width: 23%; height: 12%; background: repeating-linear-gradient(90deg,#f7f6f2 0 24px,#dce9f3 24px 48px); transform: rotate(8deg); }
.fallback-object--swatch { left: 17%; top: 20%; width: 16%; aspect-ratio: 1.3; background: linear-gradient(90deg,var(--game-cyan) 0 25%,var(--game-magenta) 25% 50%,var(--game-yellow) 50% 75%,#f7f6f2 75%); transform: rotate(-10deg); }
.scene-labels { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.scene-label { appearance: none; position: absolute; padding: 8px 11px; color: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(3,11,22,.62); backdrop-filter: blur(7px); font-family: var(--font-mono); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; pointer-events: auto; transition: color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease; }
.scene-label:hover,.scene-label:focus-visible,.scene-label.is-active { color: var(--game-ink); border-color: #fff; background: #fff; transform: translateY(-2px); outline: none; }
.scene-label::after { content: " +"; color: var(--game-cyan); }
.scene-label.is-active::after { content: " ✓"; color: var(--game-ink); }
.scene-label--offset{left:14%;top:21%}.scene-label--labels{right:13%;top:22%}.scene-label--promo{right:12%;bottom:23%}.scene-label--continuous{left:12%;bottom:23%}.scene-label--design{left:46%;bottom:10%}
.scene-ui { position: absolute; z-index: 4; inset: auto 24px 22px; display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.48); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.scene-ui__status { display: flex; align-items: center; gap: 8px; }.scene-ui__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--game-green); box-shadow: 0 0 0 4px rgba(116,214,165,.12); }
.guide-visual__caption { height: 65px; display: flex; align-items: center; gap: 20px; padding-inline: clamp(22px,4vw,60px); color: rgba(255,255,255,.46); border-top: 1px solid rgba(255,255,255,.08); font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.guide-visual__caption span { color: var(--game-cyan); }

.guide-panel { min-width: 0; display: flex; align-items: center; background: #fff; }
.guide-panel__inner,.guide-result { width: min(100%,740px); margin-inline: auto; padding: clamp(60px,7vw,110px); }
.guide-progress__meta { display: flex; justify-content: space-between; color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.guide-progress__meta b { color: var(--game-ink); }
.guide-progress { height: 3px; margin-top: 14px; overflow: hidden; background: #dae4ee; }
.guide-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--game-cyan),var(--game-blue)); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.guide-panel h3,.guide-result h3 { margin-top: clamp(34px,5vw,62px); color: var(--game-ink); font-family: var(--font-display); font-size: clamp(2.2rem,4vw,4.2rem); line-height: .94; letter-spacing: -.045em; outline: none; }
.guide-panel__hint { max-width: 54ch; margin-top: 16px; color: var(--muted); line-height: 1.6; }
.guide-panel__instruction { display: flex; align-items: center; gap: 9px; margin-top: 24px; color: var(--game-ink); font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.guide-panel__instruction span { display: grid; place-items: center; width: 20px; height: 20px; color: #fff; border-radius: 50%; background: var(--game-blue); }
.guide-options { display: grid; gap: 10px; margin-top: 14px; border-radius: 14px; }
.guide-option { appearance: none; width: 100%; display: grid; grid-template-columns: 18px 1fr auto; gap: 16px; align-items: center; padding: 17px 18px; text-align: left; color: var(--game-ink); border: 1px solid #d2dce6; border-radius: 12px; background: #fff; cursor: pointer; transition: transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.guide-option:hover { transform: translateX(4px); border-color: var(--game-blue); background: #f7fbfe; box-shadow: 0 15px 34px -26px rgba(10,37,64,.5); }
.guide-option:focus-visible { outline: 3px solid rgba(24,199,255,.35); outline-offset: 2px; }
.guide-option.is-selected { border-color: var(--game-ink); background: #eaf6fd; box-shadow: inset 4px 0 0 var(--game-cyan),0 12px 32px -26px rgba(10,37,64,.7); }
.guide-option__mark { display: grid; place-items: center; width: 17px; height: 17px; color: #fff; border: 1px solid #94a8ba; border-radius: 50%; font-size: 10px; font-weight: 700; }
.guide-option.is-selected .guide-option__mark { border-color: var(--game-ink); background: var(--game-ink); }
.guide-option strong,.guide-option small { display: block; }.guide-option strong { font-family: var(--font-display); font-size: 1rem; line-height: 1.15; }.guide-option small { margin-top: 4px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.guide-option__action { color: var(--game-blue); font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; opacity: .72; transition: .18s ease; }.guide-option:hover .guide-option__action,.guide-option.is-selected .guide-option__action { color: var(--game-ink); opacity: 1; }
.guide-options.is-needs-choice { animation: choiceNeeded .42s ease both; outline: 2px solid #ef4e7b; outline-offset: 6px; }
@keyframes choiceNeeded { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.guide-validation { display: none; margin-top: 14px; padding: 10px 12px; color: #8f183d; border-left: 3px solid #ef4e7b; background: #fff1f5; font-size: .78rem; line-height: 1.45; }.guide-validation.is-visible { display: block; }
.guide-controls { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 28px; }
.guide-control--back { appearance: none; padding: 12px 0; color: var(--game-ink); border: 0; background: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.guide-control--back::before { content: "←"; margin-right: 8px; }.guide-control--back:disabled { opacity: .3; cursor: default; }
.guide-control--next.is-awaiting { color: var(--game-ink); border-color: #a8b8c8; background: #edf3f8; box-shadow: none; }
.guide-control--next.is-awaiting:hover { color: #fff; border-color: var(--game-ink); background: var(--game-ink); }
.guide-privacy { display: flex; gap: 9px; align-items: center; margin-top: 30px; color: #8190a0; font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }

/* Result */
.guide-result { position: relative; overflow: hidden; }
.result-signal { display: flex; gap: 4px; height: 5px; }.result-signal span { flex: 1; }.result-signal span:nth-child(1){background:var(--game-cyan)}.result-signal span:nth-child(2){background:var(--game-magenta)}.result-signal span:nth-child(3){background:var(--game-yellow)}.result-signal span:nth-child(4){background:#1d1e1c}
.result-kicker { display: block; margin-top: 30px; color: #708297; font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.result-eyebrow { margin-top: 14px; color: var(--result-color,var(--game-blue)); font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.guide-result h3 { margin-top: 9px; }
.result-description { margin-top: 18px; color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 34px; padding-top: 28px; border-top: 1px solid #dbe3eb; }
.result-grid h4 { margin-bottom: 14px; color: var(--game-ink); font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.result-reasons { display: grid; gap: 10px; }.result-reasons li { position: relative; padding-left: 18px; color: #405468; font-size: .86rem; line-height: 1.45; }.result-reasons li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border: 2px solid var(--result-color,var(--game-blue)); border-radius: 50%; }
.result-specialties { display: flex; flex-wrap: wrap; gap: 7px; }.result-chip { padding: 7px 9px; color: var(--game-ink); border: 1px solid #cbd8e4; border-radius: 999px; background: #f4f7fa; font-family: var(--font-mono); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.result-complement { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 14px 16px; background: #edf3f8; border-radius: 8px; font-size: .82rem; }.result-complement span { color: var(--muted); }.result-complement a { color: var(--game-ink); font-weight: 700; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.result-reset { appearance: none; margin-top: 20px; padding: 4px 0; color: var(--muted); border: 0; border-bottom: 1px solid #a9b6c2; background: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.guide-noscript { margin-block: 40px; padding: 30px; border: 1px solid var(--hairline); background: #fff; }.guide-noscript p { margin-block: 8px 18px; }

/* Service atlas */
.service-atlas { background: var(--game-warm); }
.atlas-head { align-items: end; margin-bottom: clamp(42px,6vw,74px); }
.atlas-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.atlas-card { --card-accent: var(--game-blue); position: relative; grid-column: span 2; min-height: 430px; display: flex; flex-direction: column; padding: clamp(24px,3vw,38px); overflow: hidden; color: var(--game-ink); border: 1px solid rgba(10,37,64,.14); border-radius: 16px; background: rgba(255,255,255,.78); transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.atlas-card:hover,.atlas-card:focus-within,.atlas-card.is-scene-picked { transform: translateY(-7px); border-color: var(--card-accent); box-shadow: 0 35px 70px -50px rgba(10,37,64,.65); }
.atlas-card--offset{--card-accent:var(--game-cyan)}.atlas-card--labels{--card-accent:var(--game-magenta)}.atlas-card--promo{--card-accent:var(--game-yellow)}.atlas-card--continuous{--card-accent:var(--game-green)}.atlas-card--design{--card-accent:var(--game-blue)}
.atlas-card__number { position: absolute; right: 22px; top: 18px; color: rgba(10,37,64,.15); font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; letter-spacing: -.08em; }
.atlas-card__icon { position: relative; width: 82px; height: 62px; margin-bottom: auto; }
.atlas-card__icon i { position: absolute; left: 8px; top: 10px; width: 56px; height: 38px; border: 1px solid rgba(10,37,64,.28); background: var(--card-accent); opacity: .82; }.atlas-card__icon i:nth-child(1){transform:translate(-4px,-5px) rotate(-5deg);opacity:.28}.atlas-card__icon i:nth-child(2){transform:translate(6px,4px) rotate(5deg);opacity:.48}.atlas-card__icon i:nth-child(3){background:#fff;transform:none;opacity:1}
.atlas-card__kicker { margin-top: 30px; color: #718297; font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.atlas-card h3 { margin-top: 9px; font-family: var(--font-display); font-size: clamp(1.65rem,2.5vw,2.5rem); line-height: .95; letter-spacing: -.04em; }
.atlas-card p { margin-top: 14px; color: var(--muted); font-size: .91rem; line-height: 1.55; }
.atlas-card ul { display: grid; gap: 7px; margin-top: 18px; color: #51657a; font-size: .78rem; }.atlas-card li::before { content: "+"; margin-right: 7px; color: var(--card-accent); font-weight: 700; }
.atlas-card > a { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 15px; color: var(--game-ink); border-top: 1px solid rgba(10,37,64,.13); font-family: var(--font-mono); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.atlas-card--method { color: #fff; background: var(--game-ink); border-color: var(--game-ink); }.atlas-card--method::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -70px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.018); }.atlas-card--method .atlas-card__kicker,.atlas-card--method p { color: rgba(255,255,255,.6); }.atlas-card--method h3 { margin-top: auto; font-size: clamp(2rem,3.4vw,3.5rem); }.atlas-card--method > a { color: #fff; border-color: rgba(255,255,255,.18); }

/* Gallery */
.example-reel { padding-block: clamp(80px,10vw,140px); overflow: hidden; color: #fff; background: var(--game-navy); }
.example-reel__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; }.example-reel__head h2 { color: #fff; }.example-reel__head .eyebrow { color: rgba(255,255,255,.55); }.example-reel__head .eyebrow b { color: #fff; }
.example-reel__controls { display: flex; gap: 8px; }.example-reel__controls button { width: 48px; height: 48px; color: #fff; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: transparent; font-size: 1.2rem; cursor: pointer; transition: .2s ease; }.example-reel__controls button:hover { color: var(--game-ink); border-color: #fff; background: #fff; }
.example-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(560px,74vw); gap: 16px; margin-top: 54px; padding-inline: max(var(--gutter),calc((100vw - var(--wrap)) / 2)); padding-bottom: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }.example-track::-webkit-scrollbar{display:none}
.example-card { position: relative; min-height: 520px; display: flex; flex-direction: column; justify-content: end; padding: 28px; overflow: hidden; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; scroll-snap-align: start; isolation: isolate; }
.example-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,rgba(3,11,22,.92),rgba(3,11,22,.08) 65%); }.example-card picture,.example-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }.example-card img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }.example-card:hover img { transform: scale(1.045); }
.example-card__index { position: absolute; left: 22px; top: 20px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(3,11,22,.36); backdrop-filter: blur(6px); font-family: var(--font-mono); font-size: 8px; letter-spacing: .13em; }
.example-card h3 { max-width: 14ch; font-family: var(--font-display); font-size: clamp(1.9rem,3vw,3rem); line-height: .94; letter-spacing: -.04em; }.example-card p { margin-top: 10px; color: rgba(255,255,255,.66); font-size: .88rem; }
.example-reel__hint { margin: 18px var(--gutter) 0; color: rgba(255,255,255,.38); text-align: center; font-family: var(--font-mono); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }

/* Proof and CTA */
.guide-proof { padding-block: clamp(58px,7vw,90px); background: var(--game-blue); }
.guide-proof__grid { display: grid; grid-template-columns: repeat(3,1fr) 2fr; align-items: center; }
.guide-proof__grid > div { padding: 12px 28px; border-right: 1px solid rgba(10,37,64,.2); }.guide-proof__grid > div:first-child { padding-left: 0; }.guide-proof__grid strong,.guide-proof__grid span { display: block; }.guide-proof__grid strong { color: var(--game-ink); font-family: var(--font-display); font-size: clamp(2.4rem,4vw,4.2rem); line-height: 1; letter-spacing: -.05em; }.guide-proof__grid span { margin-top: 6px; color: rgba(10,37,64,.68); font-family: var(--font-mono); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }.guide-proof blockquote { padding-left: clamp(30px,5vw,70px); color: var(--game-ink); font-family: var(--font-display); font-size: clamp(1.3rem,2.2vw,2rem); line-height: 1.18; }
.guide-cta { position: relative; overflow: hidden; background: #06162a; }.guide-cta::before { content: ""; position: absolute; width: 620px; height: 620px; left: -330px; bottom: -370px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.015),0 0 0 160px rgba(255,255,255,.012); }.guide-cta .form-card { position: relative; }.guide-cta textarea { min-height: 150px; }

@media (max-width: 1100px) {
  .game-hero__inner { grid-template-columns: 1fr minmax(300px,.58fr); gap: 50px; }
  .guide-experience { grid-template-columns: 1fr 1fr; }
  .guide-panel__inner,.guide-result { padding: 55px 40px; }
  .atlas-card { grid-column: span 3; }
  .guide-proof__grid { grid-template-columns: repeat(3,1fr); }.guide-proof blockquote { grid-column: 1 / -1; margin-top: 38px; padding: 35px 0 0; border-top: 1px solid rgba(10,37,64,.2); }
}

@media (max-width: 820px) {
  .guide-header .nav-links { transform: none; clip-path: inset(0 0 0 100%); pointer-events: none; transition: clip-path .3s ease; }
  .guide-header .nav-links.is-open { transform: none; clip-path: inset(0); pointer-events: auto; }
  .game-hero { min-height: auto; }.game-hero__inner { grid-template-columns: 1fr; padding-block: 82px 115px; }.game-hero__copy { position: relative; z-index: 2; }.game-hero h1 { max-width: 11ch; }.game-hero__artifact { position: absolute; width: 300px; right: -92px; bottom: 42px; opacity: .32; }.game-hero__proof { gap: 13px 20px; }
  .guide-shell__intro { grid-template-columns: 1fr; gap: 24px; }
  .guide-experience { display: block; min-height: 0; }.guide-visual__sticky { position: relative; top: 0; height: 54vh; min-height: 390px; }.scene-ui__hint { display: none; }
  .guide-panel__inner,.guide-result { min-height: 690px; display: flex; flex-direction: column; justify-content: center; padding: 60px var(--gutter); }.guide-result { display: block; min-height: 0; }
  .atlas-card { grid-column: span 3; }
}

@media (max-width: 620px) {
  .game-hero h1 { font-size: clamp(3.05rem,15vw,4.5rem); }.game-hero__lede { font-size: .97rem; }.game-hero__actions .btn { width: 100%; text-align: center; }.game-hero__proof span { width: calc(50% - 12px); }.game-scroll { display: none; }
  .guide-shell__intro { padding-block: 72px 44px; }.guide-shell__intro h2,.atlas-head h2,.example-reel__head h2 { font-size: 2.9rem; }
  .guide-visual__sticky { height: 52vh; min-height: 390px; }.scene-labels { inset: auto 14px 55px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }.scene-label { position: static; padding: 7px 9px; font-size: 7px; }.guide-visual__caption { padding-inline: 18px; font-size: 7px; }.scene-ui { inset: 14px 16px auto; }.scene-ui__hint { display: none; }
  .guide-panel__inner,.guide-result { padding-block: 54px; min-height: 650px; }.guide-panel h3,.guide-result h3 { font-size: 2.35rem; }.guide-option { padding: 15px 14px; gap: 12px; }.guide-option small { font-size: .73rem; }.guide-controls { align-items: stretch; }.guide-control--next { padding-inline: 18px; }
  .guide-option__action { font-size: 7px; }
  .result-grid { grid-template-columns: 1fr; gap: 22px; }.result-actions .btn { width: 100%; text-align: center; }
  .atlas-grid { display: block; }.atlas-card { min-height: 390px; margin-top: 12px; }.atlas-card:first-child { margin-top: 0; }.atlas-card--method { min-height: 340px; }
  .example-reel__head { align-items: end; }.example-reel__controls button { width: 42px; height: 42px; }.example-track { grid-auto-columns: 84vw; margin-top: 38px; }.example-card { min-height: 440px; padding: 22px; }
  .guide-proof__grid { grid-template-columns: 1fr 1fr; gap: 0; }.guide-proof__grid > div { padding: 20px 0; border-right: 0; border-bottom: 1px solid rgba(10,37,64,.18); }.guide-proof__grid > div:nth-child(2) { text-align: right; }.guide-proof__grid > div:nth-child(3) { grid-column: 1 / -1; }.guide-proof blockquote { margin-top: 25px; padding-top: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .game-scroll i::after { animation: none; }
  .artifact-sheet,.game-canvas,.guide-progress i,.guide-option,.atlas-card,.example-card img { transition: none !important; }
  .game-hero__artifact:hover .artifact-sheet--c { transform: translate3d(-42px,-28px,-80px) rotate(-6deg); }.game-hero__artifact:hover .artifact-sheet--m { transform: translate3d(28px,-14px,-50px) rotate(5deg); }
  .guide-option:hover,.atlas-card:hover { transform: none; }
}