/*
Theme Name: Home EyeCare Services
Theme URI: https://www.homeeye.care
Author: Home EyeCare Services
Author URI: https://www.homeeye.care
Description: Professional home eye care services theme with ACF support. Hospital-quality eye testing at your doorstep across Delhi NCR.
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: homeeye
Tags: one-column, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ===== CSS Variables (matching React design tokens) ===== */
:root {
  --background: hsl(240, 20%, 99%);
  --foreground: hsl(230, 40%, 15%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(230, 40%, 15%);
  --primary: hsl(230, 45%, 20%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(240, 20%, 96%);
  --muted: hsl(240, 15%, 95%);
  --muted-foreground: hsl(230, 10%, 45%);
  --accent: hsl(320, 50%, 35%);
  --accent-foreground: hsl(0, 0%, 100%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --border: hsl(240, 15%, 90%);
  --ring: hsl(230, 45%, 20%);
  --radius: 0.75rem;
  --section-alt: hsl(240, 20%, 97%);
  --trust-badge-bg: hsl(230, 45%, 95%);
  --hero-gradient: linear-gradient(135deg, hsl(230, 45%, 20%), hsl(230, 40%, 28%));
  --cta-gradient: linear-gradient(135deg, hsl(320, 50%, 35%), hsl(320, 55%, 42%));
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; line-height: 1.2; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ===== Container ===== */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* ===== Utilities ===== */
.section-alt { background-color: var(--section-alt); }
.trust-badge-bg { background-color: var(--trust-badge-bg); }
.gradient-hero { background: var(--hero-gradient); }
.gradient-cta { background: var(--cta-gradient); }
.text-balance { text-wrap: balance; }

/* ===== Animations ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 0.6s ease-out both; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--radius); font-weight: 600; font-size: 0.875rem;
  padding: 0.625rem 1.25rem; border: 1px solid transparent;
  cursor: pointer; transition: all 0.2s;
}
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { opacity: 0.9; }
.btn-cta { background: var(--cta-gradient); color: var(--accent-foreground); font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
.btn-cta:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.btn-outline { border: 1px solid var(--border); background: transparent; color: var(--foreground); }
.btn-outline:hover { background: var(--muted); }
.btn-lg { padding: 0.875rem 2rem; font-size: 1.125rem; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-full { width: 100%; }

/* ===== Navbar ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  background: hsla(0, 0%, 100%, 0.95);
  backdrop-filter: blur(12px);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; }
.nav-logo img { height: 50px; background: transparent; mix-blend-mode: multiply; }
.nav-menu { display: none; align-items: center; gap: 0.15rem; font-size: 0.875rem; font-weight: 500; }
@media (min-width: 1024px) { .nav-menu { display: flex; } }
.nav-menu a, .nav-menu button {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.5rem 0.75rem; border-radius: 0.375rem;
  color: var(--muted-foreground); transition: all 0.2s; background: none; border: none; cursor: pointer; font: inherit; white-space: nowrap;
}
.nav-menu a:hover, .nav-menu button:hover { color: var(--foreground); background: var(--muted); }
.nav-menu button svg, .nav-menu a svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-right { display: flex; align-items: center; gap: 0.75rem; }
.nav-right .call-link { display: none; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); }
.nav-right .call-link:hover { color: var(--foreground); }
@media (min-width: 640px) { .nav-right .call-link { display: flex; } }
.nav-right .book-btn { display: none; }
@media (min-width: 640px) { .nav-right .book-btn { display: inline-flex; } }
.mobile-toggle { display: block; padding: 0.5rem; background: none; border: none; cursor: pointer; }
@media (min-width: 1024px) { .mobile-toggle { display: none; } }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 0.25rem;
  width: 16rem; background: var(--card); border: 1px solid var(--border);
  border-radius: 0.75rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 0.5rem 0; z-index: 50;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--muted-foreground); }
.nav-dropdown-menu a:hover { color: var(--foreground); background: var(--muted); }

/* Mobile nav */
.mobile-nav { display: none; border-top: 1px solid var(--border); background: var(--card); max-height: 70vh; overflow-y: auto; }
.mobile-nav.active { display: block; }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }
.mobile-nav a { display: block; padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; }
.mobile-nav a:hover { background: var(--muted); }

/* ===== Hero ===== */
.hero { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, hsla(230,40%,15%,0.9), hsla(230,40%,15%,0.7), hsla(230,40%,15%,0.3)); }
.hero .container { position: relative; z-index: 10; padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .hero .container { padding-top: 8rem; padding-bottom: 8rem; } }
.hero-content { max-width: 42rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: hsla(230,45%,20%,0.2); padding: 0.375rem 1rem;
  border-radius: 9999px; font-size: 0.875rem; font-weight: 500; color: var(--primary-foreground); margin-bottom: 1.5rem;
}
.hero h1 { font-size: 2.25rem; font-weight: 800; color: var(--primary-foreground); line-height: 1.15; margin-bottom: 1rem; }
@media (min-width: 768px) { .hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 3.75rem; } }
.hero-sub { font-size: 1.125rem; color: hsla(0,0%,100%,0.8); margin-bottom: 1.5rem; }
@media (min-width: 768px) { .hero-sub { font-size: 1.25rem; } }
.hero-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 2rem; }
.hero-highlights li { display: flex; align-items: center; gap: 0.5rem; color: hsla(0,0%,100%,0.9); font-size: 0.875rem; }
@media (min-width: 768px) { .hero-highlights li { font-size: 1rem; } }
.hero-highlights svg { width: 1.25rem; height: 1.25rem; color: var(--accent); flex-shrink: 0; }
.hero-buttons { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .hero-buttons { flex-direction: row; } }
.hero-buttons .btn-ghost {
  border: 1px solid hsla(0,0%,100%,0.3); background: transparent;
  color: var(--primary-foreground); font-weight: 600; font-size: 1.125rem; padding: 0.875rem 2rem;
  border-radius: var(--radius); cursor: pointer; transition: all 0.2s;
}
.hero-buttons .btn-ghost:hover { background: hsla(0,0%,100%,0.1); }

