/**
 * Swine Tech - Main Stylesheet
 * Organized with CSS Custom Properties and Mobile-First Approach
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================ */
:root {
  /* Colors - Brand Palette */
  --primary-color: #0b8d0b;
  --secondary-color: #242146;
  --accent-red: #fb3640; /* Imperial Red - symbolizes care, vitality, and compassion */
  --accent-blue: #007deb; /* Azure Blue - conveys trust, professionalism, and reliability */
  --text-dark: #111111; /* Night Black - adds strength, stability, and clarity */
  --text-light: #ffffff; /* White - signifies purity, cleanliness, and precision */
  --bg-white: #ffffff; /* White - signifies purity, cleanliness, and precision */
  --bg-dark: #000000;
  --bg-black: #000000; /* Black background for buttons */
  --bg-light: #f5f5f5;

  /* Typography - Brand Fonts */
  /* Gotham Bold for headings, Gotham Book for body text */
  /* Fallback to Montserrat (similar geometric sans-serif) */
  --font-heading: "Gotham", "Gotham Bold", "Montserrat", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Gotham", "Gotham Book", "Montserrat", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-main: var(--font-body); /* Default font */
  --font-weight-normal: 400; /* Gotham Book weight */
  --font-weight-semibold: 600;
  --font-weight-bold: 700; /* Gotham Bold weight */
  --font-weight-extrabold: 800;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;
  --spacing-xxl: 6rem;

  /* Layout */
  --container-max-width: 1200px;
  --container-padding: 1.5rem;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body); /* Gotham Book for body text */
  font-weight: var(--font-weight-normal);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition-fast);
}

a:hover,
a:focus {
  opacity: 0.8;
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

ul {
  list-style: none;
}

section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Override for order pages - they should always be visible */
.complete-order-section,
.order-section {
  opacity: 1 !important;
  transform: none !important;
}

/* First section should be visible immediately */
section:first-of-type {
  opacity: 1;
  transform: translateY(0);
}

main {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   BUTTON COMPONENT
   ============================================ */
.btn {
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  padding: 0;
}

.btn:hover,
.btn:focus {
  transform: scale(1.05);
  opacity: 0.9;
}

.btn:active {
  transform: scale(0.98);
}

.btn__img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 180px; /* Standard CTA button size */
}

.btn--large .btn__img {
  max-width: 200px; /* Slightly larger for hero section */
  width: 100%;
  height: auto;
}

.btn--large {
  display: inline-block;
  margin-top: var(--spacing-sm);
}

.btn--blue {
  background-color: var(--accent-blue);
  color: var(--text-light);
  padding: clamp(0.625rem, 2vw, 0.875rem) clamp(0.75rem, 2.5vw, 1rem);
  border-radius: 6px;
  font-weight: var(--font-weight-bold);
  font-size: clamp(0.875rem, 2.5vw, 0.9375rem); /* Universal Design: Minimum readable size (16px base) */
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  display: inline-block;
  border: none;
  width: fit-content;
  min-height: 44px; /* Universal Design: Minimum touch target (44x44px) */
  min-width: 44px; /* Universal Design: Ensure square touch targets */
  line-height: 1.5; /* Universal Design: Better readability */
}

.btn--blue:hover,
.btn--blue:focus {
  background-color: #0066cc;
  opacity: 1;
  transform: scale(1.05);
}

.btn--large.btn--blue {
  padding: clamp(0.75rem, 2.5vw, 1rem) clamp(0.875rem, 3vw, 1.125rem);
  font-size: clamp(0.8rem, 2.8vw, 1rem);
}

.btn--black {
  background-color: var(--bg-black) !important;
  color: var(--text-light) !important;
  padding: clamp(0.625rem, 2vw, 0.875rem) clamp(0.75rem, 2.5vw, 1rem);
  border-radius: 6px;
  font-weight: var(--font-weight-bold);
  font-size: clamp(0.875rem, 2.5vw, 0.9375rem); /* Universal Design: Minimum readable size (16px base) */
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  display: inline-block;
  border: none !important;
  width: fit-content;
  min-height: 44px; /* Universal Design: Minimum touch target (44x44px) */
  min-width: 44px; /* Universal Design: Ensure square touch targets */
  line-height: 1.5; /* Universal Design: Better readability */
}

.btn--black:hover,
.btn--black:focus {
  background-color: #333333;
  opacity: 1;
  transform: scale(1.05);
}

.btn--red {
  background-color: var(--accent-red);
  color: var(--text-light);
  padding: clamp(0.625rem, 2vw, 0.875rem) clamp(0.75rem, 2.5vw, 1rem);
  border-radius: 6px;
  font-weight: var(--font-weight-bold);
  font-size: clamp(0.875rem, 2.5vw, 0.9375rem); /* Universal Design: Minimum readable size (16px base) */
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  display: inline-block;
  border: none;
  width: fit-content;
  min-height: 44px; /* Universal Design: Minimum touch target (44x44px) */
  min-width: 44px; /* Universal Design: Ensure square touch targets */
  line-height: 1.5; /* Universal Design: Better readability */
}

.btn--red:hover,
.btn--red:focus {
  background-color: #e02e36;
  opacity: 1;
  transform: scale(1.05);
}

.btn--outline {
  background-color: transparent;
  color: var(--accent-blue);
  padding: clamp(0.625rem, 2vw, 0.875rem) clamp(0.75rem, 2.5vw, 1rem);
  border-radius: 6px;
  font-weight: var(--font-weight-bold);
  font-size: clamp(0.75rem, 2.5vw, 0.9375rem);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  display: inline-block;
  border: 2px solid var(--accent-blue);
  width: fit-content;
}

.btn--outline:hover,
.btn--outline:focus {
  background-color: var(--accent-blue);
  color: var(--text-light);
  opacity: 1;
  transform: scale(1.05);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.header {
  background-color: var(--bg-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-sm) var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--spacing-md);
}

.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav__logo-img {
  height: clamp(30px, 6vw, 50px);
  width: auto;
  max-width: clamp(120px, 25vw, 200px);
  object-fit: contain;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
  transition: transform var(--transition-normal),
    opacity var(--transition-normal);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-shrink: 0;
}

.nav__link {
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  padding: var(--spacing-xs);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition-fast),
    background-color var(--transition-fast);
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  white-space: nowrap;
  min-height: 44px; /* Touch target size */
  justify-content: center;
}

.nav__link:hover,
.nav__link:focus {
  color: var(--accent-blue);
  opacity: 1;
  background-color: transparent;
}

.nav__link--active {
  color: var(--accent-blue);
  font-weight: var(--font-weight-semibold);
}

.nav__item--dropdown {
  position: relative;
}

/* Disabled Order menu item - Soon */
  .nav__item--order-disabled {
    position: relative;
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  /* Mobile: Order disabled item should align left like other items */
  @media (max-width: 768px) {
    .nav__item--order-disabled {
      align-items: flex-start;
      width: 100%;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .nav__item--order-disabled .nav__link {
      justify-content: flex-start;
      text-align: left;
      padding: var(--spacing-md) var(--spacing-sm);
      margin: 0; /* Ensure no margin in mobile view */
      line-height: 23.04px; /* Match other nav links */
    }

    .nav__soon {
      margin-left: 0;
      text-align: left;
      margin-top: -8px;
    }
  }

.nav__item--order-disabled .nav__link {
  cursor: not-allowed;
  pointer-events: none;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  min-height: 44px; /* Match other nav links */
  line-height: 23.04px; /* Match Home and Learn line-height */
  padding: var(--spacing-xs);
  margin: 0; /* Remove negative margin that causes misalignment */
  height: 44px; /* Exact match to other nav links */
}

.nav__item--order-disabled .nav__link:hover {
  opacity: 1;
}

.nav__soon {
  display: block;
  font-size: 0.45em;
  color: #999;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 0.8;
  margin-top: -10px; /* Adjusted to account for removed negative margin on parent */
  text-align: center;
  height: auto;
  padding: 0;
}

.nav__link--dropdown {
  position: relative;
}

.nav__dropdown-arrow {
  font-size: 0.7em;
  margin-left: 4px;
  transition: transform var(--transition-fast);
}

.nav__item--dropdown:hover .nav__dropdown-arrow,
.nav__link--dropdown[aria-expanded="true"] .nav__dropdown-arrow {
  transform: rotate(180deg);
}

.nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--bg-white);
  box-shadow: var(--shadow-lg);
  border-radius: 6px;
  min-width: 200px;
  padding: var(--spacing-xs) 0;
  margin-top: var(--spacing-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
  z-index: 1001;
  list-style: none;
  white-space: nowrap;
}

.nav__item--dropdown:hover .nav__dropdown-menu,
.nav__item--dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-dark);
  text-decoration: none;
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.nav__dropdown-link:hover,
.nav__dropdown-link:focus {
  background-color: var(--bg-light);
  color: var(--accent-blue);
}

.nav__separator {
  color: var(--text-dark);
  opacity: 0.5;
  padding: 0 0.25rem;
  font-weight: var(--font-weight-normal);
  margin: 0;
}

.nav__phone {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  white-space: nowrap;
  padding: var(--spacing-xs);
  border-radius: 4px;
  transition: color var(--transition-fast),
    background-color var(--transition-fast);
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  min-height: 44px; /* Touch target size */
}

.nav__phone:hover,
.nav__phone:focus {
  color: var(--accent-blue);
  opacity: 1;
}

.nav__phone-icon {
  width: clamp(14px, 3vw, 18px);
  height: clamp(14px, 3vw, 18px);
  flex-shrink: 0;
  object-fit: contain;
}

/* Mobile Menu Toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  min-width: 44px; /* Touch target size */
  min-height: 44px;
}

.nav__toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--text-dark);
  transition: all var(--transition-normal);
  border-radius: 2px;
  pointer-events: none;
}

.nav__toggle:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.nav__toggle--active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.nav__toggle--active span:nth-child(2) {
  opacity: 0;
}

.nav__toggle--active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  background-color: var(--bg-white);
  padding: var(--spacing-xl) var(--container-padding);
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding-top: calc(
    var(--spacing-xl) + 60px
  ); /* Align with Contact Us in navbar */
}

.hero__container {
  max-width: var(--container-max-width);
  margin: 0 auto; /* Center the container */
  display: grid !important; /* Force grid layout */
  grid-template-columns: 1.3fr 0.7fr !important; /* Text left, bottle right - all screen sizes */
  gap: clamp(0.5rem, 1.5vw, var(--spacing-sm)); /* Further reduced gap to bring bottle closer to text */
  align-items: stretch; /* Stretch both columns to same height */
  padding-left: 0; /* Remove padding - hero section handles margins */
  padding-right: 0; /* Remove padding - hero section handles margins */
  flex-direction: row !important; /* Override any flex column rules */
  width: calc(100% - 0px); /* Ensure proper width calculation for centering */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Ensure side-by-side on all screen sizes */
@media (max-width: 768px) {
  .hero__container {
    grid-template-columns: 1.2fr 0.8fr; /* Slightly adjust ratio on tablet */
  }
}

/* Mobile media query moved to main mobile section below */

.hero__content {
  padding-left: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%; /* Ensure content takes full grid cell height */
}

.hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 4vw, 3.5rem);
  font-weight: var(--font-weight-bold); /* Gotham Bold */
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
  color: var(--text-dark);
}

.hero__heading span {
  display: block;
}

.hero__heading--red {
  color: var(--accent-red);
}

.hero__heading--blue {
  color: var(--accent-blue);
}

.hero__subtitle {
  font-size: clamp(0.875rem, 2.5vw, 1.25rem);
  margin-bottom: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
  color: var(--text-dark);
  line-height: 1.6;
}

.hero__subtitle span {
  display: block;
}

.hero__content .btn {
  margin-top: var(--spacing-sm);
}

.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--spacing-xs), 1.5vw, var(--spacing-sm));
  margin-top: var(--spacing-sm);
}

