/*=========================
    ABOUT
=========================*/

.about{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

}/*=========================
    LAYOUT
=========================*/

.about-container{

    width:100%;

    display:grid;

    grid-template-columns:520px minmax(0,720px);

    justify-content:space-between;

    align-items:start;

    gap:40px;

    padding-top:0;
    padding-bottom:0;

    position:relative;

    z-index:2;

}/*=========================
    LEFT
=========================*/

.about-content{

    max-width:720px;

}.about h2{

    margin:0 0 34px;

    font-size:clamp(32px, 3.5714vw + 4.57px, 56px);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-1px;

    color:#fff;

}.about-text{

    max-width:700px;

    margin-bottom:24px;

    font-size:19px;

    line-height:1.8;

    color:#C7D1DE;

}.about-text:last-child{

    margin-bottom:0;

}/*=========================
    RIGHT IMAGE
=========================*/

.about-image{

    position:relative;

    /* inline-flex + flex-start: the frame hugs the image exactly,
       so the nameplate and the border line up with the photo instead
       of a stretched column that leaves a gap above it. */
    display:inline-flex;

    justify-content:center;

    align-items:flex-start;

    align-self:start;

    transform:translateZ(0);

    backface-visibility:hidden;

}/* Голубое свечение */

.about-image::before{

    content:"";

    position:absolute;

    width:clamp(340px, 32.7381vw + 88.57px, 560px);

    height:clamp(340px, 32.7381vw + 88.57px, 560px);

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(22,123,255,.38) 0%,
        rgba(22,123,255,.16) 42%,
        rgba(22,123,255,0) 75%);

    filter:blur(45px);

    z-index:-2;

    animation:aboutGlow 8s ease-in-out infinite;

}/* Легкий блик */

.about-image::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    background:

        linear-gradient(
            to bottom,
            rgba(255,255,255,.06),
            transparent 22%
        ),

        linear-gradient(
            to top,
            rgba(0,0,0,.18),
            transparent 35%
        );

    pointer-events:none;

}.about-image img{

    width:clamp(340px, 26.7857vw + 134.29px, 520px);

    max-width:100%;

    aspect-ratio:520 / 640;

    height:auto;

    object-fit:cover;

    border-radius:28px;

    border:1px solid rgba(120,185,255,.25);

    background:#09131f;

    box-shadow:

        0 0 0 1px rgba(255,255,255,.04),

        0 0 30px rgba(22,123,255,.12),

        0 30px 70px rgba(0,0,0,.40),

        0 70px 120px rgba(0,0,0,.30);

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}.about-image:hover img{

    transform: none;

    border-color: rgba(120,185,255,.25);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 0 45px rgba(22,123,255,.28),
        0 30px 70px rgba(0,0,0,.40),
        0 70px 120px rgba(0,0,0,.30);

    filter: brightness(1.08);
}/*=========================
    BLUE GLOW BACKGROUND
=========================*/

.about::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-180px;

    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:#167BFF;

    filter:blur(100px);

    opacity:.08;

    pointer-events:none;

    z-index:0;

}


/*=========================
    GLOW ANIMATION
=========================*/

@keyframes aboutGlow{

    0%{

        transform:scale(1);

        opacity:.85;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.85;

    }

}


/*=========================
    ADAPTIVE
=========================*/

@media (max-width:1200px) and (hover: none) and (pointer: coarse) {

    .about-container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-image{

        justify-content:flex-start;

    }

}

@media (max-width:768px) and (hover: none) and (pointer: coarse) {

    .about h2{

        font-size:42px;

    }

    .about-text{

        font-size:17px;

    }

    .about-image img{

        width:100%;

        height:auto;

    }

}/*=========================
    ABOUT LABEL
=========================*/

.about-label{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:34px;

    color:#F4F7FB;

    font-size:15px;

    font-weight:400;

    line-height:1;

    text-transform:uppercase;

}.about-line{

    width:42px;

    height:2px;

    background:#167BFF;

    border-radius:10px;

}/* =========================================================
   ABOUT — NAMEPLATE (technical passport overlay on the photo)
========================================================= */

.about-plate{

    position:absolute;

    left:20px;
    right:20px;
    bottom:20px;

    z-index:3;

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

    gap:8px;

    padding:22px 20px;

    background:rgba(8,13,22,.82);

    border:1px solid rgba(120,185,255,.28);
    border-radius:16px;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 20px 40px rgba(0,0,0,.35);

    backdrop-filter:blur(8px);

}.about-plate-item{

    text-align:center;

    padding:0 6px;

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

}.about-plate-item:first-child{

    border-left:none;

}.about-plate-item b{

    display:block;

    font-size:28px;
    font-weight:800;

    color:#fff;

    line-height:1.1;

}.about-plate-item span{

    display:block;

    margin-top:4px;

    font-size:12px;

    color:#8D97A6;

}

@media (max-width:768px){

    .about-plate{

        left:14px;
        right:14px;
        bottom:14px;

        padding:14px 12px;

    }

    .about-plate-item b{

        font-size:20px;

    }

    .about-plate-item span{

        font-size:10.5px;

    }

}/* =========================================================
   ABOUT — capability grid (redesign)
========================================================= */

.about-cols{

    margin-top:44px;

    padding-top:36px;

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

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:34px 40px;

}.about-col h4{

    display:flex;
    align-items:baseline;
    gap:10px;

    font-size:17px;
    font-weight:700;

    color:#fff;

}.about-col h4 em{

    font-style:normal;

    font-family:inherit;

    font-size:13px;
    font-weight:400;

    letter-spacing:.7px;

    color:#168FFF;

}.about-col p{

    margin-top:10px;

    font-size:14.5px;
    line-height:1.65;

    color:#8D97A6;

}

@media (max-width:768px){

    .about-cols{

        grid-template-columns:1fr;

        gap:26px;

    }

}.about-company{

    color:#167BFF;

    font-weight:600;

}


/* =========================================================
   ABOUT — image matches the text column height
   The photo used a fixed 520:640 ratio, so its bottom edge
   stopped 50–117px above the last line of text depending on
   screen width. On desktop the image column now stretches to
   the row height and the photo covers it; the nameplate stays
   pinned to the bottom.
========================================================= */

@media (min-width: 1025px){

    body.home .about-image{
        display: block !important;
        align-self: stretch !important;
        position: relative;
        min-height: 520px;
    }

    body.home .about-image img{
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        aspect-ratio: auto !important;
        object-fit: cover;
        object-position: center;
    }

}