/* ==========================================================
   MEASOFT LANDING
   ========================================================== */

:root {

    --blue: #0D4FD7;
    --violet: #4B43E5;
    --green: #00B37E;

    --text: #1D2433;
    --text-light: #697488;

    --border: #E4E9F2;

    --background: #F5F8FD;
    --white: #FFFFFF;

    --gradient: linear-gradient(135deg,#0D4FD7 0%,#4B43E5 100%);
    --gradient-green: linear-gradient(135deg,#0D4FD7 0%,#00B37E 100%);

    --shadow:

        0 20px 60px rgba(16,43,93,.08);

    --radius:20px;

    --transition:.35s;

    --container:1240px;

}

/* ========================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

/* ==========================================================
   MEASOFT DIGITAL LOGISTICS BACKGROUND
   ========================================================== */

   body{

    font-family:"Inter",sans-serif;

    color:var(--text);

    line-height:1.6;

    overflow-x:hidden;

    background-color:#F5F8FD;

    background-image:

        /* вертикальная сетка */
        linear-gradient(
            90deg,
            rgba(13,79,215,.035) 1px,
            transparent 1px
        ),

        /* горизонтальная сетка */
        linear-gradient(
            rgba(13,79,215,.035) 1px,
            transparent 1px
        ),

        /* синяя зона */
        radial-gradient(
            circle at 15% 10%,
            rgba(13,79,215,.10),
            transparent 32%
        ),

        /* зеленая зона */
        radial-gradient(
            circle at 85% 75%,
            rgba(0,179,126,.08),
            transparent 35%
        ),

        /* фиолетовая зона */
        radial-gradient(
            circle at 70% 15%,
            rgba(75,67,229,.07),
            transparent 30%
        );


    background-size:

        42px 42px,
        42px 42px,
        auto,
        auto,
        auto;


    background-attachment:fixed;

}

/* ==========================================================
   GRID POINTS
   ========================================================== */

   body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;


    background-image:

        radial-gradient(
            circle,
            rgba(13,79,215,.18) 1px,
            transparent 1.5px
        );


    background-size:

        42px 42px;


    opacity:.35;

}

/* ==========================================================
   TECH COORDINATES
   ========================================================== */

   body::after{

    content:

    "N 55.7558°  E 37.6173°       ROUTE / DATA FLOW       EPД 01";

    position:fixed;

    left:40px;

    bottom:24px;


    font-family:
        "Inter",
        monospace;


    font-size:11px;

    letter-spacing:2px;

    color:

        rgba(13,79,215,.18);


    pointer-events:none;

    z-index:-1;

}

/* ========================================================== */

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font:inherit;

}

ul{

    list-style:none;

}

/* ========================================================== */

.container{

    width:min(var(--container),calc(100% - 48px));

    margin:auto;

}

section{

    padding:110px 0;

}

/* ========================================================== */

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:#EEF4FF;

    color:var(--blue);

    font-size:.9rem;

    font-weight:600;

    margin-bottom:24px;

}

.section-header h2{

    font-size:3rem;

    line-height:1.15;

    margin-bottom:22px;

}

.section-header p{

    color:var(--text-light);

    font-size:1.1rem;

}

/* ========================================================== */

/* ==========================================================
   MEASOFT DARK TECH HEADER
   ========================================================== */

  /* HEADER */
  .header{

    position:sticky;

    top:0;

    z-index:500;


    background:

        linear-gradient(
            135deg,
            #23446F 0%,
            #1D3B63 45%,
            #183454 100%
        );


    border-bottom:

        1px solid rgba(255,255,255,.14);


    box-shadow:

        0 8px 24px rgba(15,35,65,.18);

}


/* внутренняя строка */

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:88px;

}

/* ========================================================== */

.logo img{

    width:190px;

    height:auto;

}



/* ========================================================== */

.menu{

    display:flex;

    gap:42px;

    font-weight:500;

}

.menu a{

    color:rgba(255,255,255,.82);

}


.menu a:hover{

    color:#ffffff;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--blue);

    transition:.3s;

}



.menu a:hover::after{

    width:100%;

}

/* Кнопка «бургер» — скрыта на десктопе, показывается в tablet/mobile */
.menu-toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    width:44px;

    height:44px;

    padding:0;

    border:none;

    border-radius:8px;

    background:transparent;

    cursor:pointer;

    flex-shrink:0;

}

