/* ============================================
   SUPERBIO LABS · MASTER STYLESHEET
   Brand system: Bio-Enhanced Humans
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Primary palette */
  --navy-deep: #001450;
  --navy: #0F1F5C;
  --blue-accent: #2864A0;
  --blue-light: #5B9BD5;

  /* Neutrals */
  --paper: #F5F5F0;
  --cream: #EAE6DC;
  --white: #FFFFFF;
  --off-white: #FAFAF7;
  --ink: #0A1628;
  --ink-soft: #3D4858;
  --gray-dark: #5A6573;
  --gray: #8B95A5;
  --gray-light: #C4CCD8;
  --line: #DDE2EA;
  --line-dark: #B8C0CC;

  /* Category colors (sober earth tones) */
  --metabolic: #6B4423;
  --metabolic-bg: #F0E8D8;
  --recovery: #2E5D4A;
  --recovery-bg: #E2E9DF;
  --longevity: #4A5A7E;
  --longevity-bg: #DFE3EB;
  --hormonal: #7A4458;
  --hormonal-bg: #EDE0E5;
  --premium: #5A4A2E;
  --premium-bg: #ECE3CC;

  /* Spacing */
  --container: 1240px;
  --gutter: 28px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color .15s ease; }
img { max-width: 100%; height: auto; display: block; }

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  background: rgba(245, 245, 240, 0.92);
}

.nav-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120px;
  gap: 32px;
}

.nav-brand {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}
.nav-brand img {
  height: 96px;
  width: auto;
  display: block;
}
.nav-brand .acc { color: var(--blue-accent); font-weight: 300; letter-spacing: 4px; }
@media (max-width: 720px) {
  .nav-brand img { height: 76px; }
}
@media (max-width: 480px) {
  .nav-brand img { height: 60px; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
  position: relative;
}
.nav-link:hover { color: var(--navy-deep); }
.nav-link.active { color: var(--navy-deep); }

.nav-right { display: flex; align-items: center; gap: 18px; }

.nav-lang {
  display: flex;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.nav-lang a {
  padding: 4px 7px;
  color: var(--gray);
  border-radius: 2px;
  transition: all .15s ease;
}
.nav-lang a.active {
  background: var(--navy-deep);
  color: white;
}
.nav-lang a:hover:not(.active) { color: var(--ink); }

.nav-cart {
  font-size: 14px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.nav-cart-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  background: var(--blue-accent);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

@media (max-width: 880px) {
  .nav-links {
    position: fixed;
    top: 120px;
    left: 0;
    right: 0;
    background: var(--paper);
    flex-direction: column;
    padding: 20px var(--gutter);
    gap: 16px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    transition: transform .3s ease;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-toggle { display: block; }
}

/* ============================================
   CONTAINER + COMMON
   ============================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 80px 0; }
.section-tight { padding: 50px 0; }

.tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--blue-accent);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
  display: block;
}

h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy-deep);
  letter-spacing: -0.5px;
}

h1 {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 200;
  line-height: 1;
  margin-bottom: 24px;
}
h1 strong { font-weight: 700; }

h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 16px;
}
h2 strong { font-weight: 700; }

h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}

h4 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 720px;
  margin-bottom: 32px;
}

p { font-size: 15px; color: var(--ink-soft); line-height: 1.75; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--navy-deep);
  color: white;
}
.btn-primary:hover {
  background: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 20, 80, 0.15);
}

.btn-outline {
  background: transparent;
  color: var(--navy-deep);
  border-color: var(--navy-deep);
}
.btn-outline:hover {
  background: var(--navy-deep);
  color: white;
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  padding: 10px 20px;
}
.btn-ghost:hover { color: var(--navy-deep); }

.btn-arrow::after {
  content: '→';
  margin-left: 6px;
  transition: transform .2s ease;
}
.btn:hover .btn-arrow::after,
.btn-arrow:hover::after { transform: translateX(4px); }

/* ============================================
   HERO
   ============================================ */
.hero {
  padding: 80px 0 100px;
  background: linear-gradient(135deg, var(--paper) 0%, var(--cream) 100%);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-content { max-width: 600px; }
.hero-content .tag { margin-bottom: 24px; }
.hero-content h1 { color: var(--navy-deep); }
.hero-content h1 strong { display: block; }

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.hero-trust {
  margin-top: 50px;
  display: flex;
  gap: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.trust-item { display: flex; flex-direction: column; gap: 4px; }
.trust-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 600;
  color: var(--blue-accent);
  line-height: 1;
}
.trust-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  color: var(--gray-dark);
  text-transform: uppercase;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.hero-vial-mock {
  width: 280px;
  height: 380px;
  background: linear-gradient(135deg, var(--white) 0%, var(--off-white) 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 24px;
  box-shadow: 0 20px 60px rgba(0, 20, 80, 0.08);
  position: relative;
}

.hero-vial-mock::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 40px;
  background: var(--gray-light);
  border-radius: 4px 4px 0 0;
}

.vial-brand-mark {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.vial-brand-mark .acc { color: var(--blue-accent); font-weight: 300; letter-spacing: 4px; }

.vial-product-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: -0.5px;
  margin-top: 14px;
}

.vial-dose-block {
  background: var(--metabolic);
  color: white;
  padding: 8px 12px;
  border-radius: 3px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 14px;
  align-self: flex-start;
}
.vial-dose-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.vial-dose-unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  margin-top: 4px;
  opacity: 0.8;
}

.vial-bottom-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--gray-dark);
  text-transform: uppercase;
  line-height: 1.7;
}
.vial-bottom-info .strong { color: var(--navy-deep); font-weight: 700; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; }
  .hero-vial-mock { width: 220px; height: 300px; padding: 24px 18px; }
}

/* ============================================
   SECTION HEADER
   ============================================ */
.sec-head { margin-bottom: 50px; }
.sec-head .tag { margin-bottom: 12px; }

/* ============================================
   SERIES GRID (5 categories)
   ============================================ */
.series-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--white);
}

.series-card {
  padding: 36px 28px;
  border-right: 1px solid var(--line);
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  background: var(--white);
}
.series-card:last-child { border-right: none; }
.series-card:hover { background: var(--off-white); }

.series-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cat-color, var(--blue-accent));
}

.series-card[data-cat="metabolic"] { --cat-color: var(--metabolic); }
.series-card[data-cat="recovery"] { --cat-color: var(--recovery); }
.series-card[data-cat="longevity"] { --cat-color: var(--longevity); }
.series-card[data-cat="hormonal"] { --cat-color: var(--hormonal); }
.series-card[data-cat="premium"] { --cat-color: var(--premium); }

.series-cat-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--cat-color);
  font-weight: 500;
  line-height: 1;
}

.series-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.series-products {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--gray-dark);
  letter-spacing: 0.5px;
  line-height: 1.7;
  margin-top: auto;
}

.series-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--cat-color);
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 12px;
}

@media (max-width: 1080px) {
  .series-grid { grid-template-columns: repeat(2, 1fr); }
  .series-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .series-card:nth-child(even) { border-right: none; }
  .series-card:last-child { border-bottom: none; }
}
@media (max-width: 540px) {
  .series-grid { grid-template-columns: 1fr; }
  .series-card { border-right: none !important; }
}

/* ============================================
   FEATURED PRODUCT (Retatrutide banner)
   ============================================ */
.featured-banner {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--blue-accent) 100%);
  color: white;
  padding: 60px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.featured-content .tag {
  color: var(--blue-light);
}

.featured-content h2 { color: white; margin-bottom: 16px; }
.featured-content p { color: rgba(255, 255, 255, 0.85); font-size: 15px; margin-bottom: 24px; }

.featured-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.fstat-item { display: flex; flex-direction: column; gap: 4px; }
.fstat-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  color: white;
  font-weight: 600;
  line-height: 1;
}
.fstat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--blue-light);
  text-transform: uppercase;
}

.featured-banner .btn-primary {
  background: white;
  color: var(--navy-deep);
}
.featured-banner .btn-primary:hover {
  background: var(--cream);
}

.featured-visual {
  display: flex;
  justify-content: center;
}

.featured-visual .vial-mock-mini {
  width: 200px;
  height: 280px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vial-mock-mini .vial-brand-mark { color: rgba(255,255,255,0.95); }
.vial-mock-mini .vial-brand-mark .acc { color: var(--blue-light); }
.vial-mock-mini .vial-product-name { color: white; font-size: 18px; }
.vial-mock-mini .vial-dose-block { background: var(--metabolic); }

@media (max-width: 880px) {
  .featured-banner { grid-template-columns: 1fr; padding: 40px 28px; gap: 24px; }
  .featured-visual { order: -1; }
}

/* ============================================
   SYSTEM EXPLANATION (4 variables)
   ============================================ */
.system-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.system-var {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: 4px;
  position: relative;
}

.system-var-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 36px;
  color: var(--blue-accent);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 16px;
}

.system-var-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.system-var-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 12px;
}

.system-var-weight {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--gray-dark);
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.system-var-weight strong {
  color: var(--blue-accent);
  font-weight: 700;
}

@media (max-width: 880px) {
  .system-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 540px) {
  .system-grid { grid-template-columns: 1fr; }
}

/* ============================================
   QUALITY STANDARDS
   ============================================ */
.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.quality-card {
  text-align: left;
  padding: 32px 0;
}

.quality-icon {
  width: 56px;
  height: 56px;
  background: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 18px;
}

.quality-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.quality-card p {
  font-size: 14px;
}

@media (max-width: 880px) {
  .quality-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.7);
  padding: 60px 0 30px;
  margin-top: 100px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.footer-brand-block .footer-brand-name {
  margin-bottom: 0;
  display: block;
}
.footer-brand-block .footer-brand-name .acc { color: var(--blue-light); font-weight: 300; letter-spacing: 5px; }

.footer-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
}

.footer-disclaimer-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 10px;
  display: inline-block;
  border-radius: 2px;
}

.footer-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--blue-light);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; }
.footer-col li { padding: 5px 0; }
.footer-col a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.footer-col a:hover { color: white; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   PRODUCT PAGE
   ============================================ */
.breadcrumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gray);
  padding: 24px 0;
}
.breadcrumb a:hover { color: var(--navy-deep); }
.breadcrumb .sep { padding: 0 8px; color: var(--gray-light); }

.product-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 30px 0 60px;
  align-items: start;
}

.product-img {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 60px;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-img .vial-mock-large {
  width: 260px;
  height: 360px;
  background: linear-gradient(135deg, var(--white) 0%, var(--off-white) 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 30px rgba(0, 20, 80, 0.06);
  position: relative;
}
.product-img .vial-mock-large::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 36px;
  background: var(--gray-light);
  border-radius: 4px 4px 0 0;
}

.product-info .cat-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cat-color, var(--blue-accent));
  font-weight: 600;
  margin-bottom: 14px;
}

.product-info h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}

.product-info .subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--gray-dark);
  margin-bottom: 28px;
}

.product-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  margin-bottom: 32px;
}
.pstat {
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  text-align: center;
  background: var(--white);
}
.pstat:last-child { border-right: none; }
.pstat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pstat-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-deep);
}

.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
}
.product-price .amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: -1px;
}
.product-price .currency {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--gray);
  letter-spacing: 1px;
}

.product-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.product-meta {
  display: flex;
  gap: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--gray-dark);
  text-transform: uppercase;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.product-meta strong { color: var(--navy-deep); font-weight: 600; }

.product-section {
  padding: 50px 0;
  border-top: 1px solid var(--line);
}

.product-section h2 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 24px;
}

.product-desc {
  max-width: 760px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.product-desc p { margin-bottom: 16px; }
.product-desc strong { color: var(--navy-deep); font-weight: 600; }
.product-desc em { color: var(--ink); font-style: italic; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
}
.spec-table td {
  padding: 13px 22px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: top;
}
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray-dark);
  background: var(--off-white);
  width: 38%;
  font-weight: 500;
}
.spec-table td:last-child { color: var(--ink); font-weight: 500; }

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 10px;
}
.faq-a {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.related-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 24px;
  border-radius: 4px;
  transition: all .2s ease;
  border-left: 3px solid var(--cat-color, var(--blue-accent));
}
.related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 20, 80, 0.06);
}
.related-card .cat-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cat-color, var(--blue-accent));
  font-weight: 600;
  margin-bottom: 8px;
}
.related-card h4 {
  font-size: 18px;
  margin-bottom: 6px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-transform: none;
}
.related-card .related-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--gray-dark);
  margin-top: 10px;
}

@media (max-width: 880px) {
  .product-hero { grid-template-columns: 1fr; gap: 40px; }
  .product-img { padding: 40px; min-height: 400px; }
  .product-stats { grid-template-columns: 1fr 1fr; }
  .product-stats .pstat:nth-child(2) { border-right: none; }
  .product-stats .pstat:nth-child(1), .product-stats .pstat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .related-grid { grid-template-columns: 1fr; }
}

/* ============================================
   LEGAL PAGES
   ============================================ */
.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 0 80px;
}

.legal-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.legal-page h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 24px;
}

.legal-page h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy-deep);
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.legal-page h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 24px 0 10px;
}

.legal-page p {
  font-size: 14.5px;
  margin-bottom: 14px;
  line-height: 1.85;
}
.legal-page p strong { color: var(--navy-deep); font-weight: 600; }

.legal-page ul {
  margin: 8px 0 16px 24px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.legal-page li {
  margin-bottom: 8px;
  line-height: 1.7;
}

/* ============================================
   404
   ============================================ */
.error-page {
  text-align: center;
  padding: 100px 0;
}
.error-page .error-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 120px;
  color: var(--blue-accent);
  font-weight: 500;
  line-height: 1;
}
.error-page h1 {
  font-size: 32px;
  margin: 16px 0 12px;
  font-weight: 700;
}
.error-page p {
  font-size: 16px;
  margin-bottom: 28px;
}

/* ============================================
   REAL VIAL PHOTO (replaces CSS mock)
   ============================================ */
.vial-photo {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 30px 60px rgba(0, 20, 80, 0.25));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vial-photo:hover {
  transform: translateY(-6px);
}
.vial-photo-md {
  max-width: 220px;
}
.vial-photo-sm {
  max-width: 150px;
}
.vial-photo-frame {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
  border-radius: 8px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero adjustments when using real photo */
.hero-visual.with-real-photo {
  position: relative;
}
.hero-visual.with-real-photo::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(0, 20, 80, 0.15) 0%, transparent 60%);
  filter: blur(12px);
  z-index: -1;
}

/* Featured banner with real vial */
.featured-visual.with-real-photo .vial-photo {
  max-width: 200px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

/* Product page real vial */
.product-img.with-real-photo {
  background: linear-gradient(135deg, #050508 0%, #0A1628 100%);
  border: none;
  padding: 40px;
}
.product-img.with-real-photo .vial-photo {
  max-width: 360px;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5));
}

/* ============================================
   FOOTER LOGO (navy logo on dark bg → invert to light)
   ============================================ */
.footer-brand-name {
  margin-bottom: 14px;
}
.footer-logo-img {
  height: 48px;
  width: auto;
  display: block;
  /* Invert the navy logo so it shows light on dark navy footer */
  filter: brightness(0) invert(1) opacity(0.92);
  transition: opacity 0.2s ease;
}
.footer-logo-img:hover { opacity: 1; }

@media (max-width: 880px) {
  .hero-visual.with-real-photo { min-height: 360px; }
  .hero-visual.with-real-photo .vial-photo { max-width: 240px; }
  .product-img.with-real-photo { padding: 30px; min-height: 400px; }
  .product-img.with-real-photo .vial-photo { max-width: 260px; }
}

/* ============================================
   VIAL PHOTOS (transparent PNG, floating on light bg)
   ============================================ */
.vial-photo {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 20px 40px rgba(0, 20, 80, 0.18));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vial-photo:hover {
  transform: translateY(-6px);
}
.vial-photo-md { max-width: 220px; }
.vial-photo-sm { max-width: 150px; }

/* Hero visual - clean, no backdrop */
.hero-visual.with-real-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  position: relative;
}
.hero-visual.with-real-photo .vial-photo {
  max-width: 190px;
  filter: drop-shadow(0 30px 50px rgba(0, 20, 80, 0.2));
  animation: float 6s ease-in-out infinite;
}

/* Featured banner has navy bg already - photo floats with subtle white glow */
.featured-visual.with-real-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured-visual.with-real-photo .vial-photo {
  max-width: 220px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

/* Product page - clean white-ish bg, vial floats elegantly */
.product-img.with-real-photo {
  background: linear-gradient(135deg, var(--white) 0%, var(--off-white) 100%);
  border: 1px solid var(--line);
  padding: 50px;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-img.with-real-photo .vial-photo {
  max-width: 190px;
  filter: drop-shadow(0 30px 50px rgba(0, 20, 80, 0.18));
}

/* Footer logo (navy logo on dark navy bg → invert to white) */
.footer-brand-name {
  margin-bottom: 14px;
}
.footer-logo-img {
  height: 192px;
  width: auto;
  display: block;
}
@media (max-width: 880px) {
  .footer-logo-img { height: 144px; }
}
@media (max-width: 540px) {
  .footer-logo-img { height: 110px; }
}

@media (max-width: 880px) {
  .hero-visual.with-real-photo { min-height: 360px; }
  .hero-visual.with-real-photo .vial-photo { max-width: 260px; }
  .product-img.with-real-photo { padding: 30px; min-height: 400px; }
  .product-img.with-real-photo .vial-photo { max-width: 160px; }
}


/* ============================================
   DYNAMIC ANIMATIONS LAYER · 2026
   ============================================ */

/* Floating animation for hero vial */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(1deg); }
}

/* Smooth fade-in on page load */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Hero entrance animations */
.hero-content > * {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-content .tag { animation-delay: 0.1s; }
.hero-content h1 { animation-delay: 0.2s; }
.hero-content .lead { animation-delay: 0.4s; }
.hero-content .hero-actions { animation-delay: 0.55s; }
.hero-content .hero-trust { animation-delay: 0.7s; }

.hero-visual {
  opacity: 0;
  animation: scaleIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

/* Animated gradient background overlay on hero */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(40, 100, 160, 0.08) 0%, transparent 40%),
              radial-gradient(circle at 70% 30%, rgba(91, 155, 213, 0.06) 0%, transparent 40%);
  animation: gradientShift 18s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.hero > .container { position: relative; z-index: 1; }

@keyframes gradientShift {
  0%, 100% { transform: translate(0%, 0%) rotate(0deg); }
  33% { transform: translate(2%, -2%) rotate(1deg); }
  66% { transform: translate(-1%, 2%) rotate(-1deg); }
}

/* Floating particles in hero */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-particles span {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  background: var(--blue-accent);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 12s linear infinite;
}

.hero-particles span:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 14s; }
.hero-particles span:nth-child(2) { left: 25%; animation-delay: 2s; animation-duration: 16s; width: 3px; height: 3px; }
.hero-particles span:nth-child(3) { left: 45%; animation-delay: 4s; animation-duration: 13s; width: 5px; height: 5px; }
.hero-particles span:nth-child(4) { left: 65%; animation-delay: 1s; animation-duration: 17s; }
.hero-particles span:nth-child(5) { left: 80%; animation-delay: 3s; animation-duration: 15s; width: 3px; height: 3px; background: var(--blue-light); }
.hero-particles span:nth-child(6) { left: 92%; animation-delay: 5s; animation-duration: 14s; }
.hero-particles span:nth-child(7) { left: 15%; animation-delay: 6s; animation-duration: 18s; width: 6px; height: 6px; background: var(--blue-light); }
.hero-particles span:nth-child(8) { left: 55%; animation-delay: 7s; animation-duration: 13s; }

@keyframes particleFloat {
  0% {
    bottom: -10px;
    opacity: 0;
    transform: translateX(0);
  }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% {
    bottom: 100%;
    opacity: 0;
    transform: translateX(40px);
  }
}

/* Reveal on scroll - applied via IntersectionObserver in JS */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger for grid children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.reveal-stagger.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
.reveal-stagger.visible > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }
.reveal-stagger.visible > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }

/* Series cards - magnetic hover effect */
.series-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              background 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.series-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              var(--cat-color, var(--blue-accent)) 0%, transparent 40%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.series-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 20, 80, 0.12);
  z-index: 2;
}

.series-card:hover::after {
  opacity: 0.06;
}

.series-card .series-cat-num {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.3s ease;
}

.series-card:hover .series-cat-num {
  transform: translateY(-4px) scale(1.1);
}

.series-card .series-link {
  transition: gap 0.3s ease;
  display: inline-block;
}

/* System variable cards - lift on hover */
.system-var {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.system-var::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--blue-accent), transparent);
  transition: left 0.6s ease;
}

.system-var:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 20, 80, 0.1);
  border-color: var(--blue-accent);
}

.system-var:hover::before {
  left: 100%;
}

.system-var:hover .system-var-num {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}

/* Quality cards - icon rotates on hover */
.quality-card {
  transition: transform 0.4s ease;
}
.quality-card:hover { transform: translateY(-4px); }
.quality-card .quality-icon {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease;
}
.quality-card:hover .quality-icon {
  transform: rotate(360deg) scale(1.1);
  background: var(--blue-accent);
  color: white;
}

/* Buttons - shimmer effect */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transition: left 0.7s ease;
}
.btn-primary:hover::before {
  left: 100%;
}

/* Featured banner - subtle parallax dots */
.featured-banner {
  position: relative;
  overflow: hidden;
}
.featured-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: 0 0;
  opacity: 0.5;
  animation: dotsMove 30s linear infinite;
  pointer-events: none;
}
@keyframes dotsMove {
  0% { background-position: 0 0; }
  100% { background-position: 30px 30px; }
}

/* Trust numbers - count-up animation will be triggered by JS */
.trust-num, .fstat-num, .pstat-value {
  display: inline-block;
}

/* Counter pulse on appear */
.trust-item {
  transition: transform 0.3s ease;
}
.trust-item:hover {
  transform: translateY(-2px);
}
.trust-item:hover .trust-num {
  color: var(--navy-deep);
  transition: color 0.3s ease;
}

