/* ============================================================
   PEPTIDE FATHER — styles
   Dark clinical / premium research aesthetic
   ============================================================ */

:root{
  --bg:        #070a0f;
  --bg-2:      #0b1017;
  --panel:     #0e141d;
  --panel-2:   #121a25;
  --line:      #1e2a38;
  --line-soft: #172230;
  --text:      #e8eef5;
  --muted:     #8ea0b5;
  --faint:     #5f7186;
  --teal:      #34e5cf;
  --teal-2:    #1fb9d4;
  --gold:      #e8c07a;
  --danger:    #ff6b6b;
  --radius:    16px;
  --radius-sm: 11px;
  --maxw:      1180px;
  --shadow:    0 24px 60px -22px rgba(0,0,0,.7);
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.ic{width:1.1em;height:1.1em;fill:currentColor}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:820px}
.eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);margin-bottom:16px;
  font-family:'JetBrains Mono',monospace;
}
.grad{
  background:linear-gradient(100deg,var(--teal),var(--teal-2) 60%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:15px;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,border-color .2s;
  white-space:nowrap;line-height:1;
}
.btn--sm{padding:9px 18px;font-size:13.5px}
.btn--lg{padding:16px 28px;font-size:16px}
.btn--primary{
  background:linear-gradient(100deg,var(--teal),var(--teal-2));
  color:#04121a;box-shadow:0 10px 30px -10px rgba(52,229,207,.55);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(52,229,207,.7)}
.btn--ghost{background:rgba(255,255,255,.02);color:var(--text);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}

/* ── Gate ────────────────────────────────────────────── */
.gate{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,11,.92);backdrop-filter:blur(14px);padding:24px;
  opacity:1;transition:opacity .4s var(--ease);
}
.gate.hide{opacity:0;pointer-events:none}
.gate__card{
  max-width:520px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:40px 36px;box-shadow:var(--shadow);
  text-align:left;animation:pop .5s var(--ease);
}
@keyframes pop{from{transform:translateY(18px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.gate__mark{
  width:52px;height:52px;border-radius:14px;margin-bottom:22px;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  position:relative;box-shadow:0 8px 24px -8px rgba(52,229,207,.6);
}
.gate__mark::after{
  content:"";position:absolute;inset:0;border-radius:14px;
  background:
    linear-gradient(#04121a,#04121a) 50% 30% / 5px 20px no-repeat,
    linear-gradient(#04121a,#04121a) 50% 68% / 15px 5px no-repeat;
  opacity:.9;
}
.gate__card h2{margin:0 0 14px;font-size:24px;font-family:'Space Grotesk',sans-serif}
.gate__card p{color:var(--muted);font-size:14.5px;margin:0 0 14px}
.gate__card strong{color:var(--text)}
.gate__certify{padding:14px 16px;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
.gate__actions{display:flex;gap:12px;margin-top:24px}
.gate__actions .btn{flex:1}

/* ── Nav ─────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(7,10,15,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.nav.scrolled{border-color:var(--line-soft);background:rgba(7,10,15,.9)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px}
.brand__logo{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));position:relative;
  box-shadow:0 6px 18px -6px rgba(52,229,207,.55);
}
.brand__logo::after{
  content:"";position:absolute;inset:0;border-radius:10px;
  background:
    linear-gradient(#04121a,#04121a) 50% 28% / 4px 14px no-repeat,
    linear-gradient(#04121a,#04121a) 50% 66% / 12px 4px no-repeat;
}
.brand__name{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.06em;font-size:16px}
.brand__name b{font-weight:700;color:var(--teal)}
.nav__links{display:flex;gap:30px}
.nav__links a{color:var(--muted);font-size:14.5px;font-weight:500;transition:color .2s}
.nav__links a:hover{color:var(--text)}

/* ── Hero ────────────────────────────────────────────── */
.hero{position:relative;padding:96px 0 84px;overflow:hidden}
.hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);
  opacity:.5;
}
.hero__glow{
  position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:900px;height:520px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(52,229,207,.22),transparent 70%);
  filter:blur(20px);
}
.hero__inner{position:relative;text-align:center;max-width:840px}
.hero__title{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(38px,6.4vw,72px);line-height:1.03;letter-spacing:-.02em;margin:0 0 22px;
}
.hero__sub{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:620px;margin:0 auto 34px}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero__badges{
  list-style:none;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;
  padding:0;margin:44px 0 0;color:var(--faint);font-size:13.5px;font-weight:500;
  font-family:'JetBrains Mono',monospace;
}
.hero__badges li{display:flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}

/* ── RUO strip ───────────────────────────────────────── */
.ruo-strip{background:linear-gradient(90deg,rgba(232,192,122,.06),rgba(52,229,207,.05));border-block:1px solid var(--line-soft)}
.ruo-strip__inner{display:flex;align-items:center;gap:14px;padding:16px 24px;justify-content:center;text-align:center}
.ruo-strip .ic{width:22px;height:22px;color:var(--gold);flex:none}
.ruo-strip p{margin:0;font-size:13.5px;color:var(--muted)}
.ruo-strip strong{color:var(--gold)}

/* ── Sections ────────────────────────────────────────── */
.section{padding:88px 0}
.section--alt{background:var(--bg-2);border-block:1px solid var(--line-soft)}
.section__head{max-width:640px;margin:0 0 44px}
.section__head h2{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(28px,4vw,42px);line-height:1.1;letter-spacing:-.01em;margin:0 0 14px;
}
.section__lead{color:var(--muted);font-size:16.5px;margin:0}

/* ── Filters ─────────────────────────────────────────── */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.chip{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);cursor:pointer;transition:.2s;
}
.chip:hover{color:var(--text);border-color:var(--faint)}
.chip.active{background:var(--teal);color:#04121a;border-color:var(--teal);font-weight:700}
.chip--goal{background:var(--gold);color:#1a1206;border-color:var(--gold);font-weight:700}
.chip--goal.active{background:var(--gold);color:#1a1206;border-color:var(--gold)}

/* ── Goal finder ─────────────────────────────────────── */
.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.goal{
  display:flex;gap:16px;text-align:left;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;cursor:pointer;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;color:var(--text);font-family:inherit;
}
.goal:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:var(--shadow)}
.goal__ic{
  width:46px;height:46px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(52,229,207,.18),rgba(31,185,212,.1));border:1px solid var(--line);color:var(--teal);
}
.goal__ic svg{width:24px;height:24px}
.goal__body{display:flex;flex-direction:column;gap:5px}
.goal__title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px}
.goal__blurb{color:var(--muted);font-size:13.5px;line-height:1.5}
.goal__count{color:var(--teal);font-size:12.5px;font-weight:700;font-family:'JetBrains Mono',monospace;margin-top:4px}

/* ── Catalog grid ────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;cursor:pointer;overflow:hidden;
  transition:transform .28s var(--ease),border-color .28s,box-shadow .28s;
  display:flex;flex-direction:column;gap:16px;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,var(--_accent,rgba(52,229,207,.14)),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.card:hover{transform:translateY(-5px);border-color:var(--_line,var(--teal));box-shadow:var(--shadow)}
.card:hover::before{opacity:1}
.card__badges{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.card__pop{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;color:var(--gold);white-space:nowrap;
  background:rgba(232,192,122,.1);border:1px solid rgba(232,192,122,.3);
}
.card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.card__areas{display:flex;gap:6px;flex-wrap:wrap}
.area{
  font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:999px;
  background:rgba(52,229,207,.07);border:1px solid var(--line-soft);color:var(--muted);
}
.card__vial{width:44px;height:64px;flex:none}
.card__cat{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--_accent-solid,var(--teal));
  padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);
}
.card__name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;margin:0;line-height:1.15}
.card__abbr{color:var(--faint);font-size:13px;font-family:'JetBrains Mono',monospace;margin-top:3px}
.card__desc{color:var(--muted);font-size:14px;margin:0;flex:1}
.card__variants{display:flex;gap:7px;flex-wrap:wrap}
.tag{
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  padding:5px 11px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
}
.card__foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--line-soft)}
.card__spec{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--faint)}
.card__more{font-size:13px;font-weight:700;color:var(--teal);display:flex;align-items:center;gap:5px;transition:gap .2s}
.card:hover .card__more{gap:9px}

/* ── Features ────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px}
.feature__ic{
  width:46px;height:46px;border-radius:12px;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(52,229,207,.16),rgba(31,185,212,.1));
  border:1px solid var(--line);position:relative;
}
.feature__ic::after{content:"";position:absolute;inset:0;background-size:22px;background-repeat:no-repeat;background-position:center}
.feature__ic[data-i="1"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2334e5cf'%3E%3Cpath d='M9 2h6v2h-1v4.6l4.3 8.1c.7 1.3-.3 3-1.8 3H7.5c-1.5 0-2.5-1.7-1.8-3L10 8.6V4H9V2Zm3 9-2.3 4.4h4.6L12 11Z'/%3E%3C/svg%3E")}
.feature__ic[data-i="2"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2334e5cf'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Zm-9 12H7v-2h4v2Zm6-4H7V8h10v2Z'/%3E%3C/svg%3E")}
.feature__ic[data-i="3"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2334e5cf'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.2 8 10 4.6-.8 8-5 8-10V5l-8-3Zm-1 13-3.5-3.5 1.4-1.4L11 12.2l4.1-4.1 1.4 1.4L11 15Z'/%3E%3C/svg%3E")}
.feature__ic[data-i="4"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2334e5cf'%3E%3Cpath d='M13 2 3 14h7l-1 8 10-12h-7l1-8Z'/%3E%3C/svg%3E")}
.feature h3{font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0 0 10px}
.feature p{color:var(--muted);font-size:14px;margin:0}

/* ── Steps ───────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;position:relative}
.step__n{font-family:'Space Grotesk',sans-serif;font-size:40px;font-weight:700;color:var(--line);display:block;margin-bottom:8px}
.step h3{font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 8px}
.step p{color:var(--muted);font-size:14.5px;margin:0}
.step a{color:var(--teal);font-weight:600}
.order-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── FAQ ─────────────────────────────────────────────── */
.faq{display:flex;flex-direction:column;gap:12px}
.faq__item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.faq__q{
  width:100%;text-align:left;background:none;border:0;color:var(--text);cursor:pointer;
  padding:20px 22px;font-size:16px;font-weight:600;font-family:'Inter',sans-serif;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq__q span{font-size:22px;color:var(--teal);transition:transform .3s var(--ease);flex:none}
.faq__item.open .faq__q span{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq__a p{padding:0 22px 22px;margin:0;color:var(--muted);font-size:14.5px}

/* ── Legal ───────────────────────────────────────────── */
.legal{background:var(--bg-2);border-top:1px solid var(--line-soft)}
.legal__title{font-family:'Space Grotesk',sans-serif;font-size:24px;margin:0 0 24px}
.legal__body p{color:var(--faint);font-size:13.5px;line-height:1.7;margin:0 0 14px}
.legal__body strong{color:var(--muted)}

/* ── Footer ──────────────────────────────────────────── */
.footer{background:var(--bg);border-top:1px solid var(--line);padding:52px 0 34px}
.footer__inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:30px}
.footer__brand{display:flex;gap:14px;align-items:flex-start}
.footer__tag{color:var(--faint);font-size:13.5px;margin:8px 0 0;max-width:320px}
.footer__contact{display:flex;flex-direction:column;gap:10px;text-align:right}
.footer__contact a{color:var(--muted);font-size:14px;font-family:'JetBrains Mono',monospace;transition:color .2s}
.footer__contact a:hover{color:var(--teal)}
.footer__legal{border-top:1px solid var(--line-soft);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__legal p{color:var(--faint);font-size:12px;margin:0}

/* ── Modal ───────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal__backdrop{position:absolute;inset:0;background:rgba(4,7,11,.8);backdrop-filter:blur(8px)}
.modal__card{
  position:relative;width:100%;max-width:600px;max-height:88vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);animation:pop .4s var(--ease);
}
.m-head{position:relative;padding:32px 32px 24px;border-bottom:1px solid var(--line-soft);display:flex;gap:20px;align-items:flex-start}
.m-close{
  position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;
}
.m-close:hover{color:var(--text);border-color:var(--faint)}
.m-vial{width:52px;height:76px;flex:none}
.m-title h3{font-family:'Space Grotesk',sans-serif;font-size:26px;margin:0 0 4px}
.m-title .card__abbr{font-size:14px}
.m-cat{margin-top:10px}
.m-body{padding:26px 32px 32px}
.m-desc{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 24px}
.m-specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:24px}
.m-spec{background:var(--panel);padding:14px 16px}
.m-spec dt{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.m-spec dd{margin:0;font-family:'JetBrains Mono',monospace;font-size:13.5px;color:var(--text);word-break:break-word}
.m-variants{margin-bottom:24px}
.m-variants h4{font-size:13px;color:var(--muted);margin:0 0 10px;font-weight:600}
.m-variants .card__variants{gap:8px}
.m-ruo{font-size:12.5px;color:var(--faint);background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:13px 15px;margin-bottom:22px}
.m-ruo strong{color:var(--gold)}
.m-cta{display:flex;gap:12px}
.m-cta .btn{flex:1}

/* ── Sticky mobile CTA ───────────────────────────────── */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:10px;padding:12px 16px;
  background:rgba(7,10,15,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);
}
.mobile-cta .btn{flex:1}
.mobile-cta .btn--ghost{flex:0 0 96px}

/* ── Reveal ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── Responsive ──────────────────────────────────────── */
@media(max-width:960px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:repeat(2,1fr)}
  .goals{grid-template-columns:repeat(2,1fr)}
  .nav__links{display:none}
}
@media(max-width:620px){
  .wrap{padding:0 18px}
  .section{padding:64px 0}
  .hero{padding:64px 0 56px}
  .grid,.cols,.steps,.goals{grid-template-columns:1fr}
  .footer__inner{flex-direction:column}
  .footer__contact{text-align:left}
  .m-specs{grid-template-columns:1fr}
  .hero__badges{gap:16px}
  .brand__name{font-size:15px}
  .nav__cta{display:none}
  .mobile-cta{display:flex}
  body{padding-bottom:72px}
}