/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;700;900&display=swap');

:root {
  /* Vibrant Palette */
  --primary: #77C7B5;
  --primary-dark: #63a898;
  --secondary: #84D2C0;
  --accent: #1A6AFF;
  --dark: #0f172a;
  --text-main: #1e293b;
  --text-light: #64748b;
  --light-bg: #f0f9ff;

  /* Gradients */
  --gradient-main: linear-gradient(135deg, #77C7B5 0%, #84D2C0 100%);
  --gradient-accent: linear-gradient(135deg, #1A6AFF 0%, #60a5fa 100%);
  --gradient-soft: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);

  /* Spacing & Layout */
  --container: 1280px;
  --radius-xl: 32px;
  --radius-lg: 24px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #f8fafc;
  /* Subtle mesh gradient background for the whole page */
  background-image:
    radial-gradient(at 0% 0%, rgba(119, 199, 181, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(132, 210, 192, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(26, 106, 255, 0.05) 0px, transparent 50%);
  background-attachment: fixed;
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  color: var(--dark);
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Glassmorphism Utilities */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 2vw, 1rem) clamp(2rem, 4vw, 2.5rem);
  border-radius: 50px;
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  white-space: nowrap;
  /* Prevent text wrapping */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 20px -10px rgba(119, 199, 181, 0.5);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: width 0.3s ease;
  z-index: -1;
  transform: skewX(-20deg);
}

.btn:hover::before {
  width: 150%;
}

.btn-primary {
  background: var(--gradient-main);
  color: white;
  border: none;
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(119, 199, 181, 0.8);
}

.btn-accent {
  background: white;
  color: var(--accent);
  border: 2px solid transparent;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.btn-accent:hover {
  color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(26, 106, 255, 0.3);
}

/* Navbar */
/* Navbar - Integrated (Light Version) */
nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* Logo | Links | CTA */
  /* Logo | Links | CTA */
  align-items: center;
  padding: 4rem 0;
  gap: 1rem;
  /* Added gap to prevent total collapse */
  /* Significantly increased for max "airy" feel */

  /* Absolute Centering -> Fixed for Sticky */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;

  /* Width constraints from .container class behavior */
  width: 90%;
  max-width: var(--container);

  z-index: 1000;
  background: transparent;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Sticky State */
nav.scrolled {
  background: rgba(255, 255, 255, 0.95);
  padding: 1rem 0;
  /* Compact padding */
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
  /* Full width on scroll or keep contained? User asked for "upper screen edge", usually implies full width stripe but let's keep container width for now to match design language, or maybe float? User said "fixed at upper screen edge". Let's keep it floating for luxury feel. */
  max-width: 100%;
  /* Actually, standard sticky headers span full width. Let's make it span full width for the white background to look right. */
  padding-left: 5%;
  /* Add side padding since max-width is removed */
  padding-right: 5%;
}

nav.scrolled .nav-links a {
  color: var(--dark);
}

nav.scrolled .nav-links a:hover {
  color: var(--primary);
}

.logo-container {
  justify-self: start;
}



.nav-links {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  list-style: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  border: none;
  align-items: center;
  /* Ensure vertical alignment */
}

.nav-links li {
  position: relative;
  /* Essential for dropdown positioning */
  height: 100%;
  display: flex;
  align-items: center;
}

/* Dropdown Menu */
/* Dropdown Menu - Premium Redesign */
.dropdown-content {
  display: block;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: calc(100% + 15px);
  /* Slightly more offset */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: white;
  min-width: 240px;
  /* Wider for elegance */
  box-shadow:
    0 20px 40px -5px rgba(0, 0, 0, 0.1),
    0 10px 20px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  /* Subtle border ring */
  border-radius: 16px;
  /* Softer corners */
  padding: 0.8rem;
  /* Inner padding for floating items */
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Connect the hover area so mouse doesn't lose focus */
.dropdown-content::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent;
}

.nav-links li:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-content li {
  width: 100%;
  display: block;
  height: auto;
}

.dropdown-content a {
  padding: 1rem 1.5rem;
  display: flex;
  /* Flex for icon alignment if added later */
  align-items: center;
  width: 100%;
  font-size: 0.95rem;
  color: var(--text-main);
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  border-radius: 12px;
  /* Rounded items inside */
  transition: all 0.2s ease;
}

/* Remove old underline */
.dropdown-content a::after {
  display: none;
}

.dropdown-content a:hover {
  background-color: var(--light-bg);
  /* Use theme light bg */
  color: var(--primary);
  padding-left: 2rem;
  /* Slide effect */
  font-weight: 600;
}

/* Active State for Dropdown Items */
.dropdown-content a.active {
  background-color: var(--light-bg);
  color: var(--primary);
  font-weight: 600;
}

/* Active State for Main Nav Items */
.nav-links>li>a.active {
  color: var(--primary);
  font-weight: 600;
}

.nav-links a {
  font-weight: 600;
  color: var(--text-main);
  position: relative;
  text-transform: uppercase;
  white-space: nowrap;
  /* Prevent menu text wrapping */
  letter-spacing: 1px;
  font-size: 0.85rem;
  transition: color 0.3s;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--primary);
}

.nav-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Burger Menu Styles */
.burger-menu {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  z-index: 1001;
}

.burger-menu span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--dark);
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Burger Animation State */
.burger-menu.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

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

.burger-menu.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-cta {
  display: block;
  /* Show CTA */
  justify-self: end;
  /* Align to far right */
}

/* Disable movement animation for nav button to prevent clipping out of window */
.nav-cta .btn {
  transform: none !important;
}

.nav-cta .btn:hover {
  transform: none !important;
}

/* Tablet / Intermediate Adjustment */
@media screen and (max-width: 1200px) {
  nav {
    padding: 2rem 0;
    /* Reduce padding on tablet */
  }

  .nav-links {
    gap: 1.5rem;
    /* Tighter links to give logo space */
  }

  .nav-links a {
    font-size: 0.8rem;
    /* Slightly smaller text */
  }
}

/* Mobile Navigation */
@media screen and (max-width: 1150px) {
  nav {
    grid-template-columns: 1fr auto;
    /* Logo | Burger */
    padding: 0.8rem 0 !important;
    /* Smaller padding on mobile */
  }

  .nav-cta {
    display: none;
    /* Hide CTA button in header, maybe move inside menu? Or just hide for now as per "replace menu" */
  }

  .burger-menu {
    display: flex;
    margin-right: 2rem;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 999;
    /* Behind burger button */
  }

  .nav-links.nav-active {
    right: 0;
  }

  .nav-links a {
    font-size: 1.5rem;
  }
}

/* Hero Section - Light Premium */
.hero {
  /* min-height removed for static layout */
  display: block;
  /* align-items center removed */
  position: relative;
  overflow: visible;
  padding-top: 140px;
  /* Increased from 40px to safely clear header */
  padding-bottom: 10rem;
  background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  background-image:
    radial-gradient(at 0% 0%, rgba(119, 199, 181, 0.2) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(26, 106, 255, 0.1) 0px, transparent 50%);
  color: #020617;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  position: relative;
  z-index: 5;
  width: 100%;
  padding-bottom: 12rem;
  /* Reduced from 18rem */
  margin-top: 0;
  /* Removed negative margin */
}

.hero-text {
  padding-right: 0;
  /* No margin adjustments needed, padding handles the space */
}

.hero-text h1 {
  font-size: clamp(3.5rem, 5vw, 5.5rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: #0f172a;
  /* Slate 900 - High Contrast */
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero-text p {
  color: #334155;
  margin-bottom: 2.5rem;
  max-width: 500px;
  font-weight: 500;
  border-left: 4px solid var(--primary);
  padding-left: 1.5rem;
}

.hero-btns {
  display: flex;
  gap: 1.5rem;
}

.hero-image-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  /* Align to the right edge */
  margin-bottom: -15rem;
  /* Reduced from -12rem to pull it further down towards the stats bar */
  z-index: 1;
  /* Right padding ensures it aligns with the 90% width stats bar (5% gap on logic) */
  padding-right: 2rem;
  transform: translateY(2rem);
  /* Move image down to close gap with tile */
}

.hero-img-cutout {
  max-width: 100%;
  /* Prevent overflow */
  max-height: 115%;
  /* Allow height but keep width contained */
  object-fit: contain;
  object-position: bottom right;
  /* Anchor bottom-right */
  filter: drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.15));
  transform: none;
  /* No shifting */
}