.hero__cta-group .btn {
  margin-top: 0;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

@media (min-width: 768px) {
  .hero__cta-group {
    flex-direction: row;
    gap: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
  }
  
  .hero__cta-group .btn {
    width: auto;
    flex: 0 1 auto;
  }
}

.hero__image {
  display: flex;
  justify-content: flex-start;
  align-items: stretch; /* Stretch to match content height */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: clamp(var(--spacing-xs), 1vw, var(--spacing-sm)); /* Further reduced padding to bring closer */
  align-self: stretch; /* Match content height - align with content top and bottom */
  margin-top: 0; /* Remove negative margin - use grid alignment instead */
  margin-bottom: 0;
  position: relative;
  width: 100%;
  overflow: visible; /* Allow arrow to be visible */
  height: 100%; /* Match container height */
}

/* Hero Carousel */
.hero__carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible; /* Allow arrow to be visible */
}

.hero__carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible; /* Allow arrow to be visible outside track */
  display: flex;
  align-items: stretch; /* Stretch to match content height */
}

.hero__carousel-slide {
  display: none;
  width: 100%;
  height: 100%;
}

.hero__carousel-slide--active {
  display: block;
}

.hero__carousel-controls {
  position: absolute;
  top: 50%;
  left: -10px; /* Extend beyond container to show arrow */
  right: -10px; /* Extend beyond container to show arrow */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
  padding: 0 clamp(10px, 2vw, 20px);
}

.hero__carousel-btn {
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  padding: clamp(8px, 1.5vw, 12px);
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.8;
}

.hero__carousel-btn:hover,
.hero__carousel-btn:focus {
  opacity: 1;
}

.hero__carousel-btn--prev {
  left: clamp(-20px, -3vw, -10px);
}

.hero__carousel-btn--prev:not(.hero__carousel-btn--visible) {
  opacity: 0;
  pointer-events: none;
}

.hero__carousel-btn--next {
  right: clamp(-25px, -4vw, -10px); /* Moved further from bottle */
}

.hero__carousel-btn--next.hero__carousel-btn--hidden {
  opacity: 0.6; /* Keep visible but dimmed when disabled */
  pointer-events: none;
}

.hero__carousel-arrow {
  width: clamp(12px, 2.5vw, 20px);
  height: auto;
  object-fit: contain;
}

.hero__carousel-arrow--prev {
  transform: rotate(180deg);
}

/* Mobile responsive styles for hero carousel */
@media (max-width: 768px) {
  .hero__carousel-btn {
    min-width: 40px;
    min-height: 40px;
    padding: clamp(6px, 1.2vw, 10px);
  }
  
  .hero__carousel-btn--prev {
    left: clamp(-15px, -2.5vw, -5px);
  }
  
  .hero__carousel-btn--next {
    right: clamp(-20px, -3.5vw, -8px); /* Moved further from bottle on tablet */
  }
  
  .hero__carousel-arrow {
    width: clamp(10px, 2vw, 16px);
  }
}

@media (max-width: 480px) {
  .hero__carousel-btn {
    min-width: 36px;
    min-height: 36px;
    padding: clamp(5px, 1vw, 8px);
  }
  
  .hero__carousel-btn--prev {
    left: clamp(-12px, -2vw, -3px);
  }
  
  .hero__carousel-btn--next {
    right: clamp(-12px, -2vw, -2px); /* Moved further from bottle on mobile */
  }
  
  .hero__carousel-arrow {
    width: clamp(8px, 1.8vw, 14px);
  }
  
  .hero__cta-group {
    flex-direction: column;
    gap: clamp(var(--spacing-xs), 1.2vw, var(--spacing-sm));
    width: 100%;
    max-width: 100%;
  }
  
  .hero__cta-group .btn {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }
}

.hero__bottle {
  width: auto !important; /* Don't force 100% width */
  max-width: 100% !important; /* Allow to scale within container */
  height: 100% !important; /* Match content height */
  object-fit: contain; /* Maintain aspect ratio while fitting height */
  display: block;
  /* Bottle height will match content height, width scales proportionally */
}

.hero__bottle--tilted {
  transform: rotate(-3deg); /* Tilt more to the left - only for bottle image */
}

/* Further reduce bottle size on laptop/desktop screens */
@media (min-width: 1024px) {
  .hero__bottle {
    max-width: clamp(120px, 12vw, 180px) !important; /* Smaller on laptop - max 180px */
  }
}

@media (min-width: 1280px) {
  .hero__bottle {
    max-width: clamp(130px, 11vw, 190px) !important; /* Controlled size on 1280px screens */
  }
}

@media (min-width: 1440px) {
  .hero__bottle {
    max-width: clamp(140px, 10vw, 200px) !important; /* Controlled size on very large screens */
  }
}

/* ============================================
   ASF SECTION
   ============================================ */
.asf-section {
  padding: var(--spacing-xl) var(--container-padding);
  padding-bottom: var(--spacing-lg); /* Reduced padding - no overlap needed, thumbnail is in Section 3 only */
  position: relative;
  z-index: 3; /* Normal stacking order */
  color: var(--text-light);
  min-height: auto; /* Remove fixed min-height */
  width: 100%;
  overflow: visible;
}

.asf-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../assets/Section 2/Background.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0; /* Normal stacking order */
  pointer-events: none; /* Allow clicks to pass through to content */
}

/* Tablet and smaller screens - reduce red section size */
@media (max-width: 1024px) {
  .asf-section {
    padding-bottom: var(--spacing-md); /* Reduced padding - no overlap */
  }
}

@media (max-width: 768px) {
  .asf-section {
    padding-bottom: var(--spacing-sm); /* Further reduced for smaller tablets */
  }
}

@media (max-width: 480px) {
  .asf-section {
    overflow: visible;
    padding-bottom: var(--spacing-sm); /* Reduced padding for mobile - no overlap */
    padding-top: var(--spacing-md);
    min-height: auto;
  }
}

.asf-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1; /* Normal stacking order - above background */
  text-align: center;
}

.asf-section__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--font-weight-bold); /* Gotham Bold */
  margin-bottom: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add shadow for better readability */
  position: relative;
  z-index: 2; /* Above background */
}

.asf-section__heading span {
  display: block;
}

.asf-section__text {
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-width: clamp(280px, 90vw, 800px);
  margin: 0 auto clamp(var(--spacing-sm), 3vw, var(--spacing-lg));
  line-height: 1.8;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Add shadow for better readability */
  position: relative;
  z-index: 2; /* Above background */
}

.asf-section__content {
  position: relative;
  z-index: 2; /* Above background */
  margin-bottom: clamp(var(--spacing-xs), 2vw, var(--spacing-sm)); /* Reduced margin below CTA - proportional */
  padding-bottom: 0; /* No extra padding */
}

.asf-section__content .btn {
  position: relative;
  z-index: 2; /* Above background */
  display: inline-block;
  margin-top: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
  margin-bottom: 0;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================
   VIDEO MODAL
   ============================================ */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.video-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  cursor: pointer;
}

.video-modal__content {
  position: relative;
  width: 95%;
  max-width: 1920px;
  height: 95%;
  max-height: 1080px;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  pointer-events: none; /* Allow clicks to pass through to overlay */
}

.video-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  transition: background-color 0.2s ease, transform 0.2s ease;
  padding: 0;
  pointer-events: auto; /* Ensure close button is clickable */
}

.video-modal__close:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.video-modal__close svg {
  width: 24px;
  height: 24px;
  stroke: #000;
}

.video-modal__video-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  pointer-events: auto; /* Re-enable pointer events for video container */
}

.video-modal__video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background-color: #000;
}

.video-modal__youtube-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  background-color: #000;
  border-radius: 8px;
}

.video-modal__youtube-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Responsive adjustments for video modal */
@media (max-width: 768px) {
  .video-modal__content {
    width: 100%;
    height: 100%;
    padding: 1rem;
  }

  .video-modal__close {
    top: 0.5rem;
    right: 0.5rem;
    width: 36px;
    height: 36px;
  }

  .video-modal__close svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================
   VIDEO SECTION
   ============================================ */
.video-section {
  background-color: var(--bg-white);
  padding: var(--spacing-xl) var(--container-padding);
  padding-top: var(--spacing-xl); /* Normal padding - no overlap */
  position: relative;
  z-index: 1; /* Normal stacking order */
  margin-top: 0; /* No negative margin - thumbnail stays in Section 3 */
  overflow: visible;
}

.video-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  text-align: center;
  padding-top: 0;
}

.video-section__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-bold); /* Gotham Bold */
  margin: 0;
  color: var(--text-dark);
}

.video-section__heading--red {
  color: var(--accent-red);
}

.video-section__heading--blue {
  color: var(--accent-blue);
}

.video-section__player {
  position: relative;
  width: 100%;
  max-width: clamp(280px, 90vw, 800px);
  margin: 0 auto;
  z-index: 1; /* Normal stacking order */
  margin-top: 0; /* No negative margin - thumbnail stays in Section 3 */
  margin-bottom: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
  overflow: visible;
}

.video-section__play-btn {
  position: relative;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  overflow: visible; /* Prevent cropping of thumbnail */
}

.video-section__thumbnail {
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1; /* Normal stacking order */
  display: block;
}

.video-section__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(80px, 12vw, 120px);
  height: clamp(80px, 12vw, 120px);
  min-width: 80px;
  min-height: 80px;
  transition: transform var(--transition-fast);
  z-index: 10; /* Above thumbnail */
  pointer-events: none; /* Allow clicks to pass through to button */
  display: block;
  object-fit: contain;
}

.video-section__play-btn:hover .video-section__play-icon {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Play icon scales proportionally via clamp above - no need for separate media queries */

/* ============================================
   MECHANISM SECTION
   ============================================ */
.mechanism-section {
  background-image: url("../assets/Section 4/Background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(var(--spacing-lg), 5vw, var(--spacing-xxl)) var(--container-padding);
  position: relative;
  color: var(--text-light);
}

.mechanism-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(25, 118, 210, 0.95);
  z-index: 0;
}

.mechanism-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--spacing-md), 4vw, var(--spacing-xl));
  align-items: center;
  position: relative;
  z-index: 1;
}

.mechanism-section__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3.5vw, 3rem);
  font-weight: var(--font-weight-bold); /* Gotham Bold */
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

.mechanism-section__text {
  font-size: clamp(0.875rem, 2vw, 1.125rem);
  margin-bottom: var(--spacing-md);
  line-height: 1.8;
}

.mechanism-section__benefits {
  margin-bottom: clamp(var(--spacing-sm), 3vw, var(--spacing-lg));
}

.mechanism-section__content {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center all content including CTA */
  text-align: center;
}

.mechanism-section__content .btn--red {
  margin-top: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
  align-self: center; /* Center the CTA button */
}

.mechanism-section__benefit {
  display: flex;
  align-items: flex-start;
  gap: clamp(var(--spacing-xs), 1.5vw, var(--spacing-sm));
  margin-bottom: clamp(var(--spacing-xs), 1.5vw, var(--spacing-sm));
  font-size: clamp(0.8rem, 2vw, 1.125rem);
  line-height: 1.6;
  text-align: left; /* Left align text, but container is centered */
  max-width: 100%;
}

.mechanism-section__check {
  font-size: clamp(20px, 4.5vw, 28px);
  color: var(--text-light);
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-block;
  line-height: 1;
  width: clamp(20px, 4.5vw, 28px);
  text-align: center;
}

.mechanism-section__animation {
  overflow: visible; /* Allow cell glow effects to extend beyond container */
  position: relative;
}

