/* =========================================
   ОБЩИЕ СТИЛИ И СБРОС
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Cannonade Medium', sans-serif;
    background-color: #ffffff;
    color: #000;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    height: 100%;
}

/* Базовая кнопка */
.btn {
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
    text-align: center;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* =========================================
   ЕДИНЫЙ СТИЛЬ ЗАГОЛОВКОВ (РАЗМЕР)
   ========================================= */
h1,
.hero-text-block h1,
.tariffs-header h1,
.video-hero h1,
.telephony-content h2,
.internet-text-wrap h2,
.contacts-info h2 {
    font-size: 58px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
}

/* =========================================
   ЦВЕТА ЗАГОЛОВКОВ
   ========================================= */
h1,
.tariffs-header h1,
.video-hero h1,
.telephony-content h2,
.internet-text-wrap h2,
.contacts-info h2 {
    color: #000;
}

.hero-text-block h1 {
    color: #ffffff;
    font-size: 60px;
}
.hero-text-block h1 span{
    font-weight: normal;
}

.hero-text-block.text-dark h1 {
    color: #000000;
}


/* =========================================
   ЧАСТЬ 1: СТИЛИ ПЕРВОГО ФАЙЛА
   ========================================= */
header {
    background-color: #fff;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 700;
    position: fixed;
    z-index: 100;
    width: 100%;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.10));
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 40px;
}

.logo img {
    height: 40px;
    width: auto;
    display: block;
}

.nav-menu ul {
    display: flex;
    gap: 30px;
}

.nav-menu a {
    text-transform: font-size: 13px;
    font-weight: 700;
    color: #000;
}

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

.header-contacts {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.phone {
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
}

.btn-cabinet {
    background-color: #000;
    color: #fff;
    padding: 7px 20px;
    border-radius: 6px;
    font-weight: 500;
    /* font-size: 13px; */
    white-space: nowrap;
}

.btn-cabinet:hover {
    background-color: #333;
}

.warning-banner {
    background-color: #fcfcfc;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    font-size: 17px;
    font-weight: 500;
    color: #000;
    line-height: 110%;
    position: relative;
    z-index: 90;
}
.headheight{
    height: 70px;
}

.warning-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.warning-content-left {
    display: flex;
    gap: 20px;
    max-width: 95%;
}

.icon-bulb {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 5px;
}

.icon-bulb svg {
    width: 83px;
    height: 83px;
    fill: #555;
}

.warning-text {
    text-align: justify;
}

.close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    flex-shrink: 0;
    font-size: 25px;
    transition: background 0.2s;
}

.close-btn:hover {
    background-color: #eee;
    color: #333;
}

.hero-section {
    position: relative;
    width: 100%;
    min-height: 700px;
    overflow: hidden;
}

.hero-slider {
    display: flex;
    width: 300%;
    height: 100%;
    min-height: 700px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-slide {
    width: 33.333%;
    height: 100%;
    min-height: 700px;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
        padding-top: 80px;
}

.slide-1 {
    background-image: url('/image/firstslide.png');
}

.slide-2 {
    background-image: url('/image/slide2_bg.png');
    color: #fff;
}

.slide-3 {
    background-image: url('/image/slide3_bg.png');
    color: #000;
}
.slide-3 h2{
    font-size: 50px;
    font-weight: normal;
    line-height: 100%;
}
.slide-3 .hero-subtitle{
    color: #000;
    margin-top: 30px;
}
.slide-3 .btn-blue{
    margin-top: 50px;
}

.slide-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}

.hero-text-block {
    margin-bottom: 40px;
}

.hero-text-block.text-dark {
    color: #000;
}

.tv-logo {
    font-size: 60px;
    font-weight: 900;
    color: #4a90e2;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tv-icon {
    border: 4px solid #4a90e2;
    border-radius: 10px;
    width: 60px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding-left: 5px;
}

.hero-subtitle {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

.hero-desc-small {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 30px;
    line-height: 1.4;
    color: inherit;
    line-height: 110%; /* 26.4px */
}

.hero-promo {
    font-size: 16px;
    margin-bottom: 40px;
    font-weight: bold;
    color: #fff;
    line-height: 110%; /* 26.4px */
        margin-top: 20px;
}

.btn-connect {
    background-color: #000;
    color: #fff;
    padding: 15px 40px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: 'Unbounded', sans-serif;
}

.btn-connect:hover {
    background-color: #222;
    transform: scale(1.02);
}

.btn-blue {
    background-color: #4a90e2;
    color: #fff;
    padding: 10px 40px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-family: 'Unbounded', sans-serif;
}

.btn-blue:hover {
    background-color: #357abd;
    transform: scale(1.02);
}

.bg-typography {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.bg-text-line {
    font-size: 80px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.15);
    line-height: 0.85;
    text-align: right;
    white-space: nowrap;
    text-transform: uppercase;
}

.hero-floating-img {
    position: absolute;
    z-index: 5;
}

.hero-controls-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 50;
}

.hero-controls-container .container {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.hero-cards-wrapper {
    pointer-events: auto;
    padding-bottom: 40px;
}

.hero-cards {
    display: flex;
    background: #fff;
    border-radius: 150px;
}

.card-item {
    background: #fff;
    border-radius: 15px;
    padding: 15px 20px;
    width: 220px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.card-item.active{
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-item:hover {
    transform: scale(1.09);
}

.card-item.active::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #4a90e2;
    border-radius: 3px 3px 0 0;
}

.card-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 5px;
    color: #333;
}

.card-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.2;
}


/* =========================================
   ЧАСТЬ 2: СТИЛИ ВТОРОГО ФАЙЛА
   ========================================= */
.main-content {
    padding-top: 40px;
    padding-bottom: 40px;
}

.tariff-tabs {
    display: flex;
    gap: 30px;
    margin-bottom: 35px;
    padding-bottom: 10px;
}

.tab-link {
    font-size: 14px;
    color: #777;
    padding-bottom: 5px;
    position: relative;
    cursor: pointer;
}

.tab-link.active {
    color: #000;
    font-weight: 500;
}

.tab-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
}

.btn-primary {
    background-color: #426EC4;
    color: #fff;
    width: 100%;
    padding: 12px 0;
    border-radius: 15px;
    font-weight: 500;
    font-size: 16px;
    margin-top: 15px;
    font-family: 'Unbounded', sans-serif;
}

.btn-primary:hover {
    background-color: #1a6cd8;
    box-shadow: 0 4px 12px rgba(47, 128, 237, 0.3);
}

/* --- ИЗМЕНЕНИЕ ДЛЯ СЕТКИ ТАРИФОВ --- */
/* Flex по умолчанию, чтобы работала скрытие/показ через JS без поломки макета */
.tariffs-grid {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.tariff-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 40px;
    padding: 25px 20px;
    /* Фиксированная ширина ~32%, чтобы влезало по 3 штуки */
    width: calc(33.333% - 14px);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}
.tariff-card  .wrap{
    padding: 0 20px;
}

.tariff-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.tariff-card.active-card {
    background-color: #f0f7ff;
    border-color: #2f80ed;
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(47, 128, 237, 0.15);
    z-index: 10;
}

