body[data-page="webs"] .hero-sequence{height:auto;min-height:0}
body[data-page="webs"] .hero-sequence>.hero{position:relative;height:auto;min-height:min(920px,100svh);max-height:none;padding-top:clamp(150px,14vh,200px);padding-bottom:150px;overflow:visible}
body[data-page="webs"] .hero-copy{width:53%;max-width:880px}
body[data-page="webs"] .hero h1{font-size:clamp(65px,6.8vw,132px);line-height:1.03;letter-spacing:-.068em}
body[data-page="webs"] .hero h1>em{font-size:.9em;letter-spacing:-.062em;white-space:normal}
body[data-page="webs"] .hero-description{max-width:440px;font-size:clamp(14px,1.1vw,18px);line-height:1.8}
body[data-page="webs"] .hero-actions{display:flex;gap:12px}
body[data-page="webs"] .hero-actions .button{align-items:center;min-height:54px;width:auto;padding:17px 20px;border-radius:12px}
body[data-page="webs"] .hero-actions .button>span:last-child{position:static;line-height:1}
.webs-hero-art{position:absolute;right:var(--page);top:27%;width:43%;max-width:900px;perspective:1400px}
.webs-hero-preview{display:block;padding:0;border:1px solid #efffce40;border-radius:16px;overflow:hidden;background:#172018;box-shadow:0 28px 75px #0006,inset 0 1px #fff2;text-align:left;transition:transform .35s,box-shadow .35s}
.webs-hero-preview img{width:100%;aspect-ratio:8/5;object-fit:contain;height:auto}
.webs-hero-preview .window-top{min-height:28px;font-size:8px;padding:9px 13px}
.webs-preview-main{width:96%;transform:rotate(-4deg)}
.webs-preview-detail{position:relative;width:58%;margin:-8% 0 0 40%;transform:rotate(5deg);z-index:2}
.webs-hero-preview:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 36px 85px #0007,0 0 0 1px #d5ff5f50}
body[data-page="webs"] .work{padding-top:75px}
body[data-page="webs"] .collection-label{scroll-margin-top:110px}
@media(min-width:2200px){body[data-page="webs"] .hero-sequence>.hero{min-height:1000px}.webs-hero-art{top:25%}}
@media(max-width:1050px){body[data-page="webs"] .hero-sequence>.hero{min-height:800px}.webs-hero-art{top:34%;width:44%}body[data-page="webs"] .hero h1{font-size:clamp(60px,7vw,85px)}}
@media(max-width:760px){body[data-page="webs"] .hero-sequence>.hero{display:block;min-height:0;padding-top:125px;padding-bottom:100px;overflow:hidden}body[data-page="webs"] .hero-copy{width:100%;max-width:none}body[data-page="webs"] .hero h1{font-size:clamp(52px,10.4vw,76px);margin-bottom:24px}body[data-page="webs"] .hero h1>em{font-size:.9em}body[data-page="webs"] .hero-description{max-width:490px;font-size:14px}body[data-page="webs"] .hero-actions{display:flex;gap:10px}body[data-page="webs"] .hero-actions .button{min-height:52px;font-size:11px;padding:15px 17px}body[data-page="webs"] .hero-actions .button>span{font-size:18px}.webs-hero-art{position:relative;right:auto;top:auto;width:100%;max-width:600px;margin:55px auto 25px}.webs-preview-main{width:91%;margin-left:2%}.webs-preview-detail{width:56%;margin-top:-10%;margin-left:42%}.webs-hero-preview{border-radius:11px}.webs-hero-preview .window-top{min-height:22px;font-size:6px;padding:7px 9px}body[data-page="webs"] .hero-bottom{bottom:20px;padding-top:18px}body[data-page="webs"] .hero-bottom>p{font-size:8px}body[data-page="webs"] .work{padding-top:55px}}
@media(max-width:380px){body[data-page="webs"] .hero h1{font-size:50px}body[data-page="webs"] .hero-actions .button{font-size:10px;padding:14px}body[data-page="webs"] .hero-bottom>p{max-width:100px}}
@media(prefers-reduced-motion:reduce){.webs-hero-preview{transition:none}}
.webs-hero-preview{animation:webs-surface-drift 10s ease-in-out infinite}
.webs-preview-detail{animation-duration:13s;animation-direction:reverse;animation-delay:-4s}
.webs-hero-preview:hover,.scene-parked .webs-hero-preview,body.page-not-visible .webs-hero-preview{animation-play-state:paused}
@keyframes webs-surface-drift{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(max-width:760px){.webs-hero-preview{animation-duration:13s}@keyframes webs-surface-drift{0%,100%{translate:0 0}50%{translate:0 -4px}}}
@media(prefers-reduced-motion:reduce){.webs-hero-preview{animation:none!important;translate:none!important}}

/* One-shot entrances use the shared viewport observers; commercial cards keep their native scroll camera. */
body[data-page="webs"] .module-card.visible{animation:webs-module-enter .8s cubic-bezier(.18,.7,.2,1) backwards}
body[data-page="webs"] .module-card.visible:nth-child(2){animation-delay:.06s}
body[data-page="webs"] .module-card.visible:nth-child(3){animation-delay:.12s}
body[data-page="webs"] .module-card.visible:nth-child(4){animation-delay:.18s}
body[data-page="webs"] .module-card.visible:not(.is-in-view),body[data-page="webs"].page-not-visible .module-card.visible{animation-play-state:paused}
body[data-page="webs"] .studio-workspace.visible .studio-panel>h3,body[data-page="webs"] .studio-workspace.visible .studio-panel>p{animation:webs-process-enter .4s cubic-bezier(.2,.7,.25,1) backwards}
body[data-page="webs"] .studio-workspace.visible .studio-panel>p{animation-delay:.04s}
@keyframes webs-module-enter{from{opacity:0;transform:translate3d(0,25px,0) rotateX(3deg)}to{opacity:1;transform:none}}
@keyframes webs-process-enter{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(max-width:760px){body[data-page="webs"] .module-card.visible{animation-duration:.55s}body[data-page="webs"] .studio-workspace.visible .studio-panel>h3,body[data-page="webs"] .studio-workspace.visible .studio-panel>p{animation-duration:.3s}}
@media(prefers-reduced-motion:reduce){body[data-page="webs"] .module-card.visible,body[data-page="webs"] .studio-workspace.visible .studio-panel>h3,body[data-page="webs"] .studio-workspace.visible .studio-panel>p{animation:none!important;translate:none!important}}