/* ==========================================================================
   1. RESET
   ========================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: #0b1329;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 100%;    
    overflow-x: hidden; 
    line-height: 1.5;
    -webkit-text-size-adjust: 100%; /* Запрещает смартфонам самовольно увеличивать шрифты */
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover; /* Защищает фото от искажения пропорций */
}

/* Глобальная защита для всех SVG-иконок на сайте */
svg {
    flex-shrink: 0; /* Строгий запрет мобильным браузерам сжимать иконки в овалы */
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}


/* ==========================================================================
   2. GLOBAL
   ========================================================================== */

.container {
    width: min(1400px, calc(100% - 80px));
    margin: 0 auto;
    box-sizing: border-box; /* Защита от вылезания внутренних отступов */
}

.section-title {
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 12px;
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #f97316;
    margin: 14px auto 0;
}

.title-dark {
    color: #0b1329;
}

/* --- Адаптивность для глобальных элементов --- */

/* 1. Планшеты и промежуточные экраны */
@media (max-width: 1024px) {
    .container {
        /* Делаем отступы чуть меньше на планшетах (по 20px с каждой стороны) */
        width: calc(100% - 40px); 
    }
    
    .section-title {
        font-size: 26px;
    }
}

/* 2. Смартфоны */
@media (max-width: 768px) {
    .container {
        /* Уменьшаем отступы на мобильных: по 15px слева и справа */
        width: calc(100% - 30px); 
    }
    
    .section-title {
        /* Заголовки секций аккуратно ложатся в 2 строки на узких экранах */
        font-size: 22px; 
        margin-bottom: 8px;
    }
    
    .section-title::after {
        margin: 10px auto 0;
        height: 3px;
    }
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 28px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s;
    box-sizing: border-box; /* Защита от деформации геометрии */
}

.btn-orange {
    background: #f97316;
    color: #fff;
    box-shadow: 0 6px 18px rgba(249,115,22,.35);
}

/* Эффект наведения только для устройств с мышкой, чтобы ховер не залипал на тач-экранах */
@media (hover: hover) {
    .btn-orange:hover {
        background: #ea580c;
    }
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

@media (hover: hover) {
    .btn-outline:hover {
        color: #f97316;
        border-color: #f97316;
    }
}

.btn-large {
    padding: 16px 36px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* --- Адаптивность для кнопок --- */

@media (max-width: 768px) {
    /* Делаем большие кнопки баннера чуть аккуратнее на смартфонах */
    .btn-large {
        padding: 14px 28px;
        font-size: 13px;
        letter-spacing: 0;
    }
}

@media (max-width: 576px) {
    /* Скрываем кнопку расчета СТРОГО внутри шапки сайта, 
       в баннерах, модалках и подвале кнопки теперь БУДУТ ВИДНЫ автоматически  */
    .main-header .btn-orange {
        display: none;
    }
}


/* ==========================================================================
   HEADER
========================================================================== */

.main-header{
    position:fixed;
    inset:0 0 auto 0;
    width:100%;
    z-index:1000;

    background:rgba(7,24,45,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

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

    box-shadow:0 8px 24px rgba(0,0,0,.18);

    transition:
        background .3s ease,
        box-shadow .3s ease,
        padding .3s ease;
}

.header-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:82px;
}

/* ==========================================================================
   LOGO
========================================================================== */

.logo-block{
    display:flex;
    align-items:center;
    text-decoration:none;
    flex-shrink:1;
    min-width:0;
}

.logo-img{
    display:block;
    width:auto;
    height:56px;
    margin-right:14px;
}

.logo-text{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.logo-title{
    font-size:30px;
    font-weight:900;
    line-height:1;
    letter-spacing:.4px;
    color:#fff;
    text-transform:uppercase;
}

.orange-text{
    color:#f97316;
}

.logo-subtitle{
    margin-top:3px;
    font-size:10px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#94a3b8;
}

/* ==========================================================================
   NAVIGATION
========================================================================== */

.nav-menu{
    display:flex;
    align-items:center;
    gap:24px;
}

.nav-menu a{
    position:relative;
    font-size:14px;
    font-weight:600;
    color:#e2e8f0;
    text-decoration:none;
    transition:color .25s ease;
}

.nav-menu a:hover{
    color:#f97316;
}

.nav-menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:2px;
    background:#f97316;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
}

.nav-menu a:hover::after{
    transform:scaleX(1);
}

/* ==========================================================================
   CONTACTS
========================================================================== */

.header-contacts{
    display:flex;
    align-items:center;
    gap:24px;
    flex-shrink:0;
}

.phone-block{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.phone-link{
    display:flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    color:#fff;
    font-variant-numeric:tabular-nums;
    transition:color .25s ease;
}

.phone-link:hover{
    color:#f97316;
}

.phone-link svg{
    color:#f97316;
}

.work-hours{
    margin-top:4px;
    font-size:11px;
    color:#94a3b8;
}

.burger-menu{
    display:none;
    border:0;
    background:none;
    color:#fff;
    cursor:pointer;
    flex-shrink:0;
}

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

@media (max-width:992px){

    .burger-menu{
        display:block;
    }

    .nav-menu{
        display:none;
    }

    .header-contacts{
        gap:16px;
    }

}

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

@media (max-width:576px){

    .header-container{
        min-height:72px;
    }

    .logo-block{
        flex:1;
        min-width:0;
    }

    .logo-img{
        height:40px;
        margin-right:8px;
    }

    .logo-title{
        font-size:20px;
    }

    .logo-subtitle{
        font-size:7px;
        letter-spacing:0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .phone-link{
        font-size:11px;
    }

    .phone-link svg{
        width:12px;
        height:12px;
    }

    .work-hours{
        display:none;
    }

    .header-contacts{
        gap:8px;
    }

}

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

@media (max-width:480px){

    .logo-subtitle{
        display:none;
    }

}


/* ==========================================================================
   ГЛАВНЫЙ БАННЕР
========================================================================== */

.hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 75vh;
    padding-top: 155px;
    overflow: hidden;
    box-sizing: border-box;

    background:
        linear-gradient(
            90deg,
            rgba(11,19,41,.95) 30%,
            rgba(11,19,41,.45) 65%,
            rgba(11,19,41,.75) 100%
        ),
        url("../img/hero.webp") center right / cover no-repeat;
}

.hero-container {
    width: 100%;
    padding-left: 40px;
}

.hero-content {
    max-width: 680px;
    transform: translateY(-60px);
}

.hero-title {
    margin: 0 0 24px;
    color: #ffffff;

    font-size: clamp(34px,4vw,46px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.5px;
    text-transform: uppercase;

    text-wrap: balance;
}

.hero-geo {
    margin-bottom: 24px;

    color: #e2e8f0;

    font-size: 14px;
    font-weight: 600;
}

.hero-features {
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
}

.hero-features li {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 12px;

    color: #f1f5f9;

    font-size: 15px;
    line-height: 1.45;
}

.hero-features li:last-child {
    margin-bottom: 0;
}

.hero-features svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    stroke: #f97316;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.hero-actions .btn {
    min-width: 220px;
    justify-content: center;
}

.hero-actions svg {
    margin-right: 6px;
}
/* ==========================================================================
   НИЖНЯЯ ПЛАШКА ПРЕИМУЩЕСТВ
========================================================================== */

.hero-benefits-bar {
    width: min(1360px, calc(100% - 20px));
    margin: -45px auto 24px;
    padding: 10px 0;

    background: rgba(11, 19, 41, 0.38);
    backdrop-filter: blur(14px);

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

    box-sizing: border-box;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    align-items: stretch;
}

.benefit-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;

    padding: 0 8px;

    min-height: 64px;

    box-sizing: border-box;

    transition:
        transform .25s ease,
        background-color .25s ease;
}

.benefit-item:hover {
    transform: translateY(-2px);
}

.benefit-item:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.10);
}