.badge {
        position: absolute;
    top: 20px;
    right: -10px;
    background-color: #ffcc00;
    color: #000;
    font-size: 13px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.card-header-img {
    margin: -25px -20px 20px -20px;
    padding: 0;
    padding-top: 50px;
    background: linear-gradient(90deg, #688BD0 0%, #C9D6EF 100%);
    border-radius: 40px 40px 0 0;
    text-align: center;
    overflow: hidden;
    display: block;
    height: 97px;
}

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

#card-2>div.card-header-img,
#card-5>div.card-header-img {
    background: linear-gradient(90deg, #688BD0 0%, #426EC4 100%);
}

#card-3>div.card-header-img {
    background: linear-gradient(90deg, #688BD0 0%, #643BBC 100%);
}

.service-block {
    margin-bottom: 20px;
}

.service-title {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Unbounded', sans-serif;
}

.wifi-icon::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 25px;
    background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="36" height="25" viewBox="0 0 36 25" fill="none"><path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M12.8222 0.395211C8.79777 1.22995 5.14608 3.07579 1.86398 5.93453C0.00407632 7.55421 -0.443083 8.6634 0.429159 9.49303C1.1431 10.1721 1.99201 9.85086 3.78726 8.22218C6.13153 6.095 8.75394 4.61629 11.8762 3.66037C13.9587 3.0227 15.0041 2.88802 17.8677 2.88802C23.5253 2.88802 27.5207 4.40063 31.8545 8.18349C33.0954 9.26658 34.3009 10.1529 34.5333 10.1529C35.0987 10.1529 36 9.17719 36 8.56501C36 8.29507 35.5513 7.58811 35.0032 6.99422C32.4032 4.17777 26.9906 1.22965 22.9132 0.409309C20.2287 -0.130586 15.3897 -0.137485 12.8222 0.395211ZM13.3283 7.02841C11.0004 7.6235 8.76813 8.82566 6.7701 10.5602C4.99282 12.1025 4.45895 13.1718 5.09973 13.9061C5.84394 14.7591 7.0104 14.4193 8.77033 12.8362C14.0309 8.1037 21.8158 8.16909 27.13 12.99C28.9498 14.6412 29.8511 14.9817 30.5761 14.2921C31.372 13.535 30.9914 12.4139 29.4566 10.9945C26.0919 7.88295 22.5894 6.54131 17.9134 6.5734C16.3272 6.5842 14.2639 6.78906 13.3283 7.02841ZM15.046 13.0317C12.3826 13.8398 9.51108 16.1196 9.51108 17.4262C9.51108 17.9325 10.4972 18.8512 11.0408 18.8512C11.248 18.8512 12.031 18.3131 12.7815 17.655C14.461 16.1826 15.9864 15.5518 17.8677 15.5518C19.7803 15.5518 21.0527 16.0965 23.0163 17.7552C24.1525 18.715 24.8141 19.0738 25.1991 18.9388C27.3949 18.1682 25.8551 15.4028 22.3046 13.7402C19.8509 12.5911 17.314 12.3437 15.046 13.0317ZM15.9441 19.871C14.5276 21.2183 14.4762 22.6197 15.7921 24.0204C16.582 24.8614 16.9204 25 18.183 25C19.4457 25 19.784 24.8614 20.574 24.0204C21.8899 22.6197 21.8385 21.2183 20.422 19.871C19.5892 19.0789 19.0897 18.8512 18.183 18.8512C17.2764 18.8512 16.7769 19.0789 15.9441 19.871Z" fill="black"/></svg>') no-repeat center;
    background-size: contain;
    margin-top: 10px;
}

.tv-icon-real::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 25px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="25" viewBox="0 0 32 25" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.984858 0.232229C-0.0183793 0.683429 2.30449e-05 0.495657 2.30449e-05 10.3203C2.30449e-05 20.0713 -0.0163519 19.8932 0.930587 20.3998C1.3136 20.6046 2.26507 20.6445 6.77613 20.6445H12.1643V22.177V23.7095H8.10952H4.05477V24.3547V25H15.9851H27.9154V24.3547V23.7095H23.8606H19.8059V22.177V20.6445H25.194C31.1082 20.6445 31.2638 20.6216 31.7336 19.6819C32.0888 18.9711 32.0888 1.66939 31.7336 0.958633C31.2283 -0.0520097 32.0069 -0.00458292 16.0319 0.00235366C3.98631 0.00767708 1.3961 0.0471994 0.984858 0.232229ZM30.5354 1.48017C30.8053 1.7594 30.8053 18.8811 30.5354 19.1604C30.264 19.4411 1.70614 19.4411 1.43478 19.1604C1.16483 18.8811 1.16483 1.7594 1.43478 1.48017C1.70614 1.19948 30.264 1.19948 30.5354 1.48017ZM13.6026 5.57065C13.2598 5.81891 13.2559 5.86779 13.2559 9.92246V14.0231L13.6446 14.2865C13.8663 14.4367 14.1511 14.5032 14.3073 14.4411C14.9549 14.1841 20.2711 10.4217 20.35 10.1648C20.3977 10.0091 20.3949 9.76889 20.3438 9.63097C20.2402 9.35221 14.4352 5.31948 14.1374 5.31948C14.0338 5.31948 13.7932 5.43256 13.6026 5.57065Z" fill="black" fill-opacity="0.1"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.speed {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
    font-family: 'Unbounded', sans-serif;
}
.speed span{
        font-size: 25px;
}

.service-desc {
    font-size: 12px;
    color: #1A1A1A;
    line-height: 1.3;
}

.packages-list {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.radio-option {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    position: relative;
}

.radio-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-radio {
    width: 20px;
    height: 20px;
    border: 1px solid #C5C5C5;
    border-radius: 50%;
    margin-right: 12px;
    margin-top: 2px;
    flex-shrink: 0;
    position: relative;
}

.radio-option input:checked~.custom-radio {
    border: 5px solid #426EC4;
}

.option-text {
    font-size: 13px;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
}

.opt-name {
    font-weight: 700;
    color: #000;
    font-family: 'Unbounded', sans-serif;
    font-size: 16px;
}

.opt-channels {
    color: #828282;
    font-weight: 500;
}
.opt-channels a{
    color: #007BFF;

}

.logos-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.logos-row.small img {
    height: 45px;
    width: auto;
    border-radius: 14px;
    box-shadow: -3px 3px 9px 0 rgba(0, 0, 0, 0.25);
}

.icon-stub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    padding: 0 4px;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    border-radius: 2px;
}

.icon-stub.red {
    background: #e50914;
}

.icon-stub.green {
    background: #00d6a3;
}

.icon-stub.black {
    background: #000;
}

.icon-stub.white {
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
}

.card-footer {
    margin-top: auto;
}

.price {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    font-family: 'Unbounded', sans-serif;
}

.period {
    font-size: 14px;
    font-weight: 400;
    color: #555;
}

.equip-cost {
    font-size: 10px;
    color: #888;
    line-height: 1.2;
    margin-bottom: 10px;
}

.legal-terms {
    margin-bottom: 40px;
    color: #333;
}

.legal-terms h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    font-family: 'Unbounded', sans-serif;

}

.legal-terms p {
    font-size: 17px;
    line-height: 1.4;
    color: #000;
    margin-bottom: 5px;
}

