*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#08090b}
body{overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#fff}
.scene{position:relative;width:100vw;height:100svh;min-height:100vh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 42%,#2a1b10 0,#11100f 27%,#08090b 65%)}
.ambient{position:absolute;border-radius:50%;filter:blur(90px);opacity:.25;pointer-events:none}
.ambient-a{width:38vw;height:38vw;background:#d66b18;left:3%;top:18%}
.ambient-b{width:30vw;height:30vw;background:#5c2b13;right:3%;bottom:5%}
.laptop-wrap{position:relative;width:min(92vw,620px);aspect-ratio:1080/1920;filter:drop-shadow(0 35px 55px rgba(0,0,0,.65));transform:translateY(1.5vh);animation:float 6s ease-in-out infinite}
.laptop{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.screen{position:absolute;left:1.85%;top:20.05%;width:76.85%;height:39.3%;overflow:hidden;transform:rotate(-3.55deg);transform-origin:center;clip-path:polygon(0 6.2%,100% 0,100% 88%,7% 100%);border-radius:10px;background:#050505}
.screen-slides,.slide{position:absolute;inset:0;width:100%;height:100%}
.slide{object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.05s ease,transform 1.8s cubic-bezier(.2,.7,.2,1);filter:saturate(1.06) contrast(1.04)}
.slide.active{opacity:1;transform:scale(1)}
.screen-ui{position:absolute;inset:0;z-index:3;pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.75)}
.nav{position:absolute;left:4%;right:3%;top:4%;height:8%;display:flex;align-items:center;gap:4%;font-size:clamp(5px,.72vw,10px)}
.brand{font-family:Georgia,serif;font-size:clamp(9px,1.4vw,18px);letter-spacing:.04em}
.nav nav{margin-left:auto;display:flex;gap:13px;opacity:.9}
.nav button,.outline{border:1px solid rgba(255,255,255,.5);background:rgba(20,15,10,.3);color:white;border-radius:20px;padding:5px 10px;font-size:clamp(5px,.65vw,9px)}
.menu{font-size:12px}
.hero-copy{position:absolute;left:9%;top:31%;width:39%;animation:copyIn .9s ease both}
.eyebrow{font-size:clamp(6px,.75vw,10px);opacity:.72}
.hero-copy h1{font-family:Georgia,serif;font-size:clamp(27px,4.2vw,56px);font-weight:400;line-height:.85;margin:6px 0 9px;letter-spacing:-.04em}
.hero-copy p{font-size:clamp(5px,.65vw,9px);line-height:1.45;opacity:.85;margin:0 0 12px}
.outline{padding:6px 12px}
.progress{position:absolute;left:4%;bottom:4%;width:91%;height:2px;background:rgba(255,255,255,.22)}
.progress i{display:block;width:0;height:100%;background:#fff;transition:width .2s linear}
.counter{position:absolute;left:4%;bottom:6.5%;font-size:7px;opacity:.8}
.ig{position:absolute;right:4%;top:7%;font-size:clamp(5px,.65vw,9px);font-weight:700}
.caption{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.2em;opacity:.42}
@keyframes float{0%,100%{transform:translateY(1.5vh)}50%{transform:translateY(-.5vh)}}
@keyframes copyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.laptop-wrap{width:96vw}.caption{font-size:7px}.ambient{filter:blur(60px)}}