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

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #222;
    line-height: 1.5;
    background: #f7f7f7;
}

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

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 15px;
}

/* HEADER */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.header__top {
    border-bottom: 1px solid #e5e5e5;
}

.header__top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0;
}

.header__logo a {
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
}

.header__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
    font-size: 14px;
}

.header__phone {
    font-weight: 600;
}

.header__mail {
    color: #0b71d9;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* LANG SWITCHER */

.header__lang {
    position: relative;
}

/* .lang__current { */
    /* border: 1px solid #ccc; */
    /* border-radius: 4px; */
    /* padding: 4px 8px; */
    /* background: #fff; */
    /* cursor: pointer; */
    /* font-size: 13px; */
    /* text-transform: uppercase; */
/* } */

/* .lang__dropdown { */
    /* position: absolute; */
    /* right: 0; */
    /* top: 100%; */
    /* margin-top: 4px; */
    /* background: #fff; */
    /* border: 1px solid #ddd; */
    /* border-radius: 4px; */
    /* padding: 4px 0; */
    /* min-width: 70px; */
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.05); */
    /* display: none; */
/* } */

/* .lang__dropdown button { */
    /* display: block; */
    /* width: 100%; */
    /* padding: 4px 10px; */
    /* border: none; */
    /* background: none; */
    /* cursor: pointer; */
    /* font-size: 13px; */
    /* text-align: left; */
    /* text-transform: uppercase; */
/* } */

/* .lang__dropdown button:hover { */
    /* background: #f1f5f9; */
/* } */

/* NAV */

.header__bottom {
    padding: 8px 0;
}

.nav {
    display: flex;
}

.nav__list {
    list-style: none;
    display: flex;
    gap: 18px;
    padding: 0;
    margin: 0;
    align-items: center;
    font-size: 14px;
}

.nav__list > li > a {
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}

.nav__list > li > a:hover {
    border-color: #0b71d9;
}

.nav__item--has-sub {
    position: relative;
}

.nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 4px;
    padding: 8px 0;
    box-shadow: 0 8px 20px rgba(15,23,42,0.15);
    list-style: none;
    margin: 0;
    display: none;
    z-index: 10;
}

.nav__item--has-sub:hover .nav__sub {
    display: block;
}

.nav__sub li a {
    display: block;
    padding: 6px 14px;
    font-size: 13px;
}

.nav__sub li a:hover {
    background: #f1f5f9;
}

/* BUTTONS */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 999px; /* круглые кнопки везде */
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition:
        background 0.18s ease-out,
        color 0.18s ease-out,
        box-shadow 0.18s ease-out,
        transform 0.12s ease-out,
        border-color 0.18s ease-out;
}

/* основной стиль для светлого фона (в остальных блоках) */
.btn.btn--primary {
    background: #0b71d9;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(11,113,217,0.35);
}

.btn.btn--primary:hover {
    background: #0557ad;
    box-shadow: 0 10px 24px rgba(11,113,217,0.45);
    transform: translateY(-1px);
}

.btn.btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(11,113,217,0.3);
}

/* outline для светлого фона (например, внизу страницы) */
.btn.btn--outline {
    background: transparent;
    border: 1px solid #0b71d9;
    color: #0b71d9;
    box-shadow: none;
}

.btn.btn--outline:hover {
    background: #0b71d9;
    color: #ffffff;
}

/* BURGER */

.burger {
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    background: #fff;
    padding: 0 6px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}

.burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #0f172a;
}

/* HERO */

.hero {
    position: relative;
    color: #fff;
    padding: 60px 0 70px;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 20%, #0b71d9 0, #0b71d9 18%, #0f172a 60%);
    opacity: 0.96;
    z-index: -2;
    overflow: hidden;
}

.hero__bg::before {
    content: "";
    position: absolute;
    width: 180%;
    height: 180%;
    left: -40%;
    top: -60%;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(56,189,248,0.15), transparent 60%);
    opacity: 0.7;
    animation: heroGlow 26s linear infinite alternate;
}

@keyframes heroGlow {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(5%, 8%, 0) scale(1.05); }
    100% { transform: translate3d(-5%, 4%, 0) scale(1.02); }
}

.hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero__content h1 {
    font-size: 32px;
    margin-bottom: 16px;
}

