/* ==========================================================================
   BIOHACK HEALTH — design system
   Brand ramp (from badge logo): teal #2AA5C9 → indigo #5E6AC9 → purple #A05BC9
   Deep tones (sampled print values): #15526A / #434570 / #603F73
   ========================================================================== */
/* ---------------------------------------------------------------------------
   Design tokens — the ONE place these are set.

   These were split across two files: a dark palette here and a light one in
   clinical.css, which loaded later and quietly won for the whole document.
   Nothing was scoped, so the site rendered light while this block still read
   dark — and anything new styled against the values written here came out
   invisible against the values actually in force.

   Merged, with the light values that were winning kept exactly as they were.
   --------------------------------------------------------------------------- */
:root{
  --bg:           #fff;
  --bg-2:         #f8f5fb;
  --panel:        #fff;
  --panel-hi:     #f2f6f8;
  --line:         #dce5e9;
  --line-hi:      #a9c4cd;
  --teal:         #713ca8;
  --teal-hi:      #60318f;
  --indigo:       #5e6ac9;
  --purple:       #a05bc9;
  --purple-hi:    #bd7ae6;
  --txt:          #172e3e;
  --dim:          #526673;
  --dark:         #05060d;
  --grad:         linear-gradient(110deg,#5e6ac9,#713ca8 65%,#894bb2);
  --grad-soft:    linear-gradient(100deg, rgba(42,165,201,.16), rgba(94,106,201,.16), rgba(160,91,201,.16));
  --f-display:    "Inter",system-ui,sans-serif;
  --f-body:       "Inter", system-ui, -apple-system, sans-serif;
  --nav-h:        82px;
  --nav-h-s:      66px;
  --r:            12px;
  --ease-out:     cubic-bezier(.22,1,.36,1);
  --muted:        #526673;
  --brand:        #713ca8;
  --brand-light:  #f5f1fa;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h-s) + 18px); }
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--f-body); font-size:16.5px; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.locked{ overflow:hidden; }
img,svg,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--indigo); color:#fff; }
/* The thumb was #1c2142 — near-black, from when this file's palette was the
   dark one. It is the only hardcoded dark colour left that actually renders:
   a charcoal bar down the side of a white page. Tokens now, so it follows
   the palette instead of contradicting it. */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--line-hi); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--dim); }
/* Firefox has no ::-webkit pseudo-elements and was drawing its own default. */
html{ scrollbar-color: var(--line-hi) var(--bg); scrollbar-width: thin; }

