/* Refinement layer: softer, more premium, less harsh */
:root{--bg:#0b0b0f;--panel:#14141a;--line:rgba(255,255,255,.08);--ink:#f3eee7;--mute:#8d8982;--r:18px;--glass:rgba(22,22,28,.55)}
body{background:radial-gradient(1200px 700px at 85% -10%,rgba(255,255,255,.04),transparent 60%),var(--bg)}
.grain{opacity:.04}
.vignette{background:radial-gradient(ellipse at 30% 50%,transparent 45%,rgba(0,0,0,.55) 100%)}

/* scroll progress */
#progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:120;background:linear-gradient(90deg,transparent,var(--accent));transform-origin:right;transform:scaleX(0);transition:background .6s}

/* story rail */
.rail{position:fixed;inset-inline-end:26px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;opacity:0;pointer-events:none;transition:opacity .5s}
.rail.show{opacity:1;pointer-events:auto}
.rail button{width:8px;height:8px;border-radius:99px;border:0;background:rgba(255,255,255,.25);cursor:pointer;padding:0;transition:height .4s,background .4s}
.rail button.on{height:34px;background:var(--accent)}

/* floating glass nav */
.nav{padding:18px 4vw}
.nav.scrolled{margin:12px auto 0;inset-inline:3vw;border:1px solid var(--line);border-radius:99px;padding:10px 14px 10px 22px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.nav nav a{font-weight:700;font-size:14.5px}
.nav nav a::after{height:1.5px;border-radius:2px}
.cart-btn{border-radius:99px;padding:8px 8px 8px 18px;background:rgba(255,255,255,.05)}
.cart-btn b{border-radius:99px;min-width:28px;height:28px}

/* buttons: pill, gradient, glow */
.btn{clip-path:none;border-radius:99px;padding:17px 38px;font-weight:800;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#fff));box-shadow:0 12px 34px -10px var(--accent),inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(120%);transition:transform .7s}
.btn:hover::after{transform:translateX(-120%)}
.btn:hover{filter:none;transform:translateY(-3px);box-shadow:0 18px 44px -10px var(--accent),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.ghost{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.btn.ghost:hover{background:rgba(255,255,255,.12);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}

/* typography */
.hero h1{letter-spacing:-.02em;line-height:1.08}
.hero h1 em,.step h2 em{background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.03);font-size:11px;letter-spacing:.25em;backdrop-filter:blur(8px)}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.hero p,.step p{color:#bdb7ae}
.num{-webkit-text-stroke:1px rgba(255,255,255,.16)}

/* specs as glass chips */
.specs{border:0;padding:0;gap:12px;flex-wrap:wrap}
.specs li{padding:14px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(12px);min-width:96px}
.specs b{font-size:24px}

/* shop */
.sec-head .eyebrow{margin-bottom:18px}
.toolbar{border-bottom:0;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);backdrop-filter:blur(14px)}
.chip{border-radius:99px;border-color:transparent;background:rgba(255,255,255,.04)}
.chip.on{background:var(--ink);color:#000}
#search{border:1px solid var(--line);border-radius:99px;padding:10px 18px;background:rgba(255,255,255,.03)}
.grid{gap:24px}
.card{border-radius:24px;border:1px solid var(--line);background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.012));box-shadow:0 24px 60px -30px rgba(0,0,0,.8);padding:16px 16px 20px}
.card:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent);box-shadow:0 30px 70px -30px var(--c)}
.card .halo{opacity:.18}
.card:hover .halo{opacity:.5}
.badge{border-radius:99px;padding:5px 14px;font-size:11.5px}
.meta{padding:0 6px}
.meta h3{font-weight:800;font-size:19px}
.price b{font-size:26px}
.add{clip-path:none;border-radius:50%;width:48px;height:48px;background:var(--ink);box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.add:hover{background:var(--c);transform:scale(1.1) rotate(90deg)}

/* why */
.why-grid{border:0;gap:18px}
.why{border:1px solid var(--line);border-radius:24px;background:var(--glass);padding:40px 30px}
.why:hover{background:rgba(255,255,255,.06);transform:translateY(-6px);transition:.4s}
.why b{-webkit-text-stroke:1px var(--accent)}

/* finale */
.finale{position:relative;margin:60px 4vw;border:1px solid var(--line);border-radius:36px;padding:130px 5vw;overflow:hidden;background:radial-gradient(600px 300px at 50% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),var(--glass)}
footer{border-top:0;color:var(--mute)}

/* modal + cart */
.qv,.drawer{backdrop-filter:blur(14px)}
#cart,.cart{border-radius:24px 0 0 24px}

@media(max-width:860px){
  .rail{display:none}
  .nav.scrolled{inset-inline:2vw}
  .finale{margin:40px 3vw;padding:80px 6vw;border-radius:26px}
}