.hero__content p {
    max-width: 520px;
    font-size: 15px;
    margin-bottom: 24px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.hero__actions .btn.btn--primary {
    background: #ffffff;
    color: #0b3780;
    box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}

.hero__actions .btn.btn--primary:hover {
    background: #f5f7ff;
    box-shadow: 0 14px 32px rgba(0,0,0,0.30);
}

.hero__actions .btn.btn--outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.9);
    color: #ffffff;
}

.hero__actions .btn.btn--outline:hover {
    background: rgba(255,255,255,0.08);
    border-color: #ffffff;
}

.hero__image {
    flex: 0 0 530px;
}

.hero__truck-placeholder {
    border-radius: 16px;
    /* border: 2px dashed rgba(255,255,255,0.6); */
    /* padding: 40px 20px; */
	overflow: hidden;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* SECTIONS */

.section {
    padding: 50px 0;
    background: #f7f7f7;
}

.section--gray {
    background: #eef2f7;
}

.section__title {
    font-size: 24px;
    margin: 0 0 24px;
}

/* ADVANTAGES (с изображениями) */

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

.advantages__item {
    background: #fff;
    border-radius: 16px;
    padding: 18px 18px 20px;
    box-shadow: 0 4px 10px rgba(15,23,42,0.04);
    display: flex;
    flex-direction: column;
}

.advantages__media {
    width: 100%;
    aspect-ratio: 4 / 2; /* примерно 2:1, можно 16/9 если так удобнее подбирать картинки */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #e5effb; /* запасной фон на случай, если картинка не загрузится */
}

.advantages__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.advantages__item h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.advantages__item p {
    margin: 0;
    font-size: 14px;
    color: #4b5563;
}

/* аккуратный hover */

.advantages__item {
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        border-color 0.18s ease-out;
    border: 1px solid transparent;
}

.advantages__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(15,23,42,0.08);
    border-color: #e5eaf2;
}


/* SERVICES */

/* .services { */
    /* display: grid; */
    /* grid-template-columns: repeat(5, minmax(0, 1fr)); */
    /* gap: 16px; */
/* } */

/* .services__item { */
    /* background: #fff; */
    /* border-radius: 8px; */
    /* padding: 12px; */
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 8px; */
    /* box-shadow: 0 1px 3px rgba(15,23,42,0.08); */
/* } */

/* .services__img { */
    /* height: 90px; */
    /* border-radius: 6px; */
    /* background: linear-gradient(135deg, #0b71d9, #38bdf8); */
/* } */

/* INFO GRID */

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

.info-grid__item {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}




/* CONTACTS */

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

.contacts__block {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}

/* FOOTER */

.footer {
    background: #0f172a;
    color: #e5e7eb;
    font-size: 13px;
    padding: 14px 0;
}

.footer__inner {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    align-items: center;
}

/* MODAL */

.modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 200;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.5);
}

.modal__window {
    position: relative;
    max-width: 420px;
    margin: 80px auto;
    background: #fff;
    border-radius: 10px;
    padding: 24px 22px 20px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.3);
}

.modal__close {
    position: absolute;
    right: 10px;
    top: 8px;
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* FORM */

.form__group {
    margin-bottom: 12px;
}

.form__group label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.form__group input,
.form__group textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    outline: none;
}

.form__group input:focus,
.form__group textarea:focus {
    border-color: #0b71d9;
}

.form__error {
    display: none;
    font-size: 12px;
    color: #b91c1c;
    margin-top: 4px;
}

.form__success {
    display: none;
    margin-top: 10px;
    font-size: 13px;
    color: #15803d;
}

/* STATE CLASSES */

.is-open {
    display: block !important;
}

.is-error input,
.is-error textarea {
    border-color: #b91c1c;
}

.is-error .form__error {
    display: block;
}

.is-success .form__success {
    display: block;
}

/* RESPONSIVE */

