@media (max-width: 575.98px) {
    html,
    body {
        min-width: 0 !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    body[data-page="index"] .navbar-custom {
        left: 0 !important;
        padding-inline: 0 !important;
        right: 0 !important;
        width: 100vw !important;
    }

    body[data-page="index"] .navbar-custom .container {
        margin-inline: auto !important;
        max-width: calc(100vw - 1.5rem) !important;
        min-width: 0 !important;
        padding: 0.42rem 0.5rem !important;
        width: calc(100vw - 1.5rem) !important;
    }

    body[data-page="index"] .brand {
        flex: 1 1 auto !important;
        max-width: calc(100% - 3.25rem) !important;
        min-width: 0 !important;
    }

    body[data-page="index"] .btn-menu {
        border-radius: 999px !important;
        flex: 0 0 44px !important;
        margin-left: auto !important;
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
        width: 44px !important;
    }

    body[data-page="index"] .btn-menu span {
        display: none !important;
    }

    body[data-page="index"] .homepage-shell,
    body[data-page="index"] .home-hero,
    body[data-page="index"] .homepage-section,
    body[data-page="index"] .site-footer {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100vw !important;
    }

    body[data-page="index"] .home-hero {
        background-color: #071b30 !important;
        background-image:
            linear-gradient(180deg, rgba(7, 27, 48, 0) 0%, rgba(7, 27, 48, 0.08) 34%, rgba(7, 27, 48, 0.88) 56%, rgba(7, 27, 48, 1) 100%),
            url("../img/home-hero-clinic-front.jpg") !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-size: auto 23.5rem !important;
        min-height: 0 !important;
        padding: 5.35rem 0 1rem !important;
    }

    body[data-page="index"] .home-hero .container,
    body[data-page="index"] .homepage-section .container,
    body[data-page="index"] .site-footer .container {
        margin-inline: auto !important;
        max-width: min(22.5rem, calc(100vw - 2.75rem)) !important;
        min-width: 0 !important;
        padding-inline: 0 !important;
        width: min(22.5rem, calc(100vw - 2.75rem)) !important;
    }

    body[data-page="index"] .hero-content,
    body[data-page="index"] .track-panel,
    body[data-page="index"] .glass-panel,
    body[data-page="index"] .info-card,
    body[data-page="index"] .contact-card,
    body[data-page="index"] .map-frame {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body[data-page="index"] .hero-content {
        background: rgba(5, 18, 34, 0.78) !important;
        border-color: rgba(184, 223, 255, 0.24) !important;
        margin-top: 10.8rem !important;
        padding: 0.9rem !important;
        backdrop-filter: blur(18px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
    }

    body[data-page="index"] .hero-kicker {
        font-size: 0.64rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.4rem !important;
    }

    body[data-page="index"] .hero-content h1 {
        font-size: clamp(1.58rem, 7.8vw, 1.95rem) !important;
        line-height: 0.98 !important;
        max-width: 9.4ch !important;
    }

    body[data-page="index"] .hero-system-copy {
        font-size: 0.76rem !important;
        line-height: 1.34 !important;
        margin-top: 0.48rem !important;
    }

    body[data-page="index"] .hero-actions {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100% !important;
        margin-top: 0.7rem !important;
        width: 100% !important;
    }

    body[data-page="index"] .hero-actions .btn,
    body[data-page="index"] #trackTicketForm .form-control,
    body[data-page="index"] #trackTicketForm .btn,
    body[data-page="index"] .contact-action {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body[data-page="index"] .hero-actions .btn {
        min-height: 43px !important;
    }

    body[data-page="index"] .hero-mini-info {
        display: none !important;
        width: 100% !important;
    }

    body[data-page="index"] .hero-mini-info span {
        min-width: 0 !important;
    }

    body[data-page="index"] #calendar,
    body[data-page="index"] #calendar .fc,
    body[data-page="index"] #calendar .fc-view-harness,
    body[data-page="index"] #calendar .fc-scrollgrid,
    body[data-page="index"] #calendar table,
    body[data-page="index"] #calendar th,
    body[data-page="index"] #calendar td,
    body[data-page="index"] #calendar .fc-daygrid-body,
    body[data-page="index"] #calendar .fc-daygrid-body table,
    body[data-page="index"] #calendar .fc-col-header,
    body[data-page="index"] #calendar .fc-col-header table {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body[data-page="index"] #calendar {
        overflow: hidden !important;
        padding: 0.7rem !important;
    }

    body[data-page="index"] #calendar .fc-toolbar {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    body[data-page="index"] #calendar .fc-toolbar-title {
        color: #071b30 !important;
        opacity: 1 !important;
    }

    body[data-page="index"] #calendar .fc-button {
        background: rgba(13, 138, 255, 0.1) !important;
        border-color: rgba(13, 138, 255, 0.18) !important;
        color: #0757bc !important;
        min-height: 34px !important;
        min-width: 34px !important;
    }

    body[data-page="index"] #calendar .fc-button:hover,
    body[data-page="index"] #calendar .fc-button:focus-visible {
        background: #0d8aff !important;
        color: #fff !important;
    }

    body[data-page="index"] #calendar .fc-daygrid-day-frame {
        min-height: 31px !important;
    }

    body[data-page="index"] .chart-container,
    body[data-page="index"] .chart-container canvas {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body[data-page="index"] .services-slider,
    body[data-page="index"] .about-gallery {
        contain: layout paint !important;
        margin-inline: 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        padding-inline: 0 !important;
        width: 100% !important;
    }

    body[data-page="index"] .services-slider {
        grid-auto-columns: minmax(88%, 88%) !important;
    }

    body[data-page="index"] .about-gallery {
        grid-auto-columns: minmax(88%, 88%) !important;
    }

    [data-bs-theme="dark"] body[data-page="index"] .homepage-section {
        background: #061626 !important;
    }

    [data-bs-theme="dark"] body[data-page="index"] #calendar {
        background: rgba(248, 252, 255, 0.94) !important;
        border-color: rgba(147, 197, 253, 0.32) !important;
    }

    [data-bs-theme="dark"] body[data-page="index"] #calendar .fc-toolbar-title {
        color: #071b30 !important;
        text-shadow: none !important;
    }

    [data-bs-theme="dark"] body[data-page="index"] #calendar .fc-button {
        background: #dceeff !important;
        border-color: #b8dcff !important;
        color: #0757bc !important;
        opacity: 1 !important;
    }

    [data-bs-theme="dark"] body[data-page="index"] #calendar .fc-daygrid-day {
        background: #f9fbff !important;
    }

    [data-bs-theme="dark"] body[data-page="index"] #calendar .fc-daygrid-day-number {
        color: #071b30 !important;
    }

    body[data-page="index"] .mobile-scroll-hint {
        align-items: center !important;
        background: rgba(13, 138, 255, 0.1) !important;
        border: 1px solid rgba(13, 138, 255, 0.18) !important;
        border-radius: 999px !important;
        box-shadow: 0 10px 26px rgba(13, 138, 255, 0.12) !important;
        color: #0964d9 !important;
        display: inline-flex !important;
        gap: 0.45rem !important;
        isolation: isolate !important;
        margin-top: 0.65rem !important;
        overflow: hidden !important;
        padding: 0.42rem 0.72rem !important;
        position: relative !important;
    }

    body[data-page="index"] .mobile-scroll-hint::after {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent) !important;
        content: "" !important;
        inset: 0 auto 0 -65% !important;
        position: absolute !important;
        transform: skewX(-18deg) !important;
        width: 55% !important;
        z-index: -1 !important;
        animation: homeHintSheen 2.8s ease-in-out infinite !important;
    }

    body[data-page="index"] .mobile-scroll-hint i {
        animation: homeSwipeNudge 1.45s ease-in-out infinite !important;
    }

    body[data-page="index"] .services-slider,
    body[data-page="index"] .about-gallery {
        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
    }

    body[data-page="index"] .services-slider::-webkit-scrollbar,
    body[data-page="index"] .about-gallery::-webkit-scrollbar {
        display: none !important;
    }

    body[data-page="index"] .service-slide,
    body[data-page="index"] .about-gallery img {
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
    }

    body[data-page="index"] .about-gallery img {
        box-shadow: 0 16px 34px rgba(10, 58, 104, 0.18) !important;
        transition: filter 180ms ease, transform 180ms ease !important;
    }

    body[data-page="index"] .about-gallery img:active {
        filter: saturate(1.08) contrast(1.03) !important;
        transform: scale(0.985) !important;
    }

    body[data-page="index"] [data-infinite-slider].is-loop-ready {
        overscroll-behavior-inline: contain !important;
    }

    body[data-page="index"] .footer-links {
        contain: layout paint !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.45rem !important;
        justify-content: flex-start !important;
        margin-inline: calc((100vw - min(22.5rem, calc(100vw - 2.75rem))) / -2) !important;
        max-width: none !important;
        overflow-x: auto !important;
        padding: 0.2rem max(1.375rem, calc((100vw - 22.5rem) / 2 + 1.375rem)) 0.55rem !important;
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
        width: 100vw !important;
    }

    body[data-page="index"] .footer-links::-webkit-scrollbar {
        display: none !important;
    }

    body[data-page="index"] .footer-links a {
        flex: 0 0 auto !important;
        scroll-snap-align: none !important;
        white-space: nowrap !important;
    }

    [data-bs-theme="dark"] body[data-page="index"] .mobile-scroll-hint {
        background: rgba(96, 165, 250, 0.14) !important;
        border-color: rgba(147, 197, 253, 0.26) !important;
        color: #b8dcff !important;
    }
}

