/* ============================================
   SAMPADA AYURVEDIC CENTRE — Homepage Styles
   ============================================ */

/* --- Hero --- */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  background: linear-gradient(135deg, #0D3B0F 0%, #1B5E20 40%, #2E7D32 70%, #1B5E20 100%);
  overflow: hidden; padding: var(--space-20) 0;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(212,168,83,0.08) 0%, transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(67,160,71,0.1) 0%, transparent 50%);
}
.hero__pattern {
  position: absolute; inset: 0; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero__floating-leaf {
  position: absolute; font-size: 80px; opacity: 0.06; color: white;
  animation: float 6s ease-in-out infinite;
}
.hero__floating-leaf:nth-child(1) { top: 10%; right: 10%; animation-delay: 0s; }
.hero__floating-leaf:nth-child(2) { bottom: 20%; left: 5%; animation-delay: 2s; font-size: 60px; }
.hero__floating-leaf:nth-child(3) { top: 40%; right: 30%; animation-delay: 4s; font-size: 40px; }

.hero__inner {
  max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: center;
  position: relative; z-index: 1;
}
@media (max-width: 1024px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } }

.hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5); margin-bottom: var(--space-6);
  font-family: var(--font-accent); font-size: var(--text-sm); font-weight: 500; color: var(--gold-300);
  animation: fadeInDown 0.6s var(--ease-out);
}
.hero__title {
  font-family: var(--font-heading); font-size: clamp(1.8rem, 6vw, var(--text-hero));
  font-weight: 800; color: var(--text-light); line-height: 1.15; margin-bottom: var(--space-6);
  animation: fadeInUp 0.7s var(--ease-out);
}
.hero__title span { color: var(--gold-300); }
.hero__subtitle {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-xl)); color: rgba(255,255,255,0.85);
  line-height: 1.7; margin-bottom: var(--space-10); max-width: 560px;
  animation: fadeInUp 0.8s var(--ease-out);
}
@media (max-width: 1024px) { .hero__subtitle { max-width: 100%; margin-left: auto; margin-right: auto; } }

.hero__ctas {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  animation: fadeInUp 0.9s var(--ease-out);
}
@media (max-width: 1024px) { .hero__ctas { justify-content: center; } }
@media (max-width: 480px) { .hero__ctas { flex-direction: column; } .hero__ctas .btn { width: 100%; } }

.hero__visual {
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 1s var(--ease-out) 0.3s both;
}
.hero__image {
  width: 100%;
  max-width: 520px;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
}
@media (max-width: 1024px) { .hero__visual { display: none; } }

.hero__trust-strip {
  margin-top: var(--space-10); display: flex; align-items: center; gap: var(--space-8);
  animation: fadeInUp 1s var(--ease-out);
}
.hero__trust-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: rgba(255,255,255,0.7); }
.hero__trust-item svg { color: var(--gold-400); }
@media (max-width: 1024px) { .hero__trust-strip { justify-content: center; flex-wrap: wrap; } }

/* --- Stats Bar --- */
.stats-bar {
  position: relative; z-index: 2; margin-top: -60px;
}
.stats-bar__inner {
  max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6);
}
.stats-bar__card {
  background: var(--bg-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  padding: var(--space-8) var(--space-6);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
  border: 1px solid var(--border-light);
}
@media (max-width: 768px) { .stats-bar__card { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .stats-bar__card { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-4); }
}

/* --- About Doctor (Home) --- */
.about-home__inner {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-16); align-items: center;
}
@media (max-width: 1024px) { .about-home__inner { grid-template-columns: 1fr; } }

.about-home__image {
  aspect-ratio: 3/4; border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(135deg, var(--primary-100), var(--bg-cream));
  display: flex; align-items: center; justify-content: center; font-size: 64px;
  color: var(--primary-300); position: relative;
}
.about-home__image::after {
  content: ''; position: absolute; inset: 0;
  border: 2px solid var(--primary-200); border-radius: var(--radius-xl);
}
.about-home__tag {
  position: absolute; bottom: var(--space-6); left: var(--space-6); right: var(--space-6);
  background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);
  border-radius: var(--radius-md); padding: var(--space-4);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm);
  color: var(--primary-800); text-align: center;
}
.about-home__content { }
.about-home__qualifications {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0;
}
.about-home__features {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (max-width: 640px) {
  .about-home__features { grid-template-columns: 1fr; }
}
.about-home__feature {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-md); background: var(--bg-cream);
}
.about-home__feature-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--primary-100); color: var(--primary-700);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px;
}
.about-home__feature-text { font-size: var(--text-sm); }
.about-home__feature-title { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.about-home__feature-desc { color: var(--text-muted); font-size: var(--text-xs); }

/* --- Why Choose Us --- */
.why-choose__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
@media (max-width: 1024px) { .why-choose__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .why-choose__grid { grid-template-columns: 1fr; } }

/* --- Treatment Categories --- */
.categories__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
}
@media (max-width: 1024px) { .categories__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .categories__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .categories__grid { grid-template-columns: 1fr; } }