@media (max-width: 1024px) {
    .services {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 900px) {
    .header__top-inner {
        flex-wrap: wrap;
        align-items: flex-start;
    }
	.advantages {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 768px) {
    .header__contacts {
        display: none;
    }

    .burger {
        display: flex;
    }

    .header__bottom {
        border-top: 1px solid #e5e5e5;
    }

    .nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: #ffffff;
        border-top: 1px solid #e5e5e5;
        display: none;
    }

    .nav.is-open {
        display: block;
    }

    .nav__list {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 15px 12px;
    }

    .nav__item--has-sub:hover .nav__sub {
        display: none;
    }

    .nav__item--has-sub .nav__sub {
        position: static;
        margin-top: 4px;
        box-shadow: none;
        border-radius: 0;
        border-top: 1px solid #e5e5e5;
    }

    .hero__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero__image {
        width: 100%;
        flex: 0 0 auto;
    }

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

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

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

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

    .footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }

}

@media (max-width: 480px) {
    .hero {
        padding: 40px 0 45px;
    }

    .hero__content h1 {
        font-size: 24px;
    }

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

/* SCROLL REVEAL */

[data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
    will-change: opacity, transform;
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.advantages__item,
.services__item,
.info-grid__item,
.process__step,
.contacts__block {
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        border-color 0.18s ease-out;
    border: 1px solid transparent;
}

.advantages__item:hover,
.services__item:hover,
.info-grid__item:hover,
.process__step:hover,
.contacts__block:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(15,23,42,0.08);
    border-color: #e5eaf2;
}

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

.section--process {
    background: #f7f9fc;
}

.process {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.process__step {
    background: #ffffff;
    border-radius: 10px;
    padding: 14px 12px 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06);
    font-size: 13px;
}

.process__step h3 {
    margin: 8px 0 6px;
    font-size: 15px;
}

.process__icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b71d9;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

/* ABOUT */

.about {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 4px 12px rgba(15,23,42,0.04);
    border: 1px solid transparent;
}

/* убираем стандартный маркер summary */

.about__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.about__summary::-webkit-details-marker {
    display: none;
}

.about__summary::marker {
    content: "";
}

/* текст слева */

.about__summary-text p {
    margin: 0 0 8px;
    font-size: 14px;
    color: #111827;
    max-width: 760px;
}

/* круглая кнопка справа */

.about__toggle-circle {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    border: 1px solid #d1e3ff;
    background: #f3f7ff;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition:
        background 0.18s ease-out,
        border-color 0.18s ease-out,
        box-shadow 0.18s ease-out,
        transform 0.18s ease-out;
}

.about__toggle-arrow {
    width: 16px;
    height: 16px;
    border-right: 2px solid #0b71d9;
    border-bottom: 2px solid #0b71d9;
    border-radius: 2px;
    transform: rotate(45deg);
    transition: transform 0.25s ease-out;
}

.about__toggle-caption {
    font-size: 12px;
    color: #4b5563;
}

/* hover-эффект */

.about__summary:hover .about__toggle-circle {
    background: #e5f0ff;
    border-color: #0b71d9;
    box-shadow: 0 8px 16px rgba(15,23,42,0.12);
    transform: translateY(-1px);
}

/* когда details открыт — крутим стрелку */

.about[open] .about__toggle-arrow {
    transform: rotate(-135deg);
}

/* раскрытая часть */

.about__more {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5eaf2;
}

/* элементы внутри "подробнее" */

.about-feature {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: flex-start;
    gap: 10px 16px;
    padding: 8px 0;
}

.about-feature__num {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0edff;
    color: #0b71d9;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}

.about-feature__body h3 {
    margin: 0 0 6px;
    font-size: 15px;
}

.about-feature__body p {
    margin: 0 0 6px;
    font-size: 14px;
    color: #374151;
}

.about-feature__body ul {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    color: #4b5563;
}

.about-feature__body ul li + li {
    margin-top: 2px;
}

/* адаптив */

@media (max-width: 768px) {
    .about__summary {
        align-items: flex-start;
    }

    .about__toggle-circle {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 520px) {
    .about {
        padding: 18px 16px;
    }

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

    .about__toggle-circle {
		align-self: center;

    }
}

/* INFO GRID — кликаемые карточки */

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

.info-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 18px 20px;
    box-shadow: 0 4px 10px rgba(15,23,42,0.04);
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        border-color 0.18s ease-out,
        background 0.18s ease-out;
    position: relative; /* добавили */
}

.info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(15,23,42,0.08);
    border-color: #e5eaf2;
    background: #f9fbff;
}

/* маленький кружок со стрелкой в правом нижнем углу */

.info-card::after {
    content: "→";
    position: absolute;
    right: 14px;
    bottom: 12px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #d1e3ff;
    background: #f3f7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #4b72c7;
    opacity: 0.7;
    transform: translateX(-3px);
    transition:
        opacity 0.18s ease-out,
        transform 0.18s ease-out,
        border-color 0.18s ease-out,
        background 0.18s ease-out,
        color 0.18s ease-out;
    pointer-events: none; /* чтобы не мешал клику по карточке */
}

.info-card:hover::after {
    opacity: 1;
    transform: translateX(0);
    border-color: #0b71d9;
    background: #0b71d9;
    color: #ffffff;
}

/* по желанию: для клавиатурного фокуса */

.info-card:focus-visible {
    outline: 2px solid #0b71d9;
    outline-offset: 3px;
}

.info-card h4 {
    margin: 0 0 8px;
    font-size: 15px;
}

.info-card p {
    margin: 0;
    font-size: 14px;
    color: #4b5563;
}

@media (max-width: 900px) {
    .info-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 640px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}

/* INFO PANEL (slide-over справа) */

.info-panel {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 140;
}

.info-panel.is-open {
    display: block;
}

.info-panel__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.35);
}

