@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(/assets/fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(/assets/fonts/fredoka-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-latin-700-normal.woff2) format("woff2")}
:root{
 --bg:#FFFFFF;--bg-alt:#F6F4FC;--card:#FFFFFF;--ink:#14112B;--text:#3A3654;--muted:#7D7896;--line:#ECE8F6;
 --cy:#22D3EE;--vi:#8B5CF6;--mg:#FF5FA2;--or:#FFB547;
 --grad:linear-gradient(100deg,#22D3EE 0%,#8B5CF6 50%,#FF5FA2 100%);
 --tint-cy:#E6FAFD;--tint-vi:#F0EAFF;--tint-mg:#FFEAF3;--tint-or:#FFF4E2;
 --head:Fredoka,"Arial Rounded MT Bold",system-ui,sans-serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --r:14px;--r-lg:26px;--wrap:1220px;--shadow:0 24px 60px -20px rgba(60,30,140,.25);--shadow-sm:0 6px 18px rgba(20,17,43,.07);color-scheme:light}

*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;transition:background .3s,color .3s;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:-.01em;line-height:1.04;color:var(--ink);margin:0 0 .45em}
h1{font-size:clamp(42px,5.6vw,76px)}h2{font-size:clamp(32px,4.4vw,56px)}h3{font-size:22px}
p{margin:0 0 1em}.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lab{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.lab::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--grad)}
.lead{font-size:20px;max-width:600px}
.sec{padding:110px 0}.sec-alt{background:var(--bg-alt)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font-weight:700;font-size:15px;border:1px solid var(--line);color:var(--ink);background:var(--card);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-grad{background:var(--grad);color:#fff;border:0;box-shadow:0 14px 30px -12px rgba(139,92,246,.7)}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.brand{display:flex;align-items:center;gap:12px}.brand img{width:44px;height:44px;border-radius:50%}
.wm{font-family:var(--head);font-weight:700;font-size:25px;color:var(--ink);letter-spacing:-.01em}.wm span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;gap:30px}.nav a{font-weight:600;font-size:15px;color:var(--text)}.nav a:hover{color:var(--ink)}
.acts{display:flex;gap:10px;align-items:center}
.ibtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink)}.ibtn svg{width:18px;height:18px}
.burger{display:none}
@media(max-width:960px){.nav{display:none;position:absolute;top:78px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:18px 24px 26px;flex-direction:column;gap:16px}.nav.open{display:flex}.burger{display:grid}.acts .btn{display:none}}
/* hero */
.hero{position:relative;overflow:hidden;padding:80px 0 70px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.hero h1{margin-bottom:10px}.tag{font-family:var(--head);font-weight:600;font-size:clamp(22px,2.6vw,32px);color:var(--ink);margin:0 0 22px;letter-spacing:-.01em}.tag span{color:var(--vi)}.hero .lead{margin-bottom:30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.meta{display:flex;gap:34px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.meta div{font-size:14px;color:var(--muted)}.meta b{display:block;font-family:var(--head);font-size:30px;color:var(--ink)}
.stage{position:relative;aspect-ratio:1;max-width:560px;margin-left:auto;width:100%}
.stage::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(34,211,238,.28),rgba(139,92,246,.22) 45%,rgba(255,95,162,.18) 70%,transparent 72%);filter:blur(34px)}
.stage{transition:transform .25s ease-out;transform-style:preserve-3d}
.stage .main{position:absolute;inset:6% 4% 0;width:92%;margin:auto;filter:drop-shadow(0 30px 40px rgba(60,20,120,.25));animation:bob 6s ease-in-out infinite}
.stage .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 71%);mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 71%);transform:translateZ(40px)}
.stage .mini{position:absolute;width:30%;filter:drop-shadow(0 14px 18px rgba(60,20,120,.3));animation:bob 7s ease-in-out infinite}
.stage .m1{left:-6%;bottom:6%;animation-delay:-2s;transform:rotate(-8deg)}.stage .m2{right:-4%;top:2%;width:24%;animation-delay:-4s}
.float{position:absolute;width:34px;height:34px;animation:spin 14s linear infinite}.float svg{width:100%;height:100%}
.f1{left:8%;top:10%}.f2{right:10%;bottom:16%;width:26px;height:26px;animation-duration:10s}.f3{left:46%;top:-2%;width:22px;height:22px}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}@keyframes spin{to{rotate:360deg}}
@media(max-width:960px){.hero .wrap{grid-template-columns:1fr}.stage{order:-1;margin:0 auto;max-width:400px}}
/* moods */
.moods{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:44px}
.mood{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 14px 16px;text-align:center;transition:transform .25s,box-shadow .25s}
.mood img,.mood video{height:170px;width:100%;margin:0 auto 10px;object-fit:contain;mix-blend-mode:multiply}.mood video{transform:scale(1.2) translateY(3%);object-fit:cover}.mood{overflow:hidden}
.mood{background:#fff;transition:transform .2s ease-out,box-shadow .25s;transform-style:preserve-3d}.mood:hover{box-shadow:var(--shadow)}
.breathe{animation:breathe 5s ease-in-out infinite;transform-origin:50% 90%}
@keyframes breathe{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.03,0.985) rotate(-1.5deg)}60%{transform:scale(.99,1.02) rotate(1.2deg)}}
[data-tilt]{will-change:transform}
.card{transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .25s}
.card .art,.dstage{background-image:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.75),transparent 55%)}
.card .art img{transform:translateZ(30px)}.dstage{transition:transform .2s ease-out;transform-style:preserve-3d}
.mood b{font-family:var(--head);font-size:19px;color:var(--ink)}
@media(max-width:960px){.moods{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.moods{grid-template-columns:repeat(2,1fr)}}
/* section head */
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:44px;flex-wrap:wrap}.sh p{max-width:480px;margin:0}
/* collections */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.tabs button{font:600 14px var(--sans);padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer}
.tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.card:hover{box-shadow:var(--shadow)}
.card .art{aspect-ratio:1;display:grid;place-items:center;padding:11%;background:var(--tint-cy)}
.card .art img{width:100%;height:100%;object-fit:contain;transition:transform .35s;filter:drop-shadow(0 12px 16px rgba(60,20,120,.18))}
.card:hover .art img{transform:translateZ(40px) scale(1.05)}
.t-mg .art{background:var(--tint-mg)}.t-vi .art{background:var(--tint-vi)}.t-or .art{background:var(--tint-or)}
.card .info{padding:16px 18px 18px}.card b{display:block;font-family:var(--head);font-size:19px;color:var(--ink);line-height:1.2}.card small{color:var(--muted);font-size:13.5px}
.card[hidden]{display:none}
/* products */
.prods{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:16px}
.prods a{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-alt)}
.prods a:nth-child(1){grid-row:span 2;grid-column:span 2}.prods a:nth-child(6){grid-column:span 2}
.prods img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.prods a:hover img{transform:scale(1.05)}
.prods span{position:absolute;left:14px;bottom:14px;background:rgba(14,11,31,.72);backdrop-filter:blur(8px);color:#fff;font-weight:700;font-size:13px;padding:7px 13px;border-radius:999px}
@media(max-width:860px){.prods{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}.prods a:nth-child(6){grid-column:span 1}}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{padding:30px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line)}
.ring{width:52px;height:52px;border-radius:50%;border:3px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:20px;color:var(--ink);margin-bottom:18px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
/* band */
.band{position:relative;overflow:hidden;border-radius:34px;padding:64px;background:linear-gradient(120deg,#1B1446,#3B1E7A 55%,#7A2A7E);color:#fff;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.band h2{color:#fff}.band p{color:#E4DDFF;font-size:18px}.band .btn{background:#fff;color:#14112B;border:0}
.band img{max-height:300px;width:auto;margin-left:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.4))}
.band::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.45),transparent 65%)}
@media(max-width:860px){.band{grid-template-columns:1fr;padding:40px 28px}.band img{margin:0 auto;max-height:220px}}
/* detail */
.detail{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;padding:56px 0 30px;align-items:start}
.dstage{position:relative;border-radius:34px;aspect-ratio:1;display:grid;place-items:center;padding:12%;background:var(--tint-cy);overflow:hidden}
.dstage::before{content:"";position:absolute;inset:15%;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.35),transparent 70%);filter:blur(20px)}
.dstage img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(60,20,120,.3))}
.t-mg.dstage{background:var(--tint-mg)}.t-vi.dstage{background:var(--tint-vi)}.t-or.dstage{background:var(--tint-or)}
.crumb{font-size:14px;color:var(--muted);margin-bottom:12px}.crumb a{color:var(--vi);font-weight:600}
.detail h1{font-size:clamp(36px,4.4vw,58px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}.chips span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line)}
.note{font-size:13.5px;color:var(--muted);margin-top:16px}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gal figure{margin:0;border-radius:20px;overflow:hidden;background:var(--bg-alt)}
.gal img{aspect-ratio:1;object-fit:cover;width:100%}.gal figcaption{font-size:13px;font-weight:600;padding:10px 12px;color:var(--text)}
@media(max-width:860px){.detail{grid-template-columns:1fr;gap:30px}.gal{grid-template-columns:repeat(2,1fr)}}
/* footer */
.ftr{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:40px}
.ftr .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}.ftr h4{font-family:var(--head);color:var(--ink);font-size:17px;margin:0 0 12px}
.ftr a{display:block;color:var(--text);font-size:15px;margin:6px 0}.ftr small{display:block;color:var(--muted);margin-top:30px;grid-column:1/-1;font-size:13px}
@media(max-width:760px){.ftr .wrap{grid-template-columns:1fr}}
.gbar{height:5px;background:var(--grad)}