/* Cell Animation */
.cell-animation {
  width: 100%;
  height: clamp(250px, 35vw, 400px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* Allow glow effects to show */
  padding: clamp(10px, 2vw, 20px); /* Add padding to prevent cells from going outside while allowing glow */
}

.cell-animation__container {
  position: relative;
  width: 100%;
  max-width: clamp(400px, 50vw, 600px); /* Larger base size to maintain cell positions */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* Allow glow effects to extend beyond container */
  aspect-ratio: 1; /* Maintain square aspect ratio to preserve cell positions */
  height: auto; /* Let aspect-ratio control height */
}

.cell-animation__cell {
  position: absolute;
  animation: cellPulse 2s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, filter, opacity, clip-path;
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  contain: layout style paint;
}

/* Modern ripple container for layered effects */
.cell-animation__ripple-container {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  transform-style: preserve-3d;
}

/* Modern ripple effect layers */
.cell-animation__ripple-effect {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: width, height, opacity, transform;
  transform-origin: center center;
}

.cell-animation__ripple-effect--layer-1 {
  z-index: 1004;
}

.cell-animation__ripple-effect--layer-2 {
  z-index: 1003;
}

.cell-animation__ripple-effect--layer-3 {
  z-index: 1002;
}

.cell-animation__ripple-effect--layer-4 {
  z-index: 1001;
}

.cell-animation__ripple-effect--layer-5 {
  z-index: 1000;
}

/* Modern liquify effect using CSS custom properties */
.cell-animation__cell[data-cell-state="red"] {
  --liquify-scale: 1;
  --liquify-offset-x: 0%;
  --liquify-offset-y: 0%;
  --liquify-blur: 0px;
  --liquify-brightness: 1;
}

/* Smooth clip-path transitions for organic shapes */
@keyframes cellLiquifyClip {
  0% {
    clip-path: inset(0% 0% 0% 0% round 0%);
  }
  50% {
    clip-path: inset(5% 8% 5% 8% round 18% 22% 18% 22%);
  }
  100% {
    clip-path: inset(0% 0% 0% 0% round 0%);
  }
}

/* Modern 3D transform animation with smooth liquify */
@keyframes cellLiquify3D {
  0% {
    transform: scale(0.88) translate(0%, 0%) perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    filter: blur(3px) brightness(1.3) contrast(1.1) saturate(1.2);
    clip-path: inset(5% 5% 5% 5% round 15% 20% 15% 20%);
  }
  30% {
    transform: scale(0.92) translate(0%, 0%) perspective(550px) rotateX(1deg) rotateY(1deg) rotateZ(0.5deg);
    filter: blur(2px) brightness(1.25) contrast(1.08) saturate(1.18);
    clip-path: inset(3% 4% 3% 4% round 12% 18% 12% 18%);
  }
  60% {
    transform: scale(1.18) translate(0%, 0%) perspective(650px) rotateX(2deg) rotateY(2deg) rotateZ(1deg);
    filter: blur(1px) brightness(1.15) contrast(1.05) saturate(1.15);
    clip-path: inset(1% 2% 1% 2% round 10% 15% 10% 15%);
  }
  100% {
    transform: scale(1) translate(0%, 0%) perspective(700px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    filter: blur(0px) brightness(1) contrast(1) saturate(1);
    clip-path: inset(0% 0% 0% 0% round 0%);
  }
}

.cell-animation__cell:hover {
  transform: scale(1.1) perspective(500px) rotateX(2deg) rotateY(2deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Red cell glow effect - default state (cells start red) */
.cell-animation__cell.cell-red {
  filter: drop-shadow(0 0 10px rgba(251, 54, 64, 0.5)); /* Red glow effect */
}

.cell-animation__cell.cell-red:hover {
  filter: drop-shadow(0 0 15px rgba(251, 54, 64, 0.8));
  cursor: pointer; /* Show pointer on hover for red cells */
}

/* Blue cell glow effect - applied when cell is clicked (treated) */
.cell-animation__cell.cell-blue {
  filter: drop-shadow(0 0 10px rgba(0, 125, 235, 0.5)); /* Blue glow effect */
}

.cell-animation__cell.cell-blue:hover {
  filter: drop-shadow(0 0 15px rgba(0, 125, 235, 0.8));
  cursor: default; /* Blue cells are no longer clickable */
}

@keyframes cellPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Ripple animation for click prompt */
@keyframes rippleAnimation {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.cell-animation__click-prompt-wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell-animation__click-prompt {
  position: relative;
  text-align: center;
  z-index: 101; /* Higher than wrapper to ensure text is in front */
}

.cell-animation__ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* ============================================
   PROOF SECTION (CAROUSEL)
   ============================================ */
.proof-section {
  background-color: var(--bg-white);
  padding: clamp(var(--spacing-md), 4vw, var(--spacing-xl)) var(--container-padding);
}

.proof-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--spacing-md), 4vw, var(--spacing-xl));
  align-items: center;
}

.proof-section__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align content to left for cleaner layout */
}

.proof-section__learn-more-btn {
  grid-column: 1 / -1; /* Span all columns in the grid */
  margin-top: clamp(var(--spacing-md), 3vw, var(--spacing-xl));
  justify-self: center;
  text-align: center;
  display: inline-block;
}

.proof-section__heading {
  margin-bottom: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
}

.proof-section__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3.5vw, 3rem);
  font-weight: var(--font-weight-bold); /* Gotham Bold */
  margin-bottom: var(--spacing-md);
  color: var(--text-dark);
  line-height: 1.2;
}

.proof-section__heading-line {
  display: block; /* Each line on its own line */
  line-height: 1.2;
}

.proof-section__heading--red {
  color: var(--accent-red);
}

.proof-section__heading--blue {
  color: var(--accent-blue);
}

/* Carousel */
.carousel {
  position: relative;
  width: 100%;
  max-width: clamp(300px, 75vw, 700px); /* Limit carousel width for cleaner layout */
  margin: 0 auto; /* Center the carousel */
  padding: 0 clamp(15px, 2.5vw, 35px); /* Space for side arrows - proportional */
  overflow: visible; /* Allow next slide preview to be visible */
}

.carousel__track {
  overflow: visible; /* Allow next slide to be visible */
  border-radius: 0;
  box-shadow: none;
  position: relative;
  border: none;
  display: flex;
  gap: 0;
  align-items: center;
}

