/* The star field belongs to the opening scene only. */
body{isolation:isolate}
.hero-stage{isolation:isolate}
.hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;mask-image:linear-gradient(#000 92%,transparent)}
.showcase-stage{background:transparent}
.showcase-picture{display:block;width:100%;height:100%}
.showcase-tv{clip-path:polygon(0 0,100% 0,100% 73.5%,62% 73.5%,61% 75%,61% 100%,57% 100%,56% 96%,54.8% 92%,52.5% 88%,49% 84%,46% 82%,44% 81.5%,40% 81.5%,37% 82.5%,35.5% 85%,35.6% 90%,36% 94%,32% 97%,29% 100%,1.2% 100%,1.2% 67%,0 63%)}
/* A soft reflection replaces the orange outline. */
.feature-ribbon .ribbon-card,.feature-ribbon .ribbon-card[data-centered],.feature-ribbon .ribbon-card:hover{border-color:#ffffff1b}
.feature-ribbon .ribbon-card{--light-x:50%;--light-y:25%;transition:box-shadow 650ms var(--ease);background:linear-gradient(155deg,#222229,#16161d 77%)}
.feature-ribbon .ribbon-card::before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:0;background:radial-gradient(ellipse 340px 250px at var(--light-x) var(--light-y),#fff2,transparent 72%);transition:opacity 650ms var(--ease)}
.feature-ribbon .ribbon-card::after{inset:0;height:auto;opacity:.42;background:linear-gradient(120deg,#ffffff0a,transparent 40%,#ffffff05 70%,transparent);transition:opacity 650ms var(--ease)}
.feature-ribbon .ribbon-card:hover::before,.feature-ribbon .ribbon-card:focus-visible::before{opacity:.8}
.feature-ribbon .ribbon-card:hover::after{opacity:.9}
.feature-ribbon .ribbon-card:hover{box-shadow:0 28px 65px #0008,0 8px 30px #ffffff04}
.feature-ribbon .ribbon-card:focus-visible,.feature-ribbon:focus-visible{outline:2px solid #dddde7;outline-offset:4px}
.feature-ribbon .ribbon-card-title{top:24px}
.feature-ribbon .deck-card-copy{top:68px}
.feature-ribbon .ribbon-cast .deck-card-copy{top:92px}
.deck-controls>div{min-height:30px;justify-content:center}
.deck-controls>button:hover{border-color:#ffffff38;background:linear-gradient(135deg,#ffffff18,#ffffff04)}
.deck-controls>button:focus-visible{outline-color:#dddde7}

/* Generous, coherent product illustrations in the moving feature cards. */
.feature-ribbon-stage{height:464px}
.feature-ribbon .ribbon-card{height:402px}
.feature-ribbon .ribbon-card .ribbon-art{inset:127px 0 50px;transform:none;overflow:visible}
.deck-art-scene{display:block;position:relative;width:100%;height:100%;isolation:isolate}
.deck-display{position:absolute;left:7%;right:7%;top:12%;aspect-ratio:1672/941;padding:4px;border:1px solid #ffffff49;border-radius:9px;background:linear-gradient(155deg,#797980,#141419 15%,#35353a);box-shadow:0 22px 30px #0008;transform:perspective(850px) rotateY(-8deg) rotateZ(-2deg)}
.deck-display>img{width:100%;height:100%;object-fit:contain;border-radius:5px}
.deck-display::after{content:'';position:absolute;inset:0;background:linear-gradient(140deg,#ffffff10,transparent 35%);pointer-events:none;border-radius:inherit}
.deck-glass-label{position:absolute;z-index:4;bottom:17px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;max-width:94%;padding:10px 13px;border-radius:12px;border:1px solid #ffffff22;background:linear-gradient(140deg,#383840ec,#1d1d25f5);box-shadow:0 9px 20px #0005;color:#ededf1;font-size:11px;font-weight:550}
.deck-glass-label>.icon{width:15px;height:15px;color:#f0ae7d}
.deck-poster-fan{position:absolute;inset:10px 2% 27px;perspective:1000px;transform-style:preserve-3d}
.deck-poster{position:absolute;display:block;width:36%;aspect-ratio:245/385;border-radius:7px;border:1px solid #ffffff21;box-shadow:0 17px 23px #0008;background-repeat:no-repeat;background-color:#111116}
.poster-tanic{background-image:url('/design/v25/assets/studio/v16/screen-mangotanic.webp');background-size:682.45% 244.42%;background-position:5.817% 46.94%;left:34%;top:0;transform:translateZ(28px) rotate(5deg)}
.poster-stellar{background-image:url('/design/v25/assets/studio/v16/screen-mangostellar.webp');background-size:407.25% 590.51%;background-position:4.717% 33.742%;left:57%;top:15px;transform:rotateY(-12deg) rotate(17deg)}
.poster-royaume{background-image:url('/design/v25/assets/studio/v16/screen-royaume.webp');background-size:1375.61% 519.55%;background-position:6.18% 51.66%;left:8%;top:15px;transform:rotateY(12deg) rotate(-13deg)}
.art-clap .deck-glass-label{bottom:7px}
.art-sports{overflow:hidden;mask-image:linear-gradient(0deg,#000 80%,transparent)}
.art-sports>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:46% 50%}
.sports-photo-shade{position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#17171fc0)}
.art-sports .deck-glass-label{bottom:15px}
.art-replay .deck-display{top:11%;transform:perspective(850px) rotateY(7deg) rotateZ(2deg);filter:brightness(.8)}
.deck-replay-cue{position:absolute;left:21%;right:21%;top:30%;display:flex;flex-direction:column;align-items:center;gap:9px;color:white;font-size:10px;text-shadow:0 2px 8px #000}
.deck-replay-cue>.icon{width:38px;height:38px;padding:8px;border:1px solid #ffffff70;border-radius:50%;background:#17171bbd;backdrop-filter:blur(8px)}
.deck-playback-line{position:absolute;left:14%;right:14%;bottom:19%;height:3px;background:#ffffff25;border-radius:4px}
.deck-playback-line>i{position:absolute;inset:0 68% 0 0;background:linear-gradient(90deg,#e07b39,#f5c0a0);border-radius:4px;box-shadow:0 0 12px #e07b393a}
.deck-playback-line>i::after{content:'';position:absolute;right:-3px;top:-2px;width:7px;height:7px;background:#eee;border-radius:50%}
.deck-phone{position:absolute;left:12%;top:-8%;height:95%;aspect-ratio:843/1866;padding:4px;background:#0b0c11;border:1px solid #95959d;border-radius:17px;transform:rotate(-7deg);box-shadow:0 15px 25px #0008;overflow:hidden}
.deck-phone>img{width:100%;height:100%;object-fit:contain;border-radius:13px}
.deck-traveller{position:absolute;right:0;bottom:16px;height:106%;width:66%;object-fit:contain;filter:drop-shadow(0 17px 16px #0004)}
.art-offline .deck-glass-label{bottom:5px}
.art-cast .deck-display{left:15%;right:4%;top:0;transform:perspective(850px) rotateY(-5deg)}
.deck-cast-phone{position:absolute;left:9%;bottom:14%;width:25%;height:65%;border:1px solid #95959d;border-radius:12px;background:linear-gradient(160deg,#24252d,#0a0b10);box-shadow:0 12px 24px #0008;transform:rotate(-8deg);padding:22% 4px 10px}
.deck-cast-phone::before{content:'';position:absolute;top:5px;left:39%;width:22%;height:3px;border-radius:5px;background:#050506}
.cast-phone-video{display:block;position:absolute;left:4px;right:4px;top:17%;aspect-ratio:16/9;overflow:hidden;border-radius:3px}
.cast-phone-video>img{width:100%;height:100%;object-fit:cover}
.cast-phone-name{display:block;text-align:center;font:600 7px Sora;margin-top:0}
.cast-phone-controls{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px}
.cast-phone-controls>.icon{width:10px;height:10px}.cast-phone-controls>.icon:nth-child(2){color:#f5a05c}
.deck-cast-wave{position:absolute;bottom:13%;left:52%;width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#ffffff14,transparent 72%);color:#e9c4a8}
.deck-cast-wave>.icon{width:28px;height:28px}
.deck-laptop{aspect-ratio:1692/930;top:13%;left:8%;right:8%;transform:perspective(850px) rotateY(-6deg) rotateZ(-2deg)}
.deck-laptop::before{content:'';position:absolute;top:100%;left:-7%;right:-7%;height:9px;background:linear-gradient(#56565e,#24242b 60%,#07070b);border-radius:1px 1px 40% 40%;box-shadow:0 7px 12px #0008}
.art-comfort .deck-glass-label{bottom:10px}
@media(max-width:700px){
 .showcase-visual{width:94%;margin-top:10px}
 .showcase-mockup{aspect-ratio:1122/1402;mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 89%,transparent),linear-gradient(to right,transparent,#000 3.5%,#000 97.5%,transparent);mask-composite:intersect}
 .showcase-tv{clip-path:none}
 .showcase-phone{border-radius:18px;clip-path:polygon(0 0,100% 0,100% 43%,98% 44%,96% 47%,98% 51%,100% 53%,100% 100%,0 100%)}
 .feature-ribbon .ribbon-card-title{top:22px}
 .feature-ribbon .deck-card-copy{top:62px}
 .feature-ribbon .ribbon-cast .deck-card-copy{top:87px}
 .feature-ribbon .ribbon-card{height:371px}
 .feature-ribbon-stage{height:422px}
 .feature-ribbon .ribbon-card .ribbon-art{top:124px;bottom:47px}
 .deck-glass-label{font-size:10px;padding:9px 10px;bottom:22px}
 .deck-display{top:14%}
 .art-cast .deck-display{top:7%}
 .deck-cast-phone{height:61%;padding-top:23%}
 .deck-poster-fan{top:14px}
}
@media(prefers-reduced-motion:reduce){.hero-particles{display:none}.feature-ribbon .ribbon-card::before,.feature-ribbon .ribbon-card::after{transition:none}}