.matrix-hero-section {
background-color: #080c14; /* Глубокий темный фон */
padding: 80px 0;
font-family: 'Roboto', sans-serif;
color: #ffffff;
}

.matrix-hero-section .matrix-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}

/* Левая часть - Текст */
.matrix-hero-info {
flex: 1;
max-width: 500px;
}

.matrix-hero-info h1 {
font-size: 40px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: #ffffff;
}

.matrix-hero-info h1 span {
color: #f59e0b; /* Акцентный желтый цвет */
}

.matrix-hero-info p {
font-size: 18px;
line-height: 1.6;
color: #9ca3af;
margin-bottom: 35px;
}

/* Кнопки */
.matrix-hero-buttons {
display: flex;
gap: 15px;
margin-bottom: 40px;
}

.matrix-hero-btn {
display: inline-block;
padding: 12px 28px;
font-size: 15px;
font-weight: 500;
border-radius: 6px;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
border: none;
cursor: pointer;
}

.matrix-hero-btn-yellow {
background-color: #f59e0b;
color: #000000;
}

.matrix-hero-btn-yellow:hover {
background-color: #d97706;
color: #000000;
text-decoration: none;
}

.matrix-hero-btn-blue {
background-color: #2563eb;
color: #ffffff;
}

.matrix-hero-btn-blue:hover {
background-color: #1d4ed8;
color: #ffffff;
text-decoration: none;
}

/* Нижние бейджи */
.matrix-hero-badges {
display: flex;
gap: 12px;
}

.matrix-badge-item {
display: flex;
align-items: center;
gap: 8px;
background-color: #111827;
padding: 6px 14px;
border-radius: 4px;
border: 1px solid #1f2937;
font-size: 12px;
color: #9ca3af;
}

.matrix-badge-dot {
width: 6px;
height: 6px;
background-color: #10b981; /* Зеленый маркер */
border-radius: 50%;
}

/* Правая часть - Крупный экран мониторинга */
.matrix-hero-screen {
flex: 1.3;
position: relative;
border-radius: 12px;
border: 4px solid #1f2937; /* Рамка монитора */
background-color: #000000;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* Изображение из вашего старого слайдера */
.matrix-screen-img {
display: block;
width: 100%;
height: auto;
opacity: 0.85; /* Легкое затемнение для контраста графики */
}

/* Анимированная линия сканирования (эффект ИИ-анализа) */
.matrix-scan-line {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, #10b981, transparent);
box-shadow: 0 0 8px #10b981;
animation: matrixScan 4s linear infinite;
pointer-events: none;
}

@keyframes matrixScan {
0% { top: 0%; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}

/* Рамка детекции объекта на вашей картинке */
.matrix-ai-box {
position: absolute;
border: 2px solid #10b981; /* Зеленая рамка детекции */
box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
border-radius: 4px;
/* Позиционирование рамки на картинке (можно настроить под объект на фото) */
top: 25%;
left: 35%;
width: 35%;
height: 55%;
pointer-events: none;
}

.matrix-ai-label {
position: absolute;
top: -21px;
left: -2px;
background-color: #10b981;
color: #000000;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
border-radius: 4px 4px 0 0;
white-space: nowrap;
text-transform: uppercase;
}

/* Индикатор прямой трансляции (REC LIVE) */
.matrix-live-indicator {
position: absolute;
top: 15px;
left: 15px;
background-color: rgba(0, 0, 0, 0.6);
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 6px;
pointer-events: none;
}

.matrix-live-dot {
width: 8px;
height: 8px;
background-color: #ef4444; /* Мигающая красная точка */
border-radius: 50%;
animation: matrixPulse 1.5s infinite;
}

@keyframes matrixPulse {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}

/* Адаптивность для планшетов и мобильных */
@media (max-width: 991px) {
.matrix-hero-section .matrix-container {
    flex-direction: column;
    text-align: center;
}
.matrix-hero-info {
    max-width: 100%;
}
.matrix-hero-buttons {
    justify-content: center;
}
.matrix-hero-badges {
    justify-content: center;
}
.matrix-hero-screen {
    width: 100%;
    max-width: 600px;
}
}

@media (max-width: 576px) {
.matrix-hero-info h1 {
    font-size: 30px;
}
.matrix-hero-buttons {
    flex-direction: column;
    gap: 10px;
}
}