.carousel__slide {
  display: none; /* Hide by default */
  position: relative;
  flex-shrink: 0;
  width: 100%;
  border: none; /* No border on cert */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel__slide--active {
  display: block;
  opacity: 1; /* Active slide is fully visible */
  z-index: 2;
  position: relative;
  transform: translateX(0) scale(1);
  animation: slideInActive 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel__slide--next {
  display: block;
  position: absolute;
  top: 0;
  right: -25%; /* Position next slide to the right, partially visible */
  width: 75%; /* Slightly smaller */
  opacity: 0.3; /* Less opacity for preview */
  z-index: 1;
  pointer-events: none; /* Don't interfere with interactions */
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0) scale(0.95);
  animation: slideInNext 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation for active slide coming in from left */
@keyframes slideInActive {
  0% {
    transform: translateX(-30px) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* Animation for next slide preview */
@keyframes slideInNext {
  0% {
    transform: translateX(20px) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scale(0.95);
    opacity: 0.3;
  }
}

/* Animation for slide going out to left */
@keyframes slideOutLeft {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-30px) scale(0.95);
    opacity: 0;
  }
}

/* Exiting slide animation */
.carousel__slide--exiting {
  animation: slideOutLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.carousel__slide-wrapper {
  position: relative;
  width: 100%;
  cursor: pointer;
  border: none; /* No border on cert */
}

/* Gradient transition overlay for next cert preview */
.carousel__track::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(to left, 
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.5) 30%,
    rgba(255, 255, 255, 0.2) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: normal;
}

.carousel__slide-wrapper::before {
  content: "";
  position: absolute;
  bottom: 0; /* Position at bottom only */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: 100%; /* Match certificate width */
  max-width: 100%;
  height: 20%; /* Allow enough height to show image shape */
  background-image: url("../assets/Section 5/Black Hover.png");
  background-size: contain; /* Preserve entire image shape, don't crop */
  background-position: center bottom; /* Align to bottom center */
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--transition-normal);
  z-index: 1;
  pointer-events: none;
  /* Use the natural shape of the image - no border-radius needed */
}

/* Show black hover overlay only when hovering over "View More" link */
.carousel__slide-wrapper:has(.carousel__view-more:hover)::before {
  opacity: 1;
}

.carousel__image {
  width: 100%;
  max-width: clamp(250px, 70vw, 600px); /* Scale down certificates - smaller max size */
  height: auto;
  display: block;
  border: none;
  border-radius: clamp(8px, 1.5vw, 12px); /* Rounded corners for certificates - proportional */
  position: relative;
  z-index: 0;
  /* Remove scale transform - show full cert */
  transform: none;
  transform-origin: center center;
  object-fit: contain;
  max-height: clamp(300px, 50vh, 500px); /* Limit height to prevent oversized certificates */
  background-color: transparent;
  margin: 0 auto; /* Center the certificate */
}

/* Error state for missing/broken images */
.carousel__image[src=""],
.carousel__image:not([src]) {
  display: none;
}

/* Ensure images load properly */
.carousel__image[src*="Cert_"] {
  max-width: 100%;
  height: auto;
}

.carousel__overlay {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(250px, 70vw, 600px); /* Match certificate max-width */
  max-width: 100%; /* Don't exceed container */
  height: clamp(30px, 8vh, 50px); /* Proportional height to certificate */
  max-height: 10%; /* Limit to 10% of certificate height */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(4px, 0.5vh, 8px); /* Minimal padding */
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

/* Show overlay only when hovering over "View More" link */
.carousel__slide-wrapper:has(.carousel__view-more:hover) .carousel__overlay {
  opacity: 1;
}

.carousel__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%; /* Full height of overlay */
  background-color: rgba(128, 128, 128, 0.9); /* Solid grey background - no gradient */
  background-image: none; /* Remove gradient image */
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 1;
  border-radius: 0 0 clamp(8px, 1.5vw, 12px) clamp(8px, 1.5vw, 12px); /* Match certificate rounded corners */
}

.carousel__view-more {
  position: relative;
  z-index: 3;
  color: var(--text-light); /* White text */
  font-weight: var(--font-weight-bold);
  font-size: clamp(0.5rem, 1vw, 0.65rem); /* Smaller text to match certificate size */
  text-transform: uppercase;
  letter-spacing: 0.2px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  text-decoration: underline; /* White underline */
  text-decoration-color: var(--text-light); /* White underline color */
  text-underline-offset: 2px; /* Space between text and underline */
  pointer-events: auto; /* Enable pointer events so it can be hovered */
  cursor: pointer;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
  opacity: 1; /* Always visible so users can hover over it */
  padding: clamp(2px, 0.3vh, 4px) clamp(4px, 0.5vw, 8px); /* Reduced padding proportional to certificate */
  white-space: nowrap; /* Prevent text wrapping */
}

/* Keep white text and underline on hover */
.carousel__view-more:hover {
  color: var(--text-light); /* Stay white */
  text-decoration-color: var(--text-light); /* Keep white underline */
}

.carousel__view-more:focus {
  color: var(--text-light); /* Stay white */
  text-decoration-color: var(--text-light); /* Keep white underline */
}

/* ============================================
   CERTIFICATE MODAL
   ============================================ */
.certificate-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.certificate-modal[aria-hidden="false"] {
  display: flex;
}

.certificate-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.certificate-modal__content {
  position: relative;
  background-color: var(--bg-white);
  border-radius: 12px;
  max-width: 75%; /* Even smaller modal */
  max-height: 80vh; /* Smaller height */
  width: auto;
  height: auto;
  padding: var(--spacing-sm); /* Minimal padding */
  margin: var(--spacing-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.certificate-modal__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.certificate-modal__close:hover {
  background-color: var(--bg-white);
  transform: scale(1.1);
}

.certificate-modal__close:active {
  transform: scale(0.95);
}

.certificate-modal__close svg {
  width: 24px;
  height: 24px;
  color: var(--text-dark);
  stroke-width: 2.5;
}

.certificate-modal__image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* No scrolling - image must fit */
  max-height: calc(80vh - 40px); /* Match modal max-height minus minimal padding */
  max-width: 100%;
}

.certificate-modal__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* Ensure entire image is visible without cropping */
  display: block;
  border-radius: 12px; /* Rounded corners to match carousel */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  /* Ensure image scales to fit viewport */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

@media (max-width: 768px) {
  .certificate-modal__content {
    max-width: 85%; /* Smaller on mobile */
    max-height: 85vh; /* Smaller on mobile */
    padding: var(--spacing-xs);
  }

  .certificate-modal__close {
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    width: 32px;
    height: 32px;
  }

  .certificate-modal__close svg {
    width: 18px;
    height: 18px;
  }

  .certificate-modal__image-container {
    max-height: calc(85vh - 30px); /* Match mobile modal height with minimal padding */
  }
}

.carousel__controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}

.carousel__btn {
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  padding: 0;
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.carousel__btn--prev {
  left: -30px;
  opacity: 0;
  pointer-events: none;
}

.carousel__btn--prev.carousel__btn--visible {
  opacity: 1;
  pointer-events: auto;
}

.carousel__btn--next {
  right: -30px;
}

@media (max-width: 768px) {
  .carousel__btn--prev {
    left: 0;
  }

  .carousel__btn--next {
    right: 0;
  }

  .carousel__btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel__arrow {
    width: 12px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .carousel {
    padding: 0 30px;
  }

  .carousel__btn--prev {
    left: 0;
  }

  .carousel__btn--next {
    right: 0;
  }

  .carousel__arrow {
    width: 10px;
    height: 15px;
  }
}

.carousel__btn--next.carousel__btn--hidden {
  opacity: 0;
  pointer-events: none;
}

.carousel__btn:hover,
.carousel__btn:focus {
  opacity: 0.7;
}

.carousel__arrow {
  width: clamp(12px, 2.5vw, 16px);
  height: clamp(18px, 3.5vw, 24px);
  display: block;
  transition: opacity var(--transition-fast);
  object-fit: contain;
}

.carousel__arrow--prev {
  transform: rotate(180deg);
}

.carousel__arrow--next {
  transform: rotate(0deg);
}

.carousel__indicators {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-md);
}

  .carousel__indicator {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px; /* Better touch target */
    transition: transform var(--transition-fast), opacity var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

.carousel__indicator:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

.carousel__indicator-img {
  width: clamp(10px, 2vw, 12px);
  height: clamp(10px, 2vw, 12px);
  display: block;
  transition: opacity var(--transition-fast);
}

.carousel__indicator--active .carousel__indicator-img {
  opacity: 1;
}

.carousel__indicator:not(.carousel__indicator--active) .carousel__indicator-img {
  opacity: 0.5;
}

/* ============================================
   PRODUCT SECTION
   ============================================ */
.product-section {
  background-image: url("../assets/Section 6/Background.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 0;
  width: 100%;
  position: relative;
  color: var(--text-light);
  display: block;
  /* Image is 4000x2483, aspect ratio ~1.61:1 */
  /* Use padding-bottom trick to maintain aspect ratio: height = width * (2483/4000) */
  padding-bottom: 62.075%; /* 2483/4000 * 100 = 62.075% */
  min-height: 800px; /* Fallback minimum height */
  overflow: hidden;
}

/* Ensure section has enough height on larger screens */
@media (min-width: 1025px) {
  .product-section {
    min-height: 900px; /* Increased minimum height on desktop */
  }
}

@media (min-width: 1440px) {
  .product-section {
    min-height: 1000px; /* Even more height on large screens */
  }
}

@media (min-width: 1920px) {
  .product-section {
    min-height: 1100px; /* Maximum height on extra large screens */
  }
}

/* Desktop and larger screens - ensure features are well below product */
/* Laptop and desktop screens - push features down more */
@media (min-width: 1024px) {
  .product-section__features {
    /* Push features DOWN by using smaller bottom values - laptop sizes need more space */
    bottom: clamp(0.5%, 2.5vw, 3%) !important; /* Very small bottom = features pushed way down on laptops */
    position: absolute !important;
  }

  .product-section__container {
    padding-bottom: clamp(24rem, 34vw, 32rem) !important; /* Extra bottom padding on desktop/laptop */
    padding-top: clamp(3rem, 6vw, 5rem);
  }
  
  .product-section__heading {
    margin-bottom: clamp(3rem, 8vw, 5rem); /* More space below heading on desktop */
  }
}

/* Large desktop screens - even more spacing */
@media (min-width: 1440px) {
  .product-section__features {
    bottom: clamp(1%, 3vw, 4%) !important; /* Even smaller = pushed further down */
  }
  
  .product-section__container {
    padding-bottom: clamp(24rem, 34vw, 32rem) !important;
  }
}

/* Extra large screens - maximum spacing */
@media (min-width: 1920px) {
  .product-section__features {
    bottom: clamp(0.5%, 2vw, 3%) !important; /* Smallest = pushed furthest down */
  }
  
  .product-section__container {
    padding-bottom: clamp(28rem, 40vw, 38rem) !important;
  }
}

/* Tablet screens - medium spacing */
@media (min-width: 769px) and (max-width: 1023px) {
  .product-section__features {
    bottom: clamp(12%, 15vw, 22%); /* Position features below product on tablet */
  }
  
  .product-section__container {
    padding-bottom: clamp(5rem, 10vw, 8rem);
  }
}

@media (max-width: 768px) {
  .product-section {
    background-size: cover;
    padding-bottom: 80%;
    min-height: 600px;
  }

  .product-section__features {
    bottom: clamp(8%, 10vw, 15%); /* Position features below product on tablet */
  }
  
  .product-section__container {
    padding-top: clamp(1.5rem, 4vw, 3rem);
    padding-bottom: clamp(3rem, 8vw, 6rem);
  }
}

@media (max-width: 480px) {
  .product-section {
    padding-bottom: 70%;
    min-height: 500px;
  }

  .product-section__features {
    bottom: clamp(6%, 8vw, 12%); /* Position features below product on mobile */
  }
  
  .product-section__container {
    padding-top: clamp(1rem, 3vw, 2rem);
    padding-bottom: clamp(2rem, 6vw, 4rem);
  }
  
  .product-section__heading {
    margin-bottom: clamp(1.5rem, 5vw, 3rem); /* Reduced spacing on mobile */
  }
}

.product-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 0;
}

.product-section__container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Start from top */
  padding: var(--spacing-xl) var(--container-padding);
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(4rem, 10vw, 8rem); /* Extra bottom padding to push features below product */
  gap: var(--spacing-xl); /* Add gap between elements */
  min-height: 100%; /* Ensure container takes full height */
}

.product-section__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3.5vw, 3rem);
  font-weight: var(--font-weight-bold); /* Gotham Bold */
  margin-bottom: clamp(2rem, 6vw, 4rem); /* Increased spacing below heading */
  line-height: 1.2;
}

.product-section__display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.product-section__box-img,
.product-section__bottle-img {
  max-width: 300px;
  width: 100%;
  filter: drop-shadow(var(--shadow-lg));
}

.product-section__features {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 2vw, var(--spacing-md));
  flex-wrap: nowrap; /* Keep horizontal layout on all screens */
  position: absolute; /* Use absolute positioning to place below product consistently */
  bottom: clamp(8%, 12vw, 20%); /* Position from bottom - increased max for medium screens */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  z-index: 1;
  padding: 0 var(--container-padding);
  box-sizing: border-box;
  margin: 0; /* Remove margin since we're using bottom positioning */
}

.product-section__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.25rem, 1vw, var(--spacing-sm));
  flex: 0 1 auto;
  min-width: 0; /* Allow flexible shrinking */
}

.product-section__feature-icon {
  width: clamp(40px, 10vw, 80px);
  height: clamp(40px, 10vw, 80px);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(0.125rem, 0.5vw, var(--spacing-xs));
  padding: clamp(0.125rem, 0.5vw, var(--spacing-xs));
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  cursor: pointer;
}

.product-section__feature-icon:hover {
  transform: scale(1.2); /* Enlarge on hover */
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.product-section__feature-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-section__feature-title {
  font-size: clamp(0.7rem, 2vw, 1.25rem);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.product-section__connector {
  width: clamp(20px, 5vw, 60px);
  height: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

/* ============================================
   INFOGRAPHICS SECTION
   ============================================ */
.infographics-section {
  background-color: var(--bg-light);
  padding: var(--spacing-xxl) var(--container-padding);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.infographics-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
  align-items: center;
}

.infographics-section__hero {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  position: relative;
}

.infographics-section__hero-content {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
}

.infographics-section__hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.infographics-section__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: var(--spacing-md);
}

.infographics-section__heading--red {
  color: var(--accent-red);
}

.infographics-section__heading--blue {
  color: var(--accent-blue); /* Use bright blue for "Lasting Immunity" */
}

.infographics-section__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-dark);
  margin-bottom: var(--spacing-md);
}

.infographics-section__timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  flex-shrink: 0;
  margin-top: 0;
}

.infographics-section__timeline-circle {
  position: relative;
  width: clamp(40px, 8vw, 60px);
  height: clamp(40px, 8vw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.infographics-section__timeline-circle-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
}

.infographics-section__timeline-number {
  position: relative;
  z-index: 1;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--text-light);
}

.infographics-section__timeline-circle--active .infographics-section__timeline-circle-img {
  opacity: 1;
}

.infographics-section__timeline-circle:not(.infographics-section__timeline-circle--active) .infographics-section__timeline-circle-img {
  opacity: 0.5;
}

.infographics-section__timeline-line {
  width: 3px;
  height: clamp(30px, 6vw, 50px);
  background-color: var(--text-muted);
  margin-left: calc(clamp(40px, 8vw, 60px) / 2 - 1.5px);
  display: block; /* Ensure lines are visible and connecting circles */
}

.infographics-section__display {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible; /* Allow navigation buttons to extend beyond */
  padding: 0 clamp(40px, 8vw, 60px); /* Add padding to accommodate buttons */
}

.infographics-section__phone-frame {
  position: relative;
  max-width: 100%;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 9 / 16;
  background: transparent; /* Remove colorful gradient background */
  border-radius: clamp(20px, 4vw, 40px);
  padding: clamp(10px, 2vw, 20px);
  box-shadow: none; /* Remove shadow since there's no background */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* Allow navigation buttons to be visible */
  border: none;
}

.infographics-section__carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Keep carousel content contained */
  border-radius: clamp(15px, 3vw, 30px);
}

.infographics-section__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-base), transform var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.infographics-section__slide--active {
  opacity: 1;
  z-index: 2;
  transform: translateX(0);
}

.infographics-section__slide--next {
  opacity: 0.3; /* Reduced opacity for preview */
  z-index: 1;
  pointer-events: none;
  transform: translateX(25%); /* Position to the right as preview */
}

.infographics-section__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: clamp(10px, 2vw, 20px);
}

.infographics-section__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: clamp(40px, 8vw, 60px);
  height: clamp(40px, 8vw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  z-index: 10;
  box-shadow: var(--shadow-md);
}

.infographics-section__nav-btn:hover {
  background-color: var(--text-light);
  transform: translateY(-50%) scale(1.1);
}

.infographics-section__nav-btn--next {
  right: clamp(-15px, -3vw, -25px);
}

