/* ============================================ */
/* VISUAL QA FIXES - AFRIPRECISION */
/* Fixes identified during QA pass */
/* ============================================ */

/* ============================================ */
/* 0. GLOBAL CONTAINER SYSTEM - MAX-WIDTH 1320px */
/* Prevents content from stretching too wide on large screens */
/* ============================================ */

/* Base container - applies to all .container elements */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    width: 100% !important;
}

/* container-xxl gets same treatment for header/footer consistency */
.container-xxl {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    width: 100% !important;
}

/* Hero section container - ensure content stays within bounds */
.hero-premium__container,
.hero-premium > .container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Services grid container */
.services-premium-grid > .container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* About section container */
.about-modern > .container,
.about-saas > .container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* CTA section container */
.cta-saas > .container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Footer container */
.footer-saas > .container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Page header container */
.page-header > .container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Contact and form sections */
.contact-modern > .container,
.quote-section > .container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* FAQ section */
.faq-page > .container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tablet breakpoint - slightly reduce padding */
@media (max-width: 991px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    
    .hero-premium__container,
    .hero-premium > .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* Mobile breakpoint - reduce padding further */
@media (max-width: 767px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .hero-premium__container,
    .hero-premium > .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Small mobile breakpoint */
@media (max-width: 480px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .hero-premium__container,
    .hero-premium > .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ============================================ */
/* 1. WHATSAPP FLOATING BUTTON */
/* Clean, modern WhatsApp CTA button */
/* ============================================ */

/* Force WhatsApp button to be visible - overrides theme.css "display: none !important" */
/* POSITION: Bottom-right (swapped from left) */
.whatsapp-float,
a.whatsapp-float,
body .whatsapp-float {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    bottom: var(--space-6, 24px) !important;
    right: var(--space-6, 24px) !important;
    left: auto !important; /* Override any left positioning */
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    background: #25D366 !important;
    color: white !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    /* Reset any problematic inherited styles */
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    padding: 0 !important;
    gap: 0 !important;
    animation: none !important;
}

.whatsapp-float:hover,
a.whatsapp-float:hover,
body .whatsapp-float:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.4) !important;
    color: white !important;
    background: #22c55e !important;
}

.whatsapp-float:focus {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 3px !important;
}

/* WhatsApp Icon - Font Awesome */
.whatsapp-float i,
.whatsapp-float .fab,
.whatsapp-float .fa-whatsapp {
    font-size: 32px !important;
    line-height: 1 !important;
    color: white !important;
    /* Reset any problematic styles */
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
}

/* Hide text label - icon only design */
.whatsapp-float__text,
.whatsapp-float span {
    display: none !important;
}

/* Mobile adjustments - WhatsApp button stays bottom-right */
@media (max-width: 767px) {
    .whatsapp-float,
    a.whatsapp-float,
    body .whatsapp-float {
        bottom: var(--space-4, 16px) !important;
        right: var(--space-4, 16px) !important;
        left: auto !important;
        width: 56px !important;
        height: 56px !important;
    }
    
    .whatsapp-float i,
    .whatsapp-float .fab,
    .whatsapp-float .fa-whatsapp {
        font-size: 28px !important;
    }
}

/* Hide legacy floating badges completely */
.floating-badges,
.floating-badge {
    display: none !important;
}

/* ============================================ */
/* 2. DESKTOP NAVIGATION ENHANCEMENTS */
/* Breakpoints changed in theme.css: 1200px → 992px */
/* ============================================ */

/* Navigation item styling enhancements */
@media (min-width: 992px) {
    .main-menu .main-menu__list > li {
        padding: 20px 0 !important;
        position: relative !important;
    }
    
    .main-menu .main-menu__list > li + li {
        margin-left: 28px !important;
    }
    
    .main-menu .main-menu__list > li > a {
        font-family: var(--font-primary) !important;
        font-size: var(--text-base) !important;
        font-weight: var(--font-medium) !important;
        color: var(--text-primary) !important;
        transition: color var(--transition-fast) !important;
        display: flex !important;
        align-items: center !important;
        gap: var(--space-1) !important;
    }
    
    .main-menu .main-menu__list > li > a:hover,
    .main-menu .main-menu__list > li.current > a {
        color: var(--color-primary) !important;
    }
    
    /* Dropdown menu styling */
    .main-menu .main-menu__list li ul {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        min-width: 220px !important;
        background: var(--bg-primary) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--shadow-xl) !important;
        border: 1px solid var(--border-light) !important;
        padding: var(--space-2) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(10px) !important;
        transition: all var(--transition-base) !important;
        z-index: 1000 !important;
        flex-direction: column !important;
    }
    
    .main-menu .main-menu__list li:hover > ul {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    
    .main-menu .main-menu__list li ul li {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .main-menu .main-menu__list li ul li a {
        display: block !important;
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--text-sm) !important;
        color: var(--text-secondary) !important;
        border-radius: var(--radius-md) !important;
        white-space: nowrap !important;
    }
    
    .main-menu .main-menu__list li ul li a:hover {
        background: var(--color-primary-lighter) !important;
        color: var(--color-primary) !important;
    }
    
    /* Nested dropdown (submenu-inner) */
    .main-menu .main-menu__list li ul li ul,
    .main-menu .submenu-inner ul {
        top: 0 !important;
        left: 100% !important;
        margin-left: 4px !important;
    }
}

/* ============================================ */
/* 3. ACCESSIBILITY - FOCUS STYLES */
/* ============================================ */

/* Visible focus rings for all interactive elements */
*:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 3px !important;
}

/* Remove default outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none !important;
}

/* Specific focus styles for buttons */
.btn:focus-visible,
button:focus-visible,
[type="submit"]:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px var(--color-primary-light) !important;
}

/* Focus styles for form inputs */
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px var(--color-primary-light) !important;
}

/* Focus styles for links */
a:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    border-radius: var(--radius-sm) !important;
}

/* Skip to content link */
.skip-to-content {
    position: absolute !important;
    top: -100px !important;
    left: var(--space-4) !important;
    padding: var(--space-3) var(--space-5) !important;
    background: var(--color-primary) !important;
    color: white !important;
    font-weight: var(--font-semibold) !important;
    border-radius: var(--radius-md) !important;
    z-index: 10000 !important;
    transition: top var(--transition-fast) !important;
}

.skip-to-content:focus {
    top: var(--space-4) !important;
}

/* ============================================ */
/* 4. COOKIE BANNER - FIX DISPLAY */
/* ============================================ */

.cookie-banner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--gray-900) !important;
    padding: var(--space-5) var(--space-6) !important;
    z-index: 9998 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
    /* Hidden by default - JS controls visibility via fadeIn/fadeOut */
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.cookie-banner__content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-6) !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 1200px !important;
}

.cookie-banner__text {
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    color: var(--text-inverse-secondary) !important;
    margin: 0 !important;
    text-align: center !important;
    flex: 1 !important;
    min-width: 280px !important;
}

.cookie-banner__text a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

.cookie-banner__actions {
    display: flex !important;
    gap: var(--space-3) !important;
    flex-shrink: 0 !important;
}

.cookie-banner__btn {
    padding: var(--space-3) var(--space-6) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-semibold) !important;
    border-radius: var(--radius-lg) !important;
    cursor: pointer !important;
    transition: all var(--transition-base) !important;
    border: none !important;
}

.cookie-banner__btn--accept {
    background: var(--gradient-primary) !important;
    color: white !important;
}

.cookie-banner__btn--accept:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-primary) !important;
}

.cookie-banner__btn--reject {
    background: transparent !important;
    color: var(--text-inverse-secondary) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.cookie-banner__btn--reject:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 767px) {
    .cookie-banner__content {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .cookie-banner__actions {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ============================================ */
/* 3. PAGE HEADER - FIX SPACING */
/* ============================================ */

/* Remove any white gap between header and content */
.page-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure no gap below header on mobile */
@media (max-width: 768px) {
    .page-wrapper {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Hide topbar on mobile to save space */
    .topbar-one {
        display: none !important;
    }
    
    /* Hero section - remove top gap */
    .hero-premium,
    .hero-saas,
    section.hero-premium {
        margin-top: 0 !important;
        padding-top: 60px !important; /* Reduced from higher values */
    }
    
    /* First section after header - no gap */
    .main-header + section,
    header + section,
    .sticky-header + section {
        margin-top: 0 !important;
    }
}

/* Page header - tight spacing, no white gap */
.page-header,
section.page-header,
#main-content.page-header {
    position: relative !important;
    padding: 60px 0 40px !important;
    background: var(--gradient-dark) !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.page-header__title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-hero) !important;
    font-weight: var(--font-black) !important;
    color: white !important;
    margin-bottom: var(--space-4) !important;
    line-height: var(--leading-tight) !important;
}

.page-header__breadcrumb {
    display: flex !important;
    gap: var(--space-3) !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.page-header__breadcrumb li {
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    color: var(--text-inverse-muted) !important;
}

.page-header__breadcrumb li a {
    color: var(--text-inverse-muted) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
}

.page-header__breadcrumb li a:hover {
    color: var(--color-primary) !important;
}

.page-header__breadcrumb li:not(:last-child)::after {
    content: '/' !important;
    margin-left: var(--space-3) !important;
    color: var(--text-inverse-muted) !important;
    opacity: 0.5 !important;
}

.page-header__breadcrumb li:last-child {
    color: white !important;
}

@media (max-width: 991px) {
    .page-header {
        padding: 100px 0 50px !important;
    }
    
    .page-header__title {
        font-size: var(--text-4xl) !important;
    }
}

@media (max-width: 767px) {
    .page-header {
        padding: 80px 0 40px !important;
    }
    
    .page-header__title {
        font-size: var(--text-3xl) !important;
    }
}

/* ============================================ */
/* 4. HERO SECTION - FIX CONTENT ALIGNMENT */
/* ============================================ */

.hero-premium {
    position: relative !important;
    min-height: 85vh !important;
    display: flex !important;
    align-items: center !important;
    background: linear-gradient(135deg, var(--gray-950) 0%, var(--gray-900) 50%, #2d1f35 100%) !important;
    overflow: hidden !important;
    padding: 100px 0 80px !important;
    margin-top: 0 !important;
}

.hero-premium__content {
    position: relative !important;
    z-index: 10 !important;
}

.hero-premium__title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-hero) !important;
    font-weight: var(--font-black) !important;
    line-height: var(--leading-tight) !important;
    color: white !important;
    margin-bottom: var(--space-6) !important;
}

.hero-premium__subtitle {
    font-family: var(--font-primary) !important;
    font-size: var(--text-xl) !important;
    line-height: var(--leading-relaxed) !important;
    color: var(--text-inverse-secondary) !important;
    margin-bottom: var(--space-8) !important;
    max-width: 580px !important;
}

@media (max-width: 991px) {
    .hero-premium {
        min-height: 70vh !important;
        padding: 80px 0 60px !important;
    }
    
    .hero-premium__title {
        font-size: var(--text-4xl) !important;
    }
    
    .hero-premium__subtitle {
        font-size: var(--text-lg) !important;
    }
}

@media (max-width: 767px) {
    .hero-premium {
        min-height: auto !important;
        padding: 60px 0 50px !important;
    }
    
    .hero-premium__title {
        font-size: var(--text-3xl) !important;
    }
    
    .hero-premium__subtitle {
        font-size: var(--text-base) !important;
    }
}

/* ============================================ */
/* 5. FORM STYLING - ENSURE VISIBILITY */
/* ============================================ */

.contact-form,
.quote-form {
    background: var(--bg-primary) !important;
    border-radius: var(--radius-card) !important;
    padding: var(--space-12) var(--space-10) !important;
    box-shadow: var(--shadow-lg) !important;
    border-top: 4px solid var(--color-primary) !important;
}

.contact-form__title,
.form-header__title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-2xl) !important;
    font-weight: var(--font-bold) !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-3) !important;
}

.contact-form__subtitle,
.form-header__subtitle {
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    color: var(--text-secondary) !important;
    margin-bottom: var(--space-6) !important;
}

.form-input,
.form-textarea,
.form-select {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
    border: 2px solid var(--border-light) !important;
    border-radius: var(--radius-input) !important;
    transition: all var(--transition-base) !important;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px var(--color-primary-light) !important;
    outline: none !important;
}

.form-label {
    display: block !important;
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-semibold) !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-2) !important;
}

.form-label--required::after {
    content: '*' !important;
    color: var(--color-error) !important;
    margin-left: var(--space-1) !important;
}

@media (max-width: 767px) {
    .contact-form,
    .quote-form {
        padding: var(--space-8) var(--space-5) !important;
    }
}

/* ============================================ */
/* 6. BUTTON CONSISTENCY */
/* ============================================ */

.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-3) !important;
    padding: var(--space-4) var(--space-8) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-semibold) !important;
    line-height: var(--leading-none) !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-btn) !important;
    cursor: pointer !important;
    transition: all var(--transition-base) !important;
}

.btn-primary {
    background: var(--gradient-primary) !important;
    color: var(--text-inverse) !important;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-primary) !important;
}

.btn-primary:hover {
    background: var(--color-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-primary-lg) !important;
    color: var(--text-inverse) !important;
}

.btn-lg {
    padding: var(--space-5) var(--space-10) !important;
    font-size: var(--text-lg) !important;
}

/* ============================================ */
/* 7. SERVICE CARDS - EQUAL HEIGHT */
/* ============================================ */

.service-card-saas,
.service-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.service-card-saas__text,
.service-card__text {
    flex-grow: 1 !important;
}

/* ============================================ */
/* 8. SECTION SPACING - 8PX GRID */
/* ============================================ */

.services-premium-grid {
    padding: var(--space-24) 0 !important;
}

.services-premium-grid.bg-light {
    background: var(--bg-secondary) !important;
}

