/* ========================================
   H2O MULTISERVIZI - MOBILE HOMEPAGE V3
   "Aqua Luxury" — Premium Design 2026
   Viewport: 390px (Mobile First)
   ======================================== */

/* ========== HIDE ON DESKTOP ========== */
.mobile-home,
.mobile-menu {
    display: none !important;
}

/* ========== MOBILE-ONLY STYLES ========== */
@media (max-width: 767px) {

    /* Show mobile elements on mobile */
    .mobile-home {
        display: block !important;
    }

    .mobile-menu {
        display: flex !important;
    }

    /* ===== DESIGN TOKENS — PREMIUM ===== */
    :root {
        /* Premium Gradients */
        --m-gradient-hero: linear-gradient(165deg, #0A1F26 0%, #0E2832 35%, #132F3B 70%, #1A3A48 100%);
        --m-gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
        --m-gradient-accent: linear-gradient(135deg, #2AAFBB 0%, #1F8F99 50%, #166E77 100%);
        --m-gradient-gold: linear-gradient(135deg, #D4A574 0%, #B8956E 100%);
        --m-gradient-section: linear-gradient(180deg, #F8FBFC 0%, #EDF5F7 100%);

        /* Primary Teal — Refined */
        --m-teal-300: #6ED9E4;
        --m-teal-400: #4ECDD8;
        --m-teal-500: #2AAFBB;
        --m-teal-600: #1F8F99;
        --m-teal-700: #166E77;

        /* Premium Gold Accents */
        --m-gold-400: #E5C9A8;
        --m-gold-500: #D4A574;
        --m-gold-600: #B8956E;

        /* Neutrals — Deep & Rich */
        --m-dark: #0A1F26;
        --m-dark-soft: #132F3B;
        --m-dark-muted: #3D5A65;
        --m-gray-600: #4A6B78;
        --m-gray-500: #6B8895;
        --m-gray-400: #8FA8B3;
        --m-gray-300: #B8CCD4;
        --m-light: #F8FBFC;
        --m-white: #FFFFFF;

        /* Advanced Glassmorphism */
        --m-glass-dark: rgba(10, 31, 38, 0.85);
        --m-glass-light: rgba(255, 255, 255, 0.95);
        --m-glass-light-soft: rgba(255, 255, 255, 0.85);
        --m-glass-border-light: rgba(255, 255, 255, 0.25);
        --m-glass-border-dark: rgba(255, 255, 255, 0.1);
        --m-glass-blur: blur(24px);
        --m-glass-blur-strong: blur(40px);

        /* Premium Shadows */
        --m-shadow-xs: 0 1px 3px rgba(10, 31, 38, 0.08);
        --m-shadow-sm: 0 4px 12px rgba(10, 31, 38, 0.08);
        --m-shadow-md: 0 8px 24px rgba(10, 31, 38, 0.12);
        --m-shadow-lg: 0 16px 48px rgba(10, 31, 38, 0.16);
        --m-shadow-xl: 0 24px 64px rgba(10, 31, 38, 0.2);
        --m-shadow-glow: 0 0 40px rgba(42, 175, 187, 0.3);
        --m-shadow-glow-gold: 0 0 30px rgba(212, 165, 116, 0.25);
        --m-shadow-inner: inset 0 2px 4px rgba(10, 31, 38, 0.06);

        /* Spacing System */
        --m-space-2xs: 4px;
        --m-space-xs: 8px;
        --m-space-sm: 12px;
        --m-space-md: 16px;
        --m-space-lg: 24px;
        --m-space-xl: 32px;
        --m-space-2xl: 48px;
        --m-space-3xl: 64px;
        --m-space-4xl: 80px;

        /* Border Radius */
        --m-radius-xs: 8px;
        --m-radius-sm: 12px;
        --m-radius-md: 16px;
        --m-radius-lg: 24px;
        --m-radius-xl: 32px;
        --m-radius-full: 9999px;

        /* Premium Transitions */
        --m-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
        --m-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --m-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        --m-ease-elegant: cubic-bezier(0.23, 1, 0.32, 1);
        --m-duration-instant: 100ms;
        --m-duration-fast: 200ms;
        --m-duration-base: 350ms;
        --m-duration-slow: 500ms;
        --m-duration-slower: 700ms;
    }

    /* ===== HIDE DESKTOP ELEMENTS ===== */
    .header,
    .mobile-menu,
    .hero-curved,
    .section.section-alt,
    .section:not(.mobile-home *),
    .footer,
    .whatsapp-btn {
        display: none !important;
    }

    /* ===== GLOBAL RESETS ===== */
    body {
        background: var(--m-light);
        padding-bottom: 0;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* ===== MOBILE HOMEPAGE CONTAINER ===== */
    .mobile-home {
        display: block;
        min-height: 100vh;
        position: relative;
    }

    /* ========================================
       BLOCK 1: HERO — PREMIUM AURORA DESIGN
       ======================================== */
    .m-hero {
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 80px 28px 60px;
        text-align: center;
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, #0A1A20 0%, #0D2129 30%, #0F2832 60%, #112E38 100%);
    }

    /* Aurora Borealis Effect - Layer 1 */
    .m-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background:
            conic-gradient(from 180deg at 50% 50%,
                transparent 0deg,
                rgba(42, 175, 187, 0.15) 60deg,
                transparent 120deg,
                rgba(30, 58, 95, 0.12) 180deg,
                transparent 240deg,
                rgba(42, 175, 187, 0.1) 300deg,
                transparent 360deg);
        animation: m-auroraRotate 25s linear infinite;
        z-index: 0;
        opacity: 0.7;
    }

    /* Aurora Borealis Effect - Layer 2 */
    .m-hero::after {
        content: '';
        position: absolute;
        top: -30%;
        left: -30%;
        width: 160%;
        height: 160%;
        background:
            conic-gradient(from 90deg at 40% 60%,
                transparent 0deg,
                rgba(212, 165, 116, 0.08) 45deg,
                transparent 90deg,
                rgba(42, 175, 187, 0.12) 135deg,
                transparent 180deg,
                rgba(30, 58, 95, 0.1) 225deg,
                transparent 270deg,
                rgba(42, 175, 187, 0.08) 315deg,
                transparent 360deg);
        animation: m-auroraRotateReverse 35s linear infinite;
        z-index: 0;
        opacity: 0.6;
    }

    /* Aurora Rotation Keyframes */
    @keyframes m-auroraRotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes m-auroraRotateReverse {
        0% {
            transform: rotate(360deg);
        }

        100% {
            transform: rotate(0deg);
        }
    }

    /* Mesh Gradient Overlay */
    .m-hero__mesh {
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(ellipse 100% 80% at 20% 10%, rgba(42, 175, 187, 0.18) 0%, transparent 50%),
            radial-gradient(ellipse 80% 60% at 80% 90%, rgba(30, 58, 95, 0.15) 0%, transparent 45%),
            radial-gradient(ellipse 60% 50% at 50% 50%, rgba(42, 175, 187, 0.08) 0%, transparent 40%);
        animation: m-meshPulse 8s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes m-meshPulse {

        0%,
        100% {
            opacity: 0.8;
            transform: scale(1);
        }

        50% {
            opacity: 1;
            transform: scale(1.02);
        }
    }

    /* Subtle decorative elements with Animation */
    .m-hero__orb {
        position: absolute;
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
    }

    .m-hero__orb--1 {
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(42, 175, 187, 0.12) 0%, rgba(42, 175, 187, 0.04) 40%, transparent 70%);
        top: -150px;
        right: -150px;
        animation: m-orbFloat1 8s ease-in-out infinite;
    }

    .m-hero__orb--2 {
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(42, 175, 187, 0.10) 0%, rgba(42, 175, 187, 0.03) 40%, transparent 70%);
        bottom: 100px;
        left: -150px;
        animation: m-orbFloat2 10s ease-in-out infinite;
    }

    .m-hero__orb--3 {
        display: block;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(212, 165, 116, 0.08) 0%, transparent 60%);
        bottom: 200px;
        right: -50px;
        animation: m-orbFloat3 12s ease-in-out infinite;
    }

    /* Orb Float Animations */
    @keyframes m-orbFloat1 {

        0%,
        100% {
            transform: translate(0, 0) scale(1);
            opacity: 1;
        }

        25% {
            transform: translate(-20px, 30px) scale(1.05);
        }

        50% {
            transform: translate(-10px, 50px) scale(1.02);
            opacity: 0.8;
        }

        75% {
            transform: translate(15px, 25px) scale(1.08);
        }
    }

    @keyframes m-orbFloat2 {

        0%,
        100% {
            transform: translate(0, 0) scale(1);
            opacity: 1;
        }

        33% {
            transform: translate(25px, -20px) scale(1.06);
        }

        66% {
            transform: translate(15px, -40px) scale(0.95);
            opacity: 0.7;
        }
    }

    @keyframes m-orbFloat3 {

        0%,
        100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.8;
        }

        50% {
            transform: translate(-30px, -25px) scale(1.1);
            opacity: 1;
        }
    }

    .m-hero__content {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 340px;
    }

    /* Premium Badge — Minimal */
    .m-hero__badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: rgba(42, 175, 187, 0.1);
        border: 1px solid rgba(42, 175, 187, 0.2);
        border-radius: 100px;
        font-family: 'Inter', sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--m-teal-400);
        margin-bottom: 32px;
        animation: m-fadeInDown 0.6s ease 0.1s both;
    }

    .m-hero__badge i {
        font-size: 9px;
        color: var(--m-teal-400);
    }

    /* Logo — Larger & Centered */
    .m-hero__logo {
        width: 110px;
        height: auto;
        display: block;
        margin: 0 auto 28px;
        filter: drop-shadow(0 4px 24px rgba(42, 175, 187, 0.2));
        animation: m-fadeInUp 0.6s ease 0.2s both;
    }

    /* Title — Clean & Bold */
    .m-hero__title {
        font-family: 'Inter', sans-serif;
        font-size: 38px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: #FFFFFF;
        margin: 0 0 16px;
        animation: m-fadeInUp 0.6s ease 0.3s both;
    }

    .m-hero__title span {
        color: var(--m-teal-400);
    }

    /* Subtitle — Readable */
    .m-hero__subtitle {
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.55);
        margin: 0 auto 36px;
        max-width: 300px;
        animation: m-fadeInUp 0.6s ease 0.4s both;
    }

    /* Primary CTA — Modern Button */
    .m-hero__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: 260px;
        padding: 16px 28px;
        background: #1E3A5F;
        color: #FFFFFF;
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(30, 58, 95, 0.35);
        transition: all 0.25s ease;
        animation: m-fadeInUp 0.6s ease 0.5s both;
    }

    .m-hero__cta:active {
        transform: scale(0.97);
        box-shadow: 0 4px 16px rgba(30, 58, 95, 0.4);
    }

    .m-hero__cta i {
        font-size: 14px;
    }

    /* Secondary Actions — Cleaner */
    .m-hero__actions {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-top: 28px;
        animation: m-fadeIn 0.6s ease 0.7s both;
    }

    .m-hero__action {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        transition: color 0.2s ease;
        padding: 8px;
    }

    .m-hero__action i {
        font-size: 18px;
        color: var(--m-teal-400);
    }

    .m-hero__action:active {
        color: rgba(255, 255, 255, 0.8);
    }

    /* Scroll Indicator — Minimal */
    .m-hero__scroll {
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        animation: m-fadeIn 0.6s ease 1s both;
        cursor: pointer;
        opacity: 0.4;
    }

    .m-hero__scroll-text {
        font-family: 'Inter', sans-serif;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
    }

    .m-hero__scroll-icon {
        width: 20px;
        height: 32px;
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        position: relative;
    }

    .m-hero__scroll-dot {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        height: 6px;
        background: var(--m-teal-400);
        border-radius: 3px;
        animation: m-scrollBounce 2s ease-in-out infinite;
    }

    /* ========================================
       BLOCK 2: SERVICES — PREMIUM CARDS
       ======================================== */
    .m-services {
        padding: var(--m-space-4xl) var(--m-space-lg) var(--m-space-3xl);
        background: var(--m-gradient-section);
        position: relative;
    }

    /* Section Header — Refined */
    .m-section-header {
        margin-bottom: var(--m-space-xl);
        text-align: center;
    }

    .m-section-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--m-teal-600);
        margin: 0 0 var(--m-space-sm);
    }

    .m-section-label::before,
    .m-section-label::after {
        content: '';
        width: 20px;
        height: 1px;
        background: var(--m-teal-500);
        opacity: 0.5;
    }

    .m-section-title {
        font-family: 'Inter', sans-serif;
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--m-dark);
        margin: 0;
    }

    /* Service Cards List */
    .m-services__list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Individual Service Card — Clean Modern Design */
    .m-service-item {
        background: var(--m-white);
        border-radius: 20px;
        box-shadow: 0 2px 16px rgba(10, 31, 38, 0.08);
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    .m-service-item.active {
        box-shadow: 0 8px 32px rgba(42, 175, 187, 0.15);
    }

    /* Service Header */
    .m-service-item__header {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 24px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* Service Icon — Minimalist Circle */
    .m-service-item__icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(42, 175, 187, 0.08);
        border-radius: 16px;
        color: var(--m-teal-600);
        font-size: 24px;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .m-service-item.active .m-service-item__icon {
        background: var(--m-gradient-accent);
        color: var(--m-white);
        transform: scale(1.05);
    }

    /* Service Info */
    .m-service-item__info {
        flex: 1;
        min-width: 0;
    }

    .m-service-item__name {
        font-family: 'Inter', sans-serif;
        font-size: 17px;
        font-weight: 700;
        color: var(--m-dark);
        margin: 0 0 4px;
        letter-spacing: -0.01em;
        line-height: 1.3;
    }

    .m-service-item__brief {
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 400;
        color: var(--m-gray-500);
        margin: 0;
        line-height: 1.4;
    }

    /* Arrow — Simple Chevron */
    .m-service-item__arrow {
        width: 24px;
        height: 24px;
        min-width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--m-gray-400);
        font-size: 12px;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .m-service-item.active .m-service-item__arrow {
        color: var(--m-teal-600);
        transform: rotate(180deg);
    }

    /* Service Body (Expandable) */
    .m-service-item__body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .m-service-item.active .m-service-item__body {
        max-height: 350px;
    }

    .m-service-item__content {
        padding: 0 24px 24px;
        border-top: 1px solid rgba(42, 175, 187, 0.08);
        padding-top: 20px;
    }

    .m-service-item__desc {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        line-height: 1.6;
        color: var(--m-gray-600);
        margin: 0 0 16px;
    }

    /* Service Tags — Clean Pills */
    .m-service-item__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
    }

    .m-service-item__tag {
        padding: 6px 12px;
        background: rgba(42, 175, 187, 0.08);
        border-radius: 20px;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 600;
        color: var(--m-teal-700);
    }

    /* Service Link — Solid CTA Button */
    .m-service-item__link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--m-white);
        text-decoration: none;
        padding: 14px 24px;
        background: var(--m-gradient-accent);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(42, 175, 187, 0.2);
        transition: all 0.2s ease;
    }

    .m-service-item__link:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(42, 175, 187, 0.25);
    }

    .m-service-item__link i {
        font-size: 12px;
        transition: transform 0.2s ease;
    }

    .m-service-item__link:active i {
        transform: translateX(2px);
    }

    /* ========================================
       BLOCK 3: METRICS — IMPACT NUMBERS
       ======================================== */
    .m-metrics {
        padding: var(--m-space-3xl) var(--m-space-lg);
        background: var(--m-dark);
        position: relative;
        overflow: hidden;
    }

    .m-metrics::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -30%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(42, 175, 187, 0.15) 0%, transparent 70%);
        border-radius: 50%;
    }

    .m-metrics__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--m-space-sm);
        position: relative;
        z-index: 1;
    }

    .m-metric-card {
        text-align: center;
        padding: var(--m-space-lg) var(--m-space-sm);
    }

    .m-metric-card__icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(42, 175, 187, 0.15);
        border-radius: var(--m-radius-sm);
        margin: 0 auto var(--m-space-sm);
        font-size: 20px;
        color: var(--m-teal-400);
    }

    .m-metric-card__number {
        font-family: 'Inter', sans-serif;
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--m-white);
        margin: 0 0 4px;
    }

    .m-metric-card__label {
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 500;
        color: var(--m-gray-500);
        margin: 0;
        line-height: 1.4;
    }

    /* ========================================
       BLOCK 4: WHY CHOOSE US — ELEGANT GRID
       ======================================== */
    .m-why {
        padding: var(--m-space-4xl) var(--m-space-lg);
        background: var(--m-gradient-section);
    }

    .m-why__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--m-space-md);
    }

    .m-why-card {
        background: var(--m-white);
        border: 1px solid rgba(42, 175, 187, 0.08);
        border-radius: var(--m-radius-lg);
        padding: var(--m-space-lg);
        box-shadow: var(--m-shadow-sm);
        transition: all var(--m-duration-base) var(--m-ease-spring);
        opacity: 0;
        transform: translateY(24px);
    }

    .m-why-card.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .m-why-card:active {
        transform: translateY(-4px);
        box-shadow: var(--m-shadow-md);
    }

    .m-why-card__icon {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(42, 175, 187, 0.1);
        border-radius: var(--m-radius-sm);
        margin-bottom: var(--m-space-sm);
        font-size: 18px;
        color: var(--m-teal-600);
    }

    .m-why-card__title {
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: var(--m-dark);
        margin: 0 0 6px;
    }

    .m-why-card__text {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        color: var(--m-gray-500);
        line-height: 1.6;
        margin: 0;
    }

    /* ========================================
       BLOCK 5: TESTIMONIALS
       ======================================== */
    .m-testimonials {
        padding: var(--m-space-3xl) 0;
        background: var(--m-white);
        overflow: hidden;
    }

    .m-testimonials .m-section-header {
        padding: 0 var(--m-space-lg);
    }

    .m-testimonials__slider {
        display: flex;
        gap: var(--m-space-md);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: var(--m-space-xs) var(--m-space-lg);
    }

    .m-testimonials__slider::-webkit-scrollbar {
        display: none;
    }

    .m-testimonial-card {
        flex: 0 0 calc(100% - 48px);
        scroll-snap-align: center;
        background: var(--m-light);
        border: 1px solid rgba(42, 175, 187, 0.1);
        border-radius: var(--m-radius-lg);
        padding: var(--m-space-xl);
        position: relative;
    }

    .m-testimonial-card__quote {
        position: absolute;
        top: var(--m-space-md);
        left: var(--m-space-lg);
        font-size: 48px;
        color: var(--m-teal-400);
        opacity: 0.2;
        font-family: Georgia, serif;
        line-height: 1;
    }

    .m-testimonial-card__text {
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        line-height: 1.7;
        color: var(--m-dark-muted);
        margin: 0 0 var(--m-space-lg);
        font-style: italic;
    }

    .m-testimonial-card__author {
        display: flex;
        align-items: center;
        gap: var(--m-space-sm);
    }

    .m-testimonial-card__avatar {
        width: 44px;
        height: 44px;
        background: var(--m-gradient-accent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--m-white);
    }

    .m-testimonial-card__info {
        flex: 1;
    }

    .m-testimonial-card__name {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: var(--m-dark);
        margin: 0 0 2px;
    }

    .m-testimonial-card__role {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        color: var(--m-gray-500);
        margin: 0;
    }

    .m-testimonial-card__stars {
        color: var(--m-gold-500);
        font-size: 12px;
    }

    /* Slider Dots */
    .m-testimonials__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: var(--m-space-lg);
    }

    .m-testimonials__dot {
        width: 8px;
        height: 8px;
        background: var(--m-gray-300);
        border-radius: 50%;
        transition: all var(--m-duration-fast);
    }

    .m-testimonials__dot.active {
        width: 24px;
        border-radius: 4px;
        background: var(--m-teal-500);
    }

    /* ========================================
       BLOCK 6: AEO FAQ
       ======================================== */
    .m-faq {
        padding: var(--m-space-4xl) var(--m-space-lg);
        background: var(--m-white);
    }

    .m-faq__list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .m-faq__item {
        background: var(--m-white);
        border: 1px solid rgba(42, 175, 187, 0.12);
        border-radius: var(--m-radius-lg);
        box-shadow: var(--m-shadow-sm);
        overflow: hidden;
    }

    .m-faq__item[open] {
        border-color: rgba(42, 175, 187, 0.28);
        box-shadow: var(--m-shadow-md);
    }

    .m-faq__item summary {
        list-style: none;
        padding: 18px 20px;
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: var(--m-dark);
        cursor: pointer;
        position: relative;
        padding-right: 44px;
        -webkit-tap-highlight-color: transparent;
    }

    .m-faq__item summary::-webkit-details-marker {
        display: none;
    }

    .m-faq__item summary::after {
        content: '+';
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: var(--m-teal-600);
        transition: transform 0.2s ease;
    }

    .m-faq__item[open] summary::after {
        content: '-';
    }

    .m-faq__answer {
        padding: 0 20px 18px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        line-height: 1.65;
        color: var(--m-gray-600);
    }

    .m-faq__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px 24px;
        margin-top: 24px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #FFFFFF;
        text-decoration: none;
        background: var(--m-gradient-accent);
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(42, 175, 187, 0.25);
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .m-faq__cta:active {
        transform: scale(0.98);
        box-shadow: 0 4px 12px rgba(42, 175, 187, 0.3);
    }

    /* ========================================
       BLOCK 6: CONTACT — ELEGANT MINIMAL
       ======================================== */
    .m-contact {
        padding: var(--m-space-4xl) var(--m-space-lg) calc(var(--m-space-4xl) + 60px);
        background: linear-gradient(180deg, #FAFBFC 0%, #F5F7F9 100%);
        text-align: center;
    }

    .m-contact__inner {
        max-width: 340px;
        margin: 0 auto;
    }

    .m-contact__label {
        display: inline-block;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--m-teal-500);
        margin-bottom: var(--m-space-lg);
    }

    .m-contact__title {
        font-family: 'Inter', sans-serif;
        font-size: 36px;
        font-weight: 800;
        color: var(--m-dark);
        line-height: 1.1;
        letter-spacing: -0.03em;
        margin: 0 0 var(--m-space-lg);
    }

    .m-contact__title-accent {
        background: linear-gradient(135deg, var(--m-teal-500) 0%, var(--m-teal-400) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .m-contact__text {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: var(--m-gray-500);
        line-height: 1.7;
        margin: 0 0 var(--m-space-xl);
    }

    .m-contact__btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: var(--m-white);
        text-decoration: none;
        padding: 16px 32px;
        background: var(--m-dark);
        border-radius: 100px;
        transition: all 0.3s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .m-contact__btn:active {
        transform: scale(0.97);
        background: #0D1E26;
    }

    .m-contact__btn-arrow {
        font-size: 18px;
        transition: transform 0.3s ease;
    }

    .m-contact__btn:active .m-contact__btn-arrow {
        transform: translateX(4px);
    }

    .m-contact__divider {
        width: 40px;
        height: 1px;
        background: var(--m-gray-300);
        margin: var(--m-space-xl) auto;
    }

    .m-contact__alt-label {
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 500;
        color: var(--m-gray-400);
        margin: 0 0 var(--m-space-md);
    }

    .m-contact__links {
        display: flex;
        justify-content: center;
        gap: var(--m-space-xl);
        margin-bottom: var(--m-space-xl);
    }

    .m-contact__link {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: var(--m-dark);
        text-decoration: none;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .m-contact__link:active {
        color: var(--m-teal-600);
    }

    .m-contact__link-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 50%;
        font-size: 14px;
        color: var(--m-gray-600);
        transition: all 0.2s ease;
    }

    .m-contact__link:active .m-contact__link-icon {
        background: rgba(42, 175, 187, 0.1);
        color: var(--m-teal-500);
    }

    .m-contact__link--whatsapp .m-contact__link-icon {
        background: rgba(37, 211, 102, 0.08);
        color: #25D366;
    }

    .m-contact__link--whatsapp:active .m-contact__link-icon {
        background: rgba(37, 211, 102, 0.15);
    }

    .m-contact__promise {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: var(--m-gray-400);
        margin: 0;
    }

    .m-contact__promise i {
        font-size: 13px;
        color: var(--m-teal-400);
    }

    /* ========================================
       MOBILE HEADER — MINIMAL
       ======================================== */
    .m-header {
        position: fixed;
        top: 0;
        right: 0;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 20px;
        z-index: 1000;
        background: transparent;
    }

    .m-header__menu-btn {
        width: 44px;
        height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: transparent;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .m-header__menu-btn:active {
        opacity: 0.7;
    }

    .m-header__menu-btn span {
        display: block;
        width: 24px;
        height: 2px;
        background: #FFFFFF;
        border-radius: 2px;
        transition: background 0.3s ease;
    }

    .m-header__menu-btn span:nth-child(2) {
        width: 18px;
    }

    /* Header on Light Background - Dark Icon */
    .m-header.on-light-bg .m-header__menu-btn span {
        background: #0A1F26;
    }

    /* ========================================
       MOBILE FULLSCREEN MENU
       ======================================== */
    .m-menu {
        position: fixed;
        inset: 0;
        background: linear-gradient(180deg, #0B1D24 0%, #0F2830 100%);
        z-index: 2000;
        display: flex;
        flex-direction: column;
        padding: 24px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .m-menu.active {
        opacity: 1;
        visibility: visible;
    }

    .m-menu__header {
        position: absolute;
        top: 24px;
        left: 24px;
        right: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .m-menu__logo {
        height: 40px;
        width: auto;
    }

    .m-menu__close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        color: #FFFFFF;
        font-size: 20px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: all 0.2s ease;
    }

    .m-menu__close:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.15);
    }

    .m-menu__nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        flex: 1;
    }

    .m-menu__link {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px 20px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        text-decoration: none;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .m-menu__link:active {
        background: rgba(42, 175, 187, 0.1);
        border-color: rgba(42, 175, 187, 0.2);
    }

    .m-menu__link.active {
        background: rgba(42, 175, 187, 0.1);
        border-color: rgba(42, 175, 187, 0.3);
    }

    .m-menu__link i {
        font-size: 18px;
        color: var(--m-teal-400);
        width: 24px;
        text-align: center;
    }

    .m-menu__link span {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
    }

    .m-menu__link.active span {
        color: #FFFFFF;
        font-weight: 600;
    }

    .m-menu__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 18px 24px;
        background: #1E3A5F;
        border-radius: 14px;
        text-decoration: none;
        box-shadow: 0 8px 24px rgba(30, 58, 95, 0.35);
        transition: all 0.2s ease;
        margin-top: auto;
        -webkit-tap-highlight-color: transparent;
    }

    .m-menu__cta:active {
        transform: scale(0.98);
    }

    .m-menu__cta i {
        font-size: 16px;
        color: #FFFFFF;
    }

    .m-menu__cta span {
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: #FFFFFF;
    }

    /* ========================================
       WHATSAPP FLOATING BUTTON
       ======================================== */
    .m-whatsapp {
        position: fixed;
        bottom: 24px;
        right: 20px;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #25D366;
        border-radius: 50%;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
        z-index: 999;
        transition: all 0.25s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .m-whatsapp:active {
        transform: scale(0.92);
    }

    .m-whatsapp i {
        font-size: 28px;
        color: #FFFFFF;
    }

    /* Hide old navbar */
    .m-navbar {
        display: none !important;
    }

    /* ========================================
       ANIMATIONS — REFINED
       ======================================== */
    @keyframes m-sparkle {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: 200px 100px;
        }
    }

    @keyframes m-float {

        0%,
        100% {
            transform: translate(0, 0) scale(1);
        }

        33% {
            transform: translate(-15px, 15px) scale(1.05);
        }

        66% {
            transform: translate(10px, -10px) scale(0.95);
        }
    }

    @keyframes m-fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes m-fadeInUp {
        from {
            opacity: 0;
            transform: translateY(24px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes m-fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-16px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes m-scrollBounce {

        0%,
        100% {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        50% {
            transform: translateX(-50%) translateY(12px);
            opacity: 0.5;
        }
    }

    @keyframes m-fabPulse {

        0%,
        100% {
            transform: scale(1);
            opacity: 0.3;
        }

        50% {
            transform: scale(1.15);
            opacity: 0.15;
        }
    }

    /* ========================================
       UTILITY CLASSES
       ======================================== */
    .m-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* ========================================
       MOBILE FOOTER
       ======================================== */
    .m-footer {
        padding: var(--m-space-3xl) var(--m-space-lg);
        background: var(--m-gradient-hero);
        text-align: center;
    }

    .m-footer__logo {
        margin-bottom: var(--m-space-md);
        display: flex;
        justify-content: center;
    }

    .m-footer__logo img {
        height: 80px;
        width: auto;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    .m-footer__text {
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        margin: 0 0 var(--m-space-lg);
        line-height: 1.5;
    }

    .m-footer__social {
        display: flex;
        justify-content: center;
        gap: var(--m-space-md);
        margin-bottom: var(--m-space-xl);
    }

    .m-footer__social a {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 50%;
        color: var(--m-teal-400);
        font-size: 18px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .m-footer__social a:active {
        background: rgba(42, 175, 187, 0.2);
        transform: scale(0.95);
    }

    .m-footer__copyright {
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.4);
        line-height: 1.6;
        padding-top: var(--m-space-lg);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .m-footer__engineered {
        display: inline-block;
        margin-top: 10px;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
    }

    .m-footer__privacy-link {
        display: inline-block;
        margin-top: 6px;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
    }

    .m-footer__privacy-link:active {
        text-decoration: underline;
    }
}

/* ========== DESKTOP: HIDE MOBILE ELEMENTS ========== */
@media (min-width: 768px) {

    .mobile-home,
    .m-navbar {
        display: none !important;
    }
}