/* animated logo */
.lg{position:relative;overflow:visible}.lg .lg-c{position:relative;width:44px;height:44px;border-radius:50%;flex:none;display:block}
.lg .lg-c::before{content:"";position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#1b1640,#0E0B1F 70%)}
.lg .lg-c::after{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.lg .lg-face{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:block;transform-origin:50% 60%}
.lg .lg-kit{position:absolute;left:0;top:0;width:auto;height:38px;border-radius:0;opacity:0;pointer-events:none;z-index:3;transform-origin:50% 100%;will-change:transform;filter:drop-shadow(0 4px 4px rgba(60,20,120,.25))}
.lg .wm{display:inline-flex;align-items:baseline;white-space:nowrap}.lg .wm i{font-style:normal;display:inline-block;transform-origin:50% 100%}
.lg .wm .sp{display:inline-block;width:.28em}
.lg .wm .lv{background:none;color:inherit}.lg .wm .lv i{background:var(--grad);background-size:400% 100%;background-position:calc(var(--n)*33.3%) 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.js .lg.intro .wm i{opacity:0}
.lg .spark{position:absolute;z-index:2;width:10px;height:10px;margin:-5px 0 0 -5px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,#FF5FA2 30%,transparent 70%)}
.lg .paw{position:absolute;z-index:2;font-size:10px;line-height:1;pointer-events:none;color:#8B5CF6}
.lg-ftr .lg-kit{height:36px}
@media (prefers-reduced-motion:reduce){.js .lg.intro .wm i{opacity:1}.lg .lg-kit{display:none}}

/* ===== wow layer ===== */
.splash{display:none}
.intro-on body{overflow:hidden}
.intro-on .splash{display:grid;place-items:center;position:fixed;inset:0;z-index:999;background:#fff;cursor:pointer;overflow:hidden}
.sp-blob{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(70px);opacity:.55;animation:blob 9s ease-in-out infinite alternate}
.sp-blob.b1{background:#22D3EE;left:-22vmax;top:-26vmax}.sp-blob.b2{background:#8B5CF6;right:-26vmax;top:-10vmax;animation-delay:-3s}.sp-blob.b3{background:#FF5FA2;left:10vmax;bottom:-34vmax;animation-delay:-6s}
@keyframes blob{to{transform:translate(6vmax,4vmax) scale(1.12)}}
.sp-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;transform-origin:50% 30%}
.sp-mark{position:relative;width:min(300px,62vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 42%,#2a1760,#0E0B1F 72%);box-shadow:0 40px 90px -30px rgba(80,30,160,.6)}
.sp-ring{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg)}
.sp-ring circle{stroke-dasharray:578;stroke-dashoffset:578}
.sp-kit{position:absolute;left:50%;bottom:4%;width:86%;transform:translateX(-50%) scale(0);transform-origin:50% 100%;filter:drop-shadow(0 18px 20px rgba(0,0,0,.35))}
.sp-name{font-family:var(--head);font-weight:700;font-size:clamp(46px,8vw,92px);color:var(--ink);letter-spacing:-.01em;display:flex}
.sp-name i{font-style:normal;display:inline-block;opacity:0}.sp-name b{width:.25em}
.sp-name .g{background:var(--grad);background-size:400% 100%;background-position:calc(var(--n)*33.3%) 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-tag{font-family:var(--head);font-size:clamp(20px,2.6vw,28px);font-weight:600;color:var(--vi);opacity:0;margin:0}
.sp-skip{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:var(--muted);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
/* hero mood switcher */
.moodbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.moodbar button{font:600 14px/1 var(--sans);padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:transform .2s,box-shadow .2s,background .3s,color .3s}
.moodbar button:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.moodbar button.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 12px 26px -12px rgba(139,92,246,.8)}
.stage .hv{transition:opacity .7s ease}.stage .hv.out{opacity:0}
.stage.pop{animation:stagepop .6s cubic-bezier(.2,.8,.3,1.4)}@keyframes stagepop{40%{scale:1.05}}
/* particles */
.hero .parts{position:absolute;inset:0;pointer-events:none;z-index:0}.hero .wrap{position:relative;z-index:1}
.part{position:absolute;width:var(--s);height:var(--s);opacity:.75;will-change:transform}
.part>span{display:block;width:100%;height:100%;animation:drift var(--d) ease-in-out infinite alternate}
.part svg{width:100%;height:100%}
@keyframes drift{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
/* paw trail + bursts */
.pawdot{position:fixed;z-index:998;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;opacity:.8}
.pawdot svg{width:100%;height:100%}
.bit{position:fixed;z-index:998;pointer-events:none;font-size:20px;line-height:1;will-change:transform}
/* coverflow */
.cf{position:relative;height:340vh}
.cf-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:4vh;background:radial-gradient(ellipse at 50% 60%,#F0EAFF,#fff 70%)}
.cf-head{width:100%}.cf-head h2{margin:10px 0 0}
.cf-stage{perspective:1400px;perspective-origin:50% 50%}
.cf-track{display:flex;gap:46px;padding:2vh 0;will-change:transform;transform-style:preserve-3d}
.cf-card{flex:none;width:min(330px,68vw);aspect-ratio:3/4;border-radius:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:26px;background:var(--tint-cy);box-shadow:0 40px 70px -40px rgba(60,30,140,.55);transform-style:preserve-3d;will-change:transform}
.cf-card.t-mg{background:var(--tint-mg)}.cf-card.t-vi{background:var(--tint-vi)}.cf-card.t-or{background:var(--tint-or)}
.cf-card img{width:100%;aspect-ratio:1;object-fit:contain;transform:translateZ(70px);filter:drop-shadow(0 26px 26px rgba(60,20,120,.3))}
.cf-card b{font-family:var(--head);font-size:21px;color:var(--ink);text-align:center;line-height:1.2;transform:translateZ(40px)}
.cf-bar{width:min(420px,70vw);height:6px;border-radius:3px;background:var(--line);margin:0 auto;overflow:hidden}.cf-bar i{display:block;height:100%;width:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
/* peeking kitten */
.peek{position:fixed;right:22px;bottom:0;z-index:60;width:96px;height:96px;border:0;padding:0;background:none;cursor:pointer;transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.8,.3,1.3)}
.peek img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(60,20,120,.35))}
.peek.up{transform:translateY(38%)}.peek.up:hover{transform:translateY(4%) rotate(-6deg)}
/* headline words + magnetic */
.sh h2 .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.3,1.3);transition-delay:calc(var(--i)*70ms)}
.sh.in h2 .w,.cf-head.in h2 .w{opacity:1;transform:none}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s ease;pointer-events:none}
.card{position:relative}.card:hover::after{transform:translateX(120%)}
@media (prefers-reduced-motion:reduce){.cf{height:auto}.cf-sticky{position:relative;height:auto;padding:80px 0}.cf-track{overflow-x:auto;padding:0 24px}.sh h2 .w{opacity:1;transform:none}.part{display:none}}
/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ===== shop layer ===== */
nav.nav{align-items:center}.nav .nav-shop{background:linear-gradient(100deg,#22D3EE,#8B5CF6 55%,#FF5FA2);color:#fff!important;padding:8px 18px;border-radius:999px;font-weight:700;box-shadow:0 8px 22px rgba(139,92,246,.35)}
.shopband{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;padding:56px;border-radius:36px;color:#fff;text-decoration:none;overflow:hidden;position:relative;
 background:radial-gradient(circle at 85% 30%,#3B1E7A 0%,#1A1240 45%,#0E0B1F 85%);box-shadow:0 30px 70px rgba(40,20,110,.28)}
.shopband .lab{color:#9BEFFB}.shopband h2{color:#fff;margin:10px 0 12px}.shopband p{color:#C9C2EA;max-width:440px;margin-bottom:22px}
.shopband .fan{position:relative;height:300px}
.shopband .fan img{position:absolute;top:50%;left:50%;width:200px;height:200px;object-fit:cover;border-radius:22px;border:4px solid rgba(255,255,255,.9);box-shadow:0 20px 40px rgba(0,0,0,.4);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.shopband .fan img:nth-child(1){transform:translate(-50%,-50%) translateX(-150px) rotate(-14deg)}
.shopband .fan img:nth-child(2){transform:translate(-50%,-50%) translateX(-50px) rotate(-5deg)}
.shopband .fan img:nth-child(3){transform:translate(-50%,-50%) translateX(50px) rotate(5deg)}
.shopband .fan img:nth-child(4){transform:translate(-50%,-50%) translateX(150px) rotate(14deg)}
.shopband:hover .fan img:nth-child(1){transform:translate(-50%,-50%) translateX(-200px) translateY(-14px) rotate(-18deg)}
.shopband:hover .fan img:nth-child(2){transform:translate(-50%,-50%) translateX(-68px) translateY(-24px) rotate(-6deg)}
.shopband:hover .fan img:nth-child(3){transform:translate(-50%,-50%) translateX(68px) translateY(-24px) rotate(6deg)}
.shopband:hover .fan img:nth-child(4){transform:translate(-50%,-50%) translateX(200px) translateY(-14px) rotate(18deg)}
.shop-hd{padding:72px 0 8px}.shop-hd h1{margin:10px 0 14px}.shop-hd .lead{max-width:620px}
.shop-grid{padding-top:30px}.shop-grid .tabs{position:sticky;top:76px;z-index:20;padding:10px 0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
@media(max-width:860px){.shopband{grid-template-columns:1fr;padding:34px 24px}.shopband .fan{height:200px}.shopband .fan img{width:130px;height:130px}
.shopband .fan img:nth-child(1){transform:translate(-50%,-50%) translateX(-90px) rotate(-14deg)}.shopband .fan img:nth-child(2){transform:translate(-50%,-50%) translateX(-30px) rotate(-5deg)}
.shopband .fan img:nth-child(3){transform:translate(-50%,-50%) translateX(30px) rotate(5deg)}.shopband .fan img:nth-child(4){transform:translate(-50%,-50%) translateX(90px) rotate(14deg)}
.nav .nav-shop{padding:6px 14px}}