.container{ width:100%; max-width:1240px; margin:0 auto; padding-inline:24px; }
.section-pad{ padding-block:110px; }
.section-pad-sm{ padding-block:56px; }

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.grad-text-light{
  background:linear-gradient(100deg,#ffffff,#bdeeff 55%,#e6c9ff);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* clean surface — no grain, no film */

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader{ position:fixed; inset:0; z-index:2000; pointer-events:none; }
.pl-curtain{
  position:absolute; left:0; right:0; height:50.5%;
  background:linear-gradient(180deg,#07091a,#05060d);
  transition:transform 1s var(--ease-out) .25s;
}
.pl-curtain-top{ top:0; box-shadow:0 2px 0 rgba(94,106,201,.25); }
.pl-curtain-bottom{ bottom:0; }
#preloader.done .pl-curtain-top{ transform:translateY(-102%); }
#preloader.done .pl-curtain-bottom{ transform:translateY(102%); }
.pl-inner{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .4s ease, transform .4s ease;
}
#preloader.done .pl-inner{ opacity:0; transform:scale(.93); }
.pl-ring{
  position:absolute; width:290px; height:290px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 62%, var(--teal) 78%, var(--purple) 92%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation:plspin 2.2s linear infinite;
}
@keyframes plspin{ to{ transform:rotate(360deg); } }
.pl-badge{
  width:96px; height:auto; position:relative; z-index:1;
  animation:plpulse 2.4s ease-in-out infinite;
}
@keyframes plpulse{ 0%,100%{ transform:scale(1); opacity:.92;} 50%{ transform:scale(1.06); opacity:1;} }
/* CSS double helix — 10 columns, two counter-phased dots each */
.pl-helix{ display:flex; gap:13px; height:56px; align-items:center; }
.pl-helix span{ position:relative; width:6px; height:100%; }
.pl-helix span::before,
.pl-helix span::after{
  content:""; position:absolute; left:0; width:6px; height:6px; border-radius:50%;
  animation:helix 1.4s ease-in-out infinite;
}
.pl-helix span::before{ background:var(--teal-hi); }
.pl-helix span::after{ background:var(--purple-hi); animation-delay:-.7s; }
.pl-helix span:nth-child(1)::before,.pl-helix span:nth-child(1)::after{ animation-delay:calc(var(--d,0s) + 0s); }
.pl-helix span:nth-child(2)::before{ animation-delay:-.12s; } .pl-helix span:nth-child(2)::after{ animation-delay:-.82s; }
.pl-helix span:nth-child(3)::before{ animation-delay:-.24s; } .pl-helix span:nth-child(3)::after{ animation-delay:-.94s; }
.pl-helix span:nth-child(4)::before{ animation-delay:-.36s; } .pl-helix span:nth-child(4)::after{ animation-delay:-1.06s; }
.pl-helix span:nth-child(5)::before{ animation-delay:-.48s; } .pl-helix span:nth-child(5)::after{ animation-delay:-1.18s; }
.pl-helix span:nth-child(6)::before{ animation-delay:-.6s; }  .pl-helix span:nth-child(6)::after{ animation-delay:-1.3s; }
.pl-helix span:nth-child(7)::before{ animation-delay:-.72s; } .pl-helix span:nth-child(7)::after{ animation-delay:-1.42s; }
.pl-helix span:nth-child(8)::before{ animation-delay:-.84s; } .pl-helix span:nth-child(8)::after{ animation-delay:-1.54s; }
.pl-helix span:nth-child(9)::before{ animation-delay:-.96s; } .pl-helix span:nth-child(9)::after{ animation-delay:-1.66s; }
.pl-helix span:nth-child(10)::before{ animation-delay:-1.08s; }.pl-helix span:nth-child(10)::after{ animation-delay:-1.78s; }
@keyframes helix{
  0%,100%{ top:0;    transform:scale(1);   opacity:1; }
  50%    { top:50px; transform:scale(.55); opacity:.55; }
}
.pl-count{
  font-family:var(--f-display); font-weight:800; font-size:40px; letter-spacing:2px;
  color:var(--txt);
}
.pl-tag{
  font-family:var(--f-display); font-weight:500; font-size:10.5px; letter-spacing:5px;
  color:var(--dim); text-transform:uppercase;
}

/* ==========================================================================
   CURSOR GLOW — pure-gradient aura, no blur filter
   ========================================================================== */
#cursorGlow{
  position:fixed; left:0; top:0; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle, rgba(94,106,201,.09), rgba(42,165,201,.04) 40%, transparent 62%);
  transform:translate(-50%,-50%); z-index:1; pointer-events:none; opacity:0;
  transition:opacity .5s ease;
}
body.cursor-on #cursorGlow{ opacity:1; }

/* ==========================================================================
   HEADER
   ========================================================================== */
#siteHeader{
  position:fixed; top:0; left:0; right:0; z-index:900;
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease;
}
#siteHeader.scrolled{
  background:rgba(5,6,13,.96);
  border-bottom-color:var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:var(--nav-h); transition:height .35s ease;
}
#siteHeader.scrolled .nav{ height:var(--nav-h-s); }
.nav-logo{ position:relative; display:block; }
.nav-logo img{ height:44px; width:auto; transition:height .35s ease; }
#siteHeader.scrolled .nav-logo img{ height:36px; }
/* brand-kit gradient lockup, luminance-tuned for the dark header */
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .nav-logo img{ opacity:0; }
  .nav-logo::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(100deg, #3ec8ef 4%, #7d86e8 50%, #bd7ae6 96%);
    -webkit-mask:url("../img/logo-h-white.png") left center/contain no-repeat;
            mask:url("../img/logo-h-white.png") left center/contain no-repeat;
  }
}
.nav-links{ display:flex; gap:36px; list-style:none; }
.nav-links a{
  font-size:13.5px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--dim); position:relative; padding:8px 0; transition:color .25s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:2px; height:2px; width:0;
  background:var(--grad); border-radius:2px; transition:width .3s var(--ease-out);
}
.nav-links a:hover,.nav-links a.active{ color:var(--txt); }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-cta-wrap{ display:flex; align-items:center; gap:14px; }
.nav-burger{
  display:none; flex-direction:column; gap:5.5px; background:none; border:0; cursor:pointer; padding:10px;
}
.nav-burger span{ width:26px; height:2px; background:var(--txt); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav-burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-display); font-weight:600; font-size:12.5px; letter-spacing:1.8px;
  text-transform:uppercase; border-radius:999px; border:0; cursor:pointer; overflow:hidden;
  padding:14px 28px; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  will-change:transform;
}
.btn-sm{ padding:11px 20px; font-size:11px; letter-spacing:1.4px; }
.btn-lg{ padding:18px 36px; font-size:13.5px; }
.btn-arrow{ display:inline-block; transition:transform .3s var(--ease-out); font-family:var(--f-body); }
.btn:hover .btn-arrow{ transform:translateX(5px); }
.btn-primary{
  background:var(--grad); color:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.btn-primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .6s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.45); }