/* ===== Section styles ===== */
.section { padding: 4rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }
.section-title { font-size: 1.875rem; font-weight: 700; text-align: center; margin-bottom: 1rem; }
@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }
.section-subtitle { color: var(--muted-foreground); text-align: center; margin-bottom: 3rem; max-width: 36rem; margin-left: auto; margin-right: auto; }

/* ===== Cards ===== */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.card-2xl { border-radius: 1rem; }

/* ===== Why Us ===== */
.why-us-grid { display: grid; gap: 2rem; max-width: 56rem; margin: 0 auto; }
@media (min-width: 768px) { .why-us-grid { grid-template-columns: 1fr 1fr; } }
.why-us-solution { border-width: 2px; border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.why-us-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.why-us-list li { display: flex; align-items: center; gap: 0.75rem; color: var(--muted-foreground); }
.why-us-list li svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.why-us-list.problems li svg { color: var(--destructive); }
.why-us-list.solutions li svg { color: var(--primary); }
.why-us-list.solutions li { color: var(--foreground); }

/* ===== Included ===== */
.included-grid { display: grid; gap: 1rem; max-width: 56rem; margin: 0 auto; }
@media (min-width: 640px) { .included-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .included-grid { grid-template-columns: 1fr 1fr 1fr; } }
.included-item { display: flex; align-items: center; gap: 0.75rem; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--card); padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: box-shadow 0.2s; }
.included-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.included-item svg { width: 1.25rem; height: 1.25rem; color: var(--primary); flex-shrink: 0; }
.included-item span { font-weight: 500; }

