/* ---
=================================================
"СУПЕР НАВОРОЧЕННЫЙ" ДИЗАЙН V7 - "CYBER-RED" (Черно-красный)
=================================================
--- */

/* --- Базовые настройки и Шрифты --- */
:root {
    --bs-primary: #FF0033;
    /* "Cyber Red" (Кибер-красный) */
    --bs-primary-rgb: 255, 0, 51;
    --bs-dark-bg: #0a0a0a;
    /* Near Black (Почти черный) */
    --glass-bg: rgba(70, 0, 15, 0.4);
    /* Темно-красное "стекло" */
    --glass-border: rgba(255, 0, 51, 0.2);
    /* Едва заметная красная рамка */

    /* "Tech" шрифты */
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

body {
    font-family: var(--font-body);
    background-color: var(--bs-dark-bg);
    /* Глубокий градиентный фон */
    /* Меняем синие/голубые градиенты на красные */
    background-image: radial-gradient(circle at 10% 10%, rgba(var(--bs-primary-rgb), 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(150, 0, 10, 0.05) 0%, transparent 40%);
    background-attachment: fixed;
    color: #e0e0e0;
}

h1,
h2,
h3,
h4,
h5,
.navbar-brand {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* --- Градиентная кнопка (Красная) --- */
.btn-primary-gradient {
    background: linear-gradient(90deg, #FF0033 0%, #B00020 100%);
    /* Красный градиент */
    border: none;
    color: #ffffff;
    /* Белый текст для контраста с красным */
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb), 0.3);
    /* Красное свечение (из :root) */
}

.btn-primary-gradient:hover {
    color: #fff;
    box-shadow: 0 10px 25px rgba(var(--bs-primary-rgb), 0.5);
    transform: translateY(-3px);
}

/* --- Шапка (Header) --- */
.main-nav {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
}

/* --- Главный экран (Hero) --- */
.hero-section {
    position: relative;
    padding: 10rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bs-dark-bg);

    /* Меняем тонировку и сетку на красные */
    background-image:
        url('../img/umbrella_logo_blue.png'),
        /* Логотип остался, но тонировка его перекрасит */
        linear-gradient(rgba(var(--bs-primary-rgb), 0.2), rgba(10, 10, 10, 0.9)),
        /* Красный тонирующий оверлей */
        linear-gradient(rgba(var(--bs-primary-rgb), 0.05) 1px, transparent 1px),
        /* Красная сетка (из :root) */
        linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.05) 1px, transparent 1px);
    background-size:
        auto 130%,
        /* Размер логотипа */
        cover,
        30px 30px,
        /* Размер ячеек сетки */
        30px 30px;
    background-position:
        center center,
        center center,
        center center,
        center center;
    background-repeat:
        no-repeat,
        no-repeat,
        repeat,
        repeat;
    background-attachment: fixed;
    /* Эффект параллакса */
}

.hero-title {
    text-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.7);
    animation: glow 1.5s ease-in-out infinite alternate;
    /* Анимация свечения */
}

.hero-subtitle {
    font-weight: 300;
}

/* Анимация свечения (Красная) */
@keyframes glow {
    from {
        text-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.5), 0 0 20px rgba(var(--bs-primary-rgb), 0.3);
    }

    to {
        text-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.8), 0 0 30px rgba(var(--bs-primary-rgb), 0.6);
    }
}

/* --- Контент --- */
.content-album {
    background-color: transparent;
}

/* --- Анимация появления --- */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* ---
ИЗМЕНЕНО: "Стеклянные" Карточки (Glassmorphism) - V3 (ГЕКСАГОНЫ)
--- */

/* Контейнер для карточек-ссылок */
#services .card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    /* Устанавливаем тень на этот контейнер, чтобы она не обрезалась */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease-out;
    -webkit-tap-highlight-color: transparent;
    /* Убрать синюю вспышку на мобильных */
}

/* Сама "стеклянная" карточка */
#services .glass-card {
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    backdrop-filter: blur(8px);
    box-shadow: none;
    /* Тень теперь на .card-link */
    transition: all 0.3s ease-out;

    /* ВОТ ОНО: Превращаем карточку в гексагон */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    /* h-100 (из HTML) заставит bootstrap-сетку выровнять высоту,
       что идеально для гексагонов в ряду.
       Нам нужно убедиться, что контент хорошо сидит внутри. */
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Иконка внутри гексагона */
#services .icon-circle {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--bs-primary) 0%, #B00020 100%);
    /* Красный градиент */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb), 0.3);
}

/* Анимация при наведении */
#services .card-link:hover {
    /* Приподнимаем и увеличиваем всю ссылку (включая тень) */
    transform: translateY(-10px) scale(1.05);
    filter: drop-shadow(0 15px 30px rgba(var(--bs-primary-rgb), 0.4));
    /* Тень из :root */
}

#services .card-link:hover .glass-card {
    /* Активируем рамку и фон */
    border-color: var(--bs-primary);
    background: rgba(120, 0, 20, 0.6);
    /* Более насыщенный красный фон */
}

/* Текст внутри гексагона */
.card-service .card-title {
    color: #ffffff;
    font-weight: 700;
}

.card-service .card-text {
    color: #c0c0c0;
    font-weight: 300;
}

.btn-details {
    color: var(--bs-primary);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

#services .card-link:hover .btn-details {
    color: #fff;
    /* Делаем ярче при наведении */
    letter-spacing: 0.5px;
}


/* --- Отзывы (Testimonials) - Оставляем прямоугольными --- */
/* Прямоугольные карточки для отзывов и контактов */
#testimonials .glass-card,
#contact .glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}

#testimonials .glass-card:hover,
#contact .glass-card:hover {
    transform: translateY(-8px);
    border-color: var(--bs-primary);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.testimonial-card {
    border-left: 6px solid var(--bs-primary);
    /* Акцентная полоса */
    padding: 2.5rem;
}

.testimonial-card figcaption {
    color: var(--bs-primary);
}

/* --- Форма Контактов (Contact) --- */
.form-control-lg {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    color: #ffffff;
}

.form-control-lg:focus {
    background: rgba(0, 0, 0, 0.1);
    border-color: var(--bs-primary);
    box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.3);
    color: #ffffff;
}

.submit-btn {
    font-family: var(--font-heading);
}

/* --- Футер (Footer) --- */
.footer-section {
    background: #05080e;
    /* Оставляем очень темным, как фон body */
    border-top: 1px solid var(--glass-border);
}


/* ---
=================================================
    СТИЛИ ДЛЯ "ВАУ" СТРАНИЦ УСЛУГ (РЕТЕМИЗАЦИЯ - RED)
=================================================
--- */

