/* =============================================
   MOBILE & TABLET - CLEAN & SIMPLE
   NO scroll-snap, NO overflow issues, FULL screen sections
   ============================================= */

/* ============================================
   DISABLE SCROLL SNAP ON MOBILE
   ============================================ */

@media (max-width: 768px) {
    html {
        scroll-snap-type: none !important;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* ============================================
   MOBILE GLOBAL FIXES (≤768px)
   ============================================ */

@media (max-width: 768px) {
    
    /* ALL SECTIONS: Full screen, no overflow issues */
    .full-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: auto;
        padding: 80px 25px !important;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-align: none !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
    
    /* HERO SECTION */
    .hero-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: 3rem 1.5rem !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
    }
    
    .hero-content-centered {
        position: relative;
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        padding: 2rem 0;
    }
    
    .logo-hero {
        width: 140px !important;
        height: auto;
        margin-bottom: 2rem;
        position: relative;
        z-index: 100;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        filter: brightness(0) invert(1);
    }
    
    .hero-title-twolines {
        font-size: 1.8rem;
        line-height: 1.3;
        margin-bottom: 1.5rem;
        text-align: center;
        max-width: 90%;
        position: relative;
        z-index: 20;
    }
    
    .hero-video-player {
        width: 100%;
        max-width: 100%;
        margin: 1.5rem 0;
        position: relative;
        z-index: 20;
    }
    
    .hero-video-player iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        max-width: 100%;
    }
    
    .cta-big {
        font-size: 1rem;
        padding: 1rem 2.5rem;
        width: 100%;
        max-width: 280px;
        margin: 1.5rem 0 0.5rem 0;
        position: relative;
        z-index: 20;
        white-space: nowrap;
    }
    
    .hero-cta-subtext {
        font-size: 0.9rem;
        margin-top: 0.5rem;
        margin-bottom: 2rem;
        position: relative;
        z-index: 20;
        text-align: center;
    }
    
    /* CRISIS SECTION */
    .crisis-section {
        padding: 80px 25px !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .crisis-number {
        font-size: 3rem;
        margin-bottom: 25px;
    }
    
    .crisis-statement {
        font-size: 1.4rem;
        line-height: 1.4;
        margin-bottom: 20px;
    }
    
    .crisis-subtext {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* FULL BLEED IMAGE SECTIONS */
    .image-fullbleed,
    .image-text-center {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        background-size: cover;
        background-position: center;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .image-text-elegant {
        font-size: 1.2rem;
        line-height: 1.5;
        margin-bottom: 25px;
    }
    
    .image-subtext {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .stat-massive {
        font-size: 3rem;
        margin-bottom: 20px;
    }
    
    .stat-sub {
        font-size: 1.1rem;
        line-height: 1.5;
    }
    
    /* WE BELIEVE SECTION */
    .believe-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .believe-lead-twolines {
        font-size: 1.6rem;
        line-height: 1.4;
        text-align: center;
    }
    
    /* PROBLEM/SOLUTION SECTION */
    .split-section-apple {
        display: flex;
        flex-direction: column;
        height: auto !important;
        min-height: auto !important;
    }
    
    .split-half {
        width: 100%;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 30px !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .split-content {
        width: 100%;
        max-width: 600px;
    }
    
    .split-content h2 {
        font-size: 2.2rem;
        margin-bottom: 40px;
        font-weight: 900;
        line-height: 1.1;
    }
    
    .split-list {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    .split-item {
        font-size: 1.15rem;
        line-height: 1.6;
        padding-left: 40px;
        position: relative;
        font-weight: 500;
    }
    
    .split-item:before {
        content: '•';
        position: absolute;
        left: 0;
        font-size: 2rem;
        font-weight: 700;
    }
    
    /* PRODUCT SECTION */
    .product-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .full-image {
        width: 100%;
        max-height: 50vh;
        object-fit: contain;
        margin-bottom: 30px;
    }
    
    .product-stats {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 40px 25px;
        width: 100%;
        background: rgba(0,0,0,0.8);
    }
    
    .product-stat {
        text-align: center;
    }
    
    .stat-num {
        font-size: 2.5rem;
        margin-bottom: 10px;
        font-weight: 900;
    }
    
    .stat-label {
        font-size: 1rem;
        line-height: 1.4;
    }
    
    /* 100 BOTTLES SECTION */
    .hundred-bottles-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .hundred-title {
        font-size: 2rem;
        margin-bottom: 20px;
        line-height: 1.2;
        text-align: center;
    }
    
    .hundred-subtitle {
        font-size: 1.1rem;
        margin-bottom: 40px;
        text-align: center;
    }
    
    .bottles-comparison {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        margin-bottom: 50px;
    }
    
    .concentrate-bottle,
    .spray-bottles-grid {
        width: 100%;
        max-width: 300px;
    }
    
    .concentrate-img {
        width: 100%;
        max-width: 200px;
    }
    
    .equals-sign {
        font-size: 3rem;
        transform: none;
        margin: 0 20px;
    }
    
    .spray-bottles-visual img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
    
    .savings-breakdown {
        padding: 50px 25px;
    }
    
    .savings-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .savings-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    .savings-card {
        padding: 30px 20px;
    }
    
    .savings-number {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }
    
    .savings-label {
        font-size: 1rem;
    }
    
    /* TEAM SECTION */
    .team-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    
    .team-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        width: 100%;
    }
    
    .team-member {
        padding: 30px 20px;
    }
    
    .member-photo {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
    }
    
    .member-name {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }
    
    .member-title {
        font-size: 1rem;
        margin-bottom: 15px;
    }
    
    .member-bio {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    /* DIFFERENTIATION SECTION */
    .diff-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .diff-statement {
        font-size: 1.8rem;
        line-height: 1.3;
        margin-bottom: 50px;
        text-align: center;
    }
    
    .diff-grid-full {
        display: grid;
        grid-template-columns: 1fr;
        gap: 25px;
        width: 100%;
    }
    
    .diff-card {
        padding: 40px 30px;
        min-height: auto;
    }
    
    .diff-card h4 {
        font-size: 1.3rem;
        margin-bottom: 12px;
    }
    
    .diff-card p {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    /* AUDIENCE SECTION */
    .audience-section,
    .audience-section-images {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .audience-section-images h2 {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    
    .audience-title {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .audience-subtitle {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }
    
    .audience-grid-images {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .audience-item {
        width: 100%;
    }
    
    .audience-img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
    
    .audience-card {
        padding: 25px 20px;
    }
    
    .audience-emoji {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }
    
    .audience-label {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .audience-description {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    /* INVESTORS SECTION */
    .investors-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .investors-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .investors-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    .investor-card {
        padding: 30px 20px;
    }
    
    .investor-amount {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }
    
    .investor-label {
        font-size: 1rem;
    }
    
    /* ROADMAP SECTION */
    .roadmap-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .roadmap-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    
    .roadmap-timeline {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    .roadmap-item {
        padding: 25px 20px;
    }
    
    .roadmap-quarter {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .roadmap-milestone {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    /* FORM SECTION */
    .form-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .form-title {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .form-subtitle {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }
    
    .contact-form {
        width: 100%;
        max-width: 500px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-input,
    .form-textarea {
        width: 100%;
        font-size: 1rem;
        padding: 14px;
    }
    
    .form-button {
        width: 100%;
        font-size: 1rem;
        padding: 16px;
    }
    
    /* CTA BUTTONS - Mobile */
    .cta-big {
        font-size: 1.05rem;
        padding: 16px 35px;
        width: 100%;
        max-width: 320px;
    }
    
    .hundred-cta-box {
        padding: 40px 25px;
        margin-top: 40px;
    }
    
    .cta-box-title {
        font-size: 1.6rem;
        line-height: 1.3;
    }
    
    .cta-box-subtitle {
        font-size: 1.05rem;
    }
    
    .cta-button-large {
        font-size: 1.1rem;
        padding: 16px 40px;
        width: 100%;
        max-width: 320px;
    }
    
    /* TESTIMONIALS SECTION - Mobile */
    .testimonials-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .testimonials-title {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .testimonials-subtitle {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }
    
    .trust-badges {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 50px;
    }
    
    .badge-stat {
        font-size: 2rem;
    }
    
    .badge-label {
        font-size: 0.85rem;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .testimonial-card {
        padding: 30px 25px;
    }
    
    .testimonial-text {
        font-size: 1rem;
    }
    
    /* FAQ SECTION - Mobile */
    .faq-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .faq-title {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .faq-subtitle {
        font-size: 1.05rem;
        margin-bottom: 40px;
    }
    
    .faq-question {
        padding: 20px 20px;
        font-size: 1.05rem;
    }
    
    .faq-icon {
        font-size: 1.3rem;
    }
    
    .faq-answer {
        padding: 0 20px;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 20px 20px 20px;
    }
    
    .faq-answer p {
        font-size: 0.95rem;
    }
    
    /* QUIZ SECTION - Mobile */
    .quiz-section-typeform {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* CLOSE SECTION - Mobile */
    .close-section {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 80px 25px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* LANGUAGE SWITCHER - Mobile */
    .language-switcher {
        top: 20px;
        right: 20px;
    }
    
    .lang-link {
        padding: 8px 16px;
        font-size: 0.85rem;
        border-radius: 20px;
    }
}

/* ============================================
   TABLET (769px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    
    .full-section {
        padding: 80px 40px;
    }
    
    .hero-title-twolines {
        font-size: 3rem;
    }
    
    .crisis-statement {
        font-size: 2rem;
    }
    
    .believe-lead-twolines {
        font-size: 2.5rem;
    }
    
    .split-content h2 {
        font-size: 2.8rem;
    }
    
    .split-item {
        font-size: 1.2rem;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .diff-grid-full {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .diff-statement {
        font-size: 2.2rem;
    }
    
    .audience-grid-images {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    /* TESTIMONIALS - Tablet */
    .trust-badges {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonials-title {
        font-size: 2.5rem;
    }
    
    /* CTA BUTTONS - Tablet */
    .cta-big {
        font-size: 1.15rem;
    }
    
    .cta-box-title {
        font-size: 2rem;
    }
}

/* ============================================
   EXTRA SMALL PHONES (≤480px)
   ============================================ */

@media (max-width: 480px) {
    
    .full-section {
        padding: 50px 20px;
    }
    
    .hero-title-twolines {
        font-size: 1.75rem;
    }
    
    .crisis-statement {
        font-size: 1.2rem;
    }
    
    .believe-lead-twolines {
        font-size: 1.4rem;
    }
    
    .split-content h2 {
        font-size: 1.9rem;
    }
    
    .split-item {
        font-size: 1rem;
        padding-left: 35px;
    }
    
    .split-item:before {
        font-size: 1.75rem;
    }
    
    .diff-statement {
        font-size: 1.5rem;
    }
    
    .diff-card {
        padding: 35px 25px;
    }
    
    .diff-card h4 {
        font-size: 1.15rem;
    }
    
    .diff-card p {
        font-size: 0.95rem;
    }
}