.info-panel__content {
    position: absolute;
    top: 0;
    right: 0;
    width: 460px;
    max-width: 100%;
    height: 100%;
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(15,23,42,0.4);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

.info-panel.is-open .info-panel__content {
    transform: translateX(0);
}

.info-panel__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: #e5f0ff;
    color: #0f172a;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-panel__inner {
    padding: 20px 22px 22px;
    overflow-y: auto;
    margin-top: 0; /* отступ компенсирует кнопку, если нужно */
}

/* Стили статьи внутри панели */

.info-article h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
}

.info-article h4 {
    margin: 14px 0 6px;
    font-size: 15px;
}

.info-article p {
    margin: 0 0 8px;
    font-size: 14px;
    color: #374151;
}

.info-article ul {
    margin: 0 0 8px;
    padding-left: 18px;
    font-size: 14px;
    color: #4b5563;
}

.info-article__image {
    margin: 10px 0 14px;
    border-radius: 12px;
    overflow: hidden;
    background: #e5effb;
}

.info-article__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* мобильный вид — панель на всю ширину снизу */

@media (max-width: 640px) {
    .info-panel__content {
        width: 100%;
        max-width: 100%;
    }

    .info-panel__inner {
        padding: 18px 16px 20px;
    }
}

/* СПЕЦИФИКАЦИЯ КОНТЕЙНЕРА В ПАНЕЛИ */

.container-spec__header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.container-spec__image {
    flex: 0 0 140px;
    border-radius: 10px;
    overflow: hidden;
    background: #e5effb;
}

.container-spec__image img {
    display: block;
    width: 100%;
    height: auto;
}

.container-spec__summary {
    flex: 1 1 auto;
    font-size: 13px;
}

.container-spec__type {
    margin: 0 0 6px;
    font-weight: 600;
    color: #111827;
}

.container-spec__main {
    margin: 0;
    padding: 0;
}

.container-spec__main > div {
    margin-bottom: 4px;
}

.container-spec__main dt {
    font-weight: 600;
    display: inline;
}

.container-spec__main dd {
    display: inline;
    margin: 0 0 0 4px;
    color: #374151;
}

.container-spec__note {
    margin: 6px 0 0;
    font-size: 12px;
    color: #6b7280;
}

/* блоки "Размеры", "Вес" */

.container-spec__block {
    margin-top: 14px;
}

.container-spec__block h4 {
    margin: 0 0 8px;
    font-size: 15px;
}

/* размеры в виде карточек */

.container-spec__dimensions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.container-spec__dim {
    border-radius: 10px;
    background: #f3f7ff;
    padding: 8px 10px;
}

.container-spec__dim-label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: #0b71d9;
}

.container-spec__dim ul {
    margin: 0;
    padding-left: 16px;
    font-size: 13px;
    color: #374151;
}

/* вес/объём */