.benefit-item svg {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    stroke: #f97316;
}

.benefit-item h3,
.benefit-title {
    margin: 0 0 3px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.benefit-item p {
    margin: 0;

    color: #94a3b8;

    font-size: 11px;
    line-height: 1.3;
}
/* ==========================================================================
   АДАПТИВНОСТЬ HERO
========================================================================== */

@media (max-width: 1200px) {

    .hero-section {
        padding-top: 145px;
    }

    .hero-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .hero-benefits-bar {
        width: calc(100% - 24px);
    }

}

@media (max-width: 1100px) {

    .hero-section {
        min-height: auto;
        padding-bottom: 30px;
    }

    .hero-content {
        max-width: 100%;
        transform: none;
    }

    .hero-title {
        font-size: 38px;
    }

    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px 20px;
    }

    .benefit-item {
        padding: 0;
        min-height: auto;
        border-right: none !important;
    }

}

@media (max-width: 768px) {

    .hero-section {
        padding-top: 120px;
    }

    .hero-title {
        font-size: 32px;
        line-height: 1.18;
    }

    .hero-geo {
        font-size: 13px;
    }

    .hero-features li {
        font-size: 14px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .hero-actions .btn {
        width: 100%;
        min-width: auto;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

}

@media (max-width: 480px) {

    .hero-section {
        padding-top: 105px;
    }

    .hero-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .hero-title {
        font-size: 26px;
    }

    .hero-geo {
        margin-bottom: 18px;
    }

    .hero-features {
        margin-bottom: 24px;
    }

    .hero-features li {
        font-size: 13px;
        gap: 8px;
    }

    .hero-features svg {
        width: 17px;
        height: 17px;
    }

    .hero-benefits-bar {
        width: calc(100% - 16px);
        margin: 25px auto 20px;
        padding: 18px;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .benefit-item {
        align-items: center;
    }

    .benefit-item h3,
    .benefit-title {
        font-size: 15px;
    }

    .benefit-item p {
        font-size: 13px;
    }

}
/* ==========================================================================
   СТАТИСТИКА
   ========================================================================== */

.stats-bar {
    width: 100%;
    background: #ffffff;
    padding: 26px 0;
    border-bottom: 1px solid #e5e7eb;
}

.stats-grid {

    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    margin: 0;
    padding: 0;

}

.stats-item {

    position: relative;

    display: flex;
    flex-direction: column;

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

    text-align: center;

}


.stats-item:not(:last-child)::after {

    content:"";

    position:absolute;

    right:0;
    top:15%;

    width:1px;
    height:70%;

    background:#e5e7eb;

}


.stats-number {

    display:block;

    font-size:34px;

    line-height:1;

    font-weight:800;

    color:#f97316;

    letter-spacing:-1px;

    margin-bottom:8px;

}


.stats-text {

    max-width:150px;

    font-size:13px;

    line-height:1.4;

    font-weight:600;

    color:#475569;

}


/* ================================
   Планшеты
================================ */

@media(max-width:1200px){

    .stats-grid{

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

        gap:30px 20px;

    }


    .stats-item:nth-child(3)::after{

        display:none;

    }

}



/* ================================
   Телефон
================================ */

@media(max-width:768px){

    .stats-bar{

        padding:22px 0;

    }


    .stats-grid{

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

        gap:25px 15px;

    }


    .stats-item::after{

        display:none;

    }


    .stats-number{

        font-size:28px;

    }

}



@media(max-width:480px){

    .stats-grid{

        grid-template-columns:1fr;

    }


    .stats-number{

        font-size:26px;

    }

}


/* ==========================================================================
   НАШИ УСЛУГИ
   ========================================================================== */

.services-section {

    position: relative;

    width: 100%;

    padding: 80px 0;

    background: #07182d;

    overflow: hidden;

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

}


/* --------------------------------------------------------------------------
   Заголовок
-------------------------------------------------------------------------- */

.section-header{

    max-width:900px;

    margin:0 auto 50px;

    text-align:center;

}

.section-title{

    margin-bottom:18px;

}

.section-subtitle{

    max-width:760px;

    margin:0 auto;

    font-size:18px;

    line-height:1.7;

    color:#b8c5d6;

}


/* --------------------------------------------------------------------------
   Сетка
-------------------------------------------------------------------------- */

.services-grid{

    display:grid;

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

    gap:28px;

}


/* --------------------------------------------------------------------------
   Карточка
-------------------------------------------------------------------------- */

.service-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:14px;

    background:#102241;

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

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


/* вся карточка ссылка */

.service-link{

    display:flex;

    flex-direction:column;

    height:100%;

    color:inherit;

    text-decoration:none;

}


/* эффект */

@media (hover:hover){

.service-card:hover{

    transform:translateY(-8px);

    border-color:rgba(249,115,22,.55);

    box-shadow:
    0 15px 40px rgba(0,0,0,.35);

}

}
/* --------------------------------------------------------------------------
   Изображение
-------------------------------------------------------------------------- */

.card-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:4 / 3;

    background:#0b1329;

}

.card-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .45s ease,
        filter .35s ease;

}

@media (hover:hover){

.service-card:hover .card-image img{

    transform:scale(1.06);

    filter:brightness(.92);

}

}


/* --------------------------------------------------------------------------
   Контент
-------------------------------------------------------------------------- */

.card-content{

    display:flex;

    flex-direction:column;

    flex-grow:1;

    padding:22px;

}

.card-content h3{

    margin:0 0 12px;

    font-size:20px;

    line-height:1.35;

    font-weight:700;

    color:#ffffff;

}

.card-content p{

    margin:0;

    font-size:15px;

    line-height:1.7;

    color:#c7d3e3;

}


/* --------------------------------------------------------------------------
   Клавиатурная навигация
-------------------------------------------------------------------------- */

.service-link:focus-visible{

    outline:3px solid #f97316;

    outline-offset:-3px;

}


/* --------------------------------------------------------------------------
   Анимация появления
-------------------------------------------------------------------------- */

.service-card{

    animation:serviceFade .45s ease both;

}

@keyframes serviceFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==========================================================================
   АДАПТИВНОСТЬ
   ========================================================================== */

@media (max-width:1200px){

    .services-grid{

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

        gap:24px;

    }

}


@media (max-width:992px){

    .services-grid{

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

        gap:22px;

    }

}


@media (max-width:768px){

    .services-section{

        padding:60px 0;

    }

    .section-subtitle{

        font-size:16px;

        line-height:1.6;

    }

    .card-content{

        padding:18px;

    }

    .card-content h3{

        font-size:18px;

    }

    .card-content p{

        font-size:14px;

    }

}


@media (max-width:576px){

    .services-grid{

        grid-template-columns:1fr;

    }

    .section-title{

        font-size:32px;

    }

    .section-subtitle{

        font-size:15px;

    }

}


@media (max-width:400px){

    .card-content{

        padding:16px;

    }

    .card-content h3{

        font-size:17px;

    }

    .card-content p{

        font-size:13px;

    }

}
/* ==========================================================================
   ПОЧЕМУ ВЫБИРАЮТ НАС
   ========================================================================== */

.features-section{

    width:100%;

    padding:35px 0 45px;

    background:#0b1329;

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

}

.features-section .section-title{

    color:#ffffff;

    margin-bottom:35px;

}

/* ==========================================================================
   СЕТКА
   ========================================================================== */

.features-grid{

    display:grid;

    grid-template-columns:repeat(6,minmax(0,1fr));

    gap:15px;

    width:100%;

}

/* ==========================================================================
   КАРТОЧКА
   ========================================================================== */

.feature-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:0 6px;

}