.btn-primary:hover::before{ transform:translateX(130%); }
.btn-ghost{
  background:transparent; color:var(--txt);
  box-shadow:inset 0 0 0 1.5px var(--line-hi);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1.5px var(--teal-hi);
}
.btn-light{ background:#fff; color:#2b2450; }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 10px 34px rgba(0,0,0,.35); }
.btn-outline-light{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65); }
.btn-outline-light:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px #fff, 0 6px 26px rgba(0,0,0,.3); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 30px); padding-bottom:90px; overflow:hidden;
}
#bioCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
/* sharp wireframe structures — no blur */
.hero-orb{ position:absolute; z-index:0; pointer-events:none; }
.hero-orb-teal{
  width:min(44vw,620px); height:min(44vw,620px); top:-10%; right:-5%;
  border:1px solid rgba(62,200,239,.30); border-radius:50%;
  background:radial-gradient(circle, rgba(42,165,201,.15), rgba(42,165,201,.05) 45%, transparent 68%);
  animation:ringspin 70s linear infinite;
}
.hero-orb-teal::before{
  content:""; position:absolute; inset:36px; border-radius:50%;
  border:1px dashed rgba(62,200,239,.34);
}
.hero-orb-teal::after{
  content:""; position:absolute; top:-4px; left:50%; width:7px; height:7px; margin-left:-3.5px;
  border-radius:50%; background:var(--teal-hi);
}
@keyframes ringspin{ to{ transform:rotate(360deg); } }
.hero-orb-purple{
  width:min(36vw,480px); height:min(36vw,480px); bottom:-9%; left:-6%; opacity:.85;
  background:radial-gradient(circle, rgba(160,91,201,.16), rgba(160,91,201,.05) 45%, transparent 66%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 93,26 93,74 50,98 7,74 7,26' fill='none' stroke='rgba(189,122,230,0.42)' stroke-width='0.7'/%3E%3Cpolygon points='50,14 82,32 82,68 50,86 18,68 18,32' fill='none' stroke='rgba(189,122,230,0.26)' stroke-width='0.7' stroke-dasharray='3 4'/%3E%3Ccircle cx='50' cy='2' r='1.6' fill='%23bd7ae6'/%3E%3Ccircle cx='93' cy='74' r='1.6' fill='%23bd7ae6'/%3E%3Ccircle cx='7' cy='26' r='1.6' fill='%23bd7ae6'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:ringspin 90s linear infinite reverse;
}
.hero-orb-purple{ background-size:contain, contain; background-position:center, center; background-repeat:no-repeat, no-repeat; }
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none;
  background-image:
    linear-gradient(rgba(94,106,201,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,106,201,.10) 1px, transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 42%, #000 25%, transparent 72%);
          mask-image:radial-gradient(ellipse 85% 65% at 50% 42%, #000 25%, transparent 72%);
  animation:gridpan 24s linear infinite;
}
@keyframes gridpan{ to{ background-position:74px 74px; } }
.hero-content{ position:relative; z-index:2; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-display); font-weight:500; font-size:11.5px; letter-spacing:3.5px;
  color:var(--teal-hi); text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:10px 20px;
  background:rgba(8,10,22,.88);
  margin-bottom:30px;
}
.pulse-dot{
  width:8px; height:8px; border-radius:50%; background:var(--teal-hi); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(62,200,239,.6); animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(62,200,239,.55); }
  70%{ box-shadow:0 0 0 12px rgba(62,200,239,0); }
  100%{ box-shadow:0 0 0 0 rgba(62,200,239,0); }
}
.hero-title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(46px, 7.2vw, 98px); line-height:1.04; letter-spacing:1px;
  text-transform:uppercase; margin-bottom:28px;
}
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-title .word{ display:inline-block; }
html.js .hero-title .word{
  transform:translateY(112%) rotate(3deg); opacity:0;
  transition:transform .9s var(--ease-out), opacity .6s ease;
}
html.js body.loaded .hero-title .word{ transform:translateY(0) rotate(0); opacity:1; }
body.loaded .hero-title .line:nth-child(1) .word:nth-child(1){ transition-delay:.05s; }
body.loaded .hero-title .line:nth-child(1) .word:nth-child(2){ transition-delay:.16s; }
body.loaded .hero-title .line:nth-child(2) .word{ transition-delay:.28s; }
.hero-sub{ max-width:600px; font-size:18.5px; font-weight:300; color:var(--dim); margin-bottom:38px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
.hero-badges{
  display:inline-flex; align-items:center; gap:26px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:16px; padding:18px 28px;
  background:rgba(8,10,22,.88);
}
.hb-item{ display:flex; flex-direction:column; gap:2px; }
.hb-item strong{ font-family:var(--f-display); font-weight:700; font-size:22px; letter-spacing:1px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hb-item span{ font-size:12px; color:var(--dim); letter-spacing:.4px; }
.hb-divider{ width:1px; height:38px; background:var(--line-hi); }
.hero-scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--f-display); font-size:9px; letter-spacing:4px; color:var(--dim);
}
.mouse{ width:24px; height:38px; border:1.5px solid var(--line-hi); border-radius:13px; position:relative; }
.wheel{
  position:absolute; top:7px; left:50%; width:3px; height:7px; margin-left:-1.5px;
  background:var(--teal-hi); border-radius:3px; animation:wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{ 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(14px); opacity:0;} 100%{ opacity:0;} }

/* ==========================================================================
   MARQUEE + TICKER
   ========================================================================== */