.container-spec__weights {
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.container-spec__weights > div + div {
    margin-top: 4px;
}

.container-spec__weights dt {
    font-weight: 600;
    display: inline;
}

.container-spec__weights dd {
    display: inline;
    margin: 0 0 0 4px;
    color: #374151;
}

/* немного адаптива для более широких панелей */

@media (min-width: 520px) {
    .container-spec__dimensions {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

/* ТАБЫ ДЛЯ КОНТЕЙНЕРОВ В ПАНЕЛИ */

.info-article--containers h3 {
    margin-bottom: 8px;
}

.container-tabs {
    display: flex;
    gap: 6px;
    margin: 10px 0 12px;
    overflow-x: auto;
    padding-bottom: 4px;
	flex-wrap:wrap;
}

.container-tabs__tab {
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid #d1e3ff;
    background: #f3f7ff;
    padding: 6px 10px;
    font-size: 12px;
    color: #1f2933;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.16s ease-out,
        border-color 0.16s ease-out,
        color 0.16s ease-out;
}

.container-tabs__tab.is-active {
    background: #0b71d9;
    color: #ffffff;
    border-color: #0b71d9;
}

.container-tabs__panels {
    margin-top: 4px;
}

.container-panel {
    display: none;
}

.container-panel.is-active {
    display: block;
}

/* Группы документов в панели "Законодательство" */

.info-article--docs h3 {
    margin-bottom: 8px;
}

.doc-group-title {
    margin: 16px 0 8px;
    font-size: 15px;
    font-weight: 600;
}

/* список ссылок-документов */

.doc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.doc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid #e5eaf2;
    background: #f9fafb;
    text-decoration: none;
    color: #111827;
    transition:
        background 0.16s ease-out,
        border-color 0.16s ease-out,
        box-shadow 0.16s ease-out,
        transform 0.12s ease-out;
}

.doc-item:hover {
    background: #eff6ff;
    border-color: #0b71d9;
    box-shadow: 0 6px 14px rgba(15,23,42,0.12);
    transform: translateY(-1px);
}

/* иконка файла */

.doc-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e0edff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0b71d9;
}

/* на будущее можно добавить .doc-item__icon--pdf с другим фоном */

.doc-item__content {
    flex: 1 1 auto;
    min-width: 0;
}

.doc-item__title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.doc-item__meta {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

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

.doc-item__arrow {
    flex-shrink: 0;
    font-size: 16px;
    color: #9ca3af;
}

.doc-disclaimer {
    margin-top: 10px;
    font-size: 12px;
    color: #6b7280;
}

/* .work-steps { */
    /* margin: 60px 0 80px; */
/* } */

/* .work-steps__title { */
    /* font-size: 32px; */
    /* font-weight: 700; */
    /* margin-bottom: 40px; */
/* } */

/* ОБЩАЯ СЕТКА ТАЙМЛАЙНА: линия по центру, элементы слева/справа */

.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 0 10px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,#dce6f8,#c8d8f5,#dce6f8);
    border-radius: 3px;
}

.timeline-item {
    position: relative;
    display: flex;
    margin-bottom: 38px;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.5s ease-out,
        transform 0.5s ease-out;
}

.timeline-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.timeline-item--left .timeline-content {
    margin-right: auto;
    margin-left: auto;
    text-align: right;
}

.timeline-item--right .timeline-content {
    margin-left: auto;
    margin-right: 0;
    text-align: left;
}

/* круглые маркеры по центру */

.timeline-marker {
    position: absolute;
    left: 50%;
    top: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transform: translate(-50%, 0);
    background: linear-gradient(135deg,#0b71d9,#4aa3ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 10px rgba(15,23,42,0.18);
    font-size: 18px;
    z-index: 1;
}

/* карточки шагов */

.timeline-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 18px 14px;
    box-shadow: 0 4px 10px rgba(15,23,42,0.05);
    border: 1px solid #e5eaf2;
    max-width: 380px;
    position: relative;
}

.timeline-item--left .timeline-content {
    margin-right: calc(50% + 30px);
}

.timeline-item--right .timeline-content {
    margin-left: calc(50% + 30px);
}

/* треугольники-«хвостики» к линии */

.timeline-item--left .timeline-content::before,
.timeline-item--right .timeline-content::before {
    content: "";
    position: absolute;
    top: 18px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-left: 1px solid #e5eaf2;
    border-top: 1px solid #e5eaf2;
    transform: rotate(45deg);
}

.timeline-item--left .timeline-content::before {
    right: -6px;
}

.timeline-item--right .timeline-content::before {
    left: -6px;
}

/* заголовок + иконка */

.timeline-content__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.timeline-item--left .timeline-content__header {
    flex-direction: row-reverse;
}

.timeline-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #e5f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* можно поиграть с цветами иконок по типам, пока оставим общий стиль */
/* .timeline-icon--request {} и т.д. — задел на будущее */

.timeline-content h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.timeline-content p {
    color: #42505e;
    font-size: 14px;
    line-height: 1.45;
    margin: 4px 0 0;
}

/* немного "степпинга" по времени анимации */

.timeline-item:nth-child(1) {
    transition-delay: 0.05s;
}

.timeline-item:nth-child(2) {
    transition-delay: 0.12s;
}

.timeline-item:nth-child(3) {
    transition-delay: 0.19s;
}

.timeline-item:nth-child(4) {
    transition-delay: 0.26s;
}

.timeline-item:nth-child(5) {
    transition-delay: 0.33s;
}

/* Мобильная версия: в одну колонку слева */

@media (max-width: 768px) {

    .timeline {
        padding-left: 10px;
        padding-right: 10px;
    }

    .timeline::before {
        left: 18px;
    }

    .timeline-marker {
        left: 18px;
        transform: translate(-50%,0);
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .timeline-content {
        max-width: 100%;
    }

    .timeline-item--left .timeline-content,
    .timeline-item--right .timeline-content {
        margin: 0 0 0 52px;
        text-align: left;
    }

    .timeline-item--left .timeline-content__header {
        flex-direction: row;
    }

    .timeline-item--left .timeline-content::before,
    .timeline-item--right .timeline-content::before {
        left: -6px;
        right: auto;
    }
}

/* .contacts-section { */
    /* margin: 60px 0 80px; */
/* } */

.contacts-section__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
}

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.contact-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 22px 22px;
    box-shadow: 0 4px 12px rgba(15,23,42,0.05);
    border: 1px solid #e5eaf2;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #e5f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 6px;
}