.menu-toggle__bar{

    display:block;

    width:22px;

    height:2px;

    border-radius:2px;

    background:#ffffff;

    transition:transform .3s ease, opacity .3s ease;

}

.header-cta{

    flex-shrink:0;

    white-space:nowrap;

}

.header-cta__label--short{

    display:none;

}

/* Блокировка прокрутки страницы при открытом мобильном меню */
body.menu-open{

    overflow:hidden;

}



/* ========================================================== */

.button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:17px 34px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

.header .button-primary,
.header .button-primary:visited{

    color:#ffffff !important;

    background:

        linear-gradient(
            135deg,
            #00A878,
            #00C98D
        );

}
.header .button-primary:hover{

    color:#ffffff !important;

    background:

        linear-gradient(
            135deg,
            #00B985,
            #00D99A
        );

}
.button-secondary{

    border:1px solid var(--border);

    background:#fff;

}

.button-secondary:hover{

    border-color:var(--blue);

    color:var(--blue);

}

.button-outline{

    border:1px solid rgba(255,255,255,.45);

    color:#ffffff;

    background:rgba(255,255,255,.08);

}
.button-outline:hover{

    border-color:#ffffff;

    background:rgba(255,255,255,.16);

    color:#ffffff;

}

/* ========================================================== */

.hero{

    position:relative;

    overflow:hidden;

    padding-top:90px;

    padding-bottom:120px;

}



/* ========================================================== */

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:minmax(0,1.5fr) minmax(0,.65fr);

    gap:60px;

    align-items:center;

}

.hero-content{

    min-width:0;

}

/* ========================================================== */

.hero-label{

    display:inline-block;

    padding:12px 22px;

    border-radius:999px;

    background:#EAF2FF;

    color:var(--blue);

    font-weight:600;

    margin-bottom:30px;

}

.hero h1{

    font-size:4.4rem;

    line-height:1.05;

    margin-bottom:32px;

    letter-spacing:-2px;

}

.hero-text{

    max-width:none;

    font-size:1.22rem;

    color:var(--text-light);

    margin-bottom:42px;

}

/* ========================================================== */

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:50px;

}

/* ========================================================== */

.hero-benefits{

    display:grid;

    gap:18px;

}

.benefit{

    display:flex;

    align-items:center;

    gap:16px;

}

.benefit-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--gradient-green);

    color:#fff;

    font-weight:700;

}

/* ========================================================== */

.hero-visual{

    position:relative;

    width:100%;

    max-width:320px;

    min-height:auto;

    justify-self:center;

}

.scheme{

    display:flex;

    flex-direction:column;

    align-items:stretch;

}

.scheme .node{

    padding:12px 16px;

    border-radius:14px;

    border:1px solid var(--border);

    background:#fff;

    font-size:.92rem;

    font-weight:600;

    text-align:center;

}

.scheme .line{

    width:2px;

    height:20px;

    margin:0 auto;

    background:linear-gradient(to bottom,var(--blue),var(--green));

}

.status-card{

    margin-top:24px;

    padding:22px;

    border-radius:18px;

    border:1px solid var(--border);

    background:#fff;

    box-shadow:0 12px 30px rgba(20,40,80,.06);

}

.status-title{

    font-weight:700;

    margin-bottom:14px;

}

.status-success{

    color:var(--green);

    font-size:.95rem;

    margin-bottom:8px;

}

/* ==========================================================
   CASES
   ========================================================== */

   .cases{

    position:relative;

    overflow:hidden;

}

.cases::before{

    content:"";

    position:absolute;

    right:-250px;
    top:-150px;

    width:650px;
    height:650px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(75,67,229,.08),
        transparent 72%);

}

/* ========================================================== */

.cases-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/* ========================================================== */

.case-card{

    position:relative;

    background:#fff;

    border:1px solid var(--border);

    border-radius:24px;

    padding:38px;

    transition:.35s;

    overflow:hidden;

    min-height:280px;

    box-shadow:

        0 8px 20px rgba(20,40,80,.04);

}

/* декоративная полоска */

.case-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;

    height:5px;

    background:var(--gradient);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.case-card:hover{

    transform:translateY(-10px);

    border-color:#C7D8FF;

    box-shadow:

        0 30px 60px rgba(13,79,215,.12);

}

