:root {
  --bg: #05060a;
  --card: linear-gradient(180deg, rgba(21, 25, 40, 0.5) 0%, #000000 100%);
  --card-2: #0d1426;
  --line: rgba(255,255,255,.07);
  --line-strong: rgba(255,255,255,.12);
  --text: #f4f6fb;
  --muted: #9aa3b5;
  --muted-2: #6b7488;
  --accent: #a9baff;
  --accent-deep: #849bfb;
  --accent-glow: rgba(132,155,251,.28);
  --teal-glow: rgba(38,84,72,.45);
  --radius: 24px;
  --max: 1136px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent-deep); color:#05060a; }

.wrap { width:100%; max-width: var(--max); margin:0 auto; padding:0 32px; }

/* ---------- Utilities ---------- */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Nav ---------- */
.nav-shell { position: fixed; top:16px; left:0; right:0; z-index:100; pointer-events:none; }
.nav-shell .nav {
  pointer-events:auto;
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 16px 12px 24px;
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:24px;
  background: rgba(10,14,24,.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  width:auto;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 40px rgba(0,0,0,.45);
}
@media (max-width: 1200px) { .nav-shell .nav { margin: 0 20px; } }
.nav img.logo { height:26px; width:auto; display:block; }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a {
  color: var(--muted); text-decoration:none; font-size:15px; font-weight:500;
  transition: color .25s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; text-decoration:none; font-weight:600; font-size:15px;
  padding:12px 24px; border:1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  cursor:pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color:#0a0e1c; box-shadow: 0 0 0 0 var(--accent-glow); }
.btn-primary:hover { box-shadow: 0 6px 28px var(--accent-glow); background:#bcc9ff; }
.btn-ghost { background: rgba(169,186,255,.08); color: var(--accent); border-color: rgba(169,186,255,.22); }
.btn-ghost:hover { background: rgba(169,186,255,.14); }
@media (max-width: 860px) { .nav-links { display:none; } }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity:0; transform: translateY(24px) scale(.96); filter: blur(6px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.reveal.visible { opacity:1; transform:none; filter:blur(0); }
.reveal[data-delay="1"] { transition-delay:.08s; }
.reveal[data-delay="2"] { transition-delay:.16s; }
.reveal[data-delay="3"] { transition-delay:.24s; }
.reveal[data-delay="4"] { transition-delay:.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; filter:none; transition:none; }
  .float { animation: none !important; }
  html { scroll-behavior:auto; }
}

/* Fade + scale entrance, for a single hero-ish card (e.g. the Members plan card) rather than the
   plain translateY used for rows of smaller elements. */
.reveal-scale { opacity:0; transform: scale(.85); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-scale.visible { opacity:1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal-scale { opacity:1; transform:none; transition:none; }
}

/* ---------- Hero ---------- */
.hero {
  position:relative; text-align:center; overflow:hidden; height: 80vh;
  display:flex; align-items:center; justify-content:center;
  padding: 130px 0;
}
.hero-bg-video {
  position:absolute; inset:0; width:100%; height:112%; object-fit:cover; display:block; z-index:0;
  transform: translateY(calc(-6% + var(--parallax-shift, 0px)));
  will-change: transform;
}
.hero::before {
  content:""; position:absolute; inset:0 0 auto; height:520px; z-index:1; pointer-events:none;
  background:
    radial-gradient(640px 320px at 50% -60px, rgba(235,242,255,.16), transparent 70%),
    radial-gradient(1000px 480px at 50% -120px, rgba(160,225,240,.08), transparent 70%);
}
.hero::after {
  content:""; position:absolute; inset:auto 0 0; height:70vh; z-index:1; pointer-events:none;
  background: linear-gradient(to bottom, rgba(5,6,10,0), var(--bg) 90%);
}
.hero .wrap { position:relative; z-index:2; }
.chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:.04em;
  color: var(--accent); background: rgba(169,186,255,.08); border:1px solid rgba(169,186,255,.2);
  text-transform:uppercase;
}
.chip .dot { width:6px; height:6px; border-radius:50%; background: var(--accent); box-shadow:0 0 8px var(--accent); }
.hero h1 {
  margin: 26px auto 0; max-width: 1080px;
  font-size: clamp(38px, 6vw, 64px); line-height:1.06; font-weight:800; letter-spacing:-.03em;
}
.hero h1 .grad {
  background: linear-gradient(120deg, #a9baff, #d0daff 60%, #849bfb);
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.hero .sub { margin: 22px auto 0; max-width: 640px; color: var(--muted); font-size:19px; line-height:1.6; font-weight:400; }
.hero .support { margin: 14px auto 0; max-width: 560px; color: var(--muted-2); font-size:15px; line-height:1.6; }
.hero-ctas { margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-ctas .btn { padding:15px 32px; font-size:16px; }

/* ---------- Sections ---------- */
section { position:relative; padding: 90px 0; }
h2.title { margin-top:0; font-size: clamp(28px, 4vw, 42px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
p.lead { margin-top:18px; color: var(--muted); font-size:17px; line-height:1.7; }
.center { text-align:center; }
.center p.lead { margin-left:auto; margin-right:auto; max-width: 720px; }

.card {
  background: linear-gradient(170deg, var(--card-2), var(--card) 55%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.split { display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap:40px; } }

/* ---------- About: video banner card ---------- */
.about-banner {
  position:relative; overflow:hidden; isolation:isolate;
  min-height: 820px; border-radius: 28px;
  background:#070e1e; border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:flex-end;
}
@media (max-width: 900px) { .about-banner { min-height: 860px; } }
@media (max-width: 560px) { .about-banner { min-height: 900px; } }
.about-banner-video {
  position:absolute; top:0; left:0; right:0; z-index:0;
  width:100%; height:56%; object-fit:cover; display:block;
}
.about-banner-fade {
  position:absolute; left:0; right:0; top:40%; bottom:0; z-index:1;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(7,14,30,0) 0%, #070e1e 35%, #070e1e 100%);
}
.about-banner-content {
  position:relative; z-index:2; width:100%;
  padding: 0 clamp(24px, 5vw, 56px) 56px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
}
.about-banner-content .title,
.about-banner-content p.lead { max-width: 900px; }
.about-banner-note { color: var(--accent-deep); font-weight:500; margin-top:16px; }
.about-banner-tagline { color: var(--text); font-weight:700; font-size:18px; margin-top:24px; }

/* ---------- Research: video banner card (split, video right / text left) ---------- */
.research-banner {
  position:relative; overflow:hidden; isolation:isolate;
  min-height: 520px; border-radius: 28px;
  background:#070e1e; border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center;
}
.research-banner-video {
  position:absolute; top:0; right:0; bottom:0; z-index:0;
  width:61%; height:100%; object-fit:cover; display:block;
}
.research-banner-fade {
  position:absolute; top:0; bottom:0; left:39%; width:30%; z-index:1;
  pointer-events:none;
  background: linear-gradient(to right, #070e1e 0%, rgba(7,14,30,0) 100%);
}
.research-banner-content {
  position:relative; z-index:2; max-width: 494px;
  padding: 56px clamp(24px, 5vw, 56px);
  display:flex; flex-direction:column; gap:24px;
}
.research-banner-note { color: var(--accent-deep); font-weight:600; }
@media (max-width: 900px) {
  .research-banner { display:block; min-height:auto; padding-top: 240px; }
  .research-banner-video { top:0; left:0; right:0; bottom:auto; width:100%; height:240px; }
  .research-banner-fade {
    left:0; right:0; width:100%; top:120px; bottom:auto; height:120px;
    background: linear-gradient(to bottom, rgba(7,14,30,0) 0%, #070e1e 100%);
  }
  .research-banner-content { max-width:none; padding: 24px clamp(24px, 6vw, 40px) 40px; }
}

/* ---------- Step / timeline (used by "The App" journey) ---------- */
.step {
  display:flex; gap:22px; align-items:flex-start;
  padding: 26px 30px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}
.step-badge {
  flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:18px; color:#eef1ff;
  background: linear-gradient(160deg, rgba(195,207,255,.35), rgba(132,155,251,.22));
  border: 1px solid rgba(195,207,255,.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 24px rgba(132,155,251,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.step h3 { font-size:18px; font-weight:700; }
.step p { margin-top:6px; color: var(--muted); font-size:15px; line-height:1.65; }
.step { position:relative; z-index:1; }
.step-badge { position:relative; z-index:1; }
.step.reveal { transform: scale(.9); }
.step.reveal.visible { transform: scale(1); }

.timeline { position:relative; margin-top:56px; max-width:720px; margin-left:auto; margin-right:auto; }
.timeline-track {
  position:absolute; top:50px; bottom:50px; left:53px; width:2px;
  background: rgba(255,255,255,.12); border-radius:2px; z-index:0;
}
.timeline-fill {
  position:absolute; top:0; left:0; width:100%; height:0%;
  background: linear-gradient(180deg, rgba(132,155,251,.95), rgba(132,155,251,.15));
  border-radius:2px; transition: height 1.1s var(--ease);
  box-shadow: 0 0 12px rgba(132,155,251,.5);
}
.timeline-steps { display:flex; flex-direction:column; gap:22px; }
.step.active .step-badge {
  background: linear-gradient(160deg, rgba(132,155,251,.85), rgba(99,102,241,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 28px rgba(132,155,251,.55);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
@media (max-width: 560px) {
  .step { padding: 22px 20px; gap:16px; }
  .timeline-track { left:43px; top:44px; bottom:44px; }
  .step-badge { width:40px; height:40px; font-size:16px; }
}

.tags { margin-top:40px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.tag {
  padding:10px 18px; border-radius:999px; font-size:14px; font-weight:500;
  color: var(--text); background: rgba(255,255,255,.05); border:1px solid var(--line);
}
.tag--sm { padding:5px 12px; font-size:12px; }

/* ---------- Peptides carousel (index.html only — peptides.html keeps its own vertical-list styles below) ---------- */
.peptide-filter-wrap { position:relative; margin-top:32px; }
.peptide-filter-bar {
  display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding:2px 4px;
}
.peptide-filter-bar::-webkit-scrollbar { display:none; }
.peptide-filter-tag {
  flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:40px; font-size:14px; font-weight:500; cursor:pointer;
  background: rgba(132,155,251,.16); color: var(--muted); border:none;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.peptide-filter-tag:hover { color: var(--text); }
.peptide-filter-tag.is-active { background: var(--accent-deep); color:#0a0e1c; }
.peptide-filter-icon { position:relative; width:16px; height:16px; flex-shrink:0; }
.peptide-filter-icon img { position:absolute; display:block; filter: grayscale(1) brightness(1.7); }
.peptide-filter-tag.is-active .peptide-filter-icon img { filter: brightness(0); }
.peptide-filter-tag--popular .peptide-filter-icon img { filter:none; }
.peptide-filter-fade {
  position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none;
  transition: opacity .3s var(--ease);
}
.peptide-filter-fade--left { left:0; background:linear-gradient(to right, var(--bg), transparent); }
.peptide-filter-fade--right { right:0; background:linear-gradient(to left, var(--bg), transparent); }
.peptide-filter-wrap.is-at-start .peptide-filter-fade--left { opacity:0; }
.peptide-filter-wrap.is-at-end .peptide-filter-fade--right { opacity:0; }

.peptide-carousel-wrap { position:relative; margin-top:32px; }
.peptide-carousel-viewport {
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.peptide-carousel-viewport::-webkit-scrollbar { display:none; }
.peptide-carousel { display:flex; gap:20px; width:max-content; padding:6px 4px 16px; }
@media (min-width:640px) { .peptide-carousel { gap:35px; } }

.peptide-fade {
  position:absolute; top:0; bottom:16px; width:120px; z-index:2;
  pointer-events:none; transition:opacity .3s var(--ease);
}
.peptide-fade--left { left:0; background:linear-gradient(to right, var(--bg), transparent); }
.peptide-fade--right { right:0; background:linear-gradient(to left, var(--bg), transparent); }
.peptide-carousel-wrap.is-at-start .peptide-fade--left { opacity:0; }
.peptide-carousel-wrap.is-at-end .peptide-fade--right { opacity:0; }

.peptide-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, rgba(148,163,255,.28), rgba(117,125,209,.12) 60%);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.35);
  transition: opacity .3s var(--ease), background .25s var(--ease);
}
.peptide-arrow:hover { background: linear-gradient(160deg, rgba(148,163,255,.4), rgba(117,125,209,.18) 60%); }
.peptide-arrow img { width:8px; height:14px; }
.peptide-arrow--prev { left:8px; }
.peptide-arrow--prev img { transform:scaleX(-1); }
.peptide-arrow--next { right:8px; }
.peptide-carousel-wrap.is-at-start .peptide-arrow--prev,
.peptide-carousel-wrap.is-at-end .peptide-arrow--next { opacity:0; pointer-events:none; }
@media (max-width:640px) { .peptide-arrow { display:none; } }

.peptide-card {
  scroll-snap-align:start; flex:0 0 320px; width:320px; min-height:304px;
  padding:24px; display:flex; flex-direction:column; gap:24px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12); border-radius:32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
  position:relative; overflow:hidden; isolation:isolate;
}
@media (max-width:420px) { .peptide-card { width:84vw; flex-basis:84vw; } }
.peptide-card.is-hidden { display:none; }
.peptide-card::before {
  content:""; position:absolute; top:-32px; left:-23px; width:165px; height:165px; z-index:0;
  pointer-events:none;
}
.peptide-card-vial { position:relative; z-index:1; width:90px; height:100px; display:flex; align-items:center; justify-content:center; }
.peptide-card-vial img { max-width:100%; max-height:100%; object-fit:contain; }
.peptide-card-info { position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; }
.peptide-card h3 { font-size:24px; font-weight:600; color:var(--text); }
.peptide-card p { color:var(--muted); font-size:16px; line-height:1.375; }
.peptide-card-tag {
  align-self:flex-start; display:inline-flex; align-items:center; gap:4px;
  height:35px; font-size:14px; font-weight:600; color: var(--tag-color);
}
/* Icon sits in a fixed 20x20 box; the <img> is positioned via inline inset styles (from
   FITSTAR_CATEGORY_META.inset) matching each icon's own Figma frame, so every icon reads at the
   same visual size regardless of how much each source path's own bounding box differs. */
.peptide-tag-icon { position:relative; width:20px; height:20px; flex-shrink:0; }
.peptide-tag-icon img { position:absolute; display:block; }

.peptide-card--cta { align-items:center; justify-content:center; text-align:center; gap:24px; }
.peptide-card--cta::before { display:none; }
.peptide-card--cta p { text-align:center; }

/* ---------- Members: single sleek plan card ---------- */
.member-card {
  max-width: 760px; margin: 56px auto 0; padding: 40px clamp(24px, 5vw, 40px) 8px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12); border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
  position:relative; overflow:hidden; isolation:isolate;
}
.member-card-head {
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 16px;
  padding-bottom:28px; border-bottom:1px solid var(--line);
}
.member-plan-name { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-.01em; }
.member-price { font-size:18px; color:var(--muted); }
.member-price strong { font-size:28px; font-weight:800; color:var(--text); }

.member-benefit {
  display:flex; gap:18px; align-items:flex-start; padding:28px 0;
  position:relative; z-index:1;
}
.member-benefit-icon { flex:0 0 auto; width:44px; height:44px; margin-top:2px; }
.member-benefit h3 { font-size:18px; font-weight:700; color:var(--text); margin-bottom:6px; }
.member-benefit p { font-size:16.5px; line-height:1.6; color:var(--muted); }

/* ---------- FAQ ---------- */
.faq-list { margin: 56px auto 0; max-width: 720px; display:grid; gap:12px; }
details {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 32px; overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
  transition: border-color .3s var(--ease);
}
details[open] { border-color: rgba(169,186,255,.35); }
summary {
  list-style:none; cursor:pointer; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-weight:600; font-size:16px;
  transition: color .25s var(--ease);
}
summary:hover { color: var(--accent); }
summary::-webkit-details-marker { display:none; }
summary .plus { flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--muted-2); position:relative; transition: transform .3s var(--ease), border-color .3s var(--ease); }
summary .plus::before, summary .plus::after { content:""; position:absolute; background:var(--muted); top:50%; left:50%; transform:translate(-50%,-50%); }
summary .plus::before { width:10px; height:1.5px; }
summary .plus::after { width:1.5px; height:10px; transition: opacity .25s var(--ease); }
details[open] summary .plus { transform: rotate(180deg); border-color: var(--accent-deep); }
details[open] summary .plus::after { opacity:0; }
.faq-body { padding: 0 24px 22px; color: var(--muted); font-size:15px; line-height:1.7; }
details[open] .faq-body { animation: faqFade .45s var(--ease) both; }
@keyframes faqFade { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { details[open] .faq-body { animation:none; } }

/* ---------- CTA ---------- */
.cta-card {
  position:relative; overflow:hidden; text-align:center;
  padding: clamp(48px, 7vw, 88px) 32px;
  border-radius: 32px; border:1px solid var(--line);
  background:
    radial-gradient(560px 300px at 50% -10%, rgba(132,155,251,.22), transparent 70%),
    radial-gradient(700px 400px at 50% 120%, rgba(38,84,72,.4), transparent 70%),
    linear-gradient(170deg, #0c1322, #070b14);
}
.cta-card h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight:800; letter-spacing:-.02em; }
.cta-card p { margin:18px auto 0; max-width:560px; color:var(--muted); font-size:17px; line-height:1.6; }
.cta-card .btn { margin-top:34px; padding:16px 36px; font-size:16px; }

/* ---------- Card cursor glow ---------- */
.step, .member-card, .cta-card, details, .peptide-card {
  position: relative;
  isolation: isolate;
}
/* soft ellipse shine that follows the cursor and gently deforms so it doesn't read as a static gradient */
@property --glow-rx {
  syntax: '<length>';
  inherits: false;
  initial-value: 320px;
}
@property --glow-ry {
  syntax: '<length>';
  inherits: false;
  initial-value: 240px;
}
.step::after, .member-card::after, .cta-card::after, details::after, .peptide-card::after {
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: radial-gradient(ellipse var(--glow-rx,320px) var(--glow-ry,240px) at var(--mx,50%) var(--my,50%), rgba(132,155,251,.35), rgba(99,102,241,.14) 45%, transparent 70%);
  opacity:0;
  transition: opacity .4s var(--ease);
  pointer-events:none;
  mix-blend-mode: screen;
  animation-name: card-glow-deform;
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  z-index:0;
}
.step:hover::after, .member-card:hover::after, .cta-card:hover::after, details:hover::after, .peptide-card:hover::after {
  opacity:.5;
  animation-play-state: running;
}
@keyframes card-glow-deform {
  0%   { --glow-rx: 320px; --glow-ry: 240px; }
  25%  { --glow-rx: 365px; --glow-ry: 205px; }
  50%  { --glow-rx: 290px; --glow-ry: 255px; }
  75%  { --glow-rx: 345px; --glow-ry: 215px; }
  100% { --glow-rx: 320px; --glow-ry: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .step::after, .member-card::after, .cta-card::after, details::after, .peptide-card::after {
    transition:none; animation:none;
  }
}

/* ---------- Peptides catalog page ---------- */
.page-head { padding:190px 0 60px; text-align:center; }
.page-head h1 { font-size: clamp(32px,5vw,52px); font-weight:800; letter-spacing:-.02em; }
.page-head p { margin-top:16px; color:var(--muted); font-size:17px; max-width:640px; margin-left:auto; margin-right:auto; }

.catalog-toolbar { margin: 0 auto 8px; max-width: 800px; }

.catalog-search--full { width:100%; }
.catalog-search input {
  width:280px; max-width:100%; padding:12px 20px; border-radius:999px;
  background: rgba(255,255,255,.05); border:1px solid var(--line); color:var(--text); font-size:15px;
  font-family: inherit; outline:none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.catalog-search--full input { width:100%; }
.catalog-search input:focus { border-color: var(--accent-deep); background: rgba(255,255,255,.08); }
.catalog-search input::placeholder { color: var(--muted-2); }

.category-section { padding:48px 0; max-width: 800px; margin: 0 auto; }
.category-section h2 { display:flex; align-items:center; gap:12px; font-size:24px; font-weight:800; margin-bottom:24px; }
.category-section-icon { position:relative; width:32px; height:32px; flex-shrink:0; }
.category-section-icon img { position:absolute; display:block; filter: brightness(0) invert(1); }
.catalog-empty { display:none; padding:64px 0; text-align:center; color:var(--muted); font-size:16px; }
.peptide-row-list { display:grid; gap:12px; }
.peptide-row {
  display:flex; gap:20px; align-items:center; padding:20px 24px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12); border-radius:32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
  position:relative; overflow:hidden; isolation:isolate;
}
.peptide-row.is-hidden { display:none; }
.peptide-row::before {
  content:""; position:absolute; top:-28px; left:-20px; width:140px; height:140px; z-index:0;
  pointer-events:none;
}
.peptide-row-vial { position:relative; z-index:1; flex:0 0 auto; width:48px; height:64px; display:flex; align-items:center; justify-content:center; }
.peptide-row-vial img { max-width:100%; max-height:100%; object-fit:contain; }
.peptide-row-info { position:relative; z-index:1; flex:1 1 auto; min-width:0; }
.peptide-row h3 { font-size:16px; font-weight:700; color:var(--text); }
.peptide-row p { color:var(--muted); font-size:14px; margin-top:4px; }
.peptide-row-tags {
  position:relative; z-index:1; flex:0 0 auto; max-width:280px;
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px;
}
@media (max-width:860px) {
  .peptide-row { flex-wrap:wrap; }
  .peptide-row-tags { flex-basis:100%; max-width:none; justify-content:flex-start; }
}

/* ---------- Footer ---------- */
footer { padding: 72px 0 40px; border-top:1px solid var(--line); }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
footer .entity { margin-top:18px; color: var(--muted-2); font-size:13.5px; line-height:1.7; max-width:340px; }
footer h4 { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; }
footer nav a { display:block; color:var(--muted); text-decoration:none; font-size:14.5px; padding:5px 0; transition: color .25s var(--ease); }
footer nav a:hover { color: var(--accent); }
.foot-bottom { margin-top:56px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted-2); font-size:13px; }