/* Measurements from the supplied Chamet reference; Pezliv content and approved controls retained. */
:root{--bg:#e9dcff;--fg:#320969;--muted:#6c4f8a;--line:#55208025;--heading:'Inter','Noto Sans KR',sans-serif}
body{background:var(--bg);color:var(--fg);font-family:'Inter','Noto Sans KR',sans-serif}
body>header{position:sticky;top:0;z-index:20;background:#9b44fd;color:white;height:80px;padding:0 max(40px,4.7%);transition:background .2s}
body>header.scrolled{background:#471888ed;backdrop-filter:blur(14px)}
body>header nav{font-size:16px;color:#ead1ff;gap:32px}body>header .brand{font-family:'Outfit','Noto Sans KR',sans-serif}
body>header .button.small{color:#9440ee}
.hero.hero-reference{background:#9b44fd;min-height:780px;padding:87px 40px 370px;border-radius:0 0 50% 50% / 0 0 7% 7%;color:white}
.hero-reference .hero-copy{max-width:1200px}
.hero-reference h1,html[lang=en] .hero-reference h1{font-family:'Inter','Noto Sans KR',sans-serif;font-size:64px;line-height:1.1;font-weight:800;letter-spacing:-1.9px;max-width:1200px;margin:0 auto 32px}
.hero-reference .hero-description{font-size:20px;line-height:1.5;font-weight:400;color:#f0dcff;max-width:1200px;margin:0 auto}
.hero-reference .store-downloads{margin-top:34px;gap:20px}
.hero-portraits{width:100%;max-width:1600px;height:465px;bottom:0;left:50%;transform:translateX(-50%);z-index:2}
.hero-portraits img{width:100%;height:auto;top:0}
.haze-face{opacity:.12;filter:blur(5px);width:116px;height:116px;box-shadow:0 0 0 4px #fff2}
.hf1{left:-3%;top:125px}.hf2{left:13%;top:35px}.hf3{right:18%;top:28px}.hf4{right:-2%;top:139px}
.ticker{background:transparent;color:#7a4ba2;border:0;height:72px;letter-spacing:2px}.ticker i{color:#a46add}
.section{padding-top:95px;padding-bottom:95px}.section h2{font-size:54px;font-weight:800;line-height:1.12;letter-spacing:-1.6px}
.section-heading>p,.section-lead,.gift-copy>p,.community-heading>p{font-size:17px;line-height:1.75;color:#6c4f8a}
.pink{color:#8c36d0}.intro{display:grid;grid-template-columns:1fr 1.14fr;column-gap:65px;align-items:center;padding-top:65px}
.intro .section-heading{display:block;grid-column:2;grid-row:1;margin:0}.intro .section-heading>p{max-width:none}.intro .performer-grid{grid-column:1;grid-row:1;gap:12px}
.intro .group-card{height:385px;border:5px solid white;border-radius:100px 100px 32px 32px;box-shadow:0 15px 35px #702fa11a}
.intro .group-card:first-child{transform:translateY(-22px) rotate(-5deg)}.intro .group-card:last-child{transform:translateY(22px) rotate(5deg)}
.intro .group-overlay{padding:18px;color:white}.intro .group-overlay h3{font-size:25px;letter-spacing:-.7px}.intro .tag{font-size:6px;letter-spacing:.5px;padding:5px 6px}.intro .card-bottom{font-size:10px;gap:6px}
.intro .image-note{grid-column:1;grid-row:2;text-align:center;margin-top:35px;color:#88649f;font-size:10px}
.experience{padding-top:65px}.experience-tab{color:#65427f;border-bottom:1px solid #7b4c9d2a}.experience-tab.active{background:#d7baf4;color:#34076c}.experience-tab small{color:#795b91}.tab-number,.tab-arrow{color:#8950b7}.experience-tab.active .tab-number,.experience-tab.active .tab-arrow{color:#7c24d0}
#experience-panel{color:#77558d}.outline-word{-webkit-text-stroke-color:#ad7bcc50}.visual-counter{color:#9471aa}.visual-counter span:first-child{color:#602294}
.purchase-note{background:#d8b8f24d;border-color:#c18bdf55;color:#684182}.purchase-note p{color:#72518c}
.community-points article{border-left-color:#c394df}.community-points h3{color:#420c7c}.community-points p{color:#75558f}.line-icon{color:#9146ce}
.faq details{border-color:#a176bf38}.faq summary{color:#411073;font-size:17px}.faq details p{color:#73568a;font-size:15px}
.download-section{background:#dbc2f7;border-top:1px solid #c194de33;border-bottom:0}.download-section h2{color:#3a0872;font-family:var(--heading);font-weight:800}.download-section .small-note{color:#805b99}
footer{background:#36115e;color:#fff;max-width:none;padding-left:5%;padding-right:5%}footer>p,.footer-bottom{color:#d0b6e7}.footer-bottom{border-color:#ffffff25}
dialog{background:#f5edff;color:#360b66;border-color:#c49be3}dialog p{color:#74518d}dialog .close-modal{color:#68417d}.modal-note{color:#8967a1}
html[lang=ko] .hero-reference h1{font-size:54px;line-height:1.22;max-width:1160px;letter-spacing:-2px;margin-bottom:32px}html[lang=ko] .hero-reference .hero-description{font-size:18px;line-height:1.7}
@media(min-width:1500px){.hero.hero-reference{min-height:840px}.hero-portraits{height:490px}}
@media(max-width:1100px){body>header{padding:0 4%}body>header nav{font-size:13px;gap:18px}.hero.hero-reference{padding-top:70px;min-height:750px}.hero-reference h1,html[lang=en] .hero-reference h1{font-size:56px}.hero-reference .hero-description{font-size:18px}.hero-portraits{height:375px}.intro{gap:40px}.section h2{font-size:44px}.intro .group-overlay h3{font-size:20px}}
@media(max-width:800px){body>header{height:80px}.hero.hero-reference{min-height:690px;padding:55px 5% 250px}.hero-reference h1,html[lang=en] .hero-reference h1{font-size:46px}.hero-reference .hero-description{font-size:17px}.hero-portraits{height:265px}.section{padding:70px 6%}.intro{grid-template-columns:1fr;gap:35px}.intro .section-heading{grid-column:1;grid-row:1}.intro .performer-grid{grid-column:1;grid-row:2;max-width:500px;width:100%;margin:10px auto}.intro .image-note{grid-row:3;margin:0}.intro .group-overlay h3{font-size:28px}.section h2{font-size:39px}.intro .group-card{height:360px}html[lang=ko] .hero-reference h1{font-size:43px}}
@media(max-width:480px){body>header{height:74px;padding:0 5%;gap:12px}.hero.hero-reference{min-height:575px;padding:46px 6% 160px;border-radius:0 0 50% 50% / 0 0 4% 4%}.hero-reference h1,html[lang=en] .hero-reference h1{font-size:34px;line-height:1.15;letter-spacing:-1.2px;margin-bottom:24px}.hero-reference .hero-description{font-size:13px;line-height:1.75}.hero-reference .store-downloads{margin-top:28px;gap:10px}.hero-portraits{width:100%;height:165px}.hf2{left:9%;top:0}.hf4{top:165px}.ticker{height:60px;font-size:8px;gap:22px}.section h2{font-size:34px}.section-heading>p,.section-lead,.gift-copy>p{font-size:15px}.intro{padding-top:45px}.intro .group-card{height:300px;border-width:4px}.intro .group-overlay{padding:12px}.intro .group-overlay h3{font-size:20px}.intro .tag{font-size:5px}.intro .card-bottom{font-size:8px}.intro .card-bottom a{width:28px;height:28px;flex-shrink:0}.intro .image-note{font-size:8px}html[lang=ko] .hero-reference h1{font-size:32px;line-height:1.3;margin-bottom:24px}html[lang=ko] .hero-reference .hero-description{font-size:13px;line-height:1.8}}

/* Orbit portraits follow the reference's near/far perspective. */
.hero-reference .hero-portraits.avatar-orbit{inset:0;width:100%;max-width:none;height:100%;transform:none;z-index:1;overflow:hidden;pointer-events:none}
.avatar-orbit .orbit-avatar{position:absolute;left:0;top:0;width:var(--avatar-size,124px);height:var(--avatar-size,124px);background:#fff3ff;border-radius:50%;will-change:transform,opacity,filter;transform-origin:center}
.avatar-orbit .orbit-avatar img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);max-width:none;object-fit:cover;border-radius:inherit}
.avatar-orbit .avatar-shape-1,.avatar-orbit .avatar-shape-1 img{clip-path:url(#avatar-flower);border-radius:0}
.avatar-orbit .avatar-shape-2,.avatar-orbit .avatar-shape-2 img{clip-path:url(#avatar-triangle);border-radius:0}
.avatar-shapes{position:absolute;pointer-events:none}
.orbit-toggle{position:absolute;bottom:38px;right:4.5%;z-index:4;width:34px;height:34px;border:1px solid #ffffff55;border-radius:50%;background:#ffffff18;color:white;cursor:pointer;display:grid;place-items:center;font-size:15px}
.orbit-toggle:hover{background:#ffffff35}.orbit-toggle:focus-visible{outline:3px solid white;outline-offset:4px}
@media(max-width:600px){.orbit-toggle{bottom:18px;width:30px;height:30px}.hero-reference .hero-copy{z-index:3}.avatar-orbit .orbit-avatar img{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}}

@media(min-width:801px){.hero.hero-reference{min-height:max(640px,calc(100svh - 80px));padding-bottom:180px}}
.avatar-orbit .avatar-window{position:absolute;inset:4px;overflow:hidden;border-radius:inherit}
.avatar-orbit .orbit-avatar img{inset:0;width:100%;height:100%;clip-path:none;border-radius:0}
.avatar-orbit .avatar-shape-1 .avatar-window{clip-path:url(#avatar-flower)}
.avatar-orbit .avatar-shape-2 .avatar-window{clip-path:url(#avatar-triangle)}
@media(max-width:600px){.avatar-orbit .avatar-window{inset:3px}}

/* The reference's animated invitation sits above the store badges. */
.hero-reference .hero-cta-wrap{position:relative;width:410px;max-width:100%;margin:24px auto 0;isolation:isolate}
.hero-reference .hero-cta{display:flex;align-items:center;width:100%;min-width:0;min-height:68px;padding:8px 10px 8px 30px;text-align:left;border:0;cursor:pointer;overflow:visible}
.hero-reference .hero-cta-arrow{width:92px;height:52px;flex-shrink:0;animation:cta-glow 2.8s ease-in-out infinite}
.hero-cta-arrow svg{width:39px;height:34px;overflow:visible;animation:cta-arrow 2.8s ease-in-out infinite}
.hero-cta-arrow path{fill:#ffe958;stroke:#8300df;stroke-width:3.5;stroke-linejoin:round}
.cta-reactions{position:absolute;inset:0;pointer-events:none;z-index:-1}
.cta-reactions span{position:absolute;right:75px;top:0;font-size:27px;opacity:0;animation:cta-reaction 7.2s ease-out infinite;transform-origin:center}
.cta-reactions span:nth-child(2){animation-delay:1.8s}.cta-reactions span:nth-child(3){animation-delay:3.6s}.cta-reactions span:nth-child(4){animation-delay:5.4s}
.hero-reference .store-downloads{margin-top:20px}
@keyframes cta-arrow{0%,55%,100%{transform:translateX(0)}65%{transform:translateX(6px)}78%{transform:translateX(0)}88%{transform:translateX(4px)}}
@keyframes cta-glow{0%,100%{box-shadow:0 0 9px 5px #ffffff55,0 0 15px 6px #c07aff99}50%{box-shadow:0 0 14px 8px #ffffff88,0 0 24px 12px #c07aff99}}
@keyframes cta-reaction{0%{opacity:0;transform:translate(0,8px) scale(.5) rotate(-12deg)}8%{opacity:1;transform:translate(4px,-29px) scale(1.04) rotate(10deg)}20%{opacity:1;transform:translate(16px,-48px) scale(.95) rotate(-8deg)}30%,100%{opacity:0;transform:translate(30px,-69px) scale(.7) rotate(15deg)}}
.hero-reference.motion-paused .hero-cta-arrow,.hero-reference.motion-paused .hero-cta-arrow svg,.hero-reference.motion-paused .cta-reactions span{animation-play-state:paused}
@media(min-width:801px){.hero.hero-reference{padding-top:80px}.hero-reference h1,html[lang=en] .hero-reference h1{margin-bottom:24px}}
@media(max-width:600px){.hero-reference .hero-cta-wrap{width:310px;margin-top:24px}.hero-reference .hero-cta{min-height:58px;padding:7px 9px 7px 22px;font-size:23px}.hero-reference .hero-cta-arrow{width:70px;height:44px}.hero-cta-arrow svg{width:32px;height:29px}.cta-reactions span{right:55px;font-size:23px}.hero-reference .store-downloads{margin-top:16px}.hero.hero-reference{padding-top:52px;padding-bottom:170px;min-height:635px}}
@media(prefers-reduced-motion:reduce){.hero-reference .hero-cta-arrow,.hero-cta-arrow svg,.cta-reactions span{animation:none}.hero-reference .hero-cta{transition:none}}

/* The original group cutout replaces the two app-preview cards. */
.intro{grid-template-columns:1.2fr 1fr;column-gap:42px}
.intro .performer-ensemble{grid-column:1;grid-row:1;margin:0;align-self:center;width:100%;position:relative}
.performer-ensemble img{display:block;width:100%;height:auto;max-width:100%}
@media(max-width:800px){.intro{grid-template-columns:1fr;gap:30px}.intro .performer-ensemble{grid-column:1;grid-row:2;max-width:660px;margin:0 auto}}

@media(min-width:601px) and (max-width:800px){.hero.hero-reference{padding-top:79px}}

/* Keep the expanded footer links readable on all screen sizes. */
body:not(.info-page) .footer-bottom{flex-wrap:wrap;row-gap:18px}