.case-card:hover::before{

    transform:scaleX(1);

}

/* ========================================================== */

.case-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        rgba(13,79,215,.08),
        rgba(75,67,229,.12)
    );

    font-size:2rem;

    color:var(--blue);

    margin-bottom:30px;

}

.case-card h3{

    font-size:1.45rem;

    margin-bottom:18px;

    line-height:1.3;

}

.case-card p{

    color:var(--text-light);

    line-height:1.8;

}

/* ==========================================================
   WORKFLOW
   ========================================================== */

.workflow{

    padding-top:120px;

}

.workflow-box{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/* ========================================================== */

.workflow-left h2{

    font-size:3rem;

    line-height:1.15;

    margin:24px 0;

}

.workflow-left p{

    font-size:1.08rem;

    color:var(--text-light);

    margin-bottom:40px;

}

/* ========================================================== */

.workflow-list{

    display:grid;

    gap:18px;

}

.workflow-list li{

    display:flex;

    align-items:center;

    gap:14px;

    font-weight:500;

}

.workflow-list li::before{

    content:"";

    width:12px;
    height:12px;

    border-radius:50%;

    background:var(--green);

    box-shadow:

        0 0 12px rgba(0,179,126,.5);

}

/* ==========================================================
   FLOW
   ========================================================== */

.workflow-right{

    position:relative;

    padding:30px;

}

.flow-diagram{

    /* Расчётная ширина схемы с 5 узлами в ряд — порог видимости ниже */
    --flow-scheme-width:620px;

    width:100%;

    max-width:var(--flow-scheme-width);

    margin:0 auto;

    position:relative;

}

/* Если ширина страницы меньше самой схемы — не показываем (мобильные / узкое окно) */
@media (max-width:619px){

.workflow-right{

    display:none;

}

}

.flow-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:10px;

}

