/* ── Base & Utilities ── */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

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

/* ── Scroll Reveal ── */
.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(32px);
    }
    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Navigation ── */
.nav { transition: box-shadow 0.3s ease; }

/* ── Hero ── */
.hero { position: relative; }

.hero-shape {
    animation: float 6s ease-in-out infinite;
}

.hero-shape--1 { animation-delay: 0s; }
.hero-shape--2 { animation-delay: -2s; }
.hero-shape--3 { animation-delay: -1s; animation-duration: 4s; }
.hero-shape--4 { animation-delay: -3s; animation-duration: 5s; }
.hero-shape--5 { animation-delay: -2.5s; animation-duration: 3s; }

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

/* ── Scroll Indicator ── */
.scroll-indicator { display: block; }

.scroll-dot {
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.4; }
}

/* ── Service Cards ── */
.service-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 2rem;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px -20px rgba(13, 148, 136, 0.15);
    border-color: #99f6e4;
}

/* ── Badges ── */
.badge-teal {
    display: inline-block;
    background: #ccfbf1;
    color: #0d9488;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4em 1em;
    border-radius: 9999px;
}

.badge-teal-outline {
    display: inline-block;
    background: transparent;
    color: #5eead4;
    border: 1px solid rgba(94, 234, 212, 0.3);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4em 1em;
    border-radius: 9999px;
}

.badge-white {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #f0fdfa;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4em 1em;
    border-radius: 9999px;
}

/* ── CTA Buttons ── */
.cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── About Shapes ── */
.about-shape { animation: pulse-slow 8s ease-in-out infinite; }
.about-shape--2 { animation-delay: -4s; }

@keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* ── Patient Info Shapes ── */
.patient-shape { animation: float 7s ease-in-out infinite; }
.patient-shape--2 { animation-delay: -3s; animation-duration: 5s; }
.patient-shape--3 { animation-delay: -1s; animation-duration: 4s; }
.patient-shape--4 { animation-delay: -2s; animation-duration: 6s; }

/* ── Location Shapes ── */
.location-shape { transition: transform 0.5s ease; }

/* ── CTA Shapes ── */
.cta-shape { animation: pulse-slow 9s ease-in-out infinite; }
.cta-shape--2 { animation-delay: -4.5s; }
.cta-shape--3 { animation-delay: -2s; animation-duration: 4s; }
.cta-shape--4 { animation-delay: -1s; animation-duration: 3s; }

/* ── Mobile Menu ── */
#mobileMenu {
    animation: slideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Success Message ── */
.success-message {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .nav { height: 4.5rem; }
    .hero { min-height: 100vh; }
}