/* DESKTOP RESET - Complete override for desktop layout */
/* This file must be loaded LAST to override all other styles */

@media (min-width: 768px) {
    /* Step 1: Reset HTML/Body completely */
    * {
        margin: 0;
        padding: 0;
    }
    
    html {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        scroll-behavior: smooth !important;
    }
    
    body {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Step 2: Fix header position */
    .header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        margin: 0 !important;
    }
    
    /* Step 3: Remove ALL spacing before hero section */
    .hero {
        margin: 0 !important;
        padding: 60px 0 60px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        background: radial-gradient(ellipse at top, rgba(59, 130, 246, 0.15), transparent 60%) !important;
    }
    
    /* Step 4: Hide problematic background elements */
    .hero-bg-logo {
        display: none !important;
    }
    
    .hero::before,
    .hero::after {
        display: none !important;
    }
    
    /* Step 5: Desktop 2-column layout for hero */
    .hero-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 60px !important;
        align-items: center !important;
        text-align: left !important;
    }
    
    .hero-text {
        order: 0 !important;
    }
    
    .hero-phone {
        order: 1 !important;
    }
    
    /* Step 6: Ensure all sections are visible and scrollable */
    section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Step 7: Show desktop scrollbar */
    body::-webkit-scrollbar {
        display: block !important;
        width: 12px !important;
    }
    
    body::-webkit-scrollbar-track {
        background: #0a0a0f !important;
    }
    
    body::-webkit-scrollbar-thumb {
        background: #3B82F6 !important;
        border-radius: 6px !important;
    }
    
    body::-webkit-scrollbar-thumb:hover {
        background: #2563eb !important;
    }
    
    html {
        scrollbar-width: thin !important;
        scrollbar-color: #3B82F6 #0a0a0f !important;
    }
    
    /* Step 8: Remove mobile menu from view */
    .mobile-menu {
        display: none !important;
    }
    
    .hamburger {
        display: none !important;
    }
    
    /* Step 9: Show desktop nav */
    .nav-desktop {
        display: flex !important;
    }
    
    /* Step 10: Container sizing */
    .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 40px !important;
    }
    
    /* Step 11: Typography sizing for desktop */
    .hero-title {
        font-size: 56px !important;
        line-height: 1.1 !important;
        text-align: left !important;
    }
    
    .hero-subtitle {
        font-size: 20px !important;
        line-height: 1.6 !important;
        text-align: left !important;
        margin: 16px 0 32px 0 !important;
    }
    
    /* Step 12: Remove any position fixed that locks viewport */
    body > *:not(.header):not(.mobile-menu) {
        position: relative !important;
    }
    
    /* Step 13: Ensure content flows naturally */
    .hero-badge {
        text-align: left !important;
        margin-bottom: 24px !important;
    }
    
    .hero-cta {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    
    .trust-signals {
        display: flex !important;
        gap: 24px !important;
        margin-top: 24px !important;
    }
}