/* ============================================ */
/* ASTRONOMER-STYLE MOBILE NAVIGATION */
/* Complete mobile menu system */
/* ============================================ */

/* ============================================ */
/* 1. HAMBURGER BUTTON */
/* ============================================ */

.astro-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    gap: 5px;
    z-index: 100001;
    transition: all 0.3s ease;
    margin-left: auto;
}

.astro-hamburger:hover {
    background: rgba(196, 30, 40, 0.2);
    border-color: rgba(196, 30, 40, 0.4);
}

.astro-hamburger__line {
    display: block;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.astro-hamburger__line:nth-child(1) { width: 22px; }
.astro-hamburger__line:nth-child(2) { width: 18px; }
.astro-hamburger__line:nth-child(3) { width: 22px; }

.astro-hamburger.is-active .astro-hamburger__line {
    width: 28px;
    background: #ffffff;
}

.astro-hamburger.is-active .astro-hamburger__line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.astro-hamburger.is-active .astro-hamburger__line:nth-child(2) {
    opacity: 0;
}

.astro-hamburger.is-active .astro-hamburger__line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ============================================ */
/* 2. MOBILE NAV DRAWER */
/* ============================================ */

.astro-mobile-nav {
    display: none;
}

.astro-mobile-nav__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 99998;
}

.astro-mobile-nav.is-open .astro-mobile-nav__overlay {
    opacity: 1;
    visibility: visible;
}

.astro-mobile-nav__drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 90vw;
    height: 100dvh;
    background: #1a1f2e;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99999;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.astro-mobile-nav.is-open .astro-mobile-nav__drawer {
    transform: translateX(0);
}

body.astro-nav-open {
    overflow: hidden;
}

/* ============================================ */
/* 3. DRAWER HEADER */
/* ============================================ */

.astro-mobile-nav__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.astro-mobile-nav__logo {
    height: 36px;
    width: auto;
}

.astro-mobile-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.astro-mobile-nav__close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.astro-mobile-nav__close svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
}

/* ============================================ */
/* 4. CTA BUTTONS */
/* ============================================ */

.astro-mobile-nav__cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.astro-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
}

.astro-btn--outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.astro-btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.astro-btn--primary {
    background: linear-gradient(135deg, #C41E28 0%, #ff3d47 100%);
    border: none;
    color: #ffffff;
}

.astro-btn--primary:hover {
    background: linear-gradient(135deg, #a01820 0%, #e63540 100%);
    transform: translateY(-1px);
}

/* ============================================ */
/* 5. MENU STRUCTURE */
/* ============================================ */

.astro-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.astro-menu__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.astro-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease;
}

.astro-menu__link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.astro-menu__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.3s ease;
}

.astro-menu__toggle svg {
    width: 16px;
    height: 16px;
    stroke: rgba(255, 255, 255, 0.6);
    transition: stroke 0.2s ease;
}

.astro-menu__item--dropdown.is-open .astro-menu__toggle {
    transform: rotate(180deg);
}

.astro-menu__item--dropdown.is-open .astro-menu__toggle svg {
    stroke: #C41E28;
}

/* ============================================ */
/* 6. SUBMENU */
/* ============================================ */

.astro-submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 12px 0;
    background: rgba(0, 0, 0, 0.2);
}

.astro-menu__item--dropdown.is-open .astro-submenu {
    display: block;
}

.astro-submenu a {
    display: block;
    padding: 12px 24px 12px 40px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.astro-submenu a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    padding-left: 44px;
}

/* ============================================ */
/* 7. MOBILE BREAKPOINTS */
/* ============================================ */

@media (max-width: 991px) {
    /* Hamburger button - MUST be visible */
    .astro-hamburger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 99;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 8px !important;
        width: 44px !important;
        height: 44px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin-left: auto !important;
    }
    
    .astro-hamburger__line {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }
    
    /* Ensure header inner has proper flex layout */
    .main-header__inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .astro-mobile-nav {
        display: block;
    }
}