/* ===== Pricing ===== */
.pricing-grid { display: grid; gap: 2rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-card { position: relative; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
.pricing-card.popular { border-color: var(--primary); box-shadow: 0 4px 15px rgba(0,0,0,0.1); ring: 2px solid hsla(230,45%,20%,0.2); transform: scale(1.05); }
.pricing-badge {
  position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px;
  background: var(--cta-gradient); padding: 0.25rem 1rem; font-size: 0.75rem; font-weight: 700; color: var(--accent-foreground);
}
.pricing-card h3 { font-weight: 700; font-size: 1.25rem; margin-bottom: 0.25rem; }
.pricing-card .price { font-size: 2.25rem; font-weight: 800; color: var(--primary); margin-bottom: 1.5rem; }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; flex: 1; }
.pricing-features li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.pricing-features li svg { width: 1rem; height: 1rem; color: var(--primary); flex-shrink: 0; }

/* ===== How It Works ===== */
.steps-grid { display: grid; gap: 2rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 640px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } }
.step { text-align: center; }
.step-icon {
  position: relative; margin: 0 auto 1rem; width: 4rem; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1rem; background: var(--hero-gradient); box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.step:hover .step-icon { transform: scale(1.1); }
.step-icon svg { width: 2rem; height: 2rem; color: var(--primary-foreground); }
.step-number {
  position: absolute; top: -0.5rem; right: -0.5rem;
  width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: var(--cta-gradient);
  font-size: 0.75rem; font-weight: 700; color: var(--accent-foreground); box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.step h3 { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.5rem; }
.step p { font-size: 0.875rem; color: var(--muted-foreground); }

/* ===== Appointment Form ===== */
.appointment-section { padding: 4rem 0; }
@media (min-width: 768px) { .appointment-section { padding: 6rem 0; } }
.appointment-form-wrap {
  max-width: 36rem; margin: 0 auto;
  border-radius: 1rem; border: 2px solid hsla(230,45%,20%,0.2);
  background: var(--card); padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
@media (min-width: 768px) { .appointment-form-wrap { padding: 2.5rem; } }
.form-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.form-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; background: var(--hero-gradient); }
.form-icon svg { width: 1.5rem; height: 1.5rem; color: var(--primary-foreground); }
.form-header h2 { font-size: 1.5rem; font-weight: 700; }
.form-header p { font-size: 0.875rem; color: var(--muted-foreground); }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; }
.form-group input, .form-group select {
  width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 0.875rem; background: var(--background);
  transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px hsla(230,45%,20%,0.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ===== Testimonials ===== */
.testimonials-grid { display: grid; gap: 1.5rem; max-width: 76rem; margin: 0 auto; }
@media (min-width: 640px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(4, 1fr); } }
.testimonial-card { border-radius: 0.75rem; border: 1px solid var(--border); background: var(--card); padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; flex-direction: column; transition: box-shadow 0.2s; }
.testimonial-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.stars { display: flex; gap: 0.125rem; margin-bottom: 1rem; }
.stars svg { width: 1rem; height: 1rem; fill: var(--accent); color: var(--accent); }
.testimonial-card .quote { font-size: 0.875rem; color: var(--muted-foreground); flex: 1; margin-bottom: 1rem; }
.testimonial-card .author { font-weight: 600; font-size: 0.875rem; }

/* ===== Who Should Use ===== */
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 56rem; margin: 0 auto; }
@media (min-width: 640px) { .who-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .who-grid { grid-template-columns: repeat(6, 1fr); } }
.who-card { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; border-radius: 0.75rem; background: var(--card); border: 1px solid var(--border); padding: 1.5rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: box-shadow 0.2s; }
.who-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.who-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--trust-badge-bg); }
.who-icon svg { width: 1.5rem; height: 1.5rem; color: var(--primary); }
.who-card span { font-size: 0.875rem; font-weight: 600; }

/* ===== Benefits ===== */
.benefits-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 48rem; margin: 0 auto; }
.benefit-pill { display: flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--card); padding: 0.75rem 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.benefit-pill svg { width: 1.25rem; height: 1.25rem; color: var(--primary); flex-shrink: 0; }
.benefit-pill span { font-weight: 500; font-size: 0.875rem; }