.sec-title-modern,
.sec-title-saas {
    margin-bottom: var(--space-16) !important;
}

.sec-title-saas__tagline {
    display: inline-block !important;
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    padding: var(--space-2) var(--space-5) !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-semibold) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    margin-bottom: var(--space-4) !important;
}

.sec-title-saas__title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-4xl) !important;
    font-weight: var(--font-bold) !important;
    color: var(--text-primary) !important;
    line-height: var(--leading-tight) !important;
    margin-bottom: var(--space-4) !important;
}

@media (max-width: 991px) {
    .services-premium-grid {
        padding: var(--space-20) 0 !important;
    }
    
    .sec-title-saas__title {
        font-size: var(--text-3xl) !important;
    }
}

@media (max-width: 767px) {
    .services-premium-grid {
        padding: var(--space-16) 0 !important;
    }
    
    .sec-title-saas__title {
        font-size: var(--text-2xl) !important;
    }
    
    .sec-title-modern,
    .sec-title-saas {
        margin-bottom: var(--space-10) !important;
    }
}

/* ============================================ */
/* 9. CTA SECTION - FIX STYLING */
/* ============================================ */

.cta-saas {
    position: relative !important;
    background: linear-gradient(135deg, var(--gray-950) 0%, var(--gray-900) 100%) !important;
    padding: var(--space-24) 0 !important;
    overflow: hidden !important;
}

.cta-saas__title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-4xl) !important;
    font-weight: var(--font-bold) !important;
    color: white !important;
    margin-bottom: var(--space-4) !important;
}

.cta-saas__text {
    font-family: var(--font-primary) !important;
    font-size: var(--text-xl) !important;
    color: var(--text-inverse-secondary) !important;
    margin-bottom: 0 !important;
}

.btn-saas-white {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    padding: var(--space-4) var(--space-8) !important;
    background: white !important;
    color: var(--color-primary) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-semibold) !important;
    border-radius: var(--radius-btn) !important;
    text-decoration: none !important;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-lg) !important;
}

.btn-saas-white:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-xl) !important;
    color: var(--color-primary) !important;
}

@media (max-width: 991px) {
    .cta-saas {
        padding: var(--space-20) 0 !important;
    }
    
    .cta-saas__title {
        font-size: var(--text-3xl) !important;
    }
}

@media (max-width: 767px) {
    .cta-saas {
        padding: var(--space-16) 0 !important;
    }
    
    .cta-saas__title {
        font-size: var(--text-2xl) !important;
    }
    
    .cta-saas__text {
        font-size: var(--text-base) !important;
        margin-bottom: var(--space-6) !important;
    }
}

/* ============================================ */
/* 10. FOOTER - FIX LAYOUT */
/* ============================================ */

.footer-saas {
    background: var(--gray-950) !important;
    color: var(--text-inverse-secondary) !important;
    padding-top: 64px !important;
    padding-bottom: 0 !important;
}

.footer-saas__top {
    padding-bottom: 48px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 0 !important;
}

.footer-saas__widget {
    margin-bottom: var(--space-8) !important;
}

.footer-saas__logo img {
    height: auto !important;
    width: 160px !important;
    max-width: 100% !important;
    /* Remove filter - logo is already designed for dark backgrounds */
    filter: none !important;
    opacity: 1 !important;
    display: block !important;
}

.footer-saas__tagline {
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    color: var(--text-inverse-secondary) !important;
    margin: var(--space-5) 0 !important;
    line-height: var(--leading-relaxed) !important;
}

.footer-saas__social {
    display: flex !important;
    gap: var(--space-3) !important;
}

.footer-saas__social a {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-inverse-secondary) !important;
    transition: all var(--transition-base) !important;
}

.footer-saas__social a:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    transform: translateY(-4px) !important;
}

.footer-saas__title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--font-bold) !important;
    color: white !important;
    margin-bottom: var(--space-6) !important;
}

.footer-saas__links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-saas__links li {
    margin-bottom: var(--space-3) !important;
}

.footer-saas__links a {
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    color: var(--text-inverse-secondary) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
}

.footer-saas__links a:hover {
    color: white !important;
}

.footer-saas__bottom {
    padding: 16px 0 !important;
    margin-top: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer-saas__copyright {
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    color: var(--text-inverse-muted) !important;
    margin: 0 !important;
}

/* ============================================ */
/* 11. BACK TO TOP BUTTON */
/* POSITION: Bottom-left (swapped from right) */
/* ============================================ */

.scroll-to-top {
    position: fixed !important;
    bottom: var(--space-6, 24px) !important;
    left: var(--space-6, 24px) !important;
    right: auto !important; /* Override any right positioning */
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--gradient-primary) !important;
    color: white !important;
    border-radius: var(--radius-full) !important;
    box-shadow: var(--shadow-primary) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all var(--transition-base) !important;
    z-index: var(--z-fixed, 1000) !important;
    text-decoration: none !important;
}

.scroll-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.scroll-to-top:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-primary-lg) !important;
    color: white !important;
}

/* Mobile adjustments - Scroll-to-top button stays bottom-left */
@media (max-width: 767px) {
    .scroll-to-top {
        bottom: var(--space-4, 16px) !important;
        left: var(--space-4, 16px) !important;
        right: auto !important;
        width: 44px !important;
        height: 44px !important;
    }
}

/* ============================================ */
/* 12. SCROLL PROGRESS BAR */
/* ============================================ */

.scroll-progress {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 3px !important;
    width: 0 !important;
    background: var(--gradient-primary) !important;
    z-index: 10000 !important;
    transition: width 0.1s linear !important;
}

/* ============================================ */
/* 13. HEADER/PAGE SPACING */
/* ============================================ */

/* Body & Page Wrapper - Dark base for header area */
body {
    background: var(--gray-900) !important;
}

.page-wrapper {
    background: var(--gray-900) !important;
}

/* Page Header - Reduce gap */
.page-header {
    margin-top: -80px !important;
    padding-top: 130px !important;
    padding-bottom: 40px !important;
}

/* Topbar visibility on desktop */
@media (min-width: 992px) {
    .topbar-one {
        display: block !important;
    }
    
    .topbar-one__inner,
    .topbar-one .container {
        display: flex !important;
        visibility: visible !important;
    }
}

/* ============================================ */
/* 15. MOBILE NAV TOGGLE - DESKTOP HIDDEN */
/* ============================================ */

/* Hide on desktop (992px and up) */
@media (min-width: 992px) {
    .mobile-nav__toggler,
    .mobile-nav__btn {
        display: none !important;
    }
}

/* Show on tablet and mobile (991px and below) */
@media (max-width: 991px) {
    .mobile-nav__toggler,
    .mobile-nav__btn,
    .mobile-nav__btn.mobile-nav__toggler {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        gap: 6px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 1001 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mobile-nav__toggler span,
    .mobile-nav__btn span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 2px !important;
        margin: 0 !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-nav__toggler:hover,
    .mobile-nav__btn:hover {
        background: rgba(196, 30, 40, 0.15) !important;
        border-color: rgba(196, 30, 40, 0.3) !important;
    }
}

/* Legacy fallback - keep for specificity */
.mobile-nav__toggler span {
    width: 24px !important;
    height: 2px !important;
    background: var(--text-primary) !important;
    border-radius: var(--radius-full) !important;
    transition: all var(--transition-base) !important;
}

@media (max-width: 1199px) {
    .mobile-nav__toggler {
        display: flex !important;
    }
}

/* ============================================ */
/* 16. CONTACT INFO CARD */
/* ============================================ */

.contact-info-modern__title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-xl) !important;
    font-weight: var(--font-bold) !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-2) !important;
}

.contact-info-modern__text {
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    color: var(--text-secondary) !important;
    margin-bottom: var(--space-6) !important;
}

.contact-info-modern__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-4) !important;
    margin-bottom: var(--space-5) !important;
}

.contact-info-modern__icon {
    width: 48px !important;
    height: 48px !important;
    background: var(--color-primary-light) !important;
    border-radius: var(--radius-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.contact-info-modern__icon i {
    font-size: var(--text-lg) !important;
    color: var(--color-primary) !important;
}

.contact-info-modern__details h5 {
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-semibold) !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-1) !important;
}

.contact-info-modern__details p {
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    line-height: var(--leading-relaxed) !important;
}

.contact-info-modern__details a {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
}

.contact-info-modern__details a:hover {
    color: var(--color-primary) !important;
}

/* ============================================ */
/* 17. SUCCESS MODAL */
/* ============================================ */

.modal-success .modal-content {
    background: var(--gradient-dark) !important;
    border: none !important;
    border-radius: var(--radius-card) !important;
    text-align: center !important;
}

.modal-success .modal-header {
    border-bottom: none !important;
    padding: var(--space-6) var(--space-6) 0 !important;
}

.modal-success .modal-title {
    font-family: var(--font-primary) !important;
    color: white !important;
}

.modal-success .modal-body {
    padding: var(--space-8) !important;
}

.modal-success__icon {
    font-size: 64px !important;
    color: var(--color-success) !important;
    margin-bottom: var(--space-4) !important;
}

.modal-success h4 {
    font-family: var(--font-primary) !important;
    font-size: var(--text-2xl) !important;
    font-weight: var(--font-bold) !important;
    color: white !important;
    margin-bottom: var(--space-3) !important;
}

.modal-success p {
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    color: var(--text-inverse-secondary) !important;
    margin: 0 !important;
}

/* ============================================ */
/* 18. PROCESS CARDS */
/* ============================================ */

.process-card-modern {
    background: var(--bg-primary) !important;
    border-radius: var(--radius-card) !important;
    padding: var(--space-10) !important;
    text-align: center !important;
    box-shadow: var(--shadow-md) !important;
    transition: all var(--transition-slow) !important;
    height: 100% !important;
}

.process-card-modern:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-xl) !important;
}

.process-card-modern__number {
    width: 56px !important;
    height: 56px !important;
    background: var(--gradient-primary) !important;
    border-radius: var(--radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto var(--space-5) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--text-2xl) !important;
    font-weight: var(--font-bold) !important;
    color: white !important;
    box-shadow: var(--shadow-primary) !important;
}

.process-card-modern__title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-xl) !important;
    font-weight: var(--font-bold) !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-3) !important;
}

.process-card-modern__text {
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

/* ============================================ */
/* 19. FEATURE CARDS */
/* ============================================ */

.feature-modern {
    padding: var(--space-8) !important;
    transition: all var(--transition-base) !important;
}

.feature-modern:hover {
    transform: translateY(-4px) !important;
}

.feature-modern__icon {
    width: 64px !important;
    height: 64px !important;
    background: var(--color-primary-light) !important;
    border-radius: var(--radius-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto var(--space-4) !important;
    transition: all var(--transition-base) !important;
}

.feature-modern__icon i {
    font-size: 28px !important;
    color: var(--color-primary) !important;
}

.feature-modern:hover .feature-modern__icon {
    background: var(--gradient-primary) !important;
}

.feature-modern:hover .feature-modern__icon i {
    color: white !important;
}

.feature-modern__title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--font-semibold) !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-2) !important;
}

.feature-modern__text {
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

/* ============================================ */
/* 20. DARK MODE HEADER FIX */
/* Forces all header text to be visible in dark mode */
/* ============================================ */

/* ---- TOPBAR (Red bar at top) ---- */
.topbar-one {
    background-color: #C41E28 !important;
}

.topbar-one__info__item,
.topbar-one__info__item i,
.topbar-one__info__item a {
    color: #ffffff !important;
}

.topbar-one__info__item a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: underline !important;
}

.topbar-one__menu li a {
    color: #ffffff !important;
    font-weight: 500 !important;
}

