.hero{position:relative;isolation:isolate;overflow:visible}
.hero::before{content:"";position:absolute;z-index:-4;left:50%;top:0;bottom:0;width:100vw;transform:translateX(-50%);background:linear-gradient(180deg,rgba(6,7,10,.12),rgba(6,7,10,.2) 60%,rgba(8,9,11,.82)),linear-gradient(90deg,rgba(6,7,10,.18),transparent 38%,rgba(6,7,10,.12)),url("assets/studio-background.png") center/cover no-repeat;opacity:.78}
.hero::after{content:"";position:absolute;z-index:-3;left:50%;top:0;bottom:-220px;width:100vw;transform:translateX(-50%);pointer-events:none;background:linear-gradient(180deg,transparent 54%,rgba(8,9,11,.12) 64%,rgba(8,9,11,.5) 72%,rgba(8,9,11,.93) 80%,#08090b 100%),radial-gradient(ellipse at 50% 38%,rgba(8,9,11,.06),rgba(8,9,11,.18) 46%,rgba(8,9,11,.5) 100%)}
.hero-motto,.hero-signature{position:absolute;z-index:-1;pointer-events:none;user-select:none;font-family:"Segoe Script","Bradley Hand",cursive;font-weight:400;line-height:.82}
.hero-motto{left:1.5%;top:39%;color:rgba(139,99,221,.25);font-size:clamp(34px,4.1vw,62px);letter-spacing:-.08em;transform:rotate(-8deg)}
.hero-signature{color:#d4ff48;font-size:clamp(31px,3.8vw,58px);letter-spacing:-.08em;transform:rotate(-7deg);text-shadow:0 0 24px rgba(212,255,72,.12)}
.hero-motto::after,.hero-signature::after{content:"";position:absolute;left:-22%;right:-28%;top:55%;height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.18;transform:rotate(-8deg)}
.hero-title-reference{position:relative;z-index:2;width:min(100%,1080px);margin:28px auto 0;text-align:center}
.hero-title-reference h1{margin:0}
.hero-title-reference .hero-signature{z-index:3;right:8%;top:108%}
.hero-role-line{margin:8px 0 0;color:#d7d3dc;font-size:clamp(9px,1vw,14px);font-weight:700;letter-spacing:.52em;text-transform:uppercase}
.hero-title-reference+.hero-stage{margin-top:52px}
.portrait-skull img{mix-blend-mode:normal}
.hero-stage .neon-cta{position:absolute;right:0;bottom:28px;margin-left:0}
.hero .hero-foot{border-bottom:0}
.about::before{content:"";position:absolute;z-index:-1;left:50%;top:-190px;width:100vw;height:380px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse at 52% 0,rgba(86,42,151,.16),transparent 62%),linear-gradient(180deg,#08090b 0,rgba(8,9,11,.88) 44%,transparent 100%)}
.contact{position:relative;overflow:visible}
.contact-mascot{position:absolute;z-index:5;left:4.5%;top:0;width:min(680px,46vw);height:auto;transform:translateY(-92%);pointer-events:none;user-select:none;filter:drop-shadow(0 16px 20px rgba(25,16,40,.3))}
.contact-wechat{display:inline-flex;align-items:baseline;gap:12px;padding-bottom:7px;border-bottom:1px solid #a3adb0;font-weight:700}
.contact-wechat span{color:#667078;font-size:.72rem;letter-spacing:.08em}
.contact-wechat strong{font-weight:700;user-select:all}
.expertise{overflow:visible}
.expertise::after{display:none}
.skills-mascot{position:absolute;z-index:6;right:-8px;top:0;width:min(440px,34vw);height:auto;transform:translateY(-76%) rotate(-1deg);pointer-events:none;user-select:none;filter:drop-shadow(0 15px 18px rgba(32,20,54,.26))}
@media(max-width:1050px){.hero-motto{left:0;top:38%;font-size:38px}.hero-title-reference .hero-signature{right:5%;top:105%;font-size:36px}.hero-title-reference+.hero-stage{margin-top:42px}}
@media(max-width:1050px){.skills-mascot{right:-6px;width:min(390px,42vw)}}
@media(max-width:700px){.hero{overflow:visible}.hero::before{opacity:.64;background-position:46% center}.hero-motto{left:-5px;top:36%;font-size:27px;opacity:.62}.hero-title-reference{margin-top:26px}.hero-title-reference .hero-signature{right:2%;top:103%;font-size:28px}.hero-role-line{margin-top:7px;font-size:7px;letter-spacing:.25em}.hero-title-reference+.hero-stage{margin-top:36px}.hero-motto::after,.hero-signature::after{display:none}.skills-mascot{right:-10px;width:min(285px,72vw);transform:translateY(-75%) rotate(-1deg)}.contact-mascot{left:-2%;width:102%;transform:translateY(-91%)}}
@media(max-width:700px){.contact-mascot{left:0;width:84%}}
@media(prefers-reduced-motion:no-preference){.hero-motto{animation:accentDrift 8s ease-in-out infinite}.hero-signature{animation:signatureDrift 7s ease-in-out infinite}}
@keyframes accentDrift{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-7px)}}
@keyframes signatureDrift{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-9deg) translateY(6px)}}