.contact-card__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.contact-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #374151;
}

.contact-card__note {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

/* ссылка "Открыть на карте" */

.contact-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #0b71d9;
    text-decoration: none;
}

.contact-card__link::after {
    content: "↗";
    font-size: 13px;
}

.contact-card__link:hover {
    text-decoration: underline;
}

/* строки контактов */

.contact-card__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 14px;
}

.contact-row__label {
    font-weight: 600;
    color: #111827;
}

.contact-row__value {
    color: #0b71d9;
    text-decoration: none;
}

.contact-row__value:hover {
    text-decoration: underline;
}

/* правая карточка с CTA */

.contact-card--cta {
    background: linear-gradient(135deg,#f3f7ff,#ffffff);
    border-color: #dbe5ff;
}

.contact-benefits {
    margin: 4px 0 8px;
    padding-left: 18px;
    font-size: 13px;
    color: #4b5563;
}

.contact-benefits li + li {
    margin-top: 2px;
}

/* кнопка */

.contact-card__btn {
    margin-top: auto;
    align-self: flex-start;
    padding: 9px 18px;
    border-radius: 999px;
    border: none;
    background: #0b71d9;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(11,113,217,0.3);
    transition:
        background 0.18s ease-out,
        box-shadow 0.18s ease-out,
        transform 0.12s ease-out;
}

.contact-card__btn:hover {
    background: #0557ad;
    box-shadow: 0 10px 24px rgba(11,113,217,0.35);
    transform: translateY(-1px);
}

.contact-card__btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(11,113,217,0.25);
}

/* адаптив: чуть больше воздуха на узких экранах */

@media (max-width: 768px) {
    .contacts-section__title {
        margin-bottom: 18px;
    }
}

/* ===== УСЛУГИ ===== */

.section#services {
    /* если нужно чуть отступы подправить */
}

