:root {
    --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
    --transition-default: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-bs-theme="light"] {
    --bg-soft: #f8fafd;
    --card-border: rgba(0,20,40,0.06);
    --text-muted-custom: #2c3e50;
    --glow: rgba(13,110,253,0.12);
}

[data-bs-theme="dark"] {
    --bg-soft: #0f1419;
    --card-border: rgba(255,255,255,0.06);
    --text-muted-custom: #9aa8b9;
    --glow: rgba(13,110,253,0.25);
    --bs-body-bg: #0a0c10;
}
/* ============================================ */
/* ОТЗЫВЫ - МОБИЛЬНАЯ ВЕРСИЯ (КАРУСЕЛЬ) */
/* ============================================ */

.review-card-mobile {
    background: var(--bs-body-bg);
    border: 1px solid var(--card-border);
    border-radius: 1.5rem;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.review-card-mobile .review-rating {
    font-size: 1rem;
}

.review-text-mobile {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--bs-body-color);
    flex: 1;
    margin-bottom: 0.5rem;
}

.review-author-mobile strong {
    font-size: 0.95rem;
}

.review-author-mobile .text-muted-custom {
    font-size: 0.8rem;
}

/* Карусель отзывов - мобильная */
#reviewsCarouselMobile {
    padding: 0 20px;
}

#reviewsCarouselMobile .carousel-item {
    padding: 0 5px;
}

#reviewsCarouselMobile .carousel-indicators {
    gap: 4px;
}

#reviewsCarouselMobile .carousel-indicators button {
    transition: all 0.3s ease;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--card-border) !important;
    opacity: 1 !important;
    margin: 0 4px !important;
    padding: 0 !important;
}

#reviewsCarouselMobile .carousel-indicators button.active {
    background: #0d6efd !important;
    transform: scale(1.2);
}

#reviewsCarouselMobile .carousel-control-prev,
#reviewsCarouselMobile .carousel-control-next {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.9) !important;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    opacity: 0.8;
    top: 50%;
    transform: translateY(-50%);
}

#reviewsCarouselMobile .carousel-control-prev:hover,
#reviewsCarouselMobile .carousel-control-next:hover {
    opacity: 1;
    background: #fff !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

#reviewsCarouselMobile .carousel-control-prev-icon,
#reviewsCarouselMobile .carousel-control-next-icon {
    background-image: none !important;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#reviewsCarouselMobile .carousel-control-prev-icon::after {
    content: "‹";
    font-size: 24px;
    font-weight: 700;
    color: #0d6efd;
    line-height: 1;
}

#reviewsCarouselMobile .carousel-control-next-icon::after {
    content: "›";
    font-size: 24px;
    font-weight: 700;
    color: #0d6efd;
    line-height: 1;
}

/* Адаптация для очень маленьких экранов */
@media (max-width: 400px) {
    .review-card-mobile {
        padding: 1.2rem !important;
        min-height: 180px;
    }
    .review-text-mobile {
        font-size: 0.85rem;
    }
    #reviewsCarouselMobile {
        padding: 0 10px;
    }
    #reviewsCarouselMobile .carousel-control-prev,
    #reviewsCarouselMobile .carousel-control-next {
        width: 28px;
        height: 28px;
    }
    #reviewsCarouselMobile .carousel-control-prev {
        margin-left: -10px;
    }
    #reviewsCarouselMobile .carousel-control-next {
        margin-right: -10px;
    }
}

/* Планшеты */
@media (min-width: 576px) and (max-width: 991px) {
    .review-card-mobile {
        min-height: 200px;
    }
    #reviewsCarouselMobile .carousel-control-prev,
    #reviewsCarouselMobile .carousel-control-next {
        width: 36px;
        height: 36px;
    }
}
body {
    transition: background-color 0.2s, color 0.2s;
    font-feature-settings: "salt" on, "liga" on;
}

.bg-soft {
    background-color: var(--bg-soft) !important;
    transition: background-color 0.2s;
}

.navbar-blur {
    backdrop-filter: blur(14px);
    background-color: rgba(var(--bs-body-bg-rgb), 0.7) !important;
    border-bottom: 1px solid var(--card-border);
}

.gradient-text {
    background: linear-gradient(145deg, #0d6efd, #0b5ed7, #0a58ca);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

.service-card, .project-card, .partner-card, .stat-card {
    border-radius: 2rem;
    border: 1px solid var(--card-border);
    background: var(--bs-body-bg);
    transition: var(--transition-default);
    height: 100%;
    padding: 2rem 1.5rem;
}
.stat-card {
    border-radius: 1.5rem;
    padding: 1.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
    height: 100%;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -10px var(--glow);
}
.service-card:hover, .project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 35px -12px var(--glow);
    border-color: rgba(13,110,253,0.3);
}

.legal-block {
    background: var(--bg-soft);
    border-radius: 2rem;
    padding: 2rem;
    border: 1px solid var(--card-border);
}

.service-icon {
    font-size: 2.5rem;
    color: #0d6efd;
    margin-bottom: 1.2rem;
}

.theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-border);
}

.hero-gradient {
    background: radial-gradient(circle at 70% 30%, rgba(13,110,253,0.1) 0%, transparent 60%);
}

.section-divider {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #0d6efd, transparent);
    margin: 1.5rem 0;
}