.infographics-section__nav-btn--prev {
  left: clamp(-15px, -3vw, -25px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.infographics-section__nav-btn--prev.infographics-section__nav-btn--visible {
  opacity: 1;
  pointer-events: auto;
}

.infographics-section__arrow {
  width: clamp(16px, 3vw, 24px);
  height: clamp(16px, 3vw, 24px);
  object-fit: contain;
}

.infographics-section__arrow--prev {
  transform: rotate(180deg);
}

/* Responsive Design for Infographics Section */
@media (max-width: 1024px) {
  .infographics-section__container {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .infographics-section__hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .infographics-section__hero-text {
    align-items: center;
    text-align: center;
  }

  .infographics-section__timeline {
    flex-direction: row;
    justify-content: center;
    margin-bottom: var(--spacing-md);
  }

  .infographics-section__timeline-line {
    width: clamp(30px, 6vw, 50px);
    height: 3px;
    margin-left: 0;
    margin-top: 0;
  }

  .infographics-section__display {
    order: -1; /* Show infographic first on mobile */
    padding: 0 clamp(35px, 7vw, 55px); /* Add padding to accommodate buttons on tablet */
  }
}

@media (max-width: 768px) {
  .infographics-section {
    padding: var(--spacing-xl) var(--container-padding);
  }

  .infographics-section__heading {
    font-size: clamp(1.5rem, 6vw, 3rem);
  }

  .infographics-section__subtitle {
    font-size: clamp(0.875rem, 3vw, 1.125rem);
  }

  .infographics-section__phone-frame {
    max-width: 100%;
  }

  .infographics-section__nav-btn {
    width: clamp(35px, 7vw, 50px);
    height: clamp(35px, 7vw, 50px);
  }

  .infographics-section__nav-btn--next {
    right: clamp(-15px, -3vw, -25px);
  }

  .infographics-section__nav-btn--prev {
    left: clamp(-15px, -3vw, -25px);
  }
}

@media (max-width: 480px) {
  .infographics-section__phone-frame {
    padding: clamp(8px, 1.5vw, 15px);
  }

  .infographics-section__nav-btn {
    width: clamp(30px, 6vw, 45px);
    height: clamp(30px, 6vw, 45px);
  }

  .infographics-section__nav-btn--next {
    right: clamp(-10px, -2vw, -20px);
  }

  .infographics-section__nav-btn--prev {
    left: clamp(-10px, -2vw, -20px);
  }
}

/* ============================================
   ADMIN SECTION
   ============================================ */
.admin-section {
  background-image: url("../assets/Section 7/Background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--spacing-xxl) var(--container-padding);
  position: relative;
}

.admin-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.admin-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.admin-section__heading {
  font-size: clamp(1.25rem, 3.5vw, 3rem);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--spacing-lg);
  color: var(--text-light);
  line-height: 1.3;
}

.admin-section__heading--red {
  color: var(--accent-red);
}

.admin-section__heading--blue {
  color: var(--accent-blue);
}

.admin-section__video {
  max-width: 800px;
  margin: 0 auto;
}

.admin-section__play-btn {
  position: relative;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.admin-section__thumbnail {
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}

.admin-section__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(40px, 8vw, 80px);
  height: clamp(40px, 8vw, 80px);
  transition: transform var(--transition-fast);
  max-width: 20%;
  max-height: 20%;
}

.admin-section__play-btn:hover .admin-section__play-icon {
  transform: translate(-50%, -50%) scale(1.1);
}

@media (max-width: 768px) {
  .admin-section__play-icon {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  .admin-section__play-icon {
    width: 50px;
    height: 50px;
  }
}

/* ============================================
   SECURE CHECKOUT INDICATOR
   ============================================ */
.secure-checkout {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--container-padding);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  color: var(--text-dark);
  z-index: 1001;
}

.secure-checkout i {
  color: var(--accent-blue);
}

/* ============================================
   COMPLETE ORDER SECTION (Bulk Order Form Page)
   ============================================ */
.complete-order-section {
  background-color: var(--bg-white);
  padding: var(--spacing-xxl) var(--container-padding);
  min-height: calc(100vh - 200px);
  /* Override default section opacity for order pages */
  opacity: 1 !important;
  transform: none !important;
}

.complete-order-section__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--spacing-xxl);
  align-items: flex-start;
}

.complete-order-section__left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.complete-order-section__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--font-weight-bold);
  color: var(--accent-red);
  margin: 0;
}

.complete-order-section__subtitle {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--text-dark);
  margin: 0 0 var(--spacing-md) 0;
}

.complete-order-section__right {
  background-color: var(--bg-light);
  padding: var(--spacing-xl);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  height: fit-content;
  position: sticky;
  top: calc(60px + var(--spacing-md));
}

.bulk-order-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

@media (max-width: 1024px) {
  .complete-order-section__container {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .complete-order-section__right {
    position: static;
    order: -1;
  }

  .bulk-order-form__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .secure-checkout {
    position: static;
    justify-content: flex-end;
    margin-bottom: var(--spacing-sm);
  }

  .complete-order-section {
    padding: var(--spacing-lg) var(--container-padding);
  }
}

/* ============================================
   ORDER FORM SECTION (Small Order Form)
   ============================================ */
.order-section {
  background-color: #f5f6f8;
  padding: var(--spacing-xxl) var(--container-padding);
  position: relative;
  /* Override default section opacity for order pages */
  opacity: 1 !important;
  transform: none !important;
}

.order-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
  align-items: flex-start;
  width: 100%;
}

/* Ensure horizontal layout on desktop */
@media (min-width: 769px) {
  .order-section__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
    align-items: flex-start;
  }
  
  .order-section__content {
    order: 1;
  }
  
  .order-section__form-wrapper {
    order: 2;
  }
}

.order-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.order-section__subtitle {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--text-dark);
  margin: 0 0 var(--spacing-sm) 0;
  font-weight: var(--font-weight-normal);
  opacity: 0.8;
}

.order-section__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark);
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.2;
}

.order-section__contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.order-section__contact-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.order-section__contact-item:hover,
.order-section__contact-item:focus {
  color: var(--accent-blue);
  opacity: 1;
}

.order-section__contact-item i {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  color: var(--text-dark);
  width: 24px;
  text-align: center;
}

.order-section__contact-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-section__contact-label {
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  color: var(--text-dark);
  opacity: 0.7;
}

.order-section__contact-value {
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
}

.order-section__form-wrapper {
  position: relative;
}

/* Centered form layout for main order form */
.order-section--centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 200px);
}

.order-section__container--centered {
  max-width: 600px;
  width: 100%;
  grid-template-columns: 1fr;
}

.order-section__form-wrapper--centered {
  width: 100%;
}

.order-form {
  background-color: var(--bg-white);
  padding: var(--spacing-xl);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.order-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.order-form__label {
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  margin: 0;
}

.order-form__required {
  color: var(--accent-red);
  margin-left: 2px;
}

.order-form__input,
.order-form__select,
.order-form__textarea {
  width: 100%;
  padding: clamp(0.875rem, 2vw, 1.125rem);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--text-dark);
  background-color: #f9f9f9;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  box-sizing: border-box;
}

.order-form__input:focus,
.order-form__textarea:focus {
  background-color: var(--bg-white);
}

.order-form__input:focus,
.order-form__select:focus,
.order-form__textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(0, 125, 235, 0.1);
}

.order-form__input::placeholder,
.order-form__textarea::placeholder {
  color: #999;
  opacity: 1;
}

.order-form__select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}

.order-form__textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--font-body);
  line-height: 1.6;
}

.order-form__note {
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  color: var(--text-dark);
  opacity: 0.8;
  margin: var(--spacing-xs) 0 0 0;
  text-align: center;
}

.order-form__submit {
  width: 100%;
  margin-top: var(--spacing-sm);
  padding: clamp(0.875rem, 2.5vw, 1.125rem) clamp(1rem, 3vw, 1.5rem);
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.order-form__submit:hover,
.order-form__submit:focus {
  background-color: #0066cc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 125, 235, 0.3);
}

.order-form__submit:active {
  transform: translateY(0);
}

/* ============================================
   BULK ORDER MODAL
   ============================================ */
.bulk-order-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.bulk-order-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.bulk-order-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.bulk-order-modal__container {
  position: relative;
  background-color: var(--bg-white);
  border-radius: 12px;
  max-width: 1200px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  z-index: 1;
  margin: var(--spacing-md);
}

.bulk-order-modal__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 40px;
  height: 40px;
  border: none;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color var(--transition-fast);
}

.bulk-order-modal__close:hover,
.bulk-order-modal__close:focus {
  background-color: rgba(0, 0, 0, 0.2);
}

.bulk-order-modal__close i {
  font-size: 1.25rem;
  color: var(--text-dark);
}

.bulk-order-modal__content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--spacing-xxl);
  padding: var(--spacing-xxl);
}

.bulk-order-modal__left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.bulk-order-modal__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--accent-red);
  margin: 0;
}

.bulk-order-modal__subtitle {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--text-dark);
  opacity: 0.7;
  margin: 0;
}

/* Package Selection */
.package-selection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0 var(--spacing-lg) 0;
}

@media (max-width: 768px) {
  .package-selection {
    grid-template-columns: 1fr;
  }
}

.package-card {
  position: relative;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
  background-color: var(--bg-white);
}

.package-card:hover {
  border-color: var(--accent-blue);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.package-card--selected {
  border-color: var(--accent-blue);
  background-color: rgba(0, 125, 235, 0.05);
  box-shadow: var(--shadow-md);
}

.package-card__badge {
  position: absolute;
  top: -12px;
  left: var(--spacing-md);
  background-color: var(--accent-red);
  color: var(--text-light);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.package-card__header {
  margin-bottom: var(--spacing-sm);
}

.package-card__name {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark);
  margin: 0;
}

.package-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.package-card__quantity {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--text-dark);
  margin: 0;
}

.package-card__price {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark);
  margin: 0;
}

.package-card__discount {
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  color: var(--accent-red);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

/* Bulk Order Form */
.bulk-order-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.bulk-order-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.bulk-order-form__label {
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
}

.bulk-order-form__required {
  color: var(--accent-red);
  margin-left: 2px;
}

.bulk-order-form__input,
.bulk-order-form__select {
  width: 100%;
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--text-dark);
  background-color: var(--bg-white);
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.bulk-order-form__input:focus,
.bulk-order-form__select:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(0, 125, 235, 0.1);
}

.bulk-order-form__phone-group {
  display: flex;
  gap: var(--spacing-xs);
}

.bulk-order-form__phone-code {
  width: 80px;
  flex-shrink: 0;
}

.bulk-order-form__phone-input {
  flex: 1;
}

.bulk-order-form__select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}

.bulk-order-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--text-dark);
  cursor: pointer;
}

.bulk-order-form__checkbox {
  margin-top: 4px;
  cursor: pointer;
}

.bulk-order-form__link {
  color: var(--accent-blue);
  text-decoration: underline;
}

.bulk-order-form__submit {
  width: 100%;
  margin-top: var(--spacing-sm);
  padding: clamp(1rem, 2.5vw, 1.25rem);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
}

/* Order Summary */
.bulk-order-modal__right {
  background-color: var(--bg-light);
  padding: var(--spacing-xl);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  height: fit-content;
  position: sticky;
  top: var(--spacing-xl);
}

.bulk-order-summary__title {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark);
  margin: 0;
}

.bulk-order-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid #e0e0e0;
}

.bulk-order-summary__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bulk-order-summary__label {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--text-dark);
}

.bulk-order-summary__value {
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
}

.bulk-order-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 2px solid #e0e0e0;
}

.bulk-order-summary__total .bulk-order-summary__label {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: var(--font-weight-bold);
}

.bulk-order-summary__total .bulk-order-summary__value {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  color: var(--accent-red);
}

.bulk-order-guarantee {
  background-color: #e8f5e9;
  padding: var(--spacing-md);
  border-radius: 8px;
  border-left: 4px solid #4caf50;
}

.bulk-order-guarantee__item {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
}

.bulk-order-guarantee__item i {
  color: #4caf50;
  font-size: 1.5rem;
  margin-top: 2px;
}

.bulk-order-guarantee__item strong {
  display: block;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.bulk-order-guarantee__item p {
  margin: 0;
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  color: var(--text-dark);
  opacity: 0.8;
}

.bulk-order-security {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bulk-order-security__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  color: var(--text-dark);
}

.bulk-order-security__item i {
  color: var(--accent-blue);
  width: 20px;
}

.bulk-order-help {
  text-align: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid #e0e0e0;
}

.bulk-order-help p {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--text-dark);
}

.bulk-order-help__email {
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}