.feature-card h3{

    margin:0 0 8px;

    font-size:12px;

    font-weight:700;

    line-height:1.35;

    color:#ffffff;

}

.feature-card p{

    margin:0;

    font-size:10px;

    line-height:1.45;

    color:#94a3b8;

}
/* ==========================================================================
   ИКОНКИ
   ========================================================================== */

.feature-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:58px;

    height:58px;

    margin:0 auto 18px;

    border:2px solid #f97316;

    border-radius:50%;

    background:transparent;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease;

}

.feature-icon svg{

    width:28px;

    height:28px;

    stroke:#ffffff;

    stroke-width:1.6;

    fill:none;

    transition:stroke .25s ease;

}

/* ==========================================================================
   ЭФФЕКТЫ
   ========================================================================== */

@media (hover:hover){

.feature-card:hover .feature-icon{

    transform:translateY(-4px);

    border-color:#ffffff;

    background:rgba(249,115,22,.10);

}

.feature-card:hover h3{

    color:#f97316;

}

.feature-card:hover p{

    color:#cbd5e1;

}

}
/* ==========================================================================
   АДАПТИВНОСТЬ
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ноутбуки
-------------------------------------------------------------------------- */

@media (max-width:1200px){

    .features-grid{

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

        gap:24px 16px;

    }

}

