/* Exact brief 01–13: shared tokens, independent transform layers. */
.hero-shell:before{background:radial-gradient(circle,color-mix(in srgb,var(--color-primary) 38%,transparent),transparent 70%);animation:spec-gradient-a 14s ease-in-out infinite alternate}
.hero-shell:after{background:radial-gradient(circle,color-mix(in srgb,var(--color-purple) 20%,transparent),var(--color-pink) 30%,transparent 70%);animation:spec-gradient-b 17s ease-in-out infinite alternate}
@keyframes spec-gradient-a{to{transform:translate(320px,-200px) scale(1.4)}}
@keyframes spec-gradient-b{to{transform:translate(-300px,240px) scale(1.25)}}
.hero-line{animation:none}.hero-word{display:inline-block;animation:spec-word .8s calc(var(--word)*.14s + .12s) cubic-bezier(.22,.7,.25,1) both}
@keyframes spec-word{from{opacity:0;transform:translateY(35px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.hero-sphere{opacity:.86;transition:transform .5s ease-out}
.sphere-small{width:32px;height:32px;left:12%;bottom:0;background:var(--gradient-sphere-pink);animation-duration:7.4s;animation-delay:-1s}
.sphere-ring{width:46px;height:46px;right:-30px;top:46%;border:11px solid color-mix(in srgb,var(--color-lilac) 80%,transparent);background:transparent;animation-duration:8.2s;animation-delay:-4s}
.sphere-petal{width:45px;height:45px;left:-35px;top:55%;border-radius:20% 60% 25% 60%;background:var(--gradient-sphere);animation-duration:9.3s;animation-delay:-2s}
.about-section{position:relative;background:var(--gradient-pink);padding:92px 0;overflow:clip}
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.about-art{position:relative;min-width:0;height:560px;isolation:isolate}
.about-backdrop{position:absolute;inset:25px -25px -15px 28px;border-radius:45% 45% 25% 25%;background:var(--gradient-sphere-pink);opacity:.7;transform:rotate(-7deg);translate:0 var(--about-back,0px);z-index:-1}
.about-photo-layer{height:100%;translate:0 var(--about-photo,0px)}
.about-mask{height:100%;overflow:hidden;border-radius:140px 140px 26px 26px;box-shadow:var(--shadow-photo);border:7px solid var(--surface-glass)}
.about-mask img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.about-decoration{position:absolute;right:-24px;top:15%;font-size:98px;color:var(--color-purple);line-height:1;translate:0 var(--about-decor,0px);text-shadow:0 6px 25px var(--color-pink)}
.about-caption{position:absolute;bottom:28px;left:-20px;background:var(--surface-glass);backdrop-filter:blur(16px);padding:16px 25px;border:1px solid var(--color-white);border-radius:20px;box-shadow:var(--shadow-card);font-size:15px;transform:rotate(-4deg)}
.about-copy h2{margin:17px 0 28px}.about-copy p{max-width:510px;margin-bottom:20px}.about-copy .about-lead{font-size:22px;line-height:1.55;color:var(--color-ink)}.about-copy .button{margin-top:13px}
.photo-zoom-section{background:var(--surface-lilac);padding:62px 0 76px;overflow:clip}
.photo-zoom-frame{margin:0;position:relative;height:520px;overflow:hidden;border-radius:28px;transform:scale(var(--photo-scale,1));transform-origin:center;box-shadow:var(--shadow-photo);background:var(--color-lilac)}
.photo-zoom-frame img{width:56%;height:100%;margin-left:auto;object-fit:cover;object-position:center 29%}
.photo-zoom-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--surface-pink) 0%,var(--surface-lilac) 36%,transparent 60%)}
.photo-zoom-frame figcaption{position:absolute;left:6%;top:50%;translate:0 -50%;z-index:1;color:var(--color-ink);font-size:clamp(28px,3.8vw,54px);font-weight:600;letter-spacing:-1.5px;line-height:1.15;max-width:45%}
.story-layout{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.story-visual{position:sticky;top:110px;text-align:center;border-radius:28px;background:var(--gradient-pink);padding:36px 25px;box-shadow:var(--shadow-card);border:1px solid var(--color-white)}
.story-drawing{position:relative;width:230px;height:230px;margin:5px auto 30px;display:grid;place-items:center}
.story-center{display:grid;place-items:center;width:90px;height:90px;border-radius:50%;background:var(--gradient-button);color:var(--color-white);font-size:37px;box-shadow:var(--shadow-button);transition:transform .6s}
.story-orbit{position:absolute;inset:20px;border:2px solid var(--color-primary);border-radius:42% 58% 64% 36%;transform:rotate(calc(var(--i)*45deg + var(--story-turn,0deg)));transition:transform .65s,border-radius .65s;background:color-mix(in srgb,var(--color-lilac) 8%,transparent)}
.story-orbit:nth-child(1){--i:0}.story-orbit:nth-child(2){--i:1}.story-orbit:nth-child(3){--i:2}.story-orbit:nth-child(4){--i:3}
.story-kicker{display:block;font-size:13px;color:var(--color-muted);margin-bottom:10px}.story-title{display:block;font-size:25px;line-height:1.3;min-height:66px;font-weight:600;letter-spacing:-.6px}.story-dots{display:flex;justify-content:center;gap:10px;margin-top:20px}.story-dots i{width:9px;height:9px;border-radius:50%;background:var(--color-lilac);transition:width .4s,background .4s}.story-dots i.is-active{width:28px;border-radius:5px;background:var(--color-purple)}
.story-steps.steps{display:flex;flex-direction:column;gap:24px;list-style:none;margin:0;padding:0}
.story-steps.steps li{min-height:260px;padding:32px;border:1px solid var(--color-line);position:relative;display:flex;flex-direction:column;justify-content:center;transition:background .5s,box-shadow .5s,border-color .5s;transform:none}
.story-steps.steps li.is-current{background:var(--surface-lilac);border-color:var(--color-primary);box-shadow:var(--shadow-lift)}
.story-steps .step-number{position:static!important;display:block!important;width:auto!important;min-height:0!important;margin:0 0 20px!important;font-size:23px;color:var(--color-purple)}
.story-steps .step-track,.story-steps .step-number:after{display:none!important}.story-steps.steps h3{font-size:25px}.story-steps.steps p{font-size:15px;max-width:430px}
.story-timeline{position:absolute;left:calc(50% + 20px);top:0;bottom:0;width:4px;border-radius:4px;background:var(--color-line);overflow:hidden}.story-timeline>i{display:block;width:100%;height:100%;transform-origin:top;transform:scaleY(var(--timeline-progress,0));background:var(--gradient-button)}
@media(max-width:980px){.about-layout{gap:45px}.about-art{height:450px}.about-copy .about-lead{font-size:19px}.about-section{padding:70px 0}.story-layout{gap:50px}.story-timeline{left:calc(50% + 9px)}.story-drawing{width:180px;height:180px}.story-title{font-size:22px}.story-steps.steps li{padding:25px}.story-steps.steps h3{font-size:22px}}
@media(max-width:640px){.sphere-ring{right:-16px;width:32px;height:32px;border-width:8px}.sphere-petal{left:-15px;width:28px;height:28px}.sphere-small{width:23px;height:23px;bottom:10px}.about-section{padding:53px 0}.about-layout{grid-template-columns:1fr;gap:42px}.about-art{height:450px;margin-inline:15px}.about-backdrop{right:-13px;left:15px}.about-mask{border-radius:120px 120px 24px 24px}.about-decoration{font-size:64px;right:-18px}.about-caption{font-size:13px;left:-18px;padding:12px 19px}.about-copy p{font-size:14px}.about-copy h2{margin-bottom:22px}.about-copy .about-lead{font-size:20px}.photo-zoom-section{padding:25px 0 36px}.photo-zoom-frame{height:390px;border-radius:24px}.photo-zoom-frame img{object-position:50% 38%}.photo-zoom-frame:after{background:linear-gradient(0deg,color-mix(in srgb,var(--color-ink) 72%,transparent),transparent 60%)}.photo-zoom-frame figcaption{bottom:8%;font-size:31px;max-width:90%;letter-spacing:-.8px}.story-layout{display:block;padding-left:16px}.story-visual{top:80px;z-index:3;display:grid;grid-template-columns:75px 1fr;gap:0 18px;padding:18px;margin-bottom:24px;text-align:left;background:var(--surface-glass-strong);backdrop-filter:blur(18px)}.story-drawing{width:75px;height:75px;grid-row:1/4;margin:0;align-self:center}.story-orbit{inset:0;border-width:1px}.story-center{width:39px;height:39px;font-size:18px}.story-kicker{font-size:10px;margin:0 0 5px}.story-title{font-size:18px;min-height:47px}.story-dots{justify-content:flex-start;margin-top:8px;gap:7px}.story-dots i{height:5px;width:5px}.story-dots i.is-active{width:20px}.story-timeline{left:0;top:148px;bottom:0;width:3px}.story-steps.steps{gap:20px}.story-steps.steps li{min-height:290px;padding:25px}.story-steps.steps h3{font-size:24px}.story-steps.steps p{font-size:14px}.story-steps .step-number{margin-bottom:15px!important}}
@media(max-width:360px){.about-art{height:390px}.photo-zoom-frame{height:340px}.story-visual{grid-template-columns:55px 1fr;gap:0 12px;padding:15px}.story-drawing{width:55px;height:55px}.story-title{font-size:17px}}
.reduce-motion .about-photo-layer,.reduce-motion .about-backdrop,.reduce-motion .about-decoration{translate:none}.reduce-motion .photo-zoom-frame{transform:none}.reduce-motion .hero-sphere{translate:none!important}.reduce-motion .hero-word{opacity:1;transform:none}