/* Concave three-dimensional showroom. All page textures are complete, uncropped designs. */
.hero{background:linear-gradient(125deg,#eaf3ff 0%,#f7fcff 40%,#edf2ff 76%,#eae8ff 100%)}
.hero-copy{padding-top:28px}.hero h1{font-size:clamp(38px,4.8vw,74px);line-height:1.13}.hero h1 span{margin-top:3px}.hero-sub{margin-top:13px}.hero-price strong{font-size:92px}.hero-actions{margin-top:0}.hero-stage.gallery-stage{margin-top:-92px;height:490px;overflow:clip;isolation:isolate;perspective:none;cursor:pointer;--camera-x:0px;--camera-y:0px;--camera-rx:0deg;--camera-ry:0deg;--mascot-x:0px;--mascot-y:0px}
.gallery-haze{position:absolute;inset:-10% -10% 0;background:radial-gradient(ellipse at 50% 38%,#ffffff00 18%,#dcefff33 64%,#dde7ff66);pointer-events:none;z-index:0}
.hero-world{position:absolute;inset:0;perspective:1650px;perspective-origin:50% 40%;transform-style:preserve-3d;z-index:1;pointer-events:none}
.gallery-camera{position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(var(--camera-x),var(--camera-y),0) rotateX(var(--camera-rx)) rotateY(var(--camera-ry))}
.gallery-panel{position:absolute;width:248px;height:380px;left:50%;top:50%;margin:-190px 0 0 -124px;transform-style:preserve-3d;transform:translate3d(0,0,-200px);will-change:transform;backface-visibility:hidden}
.panel-surface{position:absolute;inset:0;background:#fff;border:5px solid #ffffffeb;border-radius:13px;overflow:hidden;box-shadow:0 0 0 1px #b9d9ffb0,0 2px 3px #fff inset,0 6px 18px #4574ab20}
.panel-chrome{height:20px;background:linear-gradient(#fff,#f1f7ff);display:flex;align-items:center;justify-content:space-between;padding:0 5px;gap:4px;border-bottom:1px solid #dceafa;color:#5a80ae;font:6px/1 Arial,sans-serif}
.chrome-dots{display:flex;gap:3px}.chrome-dots i{width:3px;height:3px;border-radius:50%;background:#c6dcfa}.chrome-dots i:first-child{background:#b6c8fb}.chrome-dots i:nth-child(2){background:#b0e1e8}.chrome-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em}.chrome-expand{font-size:9px;color:#6e94d6}
.page-art{width:100%;height:calc(100% - 20px);object-fit:contain;object-position:top;background:white}
.panel-sheen{position:absolute;inset:0;pointer-events:none;border-radius:9px;background:linear-gradient(115deg,#ffffff4d,transparent 33%,transparent 71%,#c9e7ff26);box-shadow:inset 0 0 0 1px #ffffff80}
.panel-thickness{position:absolute;right:-3px;top:8px;bottom:8px;width:4px;background:linear-gradient(#fff,#b9d5fa 50%,#f5fbff);transform:rotateY(90deg);transform-origin:left center;border-radius:2px}
.panel-reflection{position:absolute;left:5px;right:5px;top:calc(100% + 5px);height:74%;pointer-events:none;opacity:.13;overflow:hidden;mask-image:linear-gradient(to bottom,#0008,transparent 85%)}
.panel-reflection img{position:absolute;bottom:0;width:100%;height:135%;object-fit:fill;transform:scaleY(-1)}
.gallery-floor{position:absolute;z-index:2;bottom:-1px;left:-10%;right:-10%;height:70px;background:linear-gradient(0deg,#e6f2ff 5%,#e6f2ff5c 55%,#e6f2ff00);pointer-events:none}
.platform-shadow{position:absolute;left:calc(50% - 155px);bottom:5px;width:310px;height:28px;border-radius:50%;background:radial-gradient(ellipse,#2e68b72a,transparent 70%);z-index:3;pointer-events:none}
.platform-orbit{position:absolute;width:min(900px,76%);height:auto;left:50%;bottom:-21px;transform:translateX(-50%);z-index:3;overflow:visible;pointer-events:none;stroke-width:3;filter:drop-shadow(0 0 5px #7faaff65)}
.platform-orbit ellipse{fill:#ffffff35;stroke:url(#orbit-stroke);stroke-width:3}
.mascot-parallax{position:absolute;width:365px;left:calc(50% - 182.5px);bottom:13px;z-index:5;transform:translate3d(var(--mascot-x),var(--mascot-y),0);pointer-events:none}
.mascot-float{transform-origin:50% 88%;animation:whole-dragie-idle 6s ease-in-out infinite;filter:drop-shadow(0 12px 7px #487fa21e)}
.mascot-float img{width:100%;height:auto;max-width:none}
.gallery-stage .speech{top:auto;bottom:156px;left:calc(50% + 114px);font-size:17px;line-height:1.45;padding:20px 26px;max-width:268px;box-shadow:0 10px 28px #6486d323;pointer-events:none}
.gallery-stage .grow-note{top:30px;left:6%;font-size:29px;z-index:4;pointer-events:none}
.scene-spark{position:absolute;z-index:3;pointer-events:none;width:23px;height:23px;background:linear-gradient(135deg,#fff,#b9dfff);clip-path:polygon(50% 0,61% 36%,100% 50%,62% 61%,50% 100%,39% 62%,0 50%,38% 39%);animation:spark-shimmer 5s ease-in-out infinite}
.spark-one{left:13%;top:6px}.spark-two{right:17%;bottom:130px;width:16px;height:16px;animation-delay:-2s}
.gallery-stage[data-paused=true] .mascot-float,.gallery-stage[data-paused=true] .scene-spark{animation-play-state:paused}
.gallery-stage[data-ready=false] .gallery-panel{visibility:hidden}
@keyframes whole-dragie-idle{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-7px) rotate(.7deg)}}
@keyframes spark-shimmer{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:.9;transform:scale(1.08)}}
@media(min-width:1600px){.hero-stage.gallery-stage{height:530px}.mascot-parallax{width:390px;left:calc(50% - 195px)}}
@media(max-width:1100px){.hero h1{font-size:clamp(38px,5.4vw,61px)}.hero-stage.gallery-stage{height:455px;margin-top:-60px}.mascot-parallax{width:330px;left:calc(50% - 165px)}.gallery-stage .speech{left:calc(50% + 104px);font-size:14px;bottom:145px;padding:17px 20px}.gallery-stage .grow-note{left:4%;font-size:24px;top:12px}}
@media(max-width:760px){.hero-copy{padding-top:28px}.hero h1{font-size:clamp(27px,7.3vw,48px)}.hero-sub{font-size:14px}.hero-price strong{font-size:58px}.hero-price{margin:10px 0 12px}.hero-stage.gallery-stage{height:345px;margin-top:4px}.hero-world{perspective:1000px;perspective-origin:50% 43%}.gallery-panel{width:153px;height:237px;margin:-118.5px 0 0 -76.5px}.panel-surface{border-width:3px;border-radius:8px}.panel-chrome{height:13px;font-size:4px;padding:0 3px}.chrome-dots{gap:2px}.chrome-dots i{width:2px;height:2px}.chrome-expand{font-size:6px}.page-art{height:calc(100% - 13px)}.panel-sheen{border-radius:6px}.panel-reflection{opacity:.1;top:calc(100% + 3px)}.mascot-parallax{width:252px;left:calc(50% - 126px);bottom:9px}.gallery-stage .speech{left:auto;right:9px;top:15px;bottom:auto;font-size:11px;padding:12px 14px;max-width:165px;z-index:6}.gallery-stage .grow-note{font-size:17px;top:6px;left:15px}.platform-orbit{width:570px;max-width:none;bottom:-9px}.platform-shadow{width:230px;left:calc(50% - 115px);bottom:0}.gallery-floor{height:45px}.spark-one{left:7%;top:42px;width:13px;height:13px}.spark-two{right:10%;bottom:98px;width:10px;height:10px}html[lang=en] .hero h1{font-size:30px}html[lang=en] .gallery-stage .speech{font-size:10px}}
@media(prefers-reduced-motion:reduce){.mascot-float,.scene-spark{animation:none!important}.gallery-stage{cursor:default}}
@media(min-width:1101px){.hero-stage.gallery-stage{height:475px;overflow:visible}.mascot-parallax{width:390px;left:calc(50% - 195px);bottom:18px}.gallery-stage .speech{left:calc(50% + 132px);bottom:194px;font-size:18px}.gallery-stage .grow-note{top:-108px;left:6%}}
@media(min-width:1101px){.hero-copy{padding-top:20px}.hero h1{line-height:1.05}.hero h1 span{margin-top:0}.hero-sub{margin-top:8px}.hero-stage.gallery-stage{margin-top:-70px}}
.gallery-stage[data-suspended=true] .mascot-float,.gallery-stage[data-suspended=true] .scene-spark{animation-play-state:paused}
.panel-surface{transform:translateZ(1px);backface-visibility:hidden}
.panel-reflection{transform:translateZ(-1px)}
.showroom-note{display:none;pointer-events:none}
@media(min-width:1101px){.hero-price strong{font-size:108px;line-height:1.1}.showroom-note{display:block;position:absolute;right:6%;top:-108px;z-index:4;color:#2375ff;font-size:24px;line-height:1.3;font-style:italic;font-weight:700;letter-spacing:-.04em;transform:rotate(-7deg)}}
/* Keep the complete character and calls to action in short laptop viewports. */
@media(min-width:761px) and (max-height:850px){.hero-copy{padding-top:16px}.hero h1,html[lang=en] .hero h1{font-size:clamp(40px,4.3vw,62px);line-height:1.05}.hero h1 span{margin-top:0}.hero-sub{font-size:18px;margin-top:8px}.hero-price strong{font-size:86px;line-height:1.1}.hero-price p{font-size:23px}.hero-actions .button{font-size:16px;padding-block:12px;min-width:200px}.hero-stage.gallery-stage{height:360px;margin-top:-50px;overflow:visible}.gallery-panel{width:196px;height:300px;margin:-150px 0 0 -98px}.panel-chrome{height:16px;font-size:5px}.page-art{height:calc(100% - 16px)}.mascot-parallax{width:290px;left:calc(50% - 145px);bottom:12px}.gallery-stage .speech{font-size:13px;padding:15px 19px;max-width:220px;left:calc(50% + 100px);bottom:143px}.gallery-stage .grow-note{top:-82px;font-size:23px}.showroom-note{top:-85px;font-size:20px}.platform-orbit{width:690px;bottom:-13px}.platform-shadow{width:245px;left:calc(50% - 122.5px)}}
.curved-cinema{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.gallery-stage[data-surface=curved-webgl] .hero-world{visibility:hidden}
.gallery-stage[data-ready=false] .curved-cinema{visibility:hidden}
/* Pearlescent architectural light ribbons match the approved concept. */
.hero{background:#edf5ff}
.hero::before,.hero::after{display:none}
.hero-light{background:url('./pearl-showroom.svg') center top/100% 100% no-repeat;opacity:1}
.gallery-haze{background:radial-gradient(ellipse at 50% 35%,#ffffff00 20%,#c9e5ff18 66%,#c7d8ff40)}
.gallery-floor{background:linear-gradient(0deg,#eaf5ff 0%,#f7fcff90 45%,#e6f2ff00)}
.platform-orbit{filter:drop-shadow(0 0 7px #90bbff) drop-shadow(0 0 18px #d1b7ff80)}
.platform-orbit ellipse{fill:#ffffff48}
@media(max-width:760px){.hero-light{background-size:auto 100%;background-position:center top}}
/* Solid pearlescent podium with a luminous rim and dimensional front edge. */
.platform-orbit{filter:drop-shadow(0 4px 10px #789bdd35);object-fit:contain}
@media(max-width:760px){.platform-orbit{width:450px;bottom:-6px}}
/* A soft sculpted speech bubble, lit like the pearl showroom. */
.gallery-stage .speech{border-radius:36px 40px 38px 26px;background:linear-gradient(145deg,#fff 12%,#fafdff 52%,#e5eaff 100%);border:1px solid #ffffffed;box-shadow:inset 0 3px 2px #fff,inset -3px -5px 9px #b9c4f445,0 5px 0 #c6cff399,0 15px 24px #5774bd35,0 0 22px #fff8;transform-origin:0 85%;animation:speech-bob 5.8s ease-in-out infinite;filter:drop-shadow(0 0 1px #b8c6ec);}
.gallery-stage .speech::before{content:'';position:absolute;left:15%;right:18%;height:10px;top:6px;border-radius:50%;background:linear-gradient(90deg,#fff0,#ffff,#fff0);pointer-events:none}
.gallery-stage .speech::after{left:20px;bottom:-10px;width:25px;height:25px;clip-path:none;border-radius:0 0 22px 3px;transform:skewY(-27deg) rotate(12deg);background:linear-gradient(130deg,#fafcff,#ebefff);box-shadow:-2px 3px 0 #c6cff370;z-index:-1}
@keyframes speech-bob{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(0,-6px,0) rotate(1deg)}}
.gallery-stage[data-paused=true] .speech,.gallery-stage[data-suspended=true] .speech{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.gallery-stage .speech{animation:none}}
@media(max-width:760px){.gallery-stage .speech{border-radius:25px 29px 26px 20px;box-shadow:inset 0 2px 2px #fff,inset -2px -3px 6px #b9c4f43a,0 3px 0 #c6cff380,0 9px 15px #5774bd29}.gallery-stage .speech::after{width:18px;height:18px;bottom:-7px;left:18px}}
@font-face{font-family:DragieSpeech;src:url('./fonts/sriracha.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.gallery-stage .speech{font-family:DragieSpeech,cursive;font-weight:400;font-size:22px;line-height:1.45;letter-spacing:0;animation:speech-chat 3.8s ease-in-out infinite}
@keyframes speech-chat{0%,100%{transform:translate3d(0,1px,0) rotate(-2deg) scale(1)}35%{transform:translate3d(3px,-11px,0) rotate(2deg) scale(1.025)}65%{transform:translate3d(-2px,-5px,0) rotate(-.5deg) scale(1.01)}}
@media(min-width:761px) and (max-height:850px){.gallery-stage .speech{font-size:17px}}
@media(max-width:760px){.gallery-stage .speech,html[lang=en] .gallery-stage .speech{font-size:14px;max-width:184px;padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.gallery-stage .speech{animation:none}}
/* Dragie sits in front of the speech bubble, with the lettering kept to its right. */
.mascot-parallax{z-index:8}

.mascot-float{position:relative}.mascot-float .dragie-wing-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.mascot-float.has-wing-motion>img{opacity:0}@media(prefers-reduced-motion:reduce){.mascot-float.has-wing-motion>img{opacity:1}.mascot-float .dragie-wing-canvas{display:none}}

@media(prefers-reduced-motion:reduce){.mascot-float.has-wing-motion>img{opacity:0}.mascot-float .dragie-wing-canvas{display:block}}

.gallery-panel{width:210px;height:320px;margin:-160px 0 0 -105px}.gallery-panel[data-row=upper]{width:147px;height:224px;margin:-112px 0 0 -73.5px}@media(max-width:760px){.gallery-panel{width:125px;height:190px;margin:-95px 0 0 -62.5px}.gallery-panel[data-row=upper]{width:88px;height:133px;margin:-66.5px 0 0 -44px}}

/* Both rows share identical panel dimensions. */
.gallery-panel,.gallery-panel[data-row=upper]{width:147px;height:224px;margin:-112px 0 0 -73.5px}@media(max-width:760px){.gallery-panel,.gallery-panel[data-row=upper]{width:88px;height:133px;margin:-66.5px 0 0 -44px}}

.gallery-stage[data-surface=curved-webgl]{overflow:visible}

.panel-surface{box-shadow:0 0 0 1px #b9d9ff70,0 2px 3px #fff inset,0 3px 7px #4574ab14}
.hero-actions .button.outline{background:#fff}
/* Hero calls to action: solid surfaces, pointer light and a single sheen pass. */
.hero-actions .button{position:relative;isolation:isolate;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}.hero-actions .button::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120px circle at var(--light-x,50%) var(--light-y,50%),#ffffff70,transparent 75%);opacity:0;transition:opacity .25s}.hero-actions .button.outline::before{background:radial-gradient(110px circle at var(--light-x,50%) var(--light-y,50%),#cce8ff,transparent 75%),linear-gradient(105deg,#fff,#f6f1ff);opacity:0}.hero-actions .button::after{content:'';position:absolute;inset:-50% auto -50% -65%;width:38%;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffff90,transparent);transform:skewX(-22deg);opacity:0}.hero-actions .button svg{transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:center}.hero-actions .button:focus-visible{outline:3px solid #9474ff;outline-offset:5px;box-shadow:0 8px 24px #307bff35}.hero-actions .button:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){.hero-actions .button:hover{transform:translate3d(var(--button-x,0px),calc(-4px + var(--button-y,0px)),0) scale(1.025);box-shadow:0 12px 28px #0868ff45,0 3px 8px #266bff1c}.hero-actions .button.outline:hover{background:#fff;border-color:#7562ef;box-shadow:0 12px 28px #6656df28,0 3px 8px #2673ff17}.hero-actions .button:hover::before{opacity:1}.hero-actions .button:hover::after{animation:dragie-cta-sweep .8s ease-out both}.hero-actions .button:not(.outline):hover svg{transform:translateX(5px) rotate(-5deg)}.hero-actions .button.outline:hover svg{transform:scale(1.18) rotate(-8deg)}.hero-actions .button:active{transform:translate3d(0,0,0) scale(.98)}}
@keyframes dragie-cta-sweep{0%{transform:translateX(0) skewX(-22deg);opacity:0}20%{opacity:1}100%{transform:translateX(600%) skewX(-22deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-actions .button,.hero-actions .button svg{transition:none}.hero-actions .button:hover,.hero-actions .button:active{transform:none}.hero-actions .button:hover svg{transform:none!important}.hero-actions .button::before,.hero-actions .button::after{display:none}}

/* Blue sweep on the white demo CTA complements the white sweep on blue. */
.hero-actions .button.outline::after{background:linear-gradient(90deg,transparent,#1689ffd9,transparent)}

/* Frameless comparison: raw website imagery with compact shadows only. */
.panel-surface{box-sizing:border-box;border:4px solid #fff;border-radius:7px;background:#fff;box-shadow:0 3px 7px #4574ab14}.panel-chrome,.panel-sheen,.panel-thickness{display:none}.page-art{height:100%;object-fit:fill}