/* --------------------------------------------------------------------------
   Планшеты
-------------------------------------------------------------------------- */

@media (max-width:768px){

    .features-section{

        padding:32px 0 38px;

    }

    .features-grid{

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

        gap:22px 16px;

    }

    .feature-card{

        padding:0 8px;

    }

    .feature-icon{

        width:54px;

        height:54px;

        margin-bottom:16px;

    }

    .feature-icon svg{

        width:26px;

        height:26px;

    }

    .feature-card h3{

        font-size:12px;

    }

    .feature-card p{

        font-size:10px;

    }

}

/* --------------------------------------------------------------------------
   Смартфоны
-------------------------------------------------------------------------- */

@media (max-width:480px){

    .features-section{

        padding:28px 0 34px;

    }

    .features-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .feature-card{

        max-width:320px;

        margin:0 auto;

    }

    .feature-icon{

        width:52px;

        height:52px;

        margin-bottom:14px;

    }

    .feature-icon svg{

        width:24px;

        height:24px;

    }

    .feature-card h3{

        font-size:12px;

    }

    .feature-card p{

        font-size:10px;

        line-height:1.5;

    }

}

/* ==========================================================================
   НАШ ТРАНСПОРТ
   ========================================================================== */

.autopark-section{

    width:100%;

    padding:30px 0;

    background:#ffffff;

    box-sizing:border-box;

}

.autopark-grid{

    display:grid;

    grid-template-columns:1.4fr 1fr .65fr;

    gap:30px;

    align-items:start;

    width:100%;

}

/* ==========================================================================
   ЛЕВАЯ КОЛОНКА
   ========================================================================== */

.autopark-col{

    width:100%;

    margin:0;

}

.img-wrapper{

    position:relative;

    width:100%;

    height:325px;

    overflow:hidden;

    border-radius:6px;

    background:#f8fafc;

    box-shadow:0 4px 15px rgba(0,0,0,.05);

}

.autopark-img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .4s ease;

}

@media (hover:hover){

.img-wrapper:hover .autopark-img{

    transform:scale(1.05);

}

}

/* ==========================================================================
   ЦЕНТРАЛЬНАЯ КОЛОНКА
   ========================================================================== */

.autopark-info{

    padding:0 10px;

}

.autopark-title{

    margin:0 0 2px;

    font-size:32px;

    font-weight:800;

    line-height:1.2;

    color:#0b1329;

}

.autopark-subtitle{

    margin:0 0 14px;

    font-size:12px;

    font-weight:700;

    color:#f97316;

    text-transform:uppercase;

    letter-spacing:.5px;

}
/* ==========================================================================
   ТАБЛИЦА ХАРАКТЕРИСТИК
   ========================================================================== */

.autopark-table{

    width:100%;

    border-collapse:collapse;

    font-size:11.5px;

    font-family:Arial,Helvetica,sans-serif;

}

.table-row{

    border-bottom:1px solid #edf2f7;

    transition:
        background-color .25s ease,
        transform .2s ease;

}

@media (hover:hover){

.table-row:hover{

    background:#f8fafc;

}

.table-row:hover .orange-icon{

    transform:scale(1.15);

}

.table-row:hover .cell-value{

    color:#f97316;

}

}

.cell-icon{

    width:24px;

    padding:6px 0;

    vertical-align:middle;

}

.orange-icon{

    width:15px;

    height:15px;

    color:#f97316;

    transition:transform .25s ease;

    flex-shrink:0;

}

.cell-label{

    padding:6px 0;

    font-size:11.5px;

    font-weight:500;

    color:#475569;

    white-space:nowrap;

}

.cell-value{

    padding:6px 0;

    text-align:right;

    font-size:11.5px;

    font-weight:700;

    color:#0f172a;

    transition:color .25s ease;

}

/* немного увеличиваем расстояние между столбцами */

.cell-label{

    padding-left:8px;

}

.cell-value{

    padding-left:12px;

}
/* ==========================================================================
   ПРАВАЯ КАРТОЧКА
   ========================================================================== */

.banner-box{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    width:100%;

    height:325px;

    padding:20px;

    background:#0b1329;

    border-radius:8px;

    color:#ffffff;

    box-shadow:0 4px 15px rgba(0,0,0,.15);

    box-sizing:border-box;

}

.banner-title{

    margin:0 0 10px;

    font-size:15px;

    font-weight:800;

    line-height:1.3;

    color:#ffffff;

}

.banner-text{

    margin:0 0 18px;

    max-width:185px;

    font-size:11px;

    line-height:1.45;

    color:#94a3b8;

}

.banner-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:170px;

    padding:10px 18px;

    font-size:12px;

    font-weight:700;

}

.banner-note{

    margin-top:10px;

    font-size:10px;

    line-height:1.4;

    color:#94a3b8;

}

@media (hover:hover){

.banner-box:hover{

    box-shadow:0 8px 25px rgba(0,0,0,.22);

}

}
/* ==========================================================================
   АДАПТИВНОСТЬ
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ноутбуки
-------------------------------------------------------------------------- */

@media (max-width:1200px){

    .autopark-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .autopark-info{

        padding:0;

    }

    .autopark-title{

        text-align:center;

    }

    .autopark-subtitle{

        text-align:center;

        margin-bottom:20px;

    }

    .banner-box{

        height:auto;

        min-height:220px;

        padding:30px 20px;

    }

    .banner-text{

        max-width:420px;

    }

}