.hero-image-wrapper:hover .hero-img {
  transform: none;
}

/* Floating Badges Removed from this design */
.hero-badge {
  display: none;
}

/* Floating Stats Bar embedded in Hero */
/* Info Bar Styling */
.hero-stats-bar {
  position: absolute;
  bottom: 0px;
  /* Fixed to bottom */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: var(--container);
  background: white;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 2.5rem 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* 3 Equal Columns */
  gap: 2rem;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);
  /* Softer shadow */
  z-index: 10;
}

.info-block {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.info-icon {
  /* font-size: 1.5rem; Removed */
  background: #f1f5f9;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--primary);
  /* Ensure SVG inherits or uses this */
}

.info-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
}

.info-block h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-block p {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Hero Buttons - cleanup done in main block above */

/* Logo Filter - Removed to keep original colors for Light Theme */
.logo-img {
  height: 60px;
  width: auto;
  max-width: 100%;
  min-width: 180px;
  /* Prevent shrinking too much before breakpoint */
  object-fit: contain;
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
}

.badge-icon {
  background: var(--primary);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.badge-text span {
  display: block;
  font-weight: 700;
  color: var(--dark);
  font-size: 1.1rem;
}

.badge-text small {
  color: var(--text-light);
  font-size: 0.9rem;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Services */
.services {
  padding: 8rem 0;
  position: relative;
  scroll-margin-top: 100px;
  /* Crucial offset for sticky header */
}

/* Section Headers */
.section-title,
.section-header {
  text-align: center;
  margin-bottom: 5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.section-title h2,
.section-header h2 {
  font-size: clamp(1.8rem, 5vw + 1rem, 2.5rem);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Decorative Kicker/Underline */
.section-title h2::after,
.section-header h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--primary);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

.section-title p,
.section-header p {
  font-size: 1.15rem;
  color: var(--text-light);
  line-height: 1.6;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
}

.service-card {
  background: white;
  padding: 3rem 2rem;
  border-radius: var(--radius-lg);
  position: relative;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  /* Ultra smooth "Apple-like" ease */
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
  /* Very faint initial shadow */
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  /* Thinner line */
  background: var(--gradient-main);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-card:hover {
  transform: translateY(0);
  /* No physical movement */
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
  /* Extremely soft ambient light change */
  border-color: rgba(0, 0, 0, 0.04);
  /* Slight definition */
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon {
  width: 60px;
  height: 60px;
  background: #f8fafc;
  /* Slate-50, very subtle gray */
  color: var(--primary);
  /* font-size: 1.8rem; Removed */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  /* Softer rounding */
  margin-bottom: 1.5rem;
  transition: all 0.4s ease;
  border: 1px solid rgba(0, 0, 0, 0.03);
  /* Subtle definition */
}

.service-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 1.5;
  /* Slightly thinner for elegance */
}

.service-card:hover .service-icon {
  background: white;
  color: var(--primary);
  /* Keep text color stable */
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  /* Icon lifts internally */
}

.service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
  color: #1e293b;
  /* Slate-800 */
  letter-spacing: -0.01em;
}

.service-card p {
  color: #64748b;
  /* Slate-500 */
  line-height: 1.65;
  font-size: 0.95rem;
}

/* Feature Card: Vitamin Cure */
.service-card.vitamin-feature {
  grid-column: span 2;
  /* Span 2 columns */
  background: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%);
  /* Energetic Orange-Red Gradient */
  border: none;
  color: white;
  position: relative;
  /* Ensure relative positioning for absolute children if needed */
}

.feature-tag {
  display: inline-block;
  background: white;
  color: #FF5E62;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  align-self: flex-start;
  /* Align left */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.service-card.vitamin-feature::before {
  display: none;
  /* No top line needed */
}

.service-card.vitamin-feature .service-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  margin-bottom: 1rem;
  /* Adjust spacing */
}

.service-card.vitamin-feature:hover .service-icon {
  background: white;
  color: #FF5E62;
}

.service-card.vitamin-feature h3 {
  color: white;
  font-size: 1.75rem;
}

.service-card.vitamin-feature p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.1rem;
  max-width: 90%;
  margin-bottom: 2rem;
}

/* Vitamin CTA & Button */
.vitamin-cta {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.vitamin-text {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  font-weight: 600;
  opacity: 1;
}

.btn-vitamin {
  display: inline-block;
  background: white;
  color: #c0392b;
  /* Deep Red for Maximum Contrast against White */
  padding: 0.9rem 2rem;
  /* Slightly larger */
  border-radius: 50px;
  font-weight: 800;
  /* Extra Bold */
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  /* Stronger shadow */
}

.btn-vitamin:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  background: #fff;
  color: #a93226;
  /* Even darker on hover */
}

@media (max-width: 768px) {
  .service-card.vitamin-feature {
    grid-column: span 1;
    /* Stack on mobile */
  }
}

/* Stats / Info Banner */
.stats-container {
  max-width: var(--container);
  margin: 0 auto 6rem;
  background: var(--dark);
  border-radius: var(--radius-xl);
  padding: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.stats-container::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: var(--primary);
  opacity: 0.1;
  border-radius: 50%;
  filter: blur(60px);
}

.stat-item {
  text-align: center;
  z-index: 1;
}

.stat-item h3 {
  color: var(--primary);
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
}

.stat-item p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  font-weight: 500;
}

/* Mobile Navigation */
@media (max-width: 1150px) {
  .hero {
    padding-top: 130px;
    align-items: center;
    flex-direction: column;
    gap: 1.5rem;
    min-height: auto;
    height: auto;
  }

  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
    margin-top: 0;
    /* Reset negative margin */
    padding-bottom: 1rem;
    /* minimal fallback spacing */


  }

  .hero-text h1 {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }

  .hero-image-wrapper,
  .hero-img {
    display: none !important;
  }

  .hero-btns {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    gap: 1rem;
  }

  .hero-btns .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }


  .hero-stats-bar {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 2rem !important;
    /* Reduced from 4rem for closer look */
    /* Ensure clear separation */
    width: 100%;
    padding: 1.5rem;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    /* Add background to ensure readability if overlap persists */
    backdrop-filter: blur(10px);
    border-radius: 1rem;
  }

  .info-block {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .hero-text p {
    margin: 0 auto 2.5rem auto;
    /* Center block */
    border-left: none;
    /* Remove side border */
    padding-left: 0;
    max-width: 100%;
    /* Use full width if needed, or keep partial but centered */
  }

  .hero-btns {
    justify-content: center;
    /* Center flex buttons */
  }
}