.active {
    color: #0d6efd !important;
    font-weight: 700;
}
/* ===== АНИМИРОВАННЫЙ ФОН СО СТЕКЛЯННЫМИ КРУГАМИ ===== */
.glass-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.glass-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, 
        rgba(13, 110, 253, 0.15) 0%, 
        rgba(13, 110, 253, 0.05) 50%, 
        rgba(13, 110, 253, 0) 80%);
    filter: blur(40px);
    animation: float 20s infinite ease-in-out;
    opacity: 0.7;
}

[data-bs-theme="dark"] .glass-circle {
    background: radial-gradient(circle at 30% 30%, 
        rgba(13, 110, 253, 0.2) 0%, 
        rgba(13, 110, 253, 0.08) 50%, 
        rgba(13, 110, 253, 0) 80%);
    filter: blur(50px);
}

.glass-circle-1 {
    width: 600px;
    height: 600px;
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.glass-circle-2 {
    width: 500px;
    height: 500px;
    top: 40%;
    right: -150px;
    animation-delay: 3s;
    animation-duration: 25s;
}

.glass-circle-3 {
    width: 400px;
    height: 400px;
    bottom: 10%;
    left: 10%;
    animation-delay: 1s;
    animation-duration: 18s;
    background: radial-gradient(circle at 70% 70%, 
        rgba(13, 110, 253, 0.12) 0%, 
        rgba(13, 110, 253, 0.03) 60%, 
        rgba(13, 110, 253, 0) 90%);
}

.glass-circle-4 {
    width: 350px;
    height: 350px;
    bottom: 30%;
    right: 20%;
    animation-delay: 5s;
    animation-duration: 22s;
    background: radial-gradient(circle at 20% 80%, 
        rgba(13, 110, 253, 0.1) 0%, 
        rgba(13, 110, 253, 0.02) 70%, 
        rgba(13, 110, 253, 0) 100%);
}

.glass-circle-5 {
    width: 700px;
    height: 700px;
    top: 20%;
    left: 30%;
    animation-delay: 2s;
    animation-duration: 30s;
    opacity: 0.4;
    background: radial-gradient(circle at 50% 50%, 
        rgba(13, 110, 253, 0.08) 0%, 
        rgba(13, 110, 253, 0.02) 60%, 
        rgba(13, 110, 253, 0) 90%);
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    25% {
        transform: translate(40px, -30px) scale(1.05);
        opacity: 0.7;
    }
    50% {
        transform: translate(20px, 40px) scale(0.95);
        opacity: 0.6;
    }
    75% {
        transform: translate(-30px, 20px) scale(1.02);
        opacity: 0.8;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
}

/* Стеклянные круги для секций */
.section-glass-bg {
    position: relative;
    overflow: hidden;
}

.section-glass-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, 
        rgba(13, 110, 253, 0.08) 0%, 
        transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Чтобы контент был поверх кругов */
.container, .row, .col-lg-*, .service-card, .stat-card, .legal-block, .navbar {
    position: relative;
    z-index: 2;
}

/* Декоративные круги за карточками */
.service-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%, 
        rgba(13, 110, 253, 0.03) 0%, 
        transparent 70%);
    border-radius: 2rem;
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: all 0.5s ease;
}

.service-card:hover::after {
    background: radial-gradient(circle at 30% 30%, 
        rgba(13, 110, 253, 0.08) 0%, 
        transparent 80%);
}
/* ===== ЭФФЕКТ СОТОВОЙ ВЫШКИ С ПАРАБОЛОИДНЫМИ ОКРУЖНОСТЯМИ ===== */
.tower-effect {
    position: absolute;
    top: 50%;
    right: 5%;
    width: 100%;
    height: 100%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.parabolic-circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(13, 110, 253, 0.2);
    box-shadow: 0 0 30px rgba(13, 110, 253, 0.2);
    animation: pulse-wave 4s infinite ease-in-out;
    transform-origin: center;
}

/* Параболоидные дуги (полуокружности) */
.parabolic-arc {
    position: absolute;
    width: 300px;
    height: 150px;
    border: 2px solid rgba(13, 110, 253, 0.25);
    border-radius: 50% / 100% 100% 0 0;
    border-bottom: none;
    box-shadow: 0 -10px 30px rgba(13, 110, 253, 0.2);
    animation: wave-arc 6s infinite alternate;
    transform-origin: center bottom;
}

.parabolic-arc-2 {
    width: 400px;
    height: 200px;
    border-color: rgba(13, 110, 253, 0.18);
    animation-delay: 1s;
    animation-duration: 7s;
}

.parabolic-arc-3 {
    width: 500px;
    height: 250px;
    border-color: rgba(13, 110, 253, 0.12);
    animation-delay: 2s;
    animation-duration: 8s;
}

.parabolic-arc-4 {
    width: 600px;
    height: 300px;
    border-color: rgba(13, 110, 253, 0.08);
    animation-delay: 3s;
    animation-duration: 9s;
}

/* Стеклянные круги (параболоиды вращения) */
.glass-paraboloid {
    position: absolute;
    width: 400px;
    height: 200px;
    background: radial-gradient(ellipse at 50% 0%, 
        rgba(13, 110, 253, 0.15) 0%, 
        rgba(13, 110, 253, 0.05) 40%, 
        transparent 80%);
    border-radius: 50%;
    filter: blur(30px);
    animation: float-paraboloid 10s infinite alternate;
    transform-origin: center top;
}

.glass-paraboloid-2 {
    width: 500px;
    height: 250px;
    background: radial-gradient(ellipse at 50% 0%, 
        rgba(13, 110, 253, 0.1) 0%, 
        rgba(13, 110, 253, 0.03) 50%, 
        transparent 85%);
    filter: blur(40px);
    animation-delay: 2s;
    animation-duration: 12s;
}

