.hero{min-height:calc(100vh - 72px);display:grid;align-items:center;padding:56px 0 140px;position:relative}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr);gap:40px;align-items:center}
.hero .mark{font-size:clamp(56px,8vw,112px);display:block;margin:14px 0 22px}
.hero h1{font-weight:500;font-size:clamp(20px,2.2vw,26px);line-height:1.35;letter-spacing:-.01em;margin:0 0 18px;max-width:30ch;color:var(--chalk)}
.hero p{margin:0 0 26px;max-width:46ch;font-size:16.5px;color:var(--chalk-2)}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.drawing{position:relative}
.drawing svg{width:100%;height:auto;display:block}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero{min-height:0}}
.stage3d{position:relative;perspective:1400px;perspective-origin:50% 30%;padding:34px 0 10px;overflow:visible}
.hero .stage3d{padding-top:10px}
.hero .wrap>div:first-child{position:relative;z-index:2}
.tilt{position:relative;width:min(700px,124%);aspect-ratio:560/400;margin:0 0 0 0;transform:rotateX(54deg) rotateZ(-14deg);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.station .tilt{transform:translateY(70px) rotateX(72deg) rotateZ(-20deg);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.station.in .tilt{transform:rotateX(54deg) rotateZ(-14deg);opacity:1}
.station.in.active .tilt{transform:translateY(-12px) rotateX(40deg) rotateZ(-9deg) scale(1.02)}
.stage3d:hover .tilt,.station.in:hover .tilt{transform:translateY(-22px) rotateX(26deg) rotateZ(-4deg) scale(1.05)}
.station .card{transform:translateY(24px);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1) .1s,opacity .5s ease .1s}
.station.in .card{transform:none;opacity:1}
.station .dot{transform:scale(.4);transition:transform .5s cubic-bezier(.2,.8,.2,1) .2s,box-shadow .5s ease}
.station.in .dot{transform:scale(1)}
.station.active .dot{box-shadow:0 0 0 10px rgba(233,223,62,.18)}
.stage3d.sm{padding:10px 0 6px}.stage3d.sm .tilt{width:min(546px,130%);margin-left:0}
.station:nth-child(even) .stage3d.sm .tilt{margin-left:-30%}
.stage3d.sm .tag3d{right:auto;left:0;bottom:16%}
.paper{position:absolute;left:3%;top:17%;width:80%;aspect-ratio:16/9;background:#EAF0EC;color:#0A2E33;box-shadow:24px 40px 60px -20px rgba(0,0,0,.65),0 2px 0 rgba(0,0,0,.2);overflow:hidden;transition:box-shadow .8s cubic-bezier(.2,.8,.2,1)}
.stage3d:hover .paper,.station:hover .paper{box-shadow:40px 90px 110px -30px rgba(0,0,0,.8),0 2px 0 rgba(0,0,0,.2)}
.paper svg{width:100%;height:100%;display:block}
.paper img{width:100%;height:100%;object-fit:cover;display:block}
.caliper{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;transform:translateZ(6px)}
.caliper svg{width:100%;height:100%;display:block;overflow:visible}
.tag3d{position:absolute;right:0;bottom:-6px;font-family:var(--f-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-2)}
@media (prefers-reduced-motion:reduce){.tilt,.paper,.station .card,.station .dot{transition:none}.station .tilt,.station.in.active .tilt,.stage3d:hover .tilt,.station.in:hover .tilt{transform:rotateX(54deg) rotateZ(-14deg);opacity:1}.station .card{transform:none;opacity:1}.cue i{animation:none}}
.titleblock{margin-top:34px;border:1px solid rgba(234,240,236,.35);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;font-family:var(--f-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.titleblock div{padding:9px 12px;border-right:1px solid rgba(234,240,236,.25)}
.titleblock div:last-child{border-right:none}
.titleblock b{display:block;font-weight:500;color:var(--chalk);letter-spacing:.02em;text-transform:none;font-size:12.5px;margin-top:3px}
.titleblock span{color:var(--chalk-2);opacity:.75}
@media (max-width:640px){.titleblock{grid-template-columns:1fr 1fr}}
.cue{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:160px;height:132px;display:grid;justify-items:center;align-content:start;gap:8px;text-decoration:none}
.cue span{font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-2);white-space:nowrap}
@media (max-width:640px){.cue{width:220px}.cue span{white-space:normal;text-align:center;line-height:1.4}}
.cue b{position:relative;display:block;width:2px;height:100px;background:repeating-linear-gradient(to bottom,rgba(234,240,236,.45) 0 6px,transparent 6px 14px)}
.cue i{position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--lemon);box-shadow:0 0 0 6px rgba(233,223,62,.14);animation:cue 1.7s cubic-bezier(.45,0,.35,1) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(88px);opacity:0}}