.flow-item{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.flow-item .flow-node{

    width:100%;

    padding:14px 8px;

    font-size:.78rem;

    line-height:1.3;

}

.flow-converge{

    position:relative;

    height:88px;

    margin:0;

    pointer-events:none;

    overflow:visible;

}

.flow-svg{

    display:block;

    width:100%;

    height:100%;

    overflow:visible;

}

.flow-path{

    fill:none;

    stroke:url(#flowGrad);

    stroke-width:2.5;

    stroke-linecap:round;

    stroke-dasharray:6 14;

    animation:flowStream 2.8s linear infinite;

}

.flow-path--center{

    animation-delay:.2s;

}

.flow-path--delay-1{

    animation-delay:.4s;

}

.flow-hub{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translate(-50%,50%);

    width:16px;

    height:16px;

    border-radius:50%;

    background:var(--green);

    border:3px solid #fff;

    box-shadow:0 0 0 4px rgba(0,179,126,.2),0 0 24px rgba(0,179,126,.55);

    animation:hubPulse 2s ease-in-out infinite;

    z-index:6;

}

.flow-wifi{

    display:flex;

    justify-content:center;

    margin:-6px auto -8px;

}

.flow-wifi-icon{

    width:36px;

    height:36px;

    display:block;

    opacity:.55;

}

.flow-wifi-dot,
.flow-wifi-arc{

    opacity:.25;

}

.flow-wifi-dot{

    animation:wifiDot 2.4s ease-in-out infinite;

}

.flow-wifi-arc--1{

    animation:wifiArc1 2.4s ease-in-out infinite;

}

.flow-wifi-arc--2{

    animation:wifiArc2 2.4s ease-in-out infinite;

}

.flow-wifi-arc--3{

    animation:wifiArc3 2.4s ease-in-out infinite;

}

@keyframes wifiDot{

    0%, 5%{ opacity:.25; }

    10%, 80%{ opacity:.95; }

    90%, 100%{ opacity:.25; }

}

@keyframes wifiArc1{

    0%, 20%{ opacity:.25; }

    25%, 80%{ opacity:.95; }

    90%, 100%{ opacity:.25; }

}

@keyframes wifiArc2{

    0%, 35%{ opacity:.25; }

    40%, 80%{ opacity:.95; }

    90%, 100%{ opacity:.25; }

}

@keyframes wifiArc3{

    0%, 50%{ opacity:.25; }

    55%, 80%{ opacity:.95; }

    90%, 100%{ opacity:.25; }

}

.flow-node--target{

    width:min(100%,300px);

    margin:20px auto 0;

    padding:20px 26px;

    font-size:1rem;

    position:relative;

}

@keyframes flowStream{

    from{ stroke-dashoffset:40; }

    to{ stroke-dashoffset:0; }

}

@keyframes hubPulse{

    0%,100%{ box-shadow:0 0 0 4px rgba(0,179,126,.2),0 0 24px rgba(0,179,126,.55); }

    50%{ box-shadow:0 0 0 8px rgba(0,179,126,.15),0 0 32px rgba(0,179,126,.7); }

}

@keyframes flowDown{

    from{ top:-10px; }

    to{ top:100%; }

}

/* ========================================================== */

.flow-node{

    position:relative;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:20px 26px;

    margin:auto;

    width:280px;

    text-align:center;

    font-weight:600;

    box-shadow:

        0 15px 35px rgba(30,60,120,.05);

    transition:.3s;

}

.flow-node:hover{

    transform:scale(1.03);

    border-color:#9EBEFF;

}

/* ========================================================== */

.flow-node.success{

    background:var(--gradient-green);

    color:#fff;

    border:none;

    font-weight:700;

}

/* ========================================================== */

.flow-line{

    width:3px;

    height:38px;

    margin:auto;

    background:

        linear-gradient(
            to bottom,
            var(--blue),
            var(--green)
        );

    position:relative;

    overflow:hidden;

}

/* движущаяся частица */

.flow-line::after{

    content:"";

    position:absolute;

    left:50%;

    width:9px;
    height:9px;

    margin-left:-4px;

    border-radius:50%;

    background:#fff;

    box-shadow:

        0 0 12px rgba(13,79,215,.8);

    animation:flow 2.5s linear infinite;

}

@keyframes flow{

    from{

        top:-10px;

    }

    to{

        top:40px;

    }

}

/* ==========================================================
   APPEAR
   ========================================================== */

.case-card,
.flow-node{

    animation:fadeUp .8s ease both;

}

.case-card:nth-child(2){

    animation-delay:.1s;

}

.case-card:nth-child(3){

    animation-delay:.2s;

}

.case-card:nth-child(4){

    animation-delay:.3s;

}

.case-card:nth-child(5){

    animation-delay:.4s;

}

.case-card:nth-child(6){

    animation-delay:.5s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   INTEGRATION
   ========================================================== */

   .integration{

    position:relative;

    background:#ffffff;

    overflow:hidden;

}

.integration::before{

    content:"";

    position:absolute;

    left:-220px;
    top:-220px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(13,79,215,.06),
        transparent 72%);

}

.integration-layout{

    position:relative;

    display:grid;

    grid-template-columns:1fr 420px 1fr;

    gap:50px;

    align-items:center;

}

/* ==========================================================
   SYSTEM CARDS
   ========================================================== */

.integration-left,
.integration-right{

    display:grid;

    gap:24px;

}

.system-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:22px 24px;

    transition:.35s;

    box-shadow:
        0 10px 28px rgba(25,45,80,.05);

}

.system-card:hover{

    transform:translateX(8px);

    border-color:#9BBEFF;

    box-shadow:
        0 20px 45px rgba(13,79,215,.10);

}

.system-icon{

    width:60px;
    height:60px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:16px;

    background:var(--gradient);

    color:#fff;

    font-size:.95rem;

    font-weight:700;

    flex-shrink:0;

}

.system-card span{

    font-size:1.05rem;

    font-weight:600;

}

/* ==========================================================
   PLATFORM
   ========================================================== */

.platform-card{

    position:relative;

    padding:48px;

    text-align:center;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
        0 35px 70px rgba(18,48,105,.10);

    border:1px solid rgba(13,79,215,.10);

}

.platform-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(13,79,215,.03),
        rgba(75,67,229,.05)
    );

}

.platform-card>*{

    position:relative;

    z-index:2;

}

.platform-logo{

    width:110px;
    height:110px;

    margin:auto auto 28px;

    border-radius:28px;

    display:flex;

    justify-content:center;
    align-items:center;

    background:var(--gradient);

    box-shadow:

        0 25px 60px rgba(13,79,215,.25);

}

.platform-logo img{

    width:72px;

    filter:brightness(0) invert(1);

}

.platform-card h3{

    font-size:2rem;

    margin-bottom:18px;

}