@media (max-width: 480px) {
    .astro-hamburger {
        width: 40px;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        gap: 4px;
    }
    
    .astro-hamburger__line:nth-child(1) { width: 24px; }
    .astro-hamburger__line:nth-child(2) { width: 20px; }
    .astro-hamburger__line:nth-child(3) { width: 16px; }
    
    .astro-mobile-nav__drawer {
        width: 100%;
        max-width: 100vw;
    }
    
    .astro-mobile-nav__header {
        padding: 16px 20px;
    }
    
    .astro-mobile-nav__logo {
        height: 32px;
    }
    
    .astro-mobile-nav__close {
        width: 32px;
        height: 32px;
        min-height: 32px;
        max-height: 32px;
    }
    
    .astro-mobile-nav__close svg {
        width: 16px;
        height: 16px;
    }
    
    .astro-mobile-nav__cta {
        padding: 16px 20px;
    }
    
    .astro-menu__link {
        padding: 14px 20px;
        font-size: 15px;
    }
    
    .astro-submenu a {
        padding: 10px 20px 10px 36px;
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .astro-hamburger {
        width: 36px;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        gap: 3px;
    }
    
    .astro-hamburger__line {
        height: 2px;
    }
    
    .astro-hamburger__line:nth-child(1) { width: 22px; }
    .astro-hamburger__line:nth-child(2) { width: 18px; }
    .astro-hamburger__line:nth-child(3) { width: 14px; }
    
    .astro-mobile-nav__close {
        width: 30px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
    }
    
    .astro-mobile-nav__close svg {
        width: 14px;
        height: 14px;
    }
}

/* ============================================ */
/* 8. HEADER MOBILE FIXES */
/* ============================================ */

@media (max-width: 991px) {
    .topbar-one {
        display: none !important;
    }
    
    /* CRITICAL: Header must have dark background on mobile */
    .main-header,
    header.main-header,
    .main-header.sticky-header,
    .main-header.sticky-header--normal,
    .sticky-header,
    .sticky-header--normal {
        padding: 10px 0 !important;
        min-height: auto !important;
        background: #0f1117 !important;
        background-color: #0f1117 !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
    
    .main-header__inner {
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border-bottom: none !important;
    }
    
    /* Hide only the nav menu, not the entire wrapper */
    .main-header__nav,
    .main-menu {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Keep the wrapper visible for hamburger */
    .main-header__nav__wrapper {
        display: flex !important;
        align-items: center !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Show the right section with hamburger */
    .main-header__right {
        display: flex !important;
        align-items: center !important;
        visibility: visible !important;
        margin-left: auto !important;
    }
    
    /* Hide quote and call on mobile */
    .main-header__right .quote-btn,
    .main-header__right a.quote-btn,
    .main-header__call {
        display: none !important;
    }
    
    .main-header__logo img {
        max-height: 40px !important;
    }
    
    /* FORCE hamburger to show */
    #astroHamburger,
    button.astro-hamburger,
    .main-header__right .astro-hamburger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 9999 !important;
    }
}

/* ============================================ */
/* 19. CONNECTED FEATURES PANEL - GLASSMORPHISM */
/* Single panel inside office image */
/* ============================================ */

/* Container for office image */
.office-image-container {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.office-image-container .office-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3/2;
    border-radius: 12px;
}

/* Connected Glassmorphism Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Features Panel - Single Connected Row */
.features-panel {
    position: absolute;
    top: 24px;
    left: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 12px 8px;
    z-index: 10;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Fade in when visible */
.features-panel.is-visible,
.fade-in-feature {
    opacity: 1;
    transform: translateY(0);
}

/* Individual feature item */
.features-panel__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    position: relative;
    transition: all 0.3s ease;
}

/* Divider between items */
.features-panel__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 32px;
    width: 1px;
    background: rgba(255, 255, 255, 0.4);
}

/* Hover effect on items */
.features-panel__item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.features-panel__item:hover .features-panel__icon {
    transform: scale(1.1);
    color: #C41E28;
    stroke: #C41E28;
}

/* Icon styling - EXPLICIT SIZE CONSTRAINTS */
.features-panel__icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    flex-shrink: 0;
    color: #C41E28;
    stroke: #C41E28;
    transition: transform 0.3s ease, color 0.3s ease;
    display: block !important;
}

/* SVG inside features panel - FORCE SIZE */
.features-panel svg,
.features-panel__item svg {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
}

/* Label styling - Consistent typography */
.features-panel__label {
    font-size: 12px;
    font-weight: 600;
    color: #1a1d24;
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-family: inherit;
}

/* Subtle floating animation for the panel */
@keyframes panelFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.features-panel.is-visible {
    animation: panelFloat 4s ease-in-out infinite;
    animation-delay: 0.6s;
}

/* Hide old icon row */
.hero-icon-row {
    display: none !important;
}

/* Hide old floating features if any remain */
.floating-feature {
    display: none !important;
}

/* ============================================ */
/* 19b. FEATURES PANEL - MOBILE RESPONSIVE */
/* ============================================ */

@media (max-width: 991px) {
    .features-panel {
        top: 16px;
        left: 16px;
        padding: 10px 6px;
    }
    
    .features-panel__item {
        padding: 6px 12px;
        gap: 5px;
    }
    
    .features-panel__icon,
    .features-panel svg,
    .features-panel__item svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
    
    .features-panel__label {
        font-size: 10px;
    }
    
    .features-panel__item:not(:last-child)::after {
        height: 28px;
    }
}

@media (max-width: 768px) {
    /* FIX: Move features panel higher in viewport */
    /* Position it at top of office image container */
    .features-panel {
        top: 8px;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
        width: 90%;
        max-width: 340px;
        padding: 10px 8px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        justify-content: space-around;
        z-index: 20; /* Ensure visibility */
    }
    
    /* FIX: Reduce margin above office image to show features panel earlier */
    .office-image-container,
    .hero-premium__image,
    .hero-premium__image-placeholder {
        margin-top: 16px !important; /* Reduced from default */
    }
    
    .features-panel.is-visible,
    .fade-in-feature {
        transform: translateX(-50%) translateY(0);
    }
    
    .features-panel.is-visible {
        animation: panelFloatMobile 4s ease-in-out infinite;
        animation-delay: 0.6s;
    }
    
    @keyframes panelFloatMobile {
        0%, 100% {
            transform: translateX(-50%) translateY(0);
        }
        50% {
            transform: translateX(-50%) translateY(-4px);
        }
    }
    
    .features-panel__item {
        padding: 6px 8px;
        gap: 4px;
        flex: 1;
    }
    
    .features-panel__icon,
    .features-panel svg,
    .features-panel__item svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
    
    .features-panel__label {
        font-size: 9px;
        letter-spacing: 0.2px;
    }
    
    .features-panel__item:not(:last-child)::after {
        height: 24px;
    }
}

@media (max-width: 480px) {
    .features-panel {
        top: 10px;
        width: 92%;
        max-width: 300px;
        padding: 8px 6px;
        border-radius: 12px;
    }
    
    .features-panel__item {
        padding: 5px 6px;
        gap: 3px;
    }
    
    .features-panel__icon,
    .features-panel svg,
    .features-panel__item svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
    
    .features-panel__label {
        font-size: 8px;
    }
    
    .features-panel__item:not(:last-child)::after {
        height: 20px;
    }
}

/* Below 400px - KEEP INLINE (single row) */
@media (max-width: 399px) {
    .features-panel {
        top: 10px;
        width: 95%;
        max-width: 320px;
        padding: 6px 4px;
        border-radius: 10px;
        flex-wrap: nowrap !important;
        justify-content: space-between;
    }
    
    .features-panel__item {
        flex: 1 1 auto;
        max-width: none;
        padding: 4px 3px;
        gap: 2px;
        box-sizing: border-box;
    }
    
    /* Keep vertical dividers */
    .features-panel__item:not(:last-child)::after {
        display: block;
        height: 18px;
    }
    
    .features-panel__icon,
    .features-panel svg,
    .features-panel__item svg {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
    }
    
    .features-panel__label {
        font-size: 7px;
        letter-spacing: 0;
    }
}

@media (max-width: 360px) {
    .features-panel {
        top: 8px;
        width: 96%;
        max-width: 300px;
        padding: 5px 3px;
        border-radius: 8px;
        flex-wrap: nowrap !important;
    }
    
    .features-panel__item {
        padding: 3px 2px;
        gap: 2px;
    }
    
    .features-panel__icon,
    .features-panel svg,
    .features-panel__item svg {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
    }
    
    .features-panel__label {
        font-size: 6px;
    }
    
    .features-panel__item:not(:last-child)::after {
        height: 16px;
    }
}

/* ============================================ */
/* 20. SERVICE CARD SCROLL-BASED HIGHLIGHT */
/* Active hover effect when card enters viewport */
/* ============================================ */

/* Base transition for smooth effect */
.service-card,
.service-premium-card,
.services-card,
[class*="service-card"] {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s ease !important;
}

/* Active hover state - applied via JS when card enters viewport */
@media (max-width: 991px) {
    .service-card.active-hover,
    .service-premium-card.active-hover,
    .services-card.active-hover,
    .service-card-saas.active-hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 20px 40px rgba(196, 30, 40, 0.15) !important;
        border-color: #C41E28 !important;
    }
    
    .service-card.active-hover .service-icon-container,
    .service-premium-card.active-hover .service-icon-container,
    .services-card.active-hover .service-icon-container,
    .service-card-saas.active-hover .service-icon-container {
        background: linear-gradient(135deg, #C41E28 0%, #8B1E2F 100%) !important;
    }
    
    .service-card.active-hover .service-icon-container i,
    .service-card.active-hover .service-icon-container svg,
    .service-premium-card.active-hover .service-icon-container i,
    .service-premium-card.active-hover .service-icon-container svg,
    .services-card.active-hover .service-icon-container i,
    .services-card.active-hover .service-icon-container svg,
    .service-card-saas.active-hover .service-icon-container i,
    .service-card-saas.active-hover .service-icon-container svg {
        color: #ffffff !important;
    }
}

/* ============================================ */
/* 21. ENHANCED MOBILE TYPOGRAPHY */
/* Real-world professional font sizes for mobile */
/* Based on Apple, Google, Stripe standards */
/* ============================================ */

@media (max-width: 768px) {
    /* ========== HERO SECTION ========== */
    .hero-premium__title,
    h1.hero-premium__title {
        font-size: 32px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }
    
    .hero-premium__subtitle,
    .hero-premium__text {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
    }
    
    .hero-premium__badge,
    .hero-premium__badge span {
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
    }
    
    .hero-premium__trust-item,
    .hero-premium__trust-item span {
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    
    /* ========== SECTION TITLES ========== */
    h2, .h2,
    .section-title__heading,
    .sec-title-saas__title {
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.01em !important;
    }
    
    .sec-title-saas__tagline,
    .section-title__tagline {
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
    }
    
    .sec-title-saas__text,
    .section-title__text {
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }
    
    /* ========== CARD TITLES ========== */
    h3, .h3,
    .service-card-saas__title,
    .service-card__title,
    .service-card-saas h3 {
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        letter-spacing: -0.01em !important;
    }
    
    /* ========== BODY TEXT ========== */
    p,
    .about-saas__text,
    .service-card-saas__text,
    .service-card-saas p,
    .cta-saas__text,
    .footer-saas__tagline {
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }
    
    /* ========== SMALLER TEXT ========== */
    h4, .h4 {
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }
    
    /* ========== BUTTONS ========== */
    .btn-premium,
    .btn-modern,
    .btn-saas-white,
    .astro-btn {
        font-size: 15px !important;
        font-weight: 600 !important;
    }
    
    /* ========== FOOTER ========== */
    .footer-saas__title {
        font-size: 14px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .footer-saas__links a,
    .footer-saas__contact span,
    .footer-saas__contact a {
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
    }
    
    .footer-saas__copyright,
    .footer-saas__legal a {
        font-size: 13px !important;
    }
    
    /* ========== ABOUT SECTION ========== */
    .about-saas__feature h4 {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
    
    .about-saas__feature p {
        font-size: 14px !important;
    }
    
    /* Section alignment */
    .sec-title-saas,
    .section-title,
    .about-saas__content {
        text-align: center !important;
    }
}

/* ========== SMALLER PHONES (480px) ========== */
@media (max-width: 480px) {
    .hero-premium__title,
    h1.hero-premium__title {
        font-size: 28px !important;
    }
    
    .hero-premium__subtitle {
        font-size: 15px !important;
    }
    
    h2, .h2,
    .section-title__heading,
    .sec-title-saas__title {
        font-size: 24px !important;
    }
    
    h3, .h3,
    .service-card-saas__title,
    .service-card-saas h3 {
        font-size: 17px !important;
    }
    
    p,
    .about-saas__text,
    .service-card-saas__text,
    .service-card-saas p {
        font-size: 14px !important;
    }
    
    .btn-premium,
    .btn-modern {
        font-size: 14px !important;
    }
}

/* ========== VERY SMALL PHONES (360px) ========== */
@media (max-width: 360px) {
    .hero-premium__title,
    h1.hero-premium__title {
        font-size: 26px !important;
    }
    
    .hero-premium__subtitle {
        font-size: 14px !important;
    }
    
    h2, .h2,
    .section-title__heading,
    .sec-title-saas__title {
        font-size: 22px !important;
    }
    
    h3, .h3,
    .service-card-saas__title,
    .service-card-saas h3 {
        font-size: 16px !important;
    }
    
    p,
    .about-saas__text,
    .service-card-saas__text,
    .service-card-saas p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}

/* ============================================ */
/* 22. GLOBAL MOBILE OVERFLOW FIX */
/* Prevent horizontal scrolling ONLY */
/* Vertical scrolling MUST work normally */
/* ============================================ */

@media (max-width: 991px) {
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important; /* FIX: Ensure vertical scroll works */
        max-width: 100vw !important;
        height: auto !important; /* FIX: Remove height constraints */
        min-height: auto !important; /* FIX: Remove min-height constraints */
    }
    
    .page-wrapper,
    .container,
    .container-fluid,
    .row,
    section,
    header,
    footer {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: visible !important; /* FIX: Allow content to flow */
    }
    
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    img, video, iframe, svg {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ============================================ */
/* 23. FOOTER MOBILE FIXES */
/* ============================================ */

@media (max-width: 768px) {
    .footer-saas__top .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    .footer-saas__top .col-lg-4.col-md-6:first-child {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
        text-align: center !important;
    }
    
    .footer-saas__top .col-lg-2,
    .footer-saas__top .col-md-6.col-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0 12px !important;
        margin-bottom: 20px !important;
    }
    
    .footer-saas__widget-title {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    
    .footer-saas__widget-list li {
        margin-bottom: 6px !important;
    }
    
    .footer-saas__widget-list a {
        font-size: 13px !important;
    }
    
    .footer-saas__bottom {
        padding-bottom: 90px !important;
    }
    
    .footer-saas__social a {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
}

/* ============================================ */
/* 24. CONTACT PAGE MOBILE FIXES */
/* ============================================ */

@media (max-width: 768px) {
    .contact-info-modern__item {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px 16px !important;
    }
    
    .contact-info-modern__icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 22px !important;
        margin: 0 auto 12px auto !important;
    }
    
    .contact-info-modern__title {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }
    
    .contact-info-modern__text {
        font-size: 14px !important;
    }
}

/* ============================================ */
/* 25. HERO SECTION MOBILE FIXES */
/* ============================================ */

@media (max-width: 768px) {
    .hero-premium {
        padding: 80px 0 40px !important;
        margin-top: 0 !important;
    }
    
    .hero-premium__content {
        text-align: center !important;
    }
    
    .hero-premium__buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    
    .hero-premium__buttons .btn-modern {
        width: 100% !important;
        max-width: 280px !important;
    }
}

@media (max-width: 480px) {
    .hero-premium {
        padding: 70px 0 30px !important;
    }
}

/* ============================================ */
/* 26. BUTTONS MOBILE FIXES */
/* ============================================ */

@media (max-width: 768px) {
    .btn-modern,
    .btn,
    [class*="btn-"] {
        min-height: 48px !important;
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
    
    .about-saas__cta {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }
    
    .about-saas__call {
        text-align: center !important;
    }
}

/* ============================================ */
/* 27. CARDS MOBILE FIXES */
/* ============================================ */

@media (max-width: 768px) {
    .service-card-saas,
    .service-card,
    [class*="service-card"] {
        padding: 24px 20px !important;
        margin-bottom: 20px !important;
    }
    
    .service-icon-container {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        margin: 0 auto 16px auto !important;
    }
    
    .service-icon-container i,
    .service-icon-container svg {
        font-size: 28px !important;
        width: 28px !important;
        height: 28px !important;
    }
}

@media (max-width: 480px) {
    .service-card-saas,
    .service-card {
        padding: 20px 16px !important;
    }
    
    .service-icon-container {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }
    
    .service-icon-container i,
    .service-icon-container svg {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
    }
}

/* ============================================ */
/* 28. FLOATING BUTTONS MOBILE FIXES */
/* ============================================ */

@media (max-width: 768px) {
    .whatsapp-float,
    .scroll-to-top {
        width: 48px !important;
        height: 48px !important;
        bottom: 20px !important;
    }
    
    .whatsapp-float {
        right: 20px !important;
    }
    
    .scroll-to-top {
        left: 20px !important;
        right: auto !important;
    }
    
    .whatsapp-float i,
    .scroll-to-top i {
        font-size: 20px !important;
    }
}

/* ============================================ */
/* 29. FORM MOBILE FIXES */
/* ============================================ */

@media (max-width: 768px) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    textarea {
        min-height: 120px !important;
    }
    
    .form-group,
    .mb-3 {
        margin-bottom: 16px !important;
    }
}

/* ============================================ */
/* 30. PAGE HEADER MOBILE FIXES */
/* ============================================ */

@media (max-width: 768px) {
    .page-header {
        padding: 80px 0 40px !important;
        text-align: center !important;
    }
    
    .page-header__title {
        font-size: 28px !important;
    }
    
    .page-header__breadcrumb {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 70px 0 30px !important;
    }
    
    .page-header__title {
        font-size: 24px !important;
    }
}

/* ============================================ */
/* HERO SECTION - ZERO GAP FROM HEADER */
/* Remove ALL space between header and hero */
/* ============================================ */

/* Desktop - Reduce hero top padding */
.hero-premium,
section.hero-premium,
.page-wrapper .hero-premium {
    padding: 60px 0 80px !important;
    margin-top: 0 !important;
}

/* Header - No bottom margin/padding */
.main-header,
header.main-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove topbar space */
.topbar-one {
    margin-bottom: 0 !important;
}

/* MOBILE: Header should blend with hero */
@media (max-width: 991px) {
    /* Make header have same dark background as hero */
    .main-header,
    header.main-header,
    .main-header.sticky-header,
    .main-header.sticky-header--normal {
        background: #0f1117 !important;
        background-color: #0f1117 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
    
    /* Remove inner border/shadow */
    .main-header__inner {
        border-bottom: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    /* Hero section - ZERO top padding on mobile */
    /* FIX: Removed top padding to eliminate header-hero gap */
    .hero-premium,
    section.hero-premium {
        padding: 0 0 50px !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Page wrapper - no gaps */
    .page-wrapper {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 768px) {
    /* FIX: Zero top padding to eliminate header-hero gap */
    .hero-premium,
    section.hero-premium {
        padding: 0 0 40px !important;
        padding-top: 0 !important;
    }
}

@media (max-width: 480px) {
    /* FIX: Zero top padding to eliminate header-hero gap */
    .hero-premium,
    section.hero-premium {
        padding: 0 0 30px !important;
        padding-top: 0 !important;
    }
}

/* ============================================ */
/* SERVICE CARD SAAS - COMPACT SPACING */
/* Reduced padding and tighter title/text gap */
/* ============================================ */

/* Desktop cards */
.service-card-saas {
    padding: 20px 18px !important;
}

.service-card-saas__title,
.service-card-saas h3 {
    margin-bottom: 6px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.service-card-saas__text,
.service-card-saas p {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.service-icon-container,
.service-card-saas__icon {
    margin-bottom: 10px !important;
}

/* Mobile Card Fixes - VERY Tight spacing */
@media (max-width: 768px) {
    .service-card-saas,
    .service-card-saas.wow,
    div.service-card-saas {
        padding: 16px 14px !important;
        margin-bottom: 12px !important;
    }
    
    .service-card-saas__title,
    .service-card-saas h3,
    .service-card-saas .service-card-saas__title {
        margin-bottom: 4px !important;
        margin-top: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
    }
    
    .service-card-saas__text,
    .service-card-saas p,
    .service-card-saas .service-card-saas__text {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    
    .service-icon-container,
    .service-card-saas__icon,
    .service-card-saas .service-icon-container {
        margin-bottom: 8px !important;
        margin-top: 0 !important;
        width: 44px !important;
        height: 44px !important;
    }
    
    .service-icon-container i,
    .service-card-saas__icon i,
    .service-card-saas .service-icon-container i {
        font-size: 20px !important;
    }
    
    /* Reduce section padding on mobile */
    .services-premium-grid,
    section.services-premium-grid {
        padding: 30px 0 !important;
    }
    
    /* Tighter row gaps */
    .services-premium-grid .row {
        --bs-gutter-y: 12px !important;
        --bs-gutter-x: 12px !important;
    }
    
    /* Column padding */
    .services-premium-grid .col-lg-4,
    .services-premium-grid .col-md-6 {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ============================================ */
/* 31. FINAL MOBILE HEADER-HERO FIX */
/* Remove ALL white space between header and hero */
/* This section loads LAST to override everything */
/* ============================================ */

/* Override Bootstrap's white body background on mobile */
@media (max-width: 991px) {
    :root {
        --bs-body-bg: #0f1117 !important;
        --bs-body-bg-rgb: 15, 17, 23 !important;
    }
    
    html,
    body,
    body.custom-cursor {
        background: #0f1117 !important;
        background-color: #0f1117 !important;
    }
    
    .page-wrapper {
        background: #0f1117 !important;
        background-color: #0f1117 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* FORCE dark header background */
    html body .page-wrapper .main-header,
    html body .page-wrapper header.main-header,
    html body .main-header,
    html body header.main-header,
    .page-wrapper > header,
    .page-wrapper > .main-header,
    header.main-header.sticky-header,
    header.main-header.sticky-header--normal,
    header.sticky-header,
    header.sticky-header--normal,
    .main-header,
    header.main-header {
        background: #0f1117 !important;
        background-color: #0f1117 !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Container inside header */
    .main-header .container,
    .main-header .container-xxl,
    .main-header .container-fluid {
        background: #0f1117 !important;
    }
    
    /* Inner header */
    .main-header .main-header__inner,
    header .main-header__inner {
        background: #0f1117 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Logo - Add dark background to contain white logo */
    .main-header__logo {
        background: #0f1117 !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
    }
    
    /* Logo image - add slight padding */
    .main-header__logo img {
        display: block !important;
        background: white !important;
        border-radius: 4px !important;
        padding: 4px 6px !important;
    }
    
    /* Hero section - ZERO gap from header */
    /* FIX: Changed padding-top from 8px to 0 to eliminate gap */
    html body .page-wrapper .hero-premium,
    html body .hero-premium,
    .page-wrapper > section.hero-premium,
    section.hero-premium#main-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ============================================ */
/* 32. MOBILE-ONLY HERO FLUSH FIX */
/* Ensure hero starts immediately after header */
/* Applied only below 768px - NO desktop changes */
/* MAXIMUM SPECIFICITY to override theme.css and visual-fixes.css */
/* theme.css sets padding: 120px 0 60px at 767px */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Override ALL hero padding from theme.css (line 20669) */
    /* theme.css sets: padding: 120px 0 60px - we need to override this */
    /* Also change align-items from center to flex-start to remove visual gap */
    .hero-premium,
    section.hero-premium,
    .page-wrapper .hero-premium,
    .page-wrapper section.hero-premium,
    html body .hero-premium,
    html body section.hero-premium,
    html body .page-wrapper .hero-premium,
    html body .page-wrapper section.hero-premium,
    section.hero-premium#main-content {
        padding: 24px 0 50px !important;
        padding-top: 24px !important;
        padding-bottom: 50px !important;
        margin: 0 !important;
        margin-top: 0 !important;
        min-height: auto !important;
        /* FIX: Change from center to flex-start to eliminate visual gap */
        align-items: flex-start !important;
    }
    
    /* Hero container - no extra padding */
    .hero-premium__container,
    .hero-premium .container,
    .hero-premium > .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Row inside hero - reduce gap */
    .hero-premium .row,
    .hero-premium__container .row {
        margin-top: 0 !important;
        padding-top: 0 !important;
        align-items: flex-start !important;
    }
    
    /* Hero content - reduce top margin */
    .hero-premium__content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Badge - reduce top spacing */
    .hero-premium__badge {
        margin-top: 0 !important;
    }
}

@media screen and (max-width: 480px) {
    .hero-premium,
    section.hero-premium,
    html body .hero-premium,
    html body section.hero-premium {
        padding: 20px 0 40px !important;
        padding-top: 20px !important;
    }
}

/* ============================================ */
/* ============================================ */
/* PROFESSIONAL MOBILE REDESIGN */
/* Stripe / Apple / Lemonade / Linear Quality */
/* Mobile-only improvements - DO NOT affect desktop */
/* ============================================ */
/* ============================================ */

/* ============================================ */
/* SECTION 1: MODERN SPACING SYSTEM */
/* Based on 8px grid: 8, 16, 24, 32, 40, 48, 64 */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* CSS Custom Properties for Mobile Spacing */
    :root {
        --mobile-space-xs: 8px;
        --mobile-space-sm: 12px;
        --mobile-space-md: 16px;
        --mobile-space-lg: 24px;
        --mobile-space-xl: 32px;
        --mobile-space-2xl: 40px;
        --mobile-space-3xl: 48px;
        --mobile-section-padding: 48px;
        --mobile-card-padding: 20px;
        --mobile-card-radius: 16px;
        --mobile-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.12);
        --mobile-shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.18);
    }
    
    /* ========== GLOBAL SECTION SPACING ========== */
    section,
    .section,
    [class*="-section"],
    .services-premium-grid,
    .about-saas,
    .cta-saas,
    .testimonials-section {
        padding-top: var(--mobile-section-padding) !important;
        padding-bottom: var(--mobile-section-padding) !important;
    }
    
    /* Container padding - consistent edge spacing */
    .container,
    .container-fluid,
    .container-xxl {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ============================================ */
/* SECTION 2: PREMIUM TYPOGRAPHY HIERARCHY */
/* Real-world mobile standards */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* ========== HERO TITLE - Premium Large ========== */
    .hero-premium__title,
    h1.hero-premium__title,
    .page-wrapper .hero-premium__title {
        font-size: 32px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.03em !important;
        margin-bottom: 16px !important;
    }
    
    /* ========== SECTION TITLES (H2) ========== */
    h2,
    .h2,
    .section-title__heading,
    .sec-title-saas__title,
    .about-saas__title {
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 12px !important;
    }
    
    /* ========== CARD TITLES (H3) ========== */
    h3,
    .h3,
    .service-card-saas__title,
    .service-card__title {
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        letter-spacing: -0.01em !important;
        margin-bottom: 8px !important;
    }
    
    /* ========== SUBHEADINGS (H4) ========== */
    h4,
    .h4 {
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
    }
    
    /* ========== BODY TEXT ========== */
    p,
    .hero-premium__subtitle,
    .about-saas__text,
    .service-card-saas__text,
    .cta-saas__text,
    .sec-title-saas__text {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }
    
    /* ========== SMALL TEXT ========== */
    small,
    .text-sm,
    .footer-saas__copyright {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* ========== SECTION TAGLINES ========== */
    .sec-title-saas__tagline,
    .section-title__tagline {
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        margin-bottom: 12px !important;
        color: #C41E28 !important;
    }
}

/* ============================================ */
/* SECTION 3: PREMIUM HERO SECTION */
/* Stripe/Apple quality hero */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Hero Section - Premium spacing */
    .hero-premium,
    section.hero-premium {
        padding: 24px 0 40px !important;
        min-height: auto !important;
        display: block !important; /* Remove flex centering */
    }
    
    /* Hero Content Container */
    .hero-premium__content {
        text-align: center !important;
        padding: 0 4px !important;
    }
    
    /* Hero Badge - Premium pill style */
    .hero-premium__badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 20px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 100px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        margin-bottom: 20px !important;
    }
    
    .hero-premium__badge i {
        font-size: 14px !important;
        color: #C41E28 !important;
    }
    
    /* Hero Title - Breathing room */
    .hero-premium__title {
        margin-bottom: 20px !important;
    }
    
    /* Hero Subtitle - Balanced spacing */
    .hero-premium__subtitle {
        margin-bottom: 28px !important;
        max-width: 100% !important;
        opacity: 0.9 !important;
    }
    
    /* Hero CTA Buttons - Premium layout */
    .hero-premium__actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 32px !important;
        padding: 0 16px !important;
    }
    
    .hero-premium__actions .btn-premium,
    .hero-premium__actions a[class*="btn"] {
        width: 100% !important;
        padding: 16px 24px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        justify-content: center !important;
    }
    
    /* Trust Indicators - Compact horizontal */
    .hero-premium__trust {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding-top: 24px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin-top: 8px !important;
    }
    
    .hero-premium__trust-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    .hero-premium__trust-item i {
        font-size: 16px !important;
        color: #C41E28 !important;
    }
}

/* ============================================ */
/* SECTION 4: PREMIUM CARD SYSTEM */
/* Modern SaaS card design */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Service Cards - Premium styling */
    .service-card-saas,
    .service-card,
    [class*="service-card"] {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        padding: 24px 20px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }
    
    .service-card-saas:hover,
    .service-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Card Icon Container - Premium circle */
    .service-icon-container,
    .service-card-saas__icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, rgba(196, 30, 40, 0.15) 0%, rgba(196, 30, 40, 0.05) 100%) !important;
        border: 1px solid rgba(196, 30, 40, 0.2) !important;
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }
    
    .service-icon-container i,
    .service-card-saas__icon i {
        font-size: 24px !important;
        color: #C41E28 !important;
    }
    
    /* Card Title */
    .service-card-saas__title {
        font-size: 18px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        color: #ffffff !important;
    }
    
    /* Card Description */
    .service-card-saas__text,
    .service-card-saas p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.7) !important;
        margin-bottom: 0 !important;
    }
    
    /* Card Grid - Proper spacing */
    .services-premium-grid .row,
    .row[class*="service"] {
        --bs-gutter-y: 16px !important;
        --bs-gutter-x: 16px !important;
    }
}

/* ============================================ */
/* SECTION 5: FEATURES PANEL - PREMIUM GLASS */
/* Visible earlier, better positioned */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Office Image Container - Tighter */
    .office-image-container,
    .hero-premium__image,
    .hero-premium__image-placeholder {
        margin-top: 24px !important;
        margin-bottom: 0 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }
    
    /* Features Panel - Premium glass */
    .features-panel {
        position: absolute !important;
        top: 12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 24px) !important;
        max-width: 360px !important;
        padding: 12px 8px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
        z-index: 20 !important;
        display: flex !important;
        justify-content: space-around !important;
        flex-wrap: nowrap !important;
    }
    
    .features-panel__item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 8px 6px !important;
        flex: 1 !important;
    }
    
    .features-panel__icon,
    .features-panel svg,
    .features-panel__item svg {
        width: 20px !important;
        height: 20px !important;
        color: #C41E28 !important;
    }
    
    .features-panel__label {
        font-size: 9px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        text-transform: uppercase !important;
        color: #1a1d24 !important;
        white-space: nowrap !important;
    }
    
    /* Dividers */
    .features-panel__item:not(:last-child)::after {
        content: '' !important;
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 24px !important;
        width: 1px !important;
        background: rgba(255, 255, 255, 0.25) !important;
    }
}

/* ============================================ */
/* SECTION 6: ABOUT SECTION - PREMIUM LAYOUT */
/* ============================================ */

@media screen and (max-width: 767px) {
    .about-saas,
    section.about-saas {
        padding: 48px 0 !important;
    }
    
    .about-saas__content {
        text-align: center !important;
    }
    
    .about-saas__title {
        margin-bottom: 16px !important;
    }
    
    .about-saas__text {
        margin-bottom: 24px !important;
    }
    
    /* About Features Grid */
    .about-saas__features {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 24px !important;
    }
    
    .about-saas__feature {
        display: flex !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 20px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 14px !important;
        text-align: left !important;
    }
    
    .about-saas__feature-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, rgba(196, 30, 40, 0.15) 0%, rgba(196, 30, 40, 0.05) 100%) !important;
        border-radius: 12px !important;
    }
    
    .about-saas__feature-icon i {
        font-size: 20px !important;
        color: #C41E28 !important;
    }
    
    .about-saas__feature h4 {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    
    .about-saas__feature p {
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        margin-bottom: 0 !important;
    }
    
    /* About CTA */
    .about-saas__cta {
        margin-top: 32px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }
}

/* ============================================ */
/* SECTION 7: CTA SECTIONS - PREMIUM */
/* ============================================ */

@media screen and (max-width: 767px) {
    .cta-saas,
    section.cta-saas,
    [class*="cta-section"] {
        padding: 48px 0 !important;
        text-align: center !important;
    }
    
    .cta-saas__content {
        padding: 32px 24px !important;
        background: linear-gradient(135deg, rgba(196, 30, 40, 0.1) 0%, rgba(196, 30, 40, 0.02) 100%) !important;
        border: 1px solid rgba(196, 30, 40, 0.15) !important;
        border-radius: 20px !important;
    }
    
    .cta-saas__title {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }
    
    .cta-saas__text {
        margin-bottom: 24px !important;
    }
    
    .cta-saas__buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .cta-saas__buttons .btn,
    .cta-saas__buttons a[class*="btn"] {
        width: 100% !important;
        padding: 16px 24px !important;
        border-radius: 12px !important;
    }
}

/* ============================================ */
/* SECTION 8: SECTION TRANSITIONS & DIVIDERS */
/* Subtle visual separation */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Subtle gradient dividers between sections */
    .hero-premium + section::before,
    .about-saas + section::before,
    .services-premium-grid + section::before {
        content: '' !important;
        display: block !important;
        height: 1px !important;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 255, 255, 0.08) 20%, 
            rgba(255, 255, 255, 0.08) 80%, 
            transparent 100%) !important;
        margin-bottom: 0 !important;
    }
    
    /* Section backgrounds - subtle variation */
    .about-saas {
        background: linear-gradient(180deg, 
            rgba(15, 17, 23, 1) 0%, 
            rgba(20, 22, 30, 1) 100%) !important;
    }
    
    .services-premium-grid {
        background: rgba(15, 17, 23, 1) !important;
    }
    
    .cta-saas {
        background: linear-gradient(180deg, 
            rgba(20, 22, 30, 1) 0%, 
            rgba(15, 17, 23, 1) 100%) !important;
    }
}

