/* Product identity follows true circular arcs, on the same geometry as the rings. */
.hero-art{--hero-ring-size:560px}
.hero-rings,.hero-arc-title{width:var(--hero-ring-size)}
.hero-arc-title{height:auto;aspect-ratio:1;position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;overflow:visible;fill:var(--deep);font-weight:900}
.arc-system{font-size:26px;letter-spacing:1px}.arc-brand{font-size:54px;letter-spacing:-2px}
.hero-description{max-width:560px;line-height:1.9;opacity:1}
.hero-kel-speech{top:auto;right:-1%;bottom:36%;font-size:17px;padding:15px 22px;z-index:5;border-radius:999px;animation:speech-drift 7.3s -2s ease-in-out infinite}
@keyframes speech-drift{0%,100%{transform:translate(-8px,0) rotate(3deg)}50%{transform:translate(6px,-11px) rotate(-2deg)}}
/* Three substantial, opaque bands trace the anatomy panel rather than a circle. */
.arch-rings i{inset:-60px -52px -48px;background:#b9a1db;border-radius:999px 999px 65px 65px}
.arch-rings i:nth-child(2){inset:-39px -34px -31px;background:#d6cbfb;border-radius:999px 999px 53px 53px}
.arch-rings i:nth-child(3){inset:-18px -16px -15px;background:#eee8f6;border-radius:999px 999px 43px 43px}
.anatomy-area{background:var(--cream);margin-top:45px;margin-bottom:35px}
.anatomy-area:before{content:'';position:absolute;inset:0;background:var(--cream);border-radius:inherit;z-index:-1}
.anatomy-index{right:-67px}
/* Small rounded bursts: one group per feature, never a confetti field. */
.feature-tag:before{width:60px;height:45px;top:-37px;left:16px;mask:url('assets/tag-burst.svg') center/contain no-repeat;background:var(--orange);opacity:1;transform:rotate(-24deg)}
.feature-tag:after{display:none}
.feature-tag:nth-of-type(even):before{left:auto;right:8px;top:-36px;transform:rotate(58deg) scale(.8)}
.feature-tag{scale:1;transition:scale .3s cubic-bezier(.2,.8,.2,1),transform .3s;transform-origin:center}
.feature-tag:hover,.feature-tag:focus-visible,.feature-tag[aria-pressed=true]{scale:1.085;z-index:7}
.feature-tag:hover:before,.feature-tag:focus-visible:before{transform:translate(-4px,-5px) rotate(-30deg)}
.feature-tag:nth-of-type(even):hover:before,.feature-tag:nth-of-type(even):focus-visible:before{transform:translate(4px,-4px) rotate(65deg) scale(.9)}
.product-tiny-star{animation:spark-gather 7s ease-in-out infinite}
.product-star-secondary{animation:spark-gather 8.4s -3s ease-in-out infinite reverse}
@keyframes spark-gather{0%,100%{translate:0 0;scale:.88}50%{translate:8px -9px;scale:1.12}}
/* The third game uses the same three-screen composition as progress and Kel. */
.gallery-play .app-screen{width:34%;max-width:195px}
.gallery-play .screen-1{left:-2%;right:auto;--screen-turn:-11deg;--screen-y:28px;z-index:1}
.gallery-play .screen-2{left:32%;right:auto;--screen-turn:-1deg;--screen-y:-12px;z-index:3}
.gallery-play .screen-3{right:-1%;--screen-turn:10deg;--screen-y:30px;z-index:2}
/* PNG center-body cut line is y=314 in a 488px-wide image. Hands overlap the rim. */
.film-heading{position:relative;z-index:3;margin-bottom:86px}
.film-label{background:var(--cream);color:var(--deep);opacity:1;border:2px solid var(--deep)}
.film-frame-wrap{position:relative;--kel-width:clamp(190px,22vw,270px)}
.film-frame{background:var(--deep);border:0;padding:9px;box-shadow:none;border-radius:36px}
.film-frame video{border-radius:27px}
.film-kel{position:absolute;width:var(--kel-width);max-width:none;height:auto;right:10%;top:calc(var(--kel-width) * -.64344 + 5px);z-index:4;pointer-events:none}
@media(min-width:1450px){.hero-art{--hero-ring-size:630px}}
@media(max-width:1180px){.hero-art{--hero-ring-size:510px}.hero-kel-speech{font-size:15px;padding:13px 18px}.arch-rings i{inset:-49px -39px -40px}.arch-rings i:nth-child(2){inset:-32px -26px -26px}.arch-rings i:nth-child(3){inset:-15px -12px -12px}.anatomy-index{right:-50px}}
@media(max-width:900px){.hero-art{--hero-ring-size:445px}.hero-kel-speech{font-size:14px;bottom:32%;right:-3%}.body-section{gap:12%}.arch-rings i{inset:-42px -28px -35px}.arch-rings i:nth-child(2){inset:-28px -19px -23px}.arch-rings i:nth-child(3){inset:-13px -9px -11px}.anatomy-index{right:-39px}.gallery-play .app-screen{max-width:200px}.feature-tag:before{width:48px;height:37px;top:-31px}.film-frame-wrap{--kel-width:220px}}
@media(max-width:650px){.hero-art{--hero-ring-size:400px}.hero-arc-title{top:48%}.arc-system{font-size:27px}.hero-kel-speech{right:-1%;bottom:33%;font-size:13px;padding:12px 16px}.hero-description{font-size:15px}.anatomy-area{margin:70px 26px 25px}.anatomy-index{right:-39px}.feature-tag:before{width:43px;height:33px;top:-28px}.feature-tag:nth-of-type(even):before{top:-26px}.feature-tag:hover,.feature-tag:focus-visible,.feature-tag[aria-pressed=true]{scale:1.055}.gallery-play .screen-1{left:-3%;--screen-y:25px}.gallery-play .screen-2{left:32%;--screen-y:0px}.gallery-play .screen-3{right:-3%;--screen-y:31px}.film-heading{margin-bottom:64px}.film-frame-wrap{--kel-width:155px}.film-kel{right:8%;top:calc(var(--kel-width) * -.64344 + 3px)}.film-frame{padding:6px;border-radius:24px}.film-frame video{border-radius:18px}.film-label{font-size:11px;padding:9px 11px}}
@media(prefers-reduced-motion:reduce){.hero-kel-speech,.product-tiny-star,.product-star-secondary{animation:none}.feature-tag{transition:none}}

.arch-rings{z-index:-2}.hero-kel-speech{bottom:41%;right:-4%}
@media(max-width:900px){.hero-kel-speech{bottom:38%;right:-3%}}
@media(max-width:650px){.hero-kel-speech{bottom:39%;right:-1%}}