/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .stats-row {
        gap: 48px;
    }

    .steps-grid {
        gap: 32px;
    }

    .feature-grid {
        gap: 36px 48px;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
    .section {
        padding: 80px 24px 48px;
    }

    .hero {
        padding: 60px 24px 48px;
    }

    .hero-headline {
        margin-bottom: 32px;
        letter-spacing: -1px;
    }

    .hero-insight {
        margin-bottom: 10px;
    }

    .hero-insight-2 {
        margin-bottom: 36px;
    }

    .hero-constraint {
        margin-bottom: 36px;
    }

    .hero-mark {
        height: 24px;
        margin-bottom: 36px;
    }

    .corner {
        display: none;
    }

    .feature {
        padding: 48px 24px;
    }

    .feature-body {
        max-width: 100%;
    }

    .visual-block {
        width: 100%;
        margin-top: 40px;
    }

    .video-block {
        width: 100%;
        margin-top: 36px;
    }

    .video-label {
        max-width: 100%;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 100%;
    }

    .stats-row {
        gap: 40px;
        flex-direction: column;
    }

    .steps-grid {
        flex-direction: column;
        gap: 28px;
        margin-top: 16px;
    }

    .step-num {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .step {
        min-width: auto;
    }

    .progress-dots {
        right: 12px;
        gap: 8px;
    }

    .dot {
        width: 6px;
        height: 6px;
    }

    .fixed-logo {
        top: 20px;
        left: 24px;
    }

    .fixed-cta {
        top: 20px;
        right: 24px;
        padding: 8px 18px;
    }

    .cta-button {
        padding: 16px 36px;
    }

    /* Modal */
    .modal-content {
        padding: var(--spacing-lg);
    }

    .modal-headline {
        font-size: var(--text-3xl);
    }

    .btn {
        padding: 0.875rem 1.5rem;
    }

    .btn-large {
        padding: 1rem 2rem;
        font-size: var(--text-base);
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    .btn {
        padding: 0.75rem 1.25rem;
        font-size: var(--text-sm);
    }
}

/* Hover Effects - Disable on Touch */
@media (hover: none) and (pointer: coarse) {
    .cta-button:hover {
        transform: none;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}