:root {
  --forest: #1f4d36;
  --mustard: #d4a017;
  --cream: #faf8f4;
  --charcoal: #2c2c2c;
  --glass: rgba(255, 255, 255, 0.12);
  --background: #faf8f4;
  --foreground: #2c2c2c;
  --card: #ffffff;
  --muted: #6b7280;
  --border: rgba(31, 77, 54, 0.12);
  --site-max: 1600px;
}

html.dark {
  --background: #0f1a14;
  --foreground: #f5f0e8;
  --card: #1a2e24;
  --muted: #9ca89f;
  --border: rgba(212, 160, 23, 0.15);
  --glass: rgba(0, 0, 0, 0.35);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Montserrat", system-ui, sans-serif;
}

.site-container {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

::selection {
  background: var(--mustard);
  color: var(--charcoal);
}

.gradient-hero {
  background: linear-gradient(
    105deg,
    rgba(15, 26, 20, 0.78) 0%,
    rgba(15, 26, 20, 0.42) 42%,
    rgba(15, 26, 20, 0.62) 100%
  );
}

.gradient-hero-light {
  background: linear-gradient(
    180deg,
    rgba(15, 26, 20, 0.55) 0%,
    rgba(15, 26, 20, 0.25) 50%,
    rgba(15, 26, 20, 0.65) 100%
  );
}

.page-hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(15, 26, 20, 0.7) 0%,
    rgba(15, 26, 20, 0.55) 100%
  );
}

.text-gradient {
  background: linear-gradient(135deg, #d4a017 0%, #f0c84a 50%, #d4a017 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-hover {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(31, 77, 54, 0.22);
  border-color: rgba(31, 77, 54, 0.25);
}

html.dark .card-hover:hover {
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
  border-color: rgba(212, 160, 23, 0.3);
}

.nav-link {
  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.reveal-left {
  transform: translateX(-28px);
}

.reveal.reveal-right {
  transform: translateX(28px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Nutrition bars */
.nutrition-bar-fill {
  width: 0;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.nutrition-bar-fill.is-visible {
  width: var(--bar-width);
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.is-open .faq-answer {
  max-height: 280px;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 0.3s ease;
}

/* Hero slides */
.hero-slide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
}

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-label-wrap {
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

/* Testimonials */
.testimonial-panel {
  transition: opacity 0.35s ease;
}

.testimonial-panel.is-hidden {
  display: none;
}

/* Lightbox */
.lightbox {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

/* Floating buttons */
.floating-distributor {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s ease;
}

.floating-distributor.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mobile menu */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.mobile-menu.is-open {
  max-height: 520px;
}

/* Process step images */
.process-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

img {
  max-width: 100%;
}

#site-header .nav-desktop {
  flex-wrap: nowrap;
  overflow: hidden;
}

#site-header nav {
  min-height: 64px;
}

/* Keep full desktop nav on one line without overflow */
@media (min-width: 1280px) and (max-width: 1439px) {
  #site-header .nav-desktop .nav-link {
    padding-inline: 0.4rem;
    font-size: 12px;
  }
}

/* Header solid/transparent helpers (toggled by JS) */
#site-header.is-solid {
  border-bottom-color: var(--border);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(12px);
}

html.dark #site-header.is-solid {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: rgba(15, 26, 20, 0.95);
}

#site-header.is-transparent {
  border-bottom-color: transparent;
  background: transparent;
}

#site-header.is-transparent .brand-text,
#site-header.is-transparent .nav-desktop .nav-link,
#site-header.is-transparent .theme-toggle,
#site-header.is-transparent .menu-toggle {
  color: #fff;
}

#site-header.is-solid .brand-text {
  color: var(--forest);
}

html.dark #site-header.is-solid .brand-text {
  color: #fff;
}

#site-header.is-solid .nav-desktop .nav-link {
  color: rgba(44, 44, 44, 0.85);
}

html.dark #site-header.is-solid .nav-desktop .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

#site-header.is-solid .nav-desktop .nav-link.is-active {
  background: rgba(31, 77, 54, 0.1);
  color: var(--forest);
}

html.dark #site-header.is-solid .nav-desktop .nav-link.is-active {
  background: rgba(212, 160, 23, 0.2);
  color: var(--mustard);
}

#site-header.is-transparent .nav-desktop .nav-link.is-active {
  background: rgba(212, 160, 23, 0.2);
  color: var(--mustard);
}

#site-header.is-solid .theme-toggle,
#site-header.is-solid .menu-toggle {
  color: var(--charcoal);
}

html.dark #site-header.is-solid .theme-toggle,
html.dark #site-header.is-solid .menu-toggle {
  color: #fff;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--mustard);
  color: var(--forest);
  font-weight: 600;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.btn-primary:hover {
  background: #c49215;
  box-shadow: 0 10px 24px -8px rgba(212, 160, 23, 0.45);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-weight: 600;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--forest);
  color: #fff;
  font-weight: 600;
  transition: background 0.25s ease;
}

.btn-secondary:hover {
  background: #163928;
}

.filter-pill.is-active {
  background: var(--forest);
  color: #fff;
}

html.dark .filter-pill.is-active {
  background: var(--mustard);
  color: var(--forest);
}

.process-step-btn.is-active {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--mustard);
}

.gallery-item.is-hidden {
  display: none;
}

.product-card.is-hidden {
  display: none;
}