/* ==========================================================================
   Biolife Peptide — Design System
   Brand palette sampled directly from the Biolife Peptide logo:
   green #00B454 · leaf #3FC93F · blue #0078E4 · deep blue #004890
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --green:#00B454;
  --green-dk:#009046;
  --leaf:#3FC93F;
  --blue:#0078E4;
  --blue-dk:#004890;
  /* Text-safe variants for LIGHT backgrounds. The bright brand pair is only legible
     on the navy (green 6.53:1, blue 4.10:1); on white it drops to 2.74 and 4.37, so
     both failed WCAG AA for body-size text. These clear it: green-ink 5.05 on white
     and 4.58 on the green tint, blue-ink 5.85 on white. blue-ink is the new logo's
     own blue, so the light surfaces now sample from the mark. Keep --green/--blue for
     the gradient, dark sections and focus rings, where they measure better. */
  --green-ink:#00803E;
  --blue-ink:#1E6A9B;
  --grad:linear-gradient(120deg,var(--leaf) 0%,var(--green) 45%,var(--blue) 100%);
  --grad-soft:linear-gradient(120deg,rgba(63,201,63,.12),rgba(0,120,228,.12));

  --ink:#06182A;
  --ink-2:#0B2540;
  --ink-3:#123253;
  --navy-line:rgba(255,255,255,.10);

  --text:#12263C;
  --text-2:#4A6480;
  --text-3:#5A7085;
  --line:#E2EBF2;
  --bg:#FFFFFF;
  --bg-2:#F4F8FB;
  --bg-3:#EDF4F9;

  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-dis:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1240px;
  --pad:clamp(20px,5vw,48px);
  --r:4px;
  --shadow:0 1px 2px rgba(6,24,42,.04),0 8px 24px rgba(6,24,42,.06);
  --shadow-lg:0 24px 60px rgba(6,24,42,.13);
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);font-size:16px;line-height:1.65;color:var(--text);
  background:var(--bg);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--font-dis);font-weight:800;line-height:1.08;letter-spacing:-.02em}
main{flex:1 0 auto}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:rgba(0,180,84,.22)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- 3. Utility type ---------- */
.mono{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.20em;text-transform:uppercase;
}
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--green-ink);margin-bottom:20px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--green-ink);opacity:.6}
.eyebrow--light{color:var(--leaf)}
.eyebrow--light::before{background:var(--leaf)}

.h-sec{font-size:clamp(30px,4.4vw,50px)}
/* gradient accent — global so it works in hero, page headers and section heads alike */
.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(15px,1.5vw,17px);color:var(--text-2);max-width:62ch}

.sec{padding:clamp(64px,8.5vw,116px) 0}
.sec--alt{background:var(--bg-2)}
.sec--dark{background:var(--ink);color:#fff}
.sec--dark .lead{color:rgba(255,255,255,.62)}

/* ---------- 4. Ticker ---------- */
.ticker{background:var(--ink-2);border-bottom:1px solid var(--navy-line);overflow:hidden}
.ticker__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker__grp{display:flex;flex-shrink:0}
.ticker span{
  display:inline-flex;align-items:center;gap:26px;padding:9px 26px 9px 0;
  color:rgba(255,255,255,.52);white-space:nowrap;
}
.ticker span::after{content:"◆";color:var(--green);font-size:8px;letter-spacing:0}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---------- 5. Header ---------- */
.hd{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.hd__in{display:flex;align-items:center;gap:30px;height:70px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{width:32px;height:auto}
.brand__tx{display:flex;flex-direction:column;line-height:1}
.brand__n{font-family:var(--font-dis);font-weight:800;font-size:16.5px;letter-spacing:-.01em;color:var(--green-ink)}
.brand__s{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.34em;color:var(--blue-ink);margin-top:3px}

.nav{display:flex;align-items:center;gap:4px;margin-left:14px}
.nav a{
  position:relative;padding:9px 13px;font-size:12.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);
  transition:color .18s;
}
.nav a:hover{color:var(--text)}
.nav a[aria-current]{color:var(--green-ink)}
.nav a[aria-current]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;background:var(--grad);
}
.hd__end{display:flex;align-items:center;gap:12px;margin-left:auto}

/* Three contact buttons plus six nav links is tight between 1080 and 1280, so the
   labels drop and the buttons become square icons before anything is removed. */
@media (max-width:1180px){
  .hd__in{gap:20px}
  .hd__end{gap:8px}
  .hd__end .btn > span{display:none}
  .hd__end .btn{padding:10px;width:38px;height:38px;justify-content:center}
  .hd__end .btn svg{width:16px;height:16px}
}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r)}
.burger i{position:relative;width:17px;height:1.5px;background:var(--text);transition:.2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--text);transition:.2s}
.burger i::before{top:-5.5px}.burger i::after{top:5.5px}
.burger[aria-expanded=true] i{background:transparent}
.burger[aria-expanded=true] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] i::after{top:0;transform:rotate(-45deg)}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r);font-family:var(--font-mono);
  font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  transition:transform .18s,box-shadow .18s,background .18s,color .18s;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--pri{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(0,180,84,.28)}