.platform-card p{

    color:var(--text-light);

    line-height:1.8;

}

/* ==========================================================
   CONNECTION LINES
   ========================================================== */

.integration-center{

    position:relative;

}

.integration-center::before{

    content:"";

    position:absolute;

    left:-45px;
    top:50%;

    width:45px;
    height:2px;

    background:linear-gradient(
        to right,
        var(--blue),
        transparent
    );

}

.integration-center::after{

    content:"";

    position:absolute;

    right:-45px;
    top:50%;

    width:45px;
    height:2px;

    background:linear-gradient(
        to left,
        var(--green),
        transparent
    );

}

/* ==========================================================
   ADVANTAGES
   ========================================================== */

.advantages{

    background:var(--background);

}

.advantages-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.adv-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:42px;

    border:1px solid var(--border);

    transition:.35s;

    overflow:hidden;

}

.adv-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 25px 60px rgba(15,45,95,.10);

}

.adv-card::after{

    content:"";

    position:absolute;

    right:-70px;
    bottom:-70px;

    width:170px;
    height:170px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(13,79,215,.08),
        transparent);

}

.adv-number{

    width:58px;
    height:58px;

    border-radius:16px;

    display:flex;

    justify-content:center;
    align-items:center;

    background:var(--gradient-green);

    color:#fff;

    font-weight:700;

    margin-bottom:28px;

}

.adv-card h3{

    font-size:1.5rem;

    margin-bottom:18px;

}

.adv-card p{

    color:var(--text-light);

    line-height:1.8;

}

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

.cta{

    padding:120px 0;

}

.cta-box{

    position:relative;

    overflow:hidden;

    border-radius:36px;

    padding:80px;

    color:#fff;

    text-align:center;

    background:

        linear-gradient(
            135deg,
            #0D4FD7 0%,
            #4B43E5 55%,
            #00B37E 100%
        );

}

.cta-box::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-180px;
    top:-180px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(255,255,255,.12),
        transparent 70%);

}

.cta-box>*{

    position:relative;

    z-index:2;

}

.light{

    background:rgba(255,255,255,.12);

    color:#fff;

}

.cta h2{

    font-size:3.2rem;

    margin:28px auto;

    max-width:760px;

}

.cta p{

    max-width:720px;

    margin:auto;

    opacity:.92;

    line-height:1.9;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:48px;

}

.button-light{

    background:#fff;

    color:var(--blue);

}

.button-light:hover{

    transform:translateY(-3px);

}

.button-transparent{

    border:1px solid rgba(255,255,255,.35);

    color:#fff;

}

.button-transparent:hover{

    background:rgba(255,255,255,.10);

}

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

.footer{

    padding:70px 0;

    border-top:1px solid var(--border);

    background:#fff;

}

.footer-grid{

    display:grid;

    /* Широкая колонка бренда | «Решения» | «Контакты» */
    grid-template-columns:minmax(160px,192px) minmax(300px,1.25fr) minmax(304px,1.08fr);

    gap:48px 56px;

    align-items:start;

}

.footer-title{

    font-weight:700;

    margin-bottom:18px;

}

.footer a{

    display:block;

    color:var(--text-light);

    margin-bottom:12px;

    transition:.3s;

}

.footer a:hover{

    color:var(--blue);
}

.footer-phones{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:12px;

}

.footer a.footer-phone{

    display:flex;

    flex-direction:row;

    flex-wrap:nowrap;

    align-items:center;

    gap:10px;

    width:fit-content;

    max-width:100%;

    padding:0;

    border:none;

    background:transparent;

    margin-bottom:0;

    transition:var(--transition);

}

.footer-phone__icon{

    display:flex;

    flex-shrink:0;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border-radius:50%;

    background:var(--gradient-green);

    color:#fff;

}

.footer-phone__icon svg{

    width:16px;

    height:16px;

}