/* --------------------------------------------------------------------------
   Планшеты
-------------------------------------------------------------------------- */

@media (max-width:768px){

    .autopark-section{

        padding:30px 0;

    }

    .autopark-grid{

        gap:24px;

    }

    .img-wrapper{

        height:260px;

    }

    .autopark-title{

        font-size:28px;

    }

    .autopark-subtitle{

        font-size:12px;

    }

    .cell-label{

        font-size:11px;

    }

    .cell-value{

        font-size:11px;

    }

    .banner-title{

        font-size:16px;

    }

    .banner-text{

        font-size:11px;

    }

}

/* --------------------------------------------------------------------------
   Телефоны
-------------------------------------------------------------------------- */

@media (max-width:480px){

    .autopark-section{

        padding:25px 0;

    }

    .img-wrapper{

        height:220px;

    }

    .autopark-title{

        font-size:24px;

    }

    .autopark-subtitle{

        font-size:11px;

    }

    .autopark-table{

        font-size:10.5px;

    }

    .cell-icon{

        width:22px;

    }

    .orange-icon{

        width:14px;

        height:14px;

    }

    .cell-label{

        font-size:10.5px;

        padding:5px 0 5px 6px;

    }

    .cell-value{

        font-size:10.5px;

        padding:5px 0;

    }

    .banner-box{

        padding:24px 18px;

        min-height:200px;

    }

    .banner-btn{

        width:100%;

        max-width:220px;

    }

}

/* ==========================================================================
   НАШИ ПЕРЕВОЗКИ
========================================================================== */


.cases-section {

    padding:45px 0;

    background:#0b1329;

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

}



/* Заголовок */

.cases-header {

    text-align:center;

    margin-bottom:30px;

}



.cases-title {

    display:inline-block;

    color:#ffffff;

    font-size:28px;

    font-weight:800;

    margin:0;

}



.cases-title::after {

    content:"";

    display:block;

    width:45px;

    height:3px;

    background:#f97316;

    margin:10px auto 0;

}



.cases-subtitle {

    max-width:750px;

    margin:15px auto 0;

    color:#cbd5e1;

    font-size:15px;

    line-height:1.6;

}



/* ==========================================================================
   ЛЕНТА ФОТОГРАФИЙ
========================================================================== */


.cases-slider {

    display:flex;

    gap:15px;

    overflow-x:auto;

    padding:5px 0 15px;

    scrollbar-width:none;

}



.cases-slider::-webkit-scrollbar {

    display:none;

}



/* Карточки */

.cases-card {

    flex:0 0 220px;

    height:130px;

    display:block;

    overflow:hidden;

    border-radius:8px;

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

    background:#111827;

    box-shadow:0 5px 15px rgba(0,0,0,.25);

}



/* Изображения */

.cases-card img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .35s ease;

}



.cases-card:hover img {

    transform:scale(1.08);

}



/* ==========================================================================
   КНОПКА
========================================================================== */


.cases-button {

    text-align:center;

    margin-top:25px;

}



.cases-button .btn {

    display:inline-block;

    padding:10px 28px;

    font-size:13px;

    color:#cbd5e1;

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

    border-radius:5px;

    text-decoration:none;

    transition:.25s;

}



.cases-button .btn:hover {

    color:#fff;

    border-color:#fff;

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

}



/* ==========================================================================
   SEO-ТЕКСТ
========================================================================== */


.cases-seo-text {

    max-width:900px;

    margin:25px auto 0;

    color:#94a3b8;

    font-size:14px;

    line-height:1.6;

    text-align:center;

}



/* ==========================================================================
   АДАПТИВ
========================================================================== */


@media(max-width:768px){


    .cases-section {

        padding:35px 0;

    }



    .cases-title {

        font-size:24px;

    }



    .cases-subtitle {

        font-size:14px;

        padding:0 10px;

    }



    .cases-card {

        flex-basis:190px;

        height:120px;

    }



}
/* Оптимизация изображений */

img {

    max-width:100%;

    height:auto;

}


/* ==========================================================================
   КАК МЫ РАБОТАЕМ
========================================================================== */


.how-we-work {

    padding:60px 0;

    background:#ffffff;

    width:100%;

}



/* Заголовок */

.how-we-work .section-title {

    text-align:center;

    font-size:32px;

    font-weight:800;

    color:#0b1329;

    margin:0 0 10px;

    text-transform:uppercase;

}



/* Описание под заголовком */

.section-description {

    max-width:750px;

    margin:0 auto 40px;

    text-align:center;

    color:#64748b;

    font-size:15px;

    line-height:1.6;

}



/* Контейнер шагов */

.steps-container {

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    gap:10px;

}



/* Отдельный шаг */

.step-item {

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    flex:1;

    transition:transform .3s ease;

}



.step-item:hover {

    transform:translateY(-5px);

}



/* Иконка */

.step-icon {

    width:50px;

    height:50px;

    background:#0b1329;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:15px;

    box-shadow:
    0 4px 10px rgba(11,19,41,.2);

    transition:
    background-color .3s ease;

}



.step-item:hover .step-icon {

    background:#f97316;

}



.step-icon svg {

    width:20px;

    height:20px;

    color:#ffffff;

}



/* Текст */

.step-content h3 {

    font-size:13px;

    font-weight:700;

    color:#0b1329;

    margin:0 0 6px;

    line-height:1.3;

}



.step-content p {

    font-size:11px;

    color:#64748b;

    margin:0;

    line-height:1.5;

    max-width:170px;

}



/* Стрелки */

