/*
Theme Name: Whats Pep
Theme URI: https://whatspep.com/
Author: Whats Pep
Description: A clinical, high-energy WordPress theme for the Whats Pep peptide brand.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: whats-pep
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Onest:wght@400;500;600;700;800;900&display=swap');

:root {
  --pep-lime: #C8FF47;
  --carbon: #0A0A0A;
  --snow: #FAFAFA;
  --surface: #141414;
  --edge: #2A2A2A;
  --ghost: #888888;
  --font-brand: 'Onest', sans-serif;
  --font-data: 'DM Mono', monospace;
  --page-pad: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--carbon); color: var(--snow); font: 400 16px/1.55 var(--font-brand); }
body.menu-open { overflow: hidden; }
a { color: inherit; }
button, input { font: inherit; }
img, svg { display: block; max-width: 100%; }
.wp-site-blocks { overflow: hidden; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 86px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--page-pad); border-bottom: 1px solid transparent; transition: .25s ease; }
.site-header.is-scrolled { height: 72px; background: rgba(10,10,10,.78); border-color: var(--edge); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 900; font-size: 20px; letter-spacing: -.04em; }
.brand svg { width: 22px; height: 36px; }
.site-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); }
.site-nav ul { display: flex; gap: clamp(22px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.site-nav a { text-decoration: none; font: 400 11px/1 var(--font-data); letter-spacing: .14em; text-transform: uppercase; }
.site-nav a:hover { color: var(--pep-lime); }
.nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 24px; border: 1px solid var(--pep-lime); background: var(--pep-lime); color: var(--carbon) !important; text-decoration: none; font: 500 11px/1 var(--font-data); letter-spacing: .12em; text-transform: uppercase; transition: transform .2s, background .2s; }
.nav-cta:hover, .button:hover { transform: translateY(-2px); background: var(--snow); border-color: var(--snow); }
.button-outline { background: transparent; color: var(--snow) !important; border-color: var(--edge); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 12px 9px; border: 0; background: none; }
.menu-toggle span { display: block; height: 1px; margin: 6px 0; background: var(--snow); transition: .2s; }

.hero { min-height: 100svh; position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; padding: 140px var(--page-pad) 70px; overflow: hidden; }
.hero:before { content: ''; position: absolute; width: 52vw; height: 52vw; right: -14vw; top: 12vh; border: 1px solid rgba(200,255,71,.18); border-radius: 50%; box-shadow: 0 0 150px rgba(200,255,71,.08); }
.hero-copy { position: relative; z-index: 2; }
.kicker, .data-label { margin: 0 0 24px; color: var(--pep-lime); font: 400 11px/1.5 var(--font-data); letter-spacing: .18em; text-transform: uppercase; }
.hero h1, .section-title { margin: 0; max-width: 950px; font-size: clamp(60px, 8.8vw, 148px); font-weight: 900; line-height: .86; letter-spacing: -.065em; text-transform: uppercase; }
.hero h1 em { display: block; color: var(--pep-lime); font-style: normal; }
.hero-copy > p:not(.kicker) { max-width: 570px; margin: 34px 0; color: #bdbdbd; font-size: clamp(16px, 1.3vw, 20px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-vial { position: relative; z-index: 1; display: grid; place-items: center; min-height: 580px; }
.hero-vial svg { width: clamp(200px, 23vw, 360px); height: auto; filter: drop-shadow(0 35px 65px rgba(200,255,71,.18)); animation: float 5s ease-in-out infinite; }
.vial-orbit { position: absolute; width: min(40vw, 560px); aspect-ratio: 1; border: 1px solid var(--edge); border-radius: 50%; animation: spin 22s linear infinite; }
.vial-orbit:before { content: 'FORMULATED WITH PRECISION'; position: absolute; top: 50%; left: -56px; padding: 8px 12px; background: var(--carbon); color: var(--pep-lime); font: 10px var(--font-data); letter-spacing: .14em; }
@keyframes float { 50% { transform: translateY(-22px) rotate(2deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--edge); }
.stat { min-height: 185px; padding: 38px var(--page-pad); border-right: 1px solid var(--edge); }
.stat:last-child { border: 0; }
.stat strong { display: block; margin-bottom: 15px; color: var(--pep-lime); font-size: clamp(34px, 4vw, 64px); line-height: 1; letter-spacing: -.05em; }
.stat span { color: var(--ghost); font: 10px var(--font-data); letter-spacing: .12em; text-transform: uppercase; }

.section { padding: clamp(90px, 12vw, 180px) var(--page-pad); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: clamp(50px, 7vw, 100px); }
.section-title { font-size: clamp(48px, 6.5vw, 104px); }
.section-title span { color: var(--pep-lime); }
.section-note { max-width: 340px; color: var(--ghost); }
.products { background: var(--snow); color: var(--carbon); }
.products .data-label { color: #647f25; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.product-card { min-width: 0; background: #eceee8; color: var(--carbon); transition: transform .25s; }
.product-card:hover { transform: translateY(-8px); }
.product-visual { position: relative; min-height: 360px; display: grid; place-items: center; overflow: hidden; background: #e4e7df; }
.product-visual:after { content: ''; position: absolute; inset: auto 8% 8%; height: 20px; border-radius: 50%; background: rgba(0,0,0,.16); filter: blur(10px); }
.product-visual svg { position: relative; z-index: 1; width: 105px; height: auto; }
.product-index { position: absolute; z-index: 2; top: 20px; left: 20px; font: 10px var(--font-data); }
.product-badge { position: absolute; z-index: 2; top: 16px; right: 16px; padding: 7px 9px; background: var(--pep-lime); font: 9px var(--font-data); letter-spacing: .12em; text-transform: uppercase; }
.product-info { padding: 26px; }
.product-info h3 { margin: 0 0 9px; font-size: 24px; letter-spacing: -.04em; }
.product-info p { min-height: 48px; margin: 0 0 24px; color: #5d5d5d; font-size: 13px; }
.product-meta { display: flex; justify-content: space-between; gap: 15px; padding-top: 18px; border-top: 1px solid #cbd0c4; font: 500 11px var(--font-data); text-transform: uppercase; }

.science { position: relative; }
.process { display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: step; border-top: 1px solid var(--edge); }
.process article { counter-increment: step; min-height: 330px; padding: 30px 28px 30px 0; border-right: 1px solid var(--edge); }
.process article + article { padding-left: 28px; }
.process article:before { content: '0' counter(step); color: var(--pep-lime); font: 11px var(--font-data); }
.process h3 { margin: 110px 0 16px; font-size: 24px; line-height: 1.1; }
.process p { color: var(--ghost); font-size: 14px; }

.testimonials { background: var(--surface); }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quote { min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; padding: 36px; border: 1px solid var(--edge); }
.quote blockquote { margin: 0; font-size: clamp(20px, 2vw, 30px); line-height: 1.25; letter-spacing: -.035em; }
.quote footer { display: flex; justify-content: space-between; color: var(--ghost); font: 10px var(--font-data); letter-spacing: .1em; text-transform: uppercase; }

.cta-banner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; padding: clamp(70px, 9vw, 130px) var(--page-pad); background: var(--pep-lime); color: var(--carbon); }
.cta-banner h2 { max-width: 950px; margin: 0; font-size: clamp(48px, 7vw, 110px); line-height: .88; letter-spacing: -.06em; text-transform: uppercase; }
.cta-banner .button { background: var(--carbon); border-color: var(--carbon); color: var(--snow) !important; }

.site-footer { padding: 80px var(--page-pad) 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 50px; padding-bottom: 80px; }
.footer-intro p { max-width: 330px; color: var(--ghost); }
.footer-col h3 { margin: 4px 0 24px; color: var(--pep-lime); font: 10px var(--font-data); letter-spacing: .16em; text-transform: uppercase; }
.footer-col a { display: block; width: fit-content; margin: 12px 0; color: var(--ghost); text-decoration: none; }
.footer-col a:hover { color: var(--snow); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--edge); color: var(--ghost); font: 9px var(--font-data); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 130px; }
  .hero-vial { min-height: 460px; }
  .vial-orbit { width: 420px; }
  .stats, .product-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--edge); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .process article:nth-child(2) { border-right: 0; }
  .quote-grid { grid-template-columns: 1fr; }
  .quote { min-height: 260px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .footer-intro { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .site-header { height: 70px; }
  .menu-toggle { display: block; position: relative; z-index: 3; }
  .site-nav { position: fixed; inset: 0; display: none; flex-direction: column; justify-content: center; background: var(--carbon); }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; align-items: center; gap: 30px; }
  .site-nav a { font-size: 14px; }
  .hero { padding-top: 110px; }
  .hero h1 { font-size: clamp(56px, 20vw, 92px); }
  .hero-vial { min-height: 380px; }
  .vial-orbit { width: 330px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { min-height: 140px; padding: 28px 20px; }
  .section-head { display: block; }
  .section-note { margin-top: 24px; }
  .product-grid, .process { display: flex; overflow-x: auto; margin-right: calc(var(--page-pad) * -1); padding-right: var(--page-pad); scroll-snap-type: x mandatory; }
  .product-card { min-width: 82vw; scroll-snap-align: start; }
  .process article { min-width: 78vw; border-top: 1px solid var(--edge); scroll-snap-align: start; }
  .cta-banner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-bottom { display: block; line-height: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}