.bulk-order-help__email:hover,
.bulk-order-help__email:focus {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .bulk-order-modal__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .bulk-order-modal__right {
    position: static;
  }

  .package-selection {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .bulk-order-modal__container {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .bulk-order-modal__content {
    padding: var(--spacing-lg);
  }
}

/* ============================================
   PROTOCOL SECTION
   ============================================ */
.protocol-section {
  background-color: var(--bg-white);
  padding: var(--spacing-xl) var(--container-padding);
}

.protocol-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.protocol-section__img {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  filter: drop-shadow(var(--shadow-md));
}

.protocol-section__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3.5vw, 3rem);
  font-weight: var(--font-weight-bold); /* Gotham Bold */
  margin-bottom: var(--spacing-md);
  color: var(--text-dark);
}

.protocol-section__heading--red {
  color: var(--accent-red);
}

.protocol-section__text {
  font-size: clamp(0.875rem, 2vw, 1.125rem);
  margin-bottom: var(--spacing-sm);
  line-height: 1.8;
  color: var(--text-dark);
}

.protocol-section__note {
  font-size: clamp(0.8rem, 2vw, 1rem);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-lg);
  color: var(--text-dark);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background-image: url("../assets/Footer/Background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--spacing-xl) var(--container-padding);
  color: var(--text-light);
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 0;
}

.footer__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  position: relative;
  z-index: 1;
  margin-bottom: var(--spacing-lg);
}

.footer__logo {
  width: auto;
  height: auto;
  max-width: clamp(150px, 30vw, 300px);
  max-height: clamp(60px, 12vw, 120px);
  object-fit: contain;
  margin-bottom: var(--spacing-sm);
}

.footer__brand-text {
  font-weight: var(--font-weight-bold);
  font-size: 1.25rem;
  margin-bottom: var(--spacing-sm);
}

.footer__social {
  margin-top: var(--spacing-sm);
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 6vw, 40px);
  height: clamp(32px, 6vw, 40px);
  color: var(--text-light);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
  border-radius: 4px;
}

.footer__social-link:hover,
.footer__social-link:focus {
  color: var(--accent-blue);
  transform: scale(1.1);
  opacity: 1;
}

.footer__address {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.footer__address p {
  margin: 0;
  flex: 1;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-light);
}

.footer__icon {
  width: clamp(16px, 3vw, 20px);
  height: clamp(16px, 3vw, 20px);
  flex-shrink: 0;
}

.footer__bottom {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  position: relative;
  z-index: 1;
}

.footer__copyright {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

.footer__legal {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.footer__legal-link {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  padding: var(--spacing-xs);
}

.footer__legal-link:hover,
.footer__legal-link:focus {
  color: var(--text-light);
  opacity: 1;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet and below (1024px) */
@media (max-width: 1024px) {
  .nav__container {
    gap: var(--spacing-sm);
  }

  .nav__menu {
    gap: 0.5rem;
  }

  .nav__link {
    font-size: 0.85rem;
    padding: 0.25rem;
  }

  .nav__phone {
    font-size: 0.85rem;
  }
}

/* Tablet portrait (768px) */
@media (max-width: 768px) {
  :root {
    --container-padding: 1rem;
  }

  .nav__container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .nav__logo-img {
    height: clamp(35px, 5vw, 45px);
    max-width: clamp(100px, 20vw, 180px);
  }

  .nav__toggle {
    display: flex;
    order: 2;
    z-index: 1001;
  }

  .nav__right {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: var(--spacing-md) var(--container-padding);
    margin-top: 0;
    z-index: 1000;
  }

  .nav__right--open {
    display: flex;
  }

  .nav__menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .nav__menu li {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0;
    margin: 0;
  }

  .nav__menu li:last-child {
    border-bottom: none;
  }

  .nav__link {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-sm);
    font-size: 1rem;
    justify-content: flex-start;
    min-height: 48px; /* Better touch target */
    display: flex;
    align-items: center;
    text-align: left;
    margin: 0; /* Ensure no margin that could affect spacing */
  }

  .nav__separator {
    display: none;
  }

  .nav__phone {
    width: 100%;
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    justify-content: flex-start;
    min-height: 48px; /* Better touch target */
    display: flex;
    align-items: center;
  }

  .nav__phone-icon {
    width: 20px;
    height: 20px;
  }

  /* Mobile dropdown menu styles */
  .nav__dropdown-menu {
    position: static;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none;
    margin-top: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    transition: max-height var(--transition-normal), opacity var(--transition-normal), padding var(--transition-normal);
  }

  .nav__dropdown-menu--open {
    opacity: 1;
    visibility: visible;
    max-height: 500px;
    padding: var(--spacing-xs) 0;
    margin-top: 0;
  }

  .nav__dropdown-link {
    padding-left: calc(var(--spacing-md) + var(--spacing-sm));
    font-size: 0.95rem;
  }

  .nav__link--dropdown[aria-expanded="true"] .nav__dropdown-arrow {
    transform: rotate(180deg);
  }

  .hero {
    padding-top: calc(var(--spacing-md) + 60px);
    min-height: auto;
    padding-bottom: var(--spacing-lg); /* Better spacing on mobile */
  }

  /* Keep same layout structure, just scale everything */
  .hero__container {
    grid-template-columns: 1.2fr 0.8fr; /* Slightly adjust ratio on tablet */
    gap: clamp(var(--spacing-sm), 3vw, var(--spacing-lg));
  }

  .hero__image {
    padding-left: clamp(0.5rem, 2vw, var(--spacing-lg));
    margin-top: 0;
    justify-content: flex-start;
  }

  /* Bottle size proportional to its grid column */
  .hero__bottle {
    max-width: 100%;
    width: 100%;
  }
  
  /* Scale fonts proportionally to bottle */
  .hero__heading {
    font-size: clamp(1.15rem, 4.2vw, 2.5rem);
    margin-bottom: var(--spacing-sm);
  }
  
  .hero__subtitle {
    font-size: clamp(0.8rem, 2.3vw, 1.1rem);
    margin-bottom: var(--spacing-sm);
  }
  
  /* Scale down CTA button */
  .hero__content .btn {
    font-size: clamp(0.7rem, 2.1vw, 0.9375rem);
    padding: clamp(0.55rem, 1.6vw, 0.875rem) clamp(0.7rem, 2.1vw, 1rem);
    min-height: 42px;
  }

  .asf-section {
    min-height: auto;
    padding: var(--spacing-md) var(--container-padding);
    padding-bottom: calc(var(--spacing-sm) + 50px); /* Significantly reduced for tablet - smaller screens */
  }
  
  /* Scale down fonts and CTA in ASF section */
  .asf-section__heading {
    font-size: clamp(1rem, 4vw, 2.5rem);
    margin-bottom: var(--spacing-xs);
    position: relative;
    z-index: 12; /* Higher than video thumbnail to ensure text is visible */
  }
  
  .asf-section__text {
    font-size: clamp(0.75rem, 2.2vw, 1.1rem);
    margin-bottom: var(--spacing-sm);
    line-height: 1.7;
    position: relative;
    z-index: 12; /* Higher than video thumbnail to ensure text is visible */
  }
  
  .asf-section__content {
    z-index: 10; /* Higher than video */
    display: block !important; /* Ensure content is visible */
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  
  .asf-section__content .btn {
    font-size: clamp(0.65rem, 2vw, 0.9375rem);
    padding: clamp(0.5rem, 1.5vw, 0.875rem) clamp(0.65rem, 2vw, 1rem);
    min-height: 40px;
    margin-top: var(--spacing-xs);
    z-index: 10; /* Higher than video */
    position: relative;
    display: inline-block !important; /* Ensure button is visible on tablet */
    visibility: visible !important;
    opacity: 1 !important;
    background-color: var(--bg-black) !important;
  }

  /* Keep video absolute to maintain overlap between sections 2 and 3 */
  .asf-section__video {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%); /* Center and move 50% down to overlap */
    width: 100%;
    max-width: 800px;
    z-index: 5; /* Lower than CTA button (z-index: 10) */
    padding: 0 var(--container-padding);
    margin-top: 0;
  }

  .video-section {
    padding-top: var(--spacing-lg);
    margin-top: 0; /* No negative margin - thumbnail stays in Section 3 */
  }
  
  /* Scale down fonts in video section */
  .video-section__heading {
    font-size: clamp(1rem, 4vw, 2.5rem);
    margin-top: var(--spacing-sm);
  }
  
  /* Scale down CTA button in video section (section 3) */
  .video-section .btn {
    font-size: clamp(0.65rem, 2vw, 0.9375rem);
    padding: clamp(0.5rem, 1.5vw, 0.875rem) clamp(0.65rem, 2vw, 1rem);
    min-height: 40px;
    margin-top: var(--spacing-sm);
  }

  .mechanism-section__container {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--spacing-sm), 3vw, var(--spacing-xl));
  }

  .mechanism-section__animation {
    order: 0; /* Keep original order */
  }

  .cell-animation {
    height: clamp(400px, 60vw, 600px); /* Larger height to maintain cell positions */
  }
  
  .cell-animation__container {
    max-width: clamp(400px, 60vw, 600px); /* Match height to maintain aspect ratio */
    height: auto; /* Let aspect-ratio control height */
  }

  .proof-section__container {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--spacing-sm), 3vw, var(--spacing-xl));
  }

  .proof-section__content {
    order: 0; /* Keep original order */
  }

  .carousel {
    padding: 0 30px; /* Maintain space for arrows on tablet */
    max-width: 100%;
  }
  
  .carousel__slide--active {
    display: block !important; /* Ensure active slide is visible */
  }
  
  .carousel {
    max-width: clamp(280px, 70vw, 600px); /* Smaller carousel on tablet */
  }
  
  .carousel__image {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: clamp(250px, 65vw, 550px); /* Scale down certificates */
    max-height: clamp(280px, 45vh, 450px); /* Limit height */
    transform: none !important; /* No scaling transform - maintain original positioning */
    display: block !important; /* Ensure images are visible */
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .carousel__overlay {
    width: clamp(250px, 65vw, 550px); /* Match certificate max-width on tablet */
    max-width: 100%;
  }

  .carousel__btn--prev {
    left: -10px;
  }

  .carousel__btn--next {
    right: -10px;
  }

  .product-section {
    padding-bottom: 50%;
    min-height: 600px;
  }

  .product-section__features {
    flex-direction: row; /* Keep horizontal layout */
    gap: clamp(0.5rem, 2vw, var(--spacing-md));
    flex-wrap: nowrap; /* Keep on one line */
    justify-content: center;
    /* Ensure circles stay below bottle/packaging - use bottom positioning */
    bottom: clamp(6%, 8vw, 12%); /* Position features below product */
    position: absolute; /* Absolute positioning to place below product */
    margin: 0; /* Remove margin since we're using bottom positioning */
  }

  .product-section__feature {
    flex: 0 1 auto;
    min-width: 0; /* Allow shrinking */
  }

  .product-section__feature-icon {
    width: clamp(30px, 8vw, 80px);
    height: clamp(30px, 8vw, 80px);
  }

  .product-section__feature-title {
    font-size: clamp(0.6rem, 1.8vw, 1.25rem);
  }

  .product-section__connector {
    width: clamp(15px, 4vw, 60px);
    height: 2px;
  }

  .protocol-section__container {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 3vw, var(--spacing-xl));
  }

  .order-section__container {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .order-section__content {
    order: 2; /* Show content second on mobile */
  }

  .order-section__form-wrapper {
    order: 1; /* Show form first on mobile */
  }

  .protocol-section__image {
    order: 0; /* Keep original order */
  }

  .protocol-section__img {
    max-width: clamp(150px, 30vw, 400px);
    width: 100%;
  }

  .footer__container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(1rem, 3vw, var(--spacing-lg));
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }
}