/* СЕКЦИЯ 24ТВ (Bottom) */
.bottom-bg-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.tv-promo-section {
    width: 100%;
    min-height: 70vh;
    background-image: url('/image/start_background_desktop 2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.promo-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.promo-content {
    max-width: 500px;
    color: #fff;
    padding: 40px 0;
}

.promo-logo {
    margin-bottom: 15px;
}

.promo-logo img {
    width: 240px;
    height: auto;
}

.promo-content h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.promo-desc {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.logos-row.large {
    gap: 10px;
    margin-bottom: 35px;
}

.logos-row.large img {
        height: 70px;
    border-radius: 14px;
    box-shadow: -3px 3px 9px 0 rgba(0, 0, 0, 0.25);
}

.logos-row.large .icon-stub {
    height: 24px;
    font-size: 12px;
    padding: 0 8px;
    border-radius: 4px;
}

.icon-stub.green-bg {
    background-color: #00d6a3;
    color: #000;
}

.icon-stub.black-bg {
    background-color: #000;
    color: #fff;
    border: 1px solid #333;
}

.icon-stub.white-bg {
    background-color: #fff;
    color: #000;
}

.btn-white {
    background-color: #fff;
    color: #000;
    padding: 12px 80px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 25px;
    display: inline-block;
}

.btn-white:hover {
    background-color: #eee;
}


/* =========================================
   ЧАСТЬ 3: СТИЛИ ВТОРОГО ФАЙЛА (ВИДЕОНАБЛЮДЕНИЕ)
   ========================================= */

/* --- ГЕРОЙ --- */
.video-hero {
    padding: 20px 0 20px 0;
    margin-top: 0;
}

.video-header-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.tags {
    display: flex;
    gap: 10px;
}

.tag {
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 5px 45px;
    font-size: 13px;
    color: #555;
    font-weight: 500;
    margin-top: 15px;
}
div.video-header-row > div > span:nth-child(2){
    padding: 5px 20px;
}
div.video-header-row > h1{
    margin: 0;
}

.subtitle {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #000;
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.case-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    transition: box-shadow 0.3s;
}

.case-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.case-text {
    padding: 20px;
    flex-grow: 0;
}

.case-text h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}

.case-text p {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

.case-img {
    flex-grow: 1;
    position: relative;
    background: #eee;
    min-height: 150px;
}

.case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.center-btn-wrapper {
    text-align: center;
}

.btn-blue-large {
    background-color: #426EC4;
    color: #fff;
    padding: 10px 70px;
    border-radius: 15px;
    font-weight: 500;
    font-size: 18px;
    font-family: 'Unbounded', sans-serif;
}

.btn-blue-large:hover {
    background-color: #1a6cd8;
}

/* --- СРАВНЕНИЕ --- */
.comparison-section {
    padding: 20px 0 60px 0;
}

.section-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.comparison-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.comp-col {
    flex: 1;
    max-width: 480px;
}

.comp-col h4 {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 15px;
    min-height: 40px;
    text-align: center;
}

.benefit-list,
.drawback-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.benefit-list li, .drawback-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    line-height: 1.3;
    border-radius: 20px;
    padding: 20px 30px;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.25);
}

/* Стили для левой (синей) колонки */
.benefit-list li {
    color: #426EC4;
}

/* Стили для правой (серой) колонки */
.drawback-list li {
    border-color: #e0e0e0;
    color: #333;
}

.icon-circle {
    width: auto;
    height: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border-radius: 0;
    margin-top: 0;
}

.icon-circle.blue {
    color: #3b7cdb;
}

.icon-circle.gray {
    color: #999;
}

.comp-img-wrapper {
/*    flex: 1.5;*/
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
}

.comp-main-img {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    z-index: 2;
    margin-top: 80px;
}

.divider-line {
    position: absolute;
    left: 50%;
    top: -20px;
    bottom: -20px;
    width: 2px;
    background: #4a90e2;
    z-index: 1;
    transform: translateX(-50%);
}

/* --- ТЕЛЕФОНИЯ --- */
.telephony-section {
    position: relative;
    width: 100%;
    /* Desktop по умолчанию */
    background: url('/image/telefon_fon.webp') no-repeat center bottom;
    background-size: cover;
    padding-top: 40px;
    padding-bottom: 0;
    overflow: visible;
    z-index: 10;
    margin-top: 70px;
}

.telephony-container {
    display: flex;
    justify-content: space-between;
}

.telephony-content {
    max-width: 550px;
    margin-bottom: 40px;
}

.telephony-desc {
    font-size: 22px;
    margin-bottom: 30px;
    color: #333;
    line-height: 1.5;
}

.btn-black {
    background: #000;
    color: #fff;
    padding: 10px 75px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Unbounded', sans-serif;
}

.btn-black:hover {
    background: #333;
}

.telephony-image {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

/* --- FIX: Картинка woman.png всегда поверх всех блоков --- */
.telephony-image img {
    max-width: 100%;
    height: auto;
    display: block;
    transform: scale(1.3);
    transform-origin: bottom right;
    position: relative;
    z-index: 100;
}

.features-grid-section {
    padding: 60px 0 20px 0;
    background: #fff;
}

.features-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.feature-item {
    text-align: center;
    flex: 1;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.25);
}

.c-icon {
    width: 39px;
    height: 26px;
    position: relative;
    display: flex;
    justify-content: center;
    top: -15px;
}
div.contacts-info > div > ul > li:nth-child(5) > div,
div.contacts-info > div > ul > li:nth-child(1) > div{
    top:0;
}
section.features-grid-section div > div:nth-child(1) > div{
    margin-top: 0;

}
.feat-icon{
    height: 130px;
        margin-top: 30px;
}

.feature-item h4 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 14px;
    line-height: 1;
}

.feature-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}


/* --- ИНТЕРНЕТ --- */
.internet-section {
    padding: 20px 0 0 0;
}

.internet-text-wrap {
    margin: 0 0 40px 0;
    text-align: left;
}

.internet-text-wrap p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.internet-map-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    overflow: hidden;
    height: auto;
}

.map-img-constrained {
    width: 100%;
    height: auto;
    display: block;
}


/* --- КОНТАКТЫ --- */
.contacts-section {
    padding: 60px 0 20px 0;
}

.contacts-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

/*.contacts-info {
    flex: 1;
    max-width: 600px;
}*/

.contacts-sub {
    font-size: 21px;
    color: #555;
    margin-bottom: 40px;
    line-height: 1.4;
}

.contacts-details h3 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #000;
}

.contacts-form-card {
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 10px 40px 20px 40px;
    width: 400px;
    flex-shrink: 0;
}

.contacts-form-card h4 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 5px;
    font-family: 'Unbounded', sans-serif;
}

.form-hint {
    display: block;
    font-size: 13px;
    color: #999;
    margin-bottom: 25px;
}

.form-input {
    width: 100%;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
}

.form-input:focus {
    border-color: #2f80ed;
    background: #fff;
}

.form-select {
    appearance: none;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.textarea {
    resize: none;
    height: 100px;
}

.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #333;
}

.recaptcha-mockup {
    background: #f9f9f9;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    width: 100%;
    max-width: 304px;
    height: 78px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.08);
    background-color: #fff;
}

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

.recaptcha-box {
    width: 28px;
    height: 28px;
    border: 2px solid #c1c1c1;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
}

.recaptcha-check span {
    font-size: 14px;
    color: #000;
    font-weight: 400;
}

.recaptcha-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.recaptcha-logo img {
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

.recaptcha-logo span {
    font-size: 10px;
    color: #555;
    margin-top: 2px;
}

.recaptcha-links {
    font-size: 8px;
    color: #555;
    margin-top: 2px;
}

.recaptcha-links a {
    color: #555;
    text-decoration: none;
}

.btn-primary-form {
    width: 100%;
    background: #4570C5;
    color: #fff;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Unbounded', sans-serif;
}

.btn-primary-form:hover {
    background: #1a6cd8;
}
div.contacts-form-card label > a{
    color: #007BFF;
}
#agree{

}

