/* ==========================================================================
   hoanmy.health — Design System
   ==========================================================================
   Custom styles for the hoanmy.health Vietnamese healthcare network website.
   Built on top of Bootstrap 5.3 (loaded via CDN).

   Design rationale:
   - Orange primary CTAs: orange signals trust for Vietnamese users (n=124 study)
   - Blue brand color: conveys calm professionalism, lowers heart rate
   - Teal accents: associated with health and healing
   - Warm off-whites: stark white symbolizes mourning in Vietnamese culture
   - High information density: collectivist-culture UX expectations
   - Mobile-first: 84% smartphone penetration, mid-range Android devices
   - WCAG 2.1 AA compliant: contrast ratios, focus styles, reduced motion
   - 44px minimum touch targets for mobile usability
   ========================================================================== */


/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
    /* --- Brand Colors --- */
    --clr-primary:        #1565C0;
    --clr-primary-dark:   #0D47A1;
    --clr-primary-soft:   #E8F0FE;

    /* --- Teal (Health / Healing) --- */
    --clr-teal:           #00897B;
    --clr-teal-dark:      #00796B;
    --clr-teal-soft:      #E0F2F1;

    /* --- Orange (Trust / CTA) --- */
    --clr-orange:         #FF6B35;
    --clr-orange-dark:    #E55A2B;
    --clr-orange-soft:    #FFF3ED;
    --clr-orange-glow:    rgba(255, 107, 53, 0.2);

    /* --- Sage (Nature / Wellness) --- */
    --clr-sage:           #7C9E7E;
    --clr-sage-soft:      #F1F8F2;

    /* --- Semantic Colors --- */
    --clr-success:        #2E7D32;
    --clr-success-soft:   #E8F5E9;
    --clr-warning:        #EF6C00;
    --clr-warning-soft:   #FFF3E0;
    --clr-purple:         #5C6BC0;
    --clr-purple-soft:    #E8EAF6;
    --clr-info:           #0288D1;
    --clr-info-soft:      #E1F5FE;

    /* --- Text --- */
    --clr-text:           #37474F;
    --clr-heading:        #263238;
    --clr-muted:          #78909C;

    /* --- Surfaces & Borders --- */
    --clr-border:         #E5E7EB;
    --clr-bg:             #FAFBFC;
    --clr-light-bg:       #F5F7FA;
    --clr-sage-bg:        #F7FAF7;
    --clr-footer:         #1B2631;

    /* --- Shadows --- */
    --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.04),
                    0 2px 8px rgba(0, 0, 0, 0.03);
    --shadow-md:    0 2px 8px rgba(0, 0, 0, 0.06),
                    0 8px 20px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08),
                    0 12px 28px rgba(0, 0, 0, 0.06);

    /* --- Layout --- */
    --radius:       16px;
    --radius-sm:    12px;
    --radius-xs:    8px;
    --transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   2. Base / Typography
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
                 'Apple Color Emoji', 'Segoe UI Emoji';
    color: var(--clr-text);
    line-height: 1.75;
    background-color: var(--clr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    color: var(--clr-heading);
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2.1rem;
}

h3 {
    font-size: 1.45rem;
    font-weight: 600;
}

h5 {
    font-size: 1.05rem;
    font-weight: 600;
}

h6 {
    font-size: 0.95rem;
    font-weight: 600;
}

.lead {
    font-size: 1.08rem;
    color: #5A6B7F;
    font-weight: 400;
    line-height: 1.85;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

p, li {
    font-size: 1rem;
    line-height: 1.75;
}

.small, small {
    font-size: 0.875rem;
    line-height: 1.65;
}


/* ==========================================================================
   3. Accessibility
   ========================================================================== */

/* --- Skip to Content Link --- */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background-color: var(--clr-primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: top var(--transition);
}

.skip-to-content:focus {
    top: 0;
    color: #fff;
}

/* --- Focus-Visible Outlines --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--clr-teal);
    outline-offset: 2px;
}

/* --- Minimum Touch Targets (44px) --- */
.btn,
.nav-link,
a.social-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}


/* ==========================================================================
   4. Section Headers
   ========================================================================== */

.section-header {
    position: relative;
    padding-bottom: 1rem;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-sage), var(--clr-teal));
    border-radius: 2px;
}


/* ==========================================================================
   5. Hero Section
   ========================================================================== */

