/* refine.css — premium polish layer, loaded AFTER each page's own styles. */
html{scroll-padding-top:84px}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga"}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{text-wrap:balance;letter-spacing:-.035em}
p,li{text-wrap:pretty}
::selection{background:var(--lime);color:#0B0C09}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#2a2c1d;border-radius:10px;border:2px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:#3b3e27}

/* buttons */
.btn{border-radius:12px;letter-spacing:.01em;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,color .25s}
.btn-primary{background:linear-gradient(180deg,var(--lime-br),var(--lime));box-shadow:0 10px 28px -10px rgba(203,217,43,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{box-shadow:0 18px 40px -12px rgba(203,217,43,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.btn:active{transform:translateY(0) scale(.98)}

/* nav */
nav{background:rgba(11,12,9,.6);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}
nav.scrolled{background:rgba(11,12,9,.85);box-shadow:0 10px 40px -20px rgba(0,0,0,.8)}

/* sections */
.section{padding:clamp(4rem,8vw,7rem) 0}
.sec-head{margin-bottom:3.2rem}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);font-weight:800}
.sec-head p{font-size:1.04rem;line-height:1.7}
.eyebrow{letter-spacing:.24em}
#stats{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.stat .n{font-size:2.2rem;font-weight:800;background:linear-gradient(180deg,var(--lime-br),var(--lime-dp));-webkit-background-clip:text;background-clip:text;color:transparent}

/* product cards */
.bcard{border-radius:22px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%),var(--card);box-shadow:0 40px 80px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease)}
.bcard:hover{transform:translateY(-6px);border-color:rgba(203,217,43,.3);box-shadow:0 50px 90px -45px rgba(0,0,0,.95),0 0 0 1px rgba(203,217,43,.08),inset 0 1px 0 rgba(255,255,255,.07)}
.bcard-cover{border-radius:0}
.bcard h3{font-size:1.9rem;font-weight:800;letter-spacing:-.04em}
.bcard-kicker{letter-spacing:.2em}
.bcard li{line-height:1.55}
.badge{border-radius:999px;padding:.4rem .75rem;letter-spacing:.1em}
.badge-live{box-shadow:0 6px 18px -6px rgba(203,217,43,.6)}
.combo-card{border-radius:26px;box-shadow:0 50px 120px -60px rgba(203,217,43,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.combo-price-new{letter-spacing:-.04em}
.cov-grid{border-radius:18px;overflow:hidden}
.cov{transition:background .3s,transform .3s var(--ease)}
.cov:hover{transform:translateY(-2px)}
.samp-item{border-radius:14px;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
.samp-item:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.video-card{border-radius:18px;box-shadow:0 30px 70px -45px rgba(0,0,0,.9)}
.share-btn{background:rgba(255,255,255,.03)}

/* order page panels */
.panel{border-radius:22px;box-shadow:0 40px 90px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--card)}
.panel img{box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}

/* modals / forms */
.modal-box{border-radius:20px;box-shadow:0 50px 120px -30px rgba(0,0,0,.9)}
.field input,.field select{border-radius:10px}
.field input:focus{box-shadow:0 0 0 3px rgba(203,217,43,.12)}

@media(max-width:640px){.section{padding:3.4rem 0}.sec-head{margin-bottom:2.2rem}.bcard:hover{transform:none}.stat .n{font-size:1.8rem}}
@media(prefers-reduced-motion:reduce){body::after{display:none}.bcard:hover,.cov:hover{transform:none}}