/* Accordion */
.accordion {
  max-width: 800px;
  margin: 4rem auto;
}

.accordion-item {
  background: white;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.accordion-header {
  padding: 1.5rem 2rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1.1rem;
  background: white;
  transition: background 0.3s;
}

.accordion-header:hover {
  background: var(--light-bg);
}

.accordion-icon {
  transition: transform 0.3s ease;
  /* font-size: 1.5rem; Removed */
  width: 24px;
  height: 24px;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
  background: rgba(248, 252, 251, 0.5);
}

.accordion-content p {
  padding: 1.5rem 2rem;
  color: var(--text-light);
}

.accordion-item.active .accordion-content {
  max-height: 1500px;
  /* Adjust based on content */
}

/* Density & Patterns */
.section-dense {
  padding: 4rem 0 !important;
  /* Reduce padding for density */
}

.bg-pattern-dot {
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-pattern-grid {
  background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
  background-size: 40px 40px;
}

.text-center {
  text-align: center;
}

.center-mx {
  margin-left: auto;
  margin-right: auto;
}


/* Process / Directions Section */
.directions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
}

.direction-card {
  background: white;
  padding: 3rem 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.03);
  text-align: center;
  transition: transform 0.3s ease;
}

.direction-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.direction-icon {
  width: 80px;
  height: 80px;
  background: var(--light-bg);
  color: var(--primary);
  /* font-size: 2.5rem; Removed */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
}