.steps-arrow {

    font-size:20px;

    color:#f97316;

    font-weight:bold;

    user-select:none;

    margin-bottom:60px;

}



/* ==========================================================================
   АДАПТИВ
========================================================================== */


@media(max-width:1024px){


    .step-content h3 {

        font-size:12px;

    }


    .step-content p {

        font-size:10.5px;

    }


    .steps-arrow {

        font-size:16px;

    }

}



@media(max-width:768px){


    .how-we-work {

        padding:45px 0;

    }


    .how-we-work .section-title {

        font-size:26px;

    }


    .section-description {

        font-size:14px;

        padding:0 10px;

    }



    .steps-container {

        flex-direction:column;

        gap:20px;

    }



    .step-item {

        flex-direction:row;

        text-align:left;

        align-items:center;

        width:100%;

        max-width:400px;

        background:#f8fafc;

        padding:15px;

        border-radius:8px;

    }



    .step-icon {

        margin:0 15px 0 0;

        flex-shrink:0;

    }



    .step-content p {

        max-width:100%;

    }



    .steps-arrow {

        transform:rotate(90deg);

        margin:0;

        padding:5px 0;

    }


}

/* ==========================================================================
   НАДЕЖНОСТЬ И РЕЙТИНГ ATI.SU
========================================================================== */


.ati-rating-section {

    padding:70px 0 80px;

    background:#0b1329;

    color:#fff;

    text-align:center;

    width:100%;

    box-sizing:border-box;

}



.ati-header h2 {

    font-size:30px;

    font-weight:800;

    text-transform:uppercase;

    line-height:1.15;

    letter-spacing:.5px;

    margin:0 0 10px;

}



.ati-header .ati-sub {

    font-size:15px;

    font-weight:600;

    color:#f97316;

    letter-spacing:.3px;

    margin-bottom:45px;

}



/* ==========================================================================
   ГАЛЕРЕЯ ДОКУМЕНТОВ
========================================================================== */


.ati-gallery-center {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    max-width:1000px;

    margin:0 auto 35px;

}



/* Карточки */

.ati-zoom-box {

    position:relative;

    margin:0;

    background:#fff;

    border-radius:10px;

    overflow:visible;

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

    box-shadow:
    0 18px 40px rgba(0,0,0,.45);

    transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

    cursor:zoom-in;

    z-index:1;

}



.ati-zoom-box img {

    width:100%;

    height:auto;

    display:block;

    border-radius:10px 10px 0 0;

}



/* Боковые сертификаты */

.ati-zoom-box.side-cert {

    flex:1;

    max-width:275px;

}



/* Центральный профиль */

.ati-zoom-box.center-profile {

    flex:1.4;

    max-width:420px;

}



/* Подпись */

.zoom-label {

    background:#162344;

    color:#b7c3d7;

    font-size:13px;

    font-weight:600;

    padding:10px;

    border-radius:0 0 10px 10px;

}



/* Наведение только ПК */

@media (hover:hover){


    .ati-zoom-box:hover {

        z-index:10;

        border-color:#f97316;

        box-shadow:
        0 30px 60px rgba(0,0,0,.6);

    }



    .ati-zoom-box.side-cert:hover {

        transform:scale(1.9);

    }



    .ati-zoom-box.center-profile:hover {

        transform:scale(1.35);

    }



    .ati-zoom-box:hover .zoom-label {

        color:#f97316;

    }


}



/* ==========================================================================
   КНОПКА ATI
========================================================================== */


.ati-orange-btn {

    display:inline-block;

    padding:16px 40px;

    background:#f97316;

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    border-radius:7px;

    box-shadow:
    0 8px 25px rgba(249,115,22,.35);

    transition:
    background-color .25s ease,
    transform .25s ease;

}



@media (hover:hover){


    .ati-orange-btn:hover {

        background:#ea580c;

        transform:translateY(-2px);

    }


}



/* ==========================================================================
   SEO-ТЕКСТ
========================================================================== */


.ati-seo-text {

    max-width:850px;

    margin:30px auto 0;

    color:#94a3b8;

    font-size:14px;

    line-height:1.6;

}



/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ
========================================================================== */


@media(max-width:768px){


    .ati-rating-section {

        padding:50px 0;

    }



    .ati-header h2 {

        font-size:22px;

    }



    .ati-header .ati-sub {

        font-size:13px;

        margin-bottom:30px;

    }



    .ati-gallery-center {

        flex-direction:column;

        gap:20px;

    }



    .ati-zoom-box.side-cert,
    .ati-zoom-box.center-profile {

        max-width:100%;

        width:100%;

    }



    .ati-orange-btn {

        padding:14px 28px;

        font-size:13px;

        width:100%;

        max-width:290px;

    }



    .ati-seo-text {

        font-size:13px;

        padding:0 10px;

    }


}

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


.main-footer {

    background:#060d1f;

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

    padding:50px 0 30px;

    color:#fff;

    width:100%;

    font-family:'Montserrat',sans-serif;

}



.footer-container {

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

    box-sizing:border-box;

}



.footer-grid {

    display:grid;

    grid-template-columns:
    1fr 1fr 1.4fr 1.2fr;

    gap:30px;

    align-items:start;

}



/* Заголовки */


.footer-title {

    font-size:13px;

    font-weight:800;

    text-transform:uppercase;

    margin:0 0 15px;

    letter-spacing:.5px;

}



/* Информация */


.footer-company {

    font-size:11px;

    color:#cbd5e1;

    line-height:1.7;

    margin-bottom:20px;

}



.footer-info {

    font-size:10.5px;

    color:#94a3b8;

    line-height:1.7;

    margin-bottom:20px;

}



