/* ========================================
   📱 МОБИЛЬНАЯ ОПТИМИЗАЦИЯ
   ========================================
   
   Полная адаптация под:
   - iPhone (320px - 428px)
   - Android (360px - 414px)
   - iPad Mini (768px)
   - iPad Pro (1024px)
*/

/* ========================================
   ОБЩИЕ УЛУЧШЕНИЯ ДЛЯ МОБИЛЬНЫХ
   ======================================== */

@media (max-width: 768px) {
    /* Контейнер */
    .container {
        padding: 0 20px;
    }

    /* Заголовки */
    .section-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .section-subtitle {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* Header */
    .header {
        height: 64px;
    }

    .nav {
        height: 64px;
    }

    .logo {
        font-size: 16px;
    }

    .logo img {
        width: 28px;
        height: 28px;
    }

    .nav-cta {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* ========================================
   HERO СЕКЦИЯ
   ======================================== */

@media (max-width: 968px) {
    .hero {
        padding: 100px 0 60px;
    }

    .hero .container {
        flex-direction: column;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
        margin-bottom: 60px;
    }

    .hero-badge {
        font-size: 13px;
        padding: 8px 16px;
    }

    .hero-title {
        font-size: 48px !important;
        line-height: 1.1 !important;
        margin-bottom: 24px !important;
    }

    .hero-description {
        font-size: 18px !important;
        line-height: 1.6 !important;
        margin-bottom: 32px !important;
    }

    .hero-actions {
        justify-content: center;
    }

    .btn-primary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
        gap: 24px;
        flex-wrap: wrap;
    }

    .stat {
        flex: 0 1 calc(50% - 12px);
        min-width: 140px;
    }

    .stat-value {
        font-size: 32px !important;
    }

    .stat-label {
        font-size: 13px !important;
    }

    /* Hero Visual - скриншот */
    .hero-visual {
        max-width: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .hero-visual > div {
        max-width: 320px !important;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 40px !important;
    }

    .hero-description {
        font-size: 16px !important;
    }

    .hero-stats {
        gap: 16px;
    }

    .stat {
        flex: 1 1 100%;
    }
}

/* ========================================
   FEATURES СЕКЦИЯ
   ======================================== */

@media (max-width: 968px) {
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .feature {
        padding: 32px 24px !important;
        text-align: center;
    }

    .feature-icon {
        margin: 0 auto 20px;
    }

    .feature-title {
        font-size: 20px !important;
    }

    .feature-text {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* ========================================
   3D КАРТОЧКИ (PREMIUM FEATURES)
   ======================================== */

@media (max-width: 968px) {
    .animated-cards {
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        gap: 40px;
    }

    .card-box {
        width: 100% !important;
        max-width: 340px !important;
        height: 420px !important;
        margin: 0 !important;
    }

    .card-box::before,
    .card-box::after {
        left: 30px !important;
        width: calc(100% - 60px) !important;
    }

    .card-box:hover::before,
    .card-box:hover::after {
        left: 20px !important;
        width: calc(100% - 40px) !important;
    }

    .card-content {
        padding: 24px 28px !important;
    }

    .card-box:hover .card-content {
        left: -15px !important;
        padding: 40px 28px !important;
    }

    .card-content h3 {
        font-size: 22px !important;
    }

    .card-content p {
        font-size: 15px !important;
    }

    .card-content a {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .card-box {
        max-width: 300px !important;
        height: 400px !important;
    }

    .card-content {
        padding: 20px 24px !important;
    }

    .card-content h3 {
        font-size: 20px !important;
    }

    .card-content p {
        font-size: 14px !important;
    }
}

/* ========================================
   HOW IT WORKS
   ======================================== */

@media (max-width: 968px) {
    .how-it-works [style*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .how-it-works [style*="padding: 40px"] {
        padding: 32px 24px !important;
    }

    .how-it-works h3 {
        font-size: 20px !important;
    }

    .how-it-works p {
        font-size: 15px !important;
    }

    .how-it-works [style*="width: 80px"] {
        width: 64px !important;
        height: 64px !important;
        font-size: 28px !important;
        margin-bottom: 20px !important;
    }
}

/* ========================================
   STATISTICS
   ======================================== */

@media (max-width: 968px) {
    .stats {
        padding: 60px 0 !important;
    }

    .stats [style*="grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px 20px !important;
    }

    .stats [style*="font-size: 56px"] {
        font-size: 40px !important;
    }

    .stats [style*="font-size: 18px"] {
        font-size: 16px !important;
    }

    .stats [style*="font-size: 14px"] {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .stats [style*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .stats [style*="font-size: 56px"],
    .stats [style*="font-size: 40px"] {
        font-size: 36px !important;
    }
}

/* ========================================
   TESTIMONIALS
   ======================================== */

@media (max-width: 968px) {
    .testimonials {
        padding: 80px 0 !important;
    }

    .testimonials [style*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .testimonials [style*="padding: 40px"] {
        padding: 28px 24px !important;
    }

    .testimonials [style*="font-size: 24px"] {
        font-size: 20px !important;
    }

    .testimonials [style*="font-size: 16px"] {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .testimonials [style*="width: 48px"] {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ========================================
   FAQ
   ======================================== */

@media (max-width: 968px) {
    .faq {
        padding: 80px 0 !important;
    }

    .faq > .container > div {
        max-width: 100% !important;
    }

    .faq [style*="padding: 32px"] {
        padding: 24px 20px !important;
    }

    .faq h3 {
        font-size: 17px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .faq p {
        font-size: 15px !important;
        padding-left: 0 !important;
    }
}

@media (max-width: 480px) {
    .faq [style*="padding: 24px"] {
        padding: 20px 16px !important;
    }

    .faq h3 {
        font-size: 16px !important;
    }

    .faq p {
        font-size: 14px !important;
    }
}

/* ========================================
   CTA
   ======================================== */

@media (max-width: 768px) {
    .cta {
        padding: 80px 0 !important;
    }

    .cta-title {
        font-size: 36px !important;
    }

    .cta-text {
        font-size: 16px !important;
    }

    .btn-large {
        width: 100%;
        max-width: 280px;
    }
}

/* ========================================
   FOOTER
   ======================================== */

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-brand {
        margin-bottom: 8px;
    }

    .footer-text {
        font-size: 13px;
    }
}

/* ========================================
   ГРАДИЕНТНЫЕ ФОНЫ (МОБИЛЬНАЯ ОПТИМИЗАЦИЯ)
   ======================================== */

@media (max-width: 768px) {
    /* Уменьшить blur для производительности */
    body[class*="gradient-"]::before,
    body[class*="gradient-"]::after {
        filter: blur(40px) !important;
    }

    /* Упростить анимации */
    @keyframes mesh-gradient {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(-5%, 5%); }
    }

    @keyframes aurora-wave {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10%); }
    }

    @keyframes liquid-flow {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50% { transform: translate(-3%, 3%) scale(0.98); }
    }
}

/* ========================================
   TOUCH УСТРОЙСТВА
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    /* Убрать hover эффекты для touch */
    .card-box:hover span::before,
    .card-box:hover span::after {
        display: none;
    }

    /* Упростить карточки */
    .card-box::after {
        filter: blur(20px) !important;
    }

    /* Увеличить области касания */
    .btn,
    .nav-cta,
    a {
        min-height: 44px;
        padding: 12px 24px;
    }
}

/* ========================================
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (iPhone SE)
   ======================================== */

@media (max-width: 375px) {
    .hero-title {
        font-size: 36px !important;
    }

    .section-title {
        font-size: 28px !important;
    }

    .container {
        padding: 0 16px;
    }

    .card-box {
        max-width: 280px !important;
    }

    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* ========================================
   LANDSCAPE ОРИЕНТАЦИЯ НА МОБИЛЬНЫХ
   ======================================== */

@media (max-width: 968px) and (orientation: landscape) {
    .hero {
        padding: 80px 0 40px;
    }

    .hero-title {
        font-size: 40px !important;
    }

    .hero-visual > div {
        max-width: 280px !important;
    }

    section {
        padding: 60px 0 !important;
    }
}

/* ========================================
   ПРОИЗВОДИТЕЛЬНОСТЬ НА МОБИЛЬНЫХ
   ======================================== */

@media (max-width: 768px) {
    /* Отключить тяжелые анимации */
    .noise {
        opacity: 0.02 !important;
        animation: none !important;
    }

    /* Упростить фоновые градиенты */
    body::before,
    body::after {
        display: none !important;
    }

    /* Оптимизировать тени */
    .card-box,
    .feature,
    [style*="box-shadow"] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    }

    /* Отключить параллакс */
    .hero-gradient {
        animation: none !important;
    }
}

/* ========================================
   АДАПТИВНЫЙ СКРИНШОТ
   ======================================== */

@media (max-width: 968px) {
    .hero-visual > div {
        max-width: 320px !important;
    }

    .hero-visual img {
        width: 100% !important;
        height: auto !important;
    }

    /* Уменьшить декоративные элементы */
    .hero-visual [style*="position: absolute"] {
        width: 60px !important;
        height: 60px !important;
        filter: blur(20px) !important;
    }
}

@media (max-width: 480px) {
    .hero-visual > div {
        max-width: 280px !important;
    }
}

/* ========================================
   АДАПТИВНАЯ ТИПОГРАФИКА
   ======================================== */

@media (max-width: 768px) {
    /* Fluid Typography */
    h1 {
        font-size: clamp(32px, 8vw, 48px) !important;
    }

    h2 {
        font-size: clamp(24px, 6vw, 36px) !important;
    }

    h3 {
        font-size: clamp(18px, 4vw, 24px) !important;
    }

    p {
        font-size: clamp(14px, 3.5vw, 16px) !important;
    }
}

/* ========================================
   КНОПКИ НА МОБИЛЬНЫХ
   ======================================== */

@media (max-width: 768px) {
    .btn {
        padding: 14px 28px;
        font-size: 15px;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .btn-large {
        padding: 16px 32px;
    }

    /* Увеличить область касания */
    .btn,
    .nav-cta,
    a[href] {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ========================================
   СЕКЦИИ - SPACING
   ======================================== */

@media (max-width: 768px) {
    section {
        padding: 80px 0 !important;
    }

    .section-header {
        margin-bottom: 48px !important;
    }

    .premium-features,
    .features,
    .how-it-works,
    .stats,
    .testimonials,
    .faq {
        padding: 60px 0 !important;
    }
}

@media (max-width: 480px) {
    section {
        padding: 60px 0 !important;
    }
}

/* ========================================
   СЕТКИ И LAYOUTS
   ======================================== */

@media (max-width: 768px) {
    /* Все grid в одну колонку */
    [style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Уменьшить gaps */
    [style*="gap: 60px"],
    [style*="gap: 40px"] {
        gap: 24px !important;
    }

    [style*="gap: 30px"] {
        gap: 20px !important;
    }
}

/* ========================================
   ИЗОБРАЖЕНИЯ
   ======================================== */

@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }

    /* Оптимизация скриншота */
    .hero-visual img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ========================================
   SCROLL PERFORMANCE
   ======================================== */

@media (max-width: 768px) {
    /* Улучшить скролл */
    body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Отключить сложные трансформации */
    * {
        will-change: auto !important;
    }
}

/* ========================================
   SAFE AREAS (iPhone с вырезами)
   ======================================== */

@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .header {
        padding-top: env(safe-area-inset-top);
    }
}

/* ========================================
   PREFERS REDUCED MOTION
   ======================================== */

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

/* ========================================
   ТЕМНАЯ ТЕМА (iOS/Android)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Уже темная, но можем усилить */
    body {
        background: #000 !important;
    }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
    .card-box::before,
    .card-box::after {
        filter: blur(0) !important;
    }

    [style*="backdrop-filter"] {
        backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.95) !important;
    }
}

/* ========================================
   PRINT СТИЛИ (бонус)
   ======================================== */

@media print {
    .noise,
    .hero-gradient,
    .features-bg-gradient,
    [style*="position: fixed"],
    [style*="animation"] {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}