/* Mobile landscape and small tablets (640px) */
@media (max-width: 640px) {
  .nav__logo-img {
    height: clamp(30px, 4.5vw, 40px);
    max-width: clamp(90px, 18vw, 150px);
  }

  /* Make bottle bigger - it's the focus */
  .hero__bottle {
    max-width: clamp(150px, 28vw, 240px);
    width: 100%;
  }
  
  /* Scale fonts proportionally to bottle */
  .hero__heading {
    font-size: clamp(1.1rem, 4.3vw, 2.5rem);
    margin-bottom: var(--spacing-sm);
  }
  
  .hero__subtitle {
    font-size: clamp(0.8rem, 2.3vw, 1.1rem);
    margin-bottom: var(--spacing-sm);
  }
  
  /* Scale down CTA button */
  .hero__content .btn {
    font-size: clamp(0.7rem, 2.1vw, 0.9375rem);
    padding: clamp(0.55rem, 1.6vw, 0.875rem) clamp(0.7rem, 2.1vw, 1rem);
    min-height: 42px;
  }

  .asf-section__video {
    max-width: 100%;
  }

  .video-section {
    margin-top: 0; /* No negative margin - thumbnail stays in Section 3 */
    padding-top: var(--spacing-lg);
  }
  
  .video-section__heading {
    font-size: clamp(0.9rem, 3.8vw, 2.5rem);
    margin-top: var(--spacing-xs);
  }
  
  .video-section__player {
    max-width: 100%;
  }

  .admin-section__video {
    max-width: 100%;
  }

  .carousel__image {
    transform: none; /* Maintain original positioning */
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
  }
}

/* Mobile portrait (480px) - Universal Design Principles Applied */
@media (max-width: 480px) {
  :root {
    --container-padding: 0.75rem;
    /* Universal Design: Minimum readable font size */
    --font-size-min: 16px;
    /* Universal Design: Minimum touch target size (44x44px) */
    --touch-target-min: 44px;
    /* Universal Design: Adequate spacing for readability */
    --spacing-touch: 0.75rem;
  }

  .nav__container {
    padding: var(--spacing-xs) var(--container-padding);
  }

  .nav__logo-img {
    height: clamp(28px, 4vw, 35px);
    max-width: clamp(80px, 16vw, 130px);
  }

  .nav__toggle {
    width: 28px;
    height: 28px;
  }

  .nav__right {
    padding: var(--spacing-sm) var(--container-padding);
  }

  .nav__link,
  .nav__phone {
    padding: var(--spacing-sm);
    font-size: 0.95rem;
  }

  .hero {
    min-height: auto;
    padding: var(--spacing-md) var(--container-padding);
    padding-top: calc(var(--spacing-md) + 60px);
  }

  .hero__container {
    display: grid !important; /* Force grid layout on mobile */
    grid-template-columns: 1.2fr 0.8fr !important; /* Text left, bottle right - proportional */
    gap: clamp(0.5rem, 1.5vw, var(--spacing-sm)) !important; /* Reduced gap on mobile to bring closer */
    align-items: stretch !important; /* Stretch to align top and bottom */
    flex-direction: row !important; /* Override any flex column rules */
    grid-auto-flow: row !important; /* Ensure row flow */
  }

  .hero__content {
    text-align: left !important; /* Keep left alignment on mobile */
    align-items: flex-start !important;
    display: flex !important;
    flex-direction: column !important; /* Content itself is column, but container is grid */
    grid-column: 1 !important; /* Force to first column */
    min-width: 0 !important; /* Allow shrinking */
  }

  .hero__image {
    padding-left: clamp(0.25rem, 1vw, var(--spacing-xs)) !important; /* Reduced padding on mobile */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important; /* Stretch to match content height */
    align-self: stretch !important; /* Align with content top and bottom */
    display: flex !important;
    grid-column: 2 !important; /* Force to second column */
    min-width: 0 !important; /* Allow shrinking */
    height: 100% !important; /* Match content height */
  }

  /* Make bottle proportional to its grid column (0.8fr) on mobile */
  .hero__bottle {
    width: 100%;
    max-width: 100%; /* Take full width of its grid column */
    height: auto;
  }
  
  /* Scale fonts proportionally to bottle size */
  .hero__heading {
    font-size: clamp(1rem, 4.5vw, 2.5rem);
    margin-bottom: var(--spacing-xs);
    line-height: 1.15;
  }

  .hero__subtitle {
    font-size: clamp(0.75rem, 2.2vw, 1.1rem);
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
  }
  
  /* Scale down CTA button - Universal Design: Minimum touch target */
  .hero__content .btn {
    font-size: clamp(0.875rem, 2vw, 0.9375rem); /* Universal Design: Minimum readable size (16px base) */
    padding: clamp(0.5rem, 1.5vw, 0.875rem) clamp(0.65rem, 2vw, 1rem);
    min-height: 44px; /* Universal Design: Minimum touch target (44x44px) */
    min-width: 44px; /* Universal Design: Ensure square touch targets */
    line-height: 1.5; /* Universal Design: Better readability */
    margin-top: var(--spacing-xs);
  }

  .btn--large {
    font-size: clamp(0.7rem, 2.2vw, 0.875rem);
    padding: clamp(0.625rem, 2vw, 0.875rem) clamp(0.75rem, 2.5vw, 1.25rem);
    min-height: 44px; /* Minimum touch target */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn--blue,
  .btn--black,
  .btn--red {
    min-height: 44px; /* Minimum touch target */
    padding: clamp(0.625rem, 2vw, 0.875rem) clamp(0.75rem, 2.5vw, 1.25rem);
    font-size: clamp(0.7rem, 2.2vw, 0.9375rem);
  }

  .asf-section {
    padding: var(--spacing-sm) var(--container-padding);
    padding-bottom: var(--spacing-lg) !important; /* Increased padding to ensure button is visible */
    min-height: auto;
    overflow: visible !important; /* Ensure nothing is clipped */
  }
  
  .asf-section__content {
    position: relative;
    z-index: 2; /* Above background */
    margin-bottom: var(--spacing-md) !important; /* Increased margin to ensure button space */
    padding-bottom: var(--spacing-xs) !important; /* Add padding to ensure button visibility */
    display: block !important; /* Ensure content is visible */
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    min-height: auto !important; /* Ensure container can expand */
    height: auto !important; /* Ensure container can expand */
  }

  .asf-section__heading {
    font-size: clamp(0.9rem, 3.8vw, 2.5rem);
    margin-bottom: var(--spacing-xs);
    position: relative;
    z-index: 2; /* Above background */
  }

  .asf-section__text {
    font-size: clamp(0.7rem, 2vw, 1.1rem);
    margin-bottom: var(--spacing-xs);
    line-height: 1.7;
    position: relative;
    z-index: 2; /* Above background */
  }
  
  .asf-section__content .btn {
    font-size: clamp(0.7rem, 2vw, 0.875rem) !important; /* Ensure readable font size */
    padding: clamp(0.6rem, 1.5vw, 0.875rem) clamp(0.8rem, 2vw, 1rem) !important;
    min-height: 44px !important; /* Minimum touch target size */
    min-width: 150px !important; /* Ensure button has visible width */
    margin-top: clamp(var(--spacing-xs), 1.5vw, var(--spacing-sm)) !important;
    margin-bottom: clamp(var(--spacing-xs), 1.5vw, var(--spacing-sm)) !important; /* Add bottom margin to ensure visibility */
    position: relative;
    z-index: 2;
    display: inline-block !important; /* Ensure button is visible on mobile */
    visibility: visible !important;
    opacity: 1 !important;
    background-color: var(--bg-black) !important;
    color: var(--text-light) !important;
    width: auto !important; /* Override any width constraints */
    height: auto !important; /* Override any height constraints */
    line-height: 1.4 !important; /* Ensure text is readable */
  }

  /* Video player positioning - no overlap on mobile */
  .video-section__player {
    position: relative;
    z-index: 1; /* Normal stacking order */
    margin-top: 0; /* No negative margin */
    margin-bottom: var(--spacing-xs);
    width: 100%;
    max-width: 100%;
  }

  .video-section {
    padding: var(--spacing-sm) var(--container-padding);
    padding-top: var(--spacing-lg); /* Normal padding - no overlap */
    margin-top: 0; /* No negative margin - thumbnail stays in Section 3 */
    position: relative;
    z-index: 1; /* Normal stacking order */
    overflow: visible;
  }
  
  /* Ensure video thumbnail overlaps both red (section 2) and white (section 3) backgrounds */
  .video-section__thumbnail {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: 100%;
    display: block;
  }
  
  /* Ensure ASF section allows overflow for video overlap */
  .asf-section {
    overflow: visible;
    padding-bottom: var(--spacing-sm); /* Reduced padding for mobile - no overlap */
  }

  .video-section__heading {
    font-size: clamp(0.9rem, 3.8vw, 2.5rem);
    margin-top: var(--spacing-xs);
  }
  
  /* Scale down CTA button in video section */
  .video-section .btn {
    font-size: clamp(0.6rem, 1.8vw, 0.875rem);
    padding: clamp(0.45rem, 1.3vw, 0.8rem) clamp(0.6rem, 1.8vw, 0.9rem);
    min-height: 38px;
    margin-top: var(--spacing-xs);
  }

  .mechanism-section {
    padding: var(--spacing-lg) var(--container-padding);
  }

  .mechanism-section__container {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .mechanism-section__animation {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
  }

  .mechanism-section__heading {
    font-size: clamp(1.1rem, 5vw, 2.5rem);
    text-align: center;
  }

  .mechanism-section__text {
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    line-height: 1.8; /* Better readability on mobile */
    margin-bottom: var(--spacing-md);
    text-align: center;
  }

  .mechanism-section__benefit {
    font-size: clamp(0.75rem, 2.2vw, 1.05rem);
    line-height: 1.7;
    margin-bottom: var(--spacing-sm);
  }

  .cell-animation {
    height: clamp(320px, 55vw, 500px); /* Larger height to maintain cell positions on mobile */
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
  }
  
  .cell-animation__container {
    max-width: clamp(280px, 80vw, 500px);
    width: clamp(280px, 80vw, 500px);
    height: auto; /* Let aspect-ratio control height */
    margin: 0 auto;
    position: relative;
  }

  .proof-section {
    padding: var(--spacing-lg) var(--container-padding);
  }

  .proof-section__container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .proof-section__content {
    align-items: center;
    text-align: center;
  }

  .proof-section__heading {
    font-size: clamp(1.1rem, 5vw, 2.5rem);
    line-height: 1.3; /* Universal Design: Better readability on mobile */
    text-align: center;
  }
  
  /* Each line displays on its own line on all screen sizes */
  .proof-section__heading-line {
    display: block;
  }

  .proof-section__learn-more-btn {
    align-self: center;
    margin-top: var(--spacing-lg);
    width: auto;
    display: inline-block;
  }

  .carousel {
    padding: 0 20px; /* Space for arrows on mobile */
    max-width: 100%;
  }
  
  .carousel__slide--active {
    display: block !important; /* Ensure active slide is visible on mobile */
  }
  
  .carousel {
    max-width: clamp(260px, 65vw, 500px); /* Smaller carousel on mobile */
    padding: 0 clamp(10px, 2vw, 20px);
  }
  
  .carousel__image {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: clamp(240px, 60vw, 480px); /* Scale down certificates on mobile */
    max-height: clamp(250px, 40vh, 400px); /* Limit height on mobile */
    transform: none !important; /* No scaling transform - maintain original positioning */
    display: block !important; /* Ensure images are visible */
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .carousel__overlay {
    width: clamp(240px, 60vw, 480px); /* Match certificate max-width on mobile */
    max-width: 100%;
  }

  .carousel__btn--prev {
    left: -5px;
  }

  .carousel__btn--next {
    right: -5px;
  }

  .product-section {
    padding-bottom: 45%;
    min-height: 500px;
  }

  .product-section__heading {
    font-size: clamp(1.1rem, 5vw, 2.5rem);
    margin-bottom: var(--spacing-md);
  }

  .product-section__feature-title {
    font-size: clamp(0.65rem, 2vw, 1.1rem);
  }

  .admin-section {
    padding: var(--spacing-lg) var(--container-padding);
  }

  .admin-section__heading {
    font-size: clamp(1.1rem, 5vw, 2.5rem);
  }

  .protocol-section {
    padding: var(--spacing-lg) var(--container-padding);
  }

  .protocol-section__heading {
    font-size: clamp(1.1rem, 5vw, 2.5rem);
  }

  .protocol-section__text,
  .protocol-section__note {
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    line-height: 1.8; /* Better readability on mobile */
  }

  .order-section {
    padding: var(--spacing-lg) var(--container-padding);
  }

  .order-section__container {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .order-section__content {
    order: 2; /* Show content second on mobile */
  }

  .order-section__form-wrapper {
    order: 1; /* Show form first on mobile */
  }

  .order-form {
    padding: var(--spacing-lg);
  }

  .bulk-order-modal__content {
    grid-template-columns: 1fr;
    padding: var(--spacing-md);
  }

  .package-selection {
    grid-template-columns: 1fr;
  }

  .protocol-section__text {
    margin-bottom: var(--spacing-sm);
  }

  .protocol-section__note {
    margin-bottom: var(--spacing-md);
  }
}

/* Small mobile (360px) */
@media (max-width: 360px) {
  :root {
    --container-padding: 0.5rem;
  }

  .nav__logo-img {
    height: clamp(24px, 3.5vw, 30px);
    max-width: clamp(70px, 14vw, 110px);
  }

  .hero__heading {
    font-size: clamp(1rem, 6vw, 2rem);
  }

  .hero__bottle {
    max-width: clamp(60px, 14vw, 150px);
  }

  .btn--large {
    font-size: clamp(0.65rem, 2vw, 0.85rem);
    padding: clamp(0.55rem, 1.8vw, 0.8rem) clamp(0.65rem, 2.2vw, 1.1rem);
    min-height: 42px; /* Minimum touch target */
  }

  .btn--blue,
  .btn--black,
  .btn--red {
    min-height: 42px; /* Minimum touch target */
    padding: clamp(0.55rem, 1.8vw, 0.8rem) clamp(0.65rem, 2.2vw, 1.1rem);
    font-size: clamp(0.65rem, 2vw, 0.9375rem);
  }

  .asf-section__heading,
  .video-section__heading,
  .mechanism-section__heading,
  .proof-section__heading,
  .product-section__heading,
  .admin-section__heading,
  .protocol-section__heading {
    font-size: clamp(1rem, 6vw, 2rem);
  }

  .cell-animation {
    height: clamp(100px, 20vw, 200px);
  }

  .product-section {
    padding-bottom: 40%;
    min-height: 450px;
  }
}

/* ============================================
   COMPREHENSIVE RESPONSIVE STYLES FOR ALL PAGES
   ============================================ */

/* Large Desktop (1920px+) - Maintain desktop layout */
@media (min-width: 1920px) {
  :root {
    --container-max-width: 1400px;
  }
}

/* Desktop (1440px - 1919px) - Standard desktop layout */
@media (min-width: 1440px) and (max-width: 1919px) {
  :root {
    --container-max-width: 1200px;
  }
}

/* Medium Desktop / Large Tablet (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --container-max-width: 1000px;
  }
  
  /* Scale down fonts slightly to maintain layout */
  .hero__heading {
    font-size: clamp(2rem, 4vw, 3rem);
  }
  
  .asf-section__heading {
    font-size: clamp(2rem, 4.5vw, 3rem);
  }
  
  .video-section__heading {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  }
}

/* Tablet Landscape (768px - 1023px) - Scale down proportionally */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Infographics Section */
  .infographics-section__container {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  
  .infographics-section__hero-content {
    flex-direction: row;
    gap: var(--spacing-lg);
  }
  
  .infographics-section__heading {
    font-size: clamp(1.75rem, 5vw, 3rem);
  }
  
  .infographics-section__phone-frame {
    max-width: 400px;
  }
  
  /* Order Section */
  .order-section__container {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  
  .order-section__heading {
    font-size: clamp(2rem, 5vw, 3.5rem);
  }
  
  .order-form {
    padding: var(--spacing-xl);
  }
  
  /* Scale down buttons */
  .btn {
    font-size: clamp(0.875rem, 2vw, 1rem);
    padding: clamp(0.75rem, 1.8vw, 1rem) clamp(1rem, 2.5vw, 1.5rem);
  }
  
  .btn--large {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    padding: clamp(0.875rem, 2vw, 1.125rem) clamp(1.25rem, 3vw, 1.75rem);
  }
}

/* Tablet Portrait (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
  /* Infographics */
  .infographics-section__hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .infographics-section__timeline {
    flex-direction: row;
    justify-content: center;
    margin-bottom: var(--spacing-md);
  }
  
  .infographics-section__phone-frame {
    max-width: 350px;
  }
  
  /* Order Forms */
  .order-section__heading {
    font-size: clamp(1.75rem, 6vw, 3rem);
  }
  
  .order-form__input,
  .order-form__select,
  .order-form__textarea {
    font-size: clamp(0.875rem, 2.2vw, 1rem);
    padding: clamp(0.75rem, 2vw, 1rem);
  }
  
  .order-form__label {
    font-size: clamp(0.875rem, 2vw, 1rem);
  }
}

/* Mobile Landscape (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
  /* Infographics */
  .infographics-section__phone-frame {
    max-width: 300px;
  }
  
  .infographics-section__nav-btn {
    width: clamp(35px, 7vw, 45px);
    height: clamp(35px, 7vw, 45px);
  }
  
  /* Order Forms */
  .order-section__container {
    gap: var(--spacing-lg);
    grid-template-columns: 1fr 1fr; /* Maintain horizontal layout on larger tablets */
  }
  
  @media (min-width: 1024px) {
    .order-section__container {
      gap: var(--spacing-xxl);
    }
  }
  
  .order-section__heading {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }
  
  .order-section__contact-item i {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
  }
}

/* Enhanced Mobile Portrait (480px) - Comprehensive scaling */
@media (max-width: 480px) {
  /* Infographics Section - Mobile */
  .infographics-section {
    padding: var(--spacing-lg) var(--container-padding);
  }
  
  .infographics-section__heading {
    font-size: clamp(1.5rem, 7vw, 2.5rem);
    line-height: 1.2;
  }
  
  .infographics-section__subtitle {
    font-size: clamp(0.875rem, 3.5vw, 1.125rem);
  }
  
  .infographics-section__phone-frame {
    max-width: 100%;
    padding: clamp(8px, 2vw, 15px);
  }
  
  .infographics-section__nav-btn {
    width: clamp(32px, 6.5vw, 42px);
    height: clamp(32px, 6.5vw, 42px);
  }
  
  .infographics-section__nav-btn--next {
    right: clamp(-8px, -2vw, -15px);
  }
  
  .infographics-section__nav-btn--prev {
    left: clamp(-8px, -2vw, -15px);
  }
  
  .infographics-section__arrow {
    width: clamp(14px, 3vw, 20px);
    height: clamp(14px, 3vw, 20px);
  }
  
  .infographics-section__timeline-circle {
    width: clamp(35px, 7vw, 50px);
    height: clamp(35px, 7vw, 50px);
  }
  
  .infographics-section__timeline-number {
    font-size: clamp(0.875rem, 2.5vw, 1.25rem);
  }
  
  /* Order Section - Mobile */
  .order-section {
    padding: var(--spacing-lg) var(--container-padding);
  }
  
  .order-section__heading {
    font-size: clamp(1.75rem, 7vw, 3rem);
    margin-bottom: var(--spacing-md);
  }
  
  .order-section__subtitle {
    font-size: clamp(0.875rem, 3vw, 1rem);
  }
  
  .order-section__contact-item {
    gap: var(--spacing-xs);
  }
  
  .order-section__contact-item i {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    width: 20px;
  }
  
  .order-section__contact-label {
    font-size: clamp(0.7rem, 2vw, 0.875rem);
  }
  
  .order-section__contact-value {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
  }
  
  /* Order Form - Mobile */
  .order-form {
    padding: var(--spacing-lg);
    border-radius: 12px;
  }
  
  .order-form__label {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
  }
  
  .order-form__input,
  .order-form__select,
  .order-form__textarea {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    padding: clamp(0.75rem, 2.2vw, 1rem);
    border-radius: 6px;
  }
  
  .order-form__textarea {
    min-height: 90px;
  }
  
  .order-form__note {
    font-size: clamp(0.7rem, 2vw, 0.875rem);
  }
  
  .order-form__submit {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    padding: clamp(0.875rem, 2.5vw, 1.125rem) clamp(1rem, 3vw, 1.5rem);
    min-height: 48px; /* Better touch target */
  }
  
  /* Buttons - Mobile */
  .btn {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    padding: clamp(0.75rem, 2.2vw, 1rem) clamp(1rem, 3vw, 1.5rem);
    min-height: 48px;
    border-radius: 8px;
  }
  
  .btn--large {
    font-size: clamp(1rem, 3vw, 1.125rem);
    padding: clamp(0.875rem, 2.5vw, 1.125rem) clamp(1.25rem, 3.5vw, 1.75rem);
    min-height: 50px;
  }
  
  /* Complete Order Section - Mobile */
  .complete-order-section {
    padding: var(--spacing-lg) var(--container-padding);
  }
  
  .complete-order-section__title {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }
  
  .complete-order-section__subtitle {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
  }
  
  /* Package Cards - Mobile */
  .package-card {
    padding: var(--spacing-md);
  }
  
  .package-card__name {
    font-size: clamp(1rem, 3vw, 1.25rem);
  }
  
  .package-card__quantity {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
  }
  
  .package-card__price {
    font-size: clamp(1.125rem, 3.5vw, 1.5rem);
  }
  
  .package-card__discount {
    font-size: clamp(0.7rem, 2vw, 0.875rem);
  }
}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq-section {
  background-color: var(--bg-white);
  padding: var(--spacing-xxl) var(--container-padding);
  position: relative;
  opacity: 1 !important;
  transform: none !important;
}

.faq-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  text-align: center;
}

.faq-section__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark);
  margin: 0 0 var(--spacing-xl) 0;
  text-align: center;
}