.footer-map {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 10px;
}

.footer-map img {
    width: 100%;
    height: auto;
    display: block;
}

footer {
    background: #222;
    color: #999;
    padding: 30px 0;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

footer .container {
    display: flex;
    justify-content: center;
}

.footer-text {
    max-width: 800px;
}
table{
    border-collapse: collapse;
}
td{
        padding: 20px;
}
td a{
    color: #2196F3;
}
h5 {
    font-size: 20px;
    margin-top: 20px;
}


.b2b-hero {
    width: 100%;
    /* Фоновое изображение справа */
    background: url('/image/background_desktop.png') no-repeat right center;
    background-size: cover;
    min-height: 550px; /* Увеличил высоту */
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 60px;
}

.b2b-hero-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Выравнивание всего контента влево */
    width: 100%;
}

.b2b-hero-content {
    max-width: 600px;
    color: #fff;
    padding: 40px 0;
    text-align: left; /* Текст строго влево */
}

/* Заглушка-логотип */
.b2b-hero-logo img {
    height: 50px;
    margin-bottom: 25px;
    display: block;
    /* Если картинка темная, можно раскомментировать фильтр ниже, чтобы сделать белой */
    /* filter: brightness(0) invert(1); */
}

.b2b-hero-content h1 {
    font-size: 50px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 35px;
}

/* Черная кнопка */
.btn-hero-black {
    background-color: #000;
    letter-spacing: 2px;
    color: #fff;
    padding: 18px 45px;
    border-radius: 15px; 
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.btn-hero-black:hover {
    background-color: #222;
}

/* --- 2. SERVICES GRID (КОМПЛЕКСНАЯ СЕТКА) --- */
.b2b-services { padding-bottom: 80px; }
.section-title-left { margin-bottom: 50px; max-width: 1100px; }

/* Общая обертка для сетки */
.complex-grid {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Отступы между рядами */
}

/* РЯД 1: Неравные блоки */
.grid-row-top {
    display: flex;
    gap: 24px;
    width: 100%;
}
.card-internet {
    width: 42%; /* Поуже (Интернет) */
}
.card-video {
    width: 58%; /* Пошире (Видеонаблюдение) */
}

/* РЯД 2: Длинный блок */
.grid-row-middle {
    width: 100%;
}
.card-sks {
    width: 100%;
    /* Можно задать горизонтальное расположение для СКС, если нужно картинку сбоку */
}

/* РЯД 3: Два равных блока */
.grid-row-bottom {
    display: flex;
    gap: 24px;
    width: 100%;
}
.card-sip, .card-wifi {
    width: 50%;
}

/* Стиль самой карточки */
.service-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 24px; /* Закругления */
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}
.service-card:hover { transform: translateY(-5px); }

.card-img-wrap {
    height: 240px; /* Фиксированная высота картинки */
    width: 100%;
    overflow: hidden;
}
.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заполнение */
    transition: transform 0.5s;
}
.service-card:hover .card-img-wrap img { transform: scale(1.05); }

.card-body {
    padding: 30px;
    flex-grow: 1;
}
.card-body h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}
.card-body p {
    font-size: 15px;
    line-height: 1.5;
    color: #444;
}


