.home-seo{--muted:#b3b3be;--line:#ffffff20}.home-seo p:not(.credit-pack p){color:var(--muted);line-height:1.8}.home-seo h2{font-size:clamp(30px,3.6vw,48px);letter-spacing:-1.5px;line-height:1.15;margin:0 0 24px}.home-seo h3:not(.credit-pack h3){font-size:21px;line-height:1.35;margin:0 0 14px}.home-seo .section{padding-top:88px;padding-bottom:88px}.home-seo .section-heading{max-width:780px;margin-bottom:40px}.home-seo .section-heading p{max-width:72ch}.home-seo .eyebrow{display:block;color:#ee7379;font-size:11px;letter-spacing:.15em;margin-bottom:18px}.what-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}.what-layout p{margin-bottom:20px}.what-video{min-width:0}.what-video-frame{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#121215}.what-video-frame iframe,.what-video-frame video{display:block;width:100%;height:100%;border:0}.home-seo button{font:inherit}.carousel-controls button{border:1px solid #55555e;border-radius:30px;padding:9px 16px;background:#17171c;color:#eee;cursor:pointer}
.carousel-stage{height:470px;position:relative;perspective:1800px;overflow:hidden;touch-action:pan-y;cursor:grab;border-block:1px solid #ffffff0a;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.carousel-stage:active{cursor:grabbing}.carousel-card{position:absolute;top:65px;left:50%;width:240px;height:320px;margin-left:-120px;padding:0;border:1px solid #ffffff26;border-radius:12px;background:#18181e;overflow:hidden;backface-visibility:hidden;transform-style:preserve-3d;box-shadow:0 25px 55px #0009;transition:box-shadow .2s;cursor:pointer}.carousel-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}.carousel-card span{position:absolute;bottom:0;left:0;right:0;padding:45px 15px 18px;background:linear-gradient(transparent,#000c);font-size:14px;font-weight:600;color:white;text-align:left}.carousel-card:focus-visible{outline:3px solid #f26370;outline-offset:5px}.carousel-controls{display:flex;justify-content:center;align-items:center;gap:12px;margin:24px 0 32px}.carousel-controls output{font-size:13px;min-width:40px;text-align:center;color:#bbb}.example-notes{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.example-notes article{border-top:1px solid #ffffff25;padding-top:20px}.example-notes h3{font-size:18px}.example-notes p{font-size:14px}.example-notes article.is-active{border-color:#ed6673}.example-notes details{font-size:13px;color:#b7b7c3}.example-notes summary{cursor:pointer;margin:12px 0}.example-notes .suggestion{font-size:13px}.example-notes button{padding:8px 12px;border:1px solid #555;border-radius:6px;background:transparent;color:white;cursor:pointer}.usecase-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 36px}.usecase-grid figure{margin:0 0 24px;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:#151518}.usecase-grid img{width:100%;height:100%;object-fit:cover}.usecase-grid .usecase-caption{font-size:12px;color:var(--muted);margin-top:12px}.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 54px}.why-grid article{border-top:1px solid var(--line);padding-top:25px}.why-marker{display:block;color:#fa767e;font-size:30px;letter-spacing:-1px;margin-bottom:20px}.home-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.home-plan{padding:32px;border:1px solid #ffffff25;border-radius:16px;background:linear-gradient(135deg,#1b1b21,#101013)}.home-plan .price{font-size:42px;letter-spacing:-2px;margin:25px 0 5px;color:white}.home-plan .price small{font-size:12px;letter-spacing:0;color:#aaa}.home-plan .credits{font-size:22px;color:white}.home-plan .button{width:100%;margin-top:18px}.payment-benefits{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;padding-top:30px;color:#c6c6cf;font-size:14px}.home-pricing-note{text-align:center;font-size:13px;margin-top:25px}.home-seo .steps{margin-top:30px}.home-seo .final-cta{margin-top:50px;margin-bottom:80px}.home-seo .final-cta .hero-actions{justify-content:center}.home-seo .final-cta p{max-width:650px;margin:20px auto 28px}.home-seo a:not(.button){color:#e5bac0}.home-seo .faq-list .answer p{max-width:80ch}
@media(max-width:900px){.what-layout{grid-template-columns:1fr;gap:24px}.example-notes{grid-template-columns:1fr 1fr}.home-plan{padding:22px}.home-plan .price{font-size:34px}.carousel-stage{height:400px}.carousel-card{top:40px}.home-seo .section{padding-block:60px}}
@media(max-width:600px){.usecase-grid,.why-grid,.home-plans{grid-template-columns:1fr}.example-notes{grid-template-columns:1fr}.home-seo .section{padding-block:44px}.home-seo h2{letter-spacing:-1px}.carousel-stage{height:360px;perspective:none;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 24px;mask-image:none;touch-action:auto}.carousel-card{position:relative;top:auto;left:auto;flex:0 0 240px;margin:0;transform:none!important;scroll-snap-align:center}.carousel-controls{flex-wrap:wrap}.payment-benefits{gap:12px;flex-direction:column;align-items:center}.home-seo .final-cta{padding:40px 22px}.usecase-grid{gap:32px}}
@media(prefers-reduced-motion:reduce){.carousel-card{transition:none}}
/* Large inward-facing panorama, retaining the existing gallery controls. */
@media(min-width:601px){
.carousel-stage{width:calc(100vw - 32px);max-width:1800px;left:50%;transform:translateX(-50%);height:660px;perspective:1800px;perspective-origin:50% 47%;border:0;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.carousel-card{top:80px;width:360px;height:480px;margin-left:-180px;overflow:visible;background:none;border:0;box-shadow:none;transform-style:preserve-3d;border-radius:16px}
.carousel-card>img{opacity:0}.panorama-surface{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}.panorama-slice{position:absolute;top:0;left:50%;margin-left:-.5px;background-repeat:no-repeat;backface-visibility:hidden;transform-origin:0 50%;box-shadow:0 24px 36px #0002}.panorama-slice:first-child{border-radius:16px 0 0 16px}.panorama-slice:last-child{border-radius:0 16px 16px 0}.carousel-card>span{z-index:2;bottom:0;padding:56px 22px 24px;font-size:18px;border-radius:0 0 16px 16px;transform:translateZ(22px);pointer-events:none}
.carousel-controls{margin-top:8px;margin-bottom:48px}.carousel-controls button{min-height:48px;padding:12px 23px}.carousel-controls output{margin:0 10px}
}
@media(min-width:601px) and (max-width:1000px){.carousel-stage{height:540px}.carousel-card{top:70px}}
@media(max-width:600px){.panorama-surface{display:none}.carousel-stage .carousel-card{width:78vw;height:auto;aspect-ratio:.75;flex:0 0 78vw}.carousel-stage{padding-block:30px;height:auto;min-height:450px}.carousel-controls button{min-height:44px}}
.panorama-slice{box-shadow:none}
.scene-browser{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.5fr);gap:64px;align-items:start}.scene-wheel{display:flex;flex-direction:column;gap:12px}.scene-option{border:0;background:none;color:#aaa;text-align:left;font:inherit;padding:12px;cursor:pointer}.scene-option[aria-selected=true]{color:#fff}.scene-browser.is-ready .scene-wheel{position:relative;height:520px;overflow:hidden;touch-action:pan-x;user-select:none;cursor:grab;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}.scene-browser.is-ready .scene-option{position:absolute;left:45px;top:50%;white-space:nowrap;padding:10px 0;font-size:clamp(23px,2.5vw,36px);font-weight:400;line-height:1.2;transform-origin:left center;transform:translate(var(--shift),calc(var(--rise) - 50%)) rotate(var(--tilt));opacity:var(--fade);filter:blur(var(--blur));transition:transform .25s ease,opacity .25s,filter .25s,color .25s}.scene-option[aria-selected=true]{font-weight:600}.scene-option:focus-visible{outline:2px solid #ee687a;outline-offset:7px;border-radius:4px}.scene-panel[hidden]{display:none}.scene-panel figure{margin:0 0 24px;aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:#151518}.scene-panel img{display:block;width:100%;height:100%;object-fit:cover}.scene-panel h3{font-size:24px;margin:0 0 12px}.scene-panel p{max-width:65ch}.scene-panel .usecase-caption{font-size:12px;color:#999}.scene-panel:focus-visible{outline:2px solid #ee687a;outline-offset:8px}.scene-browser:not(.is-ready) .scene-panel{margin-bottom:32px}
@media(max-width:700px){.scene-browser{grid-template-columns:1fr;gap:24px}.scene-browser.is-ready .scene-wheel{display:flex;flex-direction:row;height:auto;gap:20px;overflow-x:auto;mask-image:none;touch-action:auto;padding:12px 4px;border-bottom:1px solid #ffffff20}.scene-browser.is-ready .scene-option{position:static;flex:0 0 auto;font-size:18px;transform:none;opacity:1;filter:none;padding:12px 0;border-bottom:2px solid transparent}.scene-browser.is-ready .scene-option[aria-selected=true]{border-color:#ee687a}.scene-panel h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){.scene-browser.is-ready .scene-option{transition:none}}
.game-scenes{display:flex;gap:5px;flex-wrap:wrap;width:fit-content;max-width:100%;margin:16px 0 22px;padding:5px;background:#15151b;border:1px solid #303039;border-radius:12px}
.game-scenes button{position:relative;min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:8px;background:transparent;color:#bcbcc9;font-family:var(--heading);font-size:13px;font-weight:650;line-height:1.4;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.game-scenes button:hover{background:#27272f;color:#fff}
.game-scenes button[aria-pressed="true"]{background:#c6f4f3;color:#173235;border-color:#c6f4f3}
.game-scenes button:focus-visible{outline:2px solid #c6f4f3;outline-offset:3px}
@media(max-width:480px){.game-scenes{width:100%;gap:3px}.game-scenes button{flex:1 1 0;min-width:0;padding:10px 8px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.game-scenes button{transition:none}}
/* Center the desktop navigation on the image rather than the whole text panel. */
@media(min-width:701px){.scene-browser.is-ready .scene-wheel{height:var(--scene-image-height,520px)}}
/* Keep the wheel close to the artwork; blank space is not an interaction target. */
@media(min-width:701px){
 .scene-browser{column-gap:28px}
 .scene-browser.is-ready .scene-wheel{width:min(100%,320px);justify-self:end;cursor:auto;touch-action:auto}
 .scene-browser.is-ready .scene-option{cursor:grab;touch-action:pan-x}
 .scene-browser.is-ready .scene-option:active{cursor:grabbing}
}
/* Compact closing invitation, aligned with the site's dark surfaces. */
.home-seo .final-cta.compact-cta{display:flex;align-items:center;gap:18px;max-width:960px;padding:26px 28px;margin:48px auto 80px;border:1px solid #38363f;border-radius:20px;background:#1e1c24;text-align:left;overflow:visible}
.compact-cta-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border:1px solid #4a4753;border-radius:12px;background:#2b2833;color:#f3eff9}
.compact-cta-copy{flex:1;min-width:0}
.home-seo .compact-cta h2{font-family:var(--heading);font-size:20px;font-weight:750;letter-spacing:-.4px;line-height:1.35;margin:0}
.home-seo .compact-cta p{font-size:14px;line-height:1.6;margin:5px 0 0;max-width:none;color:#bcb8c5}
.home-seo .compact-cta .compact-cta-button{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:44px;padding:12px 18px;background:#f4f2f7;color:#201d27;border:1px solid transparent;border-radius:10px;font-size:13px;font-weight:650;transition:background .18s ease}
.home-seo .compact-cta .compact-cta-button:hover{background:#c6f4f3}
.home-seo .compact-cta .compact-cta-button:focus-visible{outline:2px solid #c6f4f3;outline-offset:4px}
@media(max-width:600px){.home-seo .final-cta.compact-cta{padding:22px;gap:14px;flex-wrap:wrap;margin-block:32px 56px}.home-seo .compact-cta h2{font-size:18px}.home-seo .compact-cta .compact-cta-button{width:100%;margin-top:4px}}

/* Keep the scene selector and artwork comfortable within a desktop viewport. */
@media(min-width:701px){
 #use-cases .section-heading{margin-bottom:28px}
 .scene-browser{grid-template-columns:minmax(300px,.75fr) minmax(0,1.55fr);gap:24px;align-items:center}
 .scene-browser.is-ready .scene-wheel{width:min(100%,390px);height:max(460px,var(--scene-image-height,460px));justify-self:end}
 .scene-browser.is-ready .scene-option{left:48px;font-size:clamp(30px,3vw,46px);transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .45s ease,filter .45s ease,color .3s ease}
 .scene-browser.is-ready .scene-option[aria-selected=true]{font-weight:600}
 .scene-panel figure{height:clamp(264px,47.3svh,528px);aspect-ratio:auto;margin-bottom:16px}
 .scene-panel img{object-fit:cover}
 .scene-panel p{font-size:15px;line-height:1.65}
 .scene-panel h3{margin-bottom:8px}
}
@keyframes scene-reveal{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.scene-panel.is-entering>figure{animation:scene-reveal .6s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){.scene-browser.is-ready .scene-option{transition:none}.scene-panel.is-entering>figure{animation:none}}
/* Homepage typography: neutral, high-contrast text with restrained accents. */
body #main[data-page="home"]{--muted:#d0d0d0}
body #main[data-page="home"] :is(h1,h2,h3,h4,h5,h6),
body #main[data-page="home"] :is(h1,h2,h3,h4,h5,h6) span{color:#fff;-webkit-text-fill-color:#fff}
body #main[data-page="home"] h1 .hero-title-brand{background:none;animation:none;text-shadow:inherit}
body #main[data-page="home"] .home-seo p,
body #main[data-page="home"] .credit-pack li{color:#d0d0d0}
body #main[data-page="home"] :is(.eyebrow,.why-marker,.step-index,.payment-benefits){color:#e5e5e5}
body #main[data-page="home"] :is(.pack-billing,.pack-estimate,.usecase-caption){color:#bcbcbc}
body #main[data-page="home"] .hero-description{color:#ededed}
body #main[data-page="home"] .hero-facts>div>span{color:#ededed}
body #main[data-page="home"] .home-seo p a:not(.button),
body #main[data-page="home"] .home-seo li a:not(.button){color:#f0f0f0;text-decoration:underline;text-decoration-color:#777;text-underline-offset:4px}
body #main[data-page="home"] .home-seo p a:not(.button):hover,
body #main[data-page="home"] .home-seo li a:not(.button):hover{color:#fff;text-decoration-color:#fff}
body #main[data-page="home"] .faq-list summary{color:#fff}
body #main[data-page="home"] .compact-cta{background:#171717;border-color:#383838}
body #main[data-page="home"] .compact-cta-icon{background:#232323;border-color:#454545;color:#fff}
/* Build-rendered gallery: visible and usable without React or JavaScript. */
.generated-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px;align-items:start}
.generated-example{min-width:0}
.generated-image{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:14px;background:#17171b}
.generated-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.generated-image:focus-visible{outline:2px solid #c9f5f3;outline-offset:5px}
.generated-prompt{border:0;border-bottom:1px solid #ffffff20;padding:16px 0}
.generated-prompt summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0;margin:0;list-style:none;cursor:pointer}
.generated-prompt summary::-webkit-details-marker{display:none}
.generated-prompt summary h3{font-size:18px;line-height:1.4;letter-spacing:-.3px;color:#f0f0f3}
.generated-prompt summary>span{font-size:22px;color:#a4a4af;flex:none}
.generated-prompt p{font-size:14px;line-height:1.7;color:#bcbcc8;margin-top:14px;overflow-wrap:anywhere}
.generated-prompt .generated-spec{font-size:12px;color:#a4d6d5}
@media(hover:hover){.generated-image:hover img{transform:scale(1.025)}}
@media(max-width:1000px){.generated-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.generated-gallery{grid-template-columns:1fr;gap:28px}.generated-image{aspect-ratio:4/5}}
@media(prefers-reduced-motion:reduce){.generated-image img{transition:none}.generated-image:hover img{transform:none}}
/* Keep build-rendered cards visible until the original interactive panorama mounts. */
#examples .carousel-stage:not(.official-panorama){display:flex;gap:24px;overflow-x:auto;height:auto;min-height:0;perspective:none;mask-image:none;padding:20px 4px;scroll-snap-type:x mandatory}
#examples .carousel-stage:not(.official-panorama)>.carousel-card{position:relative;inset:auto;display:block;flex:0 0 clamp(240px,28vw,360px);width:auto;height:auto;transform:none;opacity:1;background:transparent;border:0;border-radius:0;scroll-snap-align:center;padding:0;text-align:left}
#examples .carousel-stage.official-panorama{display:block;padding:0;gap:0}
#examples .carousel-stage.official-panorama>.carousel-card{display:none}
/* Give the panorama more horizontal room on desktop. */
@media(min-width:1001px){
 #examples.container{width:calc(100% - 32px);max-width:1920px}
 #examples .section-heading{max-width:850px}
}

/* Make the prompt discoverable without competing with the artwork. */
body #main[data-page="home"] .scene-panel .scene-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin:18px 0 22px;max-width:none}
.scene-actions>span{font-size:12px;color:#bcbcbc}
body #main[data-page="home"] .home-seo .scene-actions a[data-scene-prompt]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1px solid #f65366;border-radius:9px;background:#dc263d;color:#fff;font-size:15px;font-weight:600;line-height:1.4;text-decoration:none;transition:background .18s ease,border-color .18s ease}
body #main[data-page="home"] .home-seo .scene-actions a[data-scene-prompt]:hover{background:#ed354d;border-color:#ff7b8a;text-decoration:underline;text-underline-offset:4px}
body #main[data-page="home"] .home-seo .scene-actions a[data-scene-original]{font-size:13px;color:#c9c9ce}
.scene-actions a:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){body #main[data-page="home"] .home-seo .scene-actions a[data-scene-prompt]{transition:none}}

.scene-panel figure{position:relative}
.scene-zoom{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #ffffff70;border-radius:50%;background:#15151cd9;color:white;cursor:pointer;box-shadow:0 2px 12px #0004}
.scene-zoom:hover{background:#30303d}.scene-zoom:focus-visible{outline:2px solid white;outline-offset:4px}
.scene-prompt{margin:18px 0 22px;padding:20px;border:1px solid #3a3a44;border-radius:12px;background:#18181e}
.scene-prompt-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.scene-prompt-heading strong{font-size:14px;color:#f3f3f5}.scene-prompt-heading span{font-size:12px;color:#aaa}
body #main[data-page="home"] .scene-panel .scene-prompt p{max-width:none;margin:0;font-size:15px;line-height:1.75;color:#e2e2e8;overflow-wrap:anywhere}
/* Scene tabs sit above the image, matching the studio mode tabs. */
.scene-panel .game-scenes{display:flex;gap:0;flex-wrap:nowrap;width:fit-content;max-width:100%;margin:0;padding:8px 8px 0;background:#111116;border:0;border-radius:14px 14px 0 0}
.scene-panel .game-scenes button{min-height:46px;padding:12px 20px;border:0;border-radius:10px 10px 0 0;background:transparent;color:#a9a9b6;font-size:13px;font-weight:600}
.scene-panel .game-scenes button:hover{background:#17171d;color:#fff}
.scene-panel .game-scenes button[aria-pressed="true"]{background:#202027;color:#f5f5f8;box-shadow:inset 0 1px 0 #ffffff0b}
.scene-panel .game-scenes+figure{border-top-left-radius:0;border:8px solid #202027}
@media(max-width:600px){.scene-panel .game-scenes{width:100%;padding:6px 6px 0}.scene-panel .game-scenes button{flex:1;min-width:0;padding:11px 8px;font-size:12px}.scene-panel .game-scenes+figure{border-width:6px;border-top-right-radius:0}}