.footer-info a {

    color:#94a3b8;

    text-decoration:none;

}



.footer-copy {

    font-size:10px;

    color:#475569;

}



/* Контакты */


.footer-contacts-list {

    display:flex;

    flex-direction:column;

    gap:10px;

    font-size:11.5px;

    color:#cbd5e1;

    margin-bottom:20px;

}

.contact-icon {
    width: 14px;
    height: 14px;
    color: #f97316;
    fill: none;
    stroke: currentColor;
    flex-shrink: 0;
}



.footer-phone {

    display:block;

    color:#fff;

    text-decoration:none;

    font-weight:700;

}



.footer-phone.phone-mt {

    margin-top:2px;

}



.footer-mail {

    color:#cbd5e1;

    text-decoration:none;

}



/* Социальные кнопки */


.footer-socials {

    display:flex;

    gap:10px;

}



.social-btn {

    width:26px;

    height:26px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

    font-size:11px;

    font-weight:800;

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

}



.social-btn:hover {

    transform:scale(1.1);

    opacity:.9;

}



.wa-btn {

    background:#25D366;

}



.tg-btn {

    background:#0088cc;

}



.vk-btn {

    background:#4c75a3;

}



.mail-btn {

    background:#718096;

}



/* Форма */


.footer-form {

    display:flex;

    flex-direction:column;

    gap:8px;

}



.form-row {

    display:flex;

    gap:8px;

}



.footer-input,
.footer-textarea {

    flex:1;

    padding:10px;

    font-size:11.5px;

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

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

    border-radius:4px;

    color:#fff;

    font-family:'Montserrat',sans-serif;

}



.footer-input.full-width {

    width:100%;

    box-sizing:border-box;

}



.footer-textarea {

    width:100%;

    height:50px;

    resize:none;

}



.footer-input:focus,
.footer-textarea:focus {

    border-color:#f97316;

    outline:none;

}



/* Кнопка */


.footer-submit-btn {

    width:100%;

    padding:12px;

    font-size:13px;

    border-radius:4px;

    font-weight:700;

    cursor:pointer;

}



/* Карта */


.footer-map-wrapper {

    width:100%;

    height:165px;

    border-radius:6px;

    overflow:hidden;

    box-shadow:
    0 4px 15px rgba(0,0,0,.2);

}



.footer-iframe {

    width:100%;

    height:100%;

    border:0;

}



/* ==========================================================================
   АДАПТИВ
========================================================================== */


@media(max-width:992px){


    .footer-grid {

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

        gap:40px 30px;

    }


}



@media(max-width:768px){


    .footer-grid {

        grid-template-columns:1fr;

        gap:35px;

    }


    .footer-container {

        padding:0 15px;

    }


    .footer-copy {

        display:block;

        text-align:center;

        margin-top:10px;

    }


}



@media(max-width:480px){


    .form-row {

        flex-direction:column;

    }


    .footer-map-wrapper {

        height:150px;

    }


}




/* ==========================================================================
  МОДАЛЬНОЕ ОКНО И АДАПТИВНОСТЬ - Этот код отвечает за всплывающее (модальное) 
  окно на вашем сайте.Такие окна обычно используются для форм обратной связи, 
  заказа звонка, отправки заявки или подтверждения действий.
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-window {
  background: white;
  padding: 40px;
  border-radius: 8px;
  max-width: 450px;
  width: 100%;
  position: relative;
  color: #333;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
}

.modal-window h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
}

.modal-window p {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 20px;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-form input, .modal-form textarea {
  font-family: 'Montserrat', sans-serif;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 14px;
}

.modal-form textarea {
  height: 80px;
  resize: none;
}
/* Заголовок модального окна */
.modal-title {
    color: #0b1329;
}

/* Общие стили для полей ввода в модалке */
.modal-input,
.modal-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

.modal-textarea {
    height: 80px;
    resize: none;
}

/* Эффект фокуса на полях */
.modal-input:focus,
.modal-textarea:focus {
    border-color: #f97316;
}

/* Вспомогательный класс для верхнего отступа */
.mt-10 {
    margin-top: 10px;
}

/* Кнопка отправки в модальном окне */
.modal-submit-btn {
    width: 100%;
    padding: 12px;
    margin-top: 12px;
    cursor: pointer;
}
/* ==========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ САЙТА
========================================================================== */

.inner-page {
    padding: 150px 0 80px;
    background: #07182d;
    min-height: 100vh;
}

.breadcrumbs {
    margin-bottom: 25px;
    font-size: 14px;
    color: rgba(255,255,255,.65);
}

.breadcrumbs a {
    color: #f97316;
    text-decoration: none;
    transition: .3s;
}

.breadcrumbs a:hover {
    color: #ffb26b;
}

.breadcrumbs span {
    margin: 0 6px;
}

.inner-header {
    margin-bottom: 50px;
}

.inner-header h1 {
    font-size: clamp(34px,5vw,52px);
    line-height: 1.15;
    color: #fff;
    margin-bottom: 18px;
    font-weight: 800;
}

.inner-header p {
    max-width: 850px;
    color: rgba(255,255,255,.82);
    font-size: 19px;
    line-height: 1.7;
}

.inner-content {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 45px;
    backdrop-filter: blur(12px);
}

.inner-content h2 {
    color: #ffffff;
    margin: 40px 0 18px;
    font-size: 28px;
}

.inner-content h2:first-child {
    margin-top: 0;
}

.inner-content p,
.inner-content li {
    color: rgba(255,255,255,.82);
    font-size: 17px;
    line-height: 1.9;
}