/* Navbar - subtle scroll effect */
.navbar {
  transition: background 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}
.navbar.scrolled {
  background: rgba(245, 245, 240, 0.96);
  box-shadow: 0 4px 20px rgba(0, 20, 80, 0.06);
}
.navbar.scrolled .nav-container {
  height: 88px;
  transition: height 0.3s ease;
}
.navbar.scrolled .nav-brand img {
  height: 70px;
  transition: height 0.3s ease;
}

/* Nav links underline animation */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--blue-accent);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Product cards lift */
.related-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease !important;
}
.related-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 20, 80, 0.1);
}

/* Image hover zoom on product page */
.product-img.with-real-photo .vial-photo {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.product-img.with-real-photo:hover .vial-photo {
  transform: scale(1.06) translateY(-4px);
}

/* Smooth scroll for anchors */
html { scroll-behavior: smooth; }

/* Reduce motion respected */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-visual.with-real-photo .vial-photo { animation: none; }
}

/* Mobile - simpler animations */
@media (max-width: 720px) {
  .hero-visual.with-real-photo .vial-photo { animation: none; }
  .series-card:hover { transform: translateY(-4px); }
}

/* ============================================
   KIT COMPLETO SECTION
   ============================================ */
.section-kit {
  background: linear-gradient(135deg, var(--off-white) 0%, var(--paper) 100%);
  position: relative;
}

.section-kit::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(40, 100, 160, 0.04) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(91, 155, 213, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.section-kit > .container { position: relative; z-index: 1; }

.kit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 60px;
  margin-bottom: 60px;
}

.kit-item {
  background: white;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 36px 32px;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
}

.kit-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--blue-accent);
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.kit-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 20, 80, 0.08);
  border-color: var(--blue-accent);
}

/* OLD buggy rule disabled - was filling whole card blue */
.kit-item:hover::before {
  height: 4px;
}

.kit-icon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-accent);
  letter-spacing: 2px;
  margin-bottom: 20px;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(40, 100, 160, 0.08);
  border-radius: 2px;
}

.kit-item h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}

.kit-item p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}

.kit-cta {
  text-align: center;
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid var(--line);
}

.kit-promise {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-style: italic;
  color: var(--navy-deep);
  margin-bottom: 32px;
  font-weight: 400;
  letter-spacing: 0;
}

@media (max-width: 880px) {
  .kit-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 540px) {
  .kit-grid { grid-template-columns: 1fr; }
  .kit-promise { font-size: 20px; }
}

/* ============================================
   PAGE HERO (sobre, calidad, etc.)
   ============================================ */
.page-hero {
  padding: 120px 0 80px;
  background: linear-gradient(135deg, var(--paper) 0%, var(--off-white) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 30% 40%, rgba(40, 100, 160, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.page-hero > .container { position: relative; z-index: 1; }

.page-hero .tag { margin-bottom: 24px; display: inline-block; }

.page-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 28px;
}

.page-hero h1 strong {
  font-weight: 700;
}

.page-hero .lead {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ============================================
   PHILOSOPHY GRID
   ============================================ */
.philo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.philo-block {
  position: relative;
  padding-left: 0;
}

.philo-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue-accent);
  letter-spacing: 3px;
  display: block;
  margin-bottom: 14px;
}

.philo-block h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 14px;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.philo-block p {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}

@media (max-width: 720px) {
  .philo-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   SECTION DARK (navy bg)
   ============================================ */
.section-dark {
  background: var(--navy-deep);
  color: white;
  position: relative;
  overflow: hidden;
}

.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(91, 155, 213, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.section-dark > .container { position: relative; z-index: 1; }

.section-dark .tag { color: var(--blue-light); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
}

.why-block {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(91, 155, 213, 0.2);
  padding: 32px 28px;
  border-radius: 0;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s ease;
}

.why-block:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--blue-light);
  transform: translateY(-4px);
}

.why-block h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue-light);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.why-block p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
}

@media (max-width: 720px) {
  .why-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================
   BIG CTA
   ============================================ */
.big-cta {
  text-align: center;
  padding: 80px 32px;
  background: linear-gradient(135deg, var(--paper) 0%, var(--off-white) 100%);
  border: 1px solid var(--line);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.big-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 100%, rgba(40, 100, 160, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.big-cta > * { position: relative; z-index: 1; }

.big-cta h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -0.8px;
  margin-bottom: 18px;
  line-height: 1.2;
}

.big-cta .lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 36px;
}

/* ============================================
   HERO CORPORATE IMAGE (replaces lone vial)
   ============================================ */
.hero-corporate-img {
  width: 100%;
  max-width: 580px;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 20, 80, 0.18),
              0 10px 30px rgba(0, 20, 80, 0.08);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.6s ease;
  filter: brightness(1.02) contrast(1.02);
}

.hero-corporate-img:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 40px 100px rgba(0, 20, 80, 0.25),
              0 15px 40px rgba(0, 20, 80, 0.12);
}

.hero-visual.with-real-photo {
  min-height: auto !important;
  perspective: 1200px;
}

.hero-visual.with-real-photo picture {
  display: block;
  animation: heroImageEntrance 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@keyframes heroImageEntrance {
  from {
    opacity: 0;
    transform: rotateY(-8deg) translateY(40px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: rotateY(0) translateY(0) scale(1);
  }
}

/* ============================================
   BRAND VISUAL STRIP (after hero)
   ============================================ */
.brand-strip {
  padding: 80px 0 60px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--off-white) 100%);
  overflow: hidden;
  position: relative;
}

.container-wide {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.strip-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  cursor: pointer;
  background: var(--navy-deep);
}

.strip-item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.5s ease;
  filter: brightness(0.92) contrast(1.05);
}

.strip-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 20, 80, 0.85) 100%);
  z-index: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.strip-item figcaption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 2;
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
  transform: translateY(8px);
  opacity: 0.85;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease;
}

.strip-item:hover img {
  transform: scale(1.08);
  filter: brightness(1) contrast(1.1);
}

.strip-item:hover figcaption {
  transform: translateY(0);
  opacity: 1;
}

/* Marquee strip */
.strip-marquee {
  background: var(--navy-deep);
  overflow: hidden;
  padding: 28px 0;
  margin: 0 calc(-1 * var(--gutter));
  position: relative;
}

.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 35s linear infinite;
  gap: 32px;
  align-items: center;
}

.marquee-track span {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 200;
  letter-spacing: 8px;
  color: white;
  text-transform: uppercase;
}

.marquee-track span:nth-child(even) {
  color: var(--blue-light);
  font-size: 24px;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 880px) {
  .strip-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .strip-item img { height: 200px; }
  .marquee-track span { font-size: 22px; letter-spacing: 4px; }
  .marquee-track span:nth-child(even) { font-size: 18px; }
}

@media (max-width: 540px) {
  .strip-grid { grid-template-columns: 1fr 1fr; }
  .strip-item img { height: 160px; }
}

/* ============================================
   KIT FEATURE IMAGE (top of kit section)
   ============================================ */
.kit-feature-img {
  margin: 0 -32px 60px;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 21 / 9;
  max-height: 460px;
}

.kit-feature-img picture {
  display: block;
  width: 100%;
  height: 100%;
}

.kit-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.kit-feature-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 20, 80, 0.3) 0%, transparent 50%);
  pointer-events: none;
}

.section-kit:hover .kit-feature-img img {
  transform: scale(1.04);
}

@media (max-width: 880px) {
  .kit-feature-img { margin: 0 -16px 40px; aspect-ratio: 16 / 10; }
}

/* ============================================
   EDUCATIONAL PAGE STYLES (Péptidos 101)
   ============================================ */
.container-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.edu-hero {
  padding: 120px 0 80px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--off-white) 100%);
  position: relative;
  overflow: hidden;
}

.edu-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(40, 100, 160, 0.06) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(91, 155, 213, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.edu-hero > .container { position: relative; z-index: 1; }

.edu-hero .tag { margin-bottom: 24px; display: inline-block; }

.edu-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 32px;
  max-width: 900px;
}

.edu-hero h1 strong { font-weight: 700; }

.edu-hero .lead {
  max-width: 720px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 60px;
}

.edu-toc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 900px;
  margin-top: 40px;
}

.toc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: white;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--navy-deep);
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 2px;
}

.toc-item span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--blue-accent);
  font-weight: 500;
  letter-spacing: 1px;
}

.toc-item:hover {
  border-color: var(--blue-accent);
  background: var(--blue-accent);
  color: white;
  transform: translateX(4px);
}

.toc-item:hover span { color: white; }

@media (max-width: 720px) {
  .edu-toc { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .edu-toc { grid-template-columns: 1fr; }
}

/* Sections */
.edu-section {
  padding: 100px 0;
  position: relative;
  scroll-margin-top: 120px;
}

.edu-section-alt {
  background: var(--off-white);
}

.edu-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 5px;
  color: var(--blue-accent);
  font-weight: 500;
  margin-bottom: 24px;
  display: inline-block;
}

.edu-section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1.2px;
  line-height: 1.15;
  margin-bottom: 32px;
}

.edu-section h2 strong { font-weight: 700; }

.edu-section h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 48px 0 20px;
  letter-spacing: -0.3px;
}

.edu-section h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 12px;
}

.edu-section p {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 24px;
}

.edu-section p strong { color: var(--navy-deep); font-weight: 600; }

.edu-section em {
  font-style: italic;
  color: var(--ink-soft);
}

.edu-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.edu-list li {
  padding: 14px 0 14px 32px;
  position: relative;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.65;
  border-bottom: 1px solid var(--line);
}

.edu-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--blue-accent);
  font-weight: 600;
}

.edu-numbered-list {
  counter-reset: edu-counter;
  list-style: none;
  padding: 0;
}

.edu-numbered-list li {
  counter-increment: edu-counter;
  padding: 16px 0 16px 50px;
  position: relative;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  border-bottom: 1px solid var(--line);
}

.edu-numbered-list li::before {
  content: counter(edu-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--blue-accent);
  font-weight: 500;
  letter-spacing: 1px;
}

.edu-callout {
  background: white;
  border-left: 4px solid var(--blue-accent);
  padding: 28px 32px;
  margin: 40px 0;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 20, 80, 0.04);
}

.edu-callout-warn {
  border-left-color: #C97E3F;
  background: #FFF8F0;
}

.edu-callout-info {
  border-left-color: var(--blue-light);
  background: #F4F8FC;
}

.callout-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 38px;
  font-weight: 200;
  color: var(--blue-accent);
  line-height: 1;
  flex-shrink: 0;
}

.callout-text strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 4px;
}

.callout-text p {
  margin: 0;
  font-size: 15px;
}

.edu-callout > strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.edu-callout > p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
}

/* Mechanism (5 steps) */
.edu-mechanism {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 40px 0;
}

.mech-step {
  background: white;
  border: 1px solid var(--line);
  padding: 24px 20px;
  border-radius: 2px;
  position: relative;
  transition: all 0.4s ease;
}

.mech-step:hover {
  transform: translateY(-4px);
  border-color: var(--blue-accent);
  box-shadow: 0 12px 32px rgba(0, 20, 80, 0.08);
}

.mech-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 200;
  color: var(--blue-accent);
  margin-bottom: 12px;
  line-height: 1;
}

.mech-step h4 {
  font-size: 14px;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.mech-step p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* Categories grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

.cat-card {
  background: white;
  border: 1px solid var(--line);
  padding: 32px 28px;
  position: relative;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cat-card[data-cat="metabolic"]::before { background: #6B4423; }
.cat-card[data-cat="recovery"]::before { background: #2E5D4A; }
.cat-card[data-cat="longevity"]::before { background: #4A5A7E; }
.cat-card[data-cat="hormonal"]::before { background: #7A4458; }
.cat-card[data-cat="premium"]::before { background: #5A4A2E; }

.cat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 20, 80, 0.1);
}

.cat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--blue-accent);
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
}

.cat-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
}

.cat-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--blue-accent);
  margin-bottom: 16px;
}

.cat-products {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Zones */
.edu-zones { margin: 40px 0; }

.zone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 24px 0 16px;
}

.zone-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: white;
  border: 1px solid var(--line);
  font-size: 15px;
  color: var(--navy-deep);
  font-weight: 500;
  border-radius: 2px;
}

.zone-item span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--blue-accent);
  letter-spacing: 1px;
}

.zone-note {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 12px;
}

/* Formula */
.edu-formula {
  background: var(--navy-deep);
  color: white;
  padding: 32px;
  margin: 32px 0;
  border-radius: 2px;
}

.formula-line {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.formula-line span {
  color: white;
  background: rgba(91, 155, 213, 0.2);
  padding: 8px 14px;
  border-radius: 2px;
  font-weight: 500;
}

.formula-example {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  padding-top: 20px;
  border-top: 1px solid rgba(91, 155, 213, 0.3);
}

.formula-example strong { color: var(--blue-light); }

/* Safety pillars */
.safety-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
}

.pillar {
  background: white;
  padding: 32px 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.4s ease;
}

.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 20, 80, 0.08);
  border-color: var(--blue-accent);
}

.pillar-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 56px;
  font-weight: 200;
  color: var(--blue-accent);
  line-height: 1;
  margin-bottom: 12px;
}

.pillar h3 { margin: 8px 0 12px; font-size: 18px; }
.pillar p { font-size: 14.5px; line-height: 1.65; margin: 0; }

@media (max-width: 720px) {
  .safety-pillars { grid-template-columns: 1fr; }
  .zone-grid { grid-template-columns: 1fr; }
}

/* Storage cards */
.storage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 40px 0;
}

.storage-card {
  background: white;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.storage-card:hover {
  border-color: var(--blue-accent);
  transform: translateY(-2px);
}

.storage-card h4 {
  font-size: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.storage-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.storage-card li {
  font-size: 14px;
  color: var(--ink-soft);
  padding: 8px 0;
  line-height: 1.55;
}

.storage-card li strong { color: var(--navy-deep); }

@media (max-width: 720px) {
  .storage-grid { grid-template-columns: 1fr; }
}

/* Cycle timeline */
.cycle-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 40px 0;
  position: relative;
  padding-left: 32px;
}

.cycle-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue-accent), transparent);
}

.timeline-block {
  background: white;
  border: 1px solid var(--line);
  padding: 24px 28px;
  margin-bottom: 16px;
  border-radius: 2px;
  position: relative;
  transition: all 0.3s ease;
}

.timeline-block::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 32px;
  width: 12px;
  height: 12px;
  background: var(--blue-accent);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px var(--blue-accent);
}

.timeline-block:hover {
  transform: translateX(8px);
  border-color: var(--blue-accent);
}

.t-num {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--blue-accent);
  font-weight: 500;
  margin-bottom: 6px;
}

.timeline-block h4 { margin: 4px 0 8px; font-size: 18px; }
.timeline-block p { margin: 0; font-size: 14.5px; }

/* Effects split */
.effects-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 40px 0;
}

.effects-col {
  background: white;
  padding: 28px;
  border-radius: 2px;
  border: 1px solid var(--line);
}

.effects-col.effects-normal { border-left: 4px solid #4D8B4F; }
.effects-col.effects-warn { border-left: 4px solid #C97E3F; background: #FFFAF5; }

.effects-col h3 {
  font-size: 17px;
  margin: 0 0 16px;
  letter-spacing: 0.3px;
}

.effects-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.effects-col li {
  padding: 8px 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.effects-col li:last-child { border: none; }

@media (max-width: 720px) {
  .effects-split { grid-template-columns: 1fr; }
}

/* Glossary */
.glossary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 40px 0;
}

.g-item {
  background: white;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.g-item:hover {
  transform: translateY(-3px);
  border-color: var(--blue-accent);
  box-shadow: 0 8px 24px rgba(0, 20, 80, 0.06);
}

.g-item dt {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.g-item dd {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 720px) {
  .glossary { grid-template-columns: 1fr; }
}

/* FAQ */
.faq-list {
  margin: 40px 0;
}

.faq-item {
  background: white;
  border: 1px solid var(--line);
  margin-bottom: 12px;
  border-radius: 2px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item[open] {
  border-color: var(--blue-accent);
  box-shadow: 0 8px 24px rgba(0, 20, 80, 0.06);
}

.faq-item summary {
  padding: 22px 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-deep);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  letter-spacing: -0.1px;
  transition: all 0.3s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 200;
  color: var(--blue-accent);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
  content: '−';
  transform: rotate(0deg);
}

.faq-item summary:hover {
  background: var(--off-white);
}

.faq-item p {
  padding: 0 28px 24px;
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* CTA Final */
.edu-cta {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--navy-deep) 0%, #001a5e 100%);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.edu-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 0%, rgba(91, 155, 213, 0.2) 0%, transparent 60%);
  pointer-events: none;
}

.edu-cta > .container { position: relative; z-index: 1; }

.edu-cta h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 200;
  color: white;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 24px;
}

.edu-cta .lead {
  max-width: 720px;
  margin: 0 auto 40px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.edu-cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.edu-cta-actions .btn-outline {
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
}

.edu-cta-actions .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

/* ============================================
   ABOUT PAGE STYLES (/sobre/ + /about/)
   ============================================ */

/* HERO with corporate image background */
.about-hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding: 160px 0 100px;
  overflow: hidden;
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-hero-bg picture,
.about-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 20, 80, 0.92) 0%, rgba(0, 20, 80, 0.65) 60%, rgba(0, 20, 80, 0.4) 100%);
  z-index: 1;
}

.about-hero > .container {
  position: relative;
  z-index: 2;
}

.about-hero-content {
  max-width: 820px;
}

.about-hero-content .tag {
  color: var(--blue-light);
  margin-bottom: 28px;
  display: inline-block;
}

.about-hero-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(44px, 6.5vw, 78px);
  font-weight: 200;
  color: white;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 32px;
}

.about-hero-content h1 strong { font-weight: 700; }

.about-hero-content .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  max-width: 720px;
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .about-hero { min-height: 500px; padding: 120px 0 80px; }
  .about-hero-content .lead { font-size: 19px; }
}

/* About sections */
.about-section {
  padding: 110px 0;
  position: relative;
}

.about-section-alt {
  background: var(--off-white);
}

.about-section-dark {
  background: linear-gradient(135deg, var(--navy-deep) 0%, #001a5e 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.about-section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 30% 50%, rgba(91, 155, 213, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.about-section-dark > .container { position: relative; z-index: 1; }

.about-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 5px;
  color: var(--blue-accent);
  font-weight: 500;
  margin-bottom: 24px;
  display: inline-block;
}

.about-section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 32px;
}

.about-section h2 strong { font-weight: 700; }

.about-section p {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 24px;
}

.about-section p strong { color: var(--navy-deep); font-weight: 600; }

.about-section em {
  font-style: italic;
  color: var(--ink-soft);
}

.about-quote {
  margin: 56px 0 24px;
  padding: 40px 48px;
  background: white;
  border-left: 4px solid var(--blue-accent);
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  color: var(--navy-deep);
  line-height: 1.5;
  border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0, 20, 80, 0.06);
  position: relative;
}

.about-quote::before {
  content: '"';
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 80px;
  font-family: 'Cormorant Garamond', serif;
  color: var(--blue-light);
  line-height: 1;
  opacity: 0.4;
  font-weight: 600;
}

.about-quote em { color: var(--navy-deep); }

@media (max-width: 720px) {
  .about-quote { padding: 28px 24px; font-size: 21px; }
}

/* Philosophy grid (4 principles A/B/C/D) */
.philo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.philo-block {
  background: white;
  padding: 40px 36px;
  border: 1px solid var(--line);
  border-radius: 2px;
  position: relative;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.philo-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue-light));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.philo-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 20, 80, 0.1);
  border-color: var(--blue-accent);
}

.philo-block:hover::before {
  width: 100%;
}

.philo-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 64px;
  font-weight: 200;
  color: var(--blue-accent);
  line-height: 1;
  display: inline-block;
  margin-bottom: 20px;
  letter-spacing: -2px;
}

.philo-block h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 16px;
  letter-spacing: -0.3px;
}

.philo-block p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .philo-grid { grid-template-columns: 1fr; gap: 16px; }
  .philo-block { padding: 32px 28px; }
  .philo-num { font-size: 52px; }
}

/* Why grid (Before/During/After) */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.why-block {
  background: white;
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: 2px;
  border-top: 4px solid var(--blue-accent);
  transition: all 0.4s ease;
}

.why-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 20, 80, 0.08);
}

.why-block h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 16px;
  letter-spacing: -0.2px;
}

.why-block p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.why-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.why-block li {
  font-size: 13.5px;
  color: var(--ink-soft);
  padding: 6px 0 6px 18px;
  position: relative;
}

.why-block li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--blue-accent);
  font-weight: 600;
}

@media (max-width: 880px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* Visual full-width */
.about-visual {
  position: relative;
  width: 100%;
  height: 540px;
  overflow: hidden;
}

.about-visual picture,
.about-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-visual:hover img {
  transform: scale(1.05);
}

.about-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 20, 80, 0.2) 0%, transparent 60%);
  pointer-events: none;
}

.about-visual-caption {
  position: absolute;
  bottom: 32px;
  left: 32px;
  z-index: 2;
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 12px 18px;
  background: rgba(0, 20, 80, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 2px;
}

@media (max-width: 720px) {
  .about-visual { height: 360px; }
  .about-visual-caption { bottom: 16px; left: 16px; font-size: 10px; padding: 10px 14px; }
}

/* About split (image + text side by side) */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
  background: white;
}

.about-split-img {
  position: relative;
  overflow: hidden;
  background: var(--off-white);
}

.about-split-img picture,
.about-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s ease;
}

.about-split:hover .about-split-img img {
  transform: scale(1.04);
}

.about-split-text {
  padding: 100px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
}

.about-split-text .tag {
  color: var(--blue-accent);
  margin-bottom: 20px;
  display: inline-block;
}

.about-split-text h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 24px;
}

.about-split-text h2 strong { font-weight: 700; }

.about-split-text p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 28px;
}