.direction-icon svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
  stroke-width: 1.5;
}

.direction-card h3 {
  font-size: 1.5rem;
  color: var(--dark);
  margin-bottom: 1rem;
  font-weight: 700;
}

.direction-card p {
  color: var(--text-light);
  line-height: 1.6;
  font-size: 1.05rem;
}

@media(min-width: 900px) {
  /* Optional: Connector lines could go here if desired, but clean cards are requested */
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.testimonial-card {
  background: white;
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.03);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stars {
  color: #fbbf24;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  gap: 2px;
}

.stars svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ddd;
  margin-bottom: 1rem;
  object-fit: cover;
}

/* News Section */
.section-news-bg {
  background-color: rgba(119, 199, 181, 0.08);
  /* deeply subtle Primary Tint */
  border-top: 1px solid rgba(13, 148, 136, 0.05);
  border-bottom: 1px solid rgba(13, 148, 136, 0.05);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.news-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: 0.3s;
}

.news-card:hover {
  transform: translateY(-5px);
}

.news-img {
  height: 200px;
  background: #eee;
  width: 100%;
  object-fit: cover;
}

.news-content {
  padding: 1.5rem;
}

.news-date {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

.news-card h4 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

/* Contact & Footer - High Contrast Dark Mode */
#kontakt {
  background-color: var(--dark) !important;
  color: white;
  position: relative;
  padding: 6rem 0;
}