.topbar-one__menu li a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ---- MAIN HEADER (Dark background) ---- */
.main-header,
.sticky-header,
.sticky-header--normal,
.sticky-header--cloned {
    background-color: var(--gray-900, #1a1d24) !important;
}

.sticky-header--cloned.active {
    background-color: var(--gray-900, #1a1d24) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ---- MAIN NAVIGATION LINKS ---- */
/* Primary nav links - BRIGHT WHITE for visibility */
.main-menu .main-menu__list > li > a,
.main-header__nav .main-menu__list > li > a,
.main-header .main-menu .main-menu__list > li > a {
    color: #ffffff !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
    position: relative !important;
}

/* Hover state - Red accent */
.main-menu .main-menu__list > li > a:hover,
.main-menu .main-menu__list > li:hover > a {
    color: #C41E28 !important;
}

/* ---- ACTIVE NAVIGATION HIGHLIGHT ---- */
/* Main nav active state - Premium underline effect */
.main-menu .main-menu__list > li.current > a,
.main-menu .main-menu__list > li.active > a,
.main-menu .main-menu__list > li > a.active {
    color: #C41E28 !important;
}

.main-menu .main-menu__list > li.current > a::after,
.main-menu .main-menu__list > li.active > a::after,
.main-menu .main-menu__list > li > a.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #C41E28 0%, #ff4757 100%) !important;
    border-radius: 3px !important;
    animation: activeUnderline 0.3s ease forwards !important;
}

@keyframes activeUnderline {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* ---- DROPDOWN ARROWS/ICONS ---- */
.main-menu .main-menu__list > li > a i,
.main-menu .main-menu__list > li > a .fa,
.main-menu .main-menu__list > li > a .fa-caret-down,
.main-menu .main-menu__list > li > a .fa-caret-right,
.main-menu .main-menu__list .dropdown > a i,
.main-menu .main-menu__list .dropdown > a span i {
    color: #ffffff !important;
    opacity: 0.8 !important;
    font-size: 12px !important;
    margin-left: 4px !important;
}

.main-menu .main-menu__list > li > a:hover i,
.main-menu .main-menu__list > li:hover > a i {
    color: #C41E28 !important;
    opacity: 1 !important;
}

/* ---- DROPDOWN MENUS ---- */
.main-menu .main-menu__list li ul,
.main-menu .main-menu__list li .submenu-inner,
.dropdown-menu,
.main-menu .dropdown-menu {
    background-color: #2d3139 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Dropdown links - DEFAULT STATE (dark background, light text) */
.main-menu .main-menu__list li ul li a,
.main-menu .main-menu__list li .submenu-inner li a,
.dropdown-item,
.dropdown-menu a {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: transparent !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s ease !important;
}

/* Dropdown HOVER state - slightly lighter dark, NOT red */
.main-menu .main-menu__list li ul li a:hover,
.main-menu .main-menu__list li .submenu-inner li a:hover,
.dropdown-item:hover,
.dropdown-menu a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid transparent !important;
}

/* Dropdown FOCUS state - same as hover, NOT red */
.main-menu .main-menu__list li ul li a:focus,
.main-menu .main-menu__list li .submenu-inner li a:focus,
.dropdown-item:focus,
.dropdown-menu a:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid transparent !important;
    outline: none !important;
}

/* Dropdown click/active pseudo state - brief feedback, NOT persistent red */
.main-menu .main-menu__list li ul li a:active,
.main-menu .main-menu__list li .submenu-inner li a:active,
.dropdown-item:active,
.dropdown-menu a:active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---- ACTIVE PAGE DROPDOWN ITEM (ONLY for current page) ---- */
/* These classes are added by JavaScript based on current URL */
.main-menu .main-menu__list li ul li.current > a,
.main-menu .main-menu__list li ul li.active > a,
.main-menu .main-menu__list li ul li a.active,
.main-menu .main-menu__list li .submenu-inner li.current > a,
.main-menu .main-menu__list li .submenu-inner li.active > a,
.main-menu .main-menu__list li .submenu-inner li a.active {
    color: #ffffff !important;
    background: linear-gradient(90deg, rgba(196, 30, 40, 0.25) 0%, rgba(196, 30, 40, 0.1) 100%) !important;
    border-left: 3px solid #C41E28 !important;
    font-weight: 600 !important;
}

/* Active item hover - slightly brighter */
.main-menu .main-menu__list li ul li.current > a:hover,
.main-menu .main-menu__list li ul li.active > a:hover,
.main-menu .main-menu__list li ul li a.active:hover {
    background: linear-gradient(90deg, rgba(196, 30, 40, 0.35) 0%, rgba(196, 30, 40, 0.15) 100%) !important;
    color: #ffffff !important;
}

/* Override Bootstrap dropdown active styles - REMOVE red from non-active items */
.dropdown-item.active,
.dropdown-menu > .active > a {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Only apply red to items with our custom .active class from JS */
.dropdown-item.page-active,
.dropdown-menu a.page-active {
    background: linear-gradient(90deg, rgba(196, 30, 40, 0.25) 0%, rgba(196, 30, 40, 0.1) 100%) !important;
    border-left: 3px solid #C41E28 !important;
    color: #ffffff !important;
}

/* Dropdown caret icons */
.main-menu .main-menu__list li ul li a i,
.main-menu .main-menu__list li ul li a .fa-caret-right,
.submenu-inner li a i {
    color: rgba(255, 255, 255, 0.6) !important;
}

.main-menu .main-menu__list li ul li a:hover i {
    color: #C41E28 !important;
}

/* ---- HEADER RIGHT SECTION ---- */
/* Quote Button - ALWAYS RED BACKGROUND + WHITE TEXT */
/* Permanent "active" style - red background, white text */
.main-header__right .quote-btn,
a.quote-btn,
.quote-btn,
a.quote-btn:link,
a.quote-btn:visited,
a.quote-btn:focus,
a.quote-btn:active,
.quote-btn:link,
.quote-btn:visited,
.quote-btn:focus,
.quote-btn:active,
.quote-btn.active,
.quote-btn.current,
.quote-btn.current-menu-item,
.quote-btn.current_page_item,
li.current > .quote-btn,
li.active > .quote-btn,
li.current-menu-item > .quote-btn {
    color: #ffffff !important;
    background-color: #C41E28 !important;
    border: 1px solid #C41E28 !important;
    text-decoration: none !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(196, 30, 40, 0.25) !important;
}

/* Hover state - slightly darker red for subtle feedback */
.main-header__right .quote-btn:hover,
a.quote-btn:hover,
.quote-btn:hover {
    color: #ffffff !important;
    background-color: #a51a22 !important;
    border-color: #a51a22 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(196, 30, 40, 0.35) !important;
}

/* Call section */
.main-header__call {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #C41E28 !important;
    text-decoration: none !important;
}

.main-header__call span {
    display: inline-block !important;
    color: #C41E28 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.main-header__call b,
.main-header__call strong {
    display: block !important;
    color: #C41E28 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.main-header__call i {
    color: #C41E28 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background-color: rgba(196, 30, 40, 0.1) !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0 !important;
}

.main-header__call:hover i {
    background-color: #C41E28 !important;
    color: #ffffff !important;
    border-color: #C41E28 !important;
}

/* About section call button */
.about-saas__call {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #C41E28 !important;
    text-decoration: none !important;
}

.about-saas__call span {
    display: inline-block !important;
    color: #C41E28 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.about-saas__call strong {
    display: block !important;
    color: #C41E28 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.about-saas__call i {
    color: #C41E28 !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    background-color: rgba(196, 30, 40, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0 !important;
}

/* ---- MOBILE NAV TOGGLE (Hamburger) ---- */
.mobile-nav__btn span,
.mobile-nav__toggler span {
    background-color: #ffffff !important;
}

.mobile-nav__btn:hover span,
.mobile-nav__toggler:hover span {
    background-color: #C41E28 !important;
}

/* ============================================ */
/* NEW ASTRONOMER-STYLE MOBILE NAVIGATION */
/* Complete rebuild from scratch */
/* ============================================ */

/* Hide old mobile nav system completely */
.mobile-nav__wrapper,
.mobile-nav__overlay,
.mobile-nav__content,
.mobile-nav__container,
.mobile-nav__close,
.mobile-nav__contact,
.mobile-nav__social,
.mobile-nav__cta-buttons,
.mobile-nav__btn,
.mobile-nav__toggler {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================ */
/* 1. HAMBURGER BUTTON - Astronomer Style */
/* ============================================ */

.astro-hamburger {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 100001;
    position: relative;
}

.astro-hamburger__line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.astro-hamburger__line:nth-child(1) {
    margin-bottom: 6px;
}

.astro-hamburger__line:nth-child(3) {
    margin-top: 6px;
}

/* Hamburger → X animation */
.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;
    transform: scaleX(0);
}

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

/* ============================================ */
/* 2. MOBILE NAV CONTAINER */
/* ============================================ */

.astro-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 100000;
    visibility: hidden;
    pointer-events: none;
}

.astro-mobile-nav.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* ============================================ */
/* 3. OVERLAY - Dark backdrop */
/* ============================================ */

.astro-mobile-nav__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.35s ease;
}

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

/* ============================================ */
/* 4. DRAWER PANEL - Slide from right */
/* ============================================ */

.astro-mobile-nav__drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: #1a1f2e; /* Astronomer dark blue-gray */
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

/* ============================================ */
/* 5. HEADER - Logo + Close button */
/* ============================================ */

.astro-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    flex-shrink: 0;
}

.astro-mobile-nav__logo img {
    max-width: 160px;
    height: auto;
    display: block;
}

.astro-mobile-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0;
}

.astro-mobile-nav__close:hover {
    color: #ffffff;
}

.astro-mobile-nav__close svg {
    width: 24px;
    height: 24px;
}

/* ============================================ */
/* 6. CTA BUTTONS - Contact Us + Get a Quote */
/* ============================================ */

.astro-mobile-nav__cta {
    display: flex;
    gap: 12px;
    padding: 0 24px 28px;
    flex-shrink: 0;
}

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

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

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

.astro-btn--primary {
    background: #9b7ed9; /* Astronomer purple */
    border: 2px solid #9b7ed9;
    color: #ffffff;
}

.astro-btn--primary:hover {
    background: #8a6bc9;
    border-color: #8a6bc9;
    color: #ffffff;
}

/* ============================================ */
/* 7. MENU LIST - Accordion style */
/* ============================================ */

.astro-mobile-nav__menu {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

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

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

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

.astro-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 24px;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
    text-align: left;
}

.astro-menu__link:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* Dropdown toggle button */
.astro-menu__toggle {
    position: relative;
}

.astro-menu__arrow {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: rgba(255, 255, 255, 0.5);
}