/* ============================================ */
/* SECTION 9: IMAGE HANDLING - PROFESSIONAL */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Hero/Section Images - Full width, proper aspect */
    .hero-premium__img,
    .office-image,
    .about-saas img,
    section img:not(.footer-saas__logo):not(.main-header__logo img):not([class*="icon"]) {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 16px !important;
    }
    
    /* Image containers */
    .hero-premium__image-placeholder {
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Service images */
    .service-card-saas img {
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }
}

/* ============================================ */
/* SECTION 10: FOOTER - MOBILE OPTIMIZED */
/* ============================================ */

@media screen and (max-width: 767px) {
    .footer-saas {
        padding-top: 48px !important;
    }
    
    .footer-saas__top {
        padding-bottom: 32px !important;
    }
    
    /* Footer brand section */
    .footer-saas__brand {
        text-align: center !important;
        margin-bottom: 32px !important;
    }
    
    .footer-saas__logo {
        margin: 0 auto 16px !important;
    }
    
    .footer-saas__tagline {
        font-size: 15px !important;
        max-width: 280px !important;
        margin: 0 auto 20px !important;
    }
    
    /* Footer links - 2 column grid */
    .footer-saas__links-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }
    
    .footer-saas__widget-title,
    .footer-saas__title {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .footer-saas__widget-list a,
    .footer-saas__links a {
        font-size: 14px !important;
        padding: 6px 0 !important;
        display: block !important;
    }
    
    /* Footer bottom */
    .footer-saas__bottom {
        padding: 20px 0 !important;
        padding-bottom: 100px !important; /* Space for floating buttons */
        text-align: center !important;
    }
    
    .footer-saas__copyright {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
    
    /* Social icons */
    .footer-saas__social {
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    
    .footer-saas__social a {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 10px !important;
        font-size: 16px !important;
    }
}

/* ============================================ */
/* SECTION 11: SCROLL & OVERFLOW FIXES */
/* Ensure perfect scrolling - FIX SCROLL LOCK */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Root scroll fix - HIGH SPECIFICITY */
    html,
    html body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-behavior: smooth !important;
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Body - scrollable by default */
    body:not(.astro-nav-open) {
        overflow-y: auto !important;
        position: relative !important;
        height: auto !important;
    }
    
    /* Page wrapper - allow scroll */
    html body .page-wrapper {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        min-height: 100vh !important;
        height: auto !important;
        position: relative !important;
    }
    
    /* All sections - visible overflow for content */
    html body section,
    html body .section,
    html body header,
    html body footer,
    html body main {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Remove any fixed heights that block scrolling */
    html body .hero-premium {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        position: relative !important;
    }
    
    /* Ensure body scroll lock only when menu is open */
    html body.astro-nav-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        top: var(--scroll-y, 0) !important;
    }
}

/* ============================================ */
/* SECTION 12: FLOATING BUTTONS - OPTIMIZED */
/* ============================================ */

@media screen and (max-width: 767px) {
    .whatsapp-float {
        bottom: 20px !important;
        right: 16px !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4) !important;
    }
    
    .whatsapp-float i {
        font-size: 24px !important;
    }
    
    .scroll-to-top {
        bottom: 20px !important;
        left: 16px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
    }
}