#kontakt h2,
#kontakt h3,
#kontakt h4,
#kontakt strong {
  color: white;
}

#kontakt p,
#kontakt li {
  color: #cad5e1;
  /* Slate-300 for readability */
}

/* Override inline styles if needed */
#kontakt ul {
  color: #cad5e1 !important;
}

/* Footer Integration */
footer {
  background-color: #020617;
  /* Even darker (Slate-950) for separation */
  color: #94a3b8;
  padding: 4rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer h4 {
  color: white;
  margin-bottom: 1.5rem;
}

footer a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s;
}

footer a:hover {
  color: var(--primary);
}

.copyright {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Modal Styles */
.modal-overlay {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(15, 23, 42, 0.6);
  /* Dark Slate overlay */
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
  justify-content: center;
  align-items: center;
}

.modal-overlay.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-content {
  background-color: #fefefe;
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

@keyframes slideUp {
  from {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.close-modal {
  color: #aaa;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.close-modal:hover,
.close-modal:focus {
  color: var(--primary);
  text-decoration: none;
}

.modal-header {
  text-align: center;
  margin-bottom: 2rem;
}

.modal-header h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--dark);
}

.modal-header p {
  color: var(--text-light);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-main);
  font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #f8fafc;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(119, 199, 181, 0.2);
  background: white;
}

/* FAQ Accordion Styles */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.accordion-item {
  background: white;
  border-radius: var(--radius-lg);
  /* Consistent radius */
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: all 0.3s ease;
}

.accordion-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.accordion-header {
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: white;
  transition: background 0.2s;
}

.accordion-header span:first-child {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--dark);
}

.accordion-icon {
  font-size: 1.5rem;
  color: var(--primary);
  transition: transform 0.3s ease;
  font-weight: 300;
}

.accordion-item.active .accordion-icon {
  transform: rotate(45deg);
  color: var(--accent);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: white;
  text-align: left;
  /* Aligned left */
}

.accordion-item.active .accordion-content {
  max-height: 1500px;
  /* Approximate max height */
}

.accordion-content p {
  padding: 0 2rem 2rem;
  color: var(--text-light);
  line-height: 1.6;
}

/* Blog Styles */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 3rem;
  padding: 2rem 0;
}

