/* ===========================================================
   BoostLab — shared brand system
   =========================================================== */
:root{
  /* brand */
  --lime:#D5DE24;
  --lime-soft:#e6ee5a;
  --lime-deep:#aeb716;

  /* base */
  --bg:#08090b;
  --bg-2:#0c0e11;
  --panel:#111317;
  --panel-2:#15181d;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);

  /* text */
  --ink:#f5f6f2;
  --ink-2:#b8bcc2;
  --ink-3:#7e838c;

  /* accent intensity (driven by Tweaks) */
  --accent-glow:.55;        /* 0..1 */
  --accent-spread:160px;

  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;

  --maxw:1280px;
  --font-disp:"Saira Condensed",sans-serif;
  --font-ui:"Saira","Saira Condensed",sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--lime);color:#000;}

/* ---------- typography helpers ---------- */
.disp{font-family:var(--font-disp);font-weight:700;line-height:.9;letter-spacing:-.01em;text-transform:uppercase;}
.eyebrow{
  font-family:var(--font-disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.32em;font-size:13px;color:var(--ink-3);
}
.mono-num{font-variant-numeric:tabular-nums;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:96px 0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;min-width:max-content;
  font-family:var(--font-disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:16px;
  padding:15px 26px;border-radius:999px;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-lime{
  background:var(--lime);color:#0a0a0a;
  box-shadow:0 0 calc(var(--accent-spread) * var(--accent-glow)) rgba(213,222,36,calc(.5 * var(--accent-glow)));
}
.btn-lime:hover{background:var(--lime-soft);transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink);background:rgba(255,255,255,.02);}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);}

/* ---------- bolt mark ---------- */
.bolt{display:inline-block;color:var(--lime);}

/* ---------- nav pill ---------- */
.nav-fix{position:fixed;top:18px;left:0;right:0;z-index:60;pointer-events:none;}
.nav{
  pointer-events:auto;
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:rgba(10,11,13,.72);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 14px 12px 24px;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.9);
}
.nav-logo{display:flex;align-items:center;gap:11px;}
.nav-logo .word{font-family:var(--font-disp);font-weight:700;font-size:25px;letter-spacing:.01em;line-height:1;}
.nav-logo .word b{color:var(--lime);font-weight:700;}
.nav-logo .word span{color:var(--ink);font-weight:500;}
.nav-links{display:flex;gap:6px;align-items:center;flex:0 0 auto;}
.nav-links a{white-space:nowrap;}
.nav-links a{
  font-family:var(--font-disp);font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  font-size:15px;color:var(--ink-2);padding:9px 16px;border-radius:999px;transition:.16s;
}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.05);}
.nav-links a.active{color:var(--lime);}
.nav-right{display:flex;align-items:center;gap:10px;}
.cart-btn{
  position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);transition:.16s;
}
.cart-btn:hover{border-color:var(--lime);}
.cart-badge{
  position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;
  background:var(--lime);color:#0a0a0a;font-family:var(--font-disp);font-weight:700;font-size:12px;
  display:grid;place-items:center;border:2px solid var(--bg);
}

/* ---------- product card (featured) ---------- */
.pcard{
  position:relative;flex:0 0 auto;width:340px;height:480px;
  border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(213,222,36,calc(.10 * var(--accent-glow))) 0%, rgba(213,222,36,0) 42%),
    linear-gradient(180deg,#181b20 0%, #0e1013 100%);
  border:1px solid var(--line);
  padding:26px;
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.pcard:hover{transform:translateY(-8px);border-color:var(--line-strong);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);}
.pcard .spotlight{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle, rgba(190,196,205,.30) 0%, rgba(150,160,175,.10) 38%, rgba(0,0,0,0) 66%);
  filter:blur(2px);pointer-events:none;
}
.pcard .vial{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  height:330px;width:auto;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 30px 30px rgba(0,0,0,.55));
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.pcard:hover .vial{transform:translate(-50%,-58%) scale(1.04);}
.pcard-top{position:relative;z-index:2;}
.pcard h3{font-family:var(--font-disp);font-weight:700;font-size:34px;line-height:.92;margin:0;letter-spacing:-.01em;}
.pcard .price{margin-top:6px;color:var(--ink-2);font-size:17px;font-weight:400;}
.pcard .price b{color:var(--lime);font-weight:600;}
.pcard .arrow{
  position:absolute;top:0;right:0;width:42px;height:42px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);display:grid;place-items:center;
  transition:.2s;z-index:3;
}
.pcard:hover .arrow{background:var(--lime);color:#0a0a0a;border-color:var(--lime);transform:rotate(0)}
.pcard-bottom{position:relative;z-index:2;margin-top:auto;}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;}
.chip{
  font-family:var(--font-disp);font-weight:500;font-size:14px;letter-spacing:.04em;
  padding:6px 12px;border-radius:9px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--ink-2);
}
.pcard-stats{display:flex;gap:0;border-top:1px solid var(--line);padding-top:16px;}
.pstat{flex:1;}
.pstat .n{font-family:var(--font-disp);font-weight:700;font-size:34px;line-height:1;}
.pstat .l{font-size:12.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;margin-top:3px;}

/* tag (in-flow pill) */
.ptag{
  display:inline-block;margin-bottom:11px;
  font-family:var(--font-disp);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;background:var(--lime);color:#0a0a0a;
}
.ptag.muted{background:rgba(255,255,255,.08);color:var(--ink);border:1px solid var(--line);}