/* ============================================ */
/* SECTION 13: SECTION TITLE BLOCKS */
/* Consistent section headers */
/* ============================================ */

@media screen and (max-width: 767px) {
    .sec-title-saas,
    .section-title {
        text-align: center !important;
        margin-bottom: 32px !important;
    }
    
    .sec-title-saas__tagline {
        display: inline-block !important;
        padding: 6px 16px !important;
        background: rgba(196, 30, 40, 0.1) !important;
        border-radius: 100px !important;
        margin-bottom: 16px !important;
    }
    
    .sec-title-saas__title {
        margin-bottom: 12px !important;
    }
    
    .sec-title-saas__text {
        max-width: 100% !important;
        margin: 0 auto !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }
}

/* ============================================ */
/* SECTION 14: FORM ELEMENTS - MOBILE */
/* ============================================ */

@media screen and (max-width: 767px) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        min-height: 52px !important;
        padding: 14px 18px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }
    
    .form-control:focus,
    input:focus,
    textarea:focus {
        border-color: #C41E28 !important;
        box-shadow: 0 0 0 3px rgba(196, 30, 40, 0.15) !important;
    }
    
    textarea {
        min-height: 120px !important;
    }
    
    .form-group,
    .mb-3 {
        margin-bottom: 16px !important;
    }
    
    label {
        font-size: 14px !important;
        font-weight: 500 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
}

