/* ─── TABLET (max-width: 1024px) ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-stats {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
    }

    .stat-item {
        flex: 1;
        min-width: 160px;
        border-right: 1px solid var(--border);
    }

    .stat-item:last-child {
        border-right: none;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .contact-left {
        order: 2;
    }

    .form-wrap {
        order: 1;
    }

    .process-item {
        grid-template-columns: 60px 1fr;
    }

    .process-step-desc {
        display: none;
    }
}

/* ─── MOBILE (max-width: 768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {
    nav {
        padding: 20px 24px;
    }

    nav.scrolled {
        padding: 14px 24px;
    }

    .nav-links,
    .nav-cta {
        display: none;
    }

    .nav-burger {
        display: flex;
    }

    #hero {
        padding: 0 24px 80px 24px;
    }

    .hero-bg-word {
        font-size: clamp(100px, 30vw, 160px);
        font-size: max(100px, min(30vw, 160px)); /* fallback */
        right: -20px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .section-inner {
        padding: 0 24px;
    }

    #about {
        padding: 80px 0 70px;
    }

    #services {
        padding: 80px 0 70px;
    }

    #portfolio {
        padding: 80px 0 0;
    }

    #process {
        padding: 80px 0 70px;
    }

    #contact {
        padding: 80px 0 70px;
    }

    .services-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

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

    .portfolio-header {
        padding: 0 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Карусель на мобиле — карточки на всю ширину с подсмотром следующей */
    .portfolio-scroll {
        padding: 0 0 60px 16px;
        gap: 12px;
        /* Привязка snap к началу карточки с учётом отступа */
        scroll-padding-left: 16px;
    }

    .portfolio-wrap {
        overflow: hidden;
    }

    .portfolio-card {
        /* 85% ширины экрана — видно следующую карточку */
        width: 85vw;
        max-width: 340px;
        height: 420px;
    }

    .process-item {
        grid-template-columns: 50px 1fr;
        gap: 20px;
        padding: 24px 0;
    }

    .process-item:hover {
        margin: 0;
        padding: 24px 0;
        background: transparent;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-wrap {
        padding: 32px 24px;
    }

    footer {
        padding: 36px 24px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .about-stats {
        flex-direction: column;
    }

    .stat-item {
        border-right: none;
    }
}

/* ─── SMALL MOBILE (max-width: 480px) ───────────────────────────────────── */
@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(40px, 12vw, 56px);
        font-size: max(40px, min(12vw, 56px)); /* fallback */
    }

    .btn-primary {
        padding: 14px 28px;
    }

    .portfolio-card {
        width: 88vw;
        max-width: 300px;
        height: 380px;
    }
}

/* ─── TOUCH DEVICES ─────────────────────────────────────────────────────── */
@media (hover: none) {
    body {
        cursor: auto;
    }

    #cursor {
        display: none;
    }

    select.form-control {
        cursor: pointer;
    }

    .service-desc {
        max-height: 120px;
        opacity: 1;
    }

    .form-submit {
        cursor: pointer;
    }

    .btn-primary {
        cursor: pointer;
    }
}