.about-list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.about-list li {
  padding: 12px 0 12px 28px;
  position: relative;
  font-size: 15px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

.about-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--blue-accent);
  font-weight: 600;
}

@media (max-width: 880px) {
  .about-split { grid-template-columns: 1fr; min-height: auto; }
  .about-split-img { height: 360px; }
  .about-split-text { padding: 60px 32px; }
}

/* Metrics grid (dark section) */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 60px;
}

.metric {
  text-align: center;
  padding: 32px 16px;
  border: 1px solid rgba(91, 155, 213, 0.2);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
}

.metric:hover {
  background: rgba(91, 155, 213, 0.08);
  transform: translateY(-4px);
  border-color: var(--blue-light);
}

.m-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 56px;
  font-weight: 200;
  color: var(--blue-light);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -1.5px;
}

.m-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: white;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.metric p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 880px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .m-num { font-size: 44px; }
}

@media (max-width: 480px) {
  .metrics-grid { grid-template-columns: 1fr 1fr; }
}

/* Entity grid */
.entity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 40px 0;
}

.entity-block {
  background: white;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.entity-block:hover {
  border-color: var(--blue-accent);
  transform: translateY(-2px);
}

.entity-block h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-accent);
  margin: 0 0 8px;
  font-weight: 500;
}

.entity-block p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-deep);
  font-family: 'Montserrat', sans-serif;
}

@media (max-width: 720px) {
  .entity-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Big CTA */
.big-cta-section {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--navy-deep) 0%, #001a5e 100%);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.big-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(91, 155, 213, 0.2) 0%, transparent 60%);
  pointer-events: none;
}

.big-cta {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.big-cta h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 200;
  color: white;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 24px;
}

.big-cta .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin-bottom: 40px;
}

.big-cta .cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.big-cta .btn-outline {
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
}

.big-cta .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

/* ============================================
   CINEMATIC LAYER (animations, reveals, transitions)
   ============================================ */

/* Reveal animations */
.reveal,
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible,
.reveal-stagger > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Page load fade-in */
body { opacity: 0; transition: opacity 0.6s ease; }
body.page-loaded { opacity: 1; }

/* Navbar scroll state */
.navbar {
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}

.navbar.navbar-scrolled {
  background: rgba(245, 245, 240, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 24px rgba(0, 20, 80, 0.08);
}

/* Magnetic transition on interactive */
.btn, .nav-link, .toc-item, .strip-item {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Parallax containers need to be set up properly */
.about-hero-bg,
.about-visual picture {
  will-change: transform;
}

/* Smooth scroll for whole page */
html { scroll-behavior: smooth; }

/* Global cinematic refinements */
img { -webkit-user-drag: none; user-select: none; }

/* Selection color */
::selection {
  background: var(--blue-accent);
  color: white;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--off-white); }
::-webkit-scrollbar-thumb { background: var(--blue-accent); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--navy-deep); }

/* Reduce motion preference respected */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ============================================
   FIX: Big CTA inside dark section
   Override old .big-cta styles with specificity
   ============================================ */
.big-cta-section .big-cta {
  background: transparent;
  border: none;
  padding: 0;
}

.big-cta-section .big-cta::before { display: none; }

.big-cta-section .big-cta h2,
.big-cta-section .big-cta h2 strong {
  color: white !important;
  font-size: clamp(36px, 5vw, 56px);
}

.big-cta-section .big-cta .lead {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 22px;
}

.big-cta-section .big-cta .btn-primary {
  background: white;
  color: var(--navy-deep);
  border-color: white;
}

.big-cta-section .big-cta .btn-primary:hover {
  background: var(--blue-light);
  color: var(--navy-deep);
  border-color: var(--blue-light);
  transform: translateY(-2px);
}

.big-cta-section .big-cta .btn-outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
  background: transparent;
}

.big-cta-section .big-cta .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: white;
  color: white;
}

/* ============================================
   PRODUCT & CATEGORY ICONS
   ============================================ */

/* Product card icon (in related-card) */
.prod-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(0, 20, 80, 0.02) 0%, transparent 100%);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.prod-icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--cat-color, var(--blue-accent)) 0%, transparent 70%);
  opacity: 0.05;
  transition: opacity 0.5s ease;
}

.related-card:hover .prod-icon-wrap::before {
  opacity: 0.12;
}

.prod-icon {
  width: 78px;
  height: 78px;
  color: var(--cat-color, var(--blue-accent));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
}

.related-card:hover .prod-icon {
  transform: scale(1.1) rotate(8deg);
}

/* Refine related-card layout to accommodate icon */
.related-card {
  display: flex !important;
  flex-direction: column;
  padding: 22px 22px 24px !important;
  border-radius: 2px;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  background: white;
  border: 1px solid var(--line) !important;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.related-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--cat-color, var(--blue-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.related-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 20, 80, 0.1);
  border-color: var(--cat-color, var(--blue-accent)) !important;
}

.related-card:hover::before {
  transform: scaleX(1);
}

.related-card .cat-tag {
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--cat-color, var(--blue-accent));
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
}

.related-card h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 4px 0 6px;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.related-card .related-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Series icon on home (5 series cards) */
.series-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
  border-radius: 2px;
  margin-bottom: 16px;
  position: relative;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.series-icon {
  width: 52px;
  height: 52px;
  color: var(--cat-color, currentColor);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.series-card[data-cat="metabolic"] .series-icon { color: var(--metabolic, #B07845); }
.series-card[data-cat="recovery"] .series-icon { color: var(--recovery, #5A9078); }
.series-card[data-cat="longevity"] .series-icon { color: var(--longevity, #7A8AAE); }
.series-card[data-cat="hormonal"] .series-icon { color: var(--hormonal, #AA7488); }
.series-card[data-cat="premium"] .series-icon { color: var(--premium, #8A7A5E); }

.series-card:hover .series-icon {
  transform: scale(1.12) rotate(-6deg);
}

/* Category-index large icon */
.cat-icon-large {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  background: linear-gradient(135deg, rgba(0, 20, 80, 0.02) 0%, transparent 100%);
  border-radius: 2px;
  flex-shrink: 0;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cat-index-card:hover .cat-icon-large {
  transform: scale(1.05);
  background: linear-gradient(135deg, rgba(0, 20, 80, 0.06) 0%, transparent 100%);
}

.cat-icon-large svg {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cat-index-card:hover .cat-icon-large svg {
  transform: rotate(-8deg);
}

/* Refine cat-index-card */
.cat-index-card {
  display: block;
  padding: 32px 36px;
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid;
  margin-bottom: 16px;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cat-index-card:hover {
  transform: translateX(8px);
  box-shadow: 0 16px 40px rgba(0, 20, 80, 0.08);
}

@media (max-width: 720px) {
  .prod-icon-wrap { height: 90px; }
  .prod-icon { width: 64px; height: 64px; }
  .cat-icon-large { width: 80px; height: 80px; }
  .cat-icon-large svg { width: 60px !important; height: 60px !important; }
  .cat-index-card { padding: 24px; }
}

/* ============================================
   HOME: FEATURED + KIT + QUALITY refinements
   ============================================ */

/* Featured corp image (replaces lone vial) */
.featured-corp-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 20, 80, 0.18),
              0 10px 30px rgba(0, 20, 80, 0.08);
  filter: brightness(1.02) contrast(1.02);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.6s ease;
}

.featured-corp-img:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 40px 100px rgba(0, 20, 80, 0.25);
}

/* Kit icon: now a wrapper for SVG + number */
.kit-icon {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.06) 0%, transparent 100%);
  border-radius: 2px;
  color: var(--blue-accent);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 200;
}

.kit-icon svg {
  width: 56px;
  height: 56px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.kit-icon .kit-num {
  position: absolute;
  top: 6px;
  right: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--blue-accent);
  opacity: 0.6;
  font-weight: 500;
}

.kit-item {
  background: white;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}

.kit-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--blue-accent);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.kit-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 20, 80, 0.1);
  border-color: var(--blue-accent);
}

.kit-item:hover::before { width: 100%; }

.kit-item:hover .kit-icon {
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.12) 0%, rgba(91, 155, 213, 0.05) 100%);
}

.kit-item:hover .kit-icon svg {
  transform: scale(1.12) rotate(-6deg);
}

/* Quality icon: SVG-based now */
.quality-icon-svg {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.06) 0%, transparent 100%);
  border-radius: 2px;
  color: var(--blue-accent);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.quality-icon-svg svg {
  width: 56px;
  height: 56px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.quality-card {
  background: white;
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}

.quality-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.quality-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 20, 80, 0.1);
  border-color: var(--blue-accent);
}

.quality-card:hover::before { transform: scaleX(1); }

.quality-card:hover .quality-icon-svg {
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.12) 0%, rgba(91, 155, 213, 0.05) 100%);
}

.quality-card:hover .quality-icon-svg svg {
  transform: scale(1.1) rotate(-4deg);
}

@media (max-width: 720px) {
  .kit-icon, .quality-icon-svg { width: 64px; height: 64px; }
  .kit-icon svg, .quality-icon-svg svg { width: 44px; height: 44px; }
}

/* ============================================
   QUALITY PAGE STYLES
   ============================================ */
.quality-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: 160px 0 100px;
  overflow: hidden;
}

.quality-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.quality-hero-bg picture,
.quality-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.quality-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 20, 80, 0.94) 0%, rgba(0, 20, 80, 0.7) 50%, rgba(0, 20, 80, 0.4) 100%);
  z-index: 1;
}

.quality-hero > .container {
  position: relative;
  z-index: 2;
}

.quality-hero-content { max-width: 820px; }

.quality-hero-content .tag {
  color: var(--blue-light);
  margin-bottom: 28px;
  display: inline-block;
}

.quality-hero-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 200;
  color: white;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 32px;
}

.quality-hero-content h1 strong { font-weight: 700; }

.quality-hero-content .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  max-width: 740px;
}

/* 4 Pillars grid */
.quality-pillars {
  padding: 110px 0;
  background: var(--off-white);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.pillar-card {
  background: white;
  padding: 40px 36px;
  border: 1px solid var(--line);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pillar-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 64px rgba(0, 20, 80, 0.1);
  border-color: var(--blue-accent);
}

.pillar-card:hover::before { transform: scaleX(1); }

.pillar-icon-wrap {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.06) 0%, transparent 100%);
  border-radius: 2px;
  color: var(--blue-accent);
  margin-bottom: 24px;
  transition: all 0.5s ease;
}

.pillar-card:hover .pillar-icon-wrap {
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.14) 0%, rgba(91, 155, 213, 0.06) 100%);
}

.pillar-icon-wrap svg {
  width: 56px;
  height: 56px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pillar-card:hover .pillar-icon-wrap svg {
  transform: scale(1.1) rotate(-4deg);
}

.pillar-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--blue-accent);
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
}

.pillar-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 16px;
  letter-spacing: -0.3px;
}

.pillar-card p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 0 20px;
}

.pillar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.pillar-list li {
  font-size: 13.5px;
  padding: 8px 0 8px 22px;
  position: relative;
  color: var(--ink-soft);
  line-height: 1.5;
}

.pillar-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--blue-accent);
  font-weight: 600;
}

@media (max-width: 880px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

/* Quality visual fullwidth */
.quality-visual {
  position: relative;
  height: 480px;
  overflow: hidden;
}

.quality-visual picture,
.quality-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.quality-visual:hover img { transform: scale(1.04); }

.quality-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 20, 80, 0.4) 100%);
  pointer-events: none;
}

.quality-visual-caption {
  position: absolute;
  bottom: 32px;
  left: 32px;
  z-index: 2;
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 12px 18px;
  background: rgba(0, 20, 80, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 2px;
}

@media (max-width: 720px) {
  .quality-visual { height: 320px; }
}

/* Process stages */
.quality-process {
  padding: 110px 0;
}

.process-stages {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stage {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  background: white;
  border: 1px solid var(--line);
  padding: 32px 36px;
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.stage::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--blue-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage:hover {
  transform: translateX(8px);
  box-shadow: 0 16px 40px rgba(0, 20, 80, 0.08);
  border-color: var(--blue-accent);
}

.stage:hover::before { transform: scaleY(1); }

.stage-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 56px;
  font-weight: 200;
  color: var(--blue-accent);
  line-height: 0.9;
  letter-spacing: -2px;
}

.stage-content h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 12px;
}

.stage-content p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 720px) {
  .stage { grid-template-columns: 1fr; gap: 12px; padding: 24px; }
  .stage-num { font-size: 44px; }
}

/* Quality metrics dark */
.quality-metrics {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--navy-deep) 0%, #001a5e 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.quality-metrics::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 30% 50%, rgba(91, 155, 213, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.quality-metrics > .container { position: relative; z-index: 1; }

.quality-faq {
  padding: 110px 0;
  background: var(--off-white);
}

.quality-faq h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1.2px;
  line-height: 1.15;
  margin-bottom: 16px;
}

.quality-faq h2 strong { font-weight: 700; }

/* ============================================
   PRODUCT PAGE: Kit + Protocol sections
   ============================================ */
.product-kit-section,
.product-protocol-section {
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: 1px solid var(--line);
}

.product-kit-section h2,
.product-protocol-section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 16px;
}

.product-kit-section h2 .strong,
.product-protocol-section h2 .strong {
  font-weight: 700;
}

.product-kit-section .section-lead,
.product-protocol-section .section-lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 720px;
}

.section-lead em {
  font-style: italic;
  opacity: 0.85;
}

/* Product kit grid */
.prod-kit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.kit-pill {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.kit-pill:hover {
  transform: translateX(4px);
  border-color: var(--cat-color, var(--blue-accent));
  box-shadow: 0 8px 24px rgba(0, 20, 80, 0.06);
}

.kit-pill-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.06) 0%, transparent 100%);
  border-radius: 2px;
  color: var(--cat-color, var(--blue-accent));
  flex-shrink: 0;
  transition: all 0.4s ease;
}

.kit-pill-icon svg {
  width: 36px;
  height: 36px;
  transition: transform 0.4s ease;
}

.kit-pill:hover .kit-pill-icon {
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.14) 0%, rgba(91, 155, 213, 0.06) 100%);
}

.kit-pill:hover .kit-pill-icon svg {
  transform: scale(1.1) rotate(-4deg);
}

.kit-pill h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 4px;
  letter-spacing: -0.1px;
}

.kit-pill p {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

.kit-promise-bar {
  margin-top: 28px;
  padding: 24px 32px;
  background: linear-gradient(135deg, var(--navy-deep) 0%, #001a5e 100%);
  color: white;
  text-align: center;
  border-radius: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  position: relative;
  overflow: hidden;
}

.kit-promise-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(91, 155, 213, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.kit-promise-bar em {
  position: relative;
  font-style: italic;
}

@media (max-width: 720px) {
  .prod-kit-grid { grid-template-columns: 1fr; }
}

/* Protocol grid */
.protocol-grid {
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-bottom: 24px;
  overflow: hidden;
}

.protocol-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease;
}

.protocol-row:last-child { border-bottom: none; }

.protocol-row:hover {
  background: var(--off-white);
}

.prot-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 500;
  padding-top: 2px;
}

.prot-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: var(--navy-deep);
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .protocol-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
}

.prot-titration,
.prot-extra {
  background: var(--off-white);
  border-left: 4px solid var(--cat-color, var(--blue-accent));
  padding: 20px 24px;
  margin-bottom: 14px;
  border-radius: 2px;
}

.prot-titration h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 8px;
  letter-spacing: 0.3px;
}

.prot-titration p,
.prot-extra p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  font-family: 'Montserrat', sans-serif;
}

.extra-label {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cat-color, var(--blue-accent));
  font-weight: 500;
  margin-bottom: 6px;
}

.protocol-cta {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}

/* ============================================
   CINEMATIC PRO LAYER
   Custom cursor, page transitions, scroll progress
   ============================================ */

/* Hide native cursor on desktop where custom cursor active */
@media (pointer: fine) {
  body { cursor: none; }
  a, button, input, textarea, select, label, .btn, summary { cursor: none !important; }
}

/* DNA HELIX CURSOR */
.sbl-cursor-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  transition: opacity 0.25s ease;
}

.sbl-cursor-wrap.is-hidden { opacity: 0; }

/* Tiny precise dot at exact mouse position */
.sbl-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--blue-accent);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(40, 100, 160, 0.7),
              0 0 0 1px rgba(255, 255, 255, 0.4);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  mix-blend-mode: difference;
}

/* DNA helix that trails behind */
.sbl-cursor-helix {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  pointer-events: none;
  color: var(--blue-light);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.4s ease,
              opacity 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 0 8px rgba(91, 155, 213, 0.5));
}

.sbl-cursor-helix svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* The rotor: rotates the helix around vertical axis to create 3D twist effect */
.helix-rotor {
  transform-origin: center;
  animation: dnaRotate 2.4s linear infinite;
}

@keyframes dnaRotate {
  0%   { transform: rotate(0deg) scaleX(1); }
  25%  { transform: rotate(0deg) scaleX(0.3); }
  50%  { transform: rotate(0deg) scaleX(-1); }
  75%  { transform: rotate(0deg) scaleX(-0.3); }
  100% { transform: rotate(0deg) scaleX(1); }
}

/* Hover state: helix grows + speeds up + dot becomes bigger pulse */
.sbl-cursor-wrap.is-hover .sbl-cursor-helix {
  width: 64px;
  height: 64px;
  color: var(--blue-accent);
  filter: drop-shadow(0 0 12px rgba(40, 100, 160, 0.8));
}

.sbl-cursor-wrap.is-hover .helix-rotor {
  animation-duration: 1.2s;
}

.sbl-cursor-wrap.is-hover .sbl-cursor-dot {
  width: 10px;
  height: 10px;
  background: var(--blue-light);
  box-shadow: 0 0 18px rgba(91, 155, 213, 0.9),
              0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Click feedback */
.sbl-cursor-wrap.is-clicking .sbl-cursor-helix {
  transform: translate3d(var(--x), var(--y), 0) translate(-50%, -50%) scale(0.85);
}

@media (pointer: coarse), (hover: none) {
  .sbl-cursor-wrap { display: none !important; }
  body { cursor: auto !important; }
  a, button, input, textarea, select, label, .btn, summary { cursor: pointer !important; }
}

/* Scroll progress bar */
.sbl-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue-light));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 99998;
  transition: transform 0.1s linear;
  will-change: transform;
  box-shadow: 0 0 8px rgba(91, 155, 213, 0.4);
}

/* Page transition layer */
.sbl-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 99997;
  pointer-events: none;
  background: var(--navy-deep);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.sbl-transition-layer.is-active {
  transform: translateY(0);
  pointer-events: auto;
}

/* Page entry: layer above content during initial load */
body.page-loaded .sbl-transition-layer {
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

/* Split reveal text animation */
[data-split-reveal] {
  display: inline-block;
}

.line-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.line-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

[data-split-reveal].is-revealed .line-inner {
  transform: translateY(0);
}

/* Section active state for scroll-triggered enhancements */
section.section-active .reveal-deep {
  opacity: 1;
  transform: translateY(0);
}

/* Touch device hide custom cursor */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  a, button, input, textarea, select, label, .btn, summary { cursor: pointer !important; }
}

/* ============================================
   PRODUCT: Size selector + Mechanism + Stacks
   ============================================ */

/* Common section heads */
.product-size-section,
.product-mechanism-section,
.product-stack-section {
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: 1px solid var(--line);
}

.size-section-head,
.mech-head,
.stack-head {
  margin-bottom: 40px;
  max-width: 720px;
}

.size-section-head h2,
.mech-head h2,
.stack-head h2,
.product-size-section h2,
.product-mechanism-section h2,
.product-stack-section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1px;
  line-height: 1.15;
  margin: 12px 0 16px;
}

.size-section-head h2 .strong,
.mech-head h2 .strong,
.stack-head h2 .strong {
  font-weight: 700;
}

/* SIZE SELECTOR */
.size-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.size-option {
  position: relative;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 2px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.size-option::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--cat-color, var(--blue-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.size-option:hover {
  border-color: var(--cat-color, var(--blue-accent));
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 20, 80, 0.1);
}

.size-option:hover::before { transform: scaleX(1); }

.size-option-featured {
  background: linear-gradient(135deg, white 0%, rgba(40, 100, 160, 0.04) 100%);
  border-color: var(--cat-color, var(--blue-accent));
}

.size-option-featured::before { transform: scaleX(1); }

.size-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 5px 12px;
  background: var(--off-white);
  border-radius: 1px;
  font-weight: 500;
  align-self: flex-start;
  margin-bottom: 24px;
}

.size-badge-featured {
  background: var(--cat-color, var(--blue-accent));
  color: white;
}

.size-mg {
  font-family: 'Montserrat', sans-serif;
  font-size: 88px;
  font-weight: 200;
  color: var(--cat-color, var(--navy-deep));
  letter-spacing: -4px;
  line-height: 0.9;
  margin-bottom: 4px;
}

.size-mg span {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-left: 6px;
  color: var(--ink-soft);
}

.size-meta {
  margin: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.size-meta-row {
  font-size: 13.5px;
  color: var(--ink-soft);
  font-family: 'Montserrat', sans-serif;
}

.size-meta-row strong {
  color: var(--navy-deep);
  font-weight: 700;
  font-size: 16px;
  font-family: 'JetBrains Mono', monospace;
}

.size-savings {
  color: #4D8B4F !important;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.3px;
}

.size-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media (max-width: 720px) {
  .size-grid { grid-template-columns: 1fr; gap: 14px; }
  .size-mg { font-size: 64px; }
  .size-option { padding: 28px 24px; }
}

/* MECHANISM CARDS */
.mech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.mech-card {
  background: white;
  border: 1px solid var(--line);
  padding: 28px 26px;
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}

.mech-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 100% 0%, var(--cat-color, var(--blue-accent)) 0%, transparent 70%);
  opacity: 0.04;
  transition: opacity 0.5s ease;
}

.mech-card:hover {
  transform: translateY(-4px);
  border-color: var(--cat-color, var(--blue-accent));
  box-shadow: 0 16px 40px rgba(0, 20, 80, 0.08);
}

