:root {
    --bg-color: #050505;
    --text-main: #ffffff;
    --neon-green: #90FF22;
    --glass-bg: rgba(15, 15, 15, 0.6);
    --glass-border: rgba(144, 255, 34, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Courier New', Courier, monospace; }
h1, h2, h3, .cyber-button, .stand-badge, .status-badge { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    background-image: radial-gradient(circle at 50% 0%, #112200 0%, var(--bg-color) 70%);
    overflow-x: hidden;
    padding-bottom: 80px; 
    font-weight: 500; /* Базовое увеличение жирности для всего сайта */
}

.scanlines {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 3px 100%;
    z-index: 9998;
    pointer-events: none;
}

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 8px;
}

/* === ЭКРАН ИНИЦИАЛИЗАЦИИ === */
#unlock-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #000; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; transition: opacity 0.5s;
    will-change: opacity; /* Оптимизация для плавности */
}
.unlock-box {
    padding: 30px; text-align: center;
}
.border-neon { border-color: var(--neon-green); box-shadow: 0 0 20px rgba(144, 255, 34, 0.2); }

/* === МАТРИЦА И ПРЕЛОАДЕР === */
#boot-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #000; /* Гарантированный черный фон */
    z-index: 9997;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.8s ease-out;
    will-change: opacity; /* Оптимизация для плавности */
}
#matrix-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.8; }

.terminal-wrapper {
    position: relative; z-index: 2; background: rgba(0, 0, 0, 0.85);
    padding: 30px; border: 1px solid var(--neon-green);
    box-shadow: 0 0 30px rgba(144, 255, 34, 0.2); border-radius: 8px;
    width: 90%; max-width: 450px;
}
.terminal-text { color: #888; font-size: 14px; }
.terminal-text p { margin-bottom: 12px; }
.matrix-glitch { color: #fff; font-weight: bold; }
.blink { animation: blinker 1s linear infinite; color: var(--neon-green); font-weight: bold; font-size: 18px;}
@keyframes blinker { 50% { opacity: 0; } }

/* === ИНТРО АНИМАЦИЯ === */
#intro-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #000; z-index: 9996;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.8s ease-out;
    will-change: opacity; /* Оптимизация для GPU */
}
.intro-container { position: relative; width: 250px; height: 250px; }
.intro-layer {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0; transition: all 0.4s ease;
    max-width: 100%; object-fit: contain;
    will-change: transform, opacity; /* Снижаем нагрузку на телефон */
}
#intro-frame { width: 250px; }
#intro-bizon-text { width: 140px; }
#intro-dv-icon { width: 180px; }
#intro-dv-final-text { margin-top: 20px; width: 200px; opacity: 0; transition: all 0.5s ease; }

.hidden { opacity: 0; pointer-events: none; }
.visible { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; }
.visible-text { opacity: 1 !important; }

/* === ОСНОВНОЙ КОНТЕНТ === */
.header {
    position: fixed; width: 100%; top: 0; z-index: 100;
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; border-bottom: 1px solid var(--glass-border);
}
.header-logo-img { height: 35px; }
.stand-badge { background: var(--neon-green); color: #000; padding: 5px 10px; font-weight: 800; font-size: 12px; border-radius: 3px; }

.hero { padding: 100px 20px 40px; text-align: left; }
.status-badge { display: inline-block; border: 1px solid red; color: red; padding: 4px 8px; font-size: 12px; margin-bottom: 15px; letter-spacing: 1px; font-weight: bold; }
.hero h1 { font-size: 2.2rem; line-height: 1.1; margin-bottom: 15px; font-weight: 900; }
.neon-text { color: var(--neon-green); text-shadow: 0 0 10px rgba(144, 255, 34, 0.4); }
.subtitle { font-size: 1.05rem; color: #ccc; }

.about-company { margin: 0 20px 40px; padding: 25px; }
.about-company h2 { font-size: 1.2rem; margin-bottom: 15px; letter-spacing: 1px; font-weight: 800; }
.about-company p { font-size: 1rem; color: #e0e0e0; }

.stats-grid { display: flex; gap: 20px; margin-top: 25px; border-top: 1px solid #333; padding-top: 20px; }
.stat-item { flex: 1; }
.stat-num { font-size: 2.5rem; font-weight: bold; font-family: 'Segoe UI', sans-serif; line-height: 1; }
.stat-desc { font-size: 0.8rem; color: #aaa; text-transform: uppercase; margin-top: 5px; font-weight: bold; }

.products { padding: 0 20px; display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.product-card { padding: 25px; }
.prod-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.prod-icon { font-size: 2rem; }
.product-card h3 { font-size: 1.3rem; font-weight: 800; }
.product-card p { font-size: 1rem; color: #e0e0e0; }

.audit-section { padding: 0 20px 40px; }
.form-container { padding: 30px 20px; text-align: center; }
.form-container h2 { margin-bottom: 10px; font-size: 1.5rem; font-weight: 800; }
.form-container p { font-size: 1rem; color: #ccc; margin-bottom: 25px; }

.input-group input { width: 100%; padding: 18px; margin-bottom: 15px; background: rgba(0,0,0,0.8); border: 1px solid #444; color: #fff; border-radius: 4px; font-size: 16px; font-weight: bold;}
.input-group input:focus { outline: none; border-color: var(--neon-green); }

.cyber-button {
    display: inline-block; padding: 18px 20px; background: var(--bg-color); color: var(--neon-green);
    border: 2px solid var(--neon-green); font-weight: 900; font-size: 1rem; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all 0.3s; text-align: center;
}
.cyber-button.full-width { width: 100%; }
.cyber-button:active { background: var(--neon-green); color: #000; }

.mobile-sticky-cta { position: fixed; bottom: 0; left: 0; width: 100%; padding: 15px 20px; background: linear-gradient(transparent, rgba(0,0,0,0.9) 30%, #000); z-index: 101; display: flex; justify-content: center; }
.pulse-btn { width: 100%; background: var(--neon-green); color: #000; box-shadow: 0 0 15px rgba(144,255,34,0.4); }
.hidden-message { display: none; margin-top: 20px; padding: 15px; border: 1px dashed var(--neon-green); font-weight: bold; }

/* === ОПТИМИЗАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (ЖИРНОСТЬ И КОНТРАСТ) === */
@media (max-width: 767px) {
    p, .subtitle, .product-card p, .about-company p { 
        font-weight: 600; /* Делаем весь текст абзацев заметно жирнее */
        color: #ffffff; /* Убираем серость для максимального контраста */
    }
    .subtitle { font-size: 1.1rem; }
    .product-card p { font-size: 1.05rem; }
    .about-company p { font-size: 1.05rem; }
    
    /* Усиливаем заголовки */
    h1 { font-weight: 900; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }
    h2, h3 { font-weight: 800; }
}

@media (min-width: 768px) {
    .hero { text-align: center; padding-top: 150px; }
    .hero-content { margin: 0 auto; }
    .hero h1 { font-size: 4rem; }
    .products { flex-direction: row; }
    .product-card { flex: 1; }
    .about-company { max-width: 800px; margin: 0 auto 40px; }
    .audit-section { max-width: 600px; margin: 0 auto 40px; }
    .mobile-sticky-cta { display: none; }
    body { padding-bottom: 0; }
}

/* === АНИМАЦИЯ ФОКУСИРОВКИ ЛИНЗЫ === */
@keyframes lensFocusSnap {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(-180deg);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        filter: blur(0px);
        transform: translate(-50%, -50%) scale(1.05) rotate(15deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

.focus-active {
    animation: lensFocusSnap 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    opacity: 1 !important; 
}