.bg-gradient-hero {
    background: linear-gradient(135deg, #1565C0 0%, #0288D1 40%, #00897B 100%);
    padding-top: 8rem !important; /* offset for fixed navbar above py-10 */
}

.hero-section {
    position: relative;
    overflow: hidden;
}

/* Decorative radial gradient — top-right light bloom */
.hero-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Decorative radial gradient — bottom-left light bloom */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -15%;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.hero-title {
    font-size: 2.75rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hero-text {
    font-size: 1.12rem;
    opacity: 0.9;
    line-height: 1.85;
}


/* ==========================================================================
   6. Trust Bar
   ========================================================================== */

.trust-bar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.trust-stat {
    padding: 0.5rem 0;
}

.trust-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--clr-primary);
    letter-spacing: -0.02em;
}

.trust-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--clr-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trust-divider {
    display: none;
}


/* ==========================================================================
   7. Navbar
   ========================================================================== */

.navbar-health {
    background-color: rgba(21, 101, 192, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color var(--transition),
                box-shadow var(--transition);
}

.navbar-health.navbar-scrolled {
    background-color: rgba(21, 101, 192, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Hamburger toggler visibility */
.navbar-health .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
    padding: 0.35rem 0.6rem;
}

.navbar-health .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.navbar-health .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-health .navbar-brand {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.navbar-health .nav-link {
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    transition: opacity var(--transition);
}

.navbar-health .nav-link:hover {
    opacity: 0.85;
}


/* ==========================================================================
   8. Language Switcher
   ========================================================================== */

.language-switcher .btn {
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-xs);
    background: transparent;
    transition: all var(--transition);
}

.language-switcher .btn:hover,
.language-switcher .btn.active {
    background-color: #fff;
    color: var(--clr-primary);
    border-color: #fff;
}


/* ==========================================================================
   9. Cards
   ========================================================================== */

.card {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background-color: #fff;
    transition: transform var(--transition),
                box-shadow var(--transition),
                border-color var(--transition);
}

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

.card-body {
    padding: 1.75rem;
}

/* --- Card Accent Borders --- */
.card.border-primary {
    border: 1px solid var(--clr-primary-soft);
    border-left: 4px solid var(--clr-primary);
    background: linear-gradient(135deg, #fff 0%, var(--clr-primary-soft) 100%);
}

.card.border-teal {
    border: 1px solid var(--clr-teal-soft);
    border-left: 4px solid var(--clr-teal);
    background: linear-gradient(135deg, #fff 0%, var(--clr-teal-soft) 100%);
}

.card.border-success {
    border: 1px solid var(--clr-success-soft);
    border-left: 4px solid var(--clr-success);
    background: linear-gradient(135deg, #fff 0%, var(--clr-success-soft) 100%);
}

.card.border-warning {
    border: 1px solid var(--clr-warning-soft);
    border-left: 4px solid var(--clr-warning);
    background: linear-gradient(135deg, #fff 0%, var(--clr-warning-soft) 100%);
}

.card.border-info {
    border: 1px solid var(--clr-info-soft);
    border-left: 4px solid var(--clr-info);
    background: linear-gradient(135deg, #fff 0%, var(--clr-info-soft) 100%);
}

.card.border-purple {
    border: 1px solid var(--clr-purple-soft);
    border-left: 4px solid var(--clr-purple);
    background: linear-gradient(135deg, #fff 0%, var(--clr-purple-soft) 100%);
}

.card.border-orange {
    border: 1px solid var(--clr-orange-soft);
    border-left: 4px solid var(--clr-orange);
    background: linear-gradient(135deg, #fff 0%, var(--clr-orange-soft) 100%);
}

.card.border-sage {
    border: 1px solid var(--clr-sage-soft);
    border-left: 4px solid var(--clr-sage);
    background: linear-gradient(135deg, #fff 0%, var(--clr-sage-soft) 100%);
}


/* ==========================================================================
   10. Icon Stacks
   ========================================================================== */

.icon-stack {
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-stack-lg {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.15rem;
}

.icon-stack-sm {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.85rem;
}

/* --- Icon Stack Background Utilities --- */
.icon-stack.bg-primary {
    background-color: var(--clr-primary-soft) !important;
    color: var(--clr-primary);
}

.icon-stack.bg-teal {
    background-color: var(--clr-teal-soft) !important;
    color: var(--clr-teal);
}

.icon-stack.bg-success {
    background-color: var(--clr-success-soft) !important;
    color: var(--clr-success);
}

.icon-stack.bg-warning {
    background-color: var(--clr-warning-soft) !important;
    color: var(--clr-warning);
}

.icon-stack.bg-info {
    background-color: var(--clr-info-soft) !important;
    color: var(--clr-info);
}

.icon-stack.bg-purple {
    background-color: var(--clr-purple-soft) !important;
    color: var(--clr-purple);
}

.icon-stack.bg-orange {
    background-color: var(--clr-orange-soft) !important;
    color: var(--clr-orange);
}

.icon-stack.bg-sage {
    background-color: var(--clr-sage-soft) !important;
    color: var(--clr-sage);
}


/* ==========================================================================
   11. Sections
   ========================================================================== */

.bg-light {
    background-color: var(--clr-light-bg) !important;
}

.bg-sage-light {
    background-color: var(--clr-sage-bg) !important;
}

section {
    position: relative;
}

.py-10 {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

.svg-border-rounded svg {
    height: 2.5rem;
}


/* ==========================================================================
   12. About Section
   ========================================================================== */

.about-section {
    background: linear-gradient(180deg, #fff 0%, var(--clr-light-bg) 100%);
}

.about-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.about-timeline {
    padding-left: 2rem;
    border-left: 2px solid var(--clr-teal-soft);
}

.about-timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.about-timeline-item::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0.35rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--clr-teal);
    border: 2px solid #fff;
    transform: translateX(-50%);
    box-shadow: 0 0 0 3px var(--clr-teal-soft);
}


/* ==========================================================================
   13. Testimonial Section
   ========================================================================== */

.testimonial-section {
    background-color: var(--clr-sage-bg);
}

.testimonial-card {
    background-color: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--clr-border);
    transition: transform var(--transition),
                box-shadow var(--transition);
    position: relative;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* Decorative curly quote */
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 0.75rem;
    left: 1.25rem;
    font-size: 4rem;
    line-height: 1;
    color: var(--clr-orange);
    opacity: 0.3;
    font-family: Georgia, 'Times New Roman', serif;
    pointer-events: none;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-primary-soft), var(--clr-teal-soft));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--clr-primary);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.testimonial-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--clr-heading);
}

.testimonial-role {
    font-size: 0.8rem;
    color: var(--clr-muted);
}


/* ==========================================================================
   14. Contact Section
   ========================================================================== */

.contact-section {
    background: linear-gradient(135deg, #1565C0 0%, #0288D1 40%, #00897B 100%);
}

.contact-form {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.contact-form .form-control {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-xs);
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.contact-form .form-control:focus {
    background-color: #fff;
    border-color: var(--clr-orange);
    box-shadow: 0 0 0 0.2rem var(--clr-orange-glow);
}

.contact-form label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 0.88rem;
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}


/* ==========================================================================
   15. Buttons
   ========================================================================== */

/* --- Teal Button --- */
.btn-teal {
    background-color: var(--clr-teal);
    border-color: var(--clr-teal);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: var(--radius-xs);
    box-shadow: 0 2px 8px rgba(0, 137, 123, 0.25);
    transition: all var(--transition);
}

.btn-teal:hover,
.btn-teal:focus {
    background-color: var(--clr-teal-dark);
    border-color: var(--clr-teal-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 137, 123, 0.35);
}

/* --- Orange Button (Primary CTA — trust signal for Vietnamese users) --- */
.btn-orange {
    background-color: var(--clr-orange);
    border-color: var(--clr-orange);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: var(--radius-xs);
    box-shadow: 0 2px 8px var(--clr-orange-glow);
    transition: all var(--transition);
}

.btn-orange:hover,
.btn-orange:focus {
    background-color: var(--clr-orange-dark);
    border-color: var(--clr-orange-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
}

/* --- Orange Outline Button --- */
.btn-orange-outline {
    background-color: transparent;
    border: 2px solid var(--clr-orange);
    color: var(--clr-orange);
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: var(--radius-xs);
    transition: all var(--transition);
}

.btn-orange-outline:hover,
.btn-orange-outline:focus {
    background-color: var(--clr-orange);
    border-color: var(--clr-orange);
    color: #fff;
}


/* ==========================================================================
   16. Insurance Badge
   ========================================================================== */

.insurance-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    background-color: var(--clr-primary-soft);
    color: var(--clr-primary);
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(21, 101, 192, 0.1);
}


/* ==========================================================================
   17. Source Citations
   ========================================================================== */

.source-citation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    background-color: var(--clr-primary-soft);
    color: var(--clr-primary);
    vertical-align: super;
    text-decoration: none;
    transition: all var(--transition);
    line-height: 1;
}

.source-citation:hover {
    background-color: var(--clr-primary);
    color: #fff;
}

.references-list {
    font-size: 0.82rem;
    color: var(--clr-muted);
    border-top: 1px solid var(--clr-border);
    margin-top: 1.5rem;
    padding-top: 1rem;
}


/* ==========================================================================
   18. Last Updated Badge
   ========================================================================== */

.last-updated {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--clr-muted);
    font-weight: 500;
    background-color: var(--clr-light-bg);
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--clr-border);
}


/* ==========================================================================
   19. Medical Disclaimer
   ========================================================================== */

.medical-disclaimer {
    background-color: var(--clr-light-bg);
    border-top: 1px solid var(--clr-border);
    padding: 2rem 0;
}

.medical-disclaimer p {
    font-size: 0.82rem;
    color: var(--clr-muted);
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.medical-disclaimer .disclaimer-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--clr-text);
}


/* ==========================================================================
   20. Cookie Consent
   ========================================================================== */

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: var(--clr-footer);
    color: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    font-size: 0.875rem;
}

.cookie-consent.show {
    display: flex;
    flex-wrap: wrap;
}

.cookie-consent-btn {
    background-color: var(--clr-orange);
    color: #fff;
    border: none;
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    transition: background-color var(--transition);
}

.cookie-consent-btn:hover {
    background-color: var(--clr-orange-dark);
}

.cookie-consent-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    transition: color var(--transition);
}

.cookie-consent-link:hover {
    color: #fff;
}


/* ==========================================================================
   21. Footer
   ========================================================================== */

footer.bg-dark {
    background-color: var(--clr-footer) !important;
}

.footer-brand {
    font-size: 1.2rem;
    font-weight: 700;
}

.text-uppercase-expanded {
    font-weight: 600;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    text-transform: uppercase;
}

footer a.text-white-50:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}

