@import url('theme.css');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ============================================================
   THEME:       Belly Balance
   NICHE:       Gut Health / Weight Management (Niche C)
   COUNTRY:     au (Australia)
   SOURCE URL:  https://trybellybalance.com/offer/belly_balance/au-v2/
   DNA REPORT:  research/au-bellybalance-dna.md
   EXTRACTED:   2026-04-24
   THEME TYPE:  mixed (light hero + dark green sections)
   DESIGN DIR:  Fresh & natural — Plus Jakarta Sans, gold CTA, green anchors,
                AU-friendly open layout, friendly micro-copy, no hype
   ============================================================ */

/* ── LAYER 1: COLOR TOKENS ────────────────────────────────── */
:root {
  --primary:        #18663C; /* dark forest green — science bg, headings, alert bar */
  --primary-dark:   #0f4a2a; /* derived: primary -15% lightness — hover state */
  --primary-light:  #c8e6d4; /* derived: primary 25% on white — icon bg tints */
  --secondary:      #EDF7F2; /* light green — section label bg */
  --bg:             #ffffff; /* page body — clean white */
  --bg-alt:         #EDF7F2; /* alternate sections — cool green tint from primary */
  --dark:           #18663C; /* h1/h2/h3 color — brand green */
  --text:           #2d2d2d; /* body paragraphs — near-black, legible */
  --text-muted:     #6b7280; /* subtitles, captions — medium gray */
  --cta-bg:         #FFC001; /* gold — CTA button fill, congruent with official site */
  --cta-text:       #1a1a1a; /* dark text on gold (brightness 189 > 180 — LIGHT bg) */
  --alert-bg:       #18663C; /* dark green alert bar — authority anchor */
  --trust-bg:       var(--bg-alt);
  --border:         #e0f0e8; /* light green-tinted border */
  --star:           #FFC001; /* gold stars — matches brand CTA */
}

/* ── LAYER 2: TYPOGRAPHY ──────────────────────────────────── */
:root {
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --fw-heading:   700;
  --fw-body:      400;
  --lh-heading:   1.2;
  --lh-body:      1.75;
  --ls-heading:   -0.01em;
}

/* ── LAYER 3: COMPONENT SHAPE ─────────────────────────────── */
:root {
  --radius-btn:  50px; /* pill — approachable, friendly, Niche C standard */
  --radius-card: 16px; /* rounded cards — organic/natural feel */
}