.marquee{
  position:relative; z-index:3; overflow:hidden; padding-block:22px;
  border-block:1px solid var(--line);
  background:rgba(7,8,18,.95);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track{
  display:inline-flex; align-items:center; white-space:nowrap; will-change:transform;
  animation:marq 38s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marquee-track span{
  font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:4px;
  color:var(--txt); padding-inline:30px;
}
.marquee-track i{
  font-style:normal; font-size:11px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.ticker{
  overflow:hidden; border-block:1px solid var(--line); padding-block:20px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track{ display:inline-flex; white-space:nowrap; will-change:transform; animation:marq 52s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track blockquote{ font-size:15px; color:var(--dim); padding-inline:42px; }
.ticker-track cite{ font-style:normal; color:var(--teal-hi); font-size:13px; margin-left:8px; }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{ position:relative; z-index:3; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{
  border:1px solid var(--line); border-radius:var(--r); padding:28px 30px;
  background:linear-gradient(165deg, #10142c, #090b18);
  position:relative; overflow:hidden; transition:border-color .3s ease, transform .3s ease;
}
.stat::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad); opacity:.65;
}
.stat:hover{ transform:translateY(-4px); border-color:var(--line-hi); }
.stat-num{ font-family:var(--f-display); font-weight:800; font-size:40px; letter-spacing:1px; line-height:1.1; }
.stat-num em{ font-style:normal; font-size:22px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-label{ margin-top:8px; font-size:13px; color:var(--dim); letter-spacing:.4px; }

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.section-head{ max-width:760px; margin-bottom:56px; }
.section-eyebrow{
  font-family:var(--f-display); font-weight:500; font-size:11.5px; letter-spacing:4px;
  color:var(--teal-hi); text-transform:uppercase; margin-bottom:18px;
}
.section-title{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(32px, 4.4vw, 54px); line-height:1.12; letter-spacing:.5px; margin-bottom:18px;
}
.section-sub{ color:var(--dim); font-size:17px; max-width:640px; }

/* ==========================================================================
   SHOP
   ========================================================================== */
.shop{ position:relative; z-index:3; }
/* ---- catalog search ---- */
.shop-search{ margin-bottom:22px; }
.shop-search-label{
  display:block; font-family:var(--f-display); font-weight:500;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--teal-hi); margin-bottom:10px;
}
.shop-search-field{
  position:relative; display:flex; align-items:center;
  max-width:460px; border:1px solid var(--line);
  border-radius:999px; background:rgba(255,255,255,.03);
  transition:border-color .25s ease, background .25s ease;
}
.shop-search-field:focus-within{ border-color:rgba(94,106,201,.6); background:rgba(255,255,255,.05); }
.shop-search-icon{ flex:none; margin-inline:16px 0; color:var(--dim); }
.shop-search-field input{
  flex:1; min-width:0; padding:13px 14px; border:0; background:transparent;
  color:var(--txt); font-family:inherit; font-size:15px;
}
.shop-search-field input::placeholder{ color:var(--dim); }
.shop-search-field input:focus{ outline:none; }
/* Safari draws its own clear affordance on type=search; we supply our own. */
.shop-search-field input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.shop-search-clear{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-right:7px; border-radius:50%;
  border:0; background:transparent; color:var(--dim); cursor:pointer; font-size:15px;
  transition:color .2s ease, background .2s ease;
}
.shop-search-clear:hover{ color:var(--txt); background:rgba(255,255,255,.07); }
/* An explicit display here beats the UA stylesheet's [hidden]{display:none},
   which left the clear button showing on an empty field. */
.shop-search-clear[hidden]{ display:none; }
.shop-search-status{ margin:10px 2px 0; font-size:13px; color:var(--dim); min-height:1em; }
.shop-empty{
  margin:10px 0 34px; padding:26px 22px; border-radius:14px;
  border:1px dashed var(--line); color:var(--dim); font-size:15px;
}
.shop-empty strong{ color:var(--txt); }
.shop-empty a{ color:var(--teal-hi); }

.shop-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:42px; }
.chip{
  font-family:var(--f-display); font-weight:500; font-size:11px; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--dim); cursor:pointer;
  background:rgba(12,14,30,.6); border:1px solid var(--line); border-radius:999px;
  padding:11px 22px; transition:all .25s ease;
}
.chip:hover{ color:var(--txt); border-color:var(--line-hi); transform:translateY(-1px); }
.chip.active{
  color:#fff; background:var(--grad); border-color:transparent; font-weight:700;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card{
  position:relative; display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--line); border-radius:var(--r); padding:22px;
  background:linear-gradient(168deg, var(--panel-hi), rgba(8,9,20,.85));
  overflow:hidden; transition:transform .35s var(--ease-out), border-color .3s ease, box-shadow .35s ease, opacity .3s ease;
  will-change:transform;
}
.product-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; opacity:0;
  background:conic-gradient(from var(--ga,0deg), transparent 0 64%, var(--teal) 78%, var(--purple) 90%, transparent 99%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .35s ease; pointer-events:none;
}
@property --ga{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
.product-card:hover::before{ opacity:1; animation:borderspin 3s linear infinite; }
@keyframes borderspin{ to{ --ga:360deg; } }
.product-card:hover{
  border-color:rgba(94,106,201,.45);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.product-card.hidden{ display:none; }
/* Beyond the current page of the mobile catalog. Set by main.js, which only
   pages on narrow screens and clears the class above that width. */
.product-card.capped{ display:none; }
.product-card.showing{ animation:cardin .45s var(--ease-out) both; }
@keyframes cardin{ from{ opacity:0; transform:translateY(18px) scale(.97);} to{ opacity:1; transform:none;} }
.product-card.featured{ border-color:rgba(160,91,201,.55); }
.pc-glow{ /* pure-gradient vial aura — no blur filter */
  position:absolute; top:6%; left:50%; transform:translateX(-50%);
  width:190px; height:190px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(94,106,201,.22), transparent 62%);
  opacity:.5; transition:opacity .4s ease, transform .4s ease;
}
.product-card:hover .pc-glow{ opacity:1; transform:translateX(-50%) scale(1.12); }
.pc-flag{
  position:absolute; top:14px; right:-34px; transform:rotate(38deg); z-index:2;
  font-family:var(--f-display); font-weight:700; font-size:9px; letter-spacing:2px;
  color:#fff; background:var(--grad); padding:6px 38px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.pc-flag.alt{ background:linear-gradient(100deg, var(--teal), var(--teal-hi)); color:#04222e; }
.pc-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; position:relative; z-index:1; }
.pc-tag{
  font-family:var(--f-display); font-weight:500; font-size:8.5px; letter-spacing:1.6px;
  color:var(--teal-hi); border:1px solid rgba(42,165,201,.35); border-radius:999px; padding:5px 10px;
  background:rgba(42,165,201,.07); white-space:nowrap;
}
.pc-purity{ font-family:var(--f-display); font-weight:500; font-size:9px; letter-spacing:1.5px; color:var(--dim); white-space:nowrap; }
/* ---- product photo (real bottle render; falls back to the CSS vial) ---- */
.pc-photo{
  display:block; width:auto; height:158px; margin:0 auto; object-fit:contain;
  animation:vialfloat 5.5s ease-in-out infinite;
  transform-origin:bottom center;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(94,106,201,.18));
  transition:filter .35s ease;
}
.product-card:hover .pc-photo{
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(160,91,201,.32));
}

/* ---- CSS vial ---- */
.pc-vial{ position:relative; padding-block:16px 6px; z-index:1; }
.vial{
  position:relative; width:70px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  animation:vialfloat 5.5s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes vialfloat{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-7px) rotate(-1.2deg);} }