.category-card {
  background: var(--bg-white); border-radius: var(--radius-lg);
  padding: var(--space-6); text-align: center; border: 1px solid var(--border-light);
  transition: all var(--transition-base); cursor: pointer; text-decoration: none;
  display: block;
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-300); }
.category-card__icon {
  width: 160px; height: 160px; border-radius: var(--radius-lg);
  background: var(--bg-cream);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-4);
  transition: all var(--transition-base);
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.category-card:hover .category-card__icon { transform: scale(1.05); border-color: var(--primary-300); }
.category-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-card__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm); color: var(--text-primary); margin-bottom: var(--space-2); }
.category-card__count { font-size: var(--text-xs); color: var(--text-muted); }

/* --- Featured Treatments --- */
.featured__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
@media (max-width: 1024px) { .featured__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .featured__grid { grid-template-columns: 1fr; } }

/* --- Testimonials Carousel --- */
.testimonials-carousel { position: relative; overflow: hidden; }
.testimonials-track {
  display: flex; gap: var(--space-6); transition: transform 0.5s var(--ease-out);
}
.testimonials-track .testimonial-card { min-width: calc(50% - (var(--space-6) / 2)); flex-shrink: 0; }
@media (max-width: 1024px) { .testimonials-track .testimonial-card { min-width: calc(50% - (var(--space-6) / 2)); } }
@media (max-width: 640px) { .testimonials-track .testimonial-card { min-width: 100%; } }

.testimonials-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.testimonials-btn {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--bg-white); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); cursor: pointer;
  transition: all var(--transition-fast); box-shadow: var(--shadow-xs);
}
.testimonials-btn:hover { background: var(--primary-700); color: white; border-color: var(--primary-700); }
.testimonials-dots { display: flex; gap: var(--space-2); }
.testimonials-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--border-medium); cursor: pointer;
  transition: all var(--transition-fast);
}
.testimonials-dot.active { background: var(--primary-700); width: 24px; }

/* --- Branches --- */
.branches__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8);
}
@media (max-width: 768px) { .branches__grid { grid-template-columns: 1fr; } }

/* --- Appointment Section --- */
.appointment-section {
  position: relative; overflow: hidden;
}
.appointment-section::before {
  content: ''; position: absolute; top: -50%; right: -30%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,168,83,0.06), transparent 70%);
}
.appointment__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center;
}
@media (max-width: 1024px) { .appointment__inner { grid-template-columns: 1fr; } }
.appointment__form-card {
  background: var(--bg-white); border-radius: var(--radius-xl);
  padding: var(--space-10); box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
}
@media (max-width: 640px) {
  .appointment__form-card { padding: var(--space-6) var(--space-4); }
}
.appointment__form-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; color: var(--primary-800); margin-bottom: var(--space-2); }
.appointment__form-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-8); }
.appointment__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .appointment__form-row { grid-template-columns: 1fr; } }

/* --- CTA Banner --- */
.cta-banner {
  position: relative; overflow: hidden; text-align: center;
  padding: var(--space-20) var(--space-6);
}
.cta-banner__inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.cta-banner__title { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); color: var(--text-light); margin-bottom: var(--space-4); }
.cta-banner__text { color: rgba(255,255,255,0.85); font-size: var(--text-lg); margin-bottom: var(--space-8); }
.cta-banner__buttons { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* --- FAQ Section --- */
.faq__inner {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-16); align-items: flex-start;
}
@media (max-width: 1024px) { .faq__inner { grid-template-columns: 1fr; } }

/* --- Achievements Preview --- */
.achievements-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: var(--container-lg);
  margin: 0 auto;
}
@media (max-width: 768px) {
  .achievements-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .achievements-preview-grid {
    grid-template-columns: 1fr;
  }
}
.achievement-preview-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base);
}
.achievement-preview-img:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}