/* Сетка: адаптивные колонки 260–320px, далее сами переносятся */
.services {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

/* Карточка услуги */
.services__item {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(15,23,42,0.05);
    border: 1px solid #e5eaf2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        box-shadow 0.18s ease-out,
        transform 0.18s ease-out,
        border-color 0.18s ease-out;
}

.services__item:hover {
    box-shadow: 0 12px 24px rgba(15,23,42,0.15);
    transform: translateY(-3px);
    border-color: #d4e1ff;
}

/* Блок с картинкой */
.services__img {
    position: relative;
    overflow: hidden;
}

.services__img img {
    display: block;
    width: 100%;
    height: 180px;             /* единая высота */
    object-fit: cover;         /* красиво обрезает разные картинки */
    transition: transform 0.35s ease-out;
}

/* лёгкий градиент, чтобы фотки выглядели более “единым набором” */
.services__img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10), transparent 40%, rgba(0,0,0,0.05));
    pointer-events: none;
}

/* лёгкий zoom при hover */
.services__item:hover .services__img img {
    transform: scale(1.04);
}

/* Контент карточки */
.services__item h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 12px 14px 6px;
}

.services__item p {
    font-size: 14px;
    line-height: 1.45;
    color: #4b5563;
    margin: 0 14px 14px;
}

/* чуть больше воздуха снизу, чтобы текст не лип */
.services__item:last-child {
    margin-bottom: 0;
}

/* МОБИЛЬНАЯ АДАПТАЦИЯ */

@media (max-width: 992px) {
    .services {
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .services {
        grid-template-columns: 1fr; /* по одной карточке в ряд */
    }

    .services__img img {
        height: 190px;
    }

    .services__item h4 {
        font-size: 15px;
    }

    .services__item p {
        font-size: 13px;
    }
}

/* ===== ЛЕЙБЛ НАД КАРТОЧКОЙ УСЛУГ ===== */

.services__item {
    position: relative;
}

/* аккуратный чип-лейбл */
.services__item::before {
    content: attr(data-label);
    position: absolute;
    top: 14px;
    left: 18px;

    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;

    border-radius: 999px;
    background: rgba(15,23,42,0.82);  /* тёмный фон */
    color: #ffffff;                    /* белый текст */
    box-shadow: 0 4px 10px rgba(15,23,42,0.35);
    backdrop-filter: blur(4px);

    pointer-events: none;
    z-index: 3;
}

/* при ховере чуть подсвечиваем */
.services__item:hover::before {
    background: rgba(11,113,217,0.9);
}

/* Чтобы лейбл не перекрывался картинкой */
.services__img {
    position: relative;
    z-index: 1;
}

/* Базовые вещи для логотипа (десктоп + мобилка) */
.header__logo img {
    max-width: 380px;
    width: 100%;
    height: auto;
}

/* Мобильная версия шапки */
@media (max-width: 768px) {

    .header__top {
        padding: 8px 0 10px;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        position: sticky;
        top: 0;
        z-index: 50;
        background: #ffffff;
    }

    .header__top-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* Логотип в отдельной строке по центру */
    .header__logo {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header__logo img {
        max-width: 260px;
    }

    /* Телефон+почта на мобилке прячем, чтобы не загромождать */
    .header__contacts {
        display: none;
    }

    /* Вторая строка: язык, кнопка, бургер */
    .header__actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    /* Переключатель языка слева */
    .header__lang {
        position: relative;
        flex-shrink: 0;
    }

    .lang__current {
        padding: 5px 11px;
        border-radius: 999px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        font-size: 13px;
        text-transform: uppercase;
        cursor: pointer;
    }

    /* Кнопка звонка – по центру, растягивается */
    .header__callback {
        flex: 1 1 auto;
        justify-content: center;
        padding-inline: 12px;
        border-radius: 999px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Бургер справа, компактный круглый */
    .burger {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
    }

    .burger span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: #111827;
    }

    .burger span + span {
        margin-top: 3px;
    }

    /* Немного ужмём нижнюю навигацию по горизонтали */
    .header__bottom .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Логотип общий (десктоп + мобилка) */
.header__logo img {
    max-width: 380px;
    width: 100%;
    height: auto;
}

/* ---------- МОБИЛЬНАЯ ШАПКА ---------- */
@media (max-width: 768px) {
	.header__bottom {
		padding: 0;
	}
    .header__top {
        padding: 8px 0 10px;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        position: sticky;
        top: 0;
        z-index: 50;
        background: #ffffff;
    }

    .header__top-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding-inline: 12px; /* добавляем внутренние отступы от краёв экрана */
    }

    /* Логотип в отдельной строке по центру и побольше */
    .header__logo {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header__logo img {
        max-width: 320px; /* увеличил относительно прошлого варианта */
    }

    /* Телефон/почта в мобилке убираем – иначе слишком тесно */
    .header__contacts {
        display: none;
    }

    /* Вторая строка: язык – кнопка – бургер */
    .header__actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-inline: 4px; /* ещё чуть-чуть воздуха от краёв */
    }

    /* Язык слева, небольшая таблетка */
    .header__lang {
        position: relative;
        flex-shrink: 0;
    }

    .lang__current {
        padding: 5px 11px;
        border-radius: 999px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        font-size: 13px;
        text-transform: uppercase;
        cursor: pointer;
    }

    /* Кнопка "Заказать звонок" – не растягиваем, просто аккуратная таблетка */
    .header__callback {
        flex: 0 0 auto;          /* НЕ растягиваем на всю ширину */
        max-width: 220px;        /* ограничиваем максимальную ширину */
        width: 100%;
        /* border-radius: 999px; */
        /* padding: 6px 16px; */
        /* font-size: 13px; */
        white-space: nowrap;
        justify-content: center;
    }

    /* Бургер справа, не вплотную к краю */
    .burger {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
    }

    .burger span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: #111827;
    }

    .burger span + span {
        margin-top: 3px;
    }

    /* Чуть ужимаем контейнер навигации снизу */
    .header__bottom .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Современный бургер-иконка */

.burger {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f3f4ff;
    
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;              /* ровные промежутки между полосками */
    padding: 0;
    cursor: pointer;

    box-shadow: 0 2px 6px rgba(15,23,42,0.12);
    transition:
        background 0.18s ease-out,
        border-color 0.18s ease-out,
        box-shadow 0.18s ease-out,
        transform 0.12s ease-out;
}

/* сами полоски */
.burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #111827;
    transition: background 0.18s ease-out;
}

/* убираем старое margin-top, если где-то осталось */
.burger span + span {
    margin-top: 0;
}

/* hover-состояние */
.burger:hover {
    background: #0b71d9;
    border-color: #0b71d9;
    box-shadow: 0 4px 10px rgba(11,113,217,0.35);
    transform: translateY(-1px);
}

.burger:hover span {
    background: #ffffff;
}

/* ---- Language switcher ---- */

.header__lang {
    position: relative;
    flex-shrink: 0;
}

/* кнопка "текущий язык" */
.lang__current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
    transition:
        border-color 0.16s ease-out,
        box-shadow 0.16s ease-out,
        background 0.16s ease-out;
}

