/* Desktop Optimization - Fix Scrolling and Layout */

/* CRITICAL: Enable scrolling on desktop */
@media (min-width: 768px) {
    html {
        overflow-y: scroll;
        overflow-x: hidden;
        height: auto;
        min-height: 100vh;
    }
    
    body {
        overflow-y: scroll;
        overflow-x: hidden;
        height: auto;
        min-height: 100vh;
        max-height: none;
    }
    
    /* Show scrollbar on desktop for better UX */
    body::-webkit-scrollbar {
        display: block;
        width: 8px;
    }
    
    body::-webkit-scrollbar-track {
        background: #0a0e27;
    }
    
    body::-webkit-scrollbar-thumb {
        background: #1e2a4a;
        border-radius: 4px;
    }
    
    body::-webkit-scrollbar-thumb:hover {
        background: #2d3f6f;
    }
    
    body {
        -ms-overflow-style: auto;
        scrollbar-width: thin;
        scrollbar-color: #1e2a4a #0a0e27;
    }
    
    /* Ensure sections don't have height constraints */
    section {
        height: auto;
        max-height: none;
        min-height: auto;
    }
    
    /* Container desktop sizing */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
    }
    
    /* Hero desktop layout */
    .hero {
        padding: 120px 0 80px;
        min-height: auto;
        height: auto;
    }
    
    .hero-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }
    
    .hero-text {
        max-width: 100%;
    }
    
    .hero-title {
        font-size: 56px;
        line-height: 1.1;
        margin-bottom: 24px;
    }
    
    .hero-subtitle {
        font-size: 20px;
        line-height: 1.6;
        margin-bottom: 32px;
    }
    
    .hero-phone {
        max-width: 100%;
        padding: 0;
    }
    
    .hero-phone .phone-mockup {
        max-width: 380px;
        margin: 0 auto;
    }
    
    /* Social proof desktop */
    .social-proof {
        padding: 80px 0;
    }
    
    .proof-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
    
    .proof-card {
        padding: 32px 24px;
    }
    
    /* Problem/Solution desktop */
    .problem-solution {
        padding: 100px 0;
    }
    
    .problem-box,
    .solution-box {
        max-width: 900px;
        margin: 0 auto;
    }
    
    .problem-title {
        font-size: 48px;
    }
    
    .solution-title {
        font-size: 36px;
    }
    
    /* How it works desktop */
    .how-it-works {
        padding: 100px 0;
    }
    
    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
    
    .step {
        padding: 40px 32px;
    }
    
    .step-title {
        font-size: 24px;
    }
    
    .step-text {
        font-size: 16px;
    }
    
    /* Benefits desktop */
    .benefits-section {
        padding: 100px 0;
    }
    
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    
    .benefit-card {
        padding: 48px 40px;
    }
    
    .benefit-card h3 {
        font-size: 28px;
    }
    
    .benefit-card p {
        font-size: 17px;
    }
    
    /* Showcase desktop */
    .showcase {
        padding: 100px 0;
    }
    
    .showcase-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
    }
    
    .showcase-reverse {
        grid-template-columns: 1fr 1fr;
    }
    
    .showcase-reverse .showcase-text {
        order: 1;
    }
    
    .showcase-reverse .showcase-phone {
        order: 0;
    }
    
    .showcase-phone {
        max-width: 100%;
    }
    
    .showcase-phone img {
        max-width: 380px;
        margin: 0 auto;
        display: block;
    }
    
    .showcase-title {
        font-size: 42px;
    }
    
    .showcase-subtitle {
        font-size: 18px;
    }
    
    .showcase-list li {
        font-size: 17px;
    }
    
    /* Testimonials desktop */
    .testimonials {
        padding: 100px 0;
    }
    
    .testimonials-scroll {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 24px;
        overflow: visible;
    }
    
    .testimonial-card {
        min-width: auto;
        width: 100%;
    }
    
    /* FAQ desktop */
    .faq {
        padding: 100px 0;
    }
    
    .faq-list {
        max-width: 900px;
        margin: 0 auto;
    }
    
    .faq-question {
        font-size: 20px;
        padding: 28px 0;
    }
    
    .faq-answer p {
        font-size: 17px;
        line-height: 1.7;
    }
    
    /* Final CTA desktop */
    .final-cta {
        padding: 100px 0;
    }
    
    .final-cta-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
    }
    
    .final-cta-title {
        font-size: 48px;
    }
    
    .final-cta-subtitle {
        font-size: 20px;
    }
    
    .final-cta-phone {
        max-width: 100%;
    }
    
    .final-cta-phone img {
        max-width: 380px;
        margin: 0 auto;
        display: block;
    }
    
    /* Footer desktop */
    .footer {
        padding: 80px 0 40px;
    }
    
    .footer-content {
        grid-template-columns: repeat(4, 1fr);
        gap: 60px;
        margin-bottom: 60px;
    }
    
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        padding: 32px 0;
    }
    
    /* Better hover effects on desktop */
    .btn:hover {
        transform: translateY(-2px);
    }
    
    .feature-card:hover,
    .proof-card:hover,
    .benefit-card:hover {
        transform: translateY(-4px);
    }
    
    /* Desktop-specific improvements */
    .hero-benefits {
        display: flex;
        gap: 24px;
        margin: 32px 0;
    }
    
    .trust-signals {
        display: flex;
        gap: 24px;
        margin-top: 24px;
        font-size: 14px;
    }
    
    /* Header desktop */
    .header {
        padding: 0 40px;
    }
    
    .header-content {
        max-width: 1200px;
        margin: 0 auto;
        height: 72px;
    }
    
    .hamburger {
        display: none;
    }
    
    .nav-desktop {
        display: flex;
    }
    
    /* Floating stats desktop */
    .floating-stat {
        display: flex;
    }
    
    .floating-stat-1 {
        top: 10%;
        right: -10%;
    }
    
    .floating-stat-2 {
        bottom: 20%;
        right: -5%;
    }
}

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
        padding: 0 60px;
    }
    
    .hero-title {
        font-size: 64px;
    }
    
    .showcase-title,
    .final-cta-title {
        font-size: 52px;
    }
    
    .problem-title {
        font-size: 56px;
    }
}

/* Extra large desktop (1920px+) */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
}