/* --- Секция с анимацией (общая) --- */
.service-hero-animation,
.service-hero-monitoring,
.service-hero-storage,
.service-hero-backup,
.service-hero-cctv,
.service-hero-turnstile,
.service-hero-network,
.service-hero-pc-maint,
.service-hero-antivirus,
.service-hero-printer,
.service-hero-pc-assembly,
.service-hero-deploy,
.service-hero-1c,
.service-hero-monitoring-adv,
.service-hero-fiber,
.service-hero-branding {
    padding: 6rem 0;
    background-color: #0a0a0a;
    /* Темный фон для "ВАУ"-секций */
    border-bottom: 1px solid var(--glass-border);
}

.service-content-text {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
    /* Отступ от "ВАУ"-секции */
}

/* --- Общие для консолей --- */
.console-box {
    border-radius: 8px;
    overflow: hidden;
}

.console-header {
    background: #333;
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

.console-light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
}

.console-light.red {
    background: #ff5f56;
}

.console-light.amber {
    background: #ffbd2e;
}

.console-light.green {
    background: #27c93f;
}

.console-title {
    color: #ccc;
    font-size: 0.9rem;
    margin-left: auto;
}

.console-body {
    background: #000;
    font-family: 'Courier New', Courier, monospace;
    padding: 1.5rem;
    min-height: 350px;
    max-height: 350px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.console-body .typed-cursor {
    opacity: 1;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* .console-box-cyan (стили заменены на красные) */
.console-box-cyan .console-header {
    background: #600;
    /* Темно-красный */
}

.console-box-cyan .console-body {
    background: #1a0005;
    /* Очень темный красный/черный */
    color: var(--bs-primary);
}

.console-box-cyan .console-body .typed-cursor {
    color: var(--bs-primary);
}

/* .console-box-blue (стили заменены на красные) */
.console-box-blue {
    background: #600;
    /* Темно-красный */
}

.console-box-blue .console-body {
    background: #1a0005;
    /* Очень темный красный/черный */
    color: var(--bs-primary);
}

.console-box-blue .console-body .typed-cursor {
    color: var(--bs-primary);
}

/* Янтарный (Amber) оставляем - он хорошо сочетается с красным */
.console-box-amber .console-header {
    background: #a15c00;
}

.console-box-amber .console-body {
    background: #2b1a00;
    color: #ffaa00;
}

.console-box-amber .console-body .typed-cursor {
    color: #ffaa00;
}

.console-box .console-body .text-success {
    color: #00ff00;
}

.console-box .console-body .text-warning {
    color: #ffaa00;
}

.console-box .console-body .text-danger {
    color: #ff5f56;
}

/* --- ВАУ 1: Пусконаладка (Схема) --- */
@keyframes flow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

.server-diagram {
    position: relative;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.diagram-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.server-rack-diagram {
    background: #1a1a2e;
    /* Оставим темным */
    border: 1px solid #4a4a6e;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.2);
    /* Тень из :root */
    width: 150px;
}

.server-unit-diagram {
    background: #0d121c;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 15px 10px;
    text-align: center;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
}

.server-icon {
    font-size: 3rem;
    color: var(--bs-primary);
    /* Цвет из :root */
    margin-bottom: 10px;
}

.server-label-diagram {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: #eee;
    margin-bottom: 5px;
}

.server-lights-diagram {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.led-green-diagram,
.led-amber-diagram {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Зеленый (OK) оставляем */
.led-green-diagram {
    background: #00ff00;
    box-shadow: 0 0 8px #00ff00;
}

/* Янтарный (Warning) оставляем */
.led-amber-diagram {
    background: #ffaa00;
    box-shadow: 0 0 8px #ffaa00;
}

.led-green-diagram.blink {
    animation: blink-green 1s infinite;
}

@keyframes blink-green {
    0% {
        background: #00ff00;
        box-shadow: 0 0 8px #00ff00;
    }

    50% {
        background: #005000;
        box-shadow: none;
    }

    100% {
        background: #00ff00;
        box-shadow: 0 0 8px #00ff00;
    }
}

@keyframes blink-amber {
    0% {
        background: #ffaa00;
        box-shadow: 0 0 8px #ffaa00;
    }

    50% {
        background: #503300;
        box-shadow: none;
    }

    100% {
        background: #ffaa00;
        box-shadow: 0 0 8px #ffaa00;
    }
}

.led-green-diagram.blink-fast {
    animation: blink-green 0.3s infinite;
}

.led-amber-diagram.blink {
    animation: blink-amber 1.5s infinite;
}

.led-amber-diagram.blink-fast {
    animation: blink-amber 0.5s infinite;
}

.diagram-node {
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(var(--bs-primary-rgb), 0.1);
    /* Фон из :root */
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    /* Рамка из :root */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    box-shadow: 0 0 15px rgba(var(--bs-primary-rgb), 0.3);
    /* Тень из :root */
    backdrop-filter: blur(5px);
    z-index: 5;
    transition: all 0.3s ease;
}

.diagram-node:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(var(--bs-primary-rgb), 0.5);
    /* Тень из :root */
}

.node-icon {
    font-size: 2.5rem;
    color: var(--bs-primary);
    /* Цвет из :root */
    margin-bottom: 5px;
}

.node-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #eee;
}

.diagram-node.db {
    top: 10%;
    left: 15%;
}

.diagram-node.storage {
    top: 10%;
    right: 15%;
}

.diagram-node.network {
    bottom: 10%;
    left: 15%;
}

.diagram-node.security {
    bottom: 10%;
    right: 15%;
}

.connection {
    position: absolute;
    background-color: rgba(var(--bs-primary-rgb), 0.3);
    /* Цвет из :root */
    background-image: linear-gradient(90deg, transparent 50%, rgba(var(--bs-primary-rgb), 0.8) 50%);
    background-size: 20px 2px;
    animation: flow 1s linear infinite;
    z-index: 1;
    height: 2px;
    transform-origin: left center;
}

.conn-db {
    top: 25%;
    left: 35%;
    width: 15%;
    transform: rotate(0deg);
}

/* Примерные позиции */
.conn-storage {
    top: 25%;
    right: 35%;
    width: 15%;
    transform: rotate(0deg);
}

.conn-network {
    bottom: 25%;
    left: 35%;
    width: 15%;
    transform: rotate(0deg);
}

.conn-security {
    bottom: 25%;
    right: 35%;
    width: 15%;
    transform: rotate(0deg);
}

.tech-list {
    list-style: none;
    padding-left: 0;
}

.tech-list li {
    margin-bottom: 10px;
    font-size: 1.1rem;
    display: flex;
    align-items: flex-start;
    color: #e0e0e0;
}

.tech-list li i {
    margin-top: 5px;
}

/* --- ВАУ 2: Обслуживание (Дашборд) --- */
.monitoring-dashboard {
    height: 100%;
}

.chart-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.chart-title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: #aaa;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.chart-graph {
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, rgba(var(--bs-primary-rgb), 0.1), transparent);
    /* Фон из :root */
    position: relative;
    overflow: hidden;
}

.chart-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #fff;
    position: absolute;
    top: 0.75rem;
    right: 1rem;
}