.btn--pri:hover{box-shadow:0 10px 28px rgba(0,180,84,.38)}
.btn--gh{border:1px solid var(--line);color:var(--text)}
.btn--gh:hover{border-color:var(--green-ink);color:var(--green-ink)}
.btn--gh-l{border:1px solid rgba(255,255,255,.24);color:#fff}
.btn--gh-l:hover{border-color:var(--leaf);color:var(--leaf)}
.btn--sm{padding:10px 18px;font-size:10px}
.btn svg{width:14px;height:14px;flex-shrink:0}

.link-a{display:inline-flex;align-items:center;gap:8px;color:var(--blue-ink);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.link-a:hover{gap:13px;transition:gap .18s}

/* ---------- 7. Chips / badges ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  padding:4px 10px;border:1px solid var(--line);border-radius:2px;background:var(--bg-2);
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-2);
}
.chip--b{border-color:rgba(0,120,228,.28);background:rgba(0,120,228,.07);color:var(--blue-ink)}
.chip--g{border-color:rgba(0,180,84,.3);background:rgba(0,180,84,.08);color:var(--green-ink)}
.chip--l{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.7)}
.pure{
  position:absolute;top:12px;right:12px;z-index:2;padding:4px 9px;border-radius:2px;
  background:var(--grad);color:#fff;font-family:var(--font-mono);font-size:9.5px;
  font-weight:500;letter-spacing:.1em;
}

/* ---------- 8. Disclaimer ---------- */
.warn{background:var(--ink-2);border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line)}
.warn p{padding:15px 0;text-align:center;color:rgba(255,255,255,.5)}
.warn b{color:var(--leaf);font-weight:500}

/* ---------- 9. Footer ---------- */
.ft{background:var(--ink);color:#fff;padding:clamp(52px,6vw,76px) 0 0}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:44px}
.ft__brand .brand__n{color:#fff}
.ft__brand .brand__s{color:var(--leaf)}
.ft__brand p{margin:18px 0 20px;font-size:13.5px;color:rgba(255,255,255,.55);max-width:34ch}
.ft h5{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--leaf);margin-bottom:20px}
.ft__nav li+li{margin-top:11px}
.ft__nav a{font-size:13.5px;color:rgba(255,255,255,.62);transition:color .18s}
.ft__nav a:hover{color:#fff}
.ft__std li{display:flex;gap:11px;margin-bottom:15px}
.ft__std svg{width:14px;height:14px;color:var(--green);flex-shrink:0;margin-top:3px}
.ft__std b{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.ft__std span{font-size:11.5px;color:rgba(255,255,255,.55)}
.ft__btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.ft__bot{
  margin-top:46px;border-top:1px solid var(--navy-line);padding:19px 0;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  color:rgba(255,255,255,.55);
}

/* ==========================================================================
   PAGE BLOCKS
   ========================================================================== */

/* ---------- 10. Hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(760px 500px at 88% 12%,rgba(0,120,228,.30),transparent 62%),
    radial-gradient(600px 420px at 4% 92%,rgba(0,180,84,.20),transparent 65%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--navy-line) 1px,transparent 1px),linear-gradient(90deg,var(--navy-line) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(circle at 70% 40%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(circle at 70% 40%,#000,transparent 76%);
}
/* copy left, product shot right. `start` alignment + a tuned top pad keeps the
   headline near the fold instead of floating in the middle of a tall band. */
.hero__in{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,4vw,64px);
  align-items:center;padding:clamp(48px,5.4vw,74px) 0 0}
.hero__copy{padding-block:clamp(0px,1vw,18px)}
.hero h1{font-size:clamp(46px,7.4vw,92px);line-height:.94;letter-spacing:-.035em}
.hero h1 span{display:block}
.hero p{margin:24px 0 32px;font-size:clamp(15px,1.5vw,17px);color:rgba(255,255,255,.66);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__tl{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;list-style:none;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.hero__tl li{display:flex;align-items:center;gap:7px}
.hero__tl svg{width:14px;height:14px;flex:none;color:var(--leaf)}
.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,54px);margin:clamp(30px,3.4vw,46px) 0 0;padding:28px 0 clamp(40px,5vw,58px);border-top:1px solid var(--navy-line)}
.hero__stats div b{display:block;font-family:var(--font-dis);font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.03em}
.hero__stats div span{color:rgba(255,255,255,.55)}

/* --- hero product shot --- */
/* width:fit-content makes the figure exactly as wide as the vial, so the badges
   can hang off its true edges instead of floating in the empty grid column.
   The render carries its own alpha + green halo, so no blend mode is needed. */
.hero__shot{position:relative;margin:0 auto;width:fit-content;display:flex;justify-content:center}
.hero__shot img{position:relative;z-index:1;display:block;width:auto;
  height:clamp(330px,37vw,530px);filter:saturate(1.04)}
.hero__glow{position:absolute;z-index:0;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(230%,480px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,180,84,.26) 0%,rgba(0,120,228,.15) 45%,transparent 70%);
  filter:blur(18px)}
.hero__badge{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;
  padding:11px 15px;border-radius:14px;
  background:rgba(9,29,49,.78);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 16px 40px rgba(0,0,0,.42)}
.hero__badge b{font-family:var(--font-dis);font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--leaf)}
.hero__badge span{font-size:10.5px;line-height:1.25;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero__badge svg{width:22px;height:22px;flex:none;color:var(--leaf)}
.hero__badge--a{right:78%;top:15%}
.hero__badge--b{left:76%;bottom:19%}
.hero__base{height:4px;background:var(--grad)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 11. Page header (interior) ---------- */
.ph{position:relative;background:var(--ink);color:#fff;padding:clamp(58px,7vw,92px) 0 clamp(46px,5.5vw,68px);overflow:hidden}
.ph::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 400px at 84% 6%,rgba(0,120,228,.26),transparent 64%),radial-gradient(500px 340px at 2% 96%,rgba(0,180,84,.17),transparent 66%);
}
.ph__in{position:relative}
.ph h1{font-size:clamp(36px,5.6vw,66px)}
.ph p{margin-top:20px;font-size:clamp(15px,1.5vw,17px);color:rgba(255,255,255,.64);max-width:64ch}
.ph__stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px);margin-top:clamp(34px,4.4vw,52px);padding-top:28px;border-top:1px solid var(--navy-line)}
.ph__stats div b{display:block;font-family:var(--font-dis);font-size:clamp(22px,2.7vw,30px);font-weight:800;letter-spacing:-.02em}
.ph__stats div span{color:rgba(255,255,255,.55)}
/* pinned to the section's bottom edge so no dark gap appears beneath it */
.ph__base{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad)}
.ph--slim{padding:26px 0 22px}
.crumb{display:flex;gap:9px;align-items:center;margin-bottom:22px;color:rgba(255,255,255,.55)}
.crumb a:hover{color:var(--leaf)}
/* Slash separator between crumbs — small text still counts as text under WCAG 1.4.3,
   so keep it at .55 alpha (~5.5:1) even though it is only a visual divider. */