.glass-paraboloid-3 {
    width: 600px;
    height: 300px;
    background: radial-gradient(ellipse at 50% 0%, 
        rgba(13, 110, 253, 0.08) 0%, 
        rgba(13, 110, 253, 0.02) 60%, 
        transparent 90%);
    filter: blur(50px);
    animation-delay: 4s;
    animation-duration: 14s;
}

/* Концентрические окружности (как радиоволны) */
.concentric-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(13, 110, 253, 0.3);
    animation: expand-wave 8s infinite ease-out;
    opacity: 0;
}

.concentric-circle-1 {
    width: 200px;
    height: 200px;
    animation-delay: 0s;
}

.concentric-circle-2 {
    width: 300px;
    height: 300px;
    animation-delay: 1s;
}

.concentric-circle-3 {
    width: 400px;
    height: 400px;
    animation-delay: 2s;
}

.concentric-circle-4 {
    width: 500px;
    height: 500px;
    animation-delay: 3s;
}

/* Анимации */
@keyframes pulse-wave {
    0% {
        transform: scale(1);
        opacity: 0.4;
        border-width: 2px;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
        border-width: 3px;
    }
    100% {
        transform: scale(1);
        opacity: 0.4;
        border-width: 2px;
    }
}

@keyframes wave-arc {
    0% {
        transform: scale(1) rotate(-2deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(2deg);
        opacity: 0.6;
    }
    100% {
        transform: scale(1) rotate(-2deg);
        opacity: 0.3;
    }
}

@keyframes float-paraboloid {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) scale(1.05);
        opacity: 0.5;
    }
    100% {
        transform: translateY(10px) scale(0.98);
        opacity: 0.3;
    }
}

@keyframes expand-wave {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
        border-color: rgba(13, 110, 253, 0.5);
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
        border-color: rgba(13, 110, 253, 0);
    }
}

[data-bs-theme="dark"] .parabolic-arc {
    border-color: rgba(13, 110, 253, 0.35);
    box-shadow: 0 -10px 40px rgba(13, 110, 253, 0.3);
}

[data-bs-theme="dark"] .glass-paraboloid {
    background: radial-gradient(ellipse at 50% 0%, 
        rgba(13, 110, 253, 0.25) 0%, 
        rgba(13, 110, 253, 0.1) 40%, 
        transparent 80%);
}
/* ===== ХАОТИЧНЫЕ ЛИНИИ СИГНАЛА (СЛЕВА) ===== */
.signal-lines-container {
    position: absolute;
    top: 0;
    left: -50px;
    width: 300px;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

/* Вертикальные линии сигнала */
.signal-line-vertical {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(13, 110, 253, 0.8) 20%, 
        rgba(13, 110, 253, 0.8) 80%, 
        transparent 100%);
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.6);
    animation: move-vertical 8s infinite linear;
    opacity: 0;
}

/* Горизонтальные линии (пересекающие) */
.signal-line-horizontal {
    position: absolute;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(13, 110, 253, 0.6) 30%, 
        rgba(13, 110, 253, 0.6) 70%, 
        transparent 100%);
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.4);
    animation: move-horizontal 10s infinite linear;
    opacity: 0;
}

/* Диагональные линии */
.signal-line-diagonal {
    position: absolute;
    width: 2px;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(13, 110, 253, 0.5) 50%, 
        transparent 100%);
    transform: rotate(45deg);
    box-shadow: 0 0 20px rgba(13, 110, 253, 0.3);
    animation: move-diagonal 12s infinite linear;
    opacity: 0;
}

/* Пучки линий (множественные) */
.signal-beam {
    position: absolute;
    width: 100px;
    height: 100%;
    background: repeating-linear-gradient(90deg, 
        transparent,
        transparent 10px,
        rgba(13, 110, 253, 0.1) 10px,
        rgba(13, 110, 253, 0.1) 12px,
        transparent 12px,
        transparent 20px);
    animation: move-beam 15s infinite linear;
}

/* Частицы данных (точки) */
.data-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(13, 110, 253, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.8);
    animation: move-particle 6s infinite ease-in-out;
}

/* Импульсы сигнала */
.signal-pulse {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, 
        rgba(13, 110, 253, 0.8) 0%, 
        rgba(13, 110, 253, 0.2) 70%, 
        transparent 100%);
    border-radius: 50%;
    animation: pulse-signal 4s infinite ease-out;
}

/* АНИМАЦИИ */
@keyframes move-vertical {
    0% {
        transform: translateY(-100%) translateX(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(200%) translateX(50px);
        opacity: 0;
    }
}

@keyframes move-vertical-reverse {
    0% {
        transform: translateY(100%) translateX(0);
        opacity: 0;
    }
    20% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-200%) translateX(-30px);
        opacity: 0;
    }
}

@keyframes move-horizontal {
    0% {
        transform: translateX(-100%) translateY(0);
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        transform: translateX(200%) translateY(50px);
        opacity: 0;
    }
}

@keyframes move-diagonal {
    0% {
        transform: translate(-100%, -100%) rotate(45deg);
        opacity: 0;
    }
    20% {
        opacity: 0.5;
    }
    80% {
        opacity: 0.5;
    }
    100% {
        transform: translate(200%, 200%) rotate(45deg);
        opacity: 0;
    }
}

@keyframes move-beam {
    0% {
        transform: translateX(-100%);
        opacity: 0.2;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: translateX(200%);
        opacity: 0.2;
    }
}