.mech-card:hover::after { opacity: 0.12; }

.mech-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.06) 0%, transparent 100%);
  border-radius: 2px;
  color: var(--cat-color, var(--blue-accent));
  margin-bottom: 18px;
  transition: all 0.4s ease;
}

.mech-card-icon svg {
  width: 36px;
  height: 36px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.mech-card:hover .mech-card-icon svg {
  transform: scale(1.15) rotate(-6deg);
}

.mech-card h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}

.mech-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 720px) {
  .mech-grid { grid-template-columns: 1fr; }
}

/* STACK MATRIX */
.stack-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.stack-card {
  display: grid;
  grid-template-columns: 1fr 40px 2fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}

.stack-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--cat-color, var(--blue-accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.stack-card:hover {
  transform: translateX(6px);
  border-color: var(--cat-color, var(--blue-accent));
  box-shadow: 0 16px 40px rgba(0, 20, 80, 0.08);
}

.stack-card:hover::before { transform: scaleY(1); }

.stack-with,
.stack-result {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stack-result {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.stack-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.06) 0%, transparent 100%);
  border-radius: 2px;
  color: var(--cat-color, var(--blue-accent));
  flex-shrink: 0;
}

.stack-icon svg {
  width: 32px;
  height: 32px;
}

.stack-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.stack-text h4,
.stack-result h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0;
  letter-spacing: -0.2px;
}

.stack-result p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 4px 0 0;
}

.stack-arrow-mid {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 200;
  color: var(--cat-color, var(--blue-accent));
  text-align: center;
  line-height: 1;
}

.stack-go {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cat-color, var(--blue-accent));
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.3s ease;
}

.stack-card:hover .stack-go {
  transform: translateX(4px);
}

.stack-warn {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 24px;
  padding: 16px 24px;
  background: rgba(40, 100, 160, 0.04);
  border-radius: 2px;
  border-left: 3px solid var(--blue-accent);
}

@media (max-width: 880px) {
  .stack-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 22px;
  }
  .stack-arrow-mid {
    transform: rotate(90deg);
    margin: -4px 0;
  }
  .stack-go { align-self: flex-end; }
}

/* ============================================
   CONTACT PAGE STYLES
   ============================================ */

/* HERO */
.contact-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  padding: 160px 0 100px;
  overflow: hidden;
}

.contact-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact-hero-bg picture,
.contact-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 20, 80, 0.94) 0%, rgba(0, 20, 80, 0.7) 50%, rgba(0, 20, 80, 0.4) 100%);
  z-index: 1;
}

.contact-hero > .container {
  position: relative;
  z-index: 2;
}

.contact-hero-content { max-width: 820px; }

.contact-hero-content .tag {
  color: var(--blue-light);
  margin-bottom: 28px;
  display: inline-block;
}

.contact-hero-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 200;
  color: white;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 32px;
}

.contact-hero-content h1 strong { font-weight: 700; }

.contact-hero-content .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  max-width: 740px;
}

/* CHANNELS GRID */
.contact-channels {
  padding: 110px 0;
  background: var(--off-white);
}

.contact-channels .sec-head h2,
.contact-cases h2,
.contact-form-section h2,
.contact-faq h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1.2px;
  line-height: 1.15;
  margin: 12px 0 16px;
}

.contact-channels .section-lead,
.contact-cases p,
.contact-form-section .section-lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 0;
}

.channels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 60px;
}

.channel-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}

.channel-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.channel-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 20, 80, 0.12);
  border-color: var(--blue-accent);
}

.channel-card:hover::before { transform: scaleX(1); }

.channel-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.06) 0%, transparent 100%);
  border-radius: 2px;
  color: var(--blue-accent);
  margin-bottom: 24px;
  transition: all 0.4s ease;
}

.channel-card:hover .channel-icon {
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.16) 0%, rgba(91, 155, 213, 0.06) 100%);
}

.channel-icon svg {
  width: 40px;
  height: 40px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.channel-card:hover .channel-icon svg {
  transform: scale(1.1) rotate(-6deg);
}

.channel-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 500;
  margin-bottom: 12px;
}

.channel-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 14px;
  letter-spacing: -0.3px;
}

.channel-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 20px;
  flex: 1;
}

.channel-card p strong { color: var(--navy-deep); font-weight: 600; }

.channel-action {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 500;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  transition: transform 0.3s ease;
}

.channel-card:hover .channel-action { transform: translateX(6px); }

@media (max-width: 1100px) {
  .channels-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .channels-grid { grid-template-columns: 1fr; }
}

/* USE CASES */
.contact-cases {
  padding: 110px 0;
}

.cases-list {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.case-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 28px 32px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}

.case-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--blue-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-row:hover {
  transform: translateX(6px);
  border-color: var(--blue-accent);
  box-shadow: 0 12px 32px rgba(0, 20, 80, 0.06);
}

.case-row:hover::before { transform: scaleY(1); }

.case-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 44px;
  font-weight: 200;
  color: var(--blue-accent);
  line-height: 0.9;
  letter-spacing: -2px;
}

.case-content h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 10px;
  letter-spacing: -0.2px;
}

.case-content p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 12px;
  font-style: normal;
  font-family: 'Montserrat', sans-serif;
}

.case-route {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1px;
  color: var(--blue-accent);
  font-weight: 500;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(40, 100, 160, 0.06);
  border-radius: 1px;
}

.case-route strong { color: var(--navy-deep); font-weight: 600; }

@media (max-width: 720px) {
  .case-row { grid-template-columns: 1fr; gap: 12px; padding: 22px 24px; }
  .case-num { font-size: 36px; }
}

/* FORM */
.contact-form-section {
  padding: 110px 0;
  background: var(--off-white);
  scroll-margin-top: 100px;
}

.contact-form {
  margin-top: 48px;
  padding: 48px 52px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field-full { grid-column: 1 / -1; }

.form-field span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--off-white);
  color: var(--navy-deep);
  transition: all 0.3s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blue-accent);
  background: white;
  box-shadow: 0 0 0 3px rgba(40, 100, 160, 0.12);
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
  font-family: 'Montserrat', sans-serif;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-soft);
  opacity: 0.6;
  font-family: 'Montserrat', sans-serif;
}

.form-checkbox {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer;
  padding: 16px;
  background: var(--off-white);
  border-radius: 2px;
}

.form-checkbox input {
  margin-top: 3px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--blue-accent);
}

.form-checkbox span {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
  line-height: 1.55;
}

.form-submit {
  width: 100%;
  text-align: center;
  justify-content: center;
  padding: 18px;
}

.form-promise {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 20px;
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 32px 24px; }
}

/* INFO BLOCK */
.contact-info-block {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--navy-deep) 0%, #001a5e 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.contact-info-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 30% 50%, rgba(91, 155, 213, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.contact-info-block > .container { position: relative; z-index: 1; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.info-item {
  padding: 28px 24px;
  border: 1px solid rgba(91, 155, 213, 0.25);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
}

.info-item:hover {
  background: rgba(91, 155, 213, 0.08);
  transform: translateY(-4px);
  border-color: var(--blue-light);
}

.info-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--blue-light);
  font-weight: 500;
  margin-bottom: 14px;
}

.info-item h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}

.info-item p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 880px) {
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .info-grid { grid-template-columns: 1fr; }
}

/* CONTACT FAQ */
.contact-faq {
  padding: 110px 0;
}

/* ============================================
   PEPTIDOS 101: Collapsible sections + Back to top
   ============================================ */

/* TOC controls (expand all / collapse all) */
.edu-toc-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 32px 0 0;
  flex-wrap: wrap;
}

.edu-control-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: white;
  border: 1px solid var(--line);
  color: var(--navy-deep);
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.edu-control-btn:hover {
  background: var(--blue-accent);
  color: white;
  border-color: var(--blue-accent);
  transform: translateY(-1px);
}

/* Make edu-section less tall when collapsed */
.edu-section {
  padding: 0 0 !important;
}

.edu-section .container-narrow {
  padding-top: 0;
  padding-bottom: 0;
}

/* Collapsible details */
.edu-collapsible {
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  margin: 12px 0;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.edu-section-alt .edu-collapsible {
  background: white;
}

.edu-collapsible[open] {
  border-color: var(--blue-accent);
  box-shadow: 0 12px 32px rgba(0, 20, 80, 0.06);
  margin: 24px 0;
}

.edu-collapsible-summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 60px 1fr 32px;
  gap: 20px;
  align-items: center;
  user-select: none;
  transition: background 0.3s ease;
  position: relative;
}

.edu-collapsible-summary::-webkit-details-marker { display: none; }

.edu-collapsible-summary::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--blue-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.edu-collapsible[open] .edu-collapsible-summary::before {
  transform: scaleY(1);
}

.edu-collapsible-summary:hover {
  background: var(--off-white);
}

.edu-collapsible-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 2.5px;
  color: var(--blue-accent);
  font-weight: 500;
  display: block;
}

.edu-collapsible-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: -0.4px;
  line-height: 1.25;
}

.edu-collapsible-toggle {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 200;
  color: var(--blue-accent);
  text-align: center;
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.edu-collapsible[open] .edu-collapsible-toggle {
  transform: rotate(135deg);
}

/* Body of the collapsible */
.edu-collapsible-body {
  padding: 0 32px 36px;
  animation: collapsibleOpen 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes collapsibleOpen {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reset h3, p, etc inside the collapsible body to keep readable */
.edu-collapsible-body h3 {
  font-size: 20px;
  margin: 28px 0 14px;
}

.edu-collapsible-body p {
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 720px) {
  .edu-collapsible-summary {
    grid-template-columns: 50px 1fr 28px;
    padding: 20px 22px;
    gap: 14px;
  }
  .edu-collapsible-body { padding: 0 22px 28px; }
  .edu-collapsible-num { font-size: 11px; letter-spacing: 1.5px; }
  .edu-collapsible-toggle { font-size: 26px; }
}

/* Inline images inside edu sections */
.edu-inline-image {
  position: relative;
  margin: 32px 0;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 420px;
  background: var(--off-white);
}

.edu-inline-image picture,
.edu-inline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.edu-inline-image:hover img {
  transform: scale(1.04);
}

.edu-inline-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 20, 80, 0.6) 100%);
  pointer-events: none;
}

.edu-inline-image .img-caption {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 24px;
  z-index: 2;
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 16px;
  background: rgba(0, 20, 80, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 2px;
  font-weight: 500;
  display: inline-block;
  max-width: fit-content;
}

@media (max-width: 720px) {
  .edu-inline-image {
    aspect-ratio: 4 / 3;
    margin: 24px 0;
  }
  .edu-inline-image .img-caption {
    bottom: 12px;
    left: 12px;
    right: 12px;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 8px 12px;
  }
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 14px 18px;
  background: var(--navy-deep);
  color: white;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease;
  pointer-events: none;
  box-shadow: 0 12px 32px rgba(0, 20, 80, 0.25);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--blue-accent);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 40px rgba(40, 100, 160, 0.35);
}

.back-to-top svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.back-to-top:hover svg {
  transform: translateY(-2px);
}

@media (max-width: 540px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    padding: 12px 16px;
  }
  .back-to-top span { display: none; }
  .back-to-top {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
  }
}

/* ============================================
   FIX: FAQ + Glossary widths (more readable)
   ============================================ */