.crumb span{color:rgba(255,255,255,.55)}

/* ---------- 12. Feature strip ---------- */
.feat{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.feat > div{padding:clamp(30px,3.6vw,44px) clamp(20px,2.4vw,32px);border-left:1px solid var(--line)}
.feat > div:first-child{border-left:0}
.feat__n{color:var(--text-3);display:block;margin-bottom:20px}
.feat__ic{
  display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r);
  background:var(--grad-soft);color:var(--green-ink);margin-bottom:18px;
}
.feat__ic svg{width:18px;height:18px}
.feat h3{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:11px}
.feat p{font-size:13.5px;color:var(--text-2)}

/* ---------- 13. Process ---------- */
.proc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5.6vw,80px);align-items:start}
.proc p{color:var(--text-2);font-size:15px;margin-top:22px}
.steps{margin-top:36px}
.steps li{display:flex;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.steps b{
  display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:2px;
  background:var(--grad-soft);color:var(--green-ink);
  font-family:var(--font-mono);font-size:10px;font-weight:500;
}
.steps span{font-size:14px;font-weight:500}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.sgrid div{background:var(--bg);padding:clamp(22px,2.7vw,30px)}
.sgrid b{display:block;font-family:var(--font-dis);font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sgrid u{display:block;margin:9px 0 4px;text-decoration:none;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.sgrid span{font-size:12px;color:var(--text-3)}
.note{
  display:flex;gap:12px;margin-top:20px;padding:17px 19px;border-radius:var(--r);
  background:rgba(0,120,228,.05);border:1px solid rgba(0,120,228,.15);
}
.note svg{width:16px;height:16px;color:var(--blue-ink);flex-shrink:0;margin-top:2px}
.note p{margin:0;font-size:12.5px;color:var(--text-2)}

/* ---------- 14. Section head ---------- */
.shead{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(32px,4vw,46px)}

/* ---------- 15. Product cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
.pcard{
  display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s;
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(0,180,84,.36)}
.pcard__img{position:relative;aspect-ratio:1;background:var(--bg-3);overflow:hidden}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pcard:hover .pcard__img img{transform:scale(1.05)}
.pcard__b{padding:20px;display:flex;flex-direction:column;flex:1}
.pcard__cat{color:var(--blue-ink);display:block;margin-bottom:10px}
.pcard h3{font-size:19px;margin-bottom:9px}
.pcard p{font-size:13px;color:var(--text-2);flex:1;margin-bottom:16px}

/* ---------- 16. Marquee band ---------- */
.band{background:var(--ink-2);overflow:hidden}
.band__track{display:flex;width:max-content;animation:slide 40s linear infinite}
.band__grp{display:flex;flex-shrink:0}
.band span{display:inline-flex;align-items:center;gap:22px;padding:13px 22px 13px 0;color:rgba(255,255,255,.55);white-space:nowrap}
.band span::after{content:"◆";color:var(--leaf);font-size:8px}
@media (prefers-reduced-motion:reduce){.band__track{animation:none}}

/* ---------- 17. CTA ---------- */
.cta{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(38px,5vw,72px);align-items:center}
.cta h2{font-size:clamp(30px,4.4vw,50px)}
.cta > div > p{margin:22px 0 32px;color:rgba(255,255,255,.64);font-size:15.5px;max-width:46ch}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--navy-line);border:1px solid var(--navy-line)}
.specs div{background:rgba(255,255,255,.03);padding:clamp(22px,2.6vw,28px)}
.specs u{display:flex;gap:8px;align-items:center;text-decoration:none;color:var(--leaf);margin-bottom:12px}
.specs b{font-family:var(--font-dis);font-size:clamp(19px,2.3vw,25px);font-weight:800;letter-spacing:-.02em}

/* ---------- 18. Product detail ---------- */
.pdt{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,5vw,68px);align-items:start}
.pdt__media{position:sticky;top:100px}
.pdt__img{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3);overflow:hidden;aspect-ratio:1}
.pdt__img img{width:100%;height:100%;object-fit:cover}
.pdt h1{font-size:clamp(34px,5vw,58px);margin:14px 0 18px}
.pdt__desc{font-size:16px;color:var(--text-2);margin-bottom:30px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:34px}
.trio div{background:var(--bg);padding:18px}
.trio b{display:block;font-family:var(--font-dis);font-size:16px;font-weight:800;margin-bottom:4px}
.trio span{font-size:11.5px;color:var(--text-3)}
.blk{margin-bottom:32px}
.blk h2{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--green-ink);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.vials li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 17px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:9px;background:var(--bg-2);transition:border-color .18s}
.vials li:hover{border-color:rgba(0,180,84,.4)}
.vials b{font-size:15px;font-weight:600}
.vials code{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--blue-ink);background:rgba(0,120,228,.07);padding:4px 9px;border-radius:2px}
.vfoot{margin-top:13px;color:var(--text-3)}
.dl div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.dl div:last-child{border-bottom:0}
.dl dt{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);flex-shrink:0}
.dl dd{text-align:right;font-weight:500}
.inq{padding:clamp(24px,3vw,32px);border-radius:var(--r);background:var(--ink);color:#fff}
.inq h2{font-family:var(--font-dis);font-size:21px;font-weight:800;letter-spacing:-.02em;color:#fff;border:0;padding:0;margin-bottom:10px;text-transform:none}
.inq p{font-size:13.5px;color:rgba(255,255,255,.6);margin-bottom:20px}
.inq__btns{display:flex;flex-wrap:wrap;gap:10px}
.rwarn{display:flex;gap:11px;margin-top:26px;padding:15px 17px;border-radius:var(--r);background:rgba(217,119,6,.06);border:1px solid rgba(217,119,6,.24)}
.rwarn svg{width:15px;height:15px;color:#B45309;flex-shrink:0;margin-top:2px}
.rwarn p{font-size:12px;color:#92400E;line-height:1.6}

/* ---------- 19. FAQ ---------- */
.faqcat{margin-bottom:clamp(40px,5vw,60px)}
.faqcat > h2{display:flex;align-items:center;gap:14px;font-size:clamp(22px,2.7vw,29px);margin-bottom:24px}
.faqcat > h2::before{content:"";width:4px;height:26px;background:var(--grad);border-radius:2px}
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.acc details{border-bottom:1px solid var(--line);background:var(--bg)}
.acc details:last-child{border-bottom:0}
.acc summary{
  display:flex;gap:16px;align-items:flex-start;padding:19px 22px;cursor:pointer;
  list-style:none;font-family:var(--font-dis);font-weight:700;font-size:15.5px;
  letter-spacing:-.01em;transition:background .18s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--bg-2)}
.acc summary i{font-family:var(--font-mono);font-size:10px;font-style:normal;letter-spacing:.1em;color:var(--green-ink);flex-shrink:0;padding-top:4px;min-width:26px}
.acc summary svg{width:16px;height:16px;color:var(--text-3);margin-left:auto;flex-shrink:0;margin-top:3px;transition:transform .22s}
.acc details[open] summary{background:var(--bg-2)}
.acc details[open] summary svg{transform:rotate(45deg);color:var(--green-ink)}
.acc__b{padding:0 22px 22px 64px}
.acc__b p{font-size:14px;color:var(--text-2)}

/* ---------- 20. Lab reports ---------- */
.rlead{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding:19px 22px;margin-bottom:clamp(28px,3.4vw,40px);border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.rlead p{font-size:13.5px;color:var(--text-2)}
.rlead div{display:flex;gap:9px;align-items:center;color:var(--green-ink)}
.rlead svg{width:16px;height:16px}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,22px)}
.rcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);overflow:hidden;cursor:zoom-in;transition:transform .2s,box-shadow .2s,border-color .2s}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(0,120,228,.4)}
.rcard:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* No aspect-ratio: every scan is 958x1239, so letting the image set its own height
   keeps card heights identical while showing the document uncropped. */
