/* ============================================================================
   HOME — immersive hero with falling peptide bottle
   ============================================================================ */

/* ---------------------------------------------------------------- hero stage */
.hero{
  position:relative;
  min-height:100svh;
  background:
    radial-gradient(80% 70% at 50% 44%, #f7f6f3 0%, #ebe8e2 46%, #ddd9d1 78%, #d2cdc4 100%);
  overflow:hidden;
  display:grid; place-items:center;
}
/* edge vignette so the bright lead vial reads with more punch */
.hero::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(75% 65% at 50% 45%, rgba(0,0,0,0) 55%, rgba(20,18,14,.10) 100%);
}

/* huge faint backdrop wordmark */
.hero__ghost{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  z-index:1;
}
.hero__ghost span{
  font-weight:700; letter-spacing:-.05em; line-height:.8;
  font-size:clamp(120px, 30vw, 560px);
  color:transparent;
  -webkit-text-stroke:1px rgba(10,10,10,.10);
  text-stroke:1px rgba(10,10,10,.10);
  user-select:none;
}

/* registration wordmark — sits below the falling vial */
.hero__mark{
  position:absolute; z-index:5; top:74%; left:50%; transform:translate(-50%,-50%);
  text-align:center; pointer-events:none;
}
.hero__mark .lab{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.hero__tag{ font-weight:700; letter-spacing:-.035em; line-height:.92; text-transform:uppercase;
  font-size:clamp(28px,5vw,58px); margin-bottom:14px; }

/* ============================================================== STATEMENT band */
.statement{ background:var(--ink); color:var(--bg); padding:clamp(64px,11vw,150px) 0; text-align:center; }
.statement__line{ font-size:clamp(42px,9.5vw,140px); line-height:.86; }
.statement__line .red{ color:var(--red); }
.statement__sub{ margin-top:26px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); font-size:11px; }

/* hero spotlight — soft light pool that makes the lead vial pop --------------- */
.hero__glow{
  position:absolute; z-index:2; left:50%; top:43%; transform:translate(-50%,-50%);
  width:min(78vw,860px); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle at 50% 46%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 60%);
}