/* ============================================ */
/* SECTION 15: BUTTONS - CONSISTENT MOBILE */
/* ============================================ */

@media screen and (max-width: 767px) {
    .btn,
    .btn-modern,
    .btn-premium,
    [class*="btn-"] {
        min-height: 52px !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    /* Full width buttons in hero/CTA */
    .hero-premium__actions .btn,
    .cta-saas .btn {
        width: 100% !important;
    }
}

/* ============================================ */
/* SECTION 16: PAGE HEADER - INNER PAGES */
/* ============================================ */

@media screen and (max-width: 767px) {
    .page-header {
        padding: 80px 0 40px !important;
        text-align: center !important;
    }
    
    .page-header__title {
        font-size: 28px !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
    }
    
    .page-header__breadcrumb {
        justify-content: center !important;
        font-size: 14px !important;
    }
}

/* ============================================ */
/* SECTION 17: CONTACT PAGE - MOBILE */
/* ============================================ */

@media screen and (max-width: 767px) {
    .contact-info-modern {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .contact-info-modern__item {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 20px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 14px !important;
    }
    
    .contact-info-modern__icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, rgba(196, 30, 40, 0.15) 0%, rgba(196, 30, 40, 0.05) 100%) !important;
        border-radius: 14px !important;
        font-size: 20px !important;
        color: #C41E28 !important;
    }
    
    .contact-info-modern__content {
        flex: 1 !important;
    }
    
    .contact-info-modern__title {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
    }
    
    .contact-info-modern__text {
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }
}