/* ===== Spectacles ===== */
.spectacles-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: hsla(320,50%,35%,0.1); color: var(--accent);
  padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem;
}
.specs-grid { display: grid; gap: 1.5rem; margin-bottom: 3.5rem; }
@media (min-width: 640px) { .specs-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .specs-grid { grid-template-columns: repeat(3, 1fr); } }
.spec-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; transition: all 0.3s; }
.spec-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-color: hsla(230,45%,20%,0.3); }
.spec-card-img { height: 12rem; overflow: hidden; background: var(--muted); }
.spec-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.spec-card:hover .spec-card-img img { transform: scale(1.05); }
.spec-card-body { padding: 1.5rem; }
.spec-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.spec-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; background: hsla(230,45%,20%,0.1); display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.spec-card:hover .spec-icon { background: hsla(230,45%,20%,0.2); }
.spec-icon svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }
.spec-card h3 { font-size: 1.125rem; font-weight: 700; }
.spec-card .desc { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 0.75rem; }
.spec-card .price { font-size: 0.875rem; font-weight: 600; color: var(--accent); }
.brands-box { background: var(--muted); border-radius: 1rem; padding: 2rem; margin-bottom: 3.5rem; text-align: center; }
.brands-box h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1.5rem; }
.brands-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.brand-tag { background: var(--card); border: 1px solid var(--border); padding: 0.5rem 1.25rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; transition: border-color 0.2s; }
.brand-tag:hover { border-color: hsla(230,45%,20%,0.4); }
.usp-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .usp-grid { grid-template-columns: repeat(3, 1fr); } }
.usp-card { display: flex; align-items: start; gap: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.25rem; }
.usp-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: hsla(320,50%,35%,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.usp-icon svg { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.usp-card h4 { font-weight: 600; margin-bottom: 0.25rem; }
.usp-card p { font-size: 0.875rem; color: var(--muted-foreground); }

/* ===== FAQ ===== */
.faq-list { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { border-radius: 0.75rem; border: 1px solid var(--border); background: var(--card); padding: 0 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1rem 0; background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 600; text-align: left; color: var(--foreground);
}
.faq-question svg { width: 1.25rem; height: 1.25rem; transition: transform 0.2s; flex-shrink: 0; }
.faq-item.active .faq-question svg { transform: rotate(180deg); }
.faq-answer { display: none; padding-bottom: 1rem; color: var(--muted-foreground); font-size: 0.9375rem; }
.faq-item.active .faq-answer { display: block; }

/* ===== Final CTA ===== */
.final-cta { padding: 4rem 0; background: var(--hero-gradient); color: var(--primary-foreground); text-align: center; }
@media (min-width: 768px) { .final-cta { padding: 6rem 0; } }
.final-cta h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 768px) { .final-cta h2 { font-size: 2.25rem; } }
.final-cta .sub { font-size: 1.25rem; opacity: 0.9; margin-bottom: 2rem; }
.final-cta .btn { margin-bottom: 3rem; }
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.trust-badge { display: flex; align-items: center; gap: 0.5rem; background: hsla(0,0%,100%,0.1); padding: 0.625rem 1.25rem; border-radius: 9999px; backdrop-filter: blur(4px); }
.trust-badge svg { width: 1.25rem; height: 1.25rem; }
.trust-badge span { font-size: 0.875rem; font-weight: 500; }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--border); background: var(--card); }
.footer-grid { display: grid; gap: 2rem; padding: 3rem 0; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .footer-grid { grid-template-columns: repeat(6, 1fr); } }
.footer-col h3 { font-weight: 700; margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col ul a { font-size: 0.875rem; color: var(--muted-foreground); transition: color 0.2s; }
.footer-col ul a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border); padding: 1.5rem 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; } }
.footer-bottom-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }
.footer-bottom-links a { display: flex; align-items: center; gap: 0.25rem; transition: color 0.2s; }
.footer-bottom-links a:hover { color: var(--primary); }
.footer-copyright { font-size: 0.875rem; color: var(--muted-foreground); }

/* ===== Hero lg breakpoint ===== */
@media (min-width: 1024px) { .hero .container { padding-top: 10rem; padding-bottom: 10rem; } }