/* depth-field of bottles — one big in front, many small receding behind ------- */
.scene{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.v{
  position:absolute; left:var(--x); top:var(--y); width:var(--size);
  transform:translate(-50%,-50%) translate3d(var(--px,0px), var(--py,0px), 0);
  opacity:var(--op,1); filter:blur(var(--blur,0px));
  will-change:transform;
}
.v__i{
  animation: floatY var(--fdur,7s) ease-in-out var(--fdelay,0s) infinite;
  will-change:transform;
}
.v img{ width:100%; height:auto;
  filter:drop-shadow(0 calc(var(--size) * .10) calc(var(--size) * .075) rgba(20,18,14,.16));
}
/* the one big lead vial in front */
.v--hero{ z-index:8; }
.v--hero .v__i{ animation: dropIn 1.7s var(--ease) .1s both, floatY 7.5s ease-in-out 1.85s infinite; }
.v--hero img{ filter:drop-shadow(0 44px 38px rgba(20,18,14,.26)) drop-shadow(0 12px 16px rgba(20,18,14,.13)); }
/* background vials fade + stagger in */
.v--bg{ animation: vIn 1s var(--ease) var(--din,0s) both; }
@keyframes vIn{ from{ opacity:0; } to{ opacity:var(--op,1); } }

@keyframes dropIn{
  0%   { transform:translate3d(0,-135vh,0) rotate(-46deg) scale(.92); opacity:0; }
  55%  { opacity:1; }
  78%  { transform:translate3d(0,3vh,0) rotate(calc(var(--rot,0deg) + 4deg)) scale(1.01); }   /* settle overshoot */
  100% { transform:translate3d(0,0,0) rotate(var(--rot,0deg)) scale(1); opacity:1; }
}
@keyframes floatY{
  0%,100%{ transform:translate3d(0,calc(var(--amp,13px) * -1),0) rotate(calc(var(--rot,0deg) - 2.5deg)); }
  50%    { transform:translate3d(0,var(--amp,13px),0)            rotate(calc(var(--rot,0deg) + 2.5deg)); }
}

/* scroll hint */
.scroll-hint{
  position:absolute; z-index:7; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
.scroll-hint .ln{ width:1px; height:34px; background:var(--ink); position:relative; overflow:hidden; }
.scroll-hint .ln::after{ content:""; position:absolute; inset:0; background:var(--red); animation:drip 1.8s var(--ease) infinite; }
@keyframes drip{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }

/* ====================================================================== INTRO */
.intro{ padding:clamp(70px,11vw,150px) 0; border-bottom:1px solid var(--line); }
.intro__kick{ display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.intro__kick .ln{ flex:1; height:1px; background:var(--line); }
.intro h2{
  font-weight:600; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(28px,4.6vw,68px);
  max-width:20ch;
}
.intro h2 em{ font-style:normal; color:var(--red); }
.intro__foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; margin-top:48px; align-items:flex-end; }

/* =================================================================== FACTS */
.facts{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,6vw,90px); align-items:center; padding:clamp(56px,9vw,120px) 0; border-bottom:1px solid var(--line); }
.facts__lead .mono.red{ margin-bottom:18px; }
.facts__lead h3{ font-weight:600; font-size:clamp(26px,3.6vw,52px); letter-spacing:-.03em; line-height:1.02; }
.facts__lead p{ margin-top:18px; max-width:42ch; color:var(--ink-soft); font-size:15px; line-height:1.5; letter-spacing:0; }
.facts .spec{ box-shadow:0 30px 50px -30px rgba(20,18,14,.4); }
@media (max-width:820px){ .facts{ grid-template-columns:1fr; } }

/* ================================================================ CATEGORIES */
.cats{ padding:clamp(60px,9vw,120px) 0; }
.cats__hd{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:42px; }
.cats__hd .display{ font-size:clamp(40px,8vw,120px); }
.cat-list{ border-top:1px solid var(--ink); }
.cat-row{
  display:grid; grid-template-columns:64px 1fr auto auto; gap:20px; align-items:center;
  padding:22px 6px; border-bottom:1px solid var(--line); transition:padding .35s var(--ease), background .35s var(--ease);
}
.cat-row:hover{ background:var(--ink); color:var(--bg); padding-left:22px; padding-right:22px; }
.cat-row:hover .cat-row__arw{ color:var(--red); transform:translateX(6px); }
.cat-row__no{ font-family:var(--mono); font-size:12px; opacity:.7; }
.cat-row__name{ font-weight:600; font-size:clamp(22px,3.4vw,40px); letter-spacing:-.025em; text-transform:uppercase; }
.cat-row__count{ font-family:var(--mono); font-size:11px; }
.cat-row__arw{ font-size:20px; transition:transform .35s var(--ease); }

/* ============================================================ SPLIT FEATURE */
.split{ display:grid; grid-template-columns:1fr 1fr; min-height:80vh; border-block:1px solid var(--line); }
.split__media{ background:var(--stage); display:grid; place-items:center; position:relative; overflow:hidden; padding:40px; }
.split__media img{ width:min(70%,420px); filter:drop-shadow(0 30px 28px rgba(20,18,14,.16)); animation:floatY 8s ease-in-out infinite; --rot:-4deg; }
.split__body{ padding:clamp(36px,6vw,90px); display:flex; flex-direction:column; justify-content:center; gap:26px; }
.split__body h3{ font-weight:600; font-size:clamp(26px,3.6vw,52px); letter-spacing:-.03em; line-height:1.02; }
.split__body p{ max-width:46ch; color:var(--ink-soft); font-size:15px; line-height:1.5; letter-spacing:0; }
.feat-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.feat-grid .pill{ border:1px solid var(--line-2); border-radius:999px; padding:8px 14px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }

@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .split__media{ min-height:46vh; }
}
@media (max-width:720px){
  .cat-row{ grid-template-columns:40px 1fr auto; }
  .cat-row__count{ display:none; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .v__i, .split__media img, .scroll-hint .ln::after, .marquee__track{ animation:none !important; }
  .v__i{ transform:rotate(var(--rot,0deg)); }
}