@keyframes move-particle {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--move-x, 100px), var(--move-y, -100px));
        opacity: 0;
    }
}

@keyframes pulse-signal {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Цифровой шум (мелкие точки) */
.digital-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(13,110,253,0.1) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(13,110,253,0.1) 1px, transparent 1px),
        radial-gradient(circle at 40% 90%, rgba(13,110,253,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: noise-flicker 8s infinite;
    opacity: 0.2;
}

@keyframes noise-flicker {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
}

[data-bs-theme="dark"] .signal-line-vertical {
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(13, 110, 253, 1) 20%, 
        rgba(13, 110, 253, 1) 80%, 
        transparent 100%);
    box-shadow: 0 0 20px rgba(13, 110, 253, 0.9);
}

[data-bs-theme="dark"] .data-particle {
    background: rgba(13, 110, 253, 1);
    box-shadow: 0 0 20px rgba(13, 110, 253, 1);
}
/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */

/* Общие настройки для мобильных */
@media (max-width: 768px) {
    
    /* Уменьшаем размеры шрифтов */
    body {
        font-size: 14px;
    }
    
    h1.display-3, h1.display-4 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }
    
    h2.display-6 {
        font-size: 1.8rem !important;
    }
    
    .lead.fs-4 {
        font-size: 1.1rem !important;
    }
    
    /* Уменьшаем отступы */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .mt-5 {
        margin-top: 2rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    /* Навбар для мобильных */
    .navbar-brand {
        gap: 6px !important;
    }
    
    .logo-img {
        height: 30px !important;
    }
    
    .brand-text {
        font-size: 1rem !important;
    }
    
    .navbar-nav {
        padding: 1rem 0;
    }
    
    .nav-link {
        padding: 0.8rem 1rem !important;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(13,110,253,0.1);
    }
    
    .nav-link:last-child {
        border-bottom: none;
    }
    
    /* Кнопки */
    .btn-lg {
        padding: 0.6rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .d-flex.gap-3 {
        gap: 0.5rem !important;
        flex-direction: column;
    }
    
    /* Карточки */
    .service-card, .project-card-premium, .contacts-premium-card, .form-premium-card {
        padding: 1.5rem !important;
        border-radius: 1.5rem !important;
    }
    
    .service-card h4 {
        font-size: 1.2rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .service-icon {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Статистика */
    .stat-card, .stat-premium, .project-stat {
        padding: 1rem !important;
    }
    
    .stat-card h2, .stat-premium h2, .project-stat h2 {
        font-size: 1.8rem !important;
    }
    
    /* Контакты */
    .contact-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.8rem !important;
        padding: 1rem !important;
    }
    
    .contact-icon-wrapper {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
    }
    
    /* Форма */
    .premium-input {
        padding: 0.8rem 1rem !important;
        font-size: 0.95rem !important;
    }
    
    .btn-premium {
        padding: 0.8rem !important;
        font-size: 1rem !important;
    }
    
    /* Проекты */
    .project-item {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 1.2rem !important;
    }
    
    .project-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
    }
    
    .project-number {
        font-size: 3rem !important;
        top: 10px !important;
        right: 15px !important;
    }
    
    /* Реквизиты */
    .col-lg-2, .col-lg-3, .col-lg-7 {
        text-align: center !important;
    }
    
    /* Карта */
    .map-stylized {
        padding: 1.2rem !important;
    }
    
    .map-stylized iframe {
        height: 250px !important;
    }
    
    /* Таблицы */
    .table {
        font-size: 0.9rem;
    }
    
    .table td {
        padding: 0.5rem !important;
    }
    
    /* Бейджи */
    .badge {
        font-size: 0.8rem !important;
        padding: 0.4rem 1rem !important;
    }
    
    /* Преимущества */
    .advantage-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.8rem !important;
    }
    
    /* Фоновые анимации (уменьшаем интенсивность) */
    .glass-circle, .radio-wave-simple, .floating-circle {
        opacity: 0.3 !important;
    }
    
    /* Отключаем некоторые анимации на мобильных для производительности */
    .project-card-premium:hover {
        transform: none !important;
    }
    
    /* Корректировка колонок */
    .row.g-4 {
        --bs-gutter-y: 1rem;
    }
    
    .col-md-6, .col-lg-4 {
        width: 100%;
    }
}

/* Специально для очень маленьких экранов */
@media (max-width: 480px) {
    h1.display-3, h1.display-4 {
        font-size: 1.8rem !important;
    }
    
    h2.display-6 {
        font-size: 1.5rem !important;
    }
    
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .logo-img {
        height: 25px !important;
    }
    
    .brand-text {
        font-size: 0.9rem !important;
    }
    
    .theme-toggle {
        width: 35px !important;
        height: 35px !important;
    }
    
    .service-card, .project-card-premium {
        padding: 1.2rem !important;
    }
    
    /* Скрываем некоторые декоративные элементы на очень маленьких */
    .glass-circle-5, .radio-wave-3 {
        display: none;
    }
}

/* Горизонтальная ориентация на телефонах */
@media (max-width: 768px) and (orientation: landscape) {
    .min-vh-100 {
        min-height: auto !important;
        padding: 1rem 0;
    }
    
    .row.align-items-center {
        min-height: auto !important;
    }
}




/* Стили для карточек новостей */
.news-card {
    border-radius: 2rem;
    border: 1px solid var(--card-border);
    background: var(--bs-body-bg);
    transition: var(--transition-default);
    height: 100%;
    padding: 1.5rem;
}
.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 35px -12px var(--glow);
    border-color: rgba(13,110,253,0.3);
}