.inner-content ul {
    margin: 15px 0 30px 25px;
}

.inner-content li {
    margin-bottom: 10px;
}

.inner-content a {
    color: #f97316;
    text-decoration: none;
}

.inner-content a:hover {
    color: #ffb26b;
}

.inner-buttons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 45px;
    flex-wrap: wrap;
}

@media (max-width:768px){

    .inner-page{
        padding:120px 0 60px;
    }

    .inner-content{
        padding:28px;
    }

    .inner-header h1{
        font-size:34px;
    }

    .inner-header p{
        font-size:17px;
    }

}
.footer-bottom-links{
    margin-top:25px;
    text-align:center;
    font-size:14px;
    color:rgba(255,255,255,.55);
}

.footer-bottom-links a{
    color:rgba(255,255,255,.75);
    text-decoration:none;
    transition:.3s;
}

.footer-bottom-links a:hover{
    color:#f97316;
}

.footer-bottom-links span{
    margin:0 10px;
    color:rgba(255,255,255,.35);
}
/* ==========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ
========================================================================== */

/* Основной контейнер внутренней страницы */

.inner-page {

    padding-top: 110px;
    padding-bottom: 60px;

    min-height: 70vh;

}




/* ==========================================================================
   СТРАНИЦА "В РАЗРАБОТКЕ"
========================================================================== */

.page-development {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    width: 100%;

    padding: 40px 20px;

}




.image-wrapper {

    position: relative;

    width: 100%;

    max-width: 1200px;

}




.image-wrapper img {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 15px;

    box-shadow: 0 20px 50px rgba(0,0,0,.35);

}




.development-text {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) rotate(-12deg);

    width: 100%;

    padding: 20px 0;

    text-align: center;

    color: #ffffff;

    font-size: clamp(30px, 5vw, 75px);

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    background: rgba(7,24,45,.60);

    text-shadow: 0 4px 15px rgba(0,0,0,.80);

}




.home-btn {

    display: inline-block;

    margin-top: 35px;

    padding: 15px 35px;

    border-radius: 8px;

    background: #ff8a00;

    color: #ffffff;

    text-decoration: none;

    font-size: 18px;

    font-weight: 700;

    transition: .3s;

}




.home-btn:hover {

    background: #e67b00;

    transform: translateY(-2px);

}




/* ==========================================================================
   ОБЩИЕ ЭЛЕМЕНТЫ ВНУТРЕННИХ СТРАНИЦ
========================================================================== */

.inner-page h1 {

    margin-bottom: 30px;

}




.inner-page h2 {

    margin-bottom: 20px;

}




.inner-page section {

    padding: 0px 0;

}
/* ==========================================================================
   ЮРИДИЧЕСКИЕ СТРАНИЦЫ
========================================================================== */

.legal-page{
    padding:60px 0 80px;
    color:#e2e8f0;
}

.legal-page .container{
    max-width:1000px;
}

.legal-page h1{
    margin-bottom:15px;
    font-size:42px;
    font-weight:800;
    color:#ffffff;
}

.legal-date{
    margin-bottom:40px;
    color:#94a3b8;
    font-size:15px;
}

.legal-page h2{
    margin:40px 0 15px;
    font-size:26px;
    font-weight:700;
    color:#ffffff;
}

.legal-page p{
    margin-bottom:18px;
    line-height:1.8;
    font-size:17px;
}

.legal-page ul{
    margin:15px 0 25px 25px;
}

.legal-page li{
    margin-bottom:10px;
    line-height:1.8;
    font-size:17px;
}

.legal-page strong{
    color:#ffffff;
}

.legal-page a{
    color:#ff8a00;
    text-decoration:none;
}

.legal-page a:hover{
    text-decoration:underline;
}

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

@media (max-width:768px){

    .legal-page{
        padding:40px 0 60px;
    }

    .legal-page h1{
        font-size:32px;
    }

    .legal-page h2{
        font-size:22px;
    }

    .legal-page p,
    .legal-page li{
        font-size:16px;
    }

}
/* ==========================================================================
   COOKIE BANNER
========================================================================== */

.cookie-banner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 20px 25px;

    background: rgba(7, 24, 45, 0.97);
    color: #ffffff;

    border-radius: 12px;

    box-shadow: 0 10px 35px rgba(0,0,0,0.35);

    z-index: 9999;

    transform: translateY(150%);
    transition: transform 0.4s ease;
}


.cookie-banner.show {
    transform: translateY(0);
}


.cookie-text {
    font-size: 14px;
    line-height: 1.5;
    max-width: 900px;
}


.cookie-text a {
    color: #ff8a00;
    text-decoration: underline;
}


.cookie-btn {

    background: #ff8a00;

    color: #ffffff;

    border: none;

    padding: 12px 30px;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s ease;
}


.cookie-btn:hover {

    background: #ff9f2e;

}


/* Мобильная версия */

@media (max-width: 700px) {

    .cookie-banner {

        left: 10px;
        right: 10px;
        bottom: 10px;

        flex-direction: column;

        align-items: stretch;

        gap: 15px;

        padding: 18px;

    }


    .cookie-btn {

        width: 100%;

    }

}
/* ==========================================================================
   FORM CONSENT
========================================================================== */

.form-consent {

    margin: 15px 0;

    font-size: 13px;

    line-height: 1.4;

    color: #777;

}


.form-consent label {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    cursor: pointer;

}


.form-consent input {

    margin-top: 3px;

    width: 16px;

    height: 16px;

}


.form-consent a {

    color: #ff8a00;

    text-decoration: underline;

}