: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;
}

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: 2rem 0;
    }
    
    .row.align-items-center {
        min-height: auto !important;
    }
}