/* Премиальные карточки для контактов */
.contacts-premium-card, .form-premium-card {
    background: rgba(var(--bs-body-bg-rgb), 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(13, 110, 253, 0.25);
    border-radius: 3rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
    transition: all 0.4s;
    height: 100%;
}
.contacts-premium-card:hover, .form-premium-card:hover {
    border-color: rgba(13, 110, 253, 0.5);
    box-shadow: 0 40px 80px rgba(13, 110, 253, 0.2);
    transform: translateY(-10px);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.2rem;
    border-radius: 1.5rem;
    transition: all 0.3s;
    margin-bottom: 0.5rem;
}
.contact-item:hover {
    background: rgba(13, 110, 253, 0.1);
    transform: translateX(10px);
}
.contact-icon-wrapper {
    width: 70px;
    height: 70px;
    background: rgba(13, 110, 253, 0.15);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #0d6efd;
    flex-shrink: 0;
}

/* Кнопка темы */
.theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--bs-body-color);
}
.theme-toggle:hover {
    background: rgba(13,110,253,0.1);
}

/* Добавьте в конец файла */

.project-card-premium {
    border-radius: 2rem;
    border: 1px solid var(--card-border);
    background: var(--bs-body-bg);
    transition: var(--transition-default);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.project-card-premium:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 35px -12px var(--glow);
    border-color: rgba(13,110,253,0.3);
}

.project-icon {
    width: 80px;
    height: 80px;
    background: rgba(13,110,253,0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-premium {
    background: rgba(var(--bs-body-bg-rgb), 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(13, 110, 253, 0.15);
    border-radius: 1.8rem;
    transition: all 0.4s;
}

.stat-premium:hover {
    border-color: rgba(13, 110, 253, 0.4);
    transform: scale(1.05);
    background: rgba(var(--bs-body-bg-rgb), 0.8);
}

.advantage-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.5rem;
    background: rgba(var(--bs-body-bg-rgb), 0.4);
    backdrop-filter: blur(5px);
    border-radius: 1.2rem;
    border: 1px solid rgba(13, 110, 253, 0.1);
    transition: all 0.3s;
}

.advantage-item:hover {
    background: rgba(var(--bs-body-bg-rgb), 0.7);
    border-color: rgba(13, 110, 253, 0.3);
    transform: translateX(10px);
}

.advantage-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(13,110,253,0.2), rgba(13,110,253,0.05));
    border-radius: 1rem;
    font-size: 1.8rem;
    color: #0d6efd;
}

.premium-card {
    background: rgba(var(--bs-body-bg-rgb), 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: 2.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.5s;
    height: 100%;
}

.premium-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(13, 110, 253, 0.15);
    border-color: rgba(13, 110, 253, 0.4);
}

[data-bs-theme="dark"] .premium-card {
    background: rgba(10, 12, 16, 0.8);
}


/* Премиум кнопки */
.btn-premium {
    background: linear-gradient(45deg, #0d6efd, #0b5ed7);
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 3rem;
    border: none;
    font-weight: 600;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}
.btn-premium:hover::before {
    left: 100%;
}
.btn-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(13,110,253,0.5);
}

/* Премиум инпуты */
.premium-input {
    background: var(--bs-body-bg);
    border: 2px solid var(--card-border);
    border-radius: 3rem;
    padding: 1rem 1.5rem;
    color: var(--bs-body-color);
    transition: all 0.3s;
}
.premium-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 4px rgba(13,110,253,0.1);
    outline: none;
}

/* Стили для breadcrumbs */
.breadcrumb {
    background: rgba(13,110,253,0.05);
    padding: 1rem 2rem;
    border-radius: 3rem;
    border: 1px solid var(--card-border);
}
.breadcrumb a {
    color: var(--bs-body-color);
    transition: color 0.3s;
}
.breadcrumb a:hover {
    color: #0d6efd;
}

/* Анимированные фоны для разделов */
.section-wave {
    position: relative;
    overflow: hidden;
}
.section-wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(135deg, rgba(13,110,253,0.1) 25%, transparent 25%) -50px 0,
                linear-gradient(225deg, rgba(13,110,253,0.1) 25%, transparent 25%) -50px 0;
    background-size: 100px 100px;
    opacity: 0.3;
    pointer-events: none;
}

/* Флоутирующие элементы */
.floating-shape {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,110,253,0.1) 0%, transparent 70%);
    animation: float-shape 15s infinite ease-in-out;
    pointer-events: none;
    z-index: 0;
}
@keyframes float-shape {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.1); }
    66% { transform: translate(-20px, 30px) scale(0.9); }
}

/* Эффект свечения для активных элементов */
.glow-effect {
    position: relative;
}
.glow-effect::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #0d6efd, #00d4ff);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}
.glow-effect:hover::after {
    opacity: 0.5;
    filter: blur(10px);
}

/* Модальное окно */
.modal-premium .modal-content {
    background: var(--bs-body-bg);
    border: 1px solid var(--card-border);
    border-radius: 3rem;
    backdrop-filter: blur(20px);
}
.modal-premium .modal-header {
    border-bottom: 1px solid var(--card-border);
    padding: 2rem;
}
.modal-premium .modal-body {
    padding: 2rem;
}
.modal-premium .modal-footer {
    border-top: 1px solid var(--card-border);
    padding: 2rem;
}

/* Анимация появления карточек */
@keyframes card-appear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.card-animate {
    animation: card-appear 0.6s ease-out forwards;
}