/* Tighter container for FAQ specifically */
.faq-list {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* When FAQ is inside container-narrow (already 820px), narrow further to 720 */
.container-narrow .faq-list {
  max-width: 100%; /* respects parent */
}

/* Cap edu-section's container-narrow to 720px on FAQ section */
.edu-section[id="faq"] .container-narrow,
.contact-faq .container-narrow,
.quality-faq .container-narrow {
  max-width: 720px;
}

/* Tighter FAQ items for better readability */
.faq-item summary {
  padding: 20px 26px !important;
  font-size: 15.5px !important;
}

.faq-item p {
  padding: 0 26px 22px !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

/* Glossary cards: 2 columns at 820px feels wide, keep readable */
.glossary {
  max-width: 100%;
}

.g-item {
  padding: 20px 22px !important;
}

.g-item dt {
  font-size: 16px !important;
}

.g-item dd {
  font-size: 14px !important;
}

/* On wider screens: glossary stays 2 columns but cards are tighter */
@media (min-width: 880px) {
  .glossary {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* Edu collapsibles: narrower content for better reading */
.edu-collapsible {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* When collapsible has FAQ list inside, it stays tight */
.edu-collapsible-body {
  max-width: 100%;
}

/* Categories grid inside collapsible: keep multi-column on wide */
.edu-collapsible-body .cat-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Storage grid inside collapsible: tighter */
.edu-collapsible-body .storage-grid {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 720px) {
  .edu-collapsible-body .storage-grid { grid-template-columns: 1fr; }
}

/* ============================================
   FIX FINAL: Anchos de FAQs y Collapsibles
   ============================================ */

/* OVERRIDE: container-narrow on edu/peptidos pages → 720px not 820px */
.edu-section .container-narrow,
.edu-hero .container,
.edu-cta .container {
  max-width: 720px;
}

/* But the hero needs more breathing room with the TOC grid */
.edu-hero .container {
  max-width: 1100px; /* TOC needs the wider grid */
}

/* Collapsibles: max-width 720, reduce padding, smaller summary */
.edu-collapsible {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.edu-collapsible-summary {
  padding: 18px 24px !important;
  grid-template-columns: 48px 1fr 24px !important;
  gap: 16px !important;
}

.edu-collapsible-num {
  font-size: 11.5px !important;
  letter-spacing: 2px !important;
}

.edu-collapsible-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.35 !important;
}

.edu-collapsible-toggle {
  font-size: 22px !important;
}

.edu-collapsible-body {
  padding: 0 24px 26px !important;
}

/* Body internal h3, p, etc */
.edu-collapsible-body h3 {
  font-size: 17px !important;
  margin: 22px 0 10px !important;
}

.edu-collapsible-body p {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* FAQ inside collapsibles or as standalone: 720px max + tighter */
.faq-list {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.faq-item {
  margin-bottom: 8px !important;
}

.faq-item summary {
  padding: 16px 22px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.1px !important;
  grid-template-columns: 1fr 24px !important;
}

.faq-item summary::after {
  font-size: 18px !important;
}

.faq-item p {
  padding: 0 22px 18px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Edu-section wrapper: less vertical room between collapsibles */
.edu-section {
  padding: 0 !important;
}

/* But keep some breathing space at top/bottom of the WHOLE accordion stack */
.edu-section[id="que-es"] .container-narrow {
  padding-top: 40px;
}

.edu-section[id="faq"] .container-narrow {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Number columns inside edu-section: tighter */
.edu-section .edu-num {
  display: none; /* the collapsible has its own num, hide the duplicate */
}

/* Add small spacing between collapsibles */
.edu-collapsible + .edu-collapsible {
  margin-top: 8px;
}

/* Inline images: smaller height inside collapsible */
.edu-collapsible-body .edu-inline-image {
  aspect-ratio: 16 / 9;
  max-height: 320px;
  margin: 24px 0;
}

/* Glossary inside collapsible: 1 column on narrow, 2 on wide */
.edu-collapsible-body .glossary {
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 720px) {
  .edu-collapsible-body .glossary {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

.edu-collapsible-body .g-item {
  padding: 16px 18px !important;
}

.edu-collapsible-body .g-item dt {
  font-size: 15px !important;
  margin-bottom: 6px !important;
}

.edu-collapsible-body .g-item dd {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

/* Mechanism, safety pillars, storage grid inside collapsibles: tighter */
.edu-collapsible-body .edu-mechanism {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 10px !important;
}

.edu-collapsible-body .mech-step {
  padding: 18px 16px !important;
}

.edu-collapsible-body .mech-step h4 {
  font-size: 13px !important;
}

.edu-collapsible-body .mech-step p {
  font-size: 12.5px !important;
}

.edu-collapsible-body .safety-pillars {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

@media (min-width: 720px) {
  .edu-collapsible-body .safety-pillars {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.edu-collapsible-body .pillar {
  padding: 22px 20px !important;
}

.edu-collapsible-body .storage-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

@media (min-width: 720px) {
  .edu-collapsible-body .storage-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

.edu-collapsible-body .cycle-timeline {
  padding-left: 24px !important;
}

.edu-collapsible-body .timeline-block {
  padding: 18px 22px !important;
}

.edu-collapsible-body .effects-split {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

@media (min-width: 720px) {
  .edu-collapsible-body .effects-split {
    grid-template-columns: 1fr 1fr !important;
  }
}

.edu-collapsible-body .cat-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

@media (min-width: 720px) {
  .edu-collapsible-body .cat-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

.edu-collapsible-body .cat-card {
  padding: 22px 20px !important;
}

@media (max-width: 540px) {
  .edu-collapsible-summary {
    padding: 14px 18px !important;
    grid-template-columns: 38px 1fr 22px !important;
    gap: 12px !important;
  }
  .edu-collapsible-title {
    font-size: 14.5px !important;
  }
  .edu-collapsible-num {
    font-size: 10px !important;
  }
  .edu-collapsible-toggle {
    font-size: 20px !important;
  }
  .edu-collapsible-body {
    padding: 0 18px 22px !important;
  }
}

/* ============================================
   FIXES — IMG 1, 2, 3 from screenshots
   ============================================ */

/* (A) FIX HOME 5-SERIES CARDS — keep all 5 with same structure */
.series-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.series-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-top: 4px solid var(--cat-color);
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  border-radius: 2px;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 380px;
}

.series-card[data-cat="metabolic"] { --cat-color: #B07845; }
.series-card[data-cat="recovery"] { --cat-color: #5A9078; }
.series-card[data-cat="longevity"] { --cat-color: #7A8AAE; }
.series-card[data-cat="hormonal"] { --cat-color: #AA7488; }
.series-card[data-cat="premium"] { --cat-color: #8A7A5E; }

.series-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(0, 20, 80, 0.1);
}

.series-icon-wrap {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(0,0,0,0.04) 0%, transparent 100%);
  border-radius: 2px;
  color: var(--cat-color);
}

.series-icon {
  width: 44px;
  height: 44px;
}

.series-cat-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--cat-color);
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
  letter-spacing: 1px;
}

.series-card .series-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 0 0 8px;
  letter-spacing: -0.4px;
}

.series-card > div p.series-products {
  margin-bottom: 24px !important;
  margin-top: 4px !important;
}

.series-card .series-products {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: 0.3px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-style: normal;
}

.series-card .series-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cat-color);
  font-weight: 500;
  margin-top: 16px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.series-card:hover .series-link {
  transform: translateX(4px);
}

@media (max-width: 1100px) {
  .series-grid { grid-template-columns: repeat(3, 1fr); }
  .series-card:nth-child(4),
  .series-card:nth-child(5) { grid-column: span 1; }
}

@media (max-width: 720px) {
  .series-grid { grid-template-columns: 1fr 1fr; }
  .series-card { min-height: auto; padding: 22px 18px; }
}

@media (max-width: 480px) {
  .series-grid { grid-template-columns: 1fr; }
}

/* (B) FIX FEATURED RETATRUTIDE → image breathing room */
.section-tight {
  padding: 56px 0 !important;
}

.featured-banner {
  margin-bottom: 80px; /* Space below before the next image section */
}

/* (C) WIDEN CONTACT CASES + FAQ SECTIONS */
.contact-cases .container.container-narrow,
.contact-form-section .container.container-narrow,
.contact-faq .container.container-narrow {
  max-width: 960px !important; /* Wider than 720, narrower than full */
}

/* Keep the heading still readable - just push the cases-list wider */
.contact-cases .reveal {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.contact-cases .reveal h2,
.contact-cases .reveal p,
.contact-cases .reveal .tag {
  text-align: center;
}

.cases-list {
  max-width: 100%;
  margin-top: 50px !important;
}

/* Each case-row uses full available width better */
.case-row {
  grid-template-columns: 80px 1fr !important;
  gap: 28px !important;
  padding: 28px 36px !important;
}

.case-num {
  font-size: 52px !important;
}

.case-content h4 {
  font-size: 19px !important;
  margin-bottom: 12px !important;
}

.case-content p {
  font-size: 15px !important;
}

@media (max-width: 720px) {
  .case-row {
    grid-template-columns: 1fr !important;
    padding: 22px 24px !important;
  }
  .case-num { font-size: 36px !important; }
}

/* Same for the contact form: widen */
.contact-form {
  max-width: 100%;
}

/* FAQ in contact: align with the cases-list width */
.contact-faq .faq-list {
  max-width: 100% !important;
}

/* Form field reveal heading aligned center */
.contact-form-section .reveal {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.contact-faq .reveal {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Quality FAQ same approach */
.quality-faq .container.container-narrow {
  max-width: 960px !important;
}

.quality-faq .reveal {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.quality-faq .faq-list {
  max-width: 100% !important;
}

/* Peptidos-101: keep the readability narrow but for FAQ section, use 720 fixed */
.edu-section[id="faq"] .container.container-narrow {
  max-width: 720px !important;
}

/* Image inside featured-banner */
.featured-banner .featured-corp-img {
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}

/* Quality visual full-width image: add space above and below */
.quality-visual {
  margin: 60px 0 !important;
}

/* About visual same */
.about-visual {
  margin: 60px 0 !important;
}

/* ============================================
   UNIFIED WIDTHS — SYSTEM-WIDE STANDARDIZATION
   ============================================
   Override scattered max-width rules with a clean tier system:
   - .container        → 1240px (full)
   - .container-wide   → 1100px (premium content)
   - .container-mid    → 960px  (cases, forms, info blocks)
   - .container-narrow → 720px  (long-form reading: FAQ, glossaries)
*/

.container { max-width: var(--container) !important; }       /* 1240 */
.container-wide { max-width: 1100px !important; }
.container-mid { max-width: 960px !important; margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 720px !important; }

/* Featured banner: lock to same .container as everything else */
.featured-banner-section .container,
.featured-section .container {
  max-width: var(--container) !important;
}

.featured-banner {
  margin-bottom: 0 !important; /* spacing controlled by section padding now */
}

/* ALL adjacent sections inherit unified spacing */
.section, section {
  padding: 0;
}

/* SECTION PADDINGS — apply uniformly */
.contact-channels,
.contact-cases,
.contact-form-section,
.contact-faq,
.quality-faq,
.quality-pillars,
.quality-process,
.about-section,
.featured-banner-section,
.about-visual-section,
.quality-visual-section,
.cta-section,
.big-cta-section {
  padding: 80px 0 !important;
}

/* Hero sections keep their own padding */
.product-hero,
.contact-hero,
.about-hero,
.quality-hero,
.edu-hero { padding: 140px 0 80px !important; }

/* Full-width image sections (about-visual, quality-visual) — no horizontal container, breathing top/bottom */
.about-visual,
.quality-visual {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

.about-visual img,
.quality-visual img {
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
  display: block;
}

/* When wrapping image, give the parent section the breathing room */
.about-visual-section,
.quality-visual-section {
  padding: 60px 0 !important;
  background: var(--off-white);
}

/* In the home page after Featured Retatrutide, the next section needs separation */
.featured-banner-section + section,
.featured-section + section {
  margin-top: 0;
  padding-top: 80px !important;
}

/* OVERRIDE earlier rule: contact-cases width should follow container-mid */
.contact-cases > .container,
.contact-form-section > .container,
.contact-faq > .container,
.quality-faq > .container {
  max-width: 960px !important;
}

/* Keep heading inner-block centered narrow for legibility */
.contact-cases .reveal,
.contact-form-section .reveal,
.contact-faq .reveal,
.quality-faq .reveal {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* But the CARDS use full mid width */
.cases-list,
.contact-form,
.faq-list {
  max-width: 100% !important;
}

/* ============================================
   FIX: Featured ↔ Kit image alignment
   Both must share the SAME max-width and inline margin
   ============================================ */

/* Override the negative margin that broke alignment */
.kit-feature-img {
  margin: 0 0 60px !important;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 20, 80, 0.18);
}

.kit-feature-img picture,
.kit-feature-img img {
  width: 100%;
  display: block;
}

/* Featured banner: same border-radius and shadow for visual consistency */
.featured-banner {
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 20, 80, 0.18);
}

/* Vertical breathing room between Featured and Kit */
.section-tight + .section-kit,
section + .section-kit {
  padding-top: 60px !important;
}

/* Ensure both are inside container with same gutter */
.section-tight > .container,
.section-kit > .container {
  max-width: var(--container);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Quality hero image / about visual: full-bleed but separated */
.about-split,
.quality-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 80px 0;
}

.about-split-img,
.quality-split-img {
  position: relative;
  overflow: hidden;
  min-height: 480px;
}

.about-split-img picture,
.about-split-img img,
.quality-split-img picture,
.quality-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 880px) {
  .about-split,
  .quality-split {
    grid-template-columns: 1fr;
  }
  .about-split-img,
  .quality-split-img { min-height: 320px; }
}

/* ============================================
   CATEGORIES INDEX · RICH CARDS
   ============================================ */

.cat-index-hero {
  padding: 140px 0 60px !important;
  background: linear-gradient(180deg, var(--paper) 0%, var(--off-white) 100%);
  position: relative;
  overflow: hidden;
}

.cat-index-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 30%, rgba(40,100,160,0.08) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(91,155,213,0.06) 0%, transparent 50%);
  pointer-events: none;
}

.cat-index-hero .container {
  position: relative;
  z-index: 1;
}

.cat-hero-content {
  max-width: 720px;
  margin-bottom: 50px;
}

.cat-hero-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -2px;
  line-height: 1.05;
  margin: 18px 0 26px;
}

.cat-hero-content h1 strong { font-weight: 700; }

.cat-hero-content .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

.cat-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.hstat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hstat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 38px;
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1.5px;
  line-height: 1;
}

.hstat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 500;
}

@media (max-width: 720px) {
  .cat-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* RICH CATEGORY CARDS */
.cat-grid-section {
  padding: 80px 0 !important;
}

.cat-cards-rich {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cat-cards-rich .cat-rich-card:first-child {
  grid-column: 1 / -1; /* Metabolic full-width feature */
}

.cat-rich-card {
  position: relative;
  background: white;
  border: 1px solid var(--line);
  padding: 40px 36px;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto auto auto;
  gap: 20px 28px;
  min-height: 320px;
}

.cat-rich-card[data-cat="metabolic"] { --cat-color: var(--metabolic, #B07845); }
.cat-rich-card[data-cat="recovery"] { --cat-color: var(--recovery, #5A9078); }
.cat-rich-card[data-cat="longevity"] { --cat-color: var(--longevity, #7A8AAE); }
.cat-rich-card[data-cat="hormonal"] { --cat-color: var(--hormonal, #AA7488); }
.cat-rich-card[data-cat="premium"] { --cat-color: var(--premium, #8A7A5E); }

.cat-rich-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--cat-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.cat-rich-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 20, 80, 0.12);
  border-color: var(--cat-color);
}

.cat-rich-card:hover::before { transform: scaleX(1); }

.cat-rich-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--cat-color);
  opacity: 0.5;
  transition: opacity 0.6s ease;
}

.cat-rich-card:hover .cat-rich-bg { opacity: 0.9; }

.cat-rich-pattern {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 320px;
  height: 320px;
}

.cat-rich-num {
  grid-column: 1;
  grid-row: 1;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--cat-color);
  font-weight: 500;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

.cat-rich-icon {
  grid-column: 1;
  grid-row: 2;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cat-color);
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cat-rich-icon svg { width: 100%; height: 100%; }

.cat-rich-card:hover .cat-rich-icon {
  transform: scale(1.1) rotate(-6deg);
}

.cat-rich-body {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  z-index: 1;
}

.cat-rich-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cat-color);
  font-weight: 500;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(0,0,0,0.04);
  border-radius: 1px;
  margin-bottom: 16px;
}

.cat-rich-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--navy-deep);
  margin: 0 0 14px;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

.cat-rich-body p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 18px;
}

.cat-rich-mol-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cat-rich-mol-list span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--cat-color);
  color: var(--cat-color);
  font-weight: 500;
  border-radius: 1px;
  letter-spacing: 0.3px;
}

.cat-rich-foot {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}

.cat-rich-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.4px;
}

.cat-rich-stats strong {
  color: var(--navy-deep);
  font-weight: 700;
}

.cat-rich-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cat-color);
  font-weight: 500;
  transition: transform 0.3s ease;
}

.cat-rich-card:hover .cat-rich-arrow {
  transform: translateX(6px);
}

@media (max-width: 720px) {
  .cat-cards-rich { grid-template-columns: 1fr; }
  .cat-cards-rich .cat-rich-card:first-child { grid-column: 1; }
  .cat-rich-card {
    grid-template-columns: 60px 1fr;
    padding: 28px 24px;
    min-height: auto;
  }
  .cat-rich-icon { width: 60px; height: 60px; }
  .cat-rich-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* COMPARE GRID */
.cat-compare-section {
  padding: 80px 0 !important;
  background: var(--off-white);
}

.cat-compare-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.ccmp {
  background: white;
  border: 1px solid var(--line);
  padding: 24px 18px;
  border-radius: 2px;
  text-align: center;
  transition: all 0.4s ease;
}

.ccmp:hover {
  transform: translateY(-3px);
  border-color: var(--blue-accent);
  box-shadow: 0 12px 28px rgba(0, 20, 80, 0.06);
}

.ccmp-num {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 8px;
}

.ccmp-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

@media (max-width: 880px) {
  .cat-compare-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .cat-compare-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   PRODUCTS INDEX · RICH CATALOG
   ============================================ */

.prod-index-hero {
  position: relative;
  padding: 160px 0 80px !important;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
}

.prod-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.prod-hero-bg picture,
.prod-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prod-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,20,80,0.94) 0%, rgba(0,20,80,0.7) 50%, rgba(0,20,80,0.4) 100%);
  z-index: 1;
}

.prod-index-hero > .container {
  position: relative;
  z-index: 2;
}

.prod-hero-content {
  max-width: 820px;
}

.prod-hero-content .tag {
  color: var(--blue-light);
}

.prod-hero-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 200;
  color: white;
  letter-spacing: -2px;
  line-height: 1.05;
  margin: 18px 0 24px;
}

.prod-hero-content h1 strong { font-weight: 700; }

.prod-hero-content .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  max-width: 720px;
}

/* FILTER BAR */
.prod-filter-section {
  padding: 30px 0 !important;
  background: white;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 70px;
  z-index: 10;
}

.prod-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 8px;
  font-weight: 500;
}

.filter-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  background: var(--off-white);
  border: 1px solid var(--line);
  color: var(--navy-deep);
  cursor: pointer;
  border-radius: 100px;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: var(--cat-color, var(--blue-accent));
  color: var(--cat-color, var(--blue-accent));
}

.filter-btn.active {
  background: var(--cat-color, var(--navy-deep));
  color: white;
  border-color: var(--cat-color, var(--navy-deep));
}

/* CATALOG GRID */
.prod-catalog-section {
  padding: 60px 0 !important;
  background: var(--off-white);
}

.prod-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.prod-rich-card {
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px 26px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 340px;
}

.prod-rich-card[data-cat="metabolic"] { --cat-color: var(--metabolic, #B07845); }
.prod-rich-card[data-cat="recovery"] { --cat-color: var(--recovery, #5A9078); }
.prod-rich-card[data-cat="longevity"] { --cat-color: var(--longevity, #7A8AAE); }
.prod-rich-card[data-cat="hormonal"] { --cat-color: var(--hormonal, #AA7488); }
.prod-rich-card[data-cat="premium"] { --cat-color: var(--premium, #8A7A5E); }

.prod-rich-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--cat-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.prod-rich-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(0, 20, 80, 0.12);
  border-color: var(--cat-color);
}

.prod-rich-card:hover::before { transform: scaleX(1); }

.prc-frontier::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, var(--cat-color) 0%, transparent 70%);
  opacity: 0.15;
  pointer-events: none;
  animation: pulseFrontier 3s ease-in-out infinite;
}

@keyframes pulseFrontier {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.1); }
}

.prc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.prc-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cat-color);
  font-weight: 600;
  padding: 5px 9px;
  background: rgba(0,0,0,0.04);
  border-radius: 1px;
}

.prc-badge-pulse {
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { background: rgba(0,0,0,0.04); }
  50% { background: rgba(0,0,0,0.1); }
}

.prc-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--cat-color);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.prc-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: var(--cat-color);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.prc-icon svg { width: 100%; height: 100%; }

.prod-rich-card:hover .prc-icon {
  transform: scale(1.12) rotate(-8deg);
}

.prod-rich-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.prc-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 16px;
  font-family: 'Montserrat', sans-serif;
}

.prc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--off-white);
  border-radius: 2px;
}

.pst {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pst-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1;
  letter-spacing: -0.3px;
}

.pst-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

.prc-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.prc-prices {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.prc-size {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
}

.prc-size strong {
  color: var(--navy-deep);
  font-weight: 700;
  font-size: 12px;
}

.prc-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cat-color);
  font-weight: 600;
  transition: transform 0.3s ease;
}

.prod-rich-card:hover .prc-cta {
  transform: translateX(4px);
}

@media (max-width: 1100px) {
  .prod-catalog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .prod-catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .prod-catalog-grid { grid-template-columns: 1fr; }
}

/* INCLUDED IN EVERY PURCHASE */
.prod-included-section {
  padding: 100px 0 !important;
  background: white;
}

.included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.incl-item {
  background: var(--off-white);
  border: 1px solid var(--line);
  padding: 28px 24px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.4s ease;
}

.incl-item:hover {
  background: white;
  border-color: var(--blue-accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 20, 80, 0.06);
}

.incl-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: var(--blue-accent);
  border-radius: 2px;
  margin-bottom: 16px;
}

.incl-icon svg { width: 36px; height: 36px; }

.incl-item h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 6px;
  letter-spacing: -0.2px;
}

.incl-item p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 720px) {
  .included-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .included-grid { grid-template-columns: 1fr; }
}

/* COMPARE TABLE */
.prod-compare-section {
  padding: 80px 0 !important;
  background: var(--off-white);
}

.prod-compare-table-wrap {
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow-x: auto;
  box-shadow: 0 4px 16px rgba(0,20,80,0.04);
}

.prod-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat', sans-serif;
}

.prod-compare-table thead {
  background: var(--navy-deep);
  color: white;
}

.prod-compare-table th {
  padding: 16px 20px;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
}

.prod-compare-table td {
  padding: 16px 20px;
  font-size: 13px;
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.prod-compare-table tbody tr:hover {
  background: var(--off-white);
}

.cat-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
}

.cat-pill[data-cat="metabolic"] { background: rgba(176,120,69,0.12); color: #8A5A30; }
.cat-pill[data-cat="recovery"] { background: rgba(90,144,120,0.12); color: #3F6D58; }
.cat-pill[data-cat="longevity"] { background: rgba(122,138,174,0.12); color: #4A5C7A; }
.cat-pill[data-cat="hormonal"] { background: rgba(170,116,136,0.12); color: #7A4F62; }
.cat-pill[data-cat="premium"] { background: rgba(138,122,94,0.12); color: #5C4F38; }

@media (max-width: 720px) {
  .prod-compare-table { font-size: 12px; }
  .prod-compare-table th,
  .prod-compare-table td { padding: 12px 14px; }
}

/* ============================================
   COLOR VARIABLES (if not defined elsewhere)
   ============================================ */
:root {
  --metabolic: #B07845;
  --recovery: #5A9078;
  --longevity: #7A8AAE;
  --hormonal: #AA7488;
  --premium: #8A7A5E;
}


/* ============================================
   DEFINITIVE FIX — Featured ↔ Kit alignment
   This block goes at the end and uses very high specificity
   ============================================ */

/* The Featured Retatrutide section */
section.section-tight {
  padding: 60px 0 !important;
  background: var(--off-white);
}

/* The Kit Completo section IMMEDIATELY after */
section.section-kit {
  padding: 80px 0 !important;
  background: white;
}

/* Featured banner: locked layout with consistent shadow + radius */
section.section-tight > .container > .featured-banner {
  margin: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 24px 60px rgba(0, 20, 80, 0.18) !important;
  overflow: hidden;
}

/* Kit feature image: locked to identical inset and styling */
section.section-kit > .container > .kit-feature-img {
  margin: 0 0 60px 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 24px 60px rgba(0, 20, 80, 0.18) !important;
  overflow: hidden;
  width: 100%;
}

section.section-kit > .container > .kit-feature-img picture,
section.section-kit > .container > .kit-feature-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Both .container respect the same max-width and gutters */
section.section-tight > .container,
section.section-kit > .container {
  max-width: 1240px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  margin: 0 auto !important;
}

/* Add a clean separator between them */
section.section-tight + section.section-kit {
  border-top: 1px solid var(--line);
}

/* Ensure consistent gutter on mobile */
@media (max-width: 720px) {
  section.section-tight > .container,
  section.section-kit > .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================
   MOBILE NAVBAR — COMPLETE REDESIGN
   ============================================ */

/* Base navbar tighter on mobile */
@media (max-width: 1100px) {
  .navbar {
    padding: 12px 0;
  }
  .nav-container {
    padding: 0 18px;
  }
  .nav-brand img {
    max-height: 32px;
  }
}

@media (max-width: 880px) {
  /* Hide desktop nav links */
  .nav-links {
    display: none;
  }
  /* Hide cart label, keep only icon style */
  .nav-cart {
    font-size: 12px;
    padding: 8px 14px;
  }
  /* Show hamburger */
  .nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--navy-deep);
    color: white;
    border-radius: 4px;
    font-size: 18px;
    margin-left: 8px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10000;
  }
  .nav-toggle:hover {
    background: var(--blue-accent);
  }
  .nav-toggle.is-open {
    background: var(--blue-accent);
  }
  .nav-toggle.is-open::before { content: '✕'; }
  .nav-toggle:not(.is-open)::before { content: '☰'; }
  .nav-toggle { color: white; }
  .nav-toggle::before {
    font-size: 16px;
    line-height: 1;
  }
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 380px;
  height: 100vh;
  background: linear-gradient(180deg, var(--navy-deep) 0%, #001a5e 100%);
  color: white;
  padding: 80px 28px 32px;
  z-index: 9000;
  transition: right 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.nav-drawer.is-open {
  right: 0;
}

.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 20, 80, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 8500;
}

.nav-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
}

.nav-drawer-links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-drawer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  color: white;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
  transition: all 0.3s ease;
}

.nav-drawer-links a::after {
  content: '→';
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--blue-light);
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-drawer-links a:hover,
.nav-drawer-links a.active {
  color: var(--blue-light);
  padding-left: 8px;
}

.nav-drawer-links a:hover::after,
.nav-drawer-links a.active::after {
  opacity: 1;
  transform: translateX(0);
}

.nav-drawer-links a.active {
  color: var(--blue-light);
  font-weight: 600;
}

.nav-drawer-foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-drawer-lang {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

.nav-drawer-lang a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.3s ease;
}

.nav-drawer-lang a.active,
.nav-drawer-lang a:hover {
  background: var(--blue-accent);
  color: white;
  border-color: var(--blue-accent);
}

.nav-drawer-cta {
  display: block;
  background: white;
  color: var(--navy-deep);
  text-align: center;
  padding: 14px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.nav-drawer-cta:hover {
  background: var(--blue-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(91, 155, 213, 0.4);
}

.nav-drawer-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 16px;
  text-align: center;
  line-height: 1.6;
}

/* Lock body scroll when drawer open */
body.nav-drawer-open {
  overflow: hidden;
}

/* Hide drawer entirely on desktop */
@media (min-width: 881px) {
  .nav-drawer,
  .nav-drawer-overlay {
    display: none !important;
  }
}

/* ============================================
   PEPTIDOS 101 · TOC GRID with HOVER
   ============================================ */

.edu-toc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 36px 0 0;
}

.toc-card {
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: 36px 1fr 16px;
  gap: 14px;
  align-items: center;
  min-height: 64px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.toc-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--blue-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.toc-card:hover {
  border-color: var(--blue-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 20, 80, 0.08);
  min-height: 100px;
}

.toc-card:hover::before {
  transform: scaleY(1);
}

.toc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--blue-accent);
  font-weight: 600;
}

.toc-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.toc-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.toc-desc {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
  font-family: 'Montserrat', sans-serif;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.toc-card:hover .toc-desc {
  max-height: 80px;
  opacity: 1;
  margin-top: 4px;
}

.toc-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--blue-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.toc-card:hover .toc-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 880px) {
  .edu-toc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .toc-card { padding: 14px 16px; min-height: 56px; }
}

@media (max-width: 480px) {
  .edu-toc-grid { grid-template-columns: 1fr; }
}

/* ============================================
   PRODUCT PAGE — Real photo + inline size selector
   ============================================ */

/* Real vial photo (replaces vial-mock-large) */
.product-img {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--off-white) 100%);
  border-radius: 8px;
  padding: 24px;
  min-height: 480px;
}

.vial-real-photo {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.vial-real-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 50px rgba(0, 20, 80, 0.15));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.vial-real-photo:hover img {
  transform: translateY(-6px) scale(1.02);
}

/* Subtle radial backdrop behind the vial */
.product-img::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(40, 100, 160, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* INLINE SIZE SELECTOR (within product-info) */
.product-sizes-inline {
  margin: 24px 0 28px;
}

.psi-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 500;
  margin-bottom: 14px;
}

.psi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.psi-card {
  position: relative;
  background: white;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.psi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--cat-color, var(--blue-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.psi-card:hover {
  border-color: var(--cat-color, var(--blue-accent));
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 20, 80, 0.08);
}

.psi-card:hover::before { transform: scaleX(1); }

.psi-card-featured {
  background: linear-gradient(135deg, white 0%, rgba(40, 100, 160, 0.04) 100%);
  border-color: var(--cat-color, var(--blue-accent));
}

.psi-card-featured::before { transform: scaleX(1); }

.psi-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 4px 9px;
  background: var(--off-white);
  border-radius: 1px;
  align-self: flex-start;
}

.psi-badge-featured {
  background: var(--cat-color, var(--blue-accent));
  color: white;
}

.psi-mg {
  font-family: 'Montserrat', sans-serif;
  font-size: 44px;
  font-weight: 200;
  color: var(--cat-color, var(--navy-deep));
  letter-spacing: -2px;
  line-height: 1;
  margin: 4px 0;
}

.psi-mg span {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-left: 3px;
  color: var(--ink-soft);
}

.psi-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
}

.psi-price strong {
  color: var(--navy-deep);
  font-weight: 700;
  font-size: 14px;
}

.psi-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cat-color, var(--blue-accent));
  font-weight: 600;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  transition: transform 0.3s ease;
}

.psi-card:hover .psi-cta {
  transform: translateX(4px);
}

@media (max-width: 540px) {
  .psi-grid { grid-template-columns: 1fr; gap: 10px; }
  .psi-mg { font-size: 36px; }
  .product-img { min-height: 360px; padding: 20px; }
  .vial-real-photo { max-width: 240px; }
}

/* ============================================
   COLD CHAIN SECTION (/calidad/)
   ============================================ */

.quality-cold-chain {
  padding: 100px 0 !important;
  background: white;
}

.cc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.cc-content h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1.2px;
  line-height: 1.15;
  margin: 14px 0 18px;
}

.cc-content h2 .strong { font-weight: 700; }

.cc-content .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 36px;
}

.cc-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cc-feat {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: flex-start;
}

.cc-feat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.08) 0%, transparent 100%);
  color: var(--blue-accent);
  border-radius: 2px;
  font-size: 18px;
  flex-shrink: 0;
}

.cc-feat h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}

.cc-feat p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

.cc-img {
  margin: 0;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 20, 80, 0.18);
}

.cc-img picture,
.cc-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.cc-img:hover img {
  transform: scale(1.03);
}

.cc-img figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0, 20, 80, 0.85) 0%, transparent 100%);
  color: white;
  padding: 28px 24px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
}