.rcard__t{position:relative;background:var(--bg-3);overflow:hidden;border-bottom:1px solid var(--line)}
.rcard__t img{display:block;width:100%;height:auto}
.rcard__ov{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,24,42,.72);opacity:0;transition:opacity .22s}
.rcard:hover .rcard__ov,.rcard:focus-visible .rcard__ov{opacity:1}
.rcard__ov span{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);color:#fff;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.rcard__ov svg{width:14px;height:14px}
.rcard__b{padding:15px 17px 11px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.rcard__b b{font-family:var(--font-dis);font-size:15px;font-weight:800;letter-spacing:-.01em}
.rcard__b span{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--text-3)}
.rcard__m{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 17px 15px;font-size:9.5px;letter-spacing:.06em;color:var(--text-3)}
.rcard__m span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcard__p{flex:none;padding:3px 8px;border-radius:5px;background:rgba(0,180,84,.1);color:var(--green-ink);font-weight:500}

/* ---------- 20b. Certificate lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:clamp(10px,2.4vw,34px);opacity:0;transition:opacity .2s}
.lb[hidden]{display:none}
.lb.on{opacity:1}
.lb__bd{position:absolute;inset:0;background:rgba(4,14,26,.86);backdrop-filter:blur(4px);cursor:zoom-out}
.lb__box{position:relative;z-index:1;display:flex;flex-direction:column;width:min(100%,880px);max-height:100%;border-radius:var(--r);background:var(--bg);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;transform:translateY(8px);transition:transform .22s}
.lb.on .lb__box{transform:none}
.lb__box:focus{outline:none}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.lb__ttl{min-width:0;display:flex;flex-direction:column;gap:3px}
.lb__ttl b{font-family:var(--font-dis);font-size:15.5px;font-weight:800;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb__ttl span{font-size:10px;letter-spacing:.09em;color:var(--text-3)}
.lb__acts{flex:none;display:flex;gap:8px}
.lb__ico{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text-2);cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.lb__ico:hover{background:var(--bg-3);color:var(--ink);border-color:var(--text-3)}
.lb__ico svg{width:17px;height:17px}
.lb__fig{flex:1;min-height:0;overflow:auto;background:var(--bg-3);display:flex;justify-content:center;-webkit-overflow-scrolling:touch}
.lb__fig img{display:block;width:100%;height:auto;max-width:760px}
.lb__ft{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;border-top:1px solid var(--line);background:var(--bg-2)}
.lb__ft p{min-width:0;flex:1;text-align:center;font-size:9.5px;letter-spacing:.05em;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb__nav{flex:none;display:flex;align-items:center;gap:5px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text-2);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .16s,color .16s}
.lb__nav:hover{background:var(--bg-3);color:var(--ink)}
.lb__nav svg{width:15px;height:15px}
body.lb-on{overflow:hidden}

/* ---------- 21. About ---------- */
.abt{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(38px,5vw,72px);align-items:start}
.abt h2{font-size:clamp(22px,2.8vw,30px);margin-bottom:22px}
.abt p{color:var(--text-2);font-size:15px;margin-bottom:17px}
.abt__card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.abt__card img{width:100%;background:var(--bg-3)}
.abt__card > div{padding:22px;border-top:1px solid var(--line)}
.fac{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.fac div{padding:clamp(24px,3vw,32px);border:1px solid var(--line);border-radius:var(--r);background:var(--bg);transition:border-color .2s,transform .2s}
.fac div:hover{border-color:rgba(0,180,84,.36);transform:translateY(-4px)}
.fac__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);background:var(--grad-soft);color:var(--green-ink);margin-bottom:20px}
.fac__ic svg{width:21px;height:21px}
.fac h3{font-size:17px;margin-bottom:11px}
.fac p{font-size:13.5px;color:var(--text-2)}
.vals{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,44px)}