/* ---------- grid card (shop all) ---------- */
.gcard{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg,#141619 0%, #0d0f12 100%);
  border:1px solid var(--line);padding:22px;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s, box-shadow .28s;
  display:flex;flex-direction:column;
}
.gcard:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 30px 60px -38px rgba(0,0,0,.9);}
.gcard .stage{
  position:relative;height:230px;border-radius:var(--r-sm);margin-bottom:18px;overflow:hidden;
  background:radial-gradient(80% 70% at 50% 40%, rgba(180,188,200,.16) 0%, rgba(0,0,0,0) 70%);
}
.gcard .stage .glow{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle, rgba(190,196,205,.26) 0%, rgba(0,0,0,0) 65%);
}
.gcard .stage img{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:215px;width:auto;
  filter:drop-shadow(0 20px 22px rgba(0,0,0,.5));transition:transform .3s;
}
.gcard:hover .stage img{transform:translate(-50%,-54%) scale(1.05);}
.gcard .cat{font-size:12.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-disp);}
.gcard h4{font-family:var(--font-disp);font-weight:700;font-size:25px;margin:4px 0 0;line-height:1;}
.gcard .grow{flex:1;}
.gcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;}
.gcard .gp{font-size:15px;color:var(--ink-2);}
.gcard .gp b{color:var(--lime);font-weight:600;}
.add-btn{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line-strong);transition:.18s;color:var(--ink);
}
.add-btn:hover{background:var(--lime);color:#0a0a0a;border-color:var(--lime);}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg-2);}
.marquee-track{display:flex;gap:0;white-space:nowrap;animation:scrollx 26s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{
  font-family:var(--font-disp);font-weight:700;font-size:46px;text-transform:uppercase;letter-spacing:.02em;
  padding:22px 0;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);display:inline-flex;align-items:center;gap:34px;
}
.marquee-track span .dot{color:var(--lime);-webkit-text-stroke:0;font-size:30px;}
.marquee-track span em{font-style:normal;color:var(--lime);-webkit-text-stroke:0;}
@keyframes scrollx{to{transform:translateX(-50%);}}

/* ---------- cart drawer ---------- */
.cart-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);z-index:80;opacity:0;visibility:hidden;transition:.3s;}
.cart-scrim.open{opacity:1;visibility:visible;}
.cart-panel{
  position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;z-index:90;
  background:var(--panel);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .36s cubic-bezier(.3,.8,.2,1);
  display:flex;flex-direction:column;
}
.cart-panel.open{transform:none;}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--line);}
.cart-head h3{font-family:var(--font-disp);font-weight:700;font-size:24px;margin:0;text-transform:uppercase;letter-spacing:.04em;}
.cart-items{flex:1;overflow-y:auto;padding:8px 24px;}
.cart-line{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.cart-line .ci-img{width:64px;height:64px;border-radius:12px;background:radial-gradient(70% 70% at 50% 40%,rgba(180,188,200,.18),rgba(0,0,0,0));position:relative;flex:0 0 auto;}
.cart-line .ci-img img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:64px;}
.cart-line .ci-name{font-family:var(--font-disp);font-weight:600;font-size:18px;line-height:1.05;}
.cart-line .ci-meta{font-size:13.5px;color:var(--ink-3);margin-top:2px;}
.qty{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line-strong);border-radius:9px;margin-top:8px;overflow:hidden;}
.qty button{width:28px;height:28px;display:grid;place-items:center;color:var(--ink-2);font-size:16px;}
.qty button:hover{background:rgba(255,255,255,.07);color:var(--lime);}
.qty span{width:30px;text-align:center;font-variant-numeric:tabular-nums;font-size:14px;}
.ci-price{margin-left:auto;text-align:right;font-family:var(--font-disp);font-weight:600;font-size:18px;}
.ci-remove{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;margin-top:6px;}
.ci-remove:hover{color:#ff6b6b;}
.cart-foot{padding:22px 24px;border-top:1px solid var(--line);}
.cart-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.cart-row .lbl{color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-family:var(--font-disp);}
.cart-row .val{font-family:var(--font-disp);font-weight:700;font-size:30px;}
.cart-empty{padding:60px 24px;text-align:center;color:var(--ink-3);}

/* ---------- footer ---------- */
.foot{background:var(--bg-2);border-top:1px solid var(--line);padding:72px 0 36px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.foot h5{font-family:var(--font-disp);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--ink-3);margin:0 0 18px;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot ul a{color:var(--ink-2);font-size:15.5px;transition:.15s;}
.foot ul a:hover{color:var(--lime);}
.foot-tag{color:var(--ink-3);font-size:14.5px;max-width:300px;margin-top:16px;line-height:1.5;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:54px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-3);font-size:13px;flex-wrap:wrap;gap:12px;}
.foot-disc{max-width:760px;color:var(--ink-3);font-size:12.5px;line-height:1.55;margin-top:26px;}

/* scrollbar for carousel */
.rail{display:flex;gap:20px;overflow-x:auto;padding:24px 28px 30px;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;}
.rail::-webkit-scrollbar{display:none;}
.rail .pcard{scroll-snap-align:start;}

@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .section{padding:64px 0;}
}