/* --- 3. FORM SECTION --- */
.b2b-form-section {
    width: 100%;
    min-height: 654px;
    margin: 0 auto 60px auto;
    /* ПРАВИЛЬНЫЙ ГРАДИЕНТ ИЗ ЗАДАНИЯ */
    background: linear-gradient(135deg, #3B6499 0%, #5B8FC4 40%, #7AB4E5 70%, #A1D4F8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.form-flex-center { display: flex; justify-content: center; width: 100%; }

.b2b-form-card {
    background: #fff;
    border-radius: 30px;
    padding: 50px 60px;
    max-width: 900px;
    width: 100%;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.b2b-form-card h2 { font-size: 26px; font-weight: 600; margin-bottom: 15px; }
.b2b-form-subtitle { font-size: 14px; color: #666; margin-bottom: 35px; font-weight: 700;}

.b2b-optimal-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}
.form-group { width: 100%; text-align: left; }
.form-group label { display: block; font-size: 12px; color: #999; margin-bottom: 8px; margin-left: 20px; }

.b2b-optimal-form input {
    width: 100%;
    background: #F2F5F9;
    border: none;
    border-radius: 12px;
    padding: 22px 25px;
    font-size: 16px;
    outline: none;
}
.b2b-agreement { font-size: 12px; color: #4570C5; margin: 10px 0 20px 0; }
.b2b-agreement a { text-decoration: underline; }

/* КНОПКА ФОРМЫ ПО ТЗ */
.btn-b2b-submit {
    width: 386px;
    height: 53px;
    border-radius: 15px;
    background: #4570C5;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}
.btn-b2b-submit:hover { background: #355ba3; }
/* --- СЕТКА УСЛУГ (SPLIT LAYOUT) --- */
.b2b-services {
    padding-bottom: 80px;
}

.section-title-left {
    margin-bottom: 50px;
    max-width: 900px;
}

/* Обертка для двух колонок */
.split-grid-wrapper {
    display: flex;
    gap: 24px;
    width: 100%;
}

/* КОЛОНКИ */
.col-left-40 {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.col-right-60 {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* БАЗОВЫЙ СТИЛЬ КАРТОЧКИ (из вашего ТЗ) */
.b-card {
    background: #FFF;
    border-radius: 50px; /* Большое закругление */
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.25);
    overflow: hidden; /* Чтобы картинки не вылезали за радиус */
    transition: transform 0.3s ease;
    display: flex;
}
.b-card:hover {
    transform: translateY(-5px);
}

/* ТЕКСТ ВНУТРИ КАРТОЧЕК */
.b-card-text {
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.b-card-text h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}
.b-card-text p {
    font-size: 14px;
    line-height: 1.4;
    color: #444;
}

/* --- ТИПЫ КАРТОЧЕК --- */

/* 1. Вертикальная (Картинка сверху) - для Интернет, SIP, WiFi */
.card-internet-vertical, 
.card-mini {
    flex-direction: column;
    height: 100%; /* Растягиваем на всю доступную высоту */
}
.b-card-img-top {
    width: 100%;
    height: 220px;
    overflow: hidden;
}
.b-card-img-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. Горизонтальная СКС (Картинка СПРАВА) */
.card-sks-horizontal {
    flex-direction: row;
    align-items: center;
    min-height: 250px; /* Минимальная высота */
}
.card-sks-horizontal .b-card-text {
    width: 60%; /* Текст занимает часть */
}
.card-sks-horizontal .b-card-img-side {
    width: 40%;
    height: 100%;
    position: relative;
    min-height: 250px; /* Чтобы картинка была высокой */
}
.card-sks-horizontal .b-card-img-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
}

/* 3. Горизонтальная ВИДЕОНАБЛЮДЕНИЕ (Картинка СЛЕВА) */
.card-video-horizontal {
    flex-direction: row;
    align-items: stretch; /* Растягиваем по высоте */
    min-height: 300px;
}
.card-video-horizontal .b-card-img-side {
    width: 50%;
    position: relative;
    overflow: hidden;
}
.card-video-horizontal .b-card-img-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
}
.card-video-horizontal .b-card-text {
    width: 50%;
}

/* 4. Ряд для SIP и Wi-Fi */
.row-sip-wifi {
    display: flex;
    gap: 24px;
    height: 100%; /* Заполняем остаток высоты */
}
.card-mini {
    width: 50%;
}

/* Desktop Large (от 1025px) */
/* Отступы для больших экранов */
@media (min-width: 1025px) {
    .contacts-info { padding-left: 100px; }
    .contacts-form-card { margin-right: 100px; }
    .internet-text-wrap { padding-left: 100px; }
}

/* Tablet (до 1024px) */
@media (max-width: 1024px) {
    .contacts-info { padding-left: 0; }
    .contacts-form-card { margin-right: 0; }
    
    /* СЕТКА УСЛУГ: Перестраиваем в одну колонку */
    .split-grid-wrapper {
        flex-direction: column; 
    }
    .col-left-40, .col-right-60 {
        width: 100%;
    }
    
    /* СКС пока может оставаться горизонтальным, если влезает, или авто-высота */
    .card-sks-horizontal {
        min-height: auto;
    }
}

/* Mobile Nav & Layout (до 991px) */
@media (max-width: 991px) {
    /* --- ШАПКА --- */
    .header-inner { 
        justify-content: space-between; 
        column-gap: 10px; 
        align-items: center; /* Центрируем по вертикали */
    }
    
    .logo { order: 1; }
    .header-contacts { order: 2; margin-left: auto; }
    
    /* МЕНЮ: Поднимаем выше и прячем полосу прокрутки */
    .nav-menu { 
        order: 3; 
        width: 100%; 
        /* Уменьшили отступы в 2-3 раза, чтобы поднять меню */
        margin-top: 5px; 
        border-top: 1px solid #f5f5f5; 
        padding-top: 8px;
        
        /* Логика прокрутки */
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
        
        /* Скрываем визуально полосу прокрутки (для Chrome, Safari, Opera) */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE and Edge */
    }
    
    /* Скрываем полосу прокрутки (продолжение) */
    .nav-menu::-webkit-scrollbar {
        display: none;
    }
    
    .nav-menu ul { 
        display: flex;
        flex-wrap: nowrap; /* В одну строку */
        justify-content: space-between; /* Распределяем, если влезает */
        /* Уменьшаем расстояние между пунктами, чтобы больше влезло */
        gap: 10px; 
        min-width: 100%; 
        padding-bottom: 0; /* Убираем лишний отступ снизу */
    }
    
    .nav-menu a { 
        white-space: nowrap; 
        /* Чуть уменьшаем шрифт, чтобы текст влез */
        font-size: 11px; 
        font-weight: 600;
        text-transform: uppercase;
        display: block;
        padding: 5px 0; /* Увеличиваем кликабельную область */
    }

    /* --- HERO БЛОК (Мобильный) --- */
    .b2b-hero { 
        background-position: 70% center; /* Сдвигаем фон чуть правее на мобильных */
        min-height: 450px; /* Высота для мобильных */
    }
    .b2b-hero::before {
        content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
        background: rgba(0,0,0,0.3); pointer-events: none;
    }
    .b2b-hero-content { 
        position: relative; 
        z-index: 2; 
        padding: 20px; 
        text-align: center; 
        margin: 0 auto; 
    }
}

/* Mobile Standard (до 768px) */
@media (max-width: 768px) {
    /* Уменьшаем шрифты заголовков */
    h1, .internet-text-wrap h2, .contacts-info h2, .b2b-form-card h2, .section-title-left {
        font-size: 28px; 
        text-align: center;
    }
    
    /* --- HERO: УМЕНЬШЕНИЕ ДЛЯ МОБИЛЬНЫХ --- */
    .b2b-hero-logo img { 
        height: 35px; /* Уменьшили логотип */
        margin: 0 auto 15px auto; 
    }
    .b2b-hero-content h1 {
        font-size: 26px; /* Уменьшили шрифт заголовка */
        margin-bottom: 25px;
        line-height: 1.2;
    }
    .btn-hero-black {
        padding: 15px 30px;
        font-size: 12px;
    }
    
    /* --- СЕТКА УСЛУГ: ПОЛНАЯ ТРАНСФОРМАЦИЯ --- */
    /* Все карточки становятся вертикальными колонками */
    .b-card {
        flex-direction: column !important;
        border-radius: 30px; 
    }
    
    /* Сброс ширины и высоты для внутренних частей карточек */
    .card-sks-horizontal .b-card-text,
    .card-sks-horizontal .b-card-img-side,
    .card-video-horizontal .b-card-text,
    .card-video-horizontal .b-card-img-side {
        width: 100%;
        height: auto;
    }
    
    /* Фиксируем высоту картинок */
    .card-sks-horizontal .b-card-img-side,
    .card-video-horizontal .b-card-img-side {
        height: 200px; 
        position: relative; 
    }
    
    .card-sks-horizontal .b-card-img-side img,
    .card-video-horizontal .b-card-img-side img {
        position: static; 
        height: 100%;
    }
    
    /* СКС: Картинка сверху, текст снизу (column-reverse, т.к. в HTML картинка вторая) */
    .card-sks-horizontal {
        display: flex;
        flex-direction: column-reverse !important; 
    }
    
    /* SIP и Wifi тоже в одну колонку */
    .row-sip-wifi {
        flex-direction: column;
    }
    .card-mini {
        width: 100%;
    }
    
    /* Остальное */
    .internet-text-wrap p { text-align: center; }
    .contacts-wrapper { flex-direction: column; }
    .contacts-form-card { width: 100%; padding: 20px; }
    .b2b-hero-container { justify-content: center; }
    .b2b-form-card { padding: 30px 20px; }
    .btn-b2b-submit { width: 100%; }
}

/* Small Mobile (до 480px) */
@media (max-width: 480px) {
    /* Еще сильнее уменьшаем заголовок на совсем маленьких экранах */
    .b2b-hero-content h1 { font-size: 22px; }
    .b2b-hero-logo img { height: 28px; }
    
    /* Шапка */
    .logo img { height: 30px; }
    .phone { font-size: 12px; }
    .btn-cabinet { padding: 6px 10px; font-size: 11px; }
    
    /* Меню чуть плотнее */
    .nav-menu ul { gap: 15px; }
    .nav-menu a { font-size: 11px; }
    
    .section-title-left { font-size: 22px; }
}



/* --- УСЛУГИ И ОБОРУДОВАНИЕ (ОБНОВЛЕННЫЕ СТИЛИ) --- */
        .equipment-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr); /* 5 колонок */
            gap: 20px;
        }

        .equipment-card {
            border-radius: 12px;
            padding: 20px 15px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            min-height: 280px;
            position: relative;
        }
        
        /* Цвета плашек */
        .eq-card-gray {
            background-color: #F4F4F4;
        }
        
        .eq-card-blue {
            background-color: #DAE3F5; /* Светло-голубой как на макете */
        }

        .eq-title {
            font-family: 'Unbounded', sans-serif;
            font-size: 20px;
            font-weight: 700;
            line-height: 120%;
            text-transform: uppercase;
            margin-bottom: 8px;
            min-height: 35px; /* Чтобы заголовки были на одной линии */
            color: #000;
        }
        
        .eq-desc {
            font-family: 'Cannonade Medium', sans-serif;
            font-size: 11px;
            color: #555;
            line-height: 130%;
            margin-bottom: 12px;
            min-height: 30px;
        }

        /* Контейнер для цены и радио-кнопки */
        .eq-price-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        /* Стилизация радио-кнопки в оборудовании */
        .eq-radio {
            appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid #fff;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .eq-radio:checked {
            border-color: #2F65CB;
        }
        
        .eq-radio:checked::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 10px;
            height: 10px;
            background-color: #2F65CB;
            border-radius: 50%;
        }

        .eq-price {
            font-family: 'Unbounded', sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #000;
            display: flex;
            align-items: center;
        }
        .equipment-order{
            display:flex; 
            flex-direction:column; 
            align-items: center;
                margin: 30px 0;
        }
        .fullprice{
            font-size: 11px; 
            margin-top: 10px; 
            color: #2F65CB; 
            text-decoration: none;
        }
        
        .eq-price span {
             font-size: 12px;
             margin-left: 5px;
             font-weight: 500;
             color: #333;
        }

        .eq-image-container {
            width: 100%;
            height: 80px; /* Фиксированная высота для картинок */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            /* Если картинки нет, контейнер держит место */
        }
        
        .eq-image-container img {
            max-height: 100%;
            max-width: 100%;
            object-fit: contain;
        }

        /* Кнопка "Подробнее" прижата к низу через margin-top: auto */
        .btn-more-container {
            margin-top: auto; 
            text-align: left;
        }

        .btn-more {
            color: #2F65CB;
            font-family: 'Unbounded', sans-serif;
            font-size: 11px;
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
            transition: opacity 0.3s;
            border: none;
            background: none;
            padding: 0;
            border-bottom: 1px solid transparent;
            display: none;
        }
        
        .btn-more:hover {
            border-bottom: 1px solid #2F65CB;
        }
        
        .btn-main-action {
            display: block;
            margin-top: 30px;
            padding: 15px;
            background-color: #426EC4;
            color: white;
            text-align: center;
            border-radius: 10px;
            text-decoration: none;
            font-family: 'Unbounded', sans-serif;
            font-weight: 700;
            font-size: 14px;
            padding: 8px 0;
            transition: background 0.3s;
            width: 267px;
            height: 46px;
            line-height: 30px; /* Вертикальное центрирование текста */
        }
        
        .btn-main-action:hover {
             background-color: #104ba6;
        }
        /* --- FAQ (Частые вопросы) --- */
        .faq-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 40px;
        }

        .faq-column {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .tarif .faq-item {
            border-bottom: 1px solid #E0E0E0;
            padding-bottom: 15px;
        }

        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 10px 0;
        }

        .faq-title {
            color: #000;
            font-family: 'Unbounded', sans-serif;
            font-size: 16px; 
            font-weight: 700;
            line-height: 130%;
        }
        
        .faq-arrow {
            width: 12px;
            height: 12px;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            transform: rotate(45deg);
            transition: transform 0.3s ease;
/*            margin-right: 30px;*/
        }
        h2.tarif{
            text-align: left;
            font-weight: 500;
            font-size: 52px;
            line-height: 50%;
        }

        .faq-item.active .faq-arrow {
            transform: rotate(-135deg);
        }
        .govory{
            font-weight: 500;
        }
        .govory span{
            font-weight: 900;
            font-size: 37px;
            margin: 10px 0 30px 0;
            display: block;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            color: #333;
            font-family: 'Cannonade Medium', sans-serif;
            font-size: 12px;
            line-height: 140%;
            padding-right: 20px;
        }
        
        .faq-item.active .faq-answer {
            margin-top: 10px;
        }

/* =========================================
   АДАПТИВНОСТЬ (MEDIA QUERIES)
   ========================================= */

/* Desktop большой */
@media (min-width: 1025px) {
    .img-house {
        bottom: 0;
        right: 0;
        max-width: 59%;
    }

    .img-tv {
        bottom: 0;
        right: 0;
        max-width: 65%;
    }

    .img-cam {
        height: 90%;
        width: auto;
        max-width: none;
        bottom: 0;
        right: 5%;
    }

    .contacts-form-card {
        margin-right: 100px;
    }

}

@media (max-width: 1200px) {
    .bg-text-line {
        font-size: 60px;
    }
}

/* Планшеты */
@media (max-width: 1024px) {
    .cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- УБИРАЕМ ОТСТУПЫ У СЕКЦИИ ВЫШЕ --- */
    .comparison-section {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
        position: relative;
        z-index: 1;
        /* Ниже чем телефония */
    }

    /* --- ТЕЛЕФОНИЯ ДЛЯ ПЛАНШЕТОВ --- */
    .telephony-section {
        padding-top: 0;
        padding-bottom: 0;
        background: none;
        margin-top: 0;
        z-index: 30;
        /* Выше чем comparison-section */
        overflow: visible;
        position: relative;
    }

    .telephony-container {
        flex-direction: column-reverse;
        text-align: center;
    }

    .telephony-content {
        max-width: 100%;
        margin-bottom: 20px;
        padding-left: 0;
        position: relative;
        z-index: 50;
    }

    .telephony-content h2 {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        max-width: 100%;
    }

    /* БЛОК КАРТИНКИ + ФОН */
    .telephony-image {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        position: relative;
        min-height: 380px;
        transform: scale(1.3);
        transform-origin: center bottom;
        margin-top: -100px;
        margin-bottom: 20px;
        z-index: 100;
    }

    /* ФОН */
    .telephony-image::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80%;
        background: url('/image/telefon_fon.webp') no-repeat bottom center;
        background-size: contain;
        z-index: 1;
    }

    /* КАРТИНКА woman.png */
    .telephony-image img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: auto;
        max-height: 100%;
        display: block;
        transform: none;
        z-index: 100;
    }

    .comparison-row {
        flex-direction: column;
        align-items: center;
    }

    .comp-col {
        max-width: 100%;
        width: 100%;
        margin-bottom: 30px;
    }

    .comp-col.left {
        padding-left: 0;
    }

    .comp-col.right {
        padding-right: 0;
    }

    .contacts-info {
        padding-left: 0;
    }

    .contacts-form-card {
        margin-right: 0;
    }

    .comp-img-wrapper {
        order: -1;
        margin-bottom: 30px;
    }

    .divider-line {
        display: none;
    }

    .benefit-list li,
    .drawback-list li {
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 992px) {
    .tariffs-grid {
        justify-content: center;
    }

    .tariff-card {
        width: 48%;
        margin-bottom: 20px;
    }

    .tariff-card.active-card {
        transform: scale(1.02);
    }
}

/* Планшеты и мобильные до 991px */
@media (max-width: 991px) {

    /* Шапка */
    .header-inner {
        flex-wrap: wrap;
        column-gap: 0;
    }

    .logo {
        order: 1;
    }

    .header-contacts {
        order: 2;
        gap: 10px;
        margin-left: auto;
    }

    .phone {
        font-size: 13px;
    }

    .btn-cabinet {
        padding: 8px 12px;
        font-size: 12px;
    }

    .nav-menu {
        order: 3;
        width: 100%;
        margin-top: 7px;
        border-top: 1px solid #eee;
        padding-top: 5px;
    }

    .nav-menu ul {
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

    .nav-menu a {
        font-size: 12px;
    }

    .warning-banner {
        display: none;
    }

    /* Слайдер */
    .hero-section {
        height: auto;
        min-height: auto;
        padding-bottom: 0;
        display: block;
    }

    .hero-slider {
        height: auto;
        min-height: 750px;
    }

    .hero-slide {
        display: flex;
        min-height: 750px;
    }

    .slide-content-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 0;
        padding-bottom: 280px;
        height: 100%;
        width: 100%;
    }

    .hero-text-block {
        max-width: 100%;
        text-align: center;
        margin-bottom: 20px;
        padding: 0 15px;
    }

    .tv-logo {
        justify-content: center;
        font-size: 40px;
    }

    /* Контроллеры */
    .hero-controls-container {
        position: absolute;
        bottom: 130px;
        left: 0;
        z-index: 30;
    }

    .hero-controls-container .container {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
    }

    .hero-cards-wrapper {
        padding-bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .hero-cards {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 10px;
        background: none;
    }

    .card-item {
        width: 100%;
        max-width: 320px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    /* Картинки */
    .hero-floating-img {
        left: 0;
        right: 0;
        transform: none;
        bottom: 0;
        z-index: 5;
        width: 100%;
        max-width: none;
        height: auto;
        display: block;
    }

    .img-cam {
        bottom: -20px;
    }

    .bg-text-line {
        font-size: 40px;
        text-align: center;
        width: 100%;
    }

    .bg-typography {
        width: 100%;
        top: 100px;
    }
}

/* Мобильные до 768px */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    /* СИНХРОНИЗАЦИЯ РАЗМЕРОВ ЗАГОЛОВКОВ */
    h1,
    .hero-text-block h1,
    .tariffs-header h1,
    .video-hero h1,
    .telephony-content h2,
    .internet-text-wrap h2,
    .contacts-info h2 {
        font-size: 28px;
        text-align: center;
    }

    .tariff-tabs {
        justify-content: center;
        font-size: 13px;
    }

    .tariffs-grid {
        flex-direction: column;
        align-items: center;
    }

    .tariff-card {
        width: 100%;
        max-width: 400px;
        margin-bottom: 20px;
    }

    .tariff-card.active-card {
        transform: scale(1.02);
    }

    .tv-promo-section {
        background-position: 70% center;
        padding: 20px 0;
        text-align: center;
    }

    .promo-content {
        margin-left: 0;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: rgba(0, 0, 0, 0.3);
        padding: 20px;
        border-radius: 10px;
        backdrop-filter: blur(2px);
    }

    .logos-row.large {
        justify-content: center;
    }

    .subtitle {
        font-size: 18px;
    }

    .case-text h3 {
        font-size: 15px;
    }

    .case-text p {
        font-size: 12px;
    }

    .btn-blue-large {
        font-size: 16px;
    }

    .section-title {
        font-size: 22px;
    }
    h2.tarif{
        line-height: 100%;
    }
    .equipment-grid{
        grid-template-columns: none;
    }

    .comp-col h4 {
        font-size: 16px;
    }

    .benefit-list li,
    .drawback-list li {
        font-size: 13px;
        padding: 12px;
    }

    .telephony-desc {
        font-size: 15px;
    }

    .feature-item h4 {
        font-size: 16px;
    }

    .feature-item p {
        font-size: 12px;
    }

    .internet-text-wrap p {
        font-size: 14px;
    }

    .contacts-details h3 {
        font-size: 20px;
    }

    .contact-list li {
        font-size: 14px;
    }

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

    .features-row {
        flex-wrap: wrap;
    }

    .feature-item {
        min-width: 100%;
    }

    .contacts-wrapper {
        flex-direction: column;
    }

    .contacts-form-card {
        width: 100%;
        padding: 20px;
    }

    /* --- FIX: WOMAN.PNG ЗАЛЕЗАЕТ НА ВЕРХНИЙ БЛОК --- */
    .telephony-section {
        overflow: visible;
        /* Не обрезаем ничего */
        z-index: 30;
        position: relative;
            margin-top: 50px;
    }

    .telephony-image {
        transform: scale(1);
        margin-top: -200px;
        /* Сильнее залезает на верхний блок */
        width: 100%;
        max-width: 100%;
        min-height: 450px;
        /* Увеличена высота контейнера */
        z-index: 100;
        position: relative;
    }

    .telephony-image::before {
        height: 70%;
        background-size: cover;
    }

    .telephony-image img {
        z-index: 100;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        /* Центрируем */
        max-height: 100%;
        width: auto;
    }
}

/* Мобильные до 576px */
@media (max-width: 576px) {
    header {
        padding: 10px 0;
    }

    .header-inner {
        gap: 8px;
    }

    .logo img {
        height: 32px;
    }

    .header-contacts {
        gap: 8px;
    }

    .phone {
        font-size: 12px;
    }

    .btn-cabinet {
        padding: 6px 10px;
        font-size: 11px;
    }

    .nav-menu {
        margin-top: 5px;
        padding-top: 4px;
    }

    .nav-menu ul {
        gap: 5px;
        justify-content: center;
    }

    .nav-menu a {
        font-size: 10px;
    }

    /* --- FIX: Ещё больше места для woman.png --- */
    .telephony-image {
        margin-top: -180px;
        min-height: 420px;
    }
}

/* Мобильные 375px и меньше */
@media (max-width: 375px) {
    .container {
        padding: 0 10px;
    }

    .contacts-form-card {
        padding: 15px;
    }

    header {
        padding: 8px 0;
    }

    .header-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .logo {
        order: 1;
        flex-shrink: 0;
    }

    .logo img {
        height: 28px;
    }

    .header-contacts {
        order: 2;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        flex-shrink: 0;
    }

    .phone {
        font-size: 11px;
    }

    .btn-cabinet {
        padding: 5px 8px;
        font-size: 10px;
        border-radius: 3px;
    }

    .nav-menu {
        order: 3;
        width: 100%;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #eee;
    }

    .nav-menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 10px;
    }

    .nav-menu a {
        font-size: 9px;
        letter-spacing: -0.3px;
    }

    /* СИНХРОНИЗАЦИЯ РАЗМЕРОВ ЗАГОЛОВКОВ (Малые экраны) */
    h1,
    .hero-text-block h1,
    .tariffs-header h1,
    .video-hero h1,
    .telephony-content h2,
    .internet-text-wrap h2,
    .contacts-info h2 {
        font-size: 24px;
    }

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

    .hero-promo {
        font-size: 14px;
        margin-bottom: 30px;
    }

    .btn-connect {
        padding: 12px 30px;
        font-size: 14px;
    }

    .slide-content-wrapper {
        padding-bottom: 220px;
    }

    .hero-controls-container {
        bottom: 100px;
    }

    .card-item {
        padding: 10px 12px;
        max-width: 300px;
    }

    .card-title {
        font-size: 12px;
    }

    .card-desc {
        font-size: 10px;
    }

    .tariff-tabs {
        gap: 15px;
        flex-wrap: wrap;
    }

    .tab-link {
        font-size: 12px;
    }

    .tags {
        flex-wrap: wrap;
    }

    .tag {
        font-size: 11px;
        padding: 4px 10px;
    }

    .subtitle {
        font-size: 16px;
    }

    .contacts-sub {
        font-size: 14px;
    }

    .contacts-details h3 {
        font-size: 18px;
    }

    .contact-list li {
        font-size: 13px;
    }

    .contacts-form-card h4 {
        font-size: 18px;
    }

    .form-input {
        padding: 12px;
        font-size: 14px;
    }

    footer {
        font-size: 11px;
        padding: 20px 0;
    }

    /* --- FIX: woman.png для маленьких экранов --- */
    .telephony-image {
        margin-top: -150px;
        min-height: 380px;
    }
}

/* Очень маленькие экраны до 320px */
@media (max-width: 320px) {
    .container {
        padding: 0 8px;
    }

    .logo img {
        height: 24px;
    }

    .phone {
        font-size: 10px;
    }

    .btn-cabinet {
        padding: 4px 6px;
        font-size: 9px;
    }

    .nav-menu a {
        font-size: 8px;
    }

    h1,
    .hero-text-block h1 {
        font-size: 20px;
    }

    .hero-subtitle {
        font-size: 12px;
    }

    .hero-slider {
        min-height: 650px;
    }

    .hero-slide {
        min-height: 650px;
    }

    .slide-content-wrapper {
        padding-bottom: 200px;
    }

    .hero-controls-container {
        bottom: 80px;
    }

    .card-item {
        padding: 8px 10px;
        max-width: 280px;
    }

    .card-title {
        font-size: 11px;
    }

    .card-desc {
        font-size: 9px;
    }

    .section-title {
        font-size: 18px;
    }

    /* --- FIX: woman.png для самых маленьких экранов --- */
    .telephony-image {
        margin-top: -120px;
        min-height: 350px;
    }
}

/* --- HEADER --- */
.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.header-icon {
    width: 102px;
    height: 103px;
    margin-right: 20px;
    flex-shrink: 0;
}

.header-text {
    display: flex;
    flex-direction: column;
}

.header-title {
    color: #000;
    font-size: 45px;
    font-weight: 700;
    line-height: 130%;
    text-transform: uppercase;
}

.header-phone {
    color: #4576D4;
    font-size: 45px;
    font-weight: 700;
    line-height: 130%;
    text-transform: uppercase;
    text-decoration: none;
}


/* --- MAIN TITLE --- */
h1.main-title {
    color: #000;
    font-size: 45px;
    font-weight: 700;
    line-height: 130%;
    text-transform: none;
    margin-bottom: 30px;
}

/* --- GRID LAYOUT --- */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 40px;
}