/* ---------- 22. Contact ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.ccard{display:flex;flex-direction:column;padding:clamp(26px,3.2vw,34px);border:1px solid var(--line);border-radius:var(--r);background:var(--bg);transition:transform .2s,box-shadow .2s,border-color .2s}
.ccard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(0,180,84,.4)}
.ccard__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r);background:var(--grad-soft);color:var(--green-ink);margin-bottom:22px}
.ccard__ic svg{width:22px;height:22px}
.ccard h3{font-size:18px;margin-bottom:10px}
.ccard p{font-size:13.5px;color:var(--text-2);flex:1;margin-bottom:18px}
.ccard b{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--blue-ink);word-break:break-all}
.hours{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.hours div{background:var(--bg);padding:clamp(20px,2.5vw,28px)}
.hours b{display:block;font-family:var(--font-dis);font-size:clamp(19px,2.3vw,25px);font-weight:800;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.hours span{font-size:12.5px;color:var(--text-2)}

/* ---------- 23. Responsive ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  /* Email is the least urgent channel and duplicates the footer, so it is the one
     that goes once space is tight; WhatsApp and Telegram stay reachable. */
  .hd__mail{display:none}
  /* stack copy over the shot, shrink the vial and tuck the badges in over its
     edges so they cannot reach past the viewport on narrow screens */
  .hero__in{grid-template-columns:1fr;gap:clamp(16px,3vw,30px)}
  .hero__shot img{height:clamp(300px,46vw,420px)}
  .hero__badge--a{right:64%;top:7%}
  .hero__badge--b{left:62%;bottom:15%}
  .feat{grid-template-columns:1fr 1fr}
  .feat > div:nth-child(3){border-left:0}
  .feat > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .proc,.cta,.pdt,.abt{grid-template-columns:1fr}
  .pdt__media{position:static}
  .pgrid,.rgrid{grid-template-columns:1fr 1fr}
  .ft__grid{grid-template-columns:1fr 1fr;gap:34px}
  .fac,.cgrid,.pgrid--3{grid-template-columns:1fr}
  .hours{grid-template-columns:1fr 1fr}
  .vals{grid-template-columns:1fr}

  /* mobile drawer */
  .nav.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;inset:70px 0 auto;margin:0;padding:8px var(--pad) 18px;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
  }
  .nav.open a{padding:14px 0;font-size:14px;border-bottom:1px solid var(--line)}
  .nav.open a::after{display:none}
}
@media (max-width:640px){
  .feat,.sgrid,.specs,.trio,.pgrid,.hours{grid-template-columns:1fr}
  /* Certificates stay 2-up: 11 single-column cards would be an endless scroll,
     and a CoA thumbnail is a recognisable shape rather than something to read. */
  .rgrid{grid-template-columns:1fr 1fr;gap:12px}
  .rcard__b{padding:12px 12px 8px}
  .rcard__b b{font-size:13.5px}
  .rcard__m{padding:0 12px 12px;font-size:9px}
  .lb__ft p{display:none}
  .lb__ttl b{font-size:14px}
  .feat > div{border-left:0;border-bottom:1px solid var(--line)}
  .feat > div:last-child{border-bottom:0}
  .trio div,.sgrid div,.specs div,.hours div{border-bottom:0}
  .ft__grid{grid-template-columns:1fr}
  .acc__b{padding-left:22px}
  .acc summary{font-size:14.5px;padding:17px 18px}
  .dl div{flex-direction:column;gap:4px}
  .dl dd{text-align:left}
  /* 2x2 instead of 3 + a lone orphan on the second row */
  .hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
  .hero__shot img{height:min(74vw,340px)}
  .hero__badge{padding:9px 12px;border-radius:12px;gap:8px}
  .hero__badge b{font-size:16px}
  .hero__badge span{font-size:9.5px}
  .hero__badge--a{right:58%;top:4%}
  .hero__badge--b{left:56%;bottom:13%}
  .rlead{flex-direction:column;align-items:flex-start}
}

/* ---------- 24. Print ---------- */
@media print{
  .ticker,.band,.hd,.ft,.inq,.hero__shot,.lb{display:none !important}
  body{color:#000}
  .hero,.ph,.sec--dark{background:#fff;color:#000}
}