.blog-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.blog-img-wrapper {
  height: 240px;
  background: #e2e8f0;
  position: relative;
  overflow: hidden;
}

.blog-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-img-wrapper img {
  transform: scale(1.05);
}

.blog-category {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--primary);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.blog-content {
  padding: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-date {
  color: var(--text-light);
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
  display: block;
}

.blog-content h3 {
  font-size: 1.5rem;
  color: var(--dark);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.blog-content p {
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.btn-text {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s ease;
}

.btn-text:hover {
  gap: 0.8rem;
  color: var(--primary-dark);
}

@media (max-width: 768px) {
  .blog-hero {
    padding: 6rem 0 3rem;
  }

  .blog-hero h1 {
    font-size: 2.2rem;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* Special Nav Item Style */
.nav-links .nav-special {
  color: var(--text-main);
  /* Default gray/dark like others */
  transition: color 0.3s ease;
}

.nav-links .nav-special:hover {
  color: var(--primary);
  /* Standard hover color */
}

/* Breadcrumbs */
.breadcrumb-container {
  padding-top: 2rem;
  padding-bottom: 1rem;
  text-align: center;
}

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-light);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb li:not(:last-child)::after {
  content: '›';
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-light);
  opacity: 0.7;
}

.breadcrumb a {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.breadcrumb li:last-child {
  color: var(--primary);
  /* Highlight current page */
  font-weight: 500;
}

/* Responsive Video/Map Wrapper */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: 3rem;
  background: #e2e8f0;
}

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


/* Ensure Active State works for Special Items and Normal Items */
/* Ensure Active State works for Special Items, Normal Items, and Scrolled State */
nav .nav-links a.active,
nav .nav-links .nav-special.active,
nav.scrolled .nav-links a.active,
nav.scrolled .nav-links .nav-special.active {
  color: var(--primary) !important;
  font-weight: 700;
}

nav .nav-links a.active::after,
nav .nav-links .nav-special.active::after,
nav.scrolled .nav-links a.active::after,
nav.scrolled .nav-links .nav-special.active::after {
  width: 100% !important;
  background-color: var(--primary) !important;
  opacity: 1 !important;
  height: 2px !important;
  bottom: -4px !important;
}



/* Privacy Policy & Impressum Spacing */
.page-datenschutz h3,
.page-impressum h3,
.page-impressum h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.page-impressum h4 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}


.page-datenschutz h3:first-of-type,
.page-impressum h3:first-of-type {
  margin-top: 0;
}

/* Contact Form Textarea Fix */
textarea {
  resize: none !important;
  height: 150px !important;
}

/* Character Counter */
.char-count {
  font-size: 0.85rem;
  color: #64748b;
  text-align: right;
  margin-top: 0.25rem;
}

.char-count.limit-reached {
  color: #ef4444;
  /* Red */
  font-weight: 600;
}

/* Hero Mobile Optimization */
@media (max-width: 1024px) {
  .hero {
    display: block;
    height: auto;
    min-height: auto;
    padding-bottom: 0;
  }

  .hero .container {
    display: flex;
    flex-direction: column;
    padding-bottom: 4rem;
    margin-top: 2rem;
    text-align: center;
    grid-template-columns: 1fr;
  }

  .hero-text {
    padding-right: 0;
  }

  .hero-text h1 {
    font-size: 3rem;
  }

  .hero-text p {
    margin: 0 auto 2rem;
    border-left: none;
    padding-left: 0;
  }

  .hero-btns {
    justify-content: center;
  }

  .hero-image-wrapper {
    margin-bottom: 0;
    padding-right: 0;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .hero-img-cutout {
    max-height: 350px;
    width: auto;
  }

  .hero-stats-bar {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
    gap: 2rem;
    border-radius: 24px 24px 0 0;
    margin-top: 0;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
  }
}

/* News Slider */
.news-slider-container {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  padding: 0 50px;
  /* Increased padding to give arrows more space */
  /* Space for buttons */
}

.news-slider-track {
  display: flex;
  gap: 2rem;
  transition: transform 0.5s ease-in-out;
  padding: 1rem 0 3rem 0;
  /* Radically increased bottom padding */
  /* Space for shadow */
}

.news-card {
  flex: 0 0 calc(33.333% - 1.34rem);
  /* (100% - 2 * 2rem) / 3 */
  min-width: 280px;
}

.slider-btn {
  position: absolute;
  top: calc(50% - 2.5rem);
  /* Offset to account for bottom padding and mathematically center with cards */
  transform: translateY(-50%);
  background: white;
  border: 1px solid #e2e8f0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  color: var(--primary);
  font-size: 1.2rem;
  transition: all 0.2s;
}

.slider-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.slider-btn.prev {
  left: 5px;
  /* Moved slightly inward */
}

.slider-btn.next {
  right: 5px;
  /* Moved slightly inward */
}

/* Slider Responsive */
@media (max-width: 1024px) {
  .news-card {
    flex: 0 0 calc(50% - 1rem);
    /* 2 cards */
  }
}

@media (max-width: 640px) {
  .news-card {
    flex: 0 0 100%;
    /* 1 card */
  }

  .news-slider-container {
    padding: 0;
    /* Remove side padding on mobile, buttons might overlay or be hidden */
  }

  .slider-btn {
    display: none;
    /* Hide arrows on mobile because they overlap content */
  }
}

/* Slider Dots */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1rem;
  padding-bottom: 2rem;
  /* Give dots themselves bottom padding to avoid parent overflow clipping */
  width: 100%;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.3s;
}

.slider-dot.active {
  background: var(--primary);
  transform: scale(1.2);
}

/* Fix for footer spacing to match top distance */
section#kontakt,
footer {
  padding-bottom: 2rem !important;
}

/* Modal Mobile Fixes */
@media (max-width: 768px) {
  .modal-content {
    padding: 1.5rem;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
  }
}

/* Modal Desktop Height Fix */
@media (max-height: 850px) {
  .modal-content {
    max-height: 85vh;
    overflow-y: auto;
  }
}

/* Specific Mobile Fix for Impressum & Datenschutz Header Link */
@media screen and (max-width: 1150px) {

  body.page-impressum nav,
  body.page-datenschutz nav {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  body.page-impressum nav>div:last-child,
  body.page-datenschutz nav>div:last-child {
    display: none;
  }

  body.page-impressum .nav-links,
  body.page-datenschutz .nav-links {
    position: static;
    right: auto;
    width: auto;
    height: auto;
    background: transparent;
    padding: 0;
    margin-right: 2rem;
    flex-direction: row;
    opacity: 1;
    visibility: visible;
  }

  body.page-impressum .nav-links a,
  body.page-datenschutz .nav-links a {
    font-size: 0.95rem;
    color: var(--text-main);
  }
}

@media screen and (max-width: 480px) {
  body.page-impressum .nav-links {
    margin-right: 1rem;
  }

  body.page-datenschutz .nav-links {
    margin-right: 1rem;
  }

  body.page-impressum .nav-links a,
  body.page-datenschutz .nav-links a {
    font-size: 0.8rem;
    gap: 0.3rem !important;
  }
}

@media screen and (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

.vitamin-promo-card {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vitamin-promo-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}