/* --- FAQ ITEM (CARD) --- */
.tarif .faq-item {
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Обрезаем всё что вылезает */
    transition: all 0.3s ease;
    border-radius: 10px;
    background: #FEFEFE;
    box-shadow: 0 4px 22px 0 rgba(211, 211, 211, 0.25);
        padding: 30px;
    min-height: 130px;
}

/* Header блока */
.faq-header {
    position: relative;
    height: 154px;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 40px;
    z-index: 2;
    user-select: none;
}

/* Фон SVG */
.faq-header svg:not(.icon-right), 
.faq-header .custom-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    border-radius: 20px;
}

/* Убираем скругление снизу при открытии */
.faq-item.active .faq-header svg:not(.icon-right), 
.faq-item.active .faq-header .custom-bg {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Текст заголовка */
.faq-header h3 {
    position: relative;
    z-index: 3;
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 110%;
    max-width: 70%;
    text-align: left;
    pointer-events: none;
}

/* SVG иконка справа (обновлено для картинок) */
.icon-right {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 90px;
    height: 90px;
    pointer-events: none;
    /* Добавлено свойство, чтобы PNG не обрезались и не растягивались */
    object-fit: contain; 
}

.icon-png {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    max-height: 90px;
    pointer-events: none;
}

/* --- EXPANDED CONTENT --- */
.faq-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
    color: #FFF;
    font-family: "Cannonade Medium", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 110%;
    padding: 0 40px;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.faq-item.active .faq-body {
    max-height: 1000px;
    opacity: 1;
    padding-top: 20px;
    padding-bottom: 30px;
}

/* Цвета заливки */
.bg-gradient .faq-body {
    background: linear-gradient(90deg, #1243A9 0%, rgba(69, 118, 212, 0.85) 100%); 
}

.bg-light .faq-body {
    background-color: #A5BCE8;
}

.custom-gradient-bg {
    background: linear-gradient(90deg, #1243A9 0%, rgba(69, 118, 212, 0.45) 100%);
}

.faq-body p {
    margin-bottom: 15px;
    white-space: pre-line;
}

.faq-body ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

/* --- FOOTER --- */
.footer-section {
    margin-top: 40px;
}

.footer-title {
    color: #000;
    font-size: 25px;
    font-weight: 700;
    line-height: 130%;
    text-transform: none;
    margin-bottom: 15px;
}

.footer-text {
    color: #000;
    font-size: 20px;
    font-weight: 800;
    line-height: 110%;
    max-width: 900px;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
    .faq-item {
        max-width: 100%;
    }
    .faq-header svg:not(.icon-right) {
        width: 100%; 
        height: 100%;
    }
    .header-title, .header-phone, h1.main-title {
        font-size: 28px;
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .header-icon {
        margin-bottom: 10px;
    }
    .faq-header h3 {
        font-size: 13px;
    }
}

div#modal {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 0;
    background: #00000085;
}

#modal .container {
            width: 440px;
            background-color: #ffffff;
            border-radius: 20px;
            padding: 20px;
            box-sizing: border-box;
            position: relative;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            top: 5vh;
    height: auto;
        }
        #modal .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        #modal .title {
            color: #000;
            font-family: 'Unbounded', sans-serif;
            font-size: 25px;
            font-weight: 700;
            line-height: 130%;
            
            margin: 0;
        }
        #modal .close {
            font-size: 20px;
            cursor: pointer;
            color: #000;
        }
        #modal .subtitle {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }
        #modal .services-title {
            color: #000;
            font-family: 'Unbounded', sans-serif;
            font-size: 18px;
            font-weight: 700;
            line-height: 130%;
            
            margin-bottom: 10px;
        }
        #modal .tariff-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        #modal .tariff-desc {
            font-size: 14px;
            color: #000;
            margin-bottom: 20px;
        }
        #modal .form-group {
            margin-bottom: 15px;
        }
        #modal .label {
            font-size: 14px;
            margin-bottom: 5px;
            display: block;
            color: #000;
        }
        #modal .input {
            width: 100%;
            padding: 10px;
            background-color: #f0f0f0;
            border: none;
            border-radius: 15px;
            font-size: 14px;
            box-sizing: border-box;
        }
        #modal .required:after {
            content: ' (обязательно)';
            color: #000;
        }
        #modal .checkbox {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        #modal .checkbox input {
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #ddd;
            margin-right: 10px;
            cursor: pointer;
        }
        #modal .checkbox input:checked {
            background-color: #4570C5;
        }
        #modal .checkbox label {
            color: #000;
            font-family: 'Cannonade Medium', sans-serif; /* Или sans-serif, если не подключен */
            font-size: 10px;
            font-weight: 500;
            line-height: 130%;
        }
        #modal .recaptcha {
            display: flex;
            align-items: center;
            background-color: #ffffff;
            padding: 10px;
            border-radius: 15px;
            border: 1px solid #ddd;
            margin-bottom: 20px;
        }
        #modal .recaptcha-checkbox {
            width: 20px;
            height: 20px;
            border: 1px solid #ddd;
            background-color: #fff;
            margin-right: 10px;
            flex-shrink: 0;
        }
        #modal .recaptcha-text {
            font-size: 14px;
            color: #000;
        }
        #modal .recaptcha-logo {
            display: flex;
            align-items: center;
            margin-left: auto;
            font-size: 10px;
            color: #999;
        }
        #modal .recaptcha-logo img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            border-radius: 50%; /* Чтобы сделать более похожим */
        }
        #modal .recaptcha-terms {
            text-align: right;
        }
        #modal .button {
            width: 100%;
            padding: 15px;
            background-color: #4570C5;
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            text-transform: uppercase;
            transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Добавляем плавный переход */
        }
        #modal .button:hover {
            background-color: #5a8de0; /* Осветлённый оттенок */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень для эффекта */
        }


        body > footer > div > div.footer-text{
            color: inherit;
        }