.lang__current:hover {
    border-color: #0b71d9;
    box-shadow: 0 4px 8px rgba(11,113,217,0.18);
    background: #f3f4ff;
}

/* маленький флажок */
.lang__flag {
    width: 18px;
    height: 12px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.08);
}

.lang__flag--ru { background-image: url("./images/flags/ru.svg"); }
.lang__flag--en { background-image: url("./images/flags/us.svg"); }
.lang__flag--de { background-image: url("./images/flags/de.svg"); }

/* стрелочка */
.lang__chevron {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #6b7280;
    border-bottom: 1.5px solid #6b7280;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.16s ease-out;
}

/* выпадающий список */
.lang__dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 140px;
    padding: 6px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow:
        0 12px 24px rgba(15,23,42,0.18),
        0 0 0 1px rgba(148,163,184,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity 0.16s ease-out,
        transform 0.16s ease-out,
        visibility 0.16s ease-out;
    z-index: 60;
}

/* открытое состояние */
.header__lang.is-open .lang__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header__lang.is-open .lang__chevron {
    transform: rotate(-135deg) translateY(1px);
}

/* пункт списка языков */
.lang__option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: transparent;
    border: none;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    color: #111827;
    transition: background 0.12s ease-out, color 0.12s ease-out;
}

.lang__option:hover {
    background: #eff6ff;
    color: #0b71d9;
}

.lang__option-label {
    white-space: nowrap;
}

/* подчёркиваем выбранный */
.lang__option.is-active {
    background: #0b71d9;
    color: #ffffff;
}