.footer-phone__number{

    flex-shrink:0;

    font-weight:600;

    font-size:.95rem;

    letter-spacing:.01em;

    white-space:nowrap;

    background:var(--gradient-green);

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.footer-phone__note{

    flex-shrink:1;

    min-width:0;

    font-size:.82rem;

    font-weight:500;

    color:var(--text-light);

    white-space:nowrap;

}

.footer a.footer-phone:hover{

    color:inherit;

    border:none;

    background:transparent;

    box-shadow:none;

}

.footer a.footer-phone:hover .footer-phone__number{

    opacity:.85;

}

.footer a.footer-phone:hover .footer-phone__note{

    color:var(--blue);

}

/* Колонка бренда: резервирует место под иконку, сдвигает остальные разделы вправо */
.footer-brand{

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    min-width:160px;

    padding-right:24px;

}

/* Иконка-квадратики в футере: пропорции logo-icon (узкая/высокая) */
.footer-logo-icon{

    display:block;

    height:56px;

    width:auto;

}

.footer-brand a{

    display:block;

    margin-bottom:0;

}

/* ==========================================================
   MICRO ANIMATIONS
   ========================================================== */

   ::selection{

    background:var(--blue);
    color:#fff;

}

:focus-visible{

    outline:3px solid rgba(13,79,215,.35);
    outline-offset:3px;

}

/* плавное наведение */

.button,
.case-card,
.system-card,
.adv-card,
.flow-node{

    will-change:transform;

}

/* небольшое увеличение логотипа */

.logo{
    display:flex;

    align-items:center;

    transition:.3s;

}

.logo:hover{

    transform:scale(1.03);

}

/* ==========================================================
   SCROLL REVEAL
   ========================================================== */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}

/* ==========================================================
   CUSTOM SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-track{

    background:#EDF2FA;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        var(--blue),
        var(--green)
    );

    border-radius:999px;

}

/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (max-width:1400px){

.hero h1{

    font-size:3.9rem;

}

.section-header h2{

    font-size:2.7rem;

}

.platform-card{

    padding:40px;

}

}

/* ==========================================================
   NOTEBOOK
   ========================================================== */

@media (max-width:1200px){

.container{

    width:min(100% - 40px,1100px);

}

.hero-grid{

    gap:60px;

}

.hero h1{

    font-size:3.5rem;

}

.workflow-box{

    gap:50px;

}

.integration-layout{

    grid-template-columns:1fr;

    gap:45px;

}

.integration-left,
.integration-right{

    grid-template-columns:repeat(2,1fr);

}

.integration-center::before,
.integration-center::after{

    display:none;

}

.platform-card{

    max-width:620px;

    margin:auto;

}

}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:992px){

.header{

    position:sticky;

    overflow:visible;

}

.header .container{

    position:static;

    flex-wrap:nowrap;

    height:72px;

    padding:0;

    gap:12px;

}

.logo img{

    width:150px;

}

.menu-toggle{

    display:flex;

    flex-shrink:0;

}

.header-cta{

    margin-left:auto;

    padding:12px 18px;

    font-size:.88rem;

    position:relative;

    z-index:610;

}

.logo{

    flex-shrink:1;

    min-width:0;

}

.menu{

    position:absolute;

    top:100%;

    left:0;

    right:0;

    z-index:600;

    width:100%;

    flex-direction:column;

    align-items:stretch;

    gap:0;

    padding:0;

    max-height:0;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transition:
        max-height .35s ease,
        opacity .25s ease,
        visibility .25s ease;

    background:
        linear-gradient(
            180deg,
            #23446F 0%,
            #1D3B63 55%,
            #183454 100%
        );

    border-bottom:1px solid rgba(255,255,255,.14);

    box-shadow:0 12px 28px rgba(15,35,65,.22);

}

.menu a{

    position:relative;

    padding:14px 20px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.menu a::after{

    display:none;

}

.header.is-menu-open .menu{

    max-height:420px;

    opacity:1;

    visibility:visible;

}

.header.is-menu-open .menu-toggle__bar:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.header.is-menu-open .menu-toggle__bar:nth-child(2){

    opacity:0;

}

.header.is-menu-open .menu-toggle__bar:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}

.hero{

    padding-top:70px;

}

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-text{

    margin-left:auto;
    margin-right:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-benefits{

    max-width:500px;

    margin:auto;

}

.hero-visual{

    min-height:auto;

}

.cases-grid{

    grid-template-columns:repeat(2,1fr);

}

.workflow-box{

    grid-template-columns:1fr;

}

.workflow-left{

    text-align:center;

}

.workflow-list{

    display:inline-grid;

    text-align:left;

}

.advantages-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:minmax(128px,160px) minmax(250px,1.25fr);

    gap:32px 40px;

}

.footer-grid > div:nth-child(3){

    grid-column:1 / -1;

}

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:768px){

section{

    padding:80px 0;

}

.hero{

    padding-top:50px;

}

.hero h1{

    font-size:2.7rem;

    letter-spacing:-1px;

}

.section-header{

    margin-bottom:50px;

}

.section-header h2{

    font-size:2.2rem;

}

.hero-buttons{

    flex-direction:column;

}

.button{

    width:100%;

}

.header .button{

    width:auto;

}

.cases-grid{

    grid-template-columns:1fr;

}

.integration-left,
.integration-right{

    grid-template-columns:1fr;

}

.workflow-right{

    padding:10px;

}

/* Ниже 620px схема скрыта (@media выше); здесь только уплотнение для планшетов */
.flow-row{

    gap:8px;

}

.flow-item .flow-node{

    font-size:.72rem;

    padding:12px 6px;

}

.flow-node--target{

    width:100%;

}

.cta-box{

    padding:55px 35px;

}

.cta h2{

    font-size:2.3rem;

}

.cta-buttons{

    flex-direction:column;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-brand{

    min-width:0;

    padding-right:0;

    justify-content:center;

}

.footer-phones{

    align-items:center;

}

.footer a.footer-phone{

    justify-content:flex-start;

}

.footer img{

    margin:auto;

}

}

/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width:480px){

.container{

    width:calc(100% - 26px);

}

.logo img{

    width:120px;

}

.header .container{

    gap:8px;

}

.header-cta{

    padding:9px 12px;

    font-size:.78rem;

}

.header-cta__label--full{

    display:none;

}

.header-cta__label--short{

    display:inline;

}

.hero h1{

    font-size:2.2rem;

}

.hero-label{

    font-size:.82rem;

}

.section-header h2{

    font-size:1.9rem;

}

.case-card{

    padding:28px;

    min-height:auto;

}

.platform-card{

    padding:30px;

}

.platform-logo{

    width:90px;
    height:90px;

}

.platform-logo img{

    width:58px;

}

.adv-card{

    padding:30px;

}

.cta-box{

    border-radius:24px;

    padding:42px 22px;

}

.cta h2{

    font-size:2rem;

}

}

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