.vial-cap{
  width:44px; height:15px; border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg, #8b93c9 0%, #4a5183 45%, #343a63 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 1px 3px rgba(0,0,0,.5);
}
.vial-neck{
  width:32px; height:8px;
  background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 40%, rgba(255,255,255,.16));
  border-inline:1px solid rgba(255,255,255,.25);
}
.vial-body{
  position:relative; width:62px; height:92px; overflow:hidden;
  border-radius:9px 9px 16px 16px;
  background:linear-gradient(105deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 35%, rgba(140,160,255,.05) 70%, rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 0 14px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35);
}
.vial-body::after{ /* glass highlight */
  content:""; position:absolute; top:6px; left:8px; width:7px; height:74px; border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.02));
}
.vial-liquid{
  position:absolute; left:0; right:0; bottom:0; height:56%;
  transition:height .6s var(--ease-out);
}
.product-card:hover .vial-liquid{ height:68%; }
.vial-liquid::before{ /* surface line */
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:rgba(255,255,255,.4);
}
.vial-liquid::after{ /* rising bubbles */
  content:""; position:absolute; left:50%; bottom:8px; width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,.5);
  box-shadow:-14px -18px 0 -1px rgba(255,255,255,.35), 11px -30px 0 -1.5px rgba(255,255,255,.3);
  animation:bubbles 3.2s ease-in infinite;
}
@keyframes bubbles{
  0%{ transform:translateY(0); opacity:0; }
  25%{ opacity:.8; }
  100%{ transform:translateY(-46px); opacity:0; }
}
.tealfill{ background:linear-gradient(180deg, rgba(62,200,239,.9), #16688a); }
.gradfill{ background:linear-gradient(180deg, rgba(94,106,201,.95), #3a2f7d 60%, #6d3f96); }
.purplefill{ background:linear-gradient(180deg, rgba(189,122,230,.9), #5f3388); }
.vial-label{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-46%); z-index:1;
  font-family:var(--f-display); font-weight:700; font-size:9.5px; letter-spacing:1px;
  line-height:1.25; text-align:center; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.65);
  background:rgba(20,24,48,.82); border:1px solid rgba(255,255,255,.25);
  border-radius:5px; padding:4px 7px;
}
.vial-shadow{
  width:48px; height:9px; margin:10px auto 0; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%);
  animation:vialshadow 5.5s ease-in-out infinite;
}
@keyframes vialshadow{ 0%,100%{ transform:scaleX(1); opacity:.8;} 50%{ transform:scaleX(.82); opacity:.5;} }
.pc-name{ font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:.6px; position:relative; z-index:1; }
.pc-spec{ font-size:12.5px; color:var(--dim); margin-top:-8px; position:relative; z-index:1; }
.pc-bottom{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:8px; position:relative; z-index:1; }
.pc-bottom .btn-sm{ padding:10px 15px; font-size:10px; letter-spacing:1.1px; }
.pc-price{ font-family:var(--f-display); font-weight:800; font-size:22px; letter-spacing:.5px; }
.pc-price sup{ font-size:12px; color:var(--dim); font-weight:600; }
.pc-rup{
  font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:#5a6488;
  border-top:1px dashed rgba(94,106,201,.25); padding-top:10px; text-align:center; position:relative; z-index:1;
}
.pc-coa{
  color:var(--teal-hi); border-bottom:1px dotted rgba(62,200,239,.55);
  transition:color .2s ease, border-color .2s ease; white-space:nowrap;
}
.pc-coa:hover{ color:#fff; border-color:#fff; }
.shop-more{ margin-top:44px; text-align:center; }

/* ==========================================================================
   SCIENCE
   ========================================================================== */
.science{ position:relative; overflow:hidden; z-index:3; }
.science-orb{
  position:absolute; width:540px; height:540px; right:-150px; top:8%;
  border:1px dashed rgba(160,91,201,.28); border-radius:50%;
  background:radial-gradient(circle, rgba(160,91,201,.12), transparent 64%);
  pointer-events:none; animation:ringspin 80s linear infinite;
}
.science-orb::before{
  content:""; position:absolute; inset:64px; border-radius:50%;
  border:1px solid rgba(160,91,201,.16);
}
.science-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; position:relative; }
.science-copy p{ color:var(--dim); margin-bottom:18px; max-width:560px; }
.science-list{ list-style:none; margin-top:30px; display:grid; gap:16px; }
.science-list li{
  display:flex; gap:16px; align-items:flex-start;
  border:1px solid var(--line); border-radius:14px; padding:16px 20px;
  background:linear-gradient(165deg, #0e1228, #090b18);
  transition:border-color .3s ease, transform .3s ease;
}
.science-list li:hover{ border-color:var(--line-hi); transform:translateX(6px); }
.sl-ico{
  font-size:18px; line-height:1.4;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.science-list strong{ display:block; font-family:var(--f-display); font-weight:600; font-size:14.5px; letter-spacing:.6px; margin-bottom:3px; }
.science-list li div span{ font-size:13.5px; color:var(--dim); }
.science-visual{ position:relative; }
#chainSvg{
  width:100%; height:auto; overflow:visible;
  animation:svgfloat 8s ease-in-out infinite alternate;
}
@keyframes svgfloat{ to{ transform:translateY(-12px); } }
.chain-line{
  stroke-dashoffset:0; animation:chainmarch 1.6s linear infinite;
}
@keyframes chainmarch{ to{ stroke-dashoffset:-28; } }
html.js .science-visual:not(.in) .chain-line{ opacity:0; }
.science-visual.in .chain-line{ opacity:1; transition:opacity 1s ease .3s; }
.cnode{
  fill:rgba(10,12,26,.9); stroke:url(#chainGrad); stroke-width:2.5;
}
.chain-nodes text{
  font-family:var(--f-display); font-size:12px; font-weight:700; letter-spacing:2px;
  fill:#fff; text-anchor:middle;
}
.chain-nodes circle, .chain-nodes text{ animation:nodefloat 6s ease-in-out infinite; }
.chain-nodes circle:nth-of-type(2), .chain-nodes text:nth-of-type(2){ animation-delay:-1.5s; }
.chain-nodes circle:nth-of-type(3), .chain-nodes text:nth-of-type(3){ animation-delay:-3s; }
.chain-nodes circle:nth-of-type(4), .chain-nodes text:nth-of-type(4){ animation-delay:-4.5s; }
@keyframes nodefloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
.chain-ambient circle{ fill:var(--indigo); opacity:.5; animation:ambient 5s ease-in-out infinite; }
.chain-ambient circle:nth-of-type(2n){ fill:var(--teal); animation-delay:-1.6s; }
.chain-ambient circle:nth-of-type(3n){ fill:var(--purple); animation-delay:-3.2s; }
@keyframes ambient{ 0%,100%{ opacity:.18; transform:translateY(0);} 50%{ opacity:.7; transform:translateY(-14px);} }
.science-visual-caption{
  margin-top:18px; text-align:center;
  font-family:var(--f-display); font-size:10px; letter-spacing:3px; color:var(--dim); text-transform:uppercase;
}

/* ==========================================================================
   QUALITY PIPELINE
   ========================================================================== */
.quality{ position:relative; z-index:3; }
.pipeline{ position:relative; }
.pipe-line{
  position:absolute; top:33px; left:34px; right:34px; height:2px;
  background:rgba(94,106,201,.18); border-radius:2px;
}
.pipe-progress{
  display:block; height:100%; width:0%;
  background:var(--grad); border-radius:2px;
  transition:width 1s var(--ease-out);
}
.pipe-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; }
.ps-node{
  width:68px; height:68px; display:grid; place-items:center; margin-bottom:20px;
  border-radius:50%; border:1.5px solid var(--line-hi);
  background:var(--bg-2); position:relative; z-index:1;
  font-family:var(--f-display); font-weight:700; font-size:16px; letter-spacing:1px; color:var(--dim);
  box-shadow:0 0 0 7px var(--bg);
  transition:color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.pipe-step.lit .ps-node{
  color:#fff; border-color:transparent;
  background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box, var(--grad) border-box;
  border:2px solid transparent;
  box-shadow:0 0 0 7px var(--bg);
  transform:scale(1.06);
}
.pipe-step h3{ font-family:var(--f-display); font-weight:600; font-size:17px; letter-spacing:.8px; margin-bottom:10px; }
.pipe-step p{ font-size:14px; color:var(--dim); max-width:280px; }

/* ==========================================================================
   WHY / BENTO
   ========================================================================== */
.why{ position:relative; z-index:3; }
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bento-card{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); padding:34px 30px;
  background:linear-gradient(165deg, #10142c, #090b18);
  transition:transform .35s var(--ease-out), border-color .3s ease, box-shadow .35s ease;
  will-change:transform;
}
.bento-card:hover{ border-color:var(--line-hi); box-shadow:0 14px 34px rgba(0,0,0,.5); }
.bento-card.b-lg{ grid-column:span 2; }
.bc-ico{
  width:54px; height:54px; display:grid; place-items:center; font-size:24px; margin-bottom:20px;
  border-radius:14px; border:1px solid var(--line-hi);
  background:var(--grad-soft);
}
.bento-card h3{ font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:.6px; margin-bottom:10px; }
.bento-card p{ font-size:14.5px; color:var(--dim); max-width:480px; }
.bc-watermark{
  position:absolute; right:-40px; bottom:-56px; width:230px; opacity:.05;
  transform:rotate(-12deg); pointer-events:none;
  transition:opacity .4s ease, transform .5s ease;
}
.bento-card:hover .bc-watermark{ opacity:.09; transform:rotate(-6deg) scale(1.04); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ position:relative; z-index:3; }
.faq-wrap .section-head{ margin-bottom:44px; }
.faq-list{ max-width:860px; display:grid; gap:14px; }
.faq-item{
  border:1px solid var(--line); border-radius:15px; overflow:hidden;
  background:linear-gradient(165deg, #0e1228, #090b18);
  transition:border-color .3s ease;
}
.faq-item[open]{ border-color:rgba(94,106,201,.5); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 26px;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  font-family:var(--f-display); font-weight:600; font-size:15.5px; letter-spacing:.5px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-x{
  flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
  border:1px solid var(--line-hi); border-radius:50%;
  font-family:var(--f-body); font-weight:400; font-size:17px; color:var(--teal-hi);
  transition:transform .35s var(--ease-out), background .3s ease, color .3s ease;
}
.faq-item[open] .faq-x{ transform:rotate(45deg); background:var(--grad); color:#fff; border-color:transparent; }
.faq-item p{ padding:0 26px 24px; color:var(--dim); font-size:15px; max-width:740px; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{
  position:relative; z-index:3; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 90% at 25% 10%, rgba(62,200,239,.28), transparent 55%),
    radial-gradient(ellipse 60% 80% at 80% 90%, rgba(189,122,230,.30), transparent 55%),
    linear-gradient(120deg, #15526a, #434570 52%, #603f73);
}
.cta::before{
  content:""; position:absolute; inset:0; opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 78%);
          mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 78%);
}
.cta-inner{ position:relative; text-align:center; }
.cta-badge{
  width:110px; margin:0 auto 30px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.45));
  animation:ctabadge 6s ease-in-out infinite alternate;
}
@keyframes ctabadge{ to{ transform:translateY(-12px) rotate(4deg); } }
.cta h2{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(32px, 4.6vw, 56px); line-height:1.12; color:#fff; margin-bottom:16px;
}
.cta p{ color:rgba(255,255,255,.85); font-size:17.5px; margin-bottom:36px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  position:relative; z-index:3; border-top:1px solid var(--line);
  background:var(--dark);
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:50px;
  padding-block:70px 46px;
}
.f-logo{ height:40px; width:auto; margin-bottom:20px; }
.f-brand p{ color:var(--dim); font-size:14.5px; max-width:320px; }
.f-social{ display:flex; gap:12px; margin-top:20px; }
.f-social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14); color:var(--dim);
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.f-social-link:hover{ color:var(--txt); border-color:rgba(94,106,201,.55); transform:translateY(-2px); }
.f-col h4{
  font-family:var(--f-display); font-weight:600; font-size:11.5px; letter-spacing:3px;
  text-transform:uppercase; margin-bottom:20px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.f-col a{ display:block; color:var(--dim); font-size:14.5px; padding-block:6px; transition:color .25s ease, transform .25s ease; }
.f-col a:hover{ color:var(--txt); transform:translateX(5px); }
.f-disclaimer{ padding-bottom:34px; }
.f-disclaimer p{
  font-size:12px; line-height:1.75; color:#6b7599;
  border:1px dashed rgba(94,106,201,.3); border-radius:12px; padding:18px 22px;
  background:rgba(10,12,26,.5);
}
.f-disclaimer strong{ color:#aeb8de; letter-spacing:1.5px; }
.f-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding-block:24px 30px; border-top:1px solid rgba(94,106,201,.12);
  font-size:12.5px; color:#5a6488;
}
.f-madewith{
  font-family:var(--f-display); font-size:10px; letter-spacing:3.5px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ==========================================================================
   REVEAL SYSTEM  (armed only when JS is present)
   ========================================================================== */
html.js .reveal-up{
  opacity:0; transform:translateY(36px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--rd, 0s);
}
html.js .reveal-up.in{ opacity:1; transform:none; }
html.js .reveal-word{
  opacity:0; letter-spacing:8px;
  transition:opacity .9s ease, letter-spacing 1.1s var(--ease-out);
}
html.js .reveal-word.in{ opacity:1; letter-spacing:3.5px; }

/* ==========================================================================
   SNAPSHOT MODE (?snap=1) — deterministic frame for capture tools
   ========================================================================== */
html.snap{ scroll-behavior:auto !important; }
html.snap #preloader{ display:none; }
html.snap .reveal-up,
html.snap .reveal-word{ opacity:1 !important; transform:none !important; filter:none !important; }
html.snap .hero-title .word{ transform:none !important; opacity:1 !important; }
html.snap .marquee-track,
html.snap .ticker-track,
html.snap .vial,
html.snap .vial-shadow,
html.snap .pc-photo,
html.snap .hero-grid,
html.snap .hero-orb,
html.snap .science-orb,
html.snap .chain-nodes circle,
html.snap .chain-nodes text,
html.snap .chain-ambient circle,
html.snap #chainSvg,
html.snap .cta-badge,
html.snap .pl-ring,
html.snap body::after{ animation:none !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .science-grid{ grid-template-columns:1fr; gap:50px; }
  .science-visual{ max-width:480px; margin-inline:auto; }
}
@media (max-width:900px){
  .nav-links{
    position:fixed; inset:0; top:0; z-index:-1;
    flex-direction:column; align-items:center; justify-content:center; gap:30px;
    background:rgba(4,5,11,.98);
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .nav-links.open{ opacity:1; pointer-events:auto; }
  .nav-links a{ font-family:var(--f-display); font-size:20px; letter-spacing:3px; }
  .nav-burger{ display:flex; }
  .bento{ grid-template-columns:1fr 1fr; }
  .bento-card.b-lg{ grid-column:span 2; }
  .pipe-line{ display:none; }
  .pipe-steps{ grid-template-columns:1fr 1fr; gap:34px; }
  .section-pad{ padding-block:84px; }
}
@media (max-width:820px){
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-badges{ gap:18px; padding:16px 20px; }
  .hb-divider{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:560px){
  body{ font-size:15.5px; }
  .product-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .stat{ padding:20px; }
  .stat-num{ font-size:30px; }
  .pipe-steps{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:1fr; }
  .bento-card.b-lg{ grid-column:span 1; }
  .nav .btn-sm{ display:none; }
  .hero-eyebrow{ font-size:10px; letter-spacing:2.5px; padding:9px 14px; }
  .hero{ padding-top:calc(var(--nav-h) + 10px); }
  .hero-scroll{ display:none; }
  .hero-badges{ display:grid; grid-template-columns:1fr 1fr; }
  .cta-actions .btn{ width:100%; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .marquee-track span{ font-size:15px; padding-inline:20px; }
  .pl-ring{ width:230px; height:230px; }
}
@media (hover:none){
  #cursorGlow{ display:none; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  html.js .reveal-up, html.js .reveal-word{ opacity:1; transform:none; filter:none; }
  html.js .hero-title .word{ transform:none; opacity:1; }
  .marquee-track,.ticker-track{ animation:none; }
}

/* ---- enquiry mode + stock states ---- */
.pc-indicative{
  display:block; font-family:var(--f-display); font-style:normal;
  font-size:8.5px; letter-spacing:1.6px; text-transform:uppercase;
  color:#5a6488; margin-top:2px;
}
.pc-flag.out{ background:linear-gradient(100deg,#6b7280,#4b5563); color:#fff; }
.product-card.soldout .pc-photo,
.product-card.soldout .vial{ filter:grayscale(.85) opacity(.55); }
.product-card.soldout .pc-price{ color:var(--dim); }
.product-card.soldout:hover{ transform:none; box-shadow:none; }
.pc-soldout-btn{
  background:transparent; color:#6b7280; cursor:not-allowed;
  box-shadow:inset 0 0 0 1.5px rgba(107,114,128,.5);
  pointer-events:none;
}

/* The trading-name line under the copyright: present for anyone checking who
   they are buying from, quiet enough not to compete with the footer links. */
.f-entity {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--dim);
}

/* Registered address in the footer's Support column. */
.f-address {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dim);
}