/* Стили для уведомлений */
.custom-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--bs-body-bg);
    border: 1px solid var(--card-border);
    border-radius: 2rem;
    padding: 1.5rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    z-index: 9999;
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* Добавить в конец style.css */

/* Стили для iframe камер */
.camera-iframe {
    transition: all 0.3s;
}
.camera-iframe:hover {
    transform: scale(1.02);
}

/* Анимация для LIVE индикатора */
@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.live-badge, .live-badge-sm {
    animation: pulse-live 2s infinite;
}

/* Полноэкранный режим */
.camera-frame:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    background: #000;
}
.camera-frame:-webkit-full-screen .camera-iframe {
    width: 100vw;
    height: 100vh;
}

/* Стили для копирования ссылки */
.copy-link-btn {
    transition: all 0.2s;
}
.copy-link-btn:active {
    transform: scale(0.95);
}

/* Градиентный фон для секций с камерами */
.cameras-section {
    position: relative;
    overflow: hidden;
}
.cameras-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(13,110,253,0.03) 0%, transparent 70%);
    animation: rotate 60s linear infinite;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Кастомный скроллбар для списка камер */
.cameras-grid::-webkit-scrollbar {
    width: 8px;
}
.cameras-grid::-webkit-scrollbar-track {
    background: var(--card-border);
    border-radius: 10px;
}
.cameras-grid::-webkit-scrollbar-thumb {
    background: #0d6efd;
    border-radius: 10px;
}

/* ===== ПРОФЕССИОНАЛЬНЫЙ ТЕЛЕКОМ-ДИЗАЙН ===== */
/* Вместо игрушечных анимаций */

/* 1. Градиентный фон (как чистое небо/связь) */
.telecom-gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
}

.gradient-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.layer-1 {
    background: linear-gradient(125deg, 
        rgba(13, 110, 253, 0.02) 0%, 
        rgba(13, 110, 253, 0.05) 25%, 
        rgba(13, 110, 253, 0.02) 50%,
        rgba(13, 110, 253, 0.05) 75%,
        rgba(13, 110, 253, 0.02) 100%);
    background-size: 200% 200%;
    animation: gradientFlow 20s ease infinite;
}

.layer-2 {
    background: radial-gradient(circle at 30% 40%, 
        rgba(13, 110, 253, 0.03) 0%, 
        transparent 50%);
    animation: pulseGlow 15s ease infinite;
}

.layer-3 {
    background: radial-gradient(circle at 70% 60%, 
        rgba(13, 110, 253, 0.02) 0%, 
        transparent 60%);
    animation: pulseGlow 18s ease infinite reverse;
}

@keyframes gradientFlow {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* 2. Сигнальные волны (как связь, радар) */
.signal-waves-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.15;
}

.signal-wave {
    position: absolute;
    border: 1px solid rgba(13, 110, 253, 0.3);
    border-radius: 50%;
    animation: expandWave 8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    opacity: 0;
}

.wave-1 { width: 100px; height: 100px; top: 20%; left: 10%; }
.wave-2 { width: 200px; height: 200px; top: 50%; right: 15%; animation-delay: 2s; }
.wave-3 { width: 150px; height: 150px; bottom: 20%; left: 30%; animation-delay: 4s; }
.wave-4 { width: 300px; height: 300px; top: 30%; right: 30%; animation-delay: 6s; }
.wave-5 { width: 250px; height: 250px; bottom: 10%; right: 20%; animation-delay: 8s; }

@keyframes expandWave {
    0% {
        transform: scale(0.3);
        opacity: 0.3;
        border-width: 2px;
    }
    50% {
        opacity: 0.2;
        border-width: 1px;
    }
    100% {
        transform: scale(2);
        opacity: 0;
        border-width: 0.5px;
    }
}

/* 3. Линии связи (оптоволокно) */
.connection-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.1;
}

.connection-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(13, 110, 253, 0.5), 
        transparent);
    animation: fadeLine 10s ease infinite;
}

@keyframes fadeLine {
    0%, 100% { opacity: 0; transform: scaleX(0.5); }
    50% { opacity: 1; transform: scaleX(1); }
}

/* 4. Частицы данных (минималистичные) */
.data-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.1;
}

.data-particle-minimal {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #0d6efd;
    border-radius: 50%;
    animation: floatParticle 20s linear infinite;
}

@keyframes floatParticle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translate(100px, -100px) scale(0.5);
        opacity: 0;
    }
}

/* 5. Анимация для карточек (профессиональная) */
.service-card, .project-card, .stat-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(13, 110, 253, 0.1), 
        transparent);
    transition: left 0.5s;
}

.service-card:hover::before {
    left: 100%;
}

.stat-card {
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(13, 110, 253, 0.1);
}