.graph-line-cpu,
.graph-line-net {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, transparent, var(--bs-primary), #B00020, transparent);
    /* Заменили #007bff на темно-красный */
    background-size: 200% 100%;
    animation: pulse-graph 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.graph-line-cpu {
    clip-path: polygon(0% 60%, 10% 40%, 20% 50%, 30% 30%, 40% 45%, 50% 55%, 60% 70%, 70% 60%, 80% 50%, 90% 65%, 100% 75%, 100% 100%, 0% 100%);
}

.graph-line-net {
    animation-delay: -2s;
    clip-path: polygon(0% 50%, 10% 60%, 20% 55%, 30% 70%, 40% 60%, 50% 50%, 60% 40%, 70% 55%, 80% 65%, 90% 50%, 100% 60%, 100% 100%, 0% 100%);
}

@keyframes pulse-graph {
    0% {
        transform: translateX(-50%);
        opacity: 0.5;
    }

    50% {
        transform: translateX(0%);
        opacity: 1;
    }

    100% {
        transform: translateX(50%);
        opacity: 0.5;
    }
}

.service-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.status-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-light-text {
    font-size: 1.1rem;
    color: #eee;
}

.status-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.status-value.ok {
    color: #00ff00;
}

.status-value.warn {
    color: #ffaa00;
    animation: pulse-warn 1.5s infinite;
}

.status-value.critical {
    color: #ff5f56;
    animation: pulse-critical 1s infinite;
}

.status-value i {
    font-size: 0.8rem;
    text-shadow: 0 0 8px;
}

@keyframes pulse-warn {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes pulse-critical {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* --- ВАУ 3: Хранилище (Диски) --- */
.storage-array-visualization {
    min-height: 500px;
}

.storage-chassis {
    background: #1a1a2e;
    border: 1px solid #4a4a6e;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.2);
    /* Тень из :root */
}

.disk-bay {
    background: #0d121c;
    border: 1px solid #333;
    border-radius: 4px;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.disk-face {
    display: flex;
    align-items: center;
}

.disk-label {
    font-family: var(--font-heading);
    color: #aaa;
    margin-right: 1rem;
}

.disk-led {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00ff00;
    box-shadow: 0 0 8px #00ff00;
}

.disk-led.blink {
    animation: blink-green 1s infinite;
}

.disk-led.blink-fast {
    animation: blink-green 0.3s infinite;
}

.data-flow {
    width: 60%;
    height: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.data-block {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(90deg, var(--bs-primary) 0%, #B00020 100%);
    /* Заменили #007bff */
    box-shadow: 0 0 5px var(--bs-primary);
    border-radius: 1px;
    top: 1px;
    animation: data-flow-animation 2s linear infinite;
}

.data-block:nth-child(2) {
    animation-delay: -0.5s;
}

.data-block:nth-child(3) {
    animation-delay: -1.2s;
}

.data-block.parity {
    background: linear-gradient(90deg, #ffaa00 0%, #ffdd00 100%);
    box-shadow: 0 0 5px #ffaa00;
}

@keyframes data-flow-animation {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(1000%);
    }
}

.storage-stats-panel {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: #aaa;
    text-transform: uppercase;
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #fff;
    font-weight: 700;
}

.capacity-bar-bg {
    width: 100%;
    height: 20px;
    background: #0d121c;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 2px;
}

.capacity-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary) 0%, #B00020 100%);
    /* Заменили #007bff */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.5);
}

/* --- ВАУ 4: Бекапирование (Поток данных) --- */
.backup-visualization {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 400px;
}

.backup-node {
    flex: 1;
    min-height: 350px;
}

.node-icon-large {
    font-size: 5rem;
    margin-bottom: 1rem;
    color: #aaa;
}

.node-icon-large.text-primary {
    text-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.7);
    color: var(--bs-primary);
}

.data-core-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.data-core {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--bs-primary) 0%, rgba(120, 0, 20, 0.5) 60%, transparent 100%);
    /* Заменили rgba(0, 74, 153, 0.5) */
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.7), 0 0 40px rgba(var(--bs-primary-rgb), 0.5);
    animation: pulse-core 2s ease-in-out infinite;
}

.data-core-label {
    position: absolute;
    font-family: var(--font-heading);
    color: #fff;
    text-shadow: 0 0 5px #000;
}

@keyframes pulse-core {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.7), 0 0 40px rgba(var(--bs-primary-rgb), 0.5);
    }

    50% {
        transform: scale(1);
        box-shadow: 0 0 30px var(--bs-primary), 0 0 60px rgba(var(--bs-primary-rgb), 0.7);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.7), 0 0 40px rgba(var(--bs-primary-rgb), 0.5);
    }
}

.data-stream-path {
    flex: 2;
    height: 10px;
    position: relative;
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.5) 0%, rgba(var(--bs-primary-rgb), 0.1) 50%, rgba(var(--bs-primary-rgb), 0.5) 100%);
    border-radius: 5px;
    margin: 0 1rem;
}

.data-snapshot {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--bs-primary) 100%);
    box-shadow: 0 0 15px var(--bs-primary);
    opacity: 0;
    animation: data-stream-animation 4s linear infinite;
}

@keyframes data-stream-animation {
    0% {
        left: 10px;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 35px);
        opacity: 0;
    }
}

.backup-log-wrapper {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    height: 180px;
    display: flex;
    flex-direction: column;
}

.backup-log-header {
    font-family: var(--font-heading);
    color: #aaa;
    padding: 0.5rem;
    border-bottom: 1px solid var(--glass-border);
}

.backup-log-list {
    list-style: none;
    padding: 0.5rem;
    margin: 0;
    overflow-y: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    flex-grow: 1;
}

.backup-log-list li {
    background: rgba(0, 0, 0, 0.2);
    padding: 5px;
    border-radius: 4px;
    margin-bottom: 5px;
    color: #eee;
}

/* --- ВАУ 5: Видеонаблюдение (Карта) --- */
.cctv-visualization-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    min-height: 500px;
}

.cctv-map-wrapper {
    height: 100%;
}