/* ── LAYER 4: HERO ────────────────────────────────────────── */
#hero {
  background: linear-gradient(160deg, #f0faf4 0%, #ffffff 55%, #f8fffe 100%);
}
#hero::after {
  background: none; /* remove default blue overlay */
}
.hero-badge {
  background: rgba(24, 102, 60, 0.10);
  border-color: rgba(24, 102, 60, 0.35);
  color: #18663C;
}
.hero-text h1 {
  color: #18663C;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero-text h1 .highlight { color: #FFC001; }
.hero-subtext { color: #2d2d2d; }
.hero-tagline {
  color: #2d2d2d; /* override theme.css rgba(255,255,255,0.6) — light hero */
}
.hero-guarantee {
  color: #2d2d2d; /* override theme.css rgba(255,255,255,0.6) — light hero */
}
.hero-tagline i,
.hero-guarantee i { color: #18663C; }

/* Product image — clean, no border or shadow */
.hero-product-img {
  border-radius: 0;
  max-width: 50%;
  width: 50%;
  filter: none;
  background: transparent;
}

@media (max-width: 900px) {
  .hero-product-img {
    max-width: 240px;
    width: 100%;
  }
}

/* ── LAYER 5: ALERT BAR ──────────────────────────────────── */
#announcement-bar {
  background: var(--alert-bg);
}
.alert-badge i { color: #FFC001; }
.alert-bar,
.alert-bar * { color: #ffffff; }

/* ── LAYER 6: NAVBAR ──────────────────────────────────────── */
#header {
  background: #ffffff;
  border-bottom: 2px solid #EDF7F2;
}
.nav-logo-text {
  color: #18663C;
  font-weight: 800;
}
.navbar-nav .nav-link { color: #2d2d2d; }

/* ── LAYER 7: CTA BUTTONS ─────────────────────────────────── */
.btn-primary,
.hero-cta,
.cta-button {
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0;
  background: var(--cta-bg);
  color: var(--cta-text);
}
.btn-primary:hover,
.hero-cta:hover {
  background: #EDA501; /* darker gold hover — from extracted #EDA501 */
  box-shadow: 0 12px 32px rgba(255, 192, 1, 0.40);
  color: #1a1a1a;
}

/* ── LAYER 8: CARDS ───────────────────────────────────────── */
.feature-card,
.review-card {
  border-radius: var(--radius-card);
  border: 1px solid #e0f0e8;
  box-shadow: 0 4px 24px rgba(24, 102, 60, 0.06);
}
.feature-card:hover {
  border-color: rgba(24, 102, 60, 0.3);
  box-shadow: 0 8px 32px rgba(24, 102, 60, 0.12);
}

/* Accent border slide on hover */
.feature-card {
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 0;
  background: #18663C;
  transition: height 0.35s ease;
}
.feature-card:hover::before { height: 100%; }

/* Quotation mark watermark on review cards */
.review-card {
  position: relative;
  overflow: hidden;
}
.review-card::before {
  content: '"';
  position: absolute;
  top: 12px; left: 16px;
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 1;
  color: #18663C;
  opacity: 0.08;
  pointer-events: none;
}

/* ── LAYER 9: SOCIAL PROOF STRIP ─────────────────────────── */
#social-proof {
  background: linear-gradient(135deg, #18663C 0%, #0f4a2a 100%);
  position: relative;
  overflow: hidden;
}
#social-proof::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
.social-proof-section .stat-value,
#social-proof .stat-value { color: #FFC001; }
.social-proof-section .stat-label,
#social-proof .stat-label { color: rgba(255,255,255,0.85); }

/* ── LAYER 10: SCIENCE SECTION ────────────────────────────── */
#science {
  background: linear-gradient(160deg, #18663C 0%, #0f4a2a 100%);
}
/* All text in dark science section must be white/near-white */
#science h2,
#science h3,
#science p,
#science .section-h2,
#science .science-step-title,
#science .science-result { color: #ffffff; }

/* Step body text — override theme.css var(--text-muted) gray */
#science .section-body {
  color: rgba(255, 255, 255, 0.88);
}

/* Step titles use inline style="color:var(--primary)" — override with !important */
#science .section-body strong {
  color: #FFC001 !important; /* gold — visible on dark green, creates clear hierarchy */
}

/* Subheadline under main science headline */
#science .reviews-subheadline {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Section label pill — make legible on dark green */
#science .section-label {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Science result box — transparent, gold border, white bold text */
#science p[style*="primary-light"] {
  background: transparent !important;
  border-left: 3px solid #FFC001;
  padding-left: 16px;
  color: #ffffff !important;
}
#science p[style*="primary-light"] strong {
  color: #ffffff !important;
}

.benefits-img img,
#science .benefits-img img {
  border-radius: 0;
  filter: none !important;
  background: transparent;
}