@media (max-width: 880px) {
  .cc-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================
   RESEARCH INSIGHTS (Retatrutide)
   ============================================ */

.product-research-insights {
  padding: 80px 0 !important;
  background: var(--off-white);
}

.research-insights-head {
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
}

.research-insights-head h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1px;
  line-height: 1.15;
  margin: 12px 0 16px;
}

.research-insights-head h2 .strong { font-weight: 700; }

.research-insights-head .section-lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.research-insights-fig {
  max-width: 880px;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 20, 80, 0.15);
}

.research-insights-fig picture,
.research-insights-fig img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   MOBILE FIXES — Real critical issues
   ============================================ */

/* (1) Hide the cart pill on mobile — cart-icon already shows count, no need for "Carrito" text */
@media (max-width: 720px) {
  /* Make cart compact and visible like a standalone icon button */
  .nav-cart {
    padding: 6px 10px !important;
    font-size: 11px !important;
    background: transparent !important;
    border: 1px solid var(--line) !important;
  }
  .nav-cart-count {
    background: var(--blue-accent) !important;
    color: white !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 4px !important;
  }
  
  /* Lang switcher tighter */
  .nav-lang {
    gap: 0 !important;
  }
  .nav-lang a {
    padding: 6px 10px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }
  
  /* Bigger logo on mobile (was too small) */
  .nav-brand img {
    max-height: 38px !important;
    height: 38px !important;
    width: auto !important;
  }
  
  /* Reduce gap between nav-right items so things don't crowd */
  .nav-right {
    gap: 6px !important;
  }
}

/* (2) Eliminate huge whitespace at top of pages on mobile */
@media (max-width: 880px) {
  /* Cat-index hero: reduce excessive padding */
  .cat-index-hero {
    padding: 60px 0 40px !important;
  }
  
  .cat-hero-content {
    margin-bottom: 30px !important;
  }
  
  .cat-hero-content h1 {
    font-size: clamp(28px, 6vw, 40px) !important;
    margin: 12px 0 16px !important;
  }
  
  .cat-hero-content .lead {
    font-size: 16px !important;
  }
  
  /* Other heroes too */
  .prod-index-hero {
    padding: 100px 0 50px !important;
    min-height: 360px !important;
  }
  
  .contact-hero {
    padding: 100px 0 50px !important;
    min-height: 360px !important;
  }
  
  .quality-hero,
  .about-hero,
  .edu-hero {
    padding: 100px 0 50px !important;
  }
  
  .prod-hero-content h1,
  .contact-hero-content h1 {
    font-size: clamp(28px, 6vw, 40px) !important;
  }
  
  .prod-hero-content .lead,
  .contact-hero-content .lead {
    font-size: 15px !important;
  }
}

/* (3) Reduce general section padding on mobile */
@media (max-width: 720px) {
  .contact-channels,
  .contact-cases,
  .contact-form-section,
  .contact-faq,
  .quality-faq,
  .quality-pillars,
  .quality-process,
  .quality-cold-chain,
  .about-section,
  .featured-banner-section,
  .cta-section,
  .big-cta-section,
  .cat-grid-section,
  .cat-compare-section,
  .prod-catalog-section,
  .prod-included-section,
  .prod-compare-section,
  .product-research-insights {
    padding: 50px 0 !important;
  }
}

/* ============================================
   CATALOG CARDS — Fix vial photo overflow
   ============================================ */

/* Increase card height + reorganize layout to accommodate vial photos */
.prod-catalog-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.prod-rich-card {
  min-height: 460px !important;
  padding: 22px 20px 24px !important;
  display: grid !important;
  grid-template-rows: auto 200px auto auto auto auto !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.prc-top {
  grid-row: 1;
  margin-bottom: 12px !important;
}

/* The icon container is now a defined box for the vial photo */
.prc-icon {
  grid-row: 2;
  width: 100% !important;
  height: 100% !important;
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  background: linear-gradient(180deg, transparent 0%, rgba(40, 100, 160, 0.04) 100%);
  border-radius: 4px;
  overflow: hidden;
}

.prc-icon::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 8px;
  background: radial-gradient(ellipse at center, rgba(0, 20, 80, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.prc-icon picture,
.prc-icon img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 20, 80, 0.12));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.prod-rich-card:hover .prc-icon img {
  transform: translateY(-4px) scale(1.05);
}

/* Disable rotation on real photos (was for SVG) */
.prod-rich-card:hover .prc-icon {
  transform: none !important;
}

.prod-rich-card h3 {
  grid-row: 3;
  margin: 4px 0 6px !important;
  font-size: 18px !important;
}

.prc-desc {
  grid-row: 4;
  margin: 0 0 12px !important;
  font-size: 12px !important;
  line-height: 1.5;
  min-height: 36px;
}

.prc-stats {
  grid-row: 5;
  margin: 0 0 14px !important;
  padding: 10px 12px !important;
}

.prc-foot {
  grid-row: 6;
  margin-top: 0 !important;
  padding-top: 14px !important;
}

/* Mobile: 2 columns or 1 column with proper sizing */
@media (max-width: 1100px) {
  .prod-catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 880px) {
  .prod-catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .prod-rich-card {
    min-height: 420px !important;
    grid-template-rows: auto 160px auto auto auto auto !important;
  }
}

@media (max-width: 480px) {
  .prod-catalog-grid {
    grid-template-columns: 1fr;
  }
  .prod-rich-card {
    min-height: 440px !important;
    grid-template-rows: auto 200px auto auto auto auto !important;
  }
}

/* ============================================
   FAQ GRID CARDS (Péptidos 101)
   ============================================ */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 1100px;
  margin: 40px auto 0;
}

.faq-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}

.faq-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 20, 80, 0.08);
  border-color: var(--blue-accent);
}

.faq-card[open] {
  border-color: var(--blue-accent);
  box-shadow: 0 20px 48px rgba(0, 20, 80, 0.1);
}

.faq-card[open]::before { transform: scaleX(1); }

.faq-card summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px !important;
  display: grid !important;
  grid-template-columns: 1fr 32px;
  gap: 14px;
  align-items: center;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--navy-deep) !important;
  letter-spacing: -0.2px !important;
  line-height: 1.4 !important;
  user-select: none;
}

.faq-card summary::-webkit-details-marker { display: none; }

.faq-card summary::after {
  content: '+';
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 200;
  color: var(--blue-accent);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 100, 160, 0.06);
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  line-height: 1;
}

.faq-card[open] summary::after {
  content: '×';
  background: var(--blue-accent);
  color: white;
  transform: rotate(0deg);
}

.faq-card p {
  padding: 0 24px 22px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--ink-soft) !important;
  margin: 0 !important;
  animation: faqOpen 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes faqOpen {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .faq-card summary {
    padding: 18px 20px !important;
    font-size: 14px !important;
  }
  .faq-card p {
    padding: 0 20px 18px !important;
    font-size: 13.5px !important;
  }
}

/* ============================================
   TOC GRID — make it bigger and more readable
   ============================================ */

.edu-toc-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px !important;
  max-width: 1100px !important;
  margin: 40px auto 0 !important;
}

.toc-card {
  padding: 22px 22px !important;
  min-height: 88px !important;
  grid-template-columns: 44px 1fr 24px !important;
  gap: 16px !important;
}

.toc-num {
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

.toc-title {
  font-size: 15.5px !important;
}

.toc-desc {
  font-size: 13px !important;
}

.toc-card:hover {
  min-height: 130px !important;
}

.toc-arrow {
  font-size: 16px !important;
}

@media (max-width: 880px) {
  .edu-toc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .edu-toc-grid {
    grid-template-columns: 1fr !important;
  }
  .toc-card {
    padding: 18px 18px !important;
    min-height: 72px !important;
  }
}

/* ============================================
   HOME QUALITY RICH SECTION
   ============================================ */

.home-quality-rich {
  padding: 100px 0;
  background: linear-gradient(180deg, white 0%, var(--off-white) 100%);
  position: relative;
  overflow: hidden;
}

.home-quality-rich::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(40, 100, 160, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.hqr-head {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
  position: relative;
}

.hqr-head h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin: 16px 0 20px;
}

.hqr-head h2 .strong { font-weight: 700; }

.hqr-head .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.65;
}

.hqr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}

.hqr-card {
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.hqr-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue-accent) 0%, var(--blue-light) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hqr-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(40, 100, 160, 0.04) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.hqr-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 20, 80, 0.12);
  border-color: var(--blue-accent);
}

.hqr-card:hover::before { transform: scaleX(1); }
.hqr-card:hover::after { opacity: 1; }

.hqr-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--blue-accent);
  font-weight: 600;
  margin-bottom: 4px;
}

.hqr-icon {
  width: 56px;
  height: 56px;
  color: var(--blue-accent);
  margin: 4px 0 12px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hqr-icon svg { width: 100%; height: 100%; }

.hqr-card:hover .hqr-icon {
  transform: scale(1.1) rotate(-4deg);
}

.hqr-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 0 0 4px;
  letter-spacing: -0.4px;
}

.hqr-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-weight: 500;
}

.hqr-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 18px;
  flex-grow: 1;
}

.hqr-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy-deep);
  font-weight: 700;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.06) 0%, transparent 100%);
  border-left: 2px solid var(--blue-accent);
  align-self: flex-start;
}

.hqr-card-summary {
  background: linear-gradient(135deg, var(--navy-deep) 0%, #001a5e 100%);
  color: white;
}

.hqr-card-summary::before {
  background: linear-gradient(90deg, var(--blue-light) 0%, white 100%);
}

.hqr-card-summary .hqr-num,
.hqr-card-summary .hqr-icon {
  color: var(--blue-light);
}

.hqr-card-summary h3 {
  color: white;
}

.hqr-card-summary .hqr-sub {
  color: rgba(255, 255, 255, 0.6);
}

.hqr-card-summary .hqr-desc {
  color: rgba(255, 255, 255, 0.8);
}

.hqr-card-summary .hqr-tag {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  border-left-color: var(--blue-light);
  color: white;
}

.hqr-cta {
  margin-top: 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.hqr-cta-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 700px;
  line-height: 1.55;
}

.hqr-cta-text strong {
  color: var(--navy-deep);
  font-weight: 700;
  font-style: normal;
  font-family: 'Montserrat', sans-serif;
}

@media (max-width: 1100px) {
  .hqr-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .home-quality-rich { padding: 60px 0; }
  .hqr-head { margin-bottom: 40px; }
  .hqr-grid { grid-template-columns: 1fr; gap: 14px; }
  .hqr-card { padding: 24px 22px 22px; }
  .hqr-card h3 { font-size: 19px; }
}

/* ============================================
   CINEMATIC ANIMATIONS — global polish
   ============================================ */

/* Section reveal on scroll */
.section-cinematic .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-cinematic .reveal.is-visible,
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger reveal */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.47s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.54s; }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 0.61s; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 0.68s; }
.reveal-stagger.is-visible > *:nth-child(11) { transition-delay: 0.75s; }

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   MOBILE NAV — definitive compact version
   ============================================ */

@media (max-width: 720px) {
  /* Hide "Carrito" text, show only icon */
  .nav-cart {
    font-size: 0 !important;
    padding: 8px !important;
    width: 38px !important;
    height: 38px !important;
    border: none !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }
  
  /* Inject cart icon via ::before */
  .nav-cart::before {
    content: '';
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001B3B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  /* Cart count overlay as small badge in corner of icon */
  .nav-cart .nav-cart-count {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    background: var(--blue-accent) !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border: 1.5px solid var(--off-white) !important;
  }
  
  /* Remove duplicate / extra cart instances if any */
  .nav-right .nav-cart + .nav-cart { display: none !important; }
  
  /* Make hamburger smaller and lighter weight */
  .nav-toggle {
    width: 38px !important;
    height: 38px !important;
    background: var(--navy-deep) !important;
    border-radius: 4px !important;
  }
  
  /* Lang switcher: only show active language, click toggles */
  .nav-lang { display: none !important; }
  
  /* Bigger, sharper logo */
  .nav-brand img {
    max-height: 42px !important;
    height: 42px !important;
  }
  
  /* Eliminate any extra height in navbar */
  .navbar {
    padding: 10px 0 !important;
  }
  
  .nav-container {
    padding: 0 16px !important;
  }
  
  /* Hero mobile: less wasteful padding */
  .cat-index-hero {
    padding: 40px 0 30px !important;
    min-height: auto !important;
  }
  
  .cat-hero-content {
    margin-bottom: 24px !important;
  }
  
  .cat-hero-content .tag {
    font-size: 10px !important;
  }
  
  .cat-hero-content h1 {
    font-size: clamp(28px, 7vw, 38px) !important;
    margin: 10px 0 14px !important;
    line-height: 1.1 !important;
  }
  
  .cat-hero-content .lead {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  
  .cat-hero-stats {
    gap: 24px !important;
    padding-top: 24px !important;
  }
  
  .cat-stat {
    flex: 1 !important;
  }
  
  .cat-stat-num {
    font-size: 36px !important;
  }
  
  .cat-stat-label {
    font-size: 10px !important;
  }
}

/* Add lang switcher inside drawer instead */
.nav-drawer-lang { display: flex !important; }

/* ============================================
   HERO VISUAL PREMIUM (with all-vials-premium image)
   ============================================ */

.hero-visual-premium {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 20, 80, 0.15),
              0 8px 24px rgba(0, 20, 80, 0.06);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  isolation: isolate;
}

.hero-visual-premium:hover {
  transform: translateY(-4px) scale(1.005);
}

.hero-visual-premium picture,
.hero-visual-premium img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-visual-premium:hover img {
  transform: scale(1.03);
}

/* Shine overlay — moving gradient sweep on hover */
.hero-visual-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.12) 55%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: -100% 0;
  pointer-events: none;
  z-index: 2;
  transition: background-position 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-visual-premium:hover .hero-visual-shine {
  background-position: 200% 0;
}

/* Subtle floating animation idle */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.hero-visual-premium {
  animation: heroFloat 6s ease-in-out infinite;
}

.hero-visual-premium:hover {
  animation-play-state: paused;
}

/* ============================================
   DRAMATIC BANNER (cinematic break with dark image)
   ============================================ */

.dramatic-banner {
  position: relative;
  width: 100%;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.dramatic-banner picture,
.dramatic-banner > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.dramatic-banner picture img {
  transform: scale(1.05);
  transition: transform 12s cubic-bezier(0.22, 1, 0.36, 1);
}

.dramatic-banner:hover picture img,
.dramatic-banner.is-visible picture img {
  transform: scale(1);
}

.dramatic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 12, 35, 0.85) 0%,
    rgba(0, 20, 80, 0.5) 45%,
    rgba(0, 20, 80, 0.15) 70%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

.dramatic-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 80px 48px;
  margin-right: auto;
  color: white;
  margin-left: clamp(20px, 8vw, 120px);
}

.dramatic-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue-light);
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid rgba(91, 155, 213, 0.4);
  border-radius: 100px;
  margin-bottom: 24px;
}

.dramatic-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 200;
  letter-spacing: -2px;
  line-height: 1.05;
  color: white;
  margin: 0 0 24px;
}

.dramatic-title .strong {
  font-weight: 700;
  color: var(--blue-light);
}

.dramatic-lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 0 32px;
}

.dramatic-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dramatic-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.dramatic-pill:hover {
  background: rgba(91, 155, 213, 0.25);
  border-color: var(--blue-light);
  transform: translateY(-2px);
}

@media (max-width: 880px) {
  .dramatic-banner {
    min-height: 480px;
  }
  .dramatic-content {
    padding: 60px 24px;
    margin-left: 24px;
    margin-right: 24px;
    max-width: 100%;
  }
  .dramatic-title {
    font-size: clamp(34px, 9vw, 48px);
  }
  .dramatic-lead {
    font-size: 17px;
  }
}

@media (max-width: 540px) {
  .dramatic-banner { min-height: 420px; }
  .dramatic-content { padding: 50px 20px; }
  .dramatic-overlay {
    background: linear-gradient(180deg, rgba(0, 12, 35, 0.85) 0%, rgba(0, 20, 80, 0.55) 100%);
  }
}

/* ============================================
   PROD INDEX HERO with light banner image
   ============================================ */

.prod-index-hero {
  position: relative;
  overflow: hidden;
}

.prod-index-hero::before {
  /* Subtle dark wash so text stays readable over the bright image */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(248, 246, 240, 0.95) 0%, rgba(248, 246, 240, 0.65) 50%, rgba(248, 246, 240, 0.85) 100%);
  z-index: 1;
}

.prod-index-hero > .container {
  position: relative;
  z-index: 2;
}

/* ============================================
   REVEAL FAILSAFE — ensure content always visible
   This goes LAST in the stylesheet to override any
   previous opacity:0 rules that might leave content hidden.
   ============================================ */

/* Always show content. Animation runs on top via JS-added .is-visible,
   but if JS fails or observer misses, the content is still visible. */
.reveal,
.reveal-stagger > * {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

/* If you want the entrance animation, JS must add .reveal--init class.
   We run that for elements above the fold, so the animation still plays. */
.reveal.reveal--init,
.reveal-stagger.reveal--init > * {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.reveal--init.is-visible,
.reveal-stagger.reveal--init > *.is-visible,
.reveal-stagger.reveal--init.is-visible > * {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.reveal-stagger.reveal--init.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.reveal--init.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.reveal--init.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.reveal--init.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.reveal--init.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.reveal--init.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger.reveal--init.is-visible > *:nth-child(7) { transition-delay: 0.47s; }
.reveal-stagger.reveal--init.is-visible > *:nth-child(8) { transition-delay: 0.54s; }

/* ============================================
   HOME QUALITY RICH — DEFINITIVE VISIBILITY LOCK
   This section MUST always be visible. No exceptions.
   ============================================ */

.home-quality-rich,
.home-quality-rich *,
.home-quality-rich .hqr-head,
.home-quality-rich .hqr-grid,
.home-quality-rich .hqr-card,
.home-quality-rich .hqr-cta {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Re-enable hover transforms only (not initial) */
.home-quality-rich .hqr-card:hover {
  transform: translateY(-6px) !important;
}

.home-quality-rich .hqr-card:hover .hqr-icon {
  transform: scale(1.1) rotate(-4deg) !important;
}

/* ============================================
   HERO VISUAL — visibility lock (fixes invisible image bug)
   .hero-visual has opacity:0 + scaleIn animation.
   .hero-visual-premium overrides with heroFloat which has no opacity → image stays invisible.
   This forces opacity:1 always.
   ============================================ */

.hero-visual,
.hero-visual.hero-visual-premium,
.hero-visual-premium {
  opacity: 1 !important;
}

.hero-visual-premium img,
.hero-visual-premium picture {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================
   HERO SPLIT — side-by-side, image full-bleed right
   ============================================ */

.hero.hero-split {
  padding: 0 !important;
  background: var(--off-white);
  min-height: 600px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  opacity: 1 !important;
  animation: none !important;
}

.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 600px;
  align-items: stretch;
}

.hero-split-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 80px 60px 80px 40px;
  background: var(--off-white);
}

.hero-split-inner {
  max-width: 580px;
  width: 100%;
  margin-left: auto;
}

.hero-split-content .tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 600;
  margin-bottom: 24px;
}

.hero-split-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 200;
  color: var(--navy-deep);
  letter-spacing: -2px;
  line-height: 1.05;
  margin: 0 0 28px;
}

.hero-split-content h1 strong {
  display: block;
  font-weight: 700;
}

.hero-split-content .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 540px;
}

.hero-split-content .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
}

.hero-split-content .hero-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.hero-split-content .trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-split-content .trust-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: -0.5px;
  line-height: 1;
}

.hero-split-content .trust-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

.hero-split-image {
  position: relative;
  overflow: hidden;
  background: #050a18;
  min-height: 600px;
}

.hero-split-image picture,
.hero-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Subtle gradient on the LEFT edge of the image so the seam between
   off-white and dark image looks intentional, not abrupt */