.faq-section__list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.faq-item {
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item__question {
  width: 100%;
  background: none;
  border: none;
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  transition: color var(--transition-fast);
}

.faq-item__question:hover,
.faq-item__question:focus {
  color: var(--accent-blue);
  outline: none;
}

.faq-item__question-text {
  flex: 1;
}

.faq-item__chevron {
  font-size: clamp(0.75rem, 2vw, 1rem);
  color: #999;
  transition: transform var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.faq-item__question[aria-expanded="true"] .faq-item__chevron {
  transform: rotate(180deg);
  color: var(--accent-blue);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal), padding var(--transition-normal);
  padding: 0 var(--spacing-md);
}

.faq-item__answer[aria-hidden="false"] {
  max-height: 500px;
  padding: 0 var(--spacing-md) var(--spacing-lg) var(--spacing-md);
}

.faq-item__answer-text {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--text-dark);
  line-height: 1.6;
  margin: 0;
  opacity: 0.8;
}

/* FAQ Responsive */
@media (max-width: 768px) {
  .faq-section {
    padding: var(--spacing-xl) var(--container-padding);
  }

  .faq-section__heading {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    margin-bottom: var(--spacing-lg);
  }

  .faq-item__question {
    padding: var(--spacing-md);
    font-size: clamp(0.95rem, 3vw, 1.125rem);
  }

  .faq-item__answer {
    padding: 0 var(--spacing-md);
  }

  .faq-item__answer[aria-hidden="false"] {
    padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
  }

  .faq-item__answer-text {
    font-size: clamp(0.875rem, 2.5vw, 0.95rem);
  }
}

@media (max-width: 480px) {
  .faq-section {
    padding: var(--spacing-lg) var(--container-padding);
  }

  .faq-section__heading {
    font-size: clamp(1.25rem, 7vw, 2rem);
    margin-bottom: var(--spacing-md);
  }

  .faq-item__question {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .faq-item__chevron {
    font-size: clamp(0.7rem, 2vw, 0.875rem);
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent-blue);
  color: var(--text-light);
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}