@media (prefers-reduced-motion:reduce){

*{

    animation:none!important;

    transition:none!important;

    scroll-behavior:auto!important;

}

}

/* ==========================================================
   LOGISTICS NETWORK
   ========================================================== */

   .network-background{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    overflow:hidden;

}


.network-line{

    position:absolute;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(13,79,215,.25),
            transparent
        );


    animation:

        dataFlow 8s linear infinite;

}


.line-1{

    width:420px;

    top:28%;

    left:8%;

    transform:rotate(-12deg);

}


.line-2{

    width:600px;

    top:55%;

    right:5%;

    transform:rotate(18deg);

}


.line-3{

    width:350px;

    top:72%;

    left:25%;

    transform:rotate(-25deg);

}


@keyframes dataFlow{

    0%{

        opacity:.15;

        transform:
            translateX(-30px)
            rotate(var(--angle));

    }


    50%{

        opacity:.45;

    }


    100%{

        opacity:.15;

        transform:
            translateX(30px)
            rotate(var(--angle));

    }

}

/* ==========================================================
   AI DESCRIPTION BLOCK
   ========================================================== */

   .ai-description{

    padding:90px 0;

    background:#F5F8FC;

}


.ai-content{

    max-width:950px;

    margin:0 auto;

    padding:45px 55px;


    background:#ffffff;


    border-radius:24px;


    border:1px solid rgba(30,70,120,.08);


    box-shadow:

        0 20px 50px rgba(20,50,90,.08);

}


.ms-logo{

    display:inline;

    height:1.05em;

    width:auto;

    vertical-align:-0.12em;

    margin-right:.35em;

}

.ai-content h2{

    margin:0 0 25px;


    font-size:36px;

    line-height:1.25;


    color:#17365D;

}


.ai-content p{

    margin:0 0 18px;


    font-size:18px;

    line-height:1.7;


    color:#425466;

}



.ai-content ul{

    margin:30px 0 0;

    padding:0;

    list-style:none;


    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}



.ai-content li{

    position:relative;


    padding:18px 20px 18px 45px;


    background:#F7FAFE;


    border-radius:14px;


    color:#26384D;


    font-size:16px;

    line-height:1.5;


    border:1px solid rgba(30,70,120,.06);

}