/* 6. Анимация скорости для загрузки */
.speed-line {
    position: relative;
    height: 2px;
    background: linear-gradient(90deg, #0d6efd, #00ff88);
    animation: speedScan 2s ease infinite;
    opacity: 0.3;
}

@keyframes speedScan {
    0% { width: 0%; opacity: 0.3; }
    50% { width: 100%; opacity: 0.8; }
    100% { width: 0%; opacity: 0.3; }
}

/* 7. Анимация для заголовков */
.gradient-text {
    background: linear-gradient(135deg, #0d6efd, #0099ff, #0d6efd);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: textGradient 5s ease infinite;
}

@keyframes textGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 8. Микро-анимации для интерактивности */
.btn {
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #0d6efd;
    transition: all 0.3s;
    transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 80%;
}
/* ============================================
   ТЕМНАЯ ТЕМА - ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ
   ============================================ */

[data-bs-theme="dark"] {
    /* Базовые цвета */
    --bs-body-bg: #0a0c10;
    --bs-body-color: #e8edf5;
    --card-border: rgba(255,255,255,0.06);
    --text-muted-custom: #9aa8b9;
    --glow: rgba(13,110,253,0.3);
    
    /* Дополнительные эффекты */
    --neon-glow: 0 0 30px rgba(13, 110, 253, 0.15);
    --signal-color: rgba(100, 180, 255, 0.3);
}

/* Свечение для карточек в темной теме */
[data-bs-theme="dark"] .tariff-card {
    background: rgba(20, 25, 35, 0.8);
    backdrop-filter: blur(10px);
    border-color: rgba(100, 180, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .tariff-card:hover {
    border-color: rgba(100, 180, 255, 0.3);
    box-shadow: 0 8px 40px rgba(13, 110, 253, 0.2), var(--neon-glow);
}

[data-sb-theme="dark"] .tariff-card.premium {
    background: linear-gradient(145deg, rgba(20, 30, 50, 0.9), rgba(13, 110, 253, 0.1));
    border-color: rgba(13, 110, 253, 0.3);
}

/* Свечение для кнопок в темной теме */
[data-bs-theme="dark"] .btn-primary {
    box-shadow: 0 0 25px rgba(13, 110, 253, 0.2);
}

[data-bs-theme="dark"] .btn-primary:hover {
    box-shadow: 0 0 40px rgba(13, 110, 253, 0.4);
}

/* Свечение для инпутов в темной теме */
[data-bs-theme="dark"] .premium-input {
    background: rgba(20, 25, 35, 0.8);
    border-color: rgba(100, 180, 255, 0.15);
    color: #e8edf5;
}

[data-bs-theme="dark"] .premium-input:focus {
    border-color: rgba(100, 180, 255, 0.5);
    box-shadow: 0 0 30px rgba(13, 110, 253, 0.15);
}

/* Стеклянный эффект для карточек */
[data-bs-theme="dark"] .glass-card {
    background: rgba(20, 30, 50, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(100, 180, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Пульсирующая подсветка для активных элементов */
[data-bs-theme="dark"] .pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(13, 110, 253, 0.1); }
    50% { box-shadow: 0 0 40px rgba(13, 110, 253, 0.3); }
}

/* Градиентные линии в темной теме */
[data-bs-theme="dark"] .gradient-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(100, 180, 255, 0.3), transparent);
    animation: scanLine 4s ease-in-out infinite;
}

@keyframes scanLine {
    0% { transform: scaleX(0); opacity: 0; }
    50% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(0); opacity: 0; }
}

/* Свечение для заголовков в темной теме */
[data-bs-theme="dark"] .gradient-text {
    background: linear-gradient(135deg, #6eb8ff, #4dabf7, #3395ff, #4dabf7);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: textGlow 4s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Эффект неона для границ */
[data-bs-theme="dark"] .neon-border {
    position: relative;
    border: 1px solid transparent;
}

[data-bs-theme="dark"] .neon-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.3), transparent, rgba(13, 110, 253, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: neonPulse 3s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Стили для модального окна в темной теме */
[data-bs-theme="dark"] .modal-content {
    background: rgba(15, 20, 30, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(100, 180, 255, 0.1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8);
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: rgba(100, 180, 255, 0.1);
}

/* Стили для навбара в темной теме */
[data-bs-theme="dark"] .navbar-blur {
    background: rgba(10, 12, 16, 0.85) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(100, 180, 255, 0.05);
}

[data-bs-theme="dark"] .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] .navbar-nav .nav-link:hover {
    color: #ffffff;
    background: rgba(100, 180, 255, 0.1);
}

[data-bs-theme="dark"] .navbar-nav .nav-link.active {
    background: rgba(13, 110, 253, 0.3);
    color: white !important;
}

/* Стили для скроллбара в темной теме */
[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(20, 25, 35, 0.5);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(13, 110, 253, 0.4);
    border-radius: 10px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 110, 253, 0.6);
}

/* Отзывы в темной теме */
[data-bs-theme="dark"] .review-card {
    background: rgba(20, 25, 35, 0.6);
    backdrop-filter: blur(10px);
    border-color: rgba(100, 180, 255, 0.08);
}

[data-bs-theme="dark"] .review-card:hover {
    border-color: rgba(100, 180, 255, 0.2);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* FAQ в темной теме */
[data-bs-theme="dark"] .faq-item {
    background: rgba(20, 25, 35, 0.6);
    backdrop-filter: blur(10px);
    border-color: rgba(100, 180, 255, 0.08);
}

[data-bs-theme="dark"] .faq-item:hover {
    border-color: rgba(100, 180, 255, 0.2);
}

/* Блоки со статистикой */
[data-bs-theme="dark"] .stat-card {
    background: rgba(20, 25, 35, 0.5);
    backdrop-filter: blur(10px);
    border-color: rgba(100, 180, 255, 0.08);
}

[data-bs-theme="dark"] .stat-card:hover {
    border-color: rgba(100, 180, 255, 0.2);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* Акции и CTA блоки */
[data-bs-theme="dark"] .cta-card {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.3), rgba(10, 12, 16, 0.9)) !important;
    border: 1px solid rgba(100, 180, 255, 0.2);
}

/* Технические линии (декоративные) */
[data-bs-theme="dark"] .tech-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(100, 180, 255, 0.2), transparent);
    margin: 2rem 0;
}

/* Кнопка переключения темы */
[data-bs-theme="dark"] .theme-toggle {
    border-color: rgba(100, 180, 255, 0.2);
    color: #e8edf5;
}

[data-bs-theme="dark"] .theme-toggle:hover {
    background: rgba(100, 180, 255, 0.1);
    border-color: rgba(100, 180, 255, 0.4);
}

/* Подвал в темной теме */
[data-bs-theme="dark"] footer {
    border-top-color: rgba(100, 180, 255, 0.05) !important;
}

[data-bs-theme="dark"] footer .text-muted-custom {
    color: #7a8a9e !important;
}

[data-bs-theme="dark"] footer a.text-muted-custom:hover {
    color: #6eb8ff !important;
}

/* Адаптивность для темной темы */
@media (max-width: 768px) {
    [data-bs-theme="dark"] .navbar-blur {
        background: rgba(10, 12, 16, 0.95) !important;
    }
}
/* Стили для навигационных вкладок тарифов */
.tariff-tabs-alt .nav-link {
    color: var(--bs-body-color) !important;
    transition: all 0.3s ease;
    padding: 0.7rem 1.8rem;
    border-radius: 3rem;
}

.tariff-tabs-alt .nav-link:hover {
    color: #0d6efd !important;
    background: rgba(13, 110, 253, 0.08);
}

.tariff-tabs-alt .nav-link.active {
    color: #ffffff !important;
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    font-weight: 600;
}

/* Для темной темы */
[data-bs-theme="dark"] .tariff-tabs-alt .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-bs-theme="dark"] .tariff-tabs-alt .nav-link:hover {
    color: #6eb8ff !important;
    background: rgba(100, 180, 255, 0.1);
}