.astro-menu__item--dropdown.is-open .astro-menu__arrow {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================ */
/* 8. SUBMENU - Accordion dropdown */
/* ============================================ */

.astro-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.astro-menu__item--dropdown.is-open .astro-submenu {
    max-height: 500px; /* Large enough for content */
}

.astro-submenu li {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.astro-submenu li:first-child {
    border-top: none;
}

.astro-submenu a {
    display: block;
    padding: 14px 24px 14px 48px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.astro-submenu a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.03);
}

/* Active state for current page */
.astro-submenu a.is-active,
.astro-menu__link.is-active {
    color: #C41E28 !important;
}

/* ============================================ */
/* 9. BODY LOCK - Prevent scroll when open */
/* ============================================ */

body.astro-nav-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* ============================================ */
/* 10. RESPONSIVE - Show on mobile only */
/* ============================================ */

@media (max-width: 991px) {
    .astro-hamburger {
        display: flex !important;
    }
    
    /* Hide desktop nav */
    .main-menu,
    .main-header__nav,
    .main-header__call,
    .quote-btn,
    a.quote-btn {
        display: none !important;
    }
}

/* ============================================ */
/* 11. MOBILE FOOTER - 2 COLUMN LAYOUT */
/* Astronomer-style clean mobile footer */
/* ============================================ */

@media (max-width: 768px) {
    /* Footer grid - 2 columns */
    .footer-saas__top .row,
    .footer .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    /* Brand section - full width */
    .footer-saas__top .col-lg-4.col-md-6:first-child,
    .footer .col-lg-4:first-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 32px !important;
        padding-bottom: 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Link columns - 2 columns each 50% */
    .footer-saas__top .col-lg-2,
    .footer-saas__top .col-md-6.col-6,
    .footer .col-lg-2,
    .footer .col-md-3 {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        padding: 0 12px !important;
        margin-bottom: 24px !important;
    }
    
    /* Footer widget titles */
    .footer-saas__widget-title,
    .footer__column-title {
        font-size: 14px !important;
        margin-bottom: 16px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Footer links */
    .footer-saas__links li,
    .footer__links li {
        margin-bottom: 10px !important;
    }
    
    .footer-saas__links a,
    .footer__links a {
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }
    
    /* Contact info in footer */
    .footer-saas__contact-item,
    .footer__contact-item {
        margin-bottom: 12px !important;
        font-size: 14px !important;
    }
    
    .footer-saas__contact-item i,
    .footer__contact-item i {
        width: 20px !important;
        font-size: 14px !important;
        margin-right: 10px !important;
    }
    
    /* Social icons */
    .footer-saas__social a,
    .footer__social a {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    
    /* Footer bottom */
    .footer-saas__bottom,
    .footer__bottom {
        padding: 20px 0 100px !important; /* Extra padding for floating buttons */
        text-align: center !important;
    }
    
    .footer-saas__bottom-inner,
    .footer__bottom-inner {
        flex-direction: column !important;
        gap: 16px !important;
    }
}

/* ============================================ */
/* 12. GLOBAL MOBILE TYPOGRAPHY FIXES */
/* Scale down headings, reduce padding */
/* ============================================ */

@media (max-width: 768px) {
    /* Headings - Scale down */
    h1, .h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    h2, .h2,
    .section-title__heading {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }
    
    h3, .h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    h4, .h4 {
        font-size: 18px !important;
    }
    
    /* Hero section */
    .hero-premium__title,
    .hero-saas__title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    .hero-premium__subtitle,
    .hero-saas__subtitle {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    /* Section padding - Reduce */
    section {
        padding: 48px 0 !important;
    }
    
    .section-title {
        margin-bottom: 32px !important;
    }
    
    /* Container padding */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Cards */
    .service-card-saas,
    .service-card,
    .feature-card,
    .value-card {
        padding: 20px !important;
    }
    
    /* Buttons - Stack and full width */
    .hero-premium__actions,
    .hero-saas__actions,
    .cta-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .hero-premium__actions .btn,
    .hero-saas__actions .btn,
    .cta-buttons .btn {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    /* Page header */
    .page-header__title {
        font-size: 28px !important;
    }
    
    .page-header {
        padding: 80px 0 40px !important;
    }
}

@media (max-width: 480px) {
    /* Even smaller screens */
    h1, .h1,
    .hero-premium__title,
    .hero-saas__title {
        font-size: 24px !important;
    }
    
    h2, .h2,
    .section-title__heading {
        font-size: 20px !important;
    }
    
    h3, .h3 {
        font-size: 18px !important;
    }
    
    section {
        padding: 36px 0 !important;
    }
    
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Cards even tighter */
    .service-card-saas,
    .service-card,
    .feature-card,
    .value-card {
        padding: 16px !important;
    }
    
    .page-header {
        padding: 60px 0 32px !important;
    }
    
    .page-header__title {
        font-size: 24px !important;
    }
}

@media (max-width: 360px) {
    /* Smallest screens */
    h1, .h1,
    .hero-premium__title {
        font-size: 22px !important;
    }
    
    h2, .h2,
    .section-title__heading {
        font-size: 18px !important;
    }
    
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ---- SEARCH ICON ---- */
.main-header__search {
    color: #ffffff !important;
}

.main-header__search:hover {
    color: #C41E28 !important;
}

/* ---- ENSURE HIGH SPECIFICITY OVERRIDES ---- */
/* These override any theme.css defaults with !important */
body .main-menu .main-menu__list > li > a,
html body .main-menu .main-menu__list > li > a,
.page-wrapper .main-header .main-menu .main-menu__list > li > a {
    color: #ffffff !important;
}

body .main-menu .main-menu__list > li > a:hover,
body .main-menu .main-menu__list > li.current > a {
    color: #C41E28 !important;
}

/* ============================================ */
/* 21. PREMIUM ICON SYSTEM */
/* Modern, consistent icon styling across all components */
/* ============================================ */

/* ---- ICON DESIGN TOKENS ---- */
:root {
    /* Icon Container Sizes */
    --icon-size-sm: 44px;
    --icon-size-md: 56px;
    --icon-size-lg: 64px;
    --icon-size-xl: 76px;
    
    /* Icon Sizes (inside container) */
    --icon-font-sm: 20px;
    --icon-font-md: 24px;
    --icon-font-lg: 28px;
    --icon-font-xl: 32px;
    
    /* Icon Gradients */
    --icon-gradient-primary: linear-gradient(145deg, #ff6b6b 0%, #C41E28 50%, #8B1E2F 100%);
    --icon-gradient-hover: linear-gradient(145deg, #ff8585 0%, #E63946 50%, #C41E28 100%);
    --icon-gradient-soft: linear-gradient(145deg, rgba(230, 57, 70, 0.12) 0%, rgba(139, 30, 47, 0.18) 100%);
    
    /* Icon Shadows */
    --icon-shadow-soft: 0 4px 12px rgba(196, 30, 40, 0.15);
    --icon-shadow-medium: 0 8px 24px rgba(196, 30, 40, 0.2);
    --icon-shadow-strong: 0 12px 32px rgba(196, 30, 40, 0.3);
    --icon-shadow-glow: 0 0 20px rgba(230, 57, 70, 0.25), 0 8px 24px rgba(196, 30, 40, 0.2);
    
    /* Icon Border Radius (Squircle) */
    --icon-radius: 20px;
    --icon-radius-sm: 14px;
    --icon-radius-lg: 24px;
}

/* ---- REUSABLE ICON WRAPPER CLASS ---- */
/* Use this class for any new icons */
.icon-wrapper {
    width: var(--icon-size-lg) !important;
    height: var(--icon-size-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--icon-radius) !important;
    background: var(--icon-gradient-primary) !important;
    box-shadow: var(--icon-shadow-soft) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
}

.icon-wrapper img,
.icon-wrapper i,
.icon-wrapper svg {
    width: var(--icon-font-lg) !important;
    height: var(--icon-font-lg) !important;
    font-size: var(--icon-font-lg) !important;
    color: #ffffff !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

.icon-wrapper:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: var(--icon-shadow-glow) !important;
    background: var(--icon-gradient-hover) !important;
}

/* Icon Wrapper Size Variants */
.icon-wrapper--sm {
    width: var(--icon-size-sm) !important;
    height: var(--icon-size-sm) !important;
    border-radius: var(--icon-radius-sm) !important;
}

.icon-wrapper--sm i,
.icon-wrapper--sm svg {
    font-size: var(--icon-font-sm) !important;
    width: var(--icon-font-sm) !important;
    height: var(--icon-font-sm) !important;
}

.icon-wrapper--md {
    width: var(--icon-size-md) !important;
    height: var(--icon-size-md) !important;
}

.icon-wrapper--md i,
.icon-wrapper--md svg {
    font-size: var(--icon-font-md) !important;
    width: var(--icon-font-md) !important;
    height: var(--icon-font-md) !important;
}

.icon-wrapper--xl {
    width: var(--icon-size-xl) !important;
    height: var(--icon-size-xl) !important;
    border-radius: var(--icon-radius-lg) !important;
}

.icon-wrapper--xl i,
.icon-wrapper--xl svg {
    font-size: var(--icon-font-xl) !important;
    width: var(--icon-font-xl) !important;
    height: var(--icon-font-xl) !important;
}

/* Icon Wrapper Style Variants */
.icon-wrapper--soft {
    background: var(--icon-gradient-soft) !important;
    box-shadow: 0 4px 16px rgba(196, 30, 40, 0.1), inset 0 1px 3px rgba(255, 255, 255, 0.3) !important;
}

.icon-wrapper--soft i,
.icon-wrapper--soft svg {
    color: #C41E28 !important;
}

.icon-wrapper--soft:hover {
    background: var(--icon-gradient-primary) !important;
}

.icon-wrapper--soft:hover i,
.icon-wrapper--soft:hover svg {
    color: #ffffff !important;
}

/* ---- SERVICE CARD ICONS (Enhanced) ---- */
.service-card-saas__icon,
.service-icon-container,
.service-card-modern__icon {
    width: var(--icon-size-lg) !important;
    height: var(--icon-size-lg) !important;
    min-width: var(--icon-size-lg) !important;
    min-height: var(--icon-size-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--icon-radius) !important;
    background: var(--icon-gradient-soft) !important;
    box-shadow: var(--icon-shadow-soft), inset 0 1px 4px rgba(255, 255, 255, 0.4) !important;
    margin-bottom: 24px !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
}

.service-card-saas__icon i,
.service-icon-container i,
.service-card-modern__icon i,
.service-card-saas__icon svg,
.service-icon-container svg,
.service-card-modern__icon svg {
    font-size: var(--icon-font-xl) !important;
    width: var(--icon-font-xl) !important;
    height: var(--icon-font-xl) !important;
    color: #C41E28 !important;
    filter: drop-shadow(0 2px 4px rgba(196, 30, 40, 0.25)) !important;
    transition: all 0.4s ease !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Service Card Icon Hover */
.service-card-saas:hover .service-card-saas__icon,
.service-card-saas:hover .service-icon-container,
.service-card-modern:hover .service-card-modern__icon {
    background: var(--icon-gradient-primary) !important;
    transform: scale(1.08) translateY(-4px) !important;
    box-shadow: var(--icon-shadow-glow) !important;
}

.service-card-saas:hover .service-card-saas__icon i,
.service-card-saas:hover .service-icon-container i,
.service-card-modern:hover .service-card-modern__icon i {
    color: #ffffff !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
}

/* ---- CORE VALUES / FEATURE ICONS ---- */
.value-card__icon,
.value-card-modern__icon,
.mission-card__icon,
.mission-card-modern__icon,
.feature-modern__icon {
    width: var(--icon-size-lg) !important;
    height: var(--icon-size-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--icon-radius) !important;
    background: var(--icon-gradient-soft) !important;
    box-shadow: var(--icon-shadow-soft), inset 0 1px 4px rgba(255, 255, 255, 0.4) !important;
    margin: 0 auto var(--space-4) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.value-card__icon i,
.value-card-modern__icon i,
.mission-card__icon i,
.mission-card-modern__icon i,
.feature-modern__icon i {
    font-size: var(--icon-font-lg) !important;
    color: #C41E28 !important;
    filter: drop-shadow(0 2px 4px rgba(196, 30, 40, 0.2)) !important;
    transition: all 0.3s ease !important;
}

/* Feature Icon Hover */
.feature-modern:hover .feature-modern__icon,
.value-card:hover .value-card__icon,
.value-card-modern:hover .value-card-modern__icon {
    background: var(--icon-gradient-primary) !important;
    transform: scale(1.08) translateY(-4px) !important;
    box-shadow: var(--icon-shadow-glow) !important;
}

.feature-modern:hover .feature-modern__icon i,
.value-card:hover .value-card__icon i,
.value-card-modern:hover .value-card-modern__icon i {
    color: #ffffff !important;
}

/* ---- HEADER CALL ICON ---- */
.main-header__call i,
.about-saas__call i {
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--icon-radius) !important;
    background: var(--icon-gradient-soft) !important;
    box-shadow: var(--icon-shadow-soft), inset 0 1px 3px rgba(255, 255, 255, 0.3) !important;
    font-size: 22px !important;
    color: #C41E28 !important;
    border: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
}

.main-header__call:hover i,
.about-saas__call:hover i {
    background: var(--icon-gradient-primary) !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
    box-shadow: var(--icon-shadow-glow) !important;
}

/* ---- FOOTER SOCIAL ICONS ---- */
.footer-saas__social a,
.footer__social a,
.mobile-nav__social a,
.topbar__social a {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--icon-radius-sm) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 18px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.footer-saas__social a:hover,
.footer__social a:hover,
.mobile-nav__social a:hover {
    background: var(--icon-gradient-primary) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: var(--icon-shadow-glow) !important;
}

.topbar__social a:hover {
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* ---- CONTACT INFO ICONS ---- */
.contact-info-modern__icon,
.contact-one__info__icon {
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--icon-radius) !important;
    background: var(--icon-gradient-soft) !important;
    box-shadow: var(--icon-shadow-soft), inset 0 1px 3px rgba(255, 255, 255, 0.3) !important;
    flex-shrink: 0 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.contact-info-modern__icon i,
.contact-one__info__icon i {
    font-size: 20px !important;
    color: #C41E28 !important;
    transition: all 0.3s ease !important;
}

.contact-info-modern__item:hover .contact-info-modern__icon,
.contact-one__info__item:hover .contact-one__info__icon {
    background: var(--icon-gradient-primary) !important;
    transform: scale(1.08) !important;
    box-shadow: var(--icon-shadow-glow) !important;
}

.contact-info-modern__item:hover .contact-info-modern__icon i,
.contact-one__info__item:hover .contact-one__info__icon i {
    color: #ffffff !important;
}

/* ---- DROPDOWN CHEVRON ICONS ---- */
/* Clean, white, vertically centered dropdown arrows */
.main-menu .main-menu__list > li > a i,
.main-menu .main-menu__list > li > a .fa,
.main-menu .main-menu__list > li > a .fa-caret-down,
.main-menu .main-menu__list > li > a .fas,
.main-menu .main-menu__list .dropdown > a::after,
.dropdown-toggle::after {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 10px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

.main-menu .main-menu__list > li:hover > a i,
.main-menu .main-menu__list > li:hover > a .fa,
.dropdown:hover .dropdown-toggle::after {
    color: #C41E28 !important;
    transform: rotate(180deg) !important;
}

/* Submenu dropdown icons */
.main-menu .main-menu__list li ul li a i,
.main-menu .main-menu__list li ul li a .fa-caret-right {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 10px !important;
    margin-left: auto !important;
    transition: all 0.3s ease !important;
}

.main-menu .main-menu__list li ul li a:hover i {
    color: #C41E28 !important;
    transform: translateX(4px) !important;
}

/* ---- PROCESS/STEP NUMBER ICONS ---- */
.process-card-modern__number,
.step-number {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: var(--icon-gradient-primary) !important;
    box-shadow: var(--icon-shadow-medium) !important;
    font-family: var(--font-primary) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 auto var(--space-5) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.process-card-modern:hover .process-card-modern__number {
    transform: scale(1.1) !important;
    box-shadow: var(--icon-shadow-glow) !important;
}

/* ---- WHY CHOOSE US ICONS ---- */
.why-choose-one__list__icon {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--icon-radius) !important;
    background: var(--icon-gradient-primary) !important;
    box-shadow: var(--icon-shadow-soft) !important;
    color: #ffffff !important;
    font-size: 24px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.why-choose-one__list__icon:hover,
.why-choose-one__list__item:hover .why-choose-one__list__icon {
    transform: scale(1.08) translateY(-4px) !important;
    box-shadow: var(--icon-shadow-glow) !important;
    background: var(--icon-gradient-hover) !important;
}

/* ---- MODAL SUCCESS ICON ---- */
.modal-success__icon {
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3) !important;
    margin: 0 auto var(--space-4) !important;
}

.modal-success__icon i {
    font-size: 40px !important;
    color: #ffffff !important;
}

/* ---- DARK THEME ICON ADJUSTMENTS ---- */
/* Ensure icons are visible on dark backgrounds */
[data-theme="dark"] .icon-wrapper--soft,
body .icon-wrapper--soft {
    background: linear-gradient(145deg, rgba(230, 57, 70, 0.15) 0%, rgba(139, 30, 47, 0.22) 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .service-card-saas__icon,
[data-theme="dark"] .service-icon-container,
body .service-card-saas__icon,
body .service-icon-container {
    background: linear-gradient(145deg, rgba(230, 57, 70, 0.15) 0%, rgba(139, 30, 47, 0.22) 100%) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 3px rgba(255, 255, 255, 0.15) !important;
}

/* ---- TOPBAR INFO ICONS ---- */
.topbar-one__info__icon,
.topbar-one__info__item i {
    color: #ffffff !important;
    font-size: 14px !important;
    margin-right: 8px !important;
    opacity: 0.9 !important;
}

/* ---- FAQ ACCORDION ICONS ---- */
.faq-page__accordion .accrodion-title__icon,
.accordion-button::after {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: var(--icon-gradient-soft) !important;
    color: #C41E28 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.accordion-button:not(.collapsed)::after {
    background: var(--icon-gradient-primary) !important;
    color: #ffffff !important;
    transform: rotate(180deg) !important;
}

/* ---- CTA SECTION ICONS ---- */
.cta-one__icon,
.cta-saas__icon {
    font-size: 48px !important;
    color: #C41E28 !important;
    filter: drop-shadow(0 4px 8px rgba(196, 30, 40, 0.3)) !important;
    transition: all 0.4s ease !important;
}

/* ============================================ */
/* END PREMIUM ICON SYSTEM */
/* ============================================ */

/* ============================================ */
/* 22. ABOUT SECTION IMAGE STYLING */
/* ============================================ */

.about-saas__image {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
}

.about-saas__image img,
.about-image-responsive {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    transition: transform 0.5s ease !important;
}

.about-saas__image:hover img {
    transform: scale(1.02) !important;
}

/* Aspect ratio container for consistent sizing */
@media (min-width: 992px) {
    .about-saas__image img {
        min-height: 450px !important;
        max-height: 550px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 991px) {
    .about-saas__image {
        margin-bottom: 30px !important;
    }
    
    .about-saas__image img {
        min-height: 300px !important;
        max-height: 400px !important;
    }
}

@media (max-width: 767px) {
    .about-saas__image img {
        min-height: 200px !important;
        max-height: 300px !important;
        border-radius: 12px !important;
    }
}

/* ============================================ */
/* 22B. HERO ICON ROW - PROFESSIONAL ICONS */
/* Clean, high-resolution SVG icons below image */
/* ============================================ */

/* Container for the enhanced image */
.about-image-enhanced {
    position: relative !important;
}

/* Icon row container - positioned below the image */
.hero-icon-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    margin-top: 24px;
    padding: 16px 0;
    flex-wrap: wrap;
}

/* Individual icon item */
.hero-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

/* Hover effect */
.hero-icon-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(229, 57, 53, 0.2);
    background: rgba(229, 57, 53, 0.05);
}

/* SVG Icon styling */
.hero-icon-svg {
    width: 48px;
    height: 48px;
    transition: all 0.3s ease;
}

.hero-icon-item:hover .hero-icon-svg {
    stroke: #C62828;
    filter: drop-shadow(0 2px 4px rgba(229, 57, 53, 0.3));
}

/* Icon label */
.hero-icon-label {
    font-size: 12px;
    font-weight: 600;
    color: #E53935;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    transition: color 0.3s ease;
}

.hero-icon-item:hover .hero-icon-label {
    color: #C62828;
}

/* Fade in animation */
.hero-icon-row {
    opacity: 0;
    animation: fadeInIconRow 0.8s ease-out 0.3s forwards;
}

@keyframes fadeInIconRow {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- RESPONSIVE: TABLET ---- */
@media (max-width: 991px) {
    .hero-icon-row {
        gap: 24px;
        margin-top: 20px;
    }
    
    .hero-icon-svg {
        width: 42px;
        height: 42px;
    }
    
    .hero-icon-label {
        font-size: 11px;
    }
    
    .hero-icon-item {
        padding: 10px 14px;
    }
}

/* ---- RESPONSIVE: MOBILE ---- */
@media (max-width: 767px) {
    .hero-icon-row {
        gap: 16px;
        margin-top: 16px;
        justify-content: center;
    }
    
    .hero-icon-item {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
        padding: 10px 12px;
    }
    
    .hero-icon-svg {
        width: 36px;
        height: 36px;
    }
    
    .hero-icon-label {
        font-size: 10px;
    }
}

/* ---- RESPONSIVE: SMALL MOBILE ---- */
@media (max-width: 480px) {
    .hero-icon-row {
        gap: 12px;
        margin-top: 12px;
        padding: 12px 0;
    }
    
    .hero-icon-item {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
        padding: 8px 10px;
        border-radius: 10px;
    }
    
    .hero-icon-svg {
        width: 32px;
        height: 32px;
    }
    
    .hero-icon-label {
        font-size: 9px;
        letter-spacing: 0.3px;
    }
}

/* ============================================ */
/* 23. MOBILE RESPONSIVENESS FIXES - ENHANCED */
/* Only affects mobile - Desktop layout unchanged */
/* Breakpoints: 991px (tablet), 767px (mobile), 576px (small), 480px (xs) */
/* ============================================ */

/* ---- PREVENT HORIZONTAL SCROLL ---- */
html, body {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.page-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* Ensure all direct children don't overflow */
.page-wrapper > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix any absolute positioned elements that might overflow */
[style*="position: absolute"],
[style*="position:absolute"] {
    max-width: 100vw;
}

/* ============================================ */
/* TABLET BREAKPOINT (max-width: 991px) */
/* ============================================ */

@media (max-width: 991px) {
    /* ---- HEADER FIXES ---- */
    .main-header {
        padding: 10px 0 !important;
    }
    
    .main-header__inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }
    
    .main-header__logo img {
        max-width: 120px !important;
        height: auto !important;
    }
    
    /* Hide desktop nav completely */
    .main-menu,
    .main-header__nav,
    .main-header__nav__wrapper > nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Nav wrapper - only show hamburger */
    .main-header__nav__wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Hide call and quote on tablet */
    .main-header__call,
    .quote-btn,
    a.quote-btn {
        display: none !important;
    }
    
    /* Main header - compact */
    .main-header {
        padding: 8px 0 !important;
        margin: 0 !important;
    }
    
    .main-header__inner {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Hamburger button - MUST BE VISIBLE */
    .mobile-nav__toggler,
    .mobile-nav__btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        gap: 6px !important;
        cursor: pointer !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-nav__toggler:hover {
        background: rgba(196, 30, 40, 0.15) !important;
        border-color: rgba(196, 30, 40, 0.3) !important;
    }
    
    .mobile-nav__toggler span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: #ffffff !important;
        margin: 4px 0 !important;
        transition: all 0.3s ease !important;
        border-radius: 2px !important;
    }
    
    /* Hide call section on tablet */
    .main-header__call {
        display: none !important;
    }
    
    .main-header__right {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    /* ---- TOPBAR - HIDE ON TABLET ---- */
    .topbar-one {
        display: none !important;
    }
    
    /* ---- HERO SECTION TABLET ---- */
    .hero-premium {
        padding: 80px 0 50px !important;
        min-height: auto !important;
        margin-top: 0 !important;
    }
    
    .hero-premium .row {
        flex-direction: column-reverse !important;
    }
    
    .hero-premium .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .hero-premium__image {
        margin-bottom: 40px !important;
    }
    
    .hero-premium__content {
        text-align: center !important;
    }
    
    .hero-premium__badge {
        justify-content: center !important;
    }
    
    .hero-premium__title {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
    
    .hero-premium__subtitle {
        font-size: 16px !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .hero-premium__actions {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    .hero-premium__trust {
        align-items: center !important;
    }
    
    /* ---- SECTION SPACING ---- */
    section {
        padding: 60px 0 !important;
    }
    
    .section-title {
        text-align: center !important;
    }
    
    /* ---- SERVICE CARDS GRID ---- */
    .service-card-saas {
        margin-bottom: 20px !important;
    }
    
    .services-premium-grid .row {
        margin-left: -12px !important;
        margin-right: -12px !important;
    }
    
    .services-premium-grid .col-lg-4,
    .services-premium-grid .col-md-6 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* ---- FOOTER GRID ---- */
    .footer-saas__top .row {
        gap: 30px 0 !important;
    }
    
    .footer-saas__widget {
        margin-bottom: 20px !important;
    }
    
    /* ---- ABOUT SECTION ---- */
    .about-saas .row {
        flex-direction: column !important;
    }
    
    .about-saas .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .about-saas__image {
        margin-bottom: 30px !important;
    }
    
    .about-saas__content {
        padding-left: 0 !important;
        text-align: center !important;
    }
    
    .about-saas__features {
        justify-content: center !important;
    }
    
    .about-saas__cta {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    /* ---- CTA SECTION ---- */
    .cta-saas .row {
        text-align: center !important;
    }
    
    .cta-saas .col-lg-8,
    .cta-saas .col-lg-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
    }
    
    .cta-saas .text-lg-end {
        text-align: center !important;
        margin-top: 20px !important;
    }
}

/* ============================================ */
/* MOBILE BREAKPOINT (max-width: 768px) */
/* ============================================ */
/* ASTRONOMER.IO-STYLE MOBILE MENU REBUILD */
/* Premium SaaS mobile navigation experience */
/* ============================================ */

@media (max-width: 768px) {
    /* ============================================ */
    /* BODY LOCK WHEN MENU IS OPEN */
    /* ============================================ */
    
    body.locked {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* ============================================ */
    /* TASK 1: MOBILE HEADER - CLEAN & ALIGNED */
    /* ============================================ */
    
    .main-header {
        padding: 8px 0 !important;
        margin: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: #0f1117 !important;
        min-height: auto !important;
    }
    
    .main-header__inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
    }
    
    .main-header__logo {
        flex-shrink: 0 !important;
    }
    
    .main-header__logo img {
        max-width: 100px !important;
        height: auto !important;
    }
    
    /* Hide desktop nav completely */
    .main-header__nav,
    .main-header__nav__wrapper > nav,
    .main-menu {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* ============================================ */
    /* HEADER LAYOUT - MOBILE */
    /* ============================================ */
    
    .main-header__nav__wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .main-header__right {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-left: auto !important;
    }
    
    /* Hide call section and quote button on mobile */
    .main-header__call,
    .main-header__right .quote-btn,
    .main-header__right a.quote-btn {
        display: none !important;
    }
    
    /* ============================================ */
    /* HAMBURGER BUTTON - ASTRONOMER STYLE */
    /* Clean 3-line icon, ALWAYS visible on mobile */
    /* ============================================ */
    
    .mobile-nav__toggler,
    .mobile-nav__btn,
    .mobile-nav__btn.mobile-nav__toggler {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        gap: 6px !important;
        cursor: pointer !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.2s ease !important;
        position: relative !important;
        z-index: 1001 !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 99 !important; /* Push to end */
    }
    
    .mobile-nav__toggler:hover,
    .mobile-nav__toggler:focus,
    .mobile-nav__btn:hover {
        background: rgba(196, 30, 40, 0.15) !important;
        border-color: rgba(196, 30, 40, 0.3) !important;
        outline: none !important;
    }
    
    .mobile-nav__toggler span,
    .mobile-nav__btn span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 2px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        margin: 0 !important;
    }
    
    /* ============================================ */
    /* MOBILE NAV WRAPPER - FULL SCREEN OVERLAY */
    /* Slides in from RIGHT like Astronomer.io */
    /* ============================================ */
    
    .mobile-nav__wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 99999 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: visibility 0s 0.4s, opacity 0.3s ease !important;
    }
    
    .mobile-nav__wrapper.expanded {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: visibility 0s 0s, opacity 0.3s ease !important;
    }
    
    /* Dark semi-transparent overlay */
    .mobile-nav__overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    .mobile-nav__wrapper.expanded .mobile-nav__overlay {
        opacity: 1 !important;
    }
    
    /* ============================================ */
    /* SLIDING PANEL - ASTRONOMER STYLE */
    /* Dark solid background, slides from right */
    /* ============================================ */
    
    .mobile-nav__content {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 320px !important;
        max-width: 90vw !important;
        height: 100% !important;
        height: 100dvh !important;
        background: #0f1117 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5) !important;
        transform: translateX(100%) !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .mobile-nav__wrapper.expanded .mobile-nav__content {
        transform: translateX(0) !important;
    }
    
    /* ============================================ */
    /* LOGO BOX - TOP OF MOBILE MENU */
    /* ============================================ */
    
    .mobile-nav__content .logo-box {
        padding: 20px 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.02) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-nav__content .logo-box img {
        max-width: 150px !important;
        height: auto !important;
    }
    
    /* ============================================ */
    /* CLOSE BUTTON - TOP RIGHT X */
    /* Astronomer uses a clean X icon */
    /* ============================================ */
    
    .mobile-nav__close {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border-radius: 50% !important;
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 18px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        z-index: 10 !important;
        border: none !important;
    }
    
    .mobile-nav__close:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
    }
    
    /* ============================================ */
    /* NAVIGATION CONTAINER - ASTRONOMER STYLE */
    /* Clean list with accordion dropdowns */
    /* ============================================ */
    
    .mobile-nav__container {
        padding: 8px 0 !important;
        margin: 0 !important;
        flex: 1 !important;
        overflow-y: auto !important;
    }
    
    /* Reset all lists */
    .mobile-nav__container .main-menu__list,
    .mobile-nav__container ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* ============================================ */
    /* MAIN MENU ITEMS - LARGE PARENT LABELS */
    /* Full-width clickable, subtle dividers */
    /* ============================================ */
    
    .mobile-nav__container .main-menu__list > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        position: relative !important;
        margin: 0 !important;
    }
    
    .mobile-nav__container .main-menu__list > li:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    
    /* Main menu links - LARGE LABELS like Astronomer */
    .mobile-nav__container .main-menu__list > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        padding: 16px 24px !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        width: 100% !important;
        background: transparent !important;
    }
    
    .mobile-nav__container .main-menu__list > li > a:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.04) !important;
    }
    
    /* Active menu item */
    .mobile-nav__container .main-menu__list > li.current > a,
    .mobile-nav__container .main-menu__list > li.page-active > a {
        color: #C41E28 !important;
    }
    
    /* Hide menu-title wrapper spans, show text directly */
    .mobile-nav__container .main-menu__list > li > a .menu-title,
    .mobile-nav__container .main-menu__list > li > a .item-content {
        display: contents !important;
    }
    
    /* Hide inline dropdown icons from menu text */
    .mobile-nav__container .main-menu__list > li > a > span > i,
    .mobile-nav__container .main-menu__list > li > a .fa-caret-down,
    .mobile-nav__container .main-menu__list > li > a .fa-caret-right {
        display: none !important;
    }
    
    /* ============================================ */
    /* DROPDOWN TOGGLE BUTTON - ASTRONOMER STYLE */
    /* Arrow aligned right, rotates on open */
    /* ============================================ */
    
    .mobile-nav__container .main-menu__list > li.dropdown > a button,
    .mobile-nav__container .dropdown-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        background: #C41E28 !important;
        border-radius: 6px !important;
        color: #ffffff !important;
        font-size: 12px !important;
        cursor: pointer !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border: none !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .mobile-nav__container .main-menu__list > li.dropdown > a button:hover,
    .mobile-nav__container .dropdown-btn:hover {
        background: #a51a22 !important;
    }
    
    /* Rotated state when expanded */
    .mobile-nav__container .main-menu__list > li.dropdown > a button.expanded,
    .mobile-nav__container .dropdown-btn.expanded,
    .mobile-nav__container .dropdown-btn.open {
        transform: translateY(-50%) rotate(180deg) !important;
        background: #C41E28 !important;
    }
    
    /* ============================================ */
    /* DROPDOWN/SUBMENU - ACCORDION STYLE */
    /* Indented, readable, smooth expand */
    /* ============================================ */
    
    .mobile-nav__container .main-menu__list li ul,
    .mobile-nav__container .main-menu__list .dropdown ul,
    .mobile-nav__container .submenu-inner {
        display: none !important;
        padding: 8px 0 8px 0 !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
        list-style: none !important;
        overflow: hidden !important;
    }
    
    /* Show submenu when parent has 'show' class or button is expanded */
    .mobile-nav__container .main-menu__list li ul.show,
    .mobile-nav__container .main-menu__list .dropdown ul.show,
    .mobile-nav__container .submenu-inner.show,
    .mobile-nav__container .main-menu__list li.dropdown.open > ul {
        display: block !important;
    }
    
    /* Submenu items - INDENTED & READABLE */
    .mobile-nav__container .main-menu__list li ul li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    .mobile-nav__container .main-menu__list li ul li a,
    .mobile-nav__container .submenu-inner li a {
        display: flex !important;
        align-items: center !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        padding: 12px 24px 12px 40px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        border-bottom: none !important;
        border-left: none !important;
        transition: all 0.2s ease !important;
        background: transparent !important;
        text-decoration: none !important;
    }
    
    .mobile-nav__container .main-menu__list li ul li a:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.04) !important;
    }
    
    .mobile-nav__container .main-menu__list li ul li a.page-active,
    .mobile-nav__container .main-menu__list li ul li.current > a {
        color: #C41E28 !important;
    }
    
    /* Nested submenu (3rd level) - MORE INDENTED */
    .mobile-nav__container .main-menu__list li ul li ul {
        padding-left: 0 !important;
        background: rgba(0, 0, 0, 0.08) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    }
    
    .mobile-nav__container .main-menu__list li ul li ul li a {
        font-size: 13px !important;
        padding: 10px 24px 10px 56px !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }
    
    .mobile-nav__container .main-menu__list li ul li ul li a:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.03) !important;
    }
    
    /* Hide dropdown arrows/icons in submenu items */
    .mobile-nav__container .main-menu__list li ul li a i,
    .mobile-nav__container .main-menu__list li ul li a .fa,
    .mobile-nav__container .submenu-inner li a i,
    .mobile-nav__container .submenu-inner li a .fa {
        display: none !important;
    }
    
    /* 3rd level dropdown button */
    .mobile-nav__container .main-menu__list li ul li.dropdown > a button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 10px !important;
        right: 20px !important;
    }
    
    /* ============================================ */
    /* CONTACT INFO - BOTTOM OF MOBILE MENU */
    /* ============================================ */
    
    .mobile-nav__contact {
        margin-top: auto !important;
        padding: 20px 24px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        background: rgba(0, 0, 0, 0.15) !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-nav__contact li {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        margin-bottom: 14px !important;
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    .mobile-nav__contact li:last-child {
        margin-bottom: 0 !important;
    }
    
    .mobile-nav__contact li i {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(196, 30, 40, 0.15) !important;
        border-radius: 50% !important;
        color: #C41E28 !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-nav__contact li a {
        color: rgba(255, 255, 255, 0.9) !important;
        text-decoration: none !important;
        padding: 0 !important;
        border: none !important;
        font-size: 14px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        transition: color 0.2s ease !important;
    }
    
    .mobile-nav__contact li a:hover {
        color: #C41E28 !important;
    }
    
    /* ============================================ */
    /* SOCIAL ICONS - BOTTOM OF MOBILE MENU */
    /* ============================================ */
    
    .mobile-nav__social {
        display: flex !important;
        gap: 12px !important;
        padding: 16px 24px 24px !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-nav__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.06) !important;
        border-radius: 50% !important;
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 16px !important;
        transition: all 0.25s ease !important;
        padding: 0 !important;
        border: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    
    .mobile-nav__social a:hover {
        background: #C41E28 !important;
        color: #ffffff !important;
        transform: translateY(-3px) !important;
    }
    
    /* ============================================ */
    /* TOPBAR - COMPLETELY HIDDEN ON MOBILE */
    /* ============================================ */
    
    .topbar-one {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .topbar-one__menu li a {
        font-size: 12px !important;
        padding: 4px 10px !important;
    }
    
    /* ============================================ */
    /* TASK 4: HERO SECTION RESPONSIVE TYPOGRAPHY */
    /* ============================================ */
    
    .hero-premium,
    .hero-saas {
        padding: 70px 0 40px !important;
        min-height: auto !important;
    }
    
    .hero-premium .row {
        flex-direction: column-reverse !important;
        gap: 24px !important;
    }
    
    .hero-premium .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }
    
    .hero-premium__content {
        text-align: center !important;
    }
    
    .hero-premium__badge {
        display: inline-flex !important;
        justify-content: center !important;
        font-size: 10px !important;
        padding: 6px 14px !important;
        margin-bottom: 16px !important;
    }
    
    .hero-premium__badge i {
        font-size: 14px !important;
    }
    
    .hero-premium__title,
    .hero-saas__title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .hero-premium__title-highlight {
        display: inline !important;
    }
    
    .hero-premium__subtitle,
    .hero-saas__subtitle {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 24px !important;
        max-width: 100% !important;
    }
    
    .hero-premium__actions,
    .hero-saas__actions {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 30px !important;
    }
    
    .hero-premium__actions .btn,
    .hero-premium__actions .btn-premium,
    .hero-saas__actions .btn {
        width: 100% !important;
        max-width: 300px !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .hero-premium__trust {
        align-items: center !important;
        gap: 12px !important;
    }
    
    .hero-premium__trust-item {
        font-size: 13px !important;
        justify-content: center !important;
    }
    
    .hero-premium__trust-item i {
        font-size: 14px !important;
    }
    
    /* Hero image */
    .hero-premium__image {
        margin-bottom: 0 !important;
    }
    
    .hero-premium__image-placeholder {
        border-radius: 12px !important;
    }
    
    .hero-premium__img {
        border-radius: 12px !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Hero icon row */
    .hero-icon-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-top: 20px !important;
        padding: 0 10px !important;
    }
    
    .hero-icon-item {
        padding: 12px 8px !important;
    }
    
    .hero-icon-svg {
        width: 36px !important;
        height: 36px !important;
    }
    
    .hero-icon-label {
        font-size: 10px !important;
    }
    
    /* ============================================ */
    /* PAGE HEADER (Subpages) */
    /* ============================================ */
    
    .page-header {
        padding: 80px 0 30px !important;
        text-align: center !important;
    }
    
    .page-header__title {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }
    
    .page-header__breadcrumb {
        justify-content: center !important;
        font-size: 13px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    /* ============================================ */
    /* SECTION TITLES */
    /* ============================================ */
    
    .section-title,
    .sec-title-modern,
    .sec-title-saas {
        text-align: center !important;
        margin-bottom: 30px !important;
    }
    
    .section-title__badge,
    .sec-title-saas__tagline {
        font-size: 11px !important;
        padding: 6px 14px !important;
        margin-bottom: 12px !important;
    }
    
    .section-title__heading,
    .sec-title-saas__title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    
    .section-title__text,
    .sec-title-saas__text {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* ============================================ */
    /* SERVICE CARDS - 1 COLUMN LAYOUT */
    /* ============================================ */
    
    .services-premium-grid {
        padding: 50px 0 !important;
    }
    
    .services-premium-grid .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .services-premium-grid .col-lg-4,
    .services-premium-grid .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 16px !important;
    }
    
    .service-card-saas {
        padding: 24px 20px !important;
        margin-bottom: 0 !important;
        border-radius: 12px !important;
    }
    
    .service-card-saas__icon,
    .service-icon-container {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .service-card-saas__icon i,
    .service-icon-container i {
        font-size: 24px !important;
    }
    
    .service-card-saas__title,
    .service-card-saas h3 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }
    
    .service-card-saas__text,
    .service-card-saas p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: center !important;
    }
    
    /* ============================================ */
    /* ABOUT SECTION */
    /* ============================================ */
    
    .about-saas,
    .about-modern {
        padding: 50px 0 !important;
    }
    
    .about-saas .row {
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .about-saas .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .about-saas__image {
        margin-bottom: 0 !important;
    }
    
    .about-saas__image img {
        border-radius: 12px !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    .about-saas__content {
        text-align: center !important;
        padding-left: 0 !important;
    }
    
    .sec-title-saas__title {
        font-size: 24px !important;
    }
    
    .about-saas__text {
        font-size: 14px !important;
        line-height: 1.7 !important;
        margin-bottom: 16px !important;
    }
    
    .about-saas__features {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
    }
    
    .about-saas__feature {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        text-align: left !important;
        padding: 16px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 10px !important;
    }
    
    .about-saas__feature i {
        font-size: 24px !important;
        color: #C41E28 !important;
        flex-shrink: 0 !important;
    }
    
    .about-saas__feature h4 {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    
    .about-saas__feature p {
        font-size: 13px !important;
        margin: 0 !important;
    }
    
    .about-saas__cta {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        align-items: center !important;
    }
    
    .about-saas__cta .btn-modern {
        width: 100% !important;
        max-width: 300px !important;
        justify-content: center !important;
    }
    
    .about-saas__call {
        justify-content: center !important;
    }
    
    /* ============================================ */
    /* CTA SECTIONS */
    /* ============================================ */
    
    .cta-saas {
        padding: 50px 0 !important;
    }
    
    .cta-saas__inner {
        text-align: center !important;
    }
    
    .cta-saas .row {
        flex-direction: column !important;
        gap: 24px !important;
    }
    
    .cta-saas .col-lg-8,
    .cta-saas .col-lg-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
    }
    
    .cta-saas .text-lg-end {
        text-align: center !important;
        margin-top: 0 !important;
    }
    
    .cta-saas__title {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    
    .cta-saas__text {
        font-size: 14px !important;
        margin-bottom: 0 !important;
    }
    
    .cta-saas__actions,
    .cta-saas .btn-saas-white {
        display: inline-flex !important;
        justify-content: center !important;
    }
    
    /* ============================================ */
    /* FORMS */
    /* ============================================ */
    
    .contact-form,
    .quote-form {
        padding: 24px 16px !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }
    
    .form-header {
        text-align: center !important;
        margin-bottom: 24px !important;
    }
    
    .form-header__title {
        font-size: 22px !important;
        margin-bottom: 8px !important;
    }
    
    .form-header__subtitle {
        font-size: 14px !important;
    }
    
    .form-group {
        margin-bottom: 16px !important;
    }
    
    .form-label {
        font-size: 14px !important;
        font-weight: 500 !important;
        margin-bottom: 6px !important;
        display: block !important;
    }
    
    /* Prevent iOS zoom on input focus */
    .form-input,
    .form-textarea,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
        padding: 14px 16px !important;
        border-radius: 8px !important;
        min-height: 50px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    .form-textarea,
    textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    .form-select,
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        padding-right: 44px !important;
    }
    
    .form-actions {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 24px !important;
    }
    
    .form-actions .btn,
    .btn-block,
    .form-submit {
        width: 100% !important;
        min-height: 50px !important;
    }
    
    /* ============================================ */
    /* BUTTONS */
    /* ============================================ */
    
    .btn {
        padding: 14px 24px !important;
        font-size: 15px !important;
        min-height: 50px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
    }
    
    .btn-lg {
        padding: 16px 28px !important;
        font-size: 16px !important;
        min-height: 54px !important;
    }
    
    .btn-premium,
    .btn-modern {
        width: 100% !important;
        max-width: 300px !important;
    }
    
    /* Quote button in header - hide on mobile */
    .quote-btn {
        display: none !important;
    }
    
    /* ============================================ */
    /* TASK 4: FOOTER - TWO-COLUMN CLEAN MOBILE LAYOUT */
    /* Astronomer-style compact footer */
    /* ============================================ */
    
    .footer-saas {
        padding: 32px 0 100px !important; /* Extra bottom padding for floating buttons */
    }
    
    .footer-saas__top {
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }
    
    .footer-saas__top .row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        margin: 0 !important;
    }
    
    /* Brand section (logo + tagline + social) - FULL WIDTH */
    .footer-saas__top .col-lg-4.col-md-6:first-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 24px !important;
        padding: 0 0 20px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    
    /* Link columns - TWO EQUAL COLUMNS */
    .footer-saas__top .col-lg-2,
    .footer-saas__top .col-md-6.col-6 {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        margin-bottom: 20px !important;
        padding: 0 8px !important;
    }
    
    .footer-saas__widget {
        text-align: left !important;
        margin-bottom: 0 !important;
    }
    
    /* Center brand widget only */
    .footer-saas__top .col-lg-4.col-md-6:first-child .footer-saas__widget {
        text-align: center !important;
    }
    
    .footer-saas__logo {
        display: block !important;
        margin: 0 auto 10px !important;
    }
    
    .footer-saas__logo img {
        max-width: 120px !important;
    }
    
    .footer-saas__tagline {
        font-size: 13px !important;
        line-height: 1.5 !important;
        max-width: 260px !important;
        margin: 0 auto 14px !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }
    
    .footer-saas__social {
        justify-content: center !important;
        gap: 8px !important;
    }
    
    /* Smaller social icons - 35% reduction */
    .footer-saas__social a {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
    
    /* Column titles */
    .footer-saas__title {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #ffffff !important;
    }
    
    /* Link lists */
    .footer-saas__links {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .footer-saas__links li {
        margin-bottom: 6px !important;
    }
    
    .footer-saas__links a {
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.65) !important;
        transition: color 0.2s ease !important;
        display: block !important;
        padding: 2px 0 !important;
    }
    
    .footer-saas__links a:hover {
        color: #C41E28 !important;
    }
    
    /* Contact info in footer - COMPACT */
    .footer-saas__contact {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .footer-saas__contact li {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        text-align: left !important;
    }
    
    .footer-saas__contact li i {
        color: #C41E28 !important;
        font-size: 12px !important;
        margin-top: 2px !important;
        flex-shrink: 0 !important;
    }
    
    .footer-saas__contact li span,
    .footer-saas__contact li a {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    
    /* Footer bottom */
    .footer-saas__bottom {
        padding: 16px 0 !important;
        margin-top: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    
    .footer-saas__bottom-content {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
    
    .footer-saas__copyright {
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.5) !important;
        order: 2 !important;
    }
    
    .footer-saas__legal {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        order: 1 !important;
    }
    
    .footer-saas__legal a {
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }
    
    /* ============================================ */
    /* TASK 5: CONTACT SECTION - PREMIUM MOBILE LAYOUT */
    /* Icon left, text right, compact spacing */
    /* ============================================ */
    
    .contact-modern {
        padding: 40px 0 !important;
    }
    
    .contact-modern .row {
        flex-direction: column !important;
        gap: 24px !important;
    }
    
    .contact-modern .col-lg-4,
    .contact-modern .col-lg-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Contact info cards - HORIZONTAL LAYOUT */
    .contact-info-modern {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .contact-info-modern__item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 14px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        text-align: left !important;
    }
    
    /* Smaller icons - 35% reduction */
    .contact-info-modern__icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(196, 30, 40, 0.12) !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }
    
    .contact-info-modern__icon i {
        font-size: 15px !important;
        color: #C41E28 !important;
    }
    
    .contact-info-modern__details {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .contact-info-modern__details h5 {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 2px !important;
        color: #ffffff !important;
    }
    
    .contact-info-modern__details p {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.65) !important;
    }
    
    .contact-info-modern__details p a {
        color: rgba(255, 255, 255, 0.75) !important;
    }
    
    .contact-info-modern__details p a:hover {
        color: #C41E28 !important;
    }
    
    /* ============================================ */
    /* FAQ ACCORDION */
    /* ============================================ */
    
    .accordion-button {
        font-size: 15px !important;
        padding: 16px !important;
        text-align: left !important;
    }
    
    .accordion-body {
        font-size: 14px !important;
        padding: 16px !important;
        line-height: 1.7 !important;
    }
    
    /* ============================================ */
    /* COOKIE BANNER */
    /* ============================================ */
    
    .cookie-banner {
        padding: 16px !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .cookie-banner__content {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
    
    .cookie-banner__text {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }
    
    .cookie-banner__actions {
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .cookie-banner__btn {
        flex: 1 !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    /* ============================================ */
    /* FLOATING BUTTONS */
    /* ============================================ */
    
    .whatsapp-float,
    a.whatsapp-float,
    body .whatsapp-float {
        bottom: 16px !important;
        right: 16px !important;
        width: 52px !important;
        height: 52px !important;
    }
    
    .whatsapp-float i {
        font-size: 26px !important;
    }
    
    .whatsapp-float__text {
        display: none !important;
    }
    
    .scroll-to-top {
        bottom: 16px !important;
        left: 16px !important;
        width: 44px !important;
        height: 44px !important;
    }
    
    .scroll-to-top i {
        font-size: 18px !important;
    }
    
    /* ============================================ */
    /* IMAGES & MEDIA */
    /* ============================================ */
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .img-fluid {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Responsive video embeds */
    iframe,
    video,
    embed,
    object {
        max-width: 100% !important;
    }
    
    /* ============================================ */
    /* TABLES */
    /* ============================================ */
    
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* ============================================ */
    /* UTILITY FIXES */
    /* ============================================ */
    
    /* Prevent text overflow */
    h1, h2, h3, h4, h5, h6,
    p, span, a, li {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Fix Bootstrap row negative margins */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .row > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Exception for Bootstrap grid with gutter */
    .g-4.row,
    .g-5.row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
    
    .g-4.row > *,
    .g-5.row > * {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ============================================ */
/* SMALL MOBILE BREAKPOINT (max-width: 576px) */
/* Bootstrap sm breakpoint */
/* ============================================ */

@media (max-width: 576px) {
    /* ---- HEADER ---- */
    .main-header__logo img {
        max-width: 95px !important;
    }
    
    .mobile-nav__toggler {
        width: 40px !important;
        height: 40px !important;
    }
    
    .mobile-nav__toggler span {
        width: 18px !important;
    }
    
    /* ---- HERO ---- */
    .hero-premium,
    .hero-saas {
        padding: 70px 0 40px !important;
    }
    
    .hero-premium__badge {
        font-size: 10px !important;
        padding: 6px 12px !important;
    }
    
    .hero-premium__title,
    .hero-saas__title {
        font-size: 26px !important;
    }
    
    .hero-premium__subtitle,
    .hero-saas__subtitle {
        font-size: 14px !important;
    }
    
    /* ---- PAGE HEADER ---- */
    .page-header {
        padding: 70px 0 25px !important;
    }
    
    .page-header__title {
        font-size: 24px !important;
    }
    
    .page-header__breadcrumb {
        font-size: 12px !important;
    }
    
    /* ---- SECTION TITLES ---- */
    .section-title__heading,
    .sec-title-saas__title {
        font-size: 22px !important;
    }
    
    .section-title__text,
    .sec-title-saas__text {
        font-size: 13px !important;
    }
    
    /* ---- SERVICE CARDS ---- */
    .service-card-saas {
        padding: 20px 16px !important;
    }
    
    .service-card-saas__icon,
    .service-icon-container {
        width: 50px !important;
        height: 50px !important;
    }
    
    .service-card-saas__icon i,
    .service-icon-container i {
        font-size: 22px !important;
    }
    
    .service-card-saas__title,
    .service-card-saas h3 {
        font-size: 17px !important;
    }
    
    .service-card-saas__text,
    .service-card-saas p {
        font-size: 13px !important;
    }
    
    /* ---- ABOUT ---- */
    .about-saas__feature {
        padding: 14px !important;
    }
    
    .about-saas__feature i {
        font-size: 22px !important;
    }
    
    .about-saas__feature h4 {
        font-size: 15px !important;
    }
    
    .about-saas__feature p {
        font-size: 12px !important;
    }
    
    /* ---- CTA ---- */
    .cta-saas__title {
        font-size: 20px !important;
    }
    
    .cta-saas__text {
        font-size: 13px !important;
    }
    
    /* ---- FORMS ---- */
    .contact-form,
    .quote-form {
        padding: 20px 14px !important;
    }
    
    .form-header__title {
        font-size: 20px !important;
    }
    
    .form-header__subtitle {
        font-size: 13px !important;
    }
    
    .form-label {
        font-size: 13px !important;
    }
    
    /* ---- FOOTER ---- */
    .footer-saas__logo img {
        max-width: 120px !important;
    }
    
    .footer-saas__tagline {
        font-size: 13px !important;
    }
    
    .footer-saas__title {
        font-size: 15px !important;
    }
    
    .footer-saas__links a {
        font-size: 13px !important;
    }
    
    .footer-saas__copyright {
        font-size: 11px !important;
    }
    
    .footer-saas__legal a {
        font-size: 11px !important;
    }
    
    /* ---- BUTTONS ---- */
    .btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
        min-height: 48px !important;
    }
    
    .btn-lg {
        padding: 14px 24px !important;
        font-size: 15px !important;
    }
}

/* ============================================ */
/* EXTRA SMALL MOBILE BREAKPOINT (max-width: 480px) */
/* Very small phones */
/* ============================================ */

@media (max-width: 480px) {
    /* ---- HEADER ---- */
    .main-header {
        padding: 6px 0 !important;
    }
    
    .main-header__logo img {
        max-width: 85px !important;
    }
    
    .mobile-nav__toggler {
        width: 38px !important;
        height: 38px !important;
    }
    
    /* ---- TOPBAR - HIDDEN ---- */
    .topbar-one {
        display: none !important;
    }
    
    /* ---- HERO ---- */
    .hero-premium,
    .hero-saas {
        padding: 50px 0 30px !important;
        margin-top: 0 !important;
    }
    
    .hero-premium__badge {
        font-size: 9px !important;
        padding: 5px 10px !important;
        gap: 6px !important;
    }
    
    .hero-premium__badge i {
        font-size: 12px !important;
    }
    
    .hero-premium__title,
    .hero-saas__title {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }
    
    .hero-premium__subtitle,
    .hero-saas__subtitle {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }
    
    .hero-premium__actions,
    .hero-saas__actions {
        gap: 10px !important;
        margin-bottom: 24px !important;
    }
    
    .hero-premium__trust-item {
        font-size: 12px !important;
    }
    
    .hero-premium__trust-item i {
        font-size: 12px !important;
    }
    
    /* Hero icon row - smaller */
    .hero-icon-row {
        gap: 8px !important;
        margin-top: 16px !important;
        padding: 0 !important;
    }
    
    .hero-icon-item {
        padding: 10px 6px !important;
        border-radius: 8px !important;
    }
    
    .hero-icon-svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    .hero-icon-label {
        font-size: 8px !important;
        letter-spacing: 0.2px !important;
    }
    
    /* ---- PAGE HEADER ---- */
    .page-header {
        padding: 60px 0 20px !important;
    }
    
    .page-header__title {
        font-size: 20px !important;
    }
    
    .page-header__breadcrumb {
        font-size: 11px !important;
    }
    
    /* ---- SECTION TITLES ---- */
    .section-title__heading,
    .sec-title-saas__title {
        font-size: 20px !important;
    }
    
    .section-title__text,
    .sec-title-saas__text {
        font-size: 12px !important;
    }
    
    .section-title__badge,
    .sec-title-saas__tagline {
        font-size: 10px !important;
        padding: 5px 12px !important;
    }
    
    /* ---- SERVICE CARDS ---- */
    .service-card-saas {
        padding: 18px 14px !important;
    }
    
    .service-card-saas__icon,
    .service-icon-container {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 12px !important;
    }
    
    .service-card-saas__icon i,
    .service-icon-container i {
        font-size: 20px !important;
    }
    
    .service-card-saas__title,
    .service-card-saas h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .service-card-saas__text,
    .service-card-saas p {
        font-size: 12px !important;
    }
    
    /* ---- ABOUT ---- */
    .about-saas {
        padding: 40px 0 !important;
    }
    
    .about-saas__text {
        font-size: 13px !important;
    }
    
    .about-saas__feature {
        padding: 12px !important;
    }
    
    .about-saas__feature i {
        font-size: 20px !important;
    }
    
    .about-saas__feature h4 {
        font-size: 14px !important;
    }
    
    .about-saas__feature p {
        font-size: 11px !important;
    }
    
    /* ---- CTA ---- */
    .cta-saas {
        padding: 40px 0 !important;
    }
    
    .cta-saas__title {
        font-size: 18px !important;
    }
    
    .cta-saas__text {
        font-size: 12px !important;
    }
    
    /* ---- FORMS ---- */
    .contact-form,
    .quote-form {
        padding: 18px 12px !important;
        border-radius: 10px !important;
    }
    
    .form-header__title {
        font-size: 18px !important;
    }
    
    .form-header__subtitle {
        font-size: 12px !important;
    }
    
    .form-label {
        font-size: 12px !important;
    }
    
    .form-input,
    .form-textarea,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        padding: 12px 14px !important;
        min-height: 46px !important;
    }
    
    .form-textarea,
    textarea {
        min-height: 100px !important;
    }
    
    /* ---- FOOTER ---- */
    .footer-saas {
        padding: 40px 0 16px !important;
    }
    
    .footer-saas__top .col-lg-4,
    .footer-saas__top .col-lg-2,
    .footer-saas__top .col-md-6,
    .footer-saas__top .col-6 {
        margin-bottom: 24px !important;
    }
    
    .footer-saas__logo img {
        max-width: 110px !important;
    }
    
    .footer-saas__tagline {
        font-size: 12px !important;
    }
    
    .footer-saas__social a {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    
    .footer-saas__title {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    
    .footer-saas__links li {
        margin-bottom: 8px !important;
    }
    
    .footer-saas__links a {
        font-size: 12px !important;
    }
    
    .footer-saas__contact li {
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }
    
    .footer-saas__bottom {
        padding: 16px 0 !important;
    }
    
    .footer-saas__copyright {
        font-size: 10px !important;
    }
    
    .footer-saas__legal {
        gap: 12px !important;
    }
    
    .footer-saas__legal a {
        font-size: 10px !important;
    }
    
    /* ---- BUTTONS ---- */
    .btn {
        padding: 10px 18px !important;
        font-size: 13px !important;
        min-height: 44px !important;
    }
    
    .btn-lg {
        padding: 12px 22px !important;
        font-size: 14px !important;
        min-height: 48px !important;
    }
    
    /* ---- MOBILE NAV - ASTRONOMER STYLE ---- */
    .mobile-nav__content {
        width: 280px !important;
        max-width: 85vw !important;
    }
    
    .mobile-nav__content .logo-box {
        padding: 16px 20px !important;
    }
    
    .mobile-nav__content .logo-box img {
        max-width: 130px !important;
    }
    
    .mobile-nav__close {
        width: 36px !important;
        height: 36px !important;
        top: 14px !important;
        right: 14px !important;
        font-size: 16px !important;
    }
    
    .mobile-nav__container .main-menu__list > li > a {
        font-size: 15px !important;
        padding: 14px 20px !important;
    }
    
    .mobile-nav__container .main-menu__list > li.dropdown > a button,
    .mobile-nav__container .dropdown-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 11px !important;
        right: 14px !important;
    }
    
    .mobile-nav__container .main-menu__list li ul li a {
        font-size: 13px !important;
        padding: 10px 20px 10px 36px !important;
    }
    
    .mobile-nav__container .main-menu__list li ul li ul li a {
        padding: 8px 20px 8px 48px !important;
        font-size: 12px !important;
    }
    
    .mobile-nav__contact {
        padding: 16px 20px !important;
    }
    
    .mobile-nav__contact li {
        font-size: 13px !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .mobile-nav__contact li i {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 13px !important;
    }
    
    .mobile-nav__social {
        padding: 14px 20px 20px !important;
        gap: 10px !important;
    }
    
    .mobile-nav__social a {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    
    /* ---- FLOATING BUTTONS ---- */
    .whatsapp-float,
    a.whatsapp-float,
    body .whatsapp-float {
        bottom: 12px !important;
        right: 12px !important;
        width: 48px !important;
        height: 48px !important;
    }
    
    .whatsapp-float i {
        font-size: 24px !important;
    }
    
    .scroll-to-top {
        bottom: 12px !important;
        left: 12px !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .scroll-to-top i {
        font-size: 16px !important;
    }
    
    /* ---- COOKIE BANNER ---- */
    .cookie-banner {
        padding: 12px !important;
    }
    
    .cookie-banner__text {
        font-size: 11px !important;
    }
    
    .cookie-banner__btn {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
    
    /* ---- FAQ ---- */
    .accordion-button {
        font-size: 14px !important;
        padding: 14px !important;
    }
    
    .accordion-body {
        font-size: 13px !important;
        padding: 14px !important;
    }
    
    /* ---- CONTACT INFO CARDS ---- */
    .contact-info-modern__icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    .contact-info-modern__icon i {
        font-size: 16px !important;
    }
    
    .contact-info-modern__details h5 {
        font-size: 13px !important;
    }
    
    .contact-info-modern__details p {
        font-size: 12px !important;
    }
}

/* ============================================ */
/* EXTRA EXTRA SMALL MOBILE (max-width: 360px) */
/* Very small phones like iPhone SE, Galaxy S */
/* ============================================ */

@media (max-width: 360px) {
    /* ---- CONTAINER PADDING ---- */
    .container,
    .container-xxl {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* ---- HEADER ---- */
    .main-header {
        padding: 5px 0 !important;
    }
    
    .main-header__logo img {
        max-width: 75px !important;
    }
    
    .mobile-nav__toggler,
    .mobile-nav__btn {
        width: 36px !important;
        height: 36px !important;
    }
    
    .mobile-nav__toggler span {
        width: 16px !important;
    }
    
    /* ---- TOPBAR - HIDDEN ---- */
    .topbar-one {
        display: none !important;
    }
    
    /* ---- HERO ---- */
    .hero-premium,
    .hero-saas {
        padding: 45px 0 25px !important;
        margin-top: 0 !important;
    }
    
    .hero-premium__badge {
        font-size: 8px !important;
        padding: 4px 8px !important;
    }
    
    .hero-premium__title,
    .hero-saas__title {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }
    
    .hero-premium__subtitle,
    .hero-saas__subtitle {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    
    .hero-premium__actions .btn,
    .hero-saas__actions .btn {
        padding: 10px 16px !important;
        font-size: 12px !important;
    }
    
    .hero-premium__trust-item {
        font-size: 11px !important;
    }
    
    /* ---- PAGE HEADER ---- */
    .page-header {
        padding: 55px 0 18px !important;
    }
    
    .page-header__title {
        font-size: 18px !important;
    }
    
    .page-header__breadcrumb {
        font-size: 10px !important;
    }
    
    /* ---- SECTION TITLES ---- */
    .section-title__heading,
    .sec-title-saas__title {
        font-size: 18px !important;
    }
    
    .section-title__text,
    .sec-title-saas__text {
        font-size: 11px !important;
    }
    
    /* ---- SERVICE CARDS ---- */
    .service-card-saas {
        padding: 14px 12px !important;
    }
    
    .service-card-saas__icon,
    .service-icon-container {
        width: 44px !important;
        height: 44px !important;
    }
    
    .service-card-saas__icon i,
    .service-icon-container i {
        font-size: 18px !important;
    }
    
    .service-card-saas__title,
    .service-card-saas h3 {
        font-size: 15px !important;
    }
    
    .service-card-saas__text,
    .service-card-saas p {
        font-size: 11px !important;
    }
    
    /* ---- CTA ---- */
    .cta-saas__title {
        font-size: 17px !important;
    }
    
    .cta-saas__text {
        font-size: 11px !important;
    }
    
    /* ---- FORMS ---- */
    .contact-form,
    .quote-form {
        padding: 14px 10px !important;
    }
    
    .form-header__title {
        font-size: 17px !important;
    }
    
    .form-header__subtitle {
        font-size: 11px !important;
    }
    
    .form-label {
        font-size: 12px !important;
    }
    
    .form-input,
    .form-textarea,
    .form-select,
    input,
    textarea,
    select {
        padding: 10px 12px !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }
    
    /* ---- FOOTER ---- */
    .footer-saas {
        padding: 30px 0 14px !important;
    }
    
    .footer-saas__top .col-lg-2,
    .footer-saas__top .col-md-6.col-6 {
        width: 50% !important;
        margin-bottom: 20px !important;
    }
    
    .footer-saas__logo img {
        max-width: 100px !important;
    }
    
    .footer-saas__tagline {
        font-size: 11px !important;
    }
    
    .footer-saas__title {
        font-size: 13px !important;
    }
    
    .footer-saas__links a {
        font-size: 11px !important;
    }
    
    .footer-saas__social a {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
    
    .footer-saas__copyright {
        font-size: 9px !important;
    }
    
    .footer-saas__legal a {
        font-size: 9px !important;
    }
    
    /* ---- BUTTONS ---- */
    .btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 40px !important;
    }
    
    .btn-lg {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
    
    /* ---- MOBILE NAV - ASTRONOMER STYLE ---- */
    .mobile-nav__content {
        width: 260px !important;
        max-width: 85vw !important;
    }
    
    .mobile-nav__content .logo-box {
        padding: 14px 16px !important;
    }
    
    .mobile-nav__content .logo-box img {
        max-width: 110px !important;
    }
    
    .mobile-nav__close {
        width: 32px !important;
        height: 32px !important;
        top: 12px !important;
        right: 12px !important;
        font-size: 14px !important;
    }
    
    .mobile-nav__container .main-menu__list > li > a {
        font-size: 14px !important;
        padding: 12px 16px !important;
    }
    
    .mobile-nav__container .main-menu__list > li.dropdown > a button,
    .mobile-nav__container .dropdown-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 10px !important;
        right: 12px !important;
    }
    
    .mobile-nav__container .main-menu__list li ul li a {
        font-size: 12px !important;
        padding: 10px 16px 10px 32px !important;
    }
    
    .mobile-nav__container .main-menu__list li ul li ul li a {
        padding: 8px 16px 8px 44px !important;
        font-size: 11px !important;
    }
    
    .mobile-nav__contact {
        padding: 14px 16px !important;
    }
    
    .mobile-nav__contact li {
        font-size: 12px !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }
    
    .mobile-nav__contact li i {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 11px !important;
    }
    
    .mobile-nav__social {
        padding: 12px 16px 18px !important;
        gap: 8px !important;
    }
    
    .mobile-nav__social a {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
    
    /* ---- FLOATING BUTTONS ---- */
    .whatsapp-float,
    a.whatsapp-float,
    body .whatsapp-float {
        bottom: 10px !important;
        right: 10px !important;
        width: 44px !important;
        height: 44px !important;
    }
    
    .whatsapp-float i {
        font-size: 22px !important;
    }
    
    .scroll-to-top {
        bottom: 10px !important;
        left: 10px !important;
        width: 36px !important;
        height: 36px !important;
    }
    
    .scroll-to-top i {
        font-size: 14px !important;
    }
    
    /* ---- CONTACT INFO ---- */
    .contact-info-modern__item {
        padding: 12px !important;
        gap: 10px !important;
    }
    
    .contact-info-modern__icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }
    
    .contact-info-modern__icon i {
        font-size: 14px !important;
    }
    
    .contact-info-modern__details h5 {
        font-size: 12px !important;
    }
    
    .contact-info-modern__details p {
        font-size: 11px !important;
    }
    
    /* ---- FAQ ---- */
    .accordion-button {
        font-size: 13px !important;
        padding: 12px !important;
    }
    
    .accordion-body {
        font-size: 12px !important;
        padding: 12px !important;
    }
}

/* ============================================ */
/* FLOATING BUTTONS - ENSURE NO OVERLAP */
/* ============================================ */

@media (max-width: 768px) {
    /* Ensure floating buttons don't overlap footer content */
    .footer-saas__bottom {
        padding-bottom: 70px !important;
    }
    
    /* Floating buttons positioning - fixed bottom corners */
    .whatsapp-float,
    a.whatsapp-float,
    body .whatsapp-float {
        position: fixed !important;
        bottom: 16px !important;
        right: 16px !important;
        z-index: 9998 !important;
    }
    
    .scroll-to-top,
    a.scroll-to-top {
        position: fixed !important;
        bottom: 16px !important;
        left: 16px !important;
        z-index: 9997 !important;
    }
}

/* ============================================ */
/* TOUCH DEVICE SPECIFIC FIXES */
/* Optimizations for touch-based devices */
/* ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* ---- TOUCH TARGETS (minimum 48px) ---- */
    .btn,
    a.btn,
    button,
    .mobile-nav__toggler,
    .mobile-nav__close,
    .whatsapp-float,
    .scroll-to-top {
        min-height: 48px !important;
        min-width: 48px !important;
    }
    
    /* Form inputs - prevent iOS zoom */
    input,
    select,
    textarea,
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px !important;
    }
    
    /* Disable hover transforms on touch devices */
    .service-card-saas:hover,
    .process-card-modern:hover,
    .feature-modern:hover,
    .value-card:hover,
    .about-saas__feature:hover,
    .footer-saas__social a:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
    
    /* Keep button hover effects but remove transform */
    .btn:hover,
    .btn-premium:hover,
    .btn-modern:hover {
        transform: none !important;
    }
    
    /* Mobile nav touch targets */
    .mobile-nav__container a {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Larger tap areas for links */
    .footer-saas__links a,
    .footer-saas__legal a,
    .page-header__breadcrumb a {
        padding: 8px 0 !important;
        display: inline-block !important;
    }
    
    /* Accordion touch targets */
    .accordion-button {
        min-height: 56px !important;
    }
}

/* ============================================ */
/* LANDSCAPE MOBILE FIXES */
/* Adjustments for landscape orientation */
/* ============================================ */

@media (max-width: 896px) and (orientation: landscape) {
    /* Reduce hero section height in landscape */
    .hero-premium,
    .hero-saas {
        min-height: auto !important;
        padding: 50px 0 30px !important;
    }
    
    .hero-premium .row {
        flex-direction: row !important;
        gap: 20px !important;
    }
    
    .hero-premium .col-lg-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
    }
    
    .hero-premium__content {
        text-align: left !important;
    }
    
    .hero-premium__badge {
        justify-content: flex-start !important;
    }
    
    .hero-premium__title {
        font-size: 24px !important;
    }
    
    .hero-premium__subtitle {
        font-size: 13px !important;
    }
    
    .hero-premium__actions {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    
    .hero-premium__actions .btn {
        width: auto !important;
        max-width: none !important;
    }
    
    .hero-premium__trust {
        align-items: flex-start !important;
    }
    
    .hero-premium__image {
        margin-bottom: 0 !important;
    }
    
    /* Page header in landscape */
    .page-header {
        padding: 60px 0 25px !important;
    }
    
    .page-header__title {
        font-size: 24px !important;
    }
    
    /* Section spacing in landscape */
    section {
        padding: 40px 0 !important;
    }
    
    /* Service cards in landscape - 2 columns */
    .services-premium-grid .col-lg-4,
    .services-premium-grid .col-md-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
    }
    
    /* About section in landscape */
    .about-saas .row {
        flex-direction: row !important;
    }
    
    .about-saas .col-lg-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
    }
    
    .about-saas__content {
        text-align: left !important;
    }
    
    /* CTA in landscape */
    .cta-saas .row {
        flex-direction: row !important;
        align-items: center !important;
    }
    
    .cta-saas .col-lg-8 {
        width: 60% !important;
        flex: 0 0 60% !important;
        text-align: left !important;
    }
    
    .cta-saas .col-lg-4 {
        width: 40% !important;
        flex: 0 0 40% !important;
        text-align: right !important;
    }
}

/* Smaller landscape phones */
@media (max-width: 667px) and (orientation: landscape) {
    .hero-premium,
    .hero-saas {
        padding: 40px 0 25px !important;
    }
    
    .hero-premium__title {
        font-size: 20px !important;
    }
    
    .hero-premium__subtitle {
        font-size: 12px !important;
    }
    
    .page-header {
        padding: 50px 0 20px !important;
    }
    
    .page-header__title {
        font-size: 20px !important;
    }
}

/* ============================================ */
/* HIGH CONTRAST / ACCESSIBILITY FIXES */
/* ============================================ */

@media (prefers-contrast: high) {
    .btn {
        border-width: 2px !important;
    }
    
    .service-card-saas,
    .contact-form,
    .quote-form {
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid #C41E28 !important;
        outline-offset: 2px !important;
    }
}

/* ============================================ */
/* REDUCED MOTION PREFERENCES */
/* ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .hero-premium__shape,
    .hero-saas__shape {
        animation: none !important;
    }
    
    .whatsapp-float:hover,
    .scroll-to-top:hover,
    .btn:hover {
        transform: none !important;
    }
}

/* ============================================ */
/* END MOBILE RESPONSIVENESS FIXES */
/* ============================================ */

/* ============================================ */
/* END VISUAL QA FIXES */
/* ============================================ */