.ai-content li::before{

    content:"✓";


    position:absolute;

    left:18px;

    top:18px;


    color:#00A878;


    font-weight:700;

}



@media(max-width:768px){

    .ai-description{

        padding:60px 0;

    }


    .ai-content{

        padding:30px 25px;

    }


    .ai-content h2{

        font-size:28px;

    }


    .ai-content ul{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   LEGAL / PRIVACY PAGE
   Страница политики: тот же фон и шапка, что у лендинга;
   длинный текст — в белой карточке с читаемой типографикой.
   ========================================================== */

.legal-hero{

    padding:72px 0 40px;

}

.legal-hero .section-label{

    margin-bottom:20px;

}

.legal-hero h1{

    font-size:clamp(2rem,4vw,3.2rem);

    line-height:1.15;

    margin-bottom:18px;

    max-width:820px;

}

.legal-hero-text{

    color:var(--text-light);

    font-size:1.1rem;

    max-width:640px;

    line-height:1.7;

}

.legal-back{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-bottom:28px;

    color:var(--blue);

    font-weight:600;

    font-size:.95rem;

    transition:opacity var(--transition);

}

.legal-back:hover{

    opacity:.7;

}

.legal-content{

    padding:0 0 110px;

}

.legal-card{

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:56px 64px;

    max-width:920px;

    margin:0 auto;

}

.legal-section + .legal-section{

    margin-top:48px;

    padding-top:48px;

    border-top:1px solid var(--border);

}

.legal-section h2{

    font-size:1.45rem;

    line-height:1.35;

    margin-bottom:20px;

    color:var(--text);

}

.legal-section h3{

    font-size:1.1rem;

    font-weight:600;

    margin:28px 0 14px;

    color:var(--text);

}

.legal-section p{

    color:var(--text-light);

    font-size:1rem;

    line-height:1.75;

    margin-bottom:16px;

}

.legal-section p:last-child{

    margin-bottom:0;

}

.legal-section ul{

    list-style:none;

    margin:0 0 16px;

    padding:0;

}

.legal-section ul li{

    position:relative;

    padding-left:22px;

    margin-bottom:12px;

    color:var(--text-light);

    line-height:1.7;

}

.legal-section ul li::before{

    content:"";

    position:absolute;

    left:0;

    top:.7em;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--blue);

    opacity:.55;

}

.legal-section a{

    color:var(--blue);

    font-weight:500;

    border-bottom:1px solid rgba(13,79,215,.25);

    transition:border-color var(--transition),opacity var(--transition);

}

.legal-section a:hover{

    border-bottom-color:var(--blue);

    opacity:.85;

}

.legal-section strong{

    color:var(--text);

    font-weight:600;

}

@media (max-width:768px){

    .legal-hero{

        padding:48px 0 28px;

    }

    .legal-card{

        padding:32px 22px;

        border-radius:16px;

    }

    .legal-section + .legal-section{

        margin-top:36px;

        padding-top:36px;

    }

    .legal-section h2{

        font-size:1.25rem;

    }

}

/* ==========================================================
   PARTNER (блок Контур.Логистика — главная и /ai)
   ========================================================== */

.partner-section{
    padding:80px 0;
}

.partner-card{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:28px;
    align-items:start;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:calc(var(--radius) + 4px);
    padding:36px 32px;
    box-shadow:var(--shadow);
}

.partner-mark{
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:var(--gradient-green);
    color:#fff;
    font-size:1.8rem;
    font-weight:700;
}

.partner-content .section-label{
    margin-bottom:16px;
}

.partner-content h2{
    font-size:clamp(1.5rem, 2.5vw, 2.2rem);
    margin-bottom:16px;
    line-height:1.2;
}

.partner-content > p{
    color:var(--text-light);
    max-width:720px;
    margin-bottom:28px;
}

.partner-features{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.partner-features > div{
    background:#f5f8fd;
    border-radius:16px;
    padding:18px 16px;
}

.partner-features strong{
    display:block;
    margin-bottom:6px;
    color:var(--blue);
}

.partner-features span{
    color:var(--text-light);
    font-size:.95rem;
}

@media (max-width:1100px){

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

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

}

@media (max-width:760px){

    .partner-section{
        padding:56px 0;
    }

    .partner-card{
        padding:28px 22px;
    }

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

}