[data-bs-theme="dark"] .tariff-tabs-alt .nav-link.active {
    color: #ffffff !important;
    background: #0d6efd !important;
    box-shadow: 0 0 30px rgba(13, 110, 253, 0.3);
}
/* ============================================
   БАННЕРЫ - КАРТОЧКИ С ТЕКСТОМ И КНОПКОЙ
   ============================================ */
.banners-section {
    background: var(--bg-soft);
    border-top: 1px solid var(--card-border);
}

.banner-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(13, 110, 253, 0.12);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--card-border);
    aspect-ratio: 16 / 10;
    cursor: default;
}

.banner-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 25px 60px rgba(13, 110, 253, 0.20);
    border-color: rgba(13, 110, 253, 0.3);
}

.banner-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.banner-card:hover .banner-card-img {
    transform: scale(1.05);
}

.banner-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.banner-card-placeholder i {
    opacity: 0.5;
    font-size: 3rem;
}

.banner-card-placeholder span {
    font-size: 0.9rem;
    opacity: 0.7;
}

.banner-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1.5rem 1.2rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.banner-card:hover .banner-card-overlay {
    opacity: 1;
}

@media (max-width: 768px) {
    .banner-card-overlay {
        opacity: 1;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
    }
    .banner-card {
        aspect-ratio: 16 / 9;
    }
}

.banner-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.banner-card-subtitle {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 0.3rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.banner-card-text {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.banner-card-content .btn-light {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 1.2rem;
}

.banner-card-content .btn-light:hover {
    background: #fff;
    transform: scale(1.05);
}

.carousel-card-grid .carousel-inner {
    padding: 0.25rem 0;
}

.carousel-card-grid .carousel-indicators {
    gap: 8px;
}

.carousel-card-grid .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--card-border);
    opacity: 0.6;
    transition: all 0.3s;
    margin: 0 4px;
}

.carousel-card-grid .carousel-indicators button.active {
    background: #0d6efd;
    opacity: 1;
    transform: scale(1.2);
}

.carousel-card-grid .carousel-indicators button:hover {
    transform: scale(1.15);
    opacity: 0.9;
}

.carousel-card-grid .carousel-control-prev,
.carousel-card-grid .carousel-control-next {
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    opacity: 0.7;
    transition: all 0.3s;
    margin: 0 8px;
}

.carousel-card-grid .carousel-control-prev:hover,
.carousel-card-grid .carousel-control-next:hover {
    opacity: 1;
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}

.carousel-card-grid .carousel-control-prev-icon,
.carousel-card-grid .carousel-control-next-icon {
    filter: invert(0.3);
}
/* Промо-баннеры на главной */
.promo-banner {
    position: relative;
    overflow: hidden;
    border-radius: 3rem;
    min-height: 200px;
}

.promo-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.promo-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.promo-banner-content {
    position: relative;
    z-index: 2;
}

.promo-banner .btn-light {
    background: rgba(255,255,255,0.95);
    transition: all 0.3s;
}

.promo-banner .btn-light:hover {
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .promo-banner {
        border-radius: 2rem;
        min-height: 180px;
        padding: 2rem !important;
    }
    .promo-banner .display-6 {
        font-size: 1.5rem;
    }
    .promo-banner .lead {
        font-size: 1rem;
    }
}
/* Баннер на странице услуг */
.service-banner {
    position: relative;
    overflow: hidden;
    border-radius: 3rem;
    min-height: 180px;
}

.service-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.service-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.service-banner-content {
    position: relative;
    z-index: 2;
}

.service-banner .btn-light {
    background: rgba(255,255,255,0.95);
    transition: all 0.3s;
}

.service-banner .btn-light:hover {
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .service-banner {
        border-radius: 2rem;
        min-height: 150px;
        padding: 2rem !important;
    }
    .service-banner .display-6 {
        font-size: 1.5rem;
    }
}