.cctv-map {
    position: relative;
    height: 100%;
    min-height: 500px;
    background-color: rgba(120, 0, 20, 0.05);
    /* Заменили rgba(0, 74, 153, 0.05) */
    background-image: linear-gradient(rgba(var(--bs-primary-rgb), 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    border-radius: 8px;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    overflow: hidden;
}

.map-room {
    position: absolute;
    border: 2px solid rgba(var(--bs-primary-rgb), 0.3);
}

.map-label {
    position: absolute;
    top: 5px;
    left: 5px;
    color: rgba(var(--bs-primary-rgb), 0.4);
    font-family: var(--font-heading);
    font-size: 0.9rem;
}

.lobby {
    top: 10%;
    left: 5%;
    width: 40%;
    height: 50%;
}

.corridor {
    top: 10%;
    left: 45%;
    width: 50%;
    height: 20%;
}

.server-room {
    top: 30%;
    right: 5%;
    width: 30%;
    height: 60%;
    background: rgba(255, 0, 0, 0.05);
    border-color: rgba(255, 0, 0, 0.2);
}

.cctv-cam {
    position: absolute;
    z-index: 10;
}

.cam-icon {
    font-size: 1.5rem;
    color: var(--bs-primary);
    text-shadow: 0 0 10px var(--bs-primary);
    transition: all 0.3s ease;
}

.cam-view-cone {
    position: absolute;
    top: -50px;
    left: 8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 120px 60px 0 60px;
    border-color: rgba(var(--bs-primary-rgb), 0.2) transparent transparent transparent;
    transform-origin: 50% 100%;
    animation: scan 5s ease-in-out infinite alternate;
}

@keyframes scan {
    0% {
        transform: rotate(-30deg);
    }

    100% {
        transform: rotate(30deg);
    }
}

.cctv-log-wrapper {
    height: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.cctv-log-header {
    font-family: var(--font-heading);
    color: #eee;
    padding: 1rem;
    border-bottom: 1px solid var(--glass-border);
    font-size: 1.1rem;
    background: rgba(0, 0, 0, 0.2);
}

.cctv-log-list {
    list-style: none;
    padding: 1rem;
    margin: 0;
    overflow-y: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    flex-grow: 1;
}

.cctv-log-list li {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--glass-border);
}

.cctv-log-list li.event-info {
    color: var(--bs-primary);
}

.cctv-log-list li.event-alert {
    color: #ff5f56;
    font-weight: 700;
}

.motion-dot {
    position: absolute;
    top: -80px;
    left: 20px;
    width: 20px;
    height: 20px;
    background: #ff5f56;
    border-radius: 50%;
    box-shadow: 0 0 15px #ff5f56, 0 0 25px #ff5f56;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.cctv-cam.event-active .cam-icon {
    color: #ff5f56;
    text-shadow: 0 0 15px #ff5f56, 0 0 25px #ff5f56;
    animation: pulse-critical 1s infinite;
}

.cctv-cam.event-active .cam-view-cone {
    border-top-color: rgba(255, 95, 86, 0.4);
    animation: none;
}

.cctv-cam.event-active .motion-dot {
    opacity: 1;
    transform: scale(1);
}

/* --- ВАУ 6: Турникеты --- */
.turnstile-visualization {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 2rem;
}

.turnstile {
    perspective: 800px;
    width: 150px;
    height: 180px;
    position: relative;
}

.turnstile-base {
    width: 100%;
    height: 20px;
    background: linear-gradient(#555, #222);
    border-radius: 5px 5px 0 0;
    position: absolute;
    bottom: 0;
}

.turnstile-rotor {
    width: 20px;
    height: 160px;
    background: #ccc;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}

.turnstile-arm {
    width: 100px;
    height: 10px;
    background: linear-gradient(#ddd, #aaa);
    border-radius: 5px;
    position: absolute;
    top: 50px;
    left: 25px;
    transform-origin: 10px 5px;
    transition: transform 0.5s ease-in-out;
}

.arm-1 {
    transform: rotate(0deg);
}

.arm-2 {
    transform: rotate(120deg);
}

.arm-3 {
    transform: rotate(240deg);
}

.turnstile.active .arm-1 {
    transform: rotate(120deg);
}

.turnstile.active .arm-2 {
    transform: rotate(240deg);
}

.turnstile.active .arm-3 {
    transform: rotate(360deg);
}

.access-control-panel {
    text-align: center;
}

.card-reader {
    width: 80px;
    height: 120px;
    background: #333;
    border: 1px solid #555;
    border-radius: 8px;
    margin: 0 auto 1rem;
    position: relative;
}

.card-reader::before {
    content: "";
    position: absolute;
    top: 40%;
    left: 10px;
    right: 10px;
    height: 5px;
    background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
    animation: scan-line 2s linear infinite;
}

@keyframes scan-line {
    0% {
        background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
    }

    50% {
        background: linear-gradient(90deg, transparent, #fff, transparent);
    }

    100% {
        background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
    }
}

.access-indicator {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 1rem auto;
    background: #555;
    transition: all 0.3s ease;
}

.access-indicator.granted {
    background: #00ff00;
    box-shadow: 0 0 15px #00ff00;
}

.access-indicator.denied {
    background: #ff0000;
    box-shadow: 0 0 15px #ff0000;
    animation: shake 0.5s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.access-log {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: #aaa;
    text-align: left;
    max-height: 100px;
    overflow-y: auto;
}

/* --- ВАУ 7: Сеть --- */
.network-topology {
    position: relative;
    height: 500px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.network-node {
    position: absolute;
    text-align: center;
    color: #eee;
}

.node-icon-net {
    font-size: 3rem;
    margin-bottom: 5px;
    text-shadow: 0 0 10px;
    color: var(--bs-primary);
}

.router {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.server-net {
    top: 20%;
    left: 30%;
}

.pc-net {
    top: 70%;
    left: 30%;
}

.wifi-net {
    top: 20%;
    right: 30%;
}

.firewall-net {
    top: 70%;
    right: 30%;
}

.network-line {
    position: absolute;
    background-color: rgba(var(--bs-primary-rgb), 0.3);
    height: 2px;
    transform-origin: 0 0;
    z-index: 1;
    background-image: linear-gradient(90deg, transparent 50%, var(--bs-primary) 50%);
    background-size: 10px 2px;
    animation: flow 1s linear infinite;
}

/* --- ВАУ 8: Обслуживание ПК --- */
.pc-optimization-viz {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 400px;
}

.system-status-panel {
    width: 40%;
}

.status-item-maint {
    background: var(--glass-bg);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid var(--glass-border);
}

.status-item-maint .label {
    color: #aaa;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.status-item-maint .value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #fff;
}

.progress-bar-maint {
    height: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.progress-bar-maint-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--bs-primary) 0%, #B00020 100%);
    /* Заменили #007bff */
    transition: width 0.5s ease-out;
}

.optimization-process {
    width: 50%;
    text-align: center;
}

.process-icon {
    font-size: 6rem;
    color: var(--bs-primary);
    margin-bottom: 1rem;
    display: inline-block;
}

.process-icon.fa-cog {
    animation: spin 4s linear infinite;
}

.process-icon.fa-sync {
    animation: spin 3s linear infinite reverse;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.process-status {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--bs-primary);
    margin-top: 1rem;
}

/* --- ВАУ 9: Антивирус --- */
.antivirus-shield-viz {
    position: relative;
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shield-icon {
    font-size: 10rem;
    color: var(--bs-primary);
    text-shadow: 0 0 30px rgba(var(--bs-primary-rgb), 0.7);
    z-index: 10;
    animation: shield-pulse 2s infinite;
}

@keyframes shield-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

.threat {
    position: absolute;
    font-size: 2rem;
    color: #ff5f56;
    animation: move-threat 5s linear infinite;
    opacity: 0;
    z-index: 5;
}

/* Добавляем переменные для target в keyframes */
@keyframes move-threat {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        left: var(--targetX, 50%);
        top: var(--targetY, 50%);
    }
}

.zap-effect {
    position: absolute;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, #fff 0%, var(--bs-primary) 50%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    z-index: 15;
    animation: zap 0.3s ease-out;
}

@keyframes zap {
    0% {
        opacity: 1;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
        transform: scale(2);
    }
}

.threat-log-av {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-height: 100px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    color: #aaa;
    font-size: 0.9rem;
}

.log-entry-av {
    margin-bottom: 5px;
}

.log-entry-av.detected {
    color: #ffaa00;
}

.log-entry-av.neutralized {
    color: #00ff00;
}

/* --- ВАУ 10: Принтеры --- */
.printer-viz {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 400px;
    gap: 2rem;
}

.printer-icon-area {
    text-align: center;
}

.printer-icon {
    font-size: 8rem;
    color: #ccc;
    position: relative;
}

.print-job-in,
.print-job-out {
    position: absolute;
    font-size: 2rem;
    color: #fff;
    opacity: 0;
}

.print-job-in {
    top: 0;
    left: -50px;
    animation: print-in 2s linear infinite;
}

.print-job-out {
    bottom: 0;
    right: -50px;
    animation: print-out 2s linear infinite;
    animation-delay: 1s;
}

@keyframes print-in {
    0% {
        opacity: 0;
        transform: translateX(-20px) rotate(-15deg);
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(50px) rotate(0deg);
    }
}

@keyframes print-out {
    0% {
        opacity: 0;
        transform: translateX(-50px) rotate(0deg);
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(20px) rotate(15deg);
    }
}

.printer-status-panel {
    width: 50%;
}

.ink-level {
    margin-bottom: 1rem;
}

.ink-label {
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.ink-bar-bg {
    height: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

.ink-bar-fill {
    height: 100%;
    transition: width 0.5s ease;
}

/* Оставляем цвета чернил как есть - они буквальные */
.ink-bar-fill.cyan {
    background: #00c6ff;
}

.ink-bar-fill.magenta {
    background: #ff00ff;
}

.ink-bar-fill.yellow {
    background: #ffee00;
}

.ink-bar-fill.black {
    background: #555;
}

.printer-status-display {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    text-align: center;
    color: #00ff00;
    margin-top: 1rem;
}

/* --- ВАУ 11: Сборка ПК --- */
.pc-assembly-viz {
    position: relative;
    height: 500px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.pc-component {
    position: absolute;
    font-size: 3rem;
    color: #ccc;
    transition: all 1s ease-in-out;
    text-align: center;
}

.component-label {
    font-size: 0.7rem;
    color: #aaa;
    display: block;
    margin-top: 5px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.pc-assembly-viz.assembled .component-label {
    opacity: 1;
    transition-delay: 0.5s;
}

.mobo {
    font-size: 8rem;
    color: #330005;
    /* Заменили #001f3f */
    transition-delay: 0s !important;
}

/* Motherboard (Темно-красный) */
.cpu {
    top: 40%;
    left: 45%;
    transition-delay: 0.5s;
    color: #aaa;
}

/* CPU */
.ram1 {
    top: 30%;
    left: 55%;
    font-size: 1.5rem;
    transition-delay: 1s;
    color: #ddd;
}

/* RAM */
.ram2 {
    top: 35%;
    left: 55%;
    font-size: 1.5rem;
    transition-delay: 1.2s;
    color: #ddd;
}

/* RAM */
.gpu {
    top: 60%;
    left: 40%;
    font-size: 4rem;
    transform: rotate(90deg);
    transition-delay: 1.5s;
    color: #eee;
}

/* GPU */
.psu {
    bottom: 10%;
    right: 10%;
    font-size: 4rem;
    transition-delay: 2s;
    color: #888;
}

/* PSU */
.case-icon {
    position: absolute;
    font-size: 15rem;
    color: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 1s ease-in-out;
    transition-delay: 2.5s;
}

/* Case appears last */
.pc-assembly-viz.assembled .mobo {
    transform: scale(0.8);
}

.pc-assembly-viz.assembled .cpu {
    top: 48%;
    left: 48%;
    transform: scale(0.8);
}

.pc-assembly-viz.assembled .ram1 {
    top: 45%;
    left: 52%;
    transform: scale(0.8);
}

.pc-assembly-viz.assembled .ram2 {
    top: 49%;
    left: 52%;
    transform: scale(0.8);
}

.pc-assembly-viz.assembled .gpu {
    top: 55%;
    left: 45%;
    transform: scale(0.8) rotate(90deg);
}

.pc-assembly-viz.assembled .psu {
    bottom: 25%;
    right: 35%;
    transform: scale(0.8);
}

.pc-assembly-viz.assembled .case-icon {
    opacity: 1;
}

/* --- ВАУ 12: Запуск Сайтов --- */
.deployment-pipeline-viz {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 300px;
    border-radius: 12px;
    padding: 2rem;
}

.pipeline-stage {
    text-align: center;
    position: relative;
}

.stage-icon {
    font-size: 4rem;
    color: #aaa;
    margin-bottom: 1rem;
    transition: color 0.5s ease, transform 0.5s ease;
}

.stage-label {
    font-family: var(--font-heading);
    color: #aaa;
    transition: color 0.5s ease;
}

.pipeline-arrow {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2);
    margin: 0 1rem;
}

.pipeline-stage.active .stage-icon {
    color: var(--bs-primary);
    transform: scale(1.1);
    animation: pulse-stage 1s infinite;
}

.pipeline-stage.active .stage-label {
    color: var(--bs-primary);
}

@keyframes pulse-stage {

    0%,
    100% {
        text-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.5);
    }

    50% {
        text-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 1);
    }
}

.pipeline-stage.done .stage-icon {
    color: #00ff00;
}

.pipeline-stage.done .stage-label {
    color: #00ff00;
}

.rocket-icon {
    animation: launch 1s ease-out forwards;
    animation-delay: 2.5s;
    /* Delay until deploy stage */
    opacity: 0;
}

@keyframes launch {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translateY(-100px) rotate(15deg);
    }
}

/* --- ВАУ 13: 1С --- */
/* Оставляем желто-золотые цвета, т.к. это брендинг 1С */
.one-c-viz {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 400px;
    gap: 2rem;
    border-radius: 12px;
    padding: 2rem;
}

.data-processing-flow {
    width: 50%;
    position: relative;
    height: 300px;
}

.data-block-1c {
    position: absolute;
    font-size: 1.5rem;
    color: #ffaa00;
    opacity: 0;
    animation: flow-1c 4s linear infinite;
}

.data-block-1c:nth-child(1) {
    top: 10%;
    left: 0;
    animation-delay: 0s;
}

.data-block-1c:nth-child(2) {
    top: 30%;
    left: 0;
    animation-delay: -1s;
}

.data-block-1c:nth-child(3) {
    top: 50%;
    left: 0;
    animation-delay: -2s;
}

.data-block-1c:nth-child(4) {
    top: 70%;
    left: 0;
    animation-delay: -3s;
}

@keyframes flow-1c {
    0% {
        opacity: 0;
        transform: translateX(0) rotate(0deg);
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(200px) rotate(360deg);
    }
}

/* Move towards center */
.one-c-engine {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.engine-icon {
    font-size: 6rem;
    color: #ffeb3b;
    text-shadow: 0 0 20px #ffeb3b;
    animation: pulse-core 2s infinite;
}

.engine-label {
    color: #ffeb3b;
    font-family: var(--font-heading);
    margin-top: 10px;
}

.report-generation {
    width: 40%;
    text-align: center;
}

.report-icon {
    font-size: 5rem;
    color: #00ff00;
    margin-bottom: 1rem;
    opacity: 0;
    animation: generate-report 4s linear infinite;
    animation-delay: 2s;
}

@keyframes generate-report {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* --- ВАУ 14: Мониторинг --- */
.monitoring-advanced-dash {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.dash-widget {
    border-radius: 8px;
    padding: 1.5rem;
}

.widget-title {
    font-family: var(--font-heading);
    color: #aaa;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.mini-chart {
    height: 60px;
    background: linear-gradient(to right, var(--bs-primary), #B00020);
    /* Заменили #007bff */
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.mini-chart::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

.world-map-widget {
    grid-column: span 2;
    position: relative;
    height: 300px;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1) grayscale(1) brightness(0.5) contrast(2);
}

/* Инвертируем карту для темной темы */
.map-ping-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00ff00;
    box-shadow: 0 0 10px #00ff00;
    animation: ping 1.5s infinite;
}

.dot-eu {
    top: 30%;
    left: 45%;
    animation-delay: -0.5s;
}

.dot-us {
    top: 40%;
    left: 20%;
    animation-delay: -1s;
}

.dot-asia {
    top: 45%;
    right: 25%;
}

@keyframes ping {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(2);
        opacity: 0.5;
    }
}

.alert-feed {
    max-height: 150px;
    overflow-y: auto;
    font-size: 0.9rem;
}

.alert-item {
    padding: 5px 0;
    border-bottom: 1px dashed var(--glass-border);
}

.alert-item.critical {
    color: #ff5f56;
    font-weight: bold;
}

.alert-item.warning {
    color: #ffaa00;
}

.alert-item.info {
    color: var(--bs-primary);
}


/* ---
=================================================
    "ВАУ" 11 (V5): СБОРКА ПК - ИНТЕРАКТИВНЫЙ КОРПУС
    (Ретемизация под красную тему)
=================================================
--- */

.service-hero-pc-poweron {
    padding: 6rem 0;
    background-color: #0a0a0a;
    border-bottom: 1px solid var(--glass-border);
}

.pc-poweron-viz {
    position: relative;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Hide overflow for effect */
    perspective: 1500px;
    background: radial-gradient(circle at center, rgba(var(--bs-primary-rgb), 0.05), transparent 70%);
}

/* --- Псевдо-3D Системный блок --- */
.pc-case-wrapper {
    position: relative;
    width: 280px;
    height: 400px;
    /* Bigger case */
    margin-left: 60px;
    transform-style: preserve-3d;
    transform: rotateY(-30deg) rotateX(15deg);
}

.pc-case {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.case-panel {
    position: absolute;
    background-color: rgba(10, 15, 25, 0.85);
    border: 1px solid rgba(100, 150, 200, 0.2);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.case-panel.front {
    width: 280px;
    height: 400px;
    transform: translateZ(100px);
    /* Deeper case */
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    /* Grid pattern */
    display: flex;
    /* For button positioning */
    align-items: flex-start;
    /* Button at top */
    justify-content: flex-end;
    /* Button at right */
    padding: 15px;
}

.case-panel.side {
    width: 200px;
    height: 400px;
    transform: rotateY(90deg) translateZ(180px);
    /* Adjusted for depth/width */
    /* Glass Effect (when ON) */
    background-color: rgba(5, 10, 20, 0.6);
    transition: background-color 0.5s ease;
}

.pc-poweron-viz.system-on .case-panel.side.glass-side {
    background-color: rgba(25, 35, 50, 0.3);
    /* More transparent */
    backdrop-filter: blur(3px);
}

.case-panel.top {
    width: 280px;
    height: 200px;
    transform: rotateX(90deg) translateZ(100px);
    background-color: rgba(20, 30, 50, 0.9);
}

/* --- Кнопка на корпусе --- */
.power-button-case {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(#555, #222);
    border: 1px solid #777;
    color: #aaa;
    font-size: 1.2rem;
    cursor: pointer;
    position: relative;
    /* Use relative to front panel */
    z-index: 5;
    transition: all 0.2s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.power-button-case:hover {
    background: linear-gradient(#777, #444);
    color: #fff;
}

.power-button-case:active {
    transform: scale(0.9);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
}

.pc-poweron-viz.system-on .power-button-case {
    background: linear-gradient(#FF4D6D, var(--bs-primary));
    /* Заменили #00e5ff */
    color: #000;
    box-shadow: 0 0 15px var(--bs-primary), 0 0 25px var(--bs-primary);
}

/* --- Внутренние компоненты --- */
.motherboard {
    position: absolute;
    width: 250px;
    height: 370px;
    /* Fill more space */
    background-color: #200005;
    /* Dark red, заменили #001f3f */
    top: 15px;
    left: 15px;
    transform: translateZ(5px);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
    background-image:
        linear-gradient(45deg, rgba(var(--bs-primary-rgb), 0.05) 25%, transparent 25%, transparent 75%, rgba(var(--bs-primary-rgb), 0.05) 75%),
        linear-gradient(-45deg, rgba(var(--bs-primary-rgb), 0.05) 25%, transparent 25%, transparent 75%, rgba(var(--bs-primary-rgb), 0.05) 75%);
    background-size: 8px 8px;
    /* Denser pattern */
}

.cpu-cooler {
    position: absolute;
    top: 80px;
    left: 100px;
    /* Adjusted position */
    width: 70px;
    height: 90px;
    /* Taller tower */
    transform: translateZ(15px);
    transform-style: preserve-3d;
}

.cooler-fins {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #999, #555, #999);
    /* Metallic fins */
    transform: rotateY(0deg);
    border: 1px solid #444;
    background-size: 10px 100%;
    /* Vertical lines */
}

.cooler-fan {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
    background: rgba(10, 10, 10, 0.9);
    border-radius: 50%;
    border: 1px solid #333;
    transform: translateZ(10px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.fan-blade {
    position: absolute;
    width: 6px;
    height: 18px;
    background: #bbb;
    border-radius: 2px;
    transform-origin: 50% 100%;
}

.fan-blade:nth-child(1) {
    transform: rotate(0deg) translateY(-8px);
}

.fan-blade:nth-child(2) {
    transform: rotate(120deg) translateY(-8px);
}

.fan-blade:nth-child(3) {
    transform: rotate(240deg) translateY(-8px);
}

@keyframes spin-fan {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.pc-poweron-viz.system-on .cooler-fan {
    animation: spin-fan 0.8s linear infinite;
}

/* Faster fan */

.gpu-card {
    position: absolute;
    bottom: 70px;
    left: 40px;
    width: 180px;
    height: 50px;
    background: linear-gradient(#555, #222);
    border-radius: 5px;
    transform: translateZ(10px) rotateX(-5deg);
    border: 1px solid #666;
    display: flex;
    align-items: center;
    padding: 0 15px;
    justify-content: flex-start;
}

.gpu-fan {
    width: 35px;
    height: 35px;
    background: #333;
    border-radius: 50%;
    margin-right: 15px;
    border: 1px solid #555;
}

.pc-poweron-viz.system-on .gpu-fan {
    animation: spin-fan 1.2s linear infinite;
}

.ram-stick {
    position: absolute;
    left: 190px;
    width: 15px;
    height: 60px;
    background: linear-gradient(#600, #B00020);
    /* Red RAM */
    border: 1px solid var(--bs-primary);
    transform: translateZ(8px) rotateX(-5deg);
    border-radius: 2px;
    opacity: 0.5;
    transition: opacity 0.5s, box-shadow 0.5s;
}

.stick1 {
    top: 70px;
}

.stick2 {
    top: 140px;
}

.pc-poweron-viz.system-on .ram-stick {
    opacity: 1;
    box-shadow: 0 0 10px var(--bs-primary);
    /* Red glow */
}

/* Light up RAM */


/* Внутренняя подсветка (RGB) */
.internal-glow {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    animation: rgb-glow-case 5s linear infinite;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
}

@keyframes rgb-glow-case {
    0% {
        box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 0 20px #ff00ff, 0 0 35px #ff00ff;
    }

    33% {
        box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 0 20px #ff0033, 0 0 35px #ff0033;
        /* Заменили cyan на red */
    }

    66% {
        box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 0 20px #ffee00, 0 0 35px #ffee00;
    }

    100% {
        box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 0 20px #ff00ff, 0 0 35px #ff00ff;
    }
}

.pc-poweron-viz.system-on .internal-glow {
    opacity: 0.7;
}

/* --- Псевдо-3D Монитор --- */
.monitor-wrapper {
    position: relative;
    width: 400px;
    height: 280px;
    margin-right: 100px;
    transform: rotateY(25deg) rotateX(10deg) translateZ(-50px);
}

.monitor-stand {
    position: absolute;
    bottom: -30px;
    left: 50%;
    width: 120px;
    height: 30px;
    background: linear-gradient(#555, #222);
    transform: translateX(-50%) translateZ(-20px);
    border-radius: 3px 3px 0 0;
}

.monitor-screen {
    width: 100%;
    height: 100%;
    background: #050505;
    border: 15px solid #1a1a1a;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.pc-poweron-viz.system-on .monitor-screen {
    background: #0a101a;
    box-shadow: 0 0 30px rgba(var(--bs-primary-rgb), 0.5);
}

/* Экран Загрузки */
.boot-screen-content {
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    transition-delay: 0.1s;
}

/* Быстрее появляется */
.pc-poweron-viz.system-on .boot-screen-content {
    opacity: 1;
}

.boot-progress-bar {
    width: 200px;
    height: 10px;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 5px;
    margin: 1rem auto 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
}

.boot-progress-fill {
    width: 0%;
    height: 100%;
    background: var(--bs-primary);
    box-shadow: 0 0 10px var(--bs-primary);
    transition: width 1s ease-out;
    transition-delay: 0.3s;
}

/* Быстрее */
.pc-poweron-viz.system-on .boot-progress-fill {
    width: 100%;
}

.boot-status-text {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: #aaa;
    text-transform: uppercase;
}

/* --- Индикатор статуса под визуализацией --- */
.power-indicator {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 1rem;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 15px;
    border-radius: 5px;
    z-index: 20;
    border: 1px solid var(--glass-border);
    transition: all 0.5s ease;
}

.pc-poweron-viz.system-on .power-indicator {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 0 10px var(--bs-primary);
}

.pc-poweron-viz.system-off .power-indicator {
    color: #ff5f56;
    border-color: #ff5f56;
    box-shadow: 0 0 10px #ff5f56;
}

/* ---
=================================================
    НОВЫЙ БЛОК: ВАУ 16: Брендинг (Ядро)
=================================================
--- */

.branding-viz-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-core-viz {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--bs-primary) 0%, rgba(120, 0, 20, 0.5) 60%, transparent 100%);
    /* Заменили rgba(0, 74, 153, 0.5) */
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.7), 0 0 40px rgba(var(--bs-primary-rgb), 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: var(--font-heading);
    color: #fff;
    font-size: 1.2rem;
    text-shadow: 0 0 5px #000;
    transform: scale(0);
    opacity: 0;
    transition: all 0.5s ease-out;
}

.brand-core-viz.active {
    transform: scale(1);
    opacity: 1;
    animation: pulse-core 2s ease-in-out infinite;
    /* Используем существующую анимацию */
}

.brand-element-viz {
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    box-shadow: 0 0 15px rgba(var(--bs-primary-rgb), 0.3);
    backdrop-filter: blur(5px);
    z-index: 5;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s ease-out;
}

.brand-element-viz.active {
    opacity: 1;
    transform: scale(1);
}

.brand-element-viz .brand-elem-icon {
    font-size: 2rem;
    color: var(--bs-primary);
    margin-bottom: 5px;
}

.brand-element-viz .brand-elem-label {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #eee;
}

/* Позиционирование элементов */
.elem-logo {
    top: 0;
    left: 0;
}

.elem-color {
    top: 0;
    right: 0;
}

.elem-font {
    bottom: 0;
    left: 0;
}

.elem-concept {
    bottom: 0;
    right: 0;
}

/* Линии */
.brand-lines-viz {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: visible;
}

.brand-line-path {
    stroke: rgba(var(--bs-primary-rgb), 0.3);
    stroke-width: 2;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1s ease-out;
    transition-delay: 0.3s;
    /* Начинаем рисовать после появления ядра */
}

.brand-line-path.active {
    stroke-dashoffset: 0;
}


/* ---
=================================================
    Кнопка "Наверх" (Стрелка) - "HOLO-ARROW"
=================================================
--- */
.scroll-to-top-button {
    position: fixed;
    bottom: 25px;
    /* Немного выше */
    right: 25px;
    /* Отступ справа */
    width: 50px;
    /* Размер кнопки */
    height: 50px;
    background: linear-gradient(45deg, var(--bs-primary) 0%, #B00020 100%);
    /* Заменили #007bff */
    border: none;
    border-radius: 50%;
    /* Круглая кнопка */
    color: #ffffff;
    /* Белая иконка */
    font-size: 1.5rem;
    /* Размер стрелки */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(var(--bs-primary-rgb), 0.5);
    /* Красное свечение */
    opacity: 0;
    /* Изначально скрыта */
    visibility: hidden;
    /* Скрыта для скринридеров */
    transform: translateY(20px);
    /* Небольшое смещение для анимации */
    transition: all 0.4s ease-in-out;
    z-index: 1000;
}

.scroll-to-top-button:hover {
    transform: translateY(-5px) scale(1.05);
    /* Легкий подъем и увеличение */
    box-shadow: 0 8px 30px rgba(var(--bs-primary-rgb), 0.7);
    /* Усиленное свечение */
}

.scroll-to-top-button.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Изменение цвета иконки при наведении на кнопку */
.scroll-to-top-button i {
    color: #ffffff;
    transition: color 0.3s ease;
}

.scroll-to-top-button:hover i {
    color: #fff;
}

/* === НАЧАЛО: СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА УСПЕХА === */
/* (Я УБРАЛ ДУБЛИКАТЫ ИЗ ВАШЕГО ФАЙЛА) */
#modal-icon-success {
    font-size: 6rem;
    /* Большой размер */
    color: #00ff00;
    /* Яркий зеленый */
    text-shadow: 0 0 15px #00ff00, 0 0 25px rgba(0, 255, 0, 0.7);
    /* Анимация пульсации */
    animation: pulse-success 1.5s ease-in-out infinite alternate;
}

@keyframes pulse-success {
    from {
        transform: scale(1);
        opacity: 0.8;
    }

    to {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Исправляем фон модального окна, чтобы он был "стеклянным" */
.modal-content.glass-card {
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
}

/* === КОНЕЦ: СТИЛИ === */


/* ---
=================================================
    СТИЛИ ДЛЯ ИКОНОК СОЦСЕТЕЙ В ФУТЕРЕ
=================================================
--- */
/* (Я УБРАЛ ДУБЛИКАТЫ ИЗ ВАШЕГО ФАЙЛА) */
.footer-section .social-link {
    font-family: var(--font-body);
    color: #aaa;
    /* Нейтральный цвет */
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    /* Используем flex для выравнивания */
    align-items: center;
    padding: 5px 10px;
}

.footer-section .social-link i {
    font-size: 1.5rem;
    /* Размер иконки */
    margin-right: 8px;
    /* Отступ между иконкой и текстом */
    transition: all 0.3s ease;
}

.footer-section .social-link .social-label {
    display: inline-block;
    font-weight: 300;
}

/* Эффект при наведении */
.footer-section .social-link:hover {
    color: var(--bs-primary);
    /* Красный цвет при наведении */
    transform: translateY(-3px);
    /* Легкий подъем */
}

.footer-section .social-link:hover i {
    color: var(--bs-primary);
    transform: scale(1.1);
    /* Увеличение иконки */
}

/* Скрываем текст на маленьких экранах, оставляем только иконки */
@media (max-width: 576px) {
    .footer-section .social-link .social-label {
        display: none;
        /* Прячем текст */
    }

    .footer-section .social-link i {
        font-size: 1.8rem;
        /* Делаем иконки чуть больше */
        margin-right: 0;
    }

    .footer-section .social-link {
        padding: 5px 15px;
        /* Увеличиваем кликабельную область */
    }
}


/* === НАЧАЛО: НОВЫЕ СТИЛИ ДЛЯ "ТЕХНО-БЕЙДЖА" ПАРТНЕРА === */

.partner-badge-wrapper {
    /* (можно использовать для доп. отступов, если нужно) */
}

.partner-badge {
    display: inline-flex;
    /* Ставим лейбл и ссылку в один ряд */
    align-items: center;
    background: var(--glass-bg);
    /* Тот же "стеклянный" фон */
    border: 1px solid var(--glass-border);
    /* "Стеклянная" рамка */
    border-radius: 8px;
    padding: 0.5rem 1rem;
    /* Внутренний отступ */
    backdrop-filter: blur(5px);
    transition: all 0.3s ease-out;
}

.partner-badge .badge-label {
    color: #aaa;
    font-family: var(--font-heading);
    /* Шрифт Orbitron */
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-right: 12px;
    padding-right: 12px;
    border-right: 1px solid var(--glass-border);
    /* Разделитель */
}

.partner-badge .partner-link {
    color: #fff;
    /* Яркий текст ссылки */
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    transition: all 0.3s ease-out;
}

.partner-badge .partner-link i {
    color: var(--bs-primary);
    /* Красная иконка Telegram */
    font-size: 1.2rem;
    margin-right: 8px;
    transition: all 0.3s ease-out;
}

/* Эффект при наведении на "бейдж" */
.partner-badge:hover {
    transform: translateY(-3px) scale(1.03);
    border-color: var(--bs-primary);
    box-shadow: 0 5px 20px rgba(var(--bs-primary-rgb), 0.3);
    /* Красное свечение */
}

.partner-badge:hover .partner-link {
    color: var(--bs-primary);
    /* Подсвечиваем текст ссылки */
    text-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.5);
}

.partner-badge:hover .partner-link i {
    transform: scale(1.1);
    /* Увеличиваем иконку */
}

/* Адаптация для мобильных */
@media (max-width: 576px) {
    .partner-badge {
        flex-direction: column;
        /* Ставим лейбл над ссылкой */
        padding: 0.75rem;
    }

    .partner-badge .badge-label {
        border-right: none;
        /* Убираем разделитель */
        border-bottom: 1px solid var(--glass-border);
        /* Делаем разделитель горизонтальным */
        margin-right: 0;
        padding-right: 0;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

/* === КОНЕЦ: НОВЫЕ СТИЛИ === */