/* Smooth Scrolling Optimizations */

/* Ultra-smooth scroll behavior */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
}

body {
    scroll-behavior: smooth;
}

/* Optimize for 60fps scrolling - removed global transforms that cause scroll bugs */

/* Prevent scroll bounce/overscroll on iOS - mobile only */
@media (max-width: 767px) {
    body {
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
    }
}

/* Desktop: allow normal scrolling */
@media (min-width: 768px) {
    body {
        overscroll-behavior-y: auto;
    }
}

/* Smooth transitions for all elements */
section {
    will-change: transform;
}

/* Ensure images load smoothly */
img {
    max-width: 100%;
    height: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Phone mockup visibility fixes */
.phone-mockup {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.phone-mockup img {
    width: 100%;
    height: auto;
    border-radius: 24px;
    object-fit: contain;
}

/* Hero phone - ensure full visibility */
.hero-phone {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 24px auto 0;
}

.hero-phone .phone-mockup {
    max-width: 320px;
    margin: 0 auto;
}

/* Showcase phone - ensure full visibility */
.showcase-phone {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.showcase-phone img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
}

/* Final CTA phone */
.final-cta-phone {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.final-cta-phone img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
}

/* Section transitions - simplified for better scroll performance */
section {
    position: relative;
}

/* Mobile-specific scroll optimizations */
@media (max-width: 767px) {
    /* Ensure hero image fits perfectly */
    .hero-phone {
        padding: 0 16px;
        max-width: 100%;
    }
    
    .hero-phone .phone-mockup {
        max-width: 100%;
        width: 100%;
    }
    
    .hero-phone .phone-mockup img {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
    
    /* Problem section image spacing */
    .problem-solution {
        padding: 60px 0;
    }
    
    /* Showcase images */
    .showcase-phone {
        padding: 0 16px;
    }
    
    .showcase-phone img {
        max-width: 280px;
        border-radius: 24px;
    }
    
    /* Ensure all sections have proper spacing */
    section {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Container padding */
    .container {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
    }
    
    /* Remove any negative margins */
    * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .hero-content,
    .showcase-content,
    .final-cta-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Optimize text rendering for smooth scroll */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent layout shift during scroll - removed contain property that breaks scroll */

/* GPU acceleration for smooth animations - only on hover */
.btn:hover,
.feature-card:hover,
.proof-card:hover {
    will-change: transform;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Ensure smooth scrolling on all browsers */
@supports (scroll-behavior: smooth) {
    html {
        scroll-behavior: smooth;
    }
}

/* Fix for Safari momentum scrolling */
@supports (-webkit-overflow-scrolling: touch) {
    body {
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
    }
}