/* ============================================ */
/* SECTION 18: ANIMATIONS - MOBILE OPTIMIZED */
/* Keep animations but optimize for mobile */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Reduce animation distance for mobile */
    .wow.fadeInUp {
        animation-duration: 0.6s !important;
    }
    
    /* Ensure smooth scrolling doesn't conflict */
    * {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ============================================ */
/* SECTION 19: SMALLER MOBILE (480px and below) */
/* Extra refinements for small screens */
/* ============================================ */

@media screen and (max-width: 480px) {
    /* Tighter container padding */
    .container,
    .container-fluid,
    .container-xxl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Smaller hero title */
    .hero-premium__title {
        font-size: 28px !important;
    }
    
    /* Smaller section titles */
    h2,
    .sec-title-saas__title {
        font-size: 24px !important;
    }
    
    /* Card adjustments */
    .service-card-saas {
        padding: 20px 16px !important;
    }
    
    /* Features panel - tighter */
    .features-panel {
        padding: 10px 6px !important;
    }
    
    .features-panel__label {
        font-size: 8px !important;
    }
    
    .features-panel__icon,
    .features-panel svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ============================================ */
/* SECTION 20: VERY SMALL MOBILE (360px) */
/* ============================================ */

@media screen and (max-width: 360px) {
    .hero-premium__title {
        font-size: 26px !important;
    }
    
    h2,
    .sec-title-saas__title {
        font-size: 22px !important;
    }
    
    .hero-premium__badge {
        font-size: 11px !important;
        padding: 8px 14px !important;
    }
    
    .service-card-saas {
        padding: 18px 14px !important;
    }
    
    .btn,
    .btn-premium {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}

/* ============================================ */
/* END OF PROFESSIONAL MOBILE REDESIGN */
/* ============================================ */

/* ============================================ */
/* ============================================ */
/* TARGETED MOBILE FIXES - 4 SPECIFIC ISSUES */
/* Applied only below 768px - NO desktop changes */
/* ============================================ */
/* ============================================ */

/* ============================================ */
/* FIX 1: HAMBURGER MENU NOT WORKING */
/* Ensure hamburger is clickable and visible */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Hamburger button - MUST be clickable */
    .astro-hamburger,
    button.astro-hamburger,
    #astroHamburger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 100002 !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    /* Ensure hamburger lines are visible */
    .astro-hamburger__line {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }
    
    /* Header right section - ensure clickable */
    .main-header__right {
        display: flex !important;
        align-items: center !important;
        pointer-events: auto !important;
        z-index: 100001 !important;
        position: relative !important;
    }
    
    /* Ensure no overlay blocks the hamburger */
    .main-header,
    .main-header__inner,
    .main-header .container,
    .main-header .container-xxl {
        pointer-events: auto !important;
        overflow: visible !important;
    }
    
    /* Mobile nav drawer - proper z-index */
    .astro-mobile-nav {
        z-index: 100003 !important;
    }
    
    .astro-mobile-nav__overlay {
        z-index: 100003 !important;
        pointer-events: none !important;
    }
    
    .astro-mobile-nav.is-open .astro-mobile-nav__overlay {
        pointer-events: auto !important;
    }
    
    .astro-mobile-nav__drawer {
        z-index: 100004 !important;
    }
    
    /* Close button - ensure clickable */
    .astro-mobile-nav__close,
    #astroNavClose {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 100005 !important;
    }
}

/* ============================================ */
/* FIX 2: HUGE VERTICAL GAP BETWEEN HEADER & HERO */
/* Remove all spacing between header and hero badge */
/* ULTRA-HIGH SPECIFICITY to override visual-fixes.css */
/* Target: 0-8px max gap */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Header - flush bottom, minimal padding */
    html body header.main-header,
    html body .main-header,
    html body .sticky-header,
    html body .sticky-header--normal {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        padding-top: 8px !important;
    }
    
    html body .main-header__inner {
        padding-top: 0 !important;
        padding-bottom: 8px !important;
        margin: 0 !important;
    }
    
    /* Hero section - FLUSH (0-8px) with ULTRA-MAXIMUM specificity */
    /* Overrides visual-fixes.css lines 516, 610, 643-644, 660, 3943, 4869, 5047 */
    /* CRITICAL: Remove min-height AND flex centering */
    html body .page-wrapper section.hero-premium,
    html body .page-wrapper .hero-premium,
    html body section.hero-premium,
    html body .hero-premium,
    html body .hero-saas,
    body .page-wrapper section.hero-premium,
    body section.hero-premium,
    body .hero-premium {
        padding: 8px 0 40px !important;
        padding-top: 8px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
        max-height: none !important;
        display: block !important; /* Override flex centering */
        align-items: initial !important; /* Remove vertical centering */
    }
    
    /* Hero inner container - ZERO spacing */
    html body .hero-premium > *:first-child,
    html body .hero-premium__container,
    html body .hero-premium > .container,
    html body .hero-premium .container,
    html body .hero-premium > div.container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Hero row - ZERO top spacing */
    html body .hero-premium .row,
    html body .hero-premium > .container > .row {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Hero columns - ZERO top spacing */
    html body .hero-premium .row > div,
    html body .hero-premium .col-lg-6 {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Hero content wrapper - ZERO top spacing */
    html body .hero-premium__content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Badge - minimal top margin */
    html body .hero-premium__badge {
        margin-top: 0 !important;
    }
    
    /* Page wrapper - no gap */
    html body .page-wrapper {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Remove topbar completely on mobile */
    html body .topbar-one {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hero overlay - no top spacing */
    html body .hero-premium__overlay {
        top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Hero shapes - no offset */
    html body .hero-premium__shapes {
        top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Safe area inset override - no extra space */
    html body .hero-premium,
    html body section.hero-premium {
        padding-top: 8px !important;
        padding-top: max(8px, env(safe-area-inset-top)) !important;
    }
}

/* ============================================ */
/* FIX 3: BADGE ALIGNMENT (ICON + TEXT) */
/* Perfect vertical alignment at 390px */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Badge container - proper flex alignment with HIGH SPECIFICITY */
    html body .hero-premium__badge {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 12px 20px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 100px !important;
        margin: 0 auto 20px !important;
        max-width: calc(100% - 32px) !important;
        vertical-align: middle !important;
    }
    
    /* Badge icon - perfectly vertically centered */
    html body .hero-premium__badge i,
    html body .hero-premium__badge .fas,
    html body .hero-premium__badge .fa-shield-alt {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        line-height: 1 !important;
        color: #C41E28 !important;
        flex-shrink: 0 !important;
        width: 16px !important;
        height: 16px !important;
        vertical-align: middle !important;
        margin: 0 !important;
    }
    
    /* Badge text - perfectly vertically centered */
    html body .hero-premium__badge span {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        margin: 0 !important;
    }
}

/* Extra small screens - tighter badge */
@media screen and (max-width: 390px) {
    .hero-premium__badge {
        padding: 10px 16px !important;
        gap: 8px !important;
    }
    
    .hero-premium__badge span {
        font-size: 10px !important;
        letter-spacing: 0.3px !important;
    }
    
    .hero-premium__badge i {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }
}

/* ============================================ */
/* FIX 4: INVISIBLE TEXT ON DARK BACKGROUND */
/* Make section titles WHITE for visibility */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* "Protect today. Secure tomorrow." - Under office image - HIGH SPECIFICITY */
    html body .about-saas .sec-title-saas__title,
    html body .about-saas__content .sec-title-saas__title,
    html body section.about-saas .sec-title-saas__title,
    html body .about-saas h2.sec-title-saas__title {
        color: #ffffff !important;
        opacity: 1 !important;
    }
    
    /* "Comprehensive Insurance Services" - Under Our Solutions - HIGH SPECIFICITY */
    html body .services-premium-grid .sec-title-saas__title,
    html body .sec-title-modern .sec-title-saas__title,
    html body section.services-premium-grid .sec-title-saas__title,
    html body .services-premium-grid h2.sec-title-saas__title {
        color: #ffffff !important;
        opacity: 1 !important;
    }
    
    /* ALL section titles - ensure white on mobile - HIGH SPECIFICITY */
    html body .sec-title-saas__title,
    html body h2.sec-title-saas__title {
        color: #ffffff !important;
        opacity: 1 !important;
    }
    
    /* Section taglines - red accent color */
    html body .sec-title-saas__tagline {
        color: #C41E28 !important;
        opacity: 1 !important;
    }
    
    /* Section description text - light gray for readability */
    html body .sec-title-saas__text {
        color: rgba(255, 255, 255, 0.85) !important;
        opacity: 1 !important;
    }
    
    /* About section text */
    html body .about-saas__text,
    html body .about-saas p {
        color: rgba(255, 255, 255, 0.85) !important;
        opacity: 1 !important;
    }
}

/* ============================================ */
/* FIX: MENU ITEM CUT-OFF (Solutions text) */
/* Add left padding to prevent text truncation */
/* ============================================ */

@media screen and (max-width: 767px) {
    /* Menu items - prevent text cut-off with proper padding */
    html body .astro-menu__item {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }
    
    /* Menu links - full width with proper padding */
    html body .astro-menu__link {
        padding: 16px 24px !important;
        width: 100% !important;
        text-align: left !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        overflow: visible !important;
    }
    
    /* Menu link text - prevent truncation */
    html body .astro-menu__link span {
        white-space: nowrap !important;
        overflow: visible !important;
    }
    
    /* Submenu items - consistent padding */
    html body .astro-submenu li {
        padding-left: 0 !important;
    }
    
    html body .astro-submenu a {
        padding: 12px 24px 12px 40px !important;
        display: block !important;
    }
    
    /* Mobile drawer - ensure full width */
    html body .astro-mobile-nav__drawer {
        width: 320px !important;
        max-width: 90vw !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* ============================================ */
/* END OF TARGETED MOBILE FIXES */
/* ============================================ */

/* ============================================ */
/* ============================================ */
/* DESKTOP SPACING ENHANCEMENTS */
/* Enterprise-level improvements (Stripe/Lemonade/Apple quality) */
/* DESKTOP ONLY - Does NOT affect mobile */
/* ============================================ */
/* ============================================ */

@media (min-width: 1024px) {
    
    /* ============================================ */
    /* 1. HERO SECTION IMPROVEMENTS */
    /* ============================================ */
    
    /* Hero - Premium top padding and spacing */
    .hero-premium {
        padding: 120px 0 80px !important; /* Increased from 100px to 120px */
    }
    
    /* Hero container - Wider horizontal padding */
    .hero-premium__container,
    .hero-premium > .container {
        padding-left: 48px !important; /* Increased from 32px */
        padding-right: 48px !important;
    }
    
    /* Hero row - Wider gutter between text and image */
    .hero-premium .row {
        --bs-gutter-x: 80px !important; /* Increased from default 24px */
    }
    
    /* ============================================ */
    /* 2. SERVICE CARDS - PREMIUM SPACING */
    /* Refined for professional balance */
    /* ============================================ */
    
    /* Card container - Asymmetric padding for balance */
    .service-card-saas,
    .service-card {
        padding: 40px 32px 28px !important; /* top left-right bottom - refined */
        margin-bottom: 32px !important; /* Increased from 20px */
    }
    
    /* Card icon - Premium size and spacing */
    .service-card-saas__icon,
    .service-icon-container {
        width: 64px !important; /* Explicit desktop size */
        height: 64px !important;
        margin-bottom: 24px !important; /* Increased from 12px */
    }
    
    .service-card-saas__icon i,
    .service-icon-container i {
        font-size: 28px !important; /* Larger icon */
    }
    
    /* Card title - Professional spacing */
    .service-card-saas__title,
    .service-card-saas h3 {
        margin-bottom: 16px !important; /* Increased from 6px - CRITICAL */
        margin-top: 0 !important;
    }
    
    /* Card text - Clean, no bottom margin */
    .service-card-saas__text,
    .service-card-saas p {
        margin-bottom: 0 !important; /* Tightened from 8px */
        line-height: 1.6 !important;
    }
    
    /* Services grid - Refined gutters */
    .services-premium-grid .row {
        --bs-gutter-x: 40px !important; /* Horizontal spacing maintained */
        --bs-gutter-y: 24px !important; /* Tightened from 32px */
    }
    
    /* ============================================ */
    /* 3. SECTION TITLES - LARGER FOR IMPACT */
    /* ============================================ */
    
    /* Section H2 - More prominent */
    .sec-title-saas__title,
    .section-title__heading,
    h2.sec-title-saas__title {
        font-size: 48px !important; /* Increased from 40px */
        line-height: 1.2 !important;
    }
    
    /* ============================================ */
    /* 4. ABOUT SECTION - BETTER BALANCE */
    /* ============================================ */
    
    /* About row - Wider gap between image and text */
    .about-saas .row {
        --bs-gutter-x: 80px !important; /* Increased from 24px */
    }
    
    /* About content - Breathing room on right */
    .about-saas__content {
        padding-right: 40px !important;
    }
    
    /* ============================================ */
    /* 5. GLOBAL CONTAINER SPACING */
    /* Stripe-level horizontal padding */
    /* ============================================ */
    
    /* Standard containers - Wider padding */
    .container,
    .container-xxl,
    .services-premium-grid > .container,
    .about-saas > .container,
    .cta-saas > .container {
        padding-left: 60px !important; /* Increased from 32px */
        padding-right: 60px !important;
    }
    
    /* ============================================ */
    /* 6. CTA SECTION - IMPROVED HIERARCHY */
    /* ============================================ */
    
    /* CTA title - More margin below */
    .cta-saas__title {
        margin-bottom: 24px !important; /* Increased from 16px */
    }
    
    /* CTA buttons - Clear separation from text */
    .cta-saas__buttons,
    .cta-saas .btn-group,
    .cta-saas__actions {
        margin-top: 48px !important;
    }
    
    /* ============================================ */
    /* 7. SECTION VERTICAL RHYTHM */
    /* Enterprise-level section spacing */
    /* ============================================ */
    
    /* Major sections - Premium padding */
    .services-premium-grid,
    .about-saas,
    .cta-saas {
        padding: 120px 0 !important; /* Increased from 96px */
    }
    
    /* Footer - Slightly less */
    .footer-saas {
        padding: 80px 0 60px !important;
    }
}

/* ============================================ */
/* EXTRA LARGE SCREENS - EVEN MORE SPACIOUS */
/* ============================================ */

@media (min-width: 1440px) {
    /* Containers - Maximum breathing room */
    .container,
    .container-xxl,
    .hero-premium__container,
    .services-premium-grid > .container,
    .about-saas > .container,
    .cta-saas > .container {
        padding-left: 80px !important; /* Premium wide screens */
        padding-right: 80px !important;
    }
}

/* ============================================ */
/* END OF DESKTOP SPACING ENHANCEMENTS */
/* ============================================ */

/* ============================================ */
/* ============================================ */
/* FINAL MOBILE LAYOUT STABILIZATION */
/* Comprehensive fixes for all mobile issues */
/* MOBILE ONLY - max-width: 767px */
/* ============================================ */
/* ============================================ */

@media screen and (max-width: 767px) {
    
    /* ============================================ */
    /* SCROLL FIX - Ensure page scrolls smoothly */
    /* Critical fix for scroll lock after menu close */
    /* ============================================ */
    
    html {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100% !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        position: relative !important;
    }
    
    body:not(.astro-nav-open) {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: static !important;
        top: auto !important;
    }
    
    /* CRITICAL: Ensure scroll lock ONLY when menu is open */
    body.astro-nav-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .page-wrapper {
        overflow-y: visible !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        position: relative !important;
    }
    
    /* ============================================ */
    /* HERO SECTION - FINAL OVERRIDE */
    /* Absolute maximum specificity to kill the gap */
    /* ============================================ */
    
    /* Remove ALL vertical centering and min-height */
    html body div.page-wrapper section.hero-premium,
    html body .page-wrapper section.hero-premium#main-content,
    html body section.hero-premium#main-content {
        min-height: 0 !important;
        height: auto !important;
        display: block !important;
        padding: 8px 0 40px !important;
        margin: 0 !important;
    }
    
    /* ============================================ */
    /* SECTIONS - Ensure all are visible */
    /* ============================================ */
    
    section,
    .section,
    [class*="-section"] {
        position: relative !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    /* ============================================ */
    /* IMAGES & ICONS - No stretching */
    /* ============================================ */
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .service-card-saas__icon i,
    .service-icon-container i {
        width: auto !important;
        aspect-ratio: 1 !important;
    }
    
    /* ============================================ */
    /* BUTTONS - Proper tap targets */
    /* ============================================ */
    
    .btn,
    .btn-modern,
    .btn-premium,
    button,
    a.btn {
        min-height: 48px !important;
        min-width: 48px !important;
        touch-action: manipulation !important;
    }
    
    /* ============================================ */
    /* WHITESPACE - Consistent container padding */
    /* ============================================ */
    
    .container,
    .container-fluid,
    .container-xxl {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* ============================================ */
    /* NO HORIZONTAL SCROLL */
    /* ============================================ */
    
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    html,
    body,
    .page-wrapper {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* ============================================ */
/* END OF FINAL MOBILE LAYOUT STABILIZATION */
/* ============================================ */

/* ============================================ */
/* ============================================ */
/* CROSS-BROWSER MOBILE COMPATIBILITY */
/* Ensures consistent rendering across all mobile browsers */
/* Safari iOS, Chrome Android, Firefox Mobile, Samsung Internet */
/* ============================================ */
/* ============================================ */

@media screen and (max-width: 767px) {
    
    /* ============================================ */
    /* iOS SAFARI SPECIFIC FIXES */
    /* ============================================ */
    
    /* Prevent iOS zoom on form inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents iOS zoom */
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
    
    /* iOS scroll bounce fix */
    html {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: none !important;
    }
    
    body {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: none !important;
    }
    
    /* iOS safe area insets for notch */
    .main-header {
        padding-top: max(8px, env(safe-area-inset-top)) !important;
    }
    
    .footer-saas {
        padding-bottom: max(60px, calc(60px + env(safe-area-inset-bottom))) !important;
    }
    
    /* ============================================ */
    /* TRANSFORM & TRANSITION PREFIXES */
    /* For older WebKit browsers */
    /* ============================================ */
    
    .astro-mobile-nav__drawer {
        -webkit-transform: translateX(100%) !important;
        -moz-transform: translateX(100%) !important;
        transform: translateX(100%) !important;
        -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        -moz-transition: -moz-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .astro-mobile-nav.is-open .astro-mobile-nav__drawer {
        -webkit-transform: translateX(0) !important;
        -moz-transform: translateX(0) !important;
        transform: translateX(0) !important;
    }
    
    /* ============================================ */
    /* ANDROID CHROME / SAMSUNG INTERNET FIXES */
    /* ============================================ */
    
    /* Prevent address bar collapse issues */
    html {
        height: -webkit-fill-available !important;
    }
    
    body {
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
    }
    
    /* Fix viewport units on Android */
    .hero-premium {
        min-height: 0 !important;
        height: auto !important;
    }
    
    /* ============================================ */
    /* SAMSUNG INTERNET SPECIFIC */
    /* ============================================ */
    
    /* Fix Samsung's aggressive text inflation */
    body {
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    
    /* ============================================ */
    /* FIREFOX MOBILE FIXES */
    /* ============================================ */
    
    /* Firefox Mobile scrollbar fix */
    * {
        scrollbar-width: thin !important;
    }
    
    /* ============================================ */
    /* HERO SECTION - ABSOLUTE OVERRIDE */
    /* Kill all conflicting rules from other CSS files */
    /* ============================================ */
    
    /* ULTRA-MAXIMUM SPECIFICITY - Overrides ALL 5 CSS files */
    html body div.page-wrapper section.hero-premium#main-content,
    html body .page-wrapper > section.hero-premium,
    html body section#main-content.hero-premium {
        /* Kill height constraints */
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        
        /* Kill flex centering */
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        
        /* Set precise spacing */
        padding: 8px 0 40px !important;
        margin: 0 !important;
        
        /* Ensure proper rendering */
        position: relative !important;
        overflow: visible !important;
    }
    
    /* ============================================ */
    /* BUTTON TAP HIGHLIGHT FIXES */
    /* Consistent across all mobile browsers */
    /* ============================================ */
    
    button,
    a,
    .btn,
    .astro-hamburger {
        -webkit-tap-highlight-color: rgba(196, 30, 40, 0.2) !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        user-select: none !important;
    }
    
    /* ============================================ */
    /* FONT SMOOTHING - Consistent text rendering */
    /* ============================================ */
    
    html,
    body,
    * {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
    }
}

/* ============================================ */
/* END OF CROSS-BROWSER MOBILE COMPATIBILITY */
/* ============================================ */

/* ============================================ */
/* ============================================ */
/* FINAL MOBILE AUDIT FIXES */
/* Addresses remaining layout issues */
/* December 2024 */
/* ============================================ */
/* ============================================ */

@media screen and (max-width: 767px) {
    
    /* ============================================ */
    /* FIX: HERO SECTION - Remove excessive top spacing */
    /* Override theme.css line ~20669 */
    /* ============================================ */
    
    html body .page-wrapper section.hero-premium,
    html body section.hero-premium,
    section.hero-premium {
        padding-top: 16px !important;
        margin-top: 0 !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Hero container - no extra top padding */
    .hero-premium > .container,
    .hero-premium .container {
        padding-top: 0 !important;
    }
    
    /* Hero row - proper stacking */
    .hero-premium .row {
        margin-top: 0 !important;
        flex-direction: column-reverse !important;
    }
    
    /* ============================================ */
    /* FIX: FOOTER 2-COLUMN GRID OPTIMIZATION */
    /* Proper alignment and spacing for link columns */
    /* ============================================ */
    
    /* Footer top section - consistent spacing */
    .footer-saas__top .row {
        --bs-gutter-x: 16px !important;
        --bs-gutter-y: 24px !important;
    }
    
    /* Company info - full width, centered */
    .footer-saas__top .col-lg-4.col-md-6:first-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 16px !important;
    }
    
    /* Footer logo centered */
    .footer-saas__logo {
        display: block !important;
        text-align: center !important;
    }
    
    /* Footer tagline centered */
    .footer-saas__tagline {
        text-align: center !important;
        max-width: 320px !important;
        margin: 0 auto 20px !important;
    }
    
    /* Social icons centered */
    .footer-saas__social {
        justify-content: center !important;
    }
    
    /* Link columns - proper 2-column grid */
    .footer-saas__top .col-6 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Widget titles */
    .footer-saas__title {
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }
    
    /* Widget links */
    .footer-saas__links li {
        margin-bottom: 10px !important;
    }
    
    .footer-saas__links a {
        font-size: 14px !important;
    }
    
    /* Contact info styling */
    .footer-saas__contact li {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }
    
    .footer-saas__contact i {
        color: #C41E28 !important;
        font-size: 14px !important;
        margin-top: 2px !important;
        flex-shrink: 0 !important;
    }
    
    .footer-saas__contact span,
    .footer-saas__contact a {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    
    /* Footer bottom - proper spacing for floating buttons */
    .footer-saas__bottom {
        padding: 24px 0 100px !important;
        text-align: center !important;
    }
    
    .footer-saas__bottom-content {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .footer-saas__legal {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
    }
    
    .footer-saas__legal a {
        font-size: 13px !important;
    }
    
    /* ============================================ */
    /* FIX: SERVICE CARDS - Consistent spacing */
    /* Title-to-text gap optimization */
    /* ============================================ */
    
    .service-card-saas {
        padding: 20px 16px !important;
        margin-bottom: 16px !important;
    }
    
    .service-card-saas__title,
    .service-card-saas h3 {
        font-size: 17px !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }
    
    .service-card-saas__text,
    .service-card-saas p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-bottom: 0 !important;
    }
    
    .service-icon-container {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 14px !important;
    }
    
    .service-icon-container i {
        font-size: 22px !important;
    }
    
    /* ============================================ */
    /* FIX: SECTION VERTICAL RHYTHM */
    /* Consistent padding across all sections */
    /* ============================================ */
    
    .services-premium-grid,
    .about-saas,
    .cta-saas {
        padding: 48px 0 !important;
    }
    
    /* Section title blocks */
    .sec-title-saas {
        margin-bottom: 32px !important;
    }
    
    .sec-title-saas__tagline {
        margin-bottom: 12px !important;
    }
    
    .sec-title-saas__title {
        margin-bottom: 12px !important;
    }
    
    .sec-title-saas__text {
        margin-bottom: 0 !important;
    }
    
    /* ============================================ */
    /* FIX: ABOUT SECTION - Better mobile layout */
    /* ============================================ */
    
    .about-saas .row {
        flex-direction: column !important;
    }
    
    .about-saas__image {
        margin-bottom: 24px !important;
    }
    
    .about-saas__content {
        text-align: center !important;
    }
    
    .about-saas__features {
        margin-top: 24px !important;
    }
    
    .about-saas__feature {
        text-align: left !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    /* ============================================ */
    /* FIX: CTA SECTION - Centered layout */
    /* ============================================ */
    
    .cta-saas {
        text-align: center !important;
    }
    
    .cta-saas__title {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }
    
    .cta-saas__text {
        margin-bottom: 24px !important;
    }
    
    .cta-saas__actions {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }
    
    .cta-saas__actions .btn {
        width: 100% !important;
        max-width: 300px !important;
    }
    
    /* ============================================ */
    /* FIX: FLOATING BUTTONS - Proper positioning */
    /* Avoid footer overlap */
    /* ============================================ */
    
    .whatsapp-float {
        bottom: 20px !important;
        right: 16px !important;
        width: 52px !important;
        height: 52px !important;
        z-index: 9999 !important;
    }
    
    .scroll-to-top {
        bottom: 20px !important;
        left: 16px !important;
        width: 44px !important;
        height: 44px !important;
        z-index: 9998 !important;
    }
    
    /* ============================================ */
    /* FIX: CONTAINER PADDING - Consistent edges */
    /* ============================================ */
    
    .container,
    .container-fluid,
    .container-xxl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ============================================ */
/* SMALLER MOBILE (480px) ADJUSTMENTS */
/* ============================================ */

@media screen and (max-width: 480px) {
    /* Tighter typography */
    .hero-premium__title {
        font-size: 28px !important;
    }
    
    .sec-title-saas__title,
    h2.sec-title-saas__title {
        font-size: 24px !important;
    }
    
    .service-card-saas__title {
        font-size: 16px !important;
    }
    
    /* Tighter section padding */
    .services-premium-grid,
    .about-saas,
    .cta-saas {
        padding: 40px 0 !important;
    }
    
    /* Footer adjustments */
    .footer-saas__bottom {
        padding-bottom: 90px !important;
    }
}

/* ============================================ */
/* VERY SMALL MOBILE (360px) ADJUSTMENTS */
/* ============================================ */

@media screen and (max-width: 360px) {
    .hero-premium__title {
        font-size: 26px !important;
    }
    
    .sec-title-saas__title {
        font-size: 22px !important;
    }
    
    .service-card-saas {
        padding: 18px 14px !important;
    }
    
    .service-card-saas__title {
        font-size: 15px !important;
    }
    
    .service-card-saas__text {
        font-size: 13px !important;
    }
    
    .footer-saas__links a {
        font-size: 13px !important;
    }
}

/* ============================================ */
/* END OF FINAL MOBILE AUDIT FIXES */
/* ============================================ */