footer hr {
    opacity: 0.08;
}


/* ==========================================================================
   22. Text Utilities
   ========================================================================== */

.text-muted {
    color: var(--clr-muted) !important;
}

.text-primary {
    color: var(--clr-primary) !important;
}


/* ==========================================================================
   23. Health Info
   ========================================================================== */

.health-info-item {
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition);
}

.health-info-item:hover {
    background-color: var(--clr-light-bg);
}

.health-info-item i {
    font-size: 1.1rem;
}


/* ==========================================================================
   24. Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .card:hover,
    .btn-teal:hover,
    .btn-orange:hover,
    .testimonial-card:hover {
        transform: none;
    }
}


/* ==========================================================================
   25. Responsive
   ========================================================================== */

/* --- Tablets (max-width: 991.98px) --- */
@media (max-width: 991.98px) {
    .hero-title {
        font-size: 2.1rem;
    }

    .hero-text {
        font-size: 1rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .py-10 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .trust-number {
        font-size: 1.5rem;
    }

    .trust-label {
        font-size: 0.72rem;
    }

    .testimonial-card {
        padding: 1.5rem;
    }

    .contact-form {
        padding: 1.5rem;
    }
}

/* --- Mobile (max-width: 575.98px) --- */
@media (max-width: 575.98px) {
    .hero-title {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    .card-body {
        padding: 1.25rem;
    }

    .trust-number {
        font-size: 1.35rem;
    }

    .py-10 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .lead {
        font-size: 0.95rem;
    }

    .testimonial-card {
        padding: 1.25rem;
    }

    .testimonial-card::before {
        font-size: 3rem;
        top: 0.5rem;
        left: 1rem;
    }

    .contact-form {
        padding: 1.25rem;
    }

    .cookie-consent {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
}

/* --- Trust Divider (visible on md+ screens) --- */
@media (min-width: 768px) {
    .trust-divider {
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 32px;
        width: 1px;
        background-color: var(--clr-border);
    }
}