/* More immediate hero: content starts below the navigation, not centered in a tall empty screen. */
.hero{min-height:690px;height:auto;max-height:none;padding-top:126px}.hero-content{flex:0;width:100%;margin:0 auto;align-items:center}.avatar-stage{height:490px}.hero-bottom{margin-top:30px}.hero-copy{padding-bottom:0}.availability{margin-bottom:20px}
.gradient-name{font-family:'Pressure',Manrope,sans-serif;font-weight:900;font-variation-settings:'wght' 900,'wdth' 110,'opsz' 100;background:linear-gradient(105deg,#7162a5,#497f99,#607d56,#ab755a,#8a64a5,#7162a5);background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:name-gradient 9s linear infinite;letter-spacing:-.055em;padding-right:.04em}
.hello-star{width:.42em;height:.42em;animation:star-turn 15s linear infinite;color:#93a98e;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transform-origin:center;flex:0 0 auto}.avatar-sticker{font-size:19px;white-space:nowrap}
@keyframes name-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes star-turn{from{transform:rotate(-14deg)}to{transform:rotate(346deg)}}
.portrait-slot{margin:30px 0 0;width:240px;max-width:100%;padding:12px 12px 10px;border-radius:25px;transform:rotate(-3deg)}.portrait-frame{aspect-ratio:4/4.5;border-radius:17px;background:linear-gradient(145deg,#dce8f0,#e5dded 65%,#e5e9dd);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;color:#768192;overflow:hidden}.portrait-frame svg{width:85px;height:95px;opacity:.55}.portrait-frame span{font-size:12px}.portrait-slot figcaption{font:10px 'DM Mono',monospace;color:#747d89;padding:12px 4px 2px}.about-grid>.portrait-slot+div{align-self:center}
/* Full viewport native dialog; override the generic wide-dialog max dimensions. */
dialog.dialog.intro,dialog.dialog.intro.wide{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;padding:0;overflow:hidden;box-sizing:border-box;isolation:isolate;animation:none;background:#edf0f6}
.intro .dialog-head{z-index:5;padding:24px 32px}.intro .dialog-body{min-height:0;isolation:isolate;width:100%;height:100%;padding:0}.intro .dialog-body:before,.intro .dialog-body:after{content:'';position:absolute;pointer-events:none;inset:-30%;z-index:-1;background:radial-gradient(ellipse at 25% 30%,#a7cdeed9,transparent 43%),radial-gradient(ellipse at 75% 60%,#c5a8e7d0,transparent 44%),radial-gradient(ellipse at 30% 80%,#c5dca5e0,transparent 35%);animation:intro-clouds 10s ease-in-out infinite alternate}.intro .dialog-body:after{background:radial-gradient(ellipse at 65% 20%,#f1cfa9b0,transparent 40%),radial-gradient(ellipse at 40% 70%,#f6f8fdc0,transparent 45%);animation-direction:alternate-reverse;animation-duration:7s}
.intro .intro-orbits{inset:0;perspective:800px;pointer-events:none;z-index:-1}.intro .intro-orbits i{width:min(76vw,1050px);height:min(49vw,680px);border:1px solid #7786ab45;box-shadow:0 1px 0 #ffffffa0;animation:intro-orbit 16s linear infinite;animation-delay:calc(var(--i) * -2s)}.intro .intro-orbits i:nth-child(2n){animation-direction:reverse;border-color:#ffffffb0}.intro .intro-copy{padding:0 24px}.intro .intro-copy h2{max-width:1100px;line-height:1.03;font-size:clamp(50px,8vw,125px);margin:25px auto}.intro .intro-footer{position:absolute;bottom:20px;left:0;right:0;width:100%;gap:24px;z-index:2}.intro .intro-progress{position:absolute;left:28px;right:28px;bottom:16px;height:2px}.intro .intro-progress span{width:0;animation:progress 6s linear forwards}.intro .intro-footer span{font-size:10px}.intro .intro-footer #intro-count{min-width:62px}
@keyframes intro-clouds{from{transform:translate(-5%,-3%) rotate(-14deg) scale(1)}to{transform:translate(7%,6%) rotate(18deg) scale(1.15)}}
@keyframes intro-orbit{from{transform:rotate(calc(var(--i)*30deg)) rotateY(20deg)}to{transform:rotate(calc(var(--i)*30deg + 360deg)) rotateY(45deg)}}
/* React Bits StickerPeel: identical rotated clipping plane + reflected back flap.
   Direction 50deg; rotation 12deg; width 160px; hover 11%; lighting .3; shadow .74. */
.contact{overflow:visible}.contact>.contact-sticker{position:absolute;right:max(7vw,calc((100vw - 1200px)/2));top:48%;width:190px;z-index:2;transform:rotate(-4deg)}
.peel-sticker{--peel:0%;position:relative;display:block;width:160px;padding:0;border:0;background:none;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.peel-sticker>svg{position:absolute;pointer-events:none}.peel-container{position:relative;display:block;transform:rotate(50deg);user-select:none}.peel-main{display:block;clip-path:polygon(-10px -10px,calc(100% + 10px) -10px,calc(100% + 10px) calc(100% + 10px),-10px calc(100% + 10px));filter:url(#peel-shadow);transition:clip-path 260ms var(--ease)}.peel-main>span,.peel-flap>span{display:block;transform:rotate(-50deg)}.peel-lighting{filter:url(#peel-light)}.peel-sticker img{display:block;width:160px;height:auto;transform:rotate(12deg);pointer-events:none}.peel-flap{position:absolute;display:block;width:100%;height:100%;left:0;top:calc(-100% - 20px);clip-path:polygon(-10px -10px,calc(100% + 10px) -10px,calc(100% + 10px) -10px,-10px -10px);transform:scaleY(-1);transition:clip-path 260ms var(--ease),top 260ms var(--ease);pointer-events:none}.peel-backlight{filter:url(#peel-backlight)}.peel-flap img{filter:url(#peel-fill)}
.peel-sticker.peeled,.peel-sticker:focus-visible{--peel:11%}.peel-sticker:active{--peel:40%;cursor:grabbing}.peel-sticker:is(.peeled,:focus-visible,:active) .peel-main{clip-path:polygon(-10px var(--peel),calc(100% + 10px) var(--peel),calc(100% + 10px) calc(100% + 10px),-10px calc(100% + 10px))}.peel-sticker:is(.peeled,:focus-visible,:active) .peel-flap{clip-path:polygon(-10px -10px,calc(100% + 10px) -10px,calc(100% + 10px) var(--peel),-10px var(--peel));top:calc(-100% + 2 * var(--peel) - 1px)}
@media(hover:hover) and (pointer:fine){.peel-sticker:hover{--peel:11%}.peel-sticker:hover:active{--peel:40%}.peel-sticker:hover .peel-main{clip-path:polygon(-10px var(--peel),calc(100% + 10px) var(--peel),calc(100% + 10px) calc(100% + 10px),-10px calc(100% + 10px))}.peel-sticker:hover .peel-flap{clip-path:polygon(-10px -10px,calc(100% + 10px) -10px,calc(100% + 10px) var(--peel),-10px var(--peel));top:calc(-100% + 2 * var(--peel) - 1px)}}
.sticker-note{display:block;font:11px 'DM Mono',monospace;color:#747087;white-space:nowrap;margin:28px 0 0 -15px}.contact-sticker+*{position:relative}
.avatar-caption{border-top:0}
.gradient-name{background:none;color:#6463ad;-webkit-text-fill-color:#6463ad;animation:none}
.hero{padding-top:176px;scroll-margin-top:110px}
.contact-title{position:relative;display:inline-block;margin-top:84px;max-width:100%}
.contact-title{margin-top:0}
.contact-title .contact-sticker{display:none}
.contact-title .contact-sticker{position:absolute;left:-95px;top:-85px;width:160px;z-index:2;transform:rotate(-5deg);margin:0}
.peel-container{transform:rotate(55deg)}.peel-main>span,.peel-flap>span{transform:rotate(-55deg)}
.peel-sticker.peeled,.peel-sticker:focus-visible,.peel-sticker:active{--peel:15%}
@media(hover:hover) and (pointer:fine){.peel-sticker:hover,.peel-sticker:hover:active{--peel:15%}}
@media(max-width:1100px){.contact>.contact-sticker{position:relative;top:auto;right:auto;margin:36px 0 0 35px}.contact{padding-bottom:55px}.contact .contact-note{margin-top:30px}}
@media(max-width:800px){.hero{padding-top:112px;min-height:0}.avatar-stage{height:390px}.hero-bottom{margin-top:30px}.portrait-slot{width:210px}.intro .intro-orbits i{width:110vw;height:75vw}}
@media(max-width:580px){.hero{padding-top:108px}.avatar-stage{height:410px}.hero-bottom{margin-top:18px}.gradient-name{font-variation-settings:'wght' 900,'wdth' 100,'opsz' 100}.portrait-slot{margin:28px 0 20px;width:215px}.intro .dialog-head{padding:20px}.intro .intro-copy h2{font-size:52px}.intro .intro-copy .eyebrow{font-size:9px}.intro .intro-footer{padding:14px 20px;bottom:24px}.intro .intro-footer span{font-size:8px;max-width:200px}.intro .intro-progress{left:20px;right:20px}.intro .intro-orbits i{width:140vw;height:110vw}}
@media(prefers-reduced-motion:reduce){.hello-star,.gradient-name,.intro .dialog-body:before,.intro .dialog-body:after,.intro .intro-orbits i{animation:none}.peel-main,.peel-flap{transition:none}}
@media(min-width:801px){
 .hero{min-height:100svh;height:100svh;max-height:none;box-sizing:border-box}
 .hero-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5vw;max-width:1190px}
 .hero-copy{transform:translateY(18px)}
 .avatar-stage{transform:translateY(18px) scale(1.12);transform-origin:center}
 .hero .avatar-window{top:0}
}
.avatar-halo{animation:halo-drift 30s linear infinite}
@keyframes halo-drift{from{transform:rotate(0deg) scale(1)}to{transform:rotate(360deg) scale(1)}}
.social-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:38px}
.social-links a{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border:1px solid #ffffffb8;border-radius:999px;background:#ffffff52;color:#51576a;font-size:12px;transition:transform 180ms ease,background 180ms ease,border-color 180ms ease}
.social-links a span{color:#8170a3;font-family:'DM Mono',monospace;font-size:10px}
.social-links a:hover{transform:translateY(-2px);background:#ffffff9c;border-color:#fff}
@media(max-width:580px){.social-links{margin-top:30px;gap:8px}.social-links a{padding:10px 12px;font-size:11px}.social-links a span{display:none}}
@media(prefers-reduced-motion:reduce){.avatar-halo{animation:none}.social-links a{transition:none}}
.hero-bottom{display:none!important}
.hero .avatar-caption span:last-child{display:none}
.hero .avatar-sticker{width:auto;height:auto;min-width:216px;padding:16px 22px;right:-8px;top:58%;bottom:auto;border-radius:999px;font-size:14px;letter-spacing:0;justify-content:center;z-index:4;transform:rotate(-5.4deg)}
@keyframes avatar-sticker-wiggle{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-2.4deg)}}
.hero .avatar-sticker{animation:avatar-sticker-wiggle 5.5s ease-in-out infinite}
@media(max-width:800px){.hero .avatar-sticker{min-width:166px;padding:11px 16px;right:-28px;top:auto;bottom:58px;font-size:11px}}
.contact-glow{animation:contact-gradient 12s cubic-bezier(.77,0,.175,1) infinite alternate;will-change:transform,opacity,filter}
@keyframes contact-gradient{0%{transform:translate3d(-11%,-8%,0) scale(.88);opacity:.32;filter:blur(34px)}45%{transform:translate3d(12%,5%,0) scale(1.16);opacity:.72;filter:blur(54px)}75%{transform:translate3d(4%,12%,0) scale(1.04);opacity:.5;filter:blur(42px)}100%{transform:translate3d(-7%,7%,0) scale(1.12);opacity:.64;filter:blur(48px)}}
footer [data-catalog]{display:none!important}
@media(prefers-reduced-motion:reduce){.contact-glow{animation:none}}
@media(prefers-reduced-motion:reduce){.hero .avatar-sticker{animation:none}}
.contact-title .contact-sticker{display:none}.contact-title{margin-top:0}
@media(max-width:800px){.hero{padding-top:152px}}
@media(max-width:580px){.hero{padding-top:140px}}
/* Matte paper sticker: no specular surface, only a soft contact shadow. */
.peel-lighting,.peel-backlight{filter:none}.peel-main{filter:drop-shadow(1px 3px 2px #31334924)}
.contact-title .contact-sticker{display:none}.contact-title{margin-top:0}
.intro-sequenced .dialog-body:before,.intro-sequenced .dialog-body:after{display:none}
.intro-scenes{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.intro-scene{position:absolute;inset:0;opacity:0;transition:opacity 950ms cubic-bezier(.4,0,.2,1);overflow:hidden}.intro-scene.active{opacity:1}
.scene-orbits{background:radial-gradient(ellipse at 25% 30%,#c5dbf1,transparent 60%),radial-gradient(ellipse at 80% 65%,#d6c5ee,transparent 55%),#eef1f7}
.scene-orbits:before{content:'';position:absolute;inset:-20%;background:radial-gradient(ellipse at 40% 70%,#cadba799,transparent 50%);animation:intro-clouds 10s ease-in-out infinite alternate}
.intro .intro-scene .intro-orbits{z-index:0}
.scene-waves{background:radial-gradient(ellipse at 10% 70%,#f4d9c0,transparent 65%),radial-gradient(ellipse at 80% 10%,#d2e6ef,transparent 55%),#f2ede9}
.wave-field{position:absolute;inset:-25%;transform:rotate(-24deg)}
.wave-field i{position:absolute;left:-20%;top:calc(18% + var(--i)*12%);width:145%;height:30%;border-radius:50%;border:1px solid #fff9;background:linear-gradient(180deg,#ffffff30,#cab8e340 50%,#bed4e420);box-shadow:inset 0 2px 14px #ffffff65;animation:intro-wave 5s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.8s)}
.scene-bloom{background:radial-gradient(ellipse at 55% 45%,#dce9d2,transparent 60%),radial-gradient(ellipse at 15% 85%,#dccdee,transparent 55%),#f1f3eb}
.bloom-field{position:absolute;inset:0;display:grid;place-items:center}
.bloom-field i{position:absolute;width:calc(240px + var(--i)*180px);height:calc(240px + var(--i)*180px);border:1px solid #ffffffc0;border-radius:50%;background:radial-gradient(circle,transparent 65%,#bed1bd12 90%,#ffffff40);box-shadow:0 0 35px #fff2,inset 0 0 25px #fff3;animation:intro-bloom 5s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.7s)}
.intro-sequenced .intro-copy h2{opacity:1;transform:translateY(0);filter:blur(0);transition:opacity 220ms ease-out,transform 220ms ease-out,filter 220ms ease-out}.intro-sequenced .intro-copy h2.changing{opacity:0;transform:translateY(6px);filter:blur(2px)}
@keyframes intro-wave{from{transform:translate(-4%,-10%) rotate(-5deg)}to{transform:translate(7%,12%) rotate(7deg)}}
@keyframes intro-bloom{from{transform:scale(.86) translate(-12px,6px);opacity:.45}to{transform:scale(1.12) translate(12px,-6px);opacity:1}}
@media(max-width:580px){.wave-field{inset:-15% -70%}.bloom-field i{width:calc(140px + var(--i)*110px);height:calc(140px + var(--i)*110px)}}
@media(prefers-reduced-motion:reduce){.intro-scene{transition:opacity 150ms ease}.wave-field i,.bloom-field i,.scene-orbits:before{animation:none}.intro-sequenced .intro-copy h2{transition:opacity 150ms ease}.intro-sequenced .intro-copy h2.changing{transform:none;filter:none}}

/* Desktop hero: the halo and the avatar card share one explicit center point. */
@media(min-width:801px){
 .hero .avatar-stage{position:relative;display:block}
 .hero .avatar-halo{left:50%;top:50%;transform:translate(-50%,-50%);animation:halo-drift-centered 30s linear infinite}
 .hero .avatar-window{position:absolute;left:50%;top:50%;margin:0;animation:avatar-float-centered 8s ease-in-out infinite}
}
@keyframes halo-drift-centered{from{transform:translate(-50%,-50%) rotate(0deg) scale(1)}to{transform:translate(-50%,-50%) rotate(360deg) scale(1)}}
@keyframes avatar-float-centered{0%,100%{transform:translate(-50%,-50%) rotate(-7deg)}50%{transform:translate(-50%,calc(-50% - 10px)) rotate(-5deg)}}

/* Restore the composition flow and place the card on the halo's visual center. */
@media(min-width:801px){
 .hero .avatar-stage{display:flex;align-items:center;justify-content:center}
 .hero .avatar-halo{left:auto;top:auto;transform:none;animation:halo-drift 30s linear infinite}
 .hero .avatar-window{position:relative;left:auto;top:0;margin:0;animation:avatar-float 8s ease-in-out infinite}
}