.hero-split-image::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 80px;
  background: linear-gradient(90deg, var(--off-white) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Tablet: still side-by-side but tighter padding */
@media (max-width: 1100px) {
  .hero-split-content { padding: 60px 32px; }
  .hero-split-content h1 { font-size: clamp(32px, 5vw, 48px); }
  .hero-split-content .hero-trust { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* Mobile: stack vertically */
@media (max-width: 880px) {
  .hero.hero-split { min-height: auto; }
  .hero-split-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-split-image {
    min-height: 320px;
    order: -1;
  }
  .hero-split-image::before { display: none; }
  .hero-split-content {
    padding: 50px 24px 60px;
    justify-content: center;
  }
  .hero-split-inner { margin: 0 auto; }
  .hero-split-content h1 { font-size: clamp(32px, 8vw, 44px); }
  .hero-split-content .lead { font-size: 16px; }
  .hero-split-content .hero-trust { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ============================================
   TAGLINE CTA SECTION — between 5 Series and Featured
   ============================================ */

.tagline-cta-section {
  padding: 70px 24px;
  text-align: center;
  background: var(--off-white, #F8F6F0);
}

.tagline-cta-section .kit-cta {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.tagline-cta-section .kit-promise {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--ink-soft, #5A5A5A);
  margin: 0;
  max-width: 640px;
}

.tagline-cta-section .kit-promise em {
  font-style: italic;
}

.tagline-cta-section .btn {
  margin: 0;
}

@media (max-width: 720px) {
  .tagline-cta-section {
    padding: 50px 20px;
  }
  .tagline-cta-section .kit-cta {
    gap: 22px;
  }
}

/* ============================================
   TIGHTER VERTICAL SPACING — home sections
   Reduces aire entre:
   - 5 Series → Tagline CTA
   - Tagline CTA → Featured Retatrutide
   - Kit Completo → Quality Rich
   ============================================ */

.tagline-cta-section {
  padding: 32px 24px !important;
}

@media (max-width: 720px) {
  .tagline-cta-section {
    padding: 24px 20px !important;
  }
}

/* Reduce padding bottom of section-kit (Kit Completo) so Quality starts closer */
section.section-kit {
  padding: 70px 0 50px 0 !important;
}

/* Reduce padding top of home-quality-rich so it sits closer to Kit Completo */
.home-quality-rich {
  padding: 50px 0 100px 0 !important;
}

@media (max-width: 720px) {
  section.section-kit {
    padding: 50px 0 36px 0 !important;
  }
  .home-quality-rich {
    padding: 36px 0 60px 0 !important;
  }
}

/* ============================================
   TAGLINE CTA — fix: remove inherited border + tighter top
   ============================================ */

.tagline-cta-section .kit-cta {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Pull the whole tagline section up — closer to 5 Series above */
.tagline-cta-section {
  padding: 12px 24px 40px !important;
}

@media (max-width: 720px) {
  .tagline-cta-section {
    padding: 8px 20px 32px !important;
  }
}

/* ============================================
   QUALITY SECTION — top padding halved
   ============================================ */
.home-quality-rich {
  padding-top: 25px !important;
}

@media (max-width: 720px) {
  .home-quality-rich {
    padding-top: 18px !important;
  }
}

/* ============================================
   KIT SUPPLY NOTE — clarification under the 8 pills
   ============================================ */
.kit-supply-note {
  margin-top: 32px;
  padding: 18px 22px;
  background: rgba(40, 100, 160, 0.04);
  border-left: 3px solid var(--blue-accent, #2864A0);
  border-radius: 3px;
}

.kit-supply-note p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft, #5A5A5A);
  margin: 0;
}

.kit-supply-note strong {
  font-style: normal;
  color: var(--navy-deep, #000C23);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: 0.3px;
}

@media (max-width: 720px) {
  .kit-supply-note {
    padding: 14px 16px;
    margin-top: 24px;
  }
  .kit-supply-note p { font-size: 14px; }
}

/* ============================================
   KIT GRID — 4 columnas para 8 cards en 2 filas
   ============================================ */
.kit-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

@media (max-width: 1100px) {
  .kit-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 880px) {
  .kit-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 540px) {
  .kit-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Tighter padding inside kit-item to fit in narrower 4-col layout */
@media (min-width: 1100px) {
  .kit-item {
    padding: 28px 24px !important;
  }
  .kit-item h3 {
    font-size: 17px !important;
  }
  .kit-item p {
    font-size: 13.5px !important;
  }
}

/* ============================================
   QUALITY SECTION FEATURE IMAGE — between lead and 6 cards
   ============================================ */
.hqr-feature-img {
  margin: 40px auto 50px;
  max-width: 1100px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 20, 80, 0.18);
}

.hqr-feature-img picture,
.hqr-feature-img img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 720px) {
  .hqr-feature-img {
    margin: 28px auto 32px;
    border-radius: 3px;
  }
}

/* ============================================
   CATEGORY CARDS — EXPANDABLE
   ============================================ */

.cat-rich-card.cat-rich-expandable {
  cursor: default;
  transition: box-shadow 0.3s ease;
}

.cat-rich-card.cat-rich-expandable:hover {
  transform: none;
}

/* The "Saber más ↓" arrow becomes a clickable button */
.cat-rich-expandable .cat-rich-arrow {
  cursor: pointer;
  user-select: none;
  transition: color 0.2s, transform 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cat-rich-expandable .cat-rich-arrow:hover {
  color: var(--blue-accent, #2864A0);
}

.cat-rich-expandable.is-expanded .cat-rich-arrow {
  color: var(--blue-accent, #2864A0);
}

/* The expanded content area */
.cat-rich-expanded {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.35s ease,
              opacity 0.3s ease;
  opacity: 0;
}

.cat-rich-expandable.is-expanded .cat-rich-expanded {
  max-height: 1500px;
  opacity: 1;
}

.cat-rich-expanded-inner {
  padding: 28px 28px 32px;
  border-top: 1px solid var(--line, #E0DDD3);
  margin-top: 24px;
}

.cat-rich-expanded-inner p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft, #5A5A5A);
  margin: 0 0 16px;
}

.cat-rich-expanded-inner p:last-child {
  margin-bottom: 0;
}

.cat-rich-expanded-inner strong {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  color: var(--navy-deep, #000C23);
  font-weight: 600;
}

.cat-rich-expanded-inner em {
  font-style: italic;
}

/* Linkify peptide names */
.cat-mol-link {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.2s, color 0.2s;
}

.cat-mol-link:hover {
  opacity: 1;
  color: var(--blue-accent, #2864A0);
}

@media (max-width: 720px) {
  .cat-rich-expanded-inner {
    padding: 20px 20px 24px;
    margin-top: 18px;
  }
  .cat-rich-expanded-inner p {
    font-size: 15px;
  }
}

/* ============================================
   CATEGORY PEPTIDE PILLS — pro buttons (override underline style)
   ============================================ */

.cat-rich-mol-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin-top: 18px !important;
}

.cat-rich-mol-list .cat-mol-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  border: 1px solid currentColor !important;
  border-bottom: 1px solid currentColor !important;
  padding: 7px 14px 7px 14px !important;
  border-radius: 100px !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: transparent;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

/* Subtle arrow that appears on hover */
.cat-rich-mol-list .cat-mol-link::after {
  content: '→';
  display: inline-block;
  margin-left: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease;
  font-size: 13px;
}

.cat-rich-mol-list .cat-mol-link:hover {
  background: currentColor !important;
  color: white !important;  /* fallback only — overridden below */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 20, 80, 0.12);
  opacity: 1;
}

.cat-rich-mol-list .cat-mol-link:hover::after {
  max-width: 16px;
  opacity: 1;
  margin-left: 4px;
}

/* On hover, text becomes white but we need to keep the arrow visible too —
   we use a trick: put the link content in a span and keep currentColor as the
   bg, but for the inner text we need a contrasting color. Pure CSS solution:
   we use mix-blend-mode or just rely on the bg being navy/teal/etc. */

/* Per-category coloring of pills (inherits from data-cat parent card) */
.cat-rich-card[data-cat="metabolic"] .cat-mol-link {
  color: var(--metabolic, #E8A445);
  border-color: var(--metabolic, #E8A445);
}
.cat-rich-card[data-cat="metabolic"] .cat-mol-link:hover {
  background: var(--metabolic, #E8A445) !important;
  color: white !important;
  border-color: var(--metabolic, #E8A445) !important;
}

.cat-rich-card[data-cat="recovery"] .cat-mol-link {
  color: var(--recovery, #5B8E5B);
  border-color: var(--recovery, #5B8E5B);
}
.cat-rich-card[data-cat="recovery"] .cat-mol-link:hover {
  background: var(--recovery, #5B8E5B) !important;
  color: white !important;
  border-color: var(--recovery, #5B8E5B) !important;
}

.cat-rich-card[data-cat="longevity"] .cat-mol-link {
  color: var(--longevity, #7A5B9B);
  border-color: var(--longevity, #7A5B9B);
}
.cat-rich-card[data-cat="longevity"] .cat-mol-link:hover {
  background: var(--longevity, #7A5B9B) !important;
  color: white !important;
  border-color: var(--longevity, #7A5B9B) !important;
}

.cat-rich-card[data-cat="hormonal"] .cat-mol-link {
  color: var(--hormonal, #C45959);
  border-color: var(--hormonal, #C45959);
}
.cat-rich-card[data-cat="hormonal"] .cat-mol-link:hover {
  background: var(--hormonal, #C45959) !important;
  color: white !important;
  border-color: var(--hormonal, #C45959) !important;
}

.cat-rich-card[data-cat="premium"] .cat-mol-link {
  color: var(--premium, #8E7A5B);
  border-color: var(--premium, #8E7A5B);
}
.cat-rich-card[data-cat="premium"] .cat-mol-link:hover {
  background: var(--premium, #8E7A5B) !important;
  color: white !important;
  border-color: var(--premium, #8E7A5B) !important;
}

@media (max-width: 720px) {
  .cat-rich-mol-list .cat-mol-link {
    font-size: 11px;
    padding: 6px 12px !important;
  }
}

/* ============================================
   KIT INFOGRAPHIC — premium banner image
   shown above the 8-pill grid in product pages
   ============================================ */
.kit-infographic {
  margin: 36px 0 36px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 20, 80, 0.18),
              0 8px 24px rgba(0, 20, 80, 0.08);
  background: linear-gradient(135deg, #FAF8F2 0%, #F0EDE3 100%);
}

.kit-infographic picture,
.kit-infographic img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 720px) {
  .kit-infographic {
    margin: 24px 0;
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0, 20, 80, 0.12);
  }
}

/* ============================================
   KIT LAYOUT — 2 columns: infographic image (left) + pills grid (right)
   Used in product pages and home Kit Completo section
   ============================================ */

.kit-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 1.2fr;
  gap: 32px;
  align-items: start;
  margin: 40px 0 32px;
}

.kit-layout .kit-infographic {
  margin: 0;
  position: sticky;
  top: 100px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 20, 80, 0.16),
              0 6px 18px rgba(0, 20, 80, 0.06);
  background: linear-gradient(135deg, #FAF8F2 0%, #F0EDE3 100%);
  position: relative;
}

.kit-layout .kit-infographic picture,
.kit-layout .kit-infographic img {
  width: 100%;
  height: auto;
  display: block;
}

/* "Imagen referencial" badge */
.kit-infographic-ref {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 12, 35, 0.78);
  color: white;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 2;
}

/* Pills column: tighter grid since horizontal space is reduced */
.kit-layout-pills .prod-kit-grid,
.kit-layout-pills .kit-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
}

/* Tablet: stack pills 2 cols still */
@media (max-width: 1100px) {
  .kit-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .kit-layout .kit-infographic {
    position: static;
    max-width: 720px;
    margin: 0 auto;
  }
  .kit-layout-pills .prod-kit-grid,
  .kit-layout-pills .kit-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Mobile */
@media (max-width: 720px) {
  .kit-layout {
    margin: 28px 0 24px;
    gap: 20px;
  }
  .kit-layout .kit-infographic {
    border-radius: 4px;
  }
  .kit-layout-pills .prod-kit-grid,
  .kit-layout-pills .kit-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 540px) {
  .kit-layout-pills .prod-kit-grid,
  .kit-layout-pills .kit-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Override the previous home kit-grid 4-col rule when inside .kit-layout-pills */
.kit-layout-pills .kit-grid {
  grid-template-columns: 1fr 1fr !important;
}

/* Tighten kit-item padding inside the narrower right column */
.kit-layout-pills .kit-item {
  padding: 22px 20px !important;
}

.kit-layout-pills .kit-item h3 {
  font-size: 16px !important;
}

.kit-layout-pills .kit-item p {
  font-size: 13px !important;
  line-height: 1.55;
}

/* ============================================
   KIT IMAGE ONLY — home page (single column, no pills)
   ============================================ */

.kit-image-only {
  margin: 40px auto 0;
  max-width: 1100px;
  width: 100%;
}

.kit-image-only .kit-infographic {
  position: static;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 20, 80, 0.18),
              0 8px 24px rgba(0, 20, 80, 0.08);
  background: linear-gradient(135deg, #FAF8F2 0%, #F0EDE3 100%);
}

.kit-image-only .kit-infographic picture,
.kit-image-only .kit-infographic img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 720px) {
  .kit-image-only {
    margin: 28px auto 0;
  }
  .kit-image-only .kit-infographic {
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0, 20, 80, 0.12);
  }
}

/* ============================================
   Q&A UNIFIED — Péptidos 101 (rebuilt)
   ============================================ */

/* Hero */
.qa-hero {
  background: linear-gradient(180deg, var(--off-white, #F8F6F0) 0%, white 100%);
  padding: 80px 24px 60px;
  text-align: center;
}
.qa-hero .tag {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue-accent, #2864A0);
  margin-bottom: 18px;
}
.qa-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 200;
  letter-spacing: -1.5px;
  color: var(--navy-deep, #000C23);
  margin: 0 0 20px;
}
.qa-hero .lead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft, #5A5A5A);
  max-width: 680px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .qa-hero { padding: 60px 20px 40px; }
}

/* Filter section */
.qa-section {
  padding: 50px 24px 100px;
  background: var(--off-white, #F8F6F0);
}

.qa-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line, #E0DDD3);
}

.qa-chip {
  display: inline-flex;
  align-items: center;
  background: white;
  border: 1px solid var(--line, #E0DDD3);
  border-radius: 100px;
  padding: 9px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--ink, #1A1A1A);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}
.qa-chip:hover {
  border-color: var(--blue-accent, #2864A0);
  color: var(--blue-accent, #2864A0);
  transform: translateY(-1px);
}
.qa-chip-active {
  background: var(--navy-deep, #000C23);
  color: white;
  border-color: var(--navy-deep, #000C23);
}
.qa-chip-active:hover {
  background: var(--navy-deep, #000C23);
  color: white;
  border-color: var(--navy-deep, #000C23);
}

/* Grid */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 1100px) {
  .qa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .qa-grid { grid-template-columns: 1fr; gap: 12px; }
  .qa-section { padding: 32px 16px 60px; }
}

/* Card */
.qa-card {
  background: white;
  border: 1px solid var(--line, #E0DDD3);
  border-radius: 4px;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.qa-card:hover {
  border-color: var(--blue-light, #5B9BD5);
  box-shadow: 0 8px 24px rgba(0, 20, 80, 0.06);
}

.qa-card[open] {
  border-color: var(--blue-accent, #2864A0);
  box-shadow: 0 12px 32px rgba(0, 20, 80, 0.10);
  /* Allow long card to span 2 cols when expanded */
}

.qa-card[open].qa-card-long {
  grid-column: span 2;
}

@media (max-width: 1100px) {
  .qa-card[open].qa-card-long {
    grid-column: span 2;
  }
}
@media (max-width: 720px) {
  .qa-card[open].qa-card-long {
    grid-column: span 1;
  }
}

.qa-card summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.qa-card summary::-webkit-details-marker { display: none; }

.qa-card-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-accent, #2864A0);
  font-weight: 600;
  width: fit-content;
}

.qa-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-deep, #000C23);
  line-height: 1.4;
  letter-spacing: -0.2px;
  padding-right: 32px;
}

.qa-card-toggle {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: var(--blue-accent, #2864A0);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.qa-card[open] .qa-card-toggle {
  transform: rotate(45deg);
}

/* Body */
.qa-card-body {
  padding: 0 22px 22px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft, #5A5A5A);
  border-top: 1px solid var(--line, #E0DDD3);
  margin-top: 4px;
  padding-top: 18px;
}

.qa-card-body p {
  margin: 0 0 12px;
  font-style: italic;
}

.qa-card-body p:last-child { margin-bottom: 0; }

.qa-card-body strong {
  font-style: normal;
  color: var(--navy-deep, #000C23);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.qa-card-body em { font-style: italic; }

/* Long-card content (educational sections with rich formatting) */
.qa-card-long .qa-card-body h3,
.qa-card-long .qa-card-body h4 {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  color: var(--navy-deep, #000C23);
  margin: 18px 0 10px;
}

.qa-card-long .qa-card-body h3 { font-size: 17px; font-weight: 700; }
.qa-card-long .qa-card-body h4 { font-size: 14px; font-weight: 600; }

.qa-card-long .qa-card-body ul,
.qa-card-long .qa-card-body ol {
  margin: 10px 0 14px 18px;
  padding: 0;
}
.qa-card-long .qa-card-body li {
  margin-bottom: 6px;
  font-style: italic;
}

.qa-card-long .qa-card-body .edu-callout {
  background: rgba(40, 100, 160, 0.06);
  border-left: 3px solid var(--blue-accent, #2864A0);
  padding: 14px 18px;
  border-radius: 3px;
  margin: 16px 0;
  font-style: normal;
}
.qa-card-long .qa-card-body .edu-callout strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.qa-card-long .qa-card-body .edu-callout p {
  font-style: italic;
  margin: 0;
  font-size: 14px;
}

.qa-card-long .qa-card-body .edu-mechanism {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.qa-card-long .qa-card-body .mech-step {
  background: var(--off-white, #F8F6F0);
  padding: 14px;
  border-radius: 3px;
}
.qa-card-long .qa-card-body .mech-num {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--navy-deep, #000C23);
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  margin-bottom: 8px;
  font-style: normal;
}
.qa-card-long .qa-card-body .mech-step h4 {
  font-size: 13px;
  margin: 4px 0 4px;
}
.qa-card-long .qa-card-body .mech-step p {
  font-size: 13px;
  margin: 0;
}

.qa-card-long .qa-card-body .edu-formula {
  background: var(--navy-deep, #000C23);
  color: white;
  padding: 16px 20px;
  border-radius: 3px;
  margin: 16px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-style: normal;
  font-size: 13px;
}
.qa-card-long .qa-card-body .formula-line {
  margin-bottom: 10px;
}
.qa-card-long .qa-card-body .formula-line span {
  background: rgba(255,255,255,0.1);
  padding: 2px 6px;
  border-radius: 2px;
}
.qa-card-long .qa-card-body .formula-example {
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.6;
}

/* Hide cards that don't match filter */
.qa-card.qa-card-hidden { display: none; }

.qa-no-results {
  text-align: center;
  padding: 60px 24px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--ink-soft, #5A5A5A);
  font-size: 17px;
}

/* CTA at bottom */
.edu-cta {
  background: var(--navy-deep, #000C23);
  color: white;
  padding: 80px 24px;
  text-align: center;
}
.edu-cta h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 200;
  margin: 0 0 16px;
  letter-spacing: -1px;
}
.edu-cta .lead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  max-width: 640px;
  margin: 0 auto 30px;
}
.edu-cta .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.edu-cta .btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: white;
}
.edu-cta .btn-outline:hover {
  background: white;
  color: var(--navy-deep, #000C23);
  border-color: white;
}

/* ============================================
   NAVBAR — MOBILE FINAL FIX (May 10, 2026)
   Compact header on mobile: minimize vertical space, square hamburger,
   hide language switcher (moved to drawer), cart as icon-only.
   ============================================ */

@media (max-width: 720px) {
  /* (1) Tighter navbar — less vertical padding */
  .navbar {
    padding: 8px 0 !important;
  }
  .nav-container {
    padding: 0 14px !important;
    min-height: 52px !important;
    align-items: center !important;
  }
  
  /* (2) Smaller logo */
  .nav-brand img {
    max-height: 32px !important;
    height: 32px !important;
  }
  
  /* (3) Hide language switcher on mobile — moved into drawer */
  .nav-lang {
    display: none !important;
  }
  
  /* (4) Cart: icon-only, no "Carrito" text */
  .nav-cart {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    background: transparent !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important; /* hide "Carrito" text */
    position: relative !important;
    color: transparent !important;
  }
  
  /* Cart icon (using ::before pseudo) */
  .nav-cart::before {
    content: '🛒' !important;
    font-size: 16px !important;
    color: var(--navy-deep, #001450) !important;
    line-height: 1 !important;
  }
  
  /* Count badge: red dot in top-right corner */
  .nav-cart-count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    width: 16px !important;
    height: 16px !important;
    background: var(--blue-accent, #2864A0) !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
    border: 2px solid white !important;
  }
  
  /* (5) Hamburger button: SQUARE, compact, NOT rectangular */
  .nav-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
    background: var(--navy-deep, #001450) !important;
    border: none !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
    font-size: 0 !important;
    color: transparent !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    flex: 0 0 38px !important;
  }
  
  .nav-toggle::before {
    content: '☰' !important;
    font-size: 18px !important;
    color: white !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }
  
  .nav-toggle.is-open::before {
    content: '✕' !important;
  }
  
  /* (6) Right side: tighter gap */
  .nav-right {
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* Extra small phones */
@media (max-width: 380px) {
  .nav-container {
    padding: 0 12px !important;
  }
  .nav-brand img {
    max-height: 28px !important;
  }
  .nav-cart,
  .nav-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
  }
}

/* ============================================
   MOBILE: HERO + LOGO COMPACTING (May 10 v2)
   - Logo más limpio y nítido
   - Hero image controlada en altura (no se estira)
   - Sin espacios extra arriba
   ============================================ */

@media (max-width: 720px) {
  /* (A) Eliminate any spacing above the navbar */
  body { padding-top: 0 !important; }
  
  /* (B) Navbar: even tighter top/bottom */
  .navbar {
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--line, #E0DDD3);
  }
  .nav-container {
    min-height: 48px !important;
    padding: 0 14px !important;
  }
  
  /* (C) Logo: render nítido a tamaño mobile */
  .nav-brand img {
    max-height: 30px !important;
    height: 30px !important;
    width: auto !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  /* (D) Hero image: limit aspect ratio so it doesn't take 80% of viewport */
  .hero.hero-split { 
    min-height: auto !important; 
  }
  
  .hero-split-image {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 11 !important;
    max-height: 56vh !important;
  }
  
  .hero-split-image picture,
  .hero-split-image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  
  /* (E) Hero content: tighter padding */
  .hero-split-content {
    padding: 32px 22px 40px !important;
  }
  
  .hero-split-content h1 {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }
  
  .hero-split-content .tag {
    font-size: 10px !important;
    margin-bottom: 14px !important;
  }
  
  .hero-split-content .lead {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 380px) {
  .hero-split-image {
    aspect-ratio: 4 / 3 !important;
    max-height: 50vh !important;
  }
  .nav-brand img {
    max-height: 26px !important;
    height: 26px !important;
  }
}

/* ============================================
   MOBILE V3 — Product page + logo + ES/EN final
   ============================================ */

@media (max-width: 720px) {
  /* (1) Logo: bigger to be readable */
  .nav-brand img {
    max-height: 40px !important;
    height: 40px !important;
  }
  
  /* (2) Show ES/EN inline as compact button */
  .nav-lang {
    display: inline-flex !important;
    gap: 0 !important;
    margin-right: 4px !important;
  }
  .nav-lang a {
    padding: 6px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: var(--ink-soft, #5A5A5A) !important;
    text-decoration: none !important;
    border-radius: 3px !important;
  }
  .nav-lang a.active {
    color: var(--navy-deep, #001450) !important;
    background: rgba(0, 20, 80, 0.06) !important;
  }
  
  /* (3) Product hero: kill the massive empty space */
  .product-hero {
    padding: 12px 0 30px !important;
    gap: 24px !important;
  }
  
  .product-img {
    min-height: 0 !important;
    padding: 28px 24px !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 480px !important;
  }
  
  .product-img picture,
  .product-img img,
  .product-img .vial-mock-large {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
  
  /* (4) Breadcrumb: tighter top */
  .breadcrumb {
    padding: 14px 0 6px !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
  
  /* (5) Product info: tighter top */
  .product-info { margin-top: 0 !important; }
  .product-info h1 {
    font-size: clamp(26px, 7vw, 36px) !important;
    margin-bottom: 8px !important;
  }
  
  /* (6) Nav-right gap: tighter so ES/EN + cart + hamburger fit */
  .nav-right {
    gap: 4px !important;
  }
  
  /* (7) Cart and hamburger: 36px on regular mobile (smaller for fit) */
  .nav-cart,
  .nav-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    flex: 0 0 36px !important;
  }
}

@media (max-width: 400px) {
  /* On smaller phones, hide ES/EN switcher again to fit */
  .nav-lang { display: none !important; }
  .nav-brand img {
    max-height: 36px !important;
    height: 36px !important;
  }
  .product-img {
    aspect-ratio: 1 / 1.1 !important;
    max-height: 380px !important;
  }
}

@media (max-width: 360px) {
  .nav-brand img {
    max-height: 32px !important;
    height: 32px !important;
  }
}

/* ============================================
   MOBILE V4 — ES/EN ALWAYS VISIBLE (priority for UX)
   Override the @media 400px and 720px rules that were hiding it.
   ============================================ */

/* ES/EN must be visible on ALL mobile sizes — it's the most important
   element for international visitors */
@media (max-width: 720px) {
  .nav-lang {
    display: inline-flex !important;
    align-items: center;
    gap: 0 !important;
    background: transparent !important;
    border: 1px solid var(--line, #E0DDD3) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-right: 2px !important;
  }
  
  .nav-lang a {
    padding: 8px 10px !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    color: var(--ink-soft, #8A8680) !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
  }
  
  .nav-lang a.active {
    color: white !important;
    background: var(--navy-deep, #001450) !important;
  }
  
  /* Tight nav-right gap so all 3 elements fit (ES/EN + cart + ☰) */
  .nav-right {
    gap: 4px !important;
  }
}

/* Even on tiny phones (320–400px), keep ES/EN visible */
@media (max-width: 400px) {
  .nav-lang {
    display: inline-flex !important;
  }
  .nav-lang a {
    padding: 7px 8px !important;
    font-size: 10px !important;
    min-height: 34px !important;
  }
  
  /* Compensate: cart + hamburger smaller */
  .nav-cart,
  .nav-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    flex: 0 0 34px !important;
  }
  
  /* Logo smaller to fit */
  .nav-brand img {
    max-height: 30px !important;
    height: 30px !important;
  }
}

@media (max-width: 340px) {
  /* Extreme small (iPhone SE 1st gen) */
  .nav-container {
    padding: 0 10px !important;
  }
  .nav-lang a {
    padding: 6px 7px !important;
    font-size: 9.5px !important;
  }
}

/* ============================================
   MOBILE V5 — KILL VERTICAL WHITESPACE (-30%)
   Final aggressive cleanup. This block goes last so it wins.
   ============================================ */

@media (max-width: 720px) {
  /* (1) Navbar — minimum vertical footprint */
  .navbar {
    padding: 2px 0 !important;
  }
  
  .nav-container {
    min-height: 44px !important;
    padding: 0 14px !important;
  }
  
  /* (2) Buttons inside navbar — slightly smaller to reduce navbar height */
  .nav-lang a {
    min-height: 30px !important;
    padding: 6px 9px !important;
  }
  
  .nav-cart,
  .nav-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
  }
  
  /* (3) Logo: slightly larger than navbar height makes it cleaner */
  .nav-brand img {
    max-height: 34px !important;
    height: 34px !important;
  }
  
  /* (4) Hero (home) — kill top padding & shrink image */
  .hero.hero-split {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .hero-split-content {
    padding: 24px 22px 28px !important;
  }
  
  .hero-split-image {
    aspect-ratio: 16 / 9 !important;
    max-height: 42vh !important;
  }
  
  /* (5) Product detail pages — kill the massive whitespace above the vial */
  .product-hero {
    padding: 4px 0 24px !important;
    gap: 16px !important;
  }
  
  .product-img {
    padding: 16px 16px !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 360px !important;
    min-height: 0 !important;
  }
  
  .breadcrumb {
    padding: 10px 0 4px !important;
    margin-bottom: 0 !important;
  }
  
  /* (6) ALL hero sections — uniform tight top padding */
  .cat-index-hero,
  .prod-index-hero,
  .contact-hero,
  .quality-hero,
  .about-hero,
  .edu-hero,
  .qa-hero {
    padding: 28px 0 24px !important;
    min-height: 0 !important;
  }
  
  /* (7) Container default top space — eliminated */
  .container > .breadcrumb:first-child {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
  
  /* (8) Body/html — no top padding at all */
  body, html {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ============================================
   MOBILE V6 — DEFINITIVE FIX
   The .navbar.scrolled class (added by JS on scroll) was 
   re-enlarging the navbar after the user scrolled.
   Disable that behavior on mobile.
   ============================================ */

@media (max-width: 720px) {
  /* Disable scrolled-state enlargement on mobile */
  .navbar.scrolled,
  .navbar.navbar-scrolled {
    padding: 2px 0 !important;
  }
  
  .navbar.scrolled .nav-container,
  .navbar.navbar-scrolled .nav-container {
    height: auto !important;
    min-height: 44px !important;
    transition: none !important;
  }
  
  .navbar.scrolled .nav-brand img,
  .navbar.navbar-scrolled .nav-brand img {
    height: 34px !important;
    max-height: 34px !important;
    transition: none !important;
  }
  
  /* Belt and suspenders: lock navbar dimensions */
  .navbar {
    transition: none !important;
  }
}

/* ============================================
   MOBILE V7 — NUCLEAR FIX FOR TOP WHITESPACE
   Force every possible element near the top to have no extra space.
   ============================================ */

@media (max-width: 720px) {
  /* Reset every wrapper that could be adding space */
  html, body {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  body > nav.navbar,
  body > .navbar {
    margin-top: 0 !important;
    padding: 2px 0 !important;
  }
  
  /* The nav itself must have no internal margin */
  .navbar {
    margin: 0 !important;
    padding: 2px 0 !important;
  }
  
  /* Force section right after navbar to have minimal top padding */
  .navbar + section,
  .navbar + main,
  .navbar + div {
    margin-top: 0 !important;
  }
  
  /* Hero specifically - the section right after navbar on home */
  .navbar ~ .hero.hero-split {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Container default top space - eliminated for first child */
  main:first-of-type,
  body > .container:first-of-type,
  body > section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ============================================
   MOBILE V8 — ROOT CAUSE FIX
   The base .nav-container has hardcoded height: 120px (line 73)
   which was making the navbar 125px tall on mobile.
   Override it definitively.
   ============================================ */

@media (max-width: 720px) {
  .nav-container {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }
  
  .navbar {
    height: auto !important;
    padding: 4px 0 !important;
  }
  
  /* And the scrolled version */
  .navbar.scrolled .nav-container,
  .navbar.navbar-scrolled .nav-container {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }
}

/* ============================================
   CUSTOM CURSOR (DNA chain) — ENABLE ON MOBILE TOO
   The DNA cursor was only enabled on devices with hover.
   On touch devices it can show as a subtle visual effect.
   ============================================ */

/* Note: real cursors don't render on touch devices. The "dot" you see
   on iPhone is Safari's tap-highlight. We can disable that and add a
   subtle press effect instead. The DNA chain only renders on devices
   with a real pointer (mouse/trackpad). */

@media (max-width: 720px) {
  /* Remove tap highlight (the "dot") */
  * {
    -webkit-tap-highlight-color: rgba(0, 20, 80, 0.06) !important;
  }
  
  /* On tappable elements, add a subtle scale animation instead */
  a, button {
    -webkit-tap-highlight-color: transparent !important;
  }
  
  a:active, button:active {
    opacity: 0.7;
    transition: opacity 0.1s ease;
  }
}

/* ============================================
   PRODUCT FILTER FIX (May 10, 2026)
   The base .prod-rich-card has `display: grid !important` which was
   overriding the JS inline `display: none`. Use a class with equal
   specificity AND !important to win.
   ============================================ */

.prod-rich-card.is-filtered-out,
.prod-catalog-grid .prod-rich-card.is-filtered-out {
  display: none !important;
}


/* ============================================
   TESTIMONIALS SECTION — Single clean implementation
   Uses native CSS scroll-snap. Layout matches Calidad section.
   ============================================ */

.testimonials-section {
  padding: 80px 0 90px;
  background: linear-gradient(180deg, var(--paper, #F5F5F0) 0%, white 100%);
  position: relative;
  overflow: hidden;
}

.testimonials-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--blue-accent, #2864A0);
}

.testimonials-section > .container {
  max-width: var(--container, 1240px);
  margin: 0 auto;
  padding: 0 24px;
}

.testimonials-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.testimonials-head .tag {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue-accent, #2864A0);
  font-weight: 600;
  margin-bottom: 24px;
}

.testimonials-head h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 200;
  letter-spacing: -1.2px;
  color: var(--navy-deep, #000C23);
  margin: 0 0 18px;
  line-height: 1.15;
}

.testimonials-head h2 .strong {
  font-weight: 700;
}

.testimonials-head .lead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft, #5A5A5A);
  margin: 0;
}

/* CAROUSEL: outer flex with nav buttons */
.testimonials-carousel {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 16px;
}

/* Track wrapper (clips overflow) */
.testimonials-track-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

/* TRACK: horizontal scroll with snap */
.testimonials-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 12px 0 12px 0;
}

.testimonials-track::-webkit-scrollbar {
  display: none;
}

/* Side padding inside track: enough to allow the first/last card to be centered.
   Card is 78% of wrapper. Side padding = (100% - 78%) / 2 = 11%. */
.testimonials-track::before,
.testimonials-track::after {
  content: '';
  flex: 0 0 calc(11% - 10px);
  /* The -10px compensates for half of gap (20px) on each side */
}

/* CARDS */
.testimonials-track .testimonial-card {
  flex: 0 0 78%;
  max-width: 78%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: white;
  border: 1px solid var(--line, #E0DDD3);
  border-radius: 6px;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease;
  opacity: 0.42;
  transform: scale(0.94);
  transform-origin: center;
}

.testimonials-track .testimonial-card.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 24px 60px rgba(0, 20, 80, 0.10);
}

/* Quote mark */
.testimonial-quote-mark {
  position: absolute;
  top: 6px;
  right: 22px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 72px;
  color: var(--blue-accent, #2864A0);
  opacity: 0.15;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}

/* Text */
.testimonial-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink, #1A1A1A);
  margin: 0;
  padding: 0;
  flex: 1;
  border: none;
}

/* Meta block */
.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #E0DDD3);
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-deep, #001450) 0%, var(--blue-accent, #2864A0) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.testimonial-avatar::before {
  content: attr(data-initial);
}

.testimonial-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.testimonial-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-deep, #000C23);
  letter-spacing: 0.2px;
}

.testimonial-context {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--ink-soft, #8A8680);
  text-transform: uppercase;
}

/* Result strip */
.testimonial-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.05) 0%, rgba(40, 100, 160, 0.02) 100%);
  border-left: 3px solid var(--blue-accent, #2864A0);
  padding: 12px 16px;
  border-radius: 0 4px 4px 0;
}

.result-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-accent, #2864A0);
  font-weight: 600;
}

.result-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-deep, #000C23);
  letter-spacing: -0.2px;
}

/* NAV ARROWS */
.testimonial-nav {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  align-self: center;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--line, #E0DDD3);
  color: var(--navy-deep, #001450);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.testimonial-nav svg {
  width: 18px;
  height: 18px;
}

.testimonial-nav:hover {
  background: var(--navy-deep, #001450);
  color: white;
  border-color: var(--navy-deep, #001450);
  transform: scale(1.06);
}

.testimonial-nav:active {
  transform: scale(0.96);
}

/* DOTS */
.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.testimonials-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line, #E0DDD3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.testimonials-dots button:hover {
  background: var(--blue-light, #5B9BD5);
}

.testimonials-dots button.is-active {
  background: var(--navy-deep, #001450);
  width: 24px;
  border-radius: 4px;
}

/* CTA */
.testimonials-cta {
  margin-top: 24px;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.testimonials-disclaimer {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft, #8A8680);
  margin: 0 0 28px;
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .testimonials-track .testimonial-card {
    flex: 0 0 84%;
    max-width: 84%;
  }
  .testimonials-track::before,
  .testimonials-track::after {
    flex: 0 0 calc(8% - 10px);
  }
}

@media (max-width: 720px) {
  .testimonials-section {
    padding: 60px 0;
  }
  .testimonials-head {
    margin-bottom: 32px;
  }
  .testimonials-carousel {
    gap: 8px;
  }
  .testimonials-track {
    gap: 12px;
  }
  .testimonials-track .testimonial-card {
    flex: 0 0 92%;
    max-width: 92%;
    padding: 26px 22px 22px;
  }
  .testimonials-track .testimonial-card .testimonial-text {
    font-size: 15px;
  }
  .testimonials-track::before,
  .testimonials-track::after {
    flex: 0 0 calc(4% - 6px);
  }
  .testimonial-nav {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }
  .testimonial-nav svg {
    width: 14px;
    height: 14px;
  }
  .testimonial-quote-mark {
    font-size: 56px;
  }
}


/* ============================================
   SCROLL ANIMATIONS — fade-in + slide-up + stagger
   ============================================ */

.animate-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.animate-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.animate-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.animate-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.animate-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.animate-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.animate-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.animate-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.animate-stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; }
.animate-stagger.is-visible > *:nth-child(7) { transition-delay: 0.65s; }
.animate-stagger.is-visible > *:nth-child(8) { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
  .animate-in,
  .animate-stagger > * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .testimonials-track {
    scroll-behavior: auto !important;
  }
}

/* ============================================
   TESTIMONIAL HEADER — meta block now AT TOP
   The avatar + name + context now act as a title above the quote.
   The old .testimonial-meta styling for bottom block is removed.
   ============================================ */

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line, #E0DDD3);
  position: relative;
}

@media (max-width: 720px) {
  .testimonial-header {
    gap: 12px;
    padding-bottom: 16px;
  }
}

/* In header context, info should be slightly more prominent */
.testimonial-header .testimonial-name {
  font-size: 16px;
}

.testimonial-header .testimonial-context {
  font-size: 10px;
  margin-top: 2px;
}

@media (max-width: 720px) {
  .testimonial-header .testimonial-name {
    font-size: 15px;
  }
  .testimonial-header .testimonial-context {
    font-size: 9.5px;
  }
}

/* Quote mark needs to reposition since it's no longer at the absolute top */
.testimonials-carousel .testimonial-quote-mark {
  top: 80px !important;
  right: 22px !important;
  font-size: 64px !important;
}

@media (max-width: 720px) {
  .testimonials-carousel .testimonial-quote-mark {
    top: 70px !important;
    right: 18px !important;
    font-size: 48px !important;
  }
}

/* Make text block have proper spacing now that header is at top */
.testimonials-carousel .testimonial-text {
  margin-top: 20px !important;
  margin-bottom: 4px !important;
}

/* ============================================
   LEGIBILITY FIX — bump up small text sizes
   Disclaimers, captions, and small notes throughout the site.
   Aim: minimum 15-16px so anyone can read without zooming.
   ============================================ */

/* Testimonial disclaimer — primary fix */
.testimonials-disclaimer {
  font-size: 16px !important;
  line-height: 1.75 !important;
  max-width: 760px !important;
  color: var(--ink, #1A1A1A) !important;
  font-style: normal !important;
  font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif !important;
}

@media (max-width: 720px) {
  .testimonials-disclaimer {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
}

/* Other small disclaimers/captions across the site */
.disclaimer,
.legal-note,
.caption,
.small-text,
.footer-disclaimer,
.footer-legal,
.legal-text {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

@media (max-width: 720px) {
  .disclaimer,
  .legal-note,
  .caption,
  .small-text,
  .footer-disclaimer,
  .footer-legal,
  .legal-text {
    font-size: 14.5px !important;
  }
}

/* Tags/labels that were too small */
.tag,
.eyebrow,
.section-eyebrow {
  font-size: 12px !important;
  letter-spacing: 2.5px !important;
}

/* Anything explicitly using font-size <13px gets bumped */
[style*="font-size: 11px"],
[style*="font-size: 12px"],
[style*="font-size:11px"],
[style*="font-size:12px"] {
  font-size: 14px !important;
}

/* ============================================
   TESTIMONIAL RESULT — CATEGORY COLORS + ICON
   The result strip now shows a colored icon to the left
   matching the peptide category of each testimonial.
   ============================================ */

/* Reset base result strip to support new layout */
.testimonial-result {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  background: linear-gradient(135deg, rgba(40, 100, 160, 0.05) 0%, rgba(40, 100, 160, 0.02) 100%) !important;
  border-left: 4px solid var(--cat-color, var(--blue-accent, #2864A0)) !important;
  padding: 14px 18px !important;
  border-radius: 0 4px 4px 0;
}

/* Result icon block */
.result-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cat-color, var(--blue-accent, #2864A0));
  color: white;
}

.result-icon svg {
  width: 18px;
  height: 18px;
}

/* Result text block (label + value) */
.result-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

/* Override label color to use category color */
.testimonial-result .result-label {
  color: var(--cat-color, var(--blue-accent, #2864A0)) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.testimonial-result .result-value {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: var(--navy-deep, #001450) !important;
  letter-spacing: -0.2px !important;
}

/* Category color variables — assigned via data-cat on the article */
.testimonial-card[data-cat="metabolic"]  { --cat-color: #B07845; }
.testimonial-card[data-cat="recovery"]   { --cat-color: #5A9078; }
.testimonial-card[data-cat="longevity"]  { --cat-color: #7A8AAE; }
.testimonial-card[data-cat="hormonal"]   { --cat-color: #AA7488; }
.testimonial-card[data-cat="premium"]    { --cat-color: #8A7A5E; }

/* Subtle background tint matching category */
.testimonial-card[data-cat="metabolic"]  .testimonial-result { background: linear-gradient(135deg, rgba(176, 120, 69, 0.08) 0%, rgba(176, 120, 69, 0.02) 100%) !important; }
.testimonial-card[data-cat="recovery"]   .testimonial-result { background: linear-gradient(135deg, rgba(90, 144, 120, 0.08) 0%, rgba(90, 144, 120, 0.02) 100%) !important; }
.testimonial-card[data-cat="longevity"]  .testimonial-result { background: linear-gradient(135deg, rgba(122, 138, 174, 0.08) 0%, rgba(122, 138, 174, 0.02) 100%) !important; }
.testimonial-card[data-cat="hormonal"]   .testimonial-result { background: linear-gradient(135deg, rgba(170, 116, 136, 0.08) 0%, rgba(170, 116, 136, 0.02) 100%) !important; }
.testimonial-card[data-cat="premium"]    .testimonial-result { background: linear-gradient(135deg, rgba(138, 122, 94, 0.08) 0%, rgba(138, 122, 94, 0.02) 100%) !important; }

@media (max-width: 720px) {
  .testimonial-result {
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  .result-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }
  .result-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================
   METABOLIC RESULTS — Investigación visual
   Sección dedicada a Serie Metabolic (página /es/categorias/)
   ============================================ */
.metabolic-results-section {
  padding: 80px 0;
  background: var(--bone, #FAF8F2);
  border-top: 1px solid var(--line, #E0DDD3);
  border-bottom: 1px solid var(--line, #E0DDD3);
}
.metabolic-results-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}
.metabolic-results-head h2 {
  margin: 14px 0 18px;
}
.metabolic-results-head .lead {
  color: var(--ink-soft, #8A8680);
}
.metabolic-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.metabolic-result-card {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 20, 80, 0.10);
  background: #fff;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.metabolic-result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 20, 80, 0.14);
}
.metabolic-result-card img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.metabolic-result-card:hover img {
  transform: scale(1.04);
}
.metabolic-results-disclaimer {
  max-width: 880px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft, #8A8680);
  font-style: italic;
  padding: 0 20px;
}
.metabolic-results-disclaimer strong {
  color: var(--navy-deep, #001450);
  font-style: normal;
}
@media (max-width: 880px) {
  .metabolic-results-section { padding: 56px 0; }
  .metabolic-results-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .metabolic-results-disclaimer {
    font-size: 14px;
    margin-top: 28px;
  }
}

/* ============================================
   IMAGE REVEAL ON SCROLL — cinematic entrance
   Apply class .img-reveal to any <img>; it scales
   in from 1.06 and fades while clipping from bottom.
   IntersectionObserver in animations-extra.js flips
   .is-revealed when entering viewport.
   ============================================ */
.img-reveal {
  opacity: 0;
  transform: scale(1.06);
  clip-path: inset(0 0 8% 0);
  transition: opacity 0.9s ease-out,
              transform 1s cubic-bezier(0.22, 1, 0.36, 1),
              clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, clip-path;
}
.img-reveal.is-revealed {
  opacity: 1;
  transform: scale(1);
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .img-reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* ============================================
   FEATURED BANNER SHINE — one-time sweep
   Light sweep passes diagonally when .has-shone
   class is toggled by the JS observer.
   ============================================ */
.featured-banner {
  position: relative;
  overflow: hidden;
}
.featured-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0) 60%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.featured-banner.has-shone::after {
  animation: featuredShine 1.4s ease-out 0.2s forwards;
}
@keyframes featuredShine {
  0% { left: -60%; opacity: 0; }
  20% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .featured-banner.has-shone::after { animation: none; }
}