/* ── LAYER 11: FAQ ────────────────────────────────────────── */
.faq-item.open .faq-question { color: #18663C; }
.faq-item {
  transition: padding-left 0.2s ease;
}
.faq-item.open {
  padding-left: 12px;
  border-left: 3px solid #FFC001;
}

/* ── LAYER 12: FOOTER ─────────────────────────────────────── */
#footer,
footer {
  background: #18663C;
}
.footer,
.footer h5,
.footer p,
.footer a,
#footer,
#footer h5,
#footer p,
#footer a { color: rgba(255, 255, 255, 0.85); }
.footer a:hover,
#footer a:hover { color: #FFC001; }

/* ── LAYER 13: CONTRAST SAFETY ────────────────────────────── */
.hero-section,
.hero-section h1,
.hero-section h2,
.hero-section p,
.hero-section span { color: #18663C; }

/* ── LAYER 14: MODAL OVERRIDE ─────────────────────────────── */
.modal-content,
.modal-body,
.modal-body h5,
.modal-body h4,
.modal-body p,
.modal-body li,
.modal-body a { color: #1a1a1a; }

/* ── LAYER 15: MOTION LAYER ───────────────────────────────── */
@keyframes heroFade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge     { animation: heroFade 0.6s 0.10s ease both; }
.hero-text h1   { animation: heroFade 0.6s 0.25s ease both; }
.hero-subtext   { animation: heroFade 0.6s 0.40s ease both; }
.hero-tagline   { animation: heroFade 0.6s 0.50s ease both; }
.hero-cta-group { animation: heroFade 0.6s 0.65s ease both; }
.hero-guarantee { animation: heroFade 0.6s 0.75s ease both; }
.hero-img-col   { animation: heroFade 0.8s 0.30s ease both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
#benefits .benefits-layout { animation: fadeUp 0.7s ease both; }
#features .features-grid   { animation: fadeUp 0.7s ease both; }
#reviews .reviews-grid     { animation: fadeUp 0.7s ease both; }
.science-inner             { animation: fadeUp 0.7s ease both; }

.feature-card:nth-child(1) { animation: fadeUp 0.6s 0.00s ease both; }
.feature-card:nth-child(2) { animation: fadeUp 0.6s 0.10s ease both; }
.feature-card:nth-child(3) { animation: fadeUp 0.6s 0.20s ease both; }
.feature-card:nth-child(4) { animation: fadeUp 0.6s 0.10s ease both; }
.feature-card:nth-child(5) { animation: fadeUp 0.6s 0.20s ease both; }
.feature-card:nth-child(6) { animation: fadeUp 0.6s 0.30s ease both; }

/* Hero float animation on product image */
@keyframes floatImg {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.hero-product-img {
  animation: floatImg 4s ease-in-out infinite;
}

/* CTA pulse */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,192,1,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(255,192,1,0); }
}
.hero-cta-group .btn-primary {
  animation: ctaPulse 2.5s ease-in-out infinite;
}

/* Trust badge hover */
.trust-badge { transition: transform 0.25s ease; }
.trust-badge:hover { transform: translateY(-3px); }

/* Stats count-up visual */
@keyframes countUp {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.stat-value { animation: countUp 0.7s ease both; }

/* ── LAYER 16: MOTION SAFETY (MANDATORY) ─────────────────── */
@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;
  }
}
.btn-primary, .hero-cta, .cta-button { touch-action: manipulation; }
.modal-drawer { overscroll-behavior: contain; }

/* ── LAYER 17: RESPONSIVE ─────────────────────────────────── */
@media (max-width: 900px) {
  #hero {
    background: linear-gradient(180deg, #f0faf4 0%, #ffffff 100%);
  }
  .hero-product-img { border-radius: 0; }
  .benefits-img img, #science .benefits-img img { border-radius: 0; }
}
@media (max-width: 600px) {
  .hero-text h1 {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }
  .btn-primary, .hero-cta, .cta-button {
    padding: 16px 32px;
    font-size: 1rem;
  }
  .hero-product-img { border-radius: 0; }
  .benefits-img img, #science .benefits-img img { border-radius: 0; }
}

/* ── LAYER 18: MOBILE NAV CTA (MANDATORY) ─────────────────── */
@media (max-width: 600px) {
  .nav-cta {
    display: flex !important;
  }
  .nav-cta .btn-primary {
    padding: 9px 16px !important;
    font-size: 0.78rem !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap;
    border-radius: 50px !important;
  }
}

/* ── LAYER 19: LOGO SIZING (MANDATORY) ───────────────────── */
.nav-logo-img,
.footer-logo-img {
  height: auto !important;
  max-height: none !important;
  max-width: 160px;
  object-fit: contain;
}

/* ── LAYER 20: IMAGE CLEAN (no border, no shadow) ─────────── */
.hero-image img,
.benefits-img img,
.science-img img,
#benefits img,
#science img {
  border-radius: 0;
  filter: none !important;
  background: transparent;
}

/* ── LAYER 21: INLINE MOBILE IMAGES ──────────────────────── */
/* Desktop: hide inline-img-mobile — column images handle layout */
.inline-img-mobile {
  display: none;
}

@media (max-width: 900px) {
  .inline-img-mobile {
    display: block;
    text-align: center;
    margin: 1.25rem auto;
  }
  .inline-img-mobile img {
    max-width: 260px;
    border-radius: 16px;
    margin: 0 auto;
    display: block;
  }
  .hero-img-col {
    display: none !important;
  }
  .benefits-layout .benefits-img {
    display: none !important;
  }
}