/* ============================================================
   1. ПЛАНШЕТ-ГОРИЗОНТАЛЬНЫЙ / НОУТБУК (до 1439px)
   ============================================================ */

@media (max-width: 1439px) {
    .intro__grid { gap: 20px; }
    .features__grid { gap: 20px; }
    .services__grid { gap: 20px; }
    .contacts__grid { gap: 32px; }
    .footer__grid { gap: 34px; }
}

/* ============================================================
   2. ПЛАНШЕТ ВЕРТИКАЛЬНЫЙ (до 1023px)
   ============================================================ */

@media (max-width: 1023px) {
    .section { padding: 76px 0; }

    .intro__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .intro-card--wide { grid-column: span 2; }

    .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .contacts__grid { grid-template-columns: 1fr; gap: 28px; }
    .contacts__map,
    .map { min-height: 420px; }

    .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
    .footer__brand { grid-column: 1 / -1; }
    .footer__brand p { max-width: 520px; }

    .footer__bottom { gap: 12px 24px; }
}

/* ============================================================
   3. ТЕЛЕФОН-БОЛЬШОЙ (до 767px)
   ============================================================ */

@media (max-width: 767px) {
    .section { padding: 64px 0; }

    .intro__grid { grid-template-columns: 1fr; }
    .intro-card--wide {
        grid-column: auto;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .contacts__map,
    .map { min-height: 380px; }

    .footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .footer__brand { grid-column: auto; }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .doc-page__content { font-size: 15px; }
}

/* ============================================================
   4. ТЕЛЕФОН (до 640px)
   ============================================================ */

@media (max-width: 640px) {
    .section { padding: 56px 0; }

    .features__grid { grid-template-columns: 1fr; }
    .services__grid { grid-template-columns: 1fr; }

    .intro-card { padding: 26px 24px; }
    .feature-card { padding: 26px 24px; }
    .service-card__body { padding: 22px 24px 26px; }

    .contacts__map,
    .map { min-height: 340px; }
    .contact-item { padding: 18px; }

    .footer { padding: 48px 0 24px; }
    .footer__legal-block { margin-top: 30px; }

    .footer-docs { font-size: 12px; line-height: 2; }
    .footer-docs a { font-size: 12px; }
    .footer-docs__sep { margin: 0 6px; }

    .scroll-up {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }

    .doc-page__content { font-size: 14.5px; }
    .doc-page__content h2 { font-size: 1.2rem; }
}

/* ============================================================
   5. МЕЛКИЙ ТЕЛЕФОН (до 480px)
   ============================================================ */

@media (max-width: 480px) {
    .intro-card { padding: 24px 20px; }
    .intro-card__icon { width: 48px; height: 48px; border-radius: 13px; }
    .intro-card__icon svg { width: 24px; height: 24px; }

    .feature-card { padding: 24px 20px; }
    .feature-card__icon { width: 60px; height: 60px; }
    .feature-card__icon img { width: 44px; height: 44px; }

    .service-card__body { padding: 20px 20px 24px; }

    .contact-item { padding: 16px; gap: 13px; }
    .contact-item__icon { width: 42px; height: 42px; }
    .contact-item__value { font-size: 14.5px; }

    .map { min-height: 310px; }
    .map__placeholder { padding: 24px; }

    .footer__legal-block { padding: 16px; }
    .footer__bottom { font-size: 12.5px; }

    .doc-page__content h2 { font-size: 1.14rem; }
}

/* ============================================================
   6. УМЕНЬШЕННОЕ ДВИЖЕНИЕ
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html.js .reveal { opacity: 1; transform: none; }
}