/* ============================
   RESPONSIVE — 1024px
   ============================ */
@media (max-width: 1024px) {
    .hero__grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero__sub {
        margin-left: auto;
        margin-right: auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__stats {
        justify-content: center;
    }

    .hero__visual {
        order: -1;
    }

    .float-card--1 {
        left: -20px;
    }

    .float-card--2 {
        right: -20px;
    }

    .srv-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about__grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .about__img {
        max-width: 400px;
        margin: 0 auto;
    }

    .about__tools {
        justify-content: center;
    }

    .proc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .proc-grid::before {
        display: none;
    }

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

/* ============================
   RESPONSIVE — 768px
   ============================ */
@media (max-width: 768px) {
    /* Header */
    .nav {
        display: none;
    }

    .h-socials {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    /* Hero */
    .hero {
        padding: 100px 0 60px;
        min-height: auto;
    }

    .hero__title {
        font-size: clamp(30px, 8vw, 42px);
    }

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

    .hero__photo-wrap {
        width: clamp(220px, 70%, 300px);
    }

    .float-card {
        display: none;
    }

    .hero__corner {
        display: none;
    }

    /* Services */
    .srv-grid {
        grid-template-columns: 1fr;
    }

    /* Landing hero */
    .lh {
        padding: 100px 0 40px;
    }

    .lh__title {
        font-size: clamp(26px, 7vw, 38px);
    }

    .lh__trust {
        flex-direction: column;
        gap: 14px;
    }

    .lh__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .lh__actions .btn {
        width: 100%;
    }

    /* Before/After */
    .ba-grid {
        grid-template-columns: 1fr;
    }

    /* Process */
    .proc-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    /* Pricing */
    .pricing-row {
        grid-template-columns: 1fr;
    }

    /* Reviews */
    .rev-grid {
        grid-template-columns: 1fr;
    }

    /* CTA */
    .cta__box {
        padding: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 32px);
    }

    .cta__btns {
        flex-direction: column;
        align-items: center;
    }

    .cta__btns .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Includes */
    .includes-grid {
        grid-template-columns: 1fr;
    }

    /* Sticky CTA */
    .sticky-cta__inner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .sticky-cta__text {
        font-size: 13px;
    }

    .sticky-cta__btns {
        width: 100%;
    }

    .sticky-cta__btns .btn {
        flex: 1;
        padding: 12px 16px;
        font-size: 13px;
    }

    /* FAQ */
    .faq__q {
        font-size: 15px;
        padding: 18px 0;
    }

    /* About */
    .about__exp {
        bottom: -14px;
        right: -10px;
        padding: 14px 18px;
    }

    .about__exp-v {
        font-size: 28px;
    }
}

/* ============================
   RESPONSIVE — 480px
   ============================ */
@media (max-width: 480px) {
    .hero__title {
        font-size: 28px;
    }

    .hero__stats {
        gap: 20px;
    }

    .stat__val {
        font-size: 26px;
    }

    .lh__title {
        font-size: 26px;
    }

    .sh__title {
        font-size: 26px;
    }

    .srv {
        padding: 24px 20px;
    }

    .srv__title {
        font-size: 18px;
    }

    .srv__price-v {
        font-size: 20px;
    }

    .adv-grid {
        grid-template-columns: 1fr;
    }

    .proc-grid {
        grid-template-columns: 1fr;
    }

    .cta__title {
        font-size: 24px;
    }

    .ba-slider__handle {
        width: 36px;
        height: 36px;
    }

    .ba-slider__handle svg {
        width: 16px;
        height: 16px;
    }

    .price-card__num {
        font-size: 26px;
    }

    .guarantee {
        padding: 24px 20px;
    }

    .guarantee__icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .mob-nav a {
        font-size: 18px;
        padding: 12px 24px;
    }

    .hero__photo-wrap {
        width: clamp(200px, 65%, 260px);
    }

    .about__pic {
        aspect-ratio: 3/4;
    }

    .about__name {
        font-size: 20px;
    }

    .about__desc {
        font-size: 15px;
    }

    .about__tool {
        font-size: 12px;
        padding: 6px 12px;
    }

    .rev {
        padding: 22px;
    }

    .rev__text {
        font-size: 14px;
    }

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

    .footer__socials {
        justify-content: center;
    }

    .footer-seo {
        text-align: center;
    }

    .footer-seo__body {
        text-align: left;
    }

    .footer-seo__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================
   HOVER STATES — touch devices
   ============================ */
@media (hover: none) {
    .srv:hover {
        transform: none;
        box-shadow: none;
    }

    .adv:hover {
        transform: none;
    }

    .price-card:hover {
        transform: none;
    }

    .btn--gold:hover {
        transform: none;
    }

    .btn--tg:hover {
        transform: none;
    }

    .btn--wa:hover {
        transform: none;
    }

    .proc:hover .proc__num {
        background: var(--dark);
        color: var(--gold);
        box-shadow: none;
        transform: none;
    }
}
/* ============================
   HERO GIF — RESPONSIVE
   ============================ */
@media (max-width: 1100px) {
    .lh__row {
        gap: 40px;
    }
    
    .lh__visual {
        flex: 0 0 300px;
        width: 300px;
        height: 300px;
    }
    
    .lh__content {
        max-width: 60%;
    }
}

@media (max-width: 900px) {
    .lh__row {
        flex-direction: column;
        text-align: center;
    }
    
    .lh__content {
        max-width: 100%;
    }
    
    .lh__visual {
        flex: none;
        width: 280px;
        height: 280px;
        order: -1;
        margin-bottom: 20px;
    }
    
    .lh__btns {
        justify-content: center;
    }
    
    .lh__trust {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .lh__visual {
        width: 240px;
        height: 240px;
    }
    
    .lh__visual::after {
        inset: -8px;
    }
}
/* ============================
   HERO GIF — RESPONSIVE
   ============================ */
@media (max-width: 1100px) {
    .lh__row {
        gap: 40px;
    }
    
    .lh__visual {
        flex: 0 0 300px;
        width: 300px;
        height: 300px;
    }
    
    .lh__content {
        max-width: 60%;
    }
}

@media (max-width: 900px) {
    .lh__row {
        flex-direction: column;
        text-align: center;
    }
    
    .lh__content {
        max-width: 100%;
    }
    
    .lh__visual {
        flex: none;
        width: 280px;
        height: 280px;
        order: -1;
        margin-bottom: 20px;
    }
    
    .lh__btns {
        justify-content: center;
    }
    
    .lh__trust {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .lh__visual {
        width: 240px;
        height: 240px;
    }
    
    .lh__visual::after {
        inset: -8px;
    }
}
/* ============================
   LH HERO — RESPONSIVE
   ============================ */
@media (max-width: 968px) {
    .lh__row {
        flex-direction: column;
        text-align: center;
    }
    
    .lh__visual {
        order: -1;
        width: 300px;
        height: 300px;
        flex: none;
        margin-bottom: 30px;
        /* Оптимизация анимации для мобильных */
        animation: visualFloatMobile 5s ease-in-out infinite;
        will-change: transform;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .lh__content {
        max-width: 100%;
    }
    
    .lh__btns,
    .lh__trust {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .lh__visual {
        width: 250px;
        height: 250px;
        /* Отключаем анимацию на очень маленьких экранах */
        animation: none;
    }
}

/* Более плавная анимация для мобильных */
@keyframes visualFloatMobile {
    0%, 100% { 
        transform: translateY(0) translateZ(0); 
    }
    50% { 
        transform: translateY(-8px) translateZ(0); 
    }
}
/* ============================
   HERO ГЛАВНАЯ — RESPONSIVE
   ============================ */
@media (max-width: 968px) {
    .hero__row {
        flex-direction: column;
        text-align: center;
    }
    
    .hero__visual {
        order: -1;
        width: 350px;
        flex: none;
        margin-bottom: 30px;
    }
    
    .hero__badge--ps {
        left: 0;
        top: 5%;
    }
    
    .hero__badge--time {
        right: 0;
        bottom: 10%;
    }
    
    .hero__content {
        max-width: 100%;
    }
    
    .hero__btns,
    .hero__trust {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero__visual {
        width: 280px;
    }
    
    .hero__badge {
        padding: 8px 12px;
        font-size: 11px;
    }
    
    .hero__badge--ps {
        left: -5px;
    }
    
    .hero__badge--time {
        right: -5px;
    }
}