/* =========================
   TABLET — до 950px
========================= */
@media (max-width: 950px) {

    .nav-links { display: none; }

    .hero-grid,
    .partner-grid {
        grid-template-columns: 1fr;
    }

    .hero-grid { gap: 50px; }

    .hero-primary {
        min-height: auto;
        padding: 120px 0 70px;
    }

    .hero-primary-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .hero-primary h1 {
        font-size: clamp(48px, 10vw, 72px);
    }

    .hero-board {
        min-height: 420px;
    }

    .hero-board::before {
        width: 330px;
        height: 330px;
    }

    .hero-second { padding: 100px 0; }

    .hero-visual {
        height: 420px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 30px auto 0;
    }

    .system { transform: scale(.8); }

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

    /* APPROACH MOBILE */
    .approach {
        grid-template-columns: 1fr;
        margin-top: 60px;
        position: relative;
    }

    .approach::before {
        top: 14px;
        bottom: 14px;
        left: 13px;
        right: auto;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, rgba(59, 130, 246, .35), rgba(255, 255, 255, .08));
    }

    .approach-step {
        display: grid;
        grid-template-columns: 28px 1fr;
        column-gap: 25px;
        position: relative;
    }

    .approach-top {
        width: 28px;
        height: 100%;
        display: flex;
        align-items: flex-start;
    }

    .approach-number {
        position: relative;
        z-index: 3;
    }

    .approach-line { display: none; }

    .approach-content {
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 45px;
    }

    .approach-content h3 { margin-bottom: 8px; }

    .approach-content p { max-width: 450px; }
}

/* =========================
   MOBILE — до 600px
========================= */
@media (max-width: 600px) {

    .container,
    .nav-inner {
        width: calc(100% - 32px);
    }

    section { padding: 100px 0; }

    .hero { padding-top: 120px; }

    .hero h2 {
        font-size: clamp(42px, 5vw, 64px);
        line-height: .96;
        letter-spacing: -.06em;
        max-width: 650px;
    }

    .hero-description { font-size: 14px; }

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

    .logo-svg { width: 155px; }

    .hero-visual {
        height: 310px;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .system {
        width: 470px;
        height: 470px;
        transform: scale(.58);
        flex-shrink: 0;
    }

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

    .service { min-height: 260px; }

    .approach-number { margin-bottom: 55px; }

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