@keyframes homeSwipeNudge {
    0%, 100% {
        transform: translateX(-2px);
    }

    50% {
        transform: translateX(5px);
    }
}

@keyframes homeHintSheen {
    0%, 42% {
        left: -65%;
    }

    72%, 100% {
        left: 115%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="index"] .mobile-scroll-hint,
    body[data-page="index"] .mobile-scroll-hint::after,
    body[data-page="index"] .mobile-scroll-hint i,
    body[data-page="index"] .about-gallery img {
        animation: none !important;
        transition: none !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    body[data-page="index"] .home-hero {
        background-image:
            linear-gradient(90deg, rgba(5, 18, 34, 0.88) 0%, rgba(5, 18, 34, 0.54) 48%, rgba(5, 18, 34, 0.18) 100%),
            url("../img/home-hero-clinic-front.jpg") !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        min-height: 0 !important;
    }

    body[data-page="index"] .hero-content,
    body[data-page="index"] .track-panel {
        max-width: 36rem !important;
    }

    [data-bs-theme="dark"] body[data-page="index"] #calendar {
        background: rgba(248, 252, 255, 0.94) !important;
    }

    [data-bs-theme="dark"] body[data-page="index"] #calendar .fc-toolbar-title,
    [data-bs-theme="dark"] body[data-page="index"] #calendar .fc-daygrid-day-number {
        color: #071b30 !important;
    }
}