/* ===== Team Section ===== */
.team-subtitle { text-align: center; color: var(--muted-foreground); max-width: 42rem; margin: 0 auto 3rem; }
.team-subsection-title { font-size: 1.25rem; font-weight: 600; text-align: center; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .team-subsection-title { font-size: 1.5rem; } }
.team-grid { display: grid; gap: 1.5rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 640px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-grid-mb { margin-bottom: 3rem; }
.team-card { background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; transition: box-shadow 0.2s; }
.team-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.team-avatar { width: 5rem; height: 5rem; border-radius: 9999px; background: hsla(230,45%,20%,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.team-card-icon { display: flex; align-items: center; gap: 0.375rem; color: var(--primary); }
.team-card-icon svg { width: 1.25rem; height: 1.25rem; }
.team-name { font-weight: 700; font-size: 1.125rem; }
.team-role { font-size: 0.875rem; font-weight: 600; color: var(--primary); }
.team-specialty { font-size: 0.875rem; color: var(--muted-foreground); }
.team-exp { font-size: 0.75rem; color: var(--muted-foreground); }

/* ===== Sticky Appointment Panel ===== */
.sticky-panel-wrap {
  position: fixed; right: 1rem; top: 50%; transform: translateY(-50%);
  z-index: 50; display: none; width: 280px;
}
@media (min-width: 1024px) { .sticky-panel-wrap { display: block; } }
.sticky-panel {
  border-radius: 1rem; border: 2px solid hsla(230,45%,20%,0.3);
  background: var(--card); padding: 1.25rem;
  box-shadow: 0 25px 50px rgba(0,0,0,0.15); position: relative;
}
.sticky-panel-close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: none; border: none; cursor: pointer; padding: 0.25rem; border-radius: 9999px;
}
.sticky-panel-close:hover { background: var(--muted); }
.sticky-panel-close svg { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.sticky-panel-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.sticky-panel-icon {
  width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
  background: var(--hero-gradient); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sticky-panel-icon svg { width: 1rem; height: 1rem; color: var(--primary-foreground); }
.sticky-panel-title { font-size: 0.875rem; font-weight: 700; }
.sticky-panel-sub { font-size: 0.6875rem; color: var(--muted-foreground); }
.sticky-panel .form-group { margin-bottom: 0.625rem; }
.sticky-panel .form-group label { font-size: 0.75rem; }
.sticky-panel .form-group input { height: 2rem; font-size: 0.875rem; padding: 0.25rem 0.5rem; }
/* Collapsed tab */
.sticky-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 50; display: none;
}
@media (min-width: 1024px) { .sticky-tab { display: block; } }
.sticky-tab-btn {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 1rem 0.5rem; border-radius: 0.75rem 0 0 0.75rem;
  background: var(--cta-gradient); color: var(--accent-foreground);
  font-weight: 700; font-size: 0.875rem;
  writing-mode: vertical-rl; text-orientation: mixed;
  border: none; cursor: pointer;
  box-shadow: -4px 0 14px rgba(0,0,0,0.2); transition: box-shadow 0.2s; font-family: inherit;
}
.sticky-tab-btn:hover { box-shadow: -6px 0 20px rgba(0,0,0,0.25); }
.sticky-tab-btn svg { width: 1rem; height: 1rem; transform: rotate(90deg); margin-bottom: 0.25rem; }

/* ===== Mobile Nav Accordion ===== */
.mobile-nav-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 0.625rem 0.75rem; font: inherit; font-size: 0.875rem; font-weight: 600;
  background: none; border: none; cursor: pointer; border-radius: 0.375rem; text-align: left;
  color: var(--foreground);
}
.mobile-nav-toggle:hover { background: var(--muted); }
.mobile-nav-toggle svg { width: 1rem; height: 1rem; transition: transform 0.2s; flex-shrink: 0; }
.mobile-nav-toggle.open svg { transform: rotate(180deg); }
.mobile-nav-section { display: none; padding-left: 0.75rem; padding-bottom: 0.5rem; }
.mobile-nav-section.open { display: block; }
.mobile-nav-section a { padding-left: 1rem; }

/* ===== Footer Bottom Fix ===== */
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom-inner {
  padding: 1.5rem 0; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; gap: 1rem;
}
@media (min-width: 768px) { .footer-bottom-inner { flex-direction: row; } }
.footer-bottom-inner img { background: transparent; mix-blend-mode: multiply; }