:root{ --bg:#e6e6e6; --ink:#0a0a0a }
body{background:var(--bg);color:var(--ink);}



.mega{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;
    font:900 clamp(72px,19vw,260px)/.85 system-ui;letter-spacing:.02em;color:#000;opacity:.15}

.hero{height:800vh;position:relative}
.stage{position:sticky;top:0;height:100vh;z-index:5;display:grid;place-items:center;will-change:transform,opacity}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;background:transparent;cursor:grab}
#view.dragging{cursor:grabbing}

.badge{position:fixed;left:6vw;top:18vh;max-width:42ch;opacity:0;transform:translateY(12px);
    transition:opacity .5s,transform .6s;z-index:6}
.badge.show{opacity:1;transform:none}
.badge h2{margin:0 0 6px;font:100 clamp(28px,5vw,56px)/1.04 system-ui;letter-spacing:.04em}
.badge p{margin:0;color:#333}

.keep{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
    font:700 11px/1 system-ui;letter-spacing:.08em;color:#444;z-index:6}

#details{min-height:120vh;display:grid;place-items:center;padding:8vh 4vw;
    opacity:0;transform:translateY(6vh);transition:opacity .6s,transform .7s}
body.show-details #details{opacity:1;transform:none}
.card{max-width:1040px;background:#fff;border-radius:18px;padding:32px;box-shadow:0 10px 40px rgba(0,0,0,.12);border:1px solid #eee}
.card h3{margin:0 0 8px;font:800 clamp(22px,3vw,34px)/1.1 system-ui;color:#111}
.card p{color:#333}

.progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#0af,#68f);
    z-index:30;transition:width .1s}

.product-detail-page {
    background:black !important;
}