<!DOCTYPE html>
<html lang="ru">
<head>
<a href="https://merchant.freekassa.net" target="_blank" rel="noopener noreferrer">
  <img src="https://cdn.merchant.freekassa.net/banners/big-dark-1.png&quot; title="Прием платежей на сайте для физических лиц и т.д.">
</a>
    <meta name="enot" content="cfd75c29" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>DEAD FOG RP · Химическая угроза</title>

    <!-- ============================================================
         CSS КОНФИГ (полный)
         ============================================================ -->
    <style>
        /* ============================================================
           DEAD FOG RP · ПОЛНЫЙ ХИМИЧЕСКИЙ СТИЛЬ
           ============================================================ */

        /* ---------- ПОДКЛЮЧЕНИЕ ШРИФТОВ ---------- */
        @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Roboto+Condensed:wght@300;400;700&family=Russo+One&family=Special+Elite&display=swap');

        /* ============================================================
           ГЛОБАЛЬНЫЙ ФОН (ТОКСИЧНЫЙ)
           ============================================================ */

        body {
            background: #050a05 !important;
            min-height: 100vh;
            font-family: 'Roboto Condensed', 'Oswald', sans-serif !important;
            position: relative;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }

        /* --- ОСНОВНОЙ ФОН С ГРАДИЕНТАМИ --- */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(180deg, 
                    #020803 0%, 
                    #05100a 20%,
                    #081a0e 40%,
                    #051208 60%,
                    #030a05 80%,
                    #010402 100%
                ),
                radial-gradient(ellipse at 20% 30%, rgba(0, 255, 100, 0.04) 0%, transparent 40%),
                radial-gradient(ellipse at 80% 70%, rgba(0, 200, 150, 0.03) 0%, transparent 40%),
                radial-gradient(ellipse at 50% 100%, rgba(0, 255, 150, 0.02) 0%, transparent 50%),
                radial-gradient(ellipse at 10% 80%, rgba(0, 200, 100, 0.03) 0%, transparent 35%),
                radial-gradient(ellipse at 90% 20%, rgba(0, 255, 200, 0.02) 0%, transparent 35%);
            background-blend-mode: overlay, normal, normal, normal, normal;
            z-index: 0;
            animation: toxicPulse 25s ease-in-out infinite alternate;
        }

        @keyframes toxicPulse {
            0% { opacity: 0.8; }
            50% { opacity: 1; }
            100% { opacity: 0.8; }
        }

        /* --- ВИНЬЕТКА --- */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
            pointer-events: none;
            z-index: 0;
        }

        /* ============================================================
           ТОКСИЧНЫЙ ТУМАН (3 СЛОЯ)
           ============================================================ */

        .fog-layer-1 {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            background: 
                radial-gradient(ellipse at 20% 40%, rgba(0, 255, 100, 0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 60%, rgba(0, 200, 150, 0.03) 0%, transparent 45%),
                radial-gradient(ellipse at 50% 80%, rgba(0, 180, 120, 0.02) 0%, transparent 40%);
            animation: toxicFog1 35s ease-in-out infinite alternate;
        }

        .fog-layer-2 {
            position: fixed;
            top: -10%;
            left: -10%;
            width: 120%;
            height: 120%;
            pointer-events: none;
            z-index: 0;
            background: 
                radial-gradient(ellipse at 60% 30%, rgba(0, 255, 150, 0.03) 0%, transparent 40%),
                radial-gradient(ellipse at 30% 70%, rgba(0, 200, 200, 0.02) 0%, transparent 40%);
            animation: toxicFog2 45s ease-in-out infinite alternate;
        }

        .fog-layer-3 {
            position: fixed;
            top: -20%;
            left: -20%;
            width: 140%;
            height: 140%;
            pointer-events: none;
            z-index: 0;
            background: 
                radial-gradient(ellipse at 40% 50%, rgba(0, 255, 100, 0.02) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(0, 200, 150, 0.015) 0%, transparent 45%);
            animation: toxicFog3 55s ease-in-out infinite alternate;
        }

        @keyframes toxicFog1 {
            0% { transform: translate(0, 0) scale(1); opacity: 0.2; }
            33% { transform: translate(5%, 3%) scale(1.06); opacity: 0.5; }
            66% { transform: translate(-4%, -2%) scale(0.94); opacity: 0.15; }
            100% { transform: translate(3%, -1%) scale(1.03); opacity: 0.4; }
        }

        @keyframes toxicFog2 {
            0% { transform: translate(0, 0) scale(1); opacity: 0.15; }
            50% { transform: translate(-6%, 5%) scale(1.10); opacity: 0.4; }
            100% { transform: translate(5%, -4%) scale(0.90); opacity: 0.25; }
        }

        @keyframes toxicFog3 {
            0% { transform: translate(0, 0) scale(1); opacity: 0.1; }
            100% { transform: translate(4%, 3%) scale(1.08); opacity: 0.35; }
        }

        /* ============================================================
           ГЛОБАЛЬНЫЕ ШРИФТЫ
           ============================================================ */

        body, p, span, div, input, button, a, label {
            font-family: 'Roboto Condensed', 'Oswald', sans-serif !important;
            letter-spacing: 0.5px !important;
            color: #b8d4c0 !important;
        }

        h1, h2, h3, h4, h5, h6,
        .navbar__brand p,
        .product-card-name,
        .product-card-price,
        .app-button,
        .app-button__text,
        .bunner-title,
        .banner-content,
        .footer p,
        .footer a {
            font-family: 'Russo One', 'Oswald', sans-serif !important;
            font-weight: 700 !important;
            letter-spacing: 1.5px !important;
            text-transform: uppercase !important;
        }

        /* ============================================================
           ЛОГОТИП (ХИМИЧЕСКИЙ)
           ============================================================ */

        .navbar__brand p {
            font-size: 2rem !important;
            color: #66ffaa !important;
            position: relative;
            text-shadow: 
                0 0 10px rgba(0, 255, 100, 0.15),
                0 0 20px rgba(0, 255, 100, 0.08),
                0 0 40px rgba(0, 255, 100, 0.04) !important;
            animation: chemLogoGlitch 6s ease-in-out infinite !important;
        }

        @keyframes chemLogoGlitch {
            0% { text-shadow: 0 0 10px rgba(0,255,100,0.15), 0 0 20px rgba(0,255,100,0.08), 0 0 40px rgba(0,255,100,0.04); opacity: 1; transform: scale(1); }
            8% { text-shadow: 0 0 5px rgba(0,255,100,0.03); opacity: 0.7; transform: scale(0.99) translateX(-1px); }
            16% { text-shadow: 0 0 30px rgba(0,255,100,0.25), 0 0 60px rgba(0,255,100,0.12); opacity: 1; transform: scale(1.01) translateX(1px); }
            24% { text-shadow: 0 0 5px rgba(0,255,100,0.02); opacity: 0.6; transform: scale(0.98) translateX(2px); }
            32% { text-shadow: 0 0 20px rgba(0,255,100,0.20), 0 0 40px rgba(0,255,100,0.10); opacity: 1; transform: scale(1); }
            40% { text-shadow: 0 0 10px rgba(0,255,100,0.08); opacity: 0.8; transform: scale(0.99) translateX(-1px); }
            48% { text-shadow: 0 0 35px rgba(0,255,100,0.25), 0 0 70px rgba(0,255,100,0.12); opacity: 1; transform: scale(1.01); }
            56% { text-shadow: 0 0 5px rgba(0,255,100,0.02); opacity: 0.5; transform: scale(0.97) translateX(1px); }
            64% { text-shadow: 0 0 20px rgba(0,255,100,0.20), 0 0 40px rgba(0,255,100,0.10); opacity: 1; transform: scale(1); }
            72% { text-shadow: 0 0 10px rgba(0,255,100,0.05); opacity: 0.75; transform: scale(0.99); }
            80% { text-shadow: 0 0 25px rgba(0,255,100,0.20), 0 0 50px rgba(0,255,100,0.10); opacity: 1; transform: scale(1); }
            90% { text-shadow: 0 0 5px rgba(0,255,100,0.02); opacity: 0.6; transform: scale(0.98) translateX(-2px); }
            100% { text-shadow: 0 0 10px rgba(0,255,100,0.15), 0 0 20px rgba(0,255,100,0.08), 0 0 40px rgba(0,255,100,0.04); opacity: 1; transform: scale(1); }
        }

        /* ============================================================
           КНОПКИ КАТЕГОРИЙ
           ============================================================ */

        .app-button {
            font-family: 'Russo One', 'Oswald', sans-serif !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 1.5px !important;
            font-size: 0.8rem !important;
            padding: 12px 26px !important;
            border-radius: 0px !important;
            border: 1px solid rgba(0, 255, 100, 0.08) !important;
            background: rgba(0, 0, 0, 0.35) !important;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
            position: relative;
            overflow: hidden;
            cursor: pointer !important;
            color: #8aaa8a !important;
            text-shadow: 0 0 5px rgba(0, 255, 100, 0.02) !important;
            clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%) !important;
            margin: 2px !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
        }

        .app-button:hover {
            border-color: rgba(0, 255, 100, 0.30) !important;
            box-shadow: 0 0 30px rgba(0, 255, 100, 0.10), 0 0 60px rgba(0, 255, 100, 0.05), 0 6px 30px rgba(0, 0, 0, 0.4) !important;
            color: #66ffaa !important;
            text-shadow: 0 0 30px rgba(0, 255, 100, 0.3), 0 0 60px rgba(0, 255, 100, 0.15) !important;
            transform: translateY(-3px) scale(1.04) !important;
        }

        .app-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 300%;
            height: 100%;
            background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 100, 0.08) 30%, rgba(0, 255, 100, 0.15) 50%, rgba(0, 255, 100, 0.08) 70%, transparent 100%);
            transition: left 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .app-button:hover::before {
            left: 100%;
        }

        .app-button::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00ff88, transparent);
            transform: translateX(-50%);
            transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .app-button:hover::after {
            width: 80%;
        }

        .app-button--active {
            background: rgba(0, 255, 100, 0.04) !important;
            border-color: rgba(0, 255, 100, 0.20) !important;
            color: #66ffaa !important;
            text-shadow: 0 0 20px rgba(0, 255, 100, 0.2), 0 0 40px rgba(0, 255, 100, 0.1) !important;
            box-shadow: 0 0 30px rgba(0, 255, 100, 0.03), inset 0 0 20px rgba(0, 255, 100, 0.02) !important;
        }

        /* ============================================================
           ПОЛЕ ПОИСКА
           ============================================================ */

        .text-input {
            font-family: 'Roboto Condensed', sans-serif !important;
            font-size: 0.95rem !important;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
            background: rgba(0, 0, 0, 0.35) !important;
            border: 1px solid rgba(0, 255, 100, 0.04) !important;
            border-radius: 0px !important;
            color: #8aaa8a !important;
            padding: 12px 20px !important;
            clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%) !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
        }

        .text-input:focus {
            border-color: rgba(0, 255, 100, 0.20) !important;
            box-shadow: 0 0 40px rgba(0, 255, 100, 0.06), 0 2px 15px rgba(0, 0, 0, 0.3) !important;
            outline: none !important;
            background: rgba(0, 0, 0, 0.45) !important;
            color: #66ffaa !important;
        }

        .text-input::placeholder {
            color: #5a7a6a !important;
            opacity: 0.6 !important;
        }

        /* ============================================================
           КАРТОЧКИ ТОВАРОВ (МАКСИМАЛЬНО УВЕЛИЧЕННЫЕ)
           ============================================================ */

        .product-card {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
            min-height: 380px !important;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            border-radius: 4px !important;
            background: rgba(0, 0, 0, 0.25) !important;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border: 1px solid rgba(0, 255, 100, 0.02) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
        }

        /* --- ХИМИЧЕСКАЯ ОБВОДКА --- */
        .product-card::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border-radius: 6px;
            background: linear-gradient(135deg, rgba(0, 255, 100, 0), rgba(0, 255, 100, 0), rgba(0, 255, 100, 0));
            z-index: -1;
            transition: all 0.8s ease;
            opacity: 0;
        }

        .product-card:hover::before {
            background: linear-gradient(135deg, rgba(0, 255, 100, 0.25), rgba(0, 200, 150, 0.10), rgba(0, 255, 100, 0.25), rgba(0, 200, 255, 0.08));
            opacity: 1;
            animation: chemBorderGlow 1.5s ease-in-out infinite alternate;
        }

        @keyframes chemBorderGlow {
            0% { opacity: 0.6; box-shadow: 0 0 20px rgba(0, 255, 100, 0.05), 0 0 40px rgba(0, 255, 100, 0.02); }
            50% { opacity: 1; box-shadow: 0 0 30px rgba(0, 255, 100, 0.10), 0 0 60px rgba(0, 255, 100, 0.05), 0 0 100px rgba(0, 255, 100, 0.02); }
            100% { opacity: 0.6; box-shadow: 0 0 20px rgba(0, 255, 100, 0.05), 0 0 40px rgba(0, 255, 100, 0.02); }
        }

        /* --- РАЗЛЕТАЮЩИЕСЯ ЛИНИИ --- */
        .product-card::after {
            content: '';
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 300%;
            background: linear-gradient(180deg, transparent 0%, rgba(0, 255, 100, 0.03) 30%, rgba(0, 255, 100, 0.06) 50%, rgba(0, 255, 100, 0.03) 70%, transparent 100%);
            transition: top 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
            z-index: 0;
            opacity: 0;
        }

        .product-card:hover::after {
            top: 100%;
            opacity: 1;
        }

        .product-card .line-horizontal {
            position: absolute;
            top: 0;
            left: -100%;
            width: 300%;
            height: 100%;
            background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 100, 0.03) 30%, rgba(0, 255, 100, 0.06) 50%, rgba(0, 255, 100, 0.03) 70%, transparent 100%);
            transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
            z-index: 0;
            opacity: 0;
        }

        .product-card:hover .line-horizontal {
            left: 100%;
            opacity: 1;
        }

        /* --- СВЕЧЕНИЕ --- */
        .product-card .glow {
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(0, 255, 100, 0.05), transparent 60%);
            opacity: 0;
            transition: opacity 0.8s ease;
            pointer-events: none;
            z-index: 0;
        }

        .product-card:hover .glow {
            opacity: 1;
            animation: chemGlowPulse 2s ease-in-out infinite alternate;
        }

        @keyframes chemGlowPulse {
            0% { transform: scale(0.8); opacity: 0.3; }
            100% { transform: scale(1.2); opacity: 0.8; }
        }

        .product-card:hover {
            transform: translateY(-6px) scale(1.02) !important;
            border-color: rgba(0, 255, 100, 0.15) !important;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 255, 100, 0.05), 0 0 80px rgba(0, 255, 100, 0.03) !important;
        }

        /* --- ХИМИЧЕСКАЯ ИКОНКА (☣) --- */
        .chem-icon-static {
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            font-size: 8rem !important;
            font-weight: 900 !important;
            font-family: 'Arial', sans-serif !important;
            color: rgba(0, 255, 100, 0.03) !important;
            pointer-events: none !important;
            z-index: 0 !important;
            user-select: none !important;
            opacity: 1 !important;
            line-height: 1 !important;
            text-align: center !important;
        }

        .product-card *:not(.chem-icon-static) {
            position: relative !important;
            z-index: 1 !important;
        }

        /* --- ИЗОБРАЖЕНИЕ (МАКСИМАЛЬНО УВЕЛИЧЕННОЕ) --- */
        .product-card-image-container {
            flex-shrink: 0 !important;
            height: 250px !important;
            padding: 10px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
            border-radius: 4px !important;
            overflow: hidden !important;
        }

        .product-card-image-container img {
            max-height: 95% !important;
            max-width: 95% !important;
            object-fit: contain !important;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }

        .product-card:hover .product-card-image-container {
            transform: scale(1.04) !important;
        }

        .product-card:hover .product-card-image-container img {
            transform: scale(1.08) !important;
            filter: drop-shadow(0 0 35px rgba(0, 255, 100, 0.10)) !important;
        }

        /* --- ФУТЕР КАРТОЧКИ --- */
        .product-card-footer {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important;
            padding: 12px 14px 14px !important;
            min-height: 110px !important;
        }

        /* --- НАЗВАНИЕ --- */
        .product-card-name {
            font-family: 'Russo One', 'Oswald', sans-serif !important;
            font-weight: 600 !important;
            font-size: 1rem !important;
            text-transform: uppercase !important;
            letter-spacing: 1.5px !important;
            color: #b8d4c0 !important;
            text-shadow: 0 0 10px rgba(0, 255, 100, 0.02) !important;
            line-height: 1.2 !important;
            margin-bottom: 4px !important;
            display: block !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            min-height: 1.8rem !important;
        }

        .product-card:hover .product-card-name {
            color: #66ffaa !important;
            text-shadow: 0 0 20px rgba(0, 255, 100, 0.2), 0 0 40px rgba(0, 255, 100, 0.1) !important;
        }

        /* --- БЛОК С ЦЕНАМИ --- */
        .product-card-footer div:last-child {
            display: flex !important;
            align-items: center !important;
            flex-wrap: wrap !important;
            gap: 8px !important;
            margin-top: auto !important;
            min-height: 2.2rem !important;
        }

        /* --- ЦЕНА --- */
        .product-card-price {
            font-family: 'Russo One', 'Oswald', sans-serif !important;
            font-weight: 700 !important;
            font-size: 1.2rem !important;
            color: #66ffaa !important;
            text-shadow: 0 0 15px rgba(0, 255, 100, 0.05) !important;
            display: inline-block !important;
            line-height: 1.2 !important;
            margin: 0 !important;
        }

        .product-card:hover .product-card-price {
            color: #66ffaa !important;
            text-shadow: 0 0 25px rgba(0, 255, 100, 0.3) !important;
        }

        /* --- СТАРАЯ ЦЕНА --- */
        .product-card-old-price {
            font-family: 'Roboto Condensed', sans-serif !important;
            font-size: 0.9rem !important;
            color: #5a7a6a !important;
            text-decoration: line-through !important;
            opacity: 0.6 !important;
            display: inline-block !important;
            margin: 0 !important;
        }

        /* --- БЕЙДЖ СКИДКИ --- */
        .product-card-badge-percentage {
            font-family: 'Russo One', sans-serif !important;
            font-size: 0.75rem !important;
            color: #66ffaa !important;
            background: rgba(0, 255, 100, 0.04) !important;
            border: 1px solid rgba(0, 255, 100, 0.04) !important;
            padding: 2px 10px !important;
            clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%) !important;
            display: inline-block !important;
            visibility: visible !important;
        }

        /* ============================================================
           БАННЕР
           ============================================================ */

        .banner {
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
            border-radius: 4px !important;
            overflow: hidden;
            border: 1px solid rgba(0, 255, 100, 0.02) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
            background: rgba(0, 0, 0, 0.3) !important;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .banner:hover {
            transform: scale(1.01);
            border-color: rgba(0, 255, 100, 0.08) !important;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 255, 100, 0.02) !important;
        }

        .banner img {
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }

        .banner:hover img {
            transform: scale(1.02);
        }

        /* ============================================================
           RGB-ПОДСВЕТКА ДЛЯ КНОПОК (БАЛАНС, ПРОФИЛЬ)
           ============================================================ */

        .navbar__btn--profile .navbar__user-avatar {
            border-radius: 50% !important;
            border: 3px solid transparent !important;
            background: rgba(0, 0, 0, 0.3) !important;
            padding: 2px !important;
            animation: chemRgbBorder 4s linear infinite !important;
            box-shadow: 0 0 20px rgba(0, 255, 100, 0.05) !important;
        }

        .navbar__btn--profile {
            border: 2px solid transparent !important;
            background-clip: padding-box !important;
            animation: chemRgbBorder 4s linear infinite !important;
            border-radius: 4px !important;
            padding: 4px 8px !important;
        }

        .navbar__btn--balance {
            position: relative !important;
            background: rgba(0, 0, 0, 0.3) !important;
            border: 2px solid transparent !important;
            border-radius: 4px !important;
            padding: 8px 20px !important;
            animation: chemRgbBorder 4s linear infinite !important;
            color: #8aaa8a !important;
            font-weight: 700 !important;
            text-shadow: 0 0 10px rgba(0, 255, 100, 0.05) !important;
            transition: all 0.4s ease !important;
        }

        .navbar__btn--balance:hover {
            transform: scale(1.05) !important;
            box-shadow: 0 0 30px rgba(0, 255, 100, 0.1), 0 0 60px rgba(0, 200, 150, 0.05) !important;
        }

        @keyframes chemRgbBorder {
            0% { border-color: rgba(0, 255, 100, 0.6); box-shadow: 0 0 15px rgba(0, 255, 100, 0.1); }
            25% { border-color: rgba(0, 200, 255, 0.6); box-shadow: 0 0 15px rgba(0, 200, 255, 0.1); }
            50% { border-color: rgba(100, 255, 0, 0.6); box-shadow: 0 0 15px rgba(100, 255, 0, 0.1); }
            75% { border-color: rgba(0, 255, 200, 0.6); box-shadow: 0 0 15px rgba(0, 255, 200, 0.1); }
            100% { border-color: rgba(0, 255, 100, 0.6); box-shadow: 0 0 15px rgba(0, 255, 100, 0.1); }
        }

        .navbar__btn--balance::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 6px;
            background: linear-gradient(45deg, rgba(0, 255, 100, 0.15), rgba(0, 200, 255, 0.15), rgba(100, 255, 0, 0.15), rgba(0, 255, 200, 0.15), rgba(0, 220, 150, 0.15), rgba(0, 255, 100, 0.15));
            background-size: 400% 400% !important;
            z-index: -1;
            animation: chemRgbBg 6s ease-in-out infinite alternate !important;
            filter: blur(4px);
            opacity: 0.5;
        }

        @keyframes chemRgbBg {
            0% { background-position: 0% 50%; opacity: 0.3; }
            25% { background-position: 50% 0%; opacity: 0.5; }
            50% { background-position: 100% 50%; opacity: 0.3; }
            75% { background-position: 50% 100%; opacity: 0.6; }
            100% { background-position: 0% 50%; opacity: 0.3; }
        }

        .navbar__btn--balance::after {
            content: '☢';
            position: absolute;
            top: -10px;
            right: -6px;
            font-size: 0.7rem;
            color: #00ff88;
            animation: chemPulseIcon 2s ease-in-out infinite;
            text-shadow: 0 0 10px rgba(0, 255, 100, 0.3);
        }

        @keyframes chemPulseIcon {
            0% { opacity: 0.2; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.3); }
            100% { opacity: 0.2; transform: scale(0.8); }
        }

        /* ============================================================
           СКРОЛЛ (ХИМИЧЕСКИЙ)
           ============================================================ */

        ::-webkit-scrollbar {
            width: 4px;
        }
        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #00ff88, #008855);
            border-radius: 4px;
            animation: chemScrollGlow 3s ease-in-out infinite alternate;
        }

        @keyframes chemScrollGlow {
            0% { box-shadow: 0 0 10px rgba(0, 255, 100, 0.05); }
            100% { box-shadow: 0 0 30px rgba(0, 255, 100, 0.15); }
        }

        /* ============================================================
           АНИМАЦИЯ ПОЯВЛЕНИЯ КАРТОЧЕК
           ============================================================ */

        .product-card {
            animation: fadeUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            opacity: 0;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.97);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .product-card:nth-child(1) { animation-delay: 0.03s; }
        .product-card:nth-child(2) { animation-delay: 0.06s; }
        .product-card:nth-child(3) { animation-delay: 0.09s; }
        .product-card:nth-child(4) { animation-delay: 0.12s; }
        .product-card:nth-child(5) { animation-delay: 0.15s; }
        .product-card:nth-child(6) { animation-delay: 0.18s; }
        .product-card:nth-child(7) { animation-delay: 0.21s; }
        .product-card:nth-child(8) { animation-delay: 0.24s; }
        .product-card:nth-child(9) { animation-delay: 0.27s; }
        .product-card:nth-child(10) { animation-delay: 0.30s; }

        /* ============================================================
           АДАПТИВ
           ============================================================ */

        @media (max-width: 768px) {
            .product-card-image-container {
                height: 190px !important;
                padding: 8px !important;
            }
            .product-card-name {
                font-size: 0.85rem !important;
            }
            .product-card-price {
                font-size: 1rem !important;
            }
            .product-card {
                min-height: 300px !important;
            }
            .chem-icon-static {
                font-size: 6rem !important;
            }
            .product-card-footer {
                padding: 10px 12px 12px !important;
                min-height: 90px !important;
            }
            .product-card-old-price {
                font-size: 0.8rem !important;
            }
            .product-card-badge-percentage {
                font-size: 0.65rem !important;
                padding: 1px 8px !important;
            }
        }

        @media (max-width: 480px) {
            .product-card-image-container {
                height: 150px !important;
                padding: 6px !important;
            }
            .product-card-name {
                font-size: 0.75rem !important;
            }
            .product-card-price {
                font-size: 0.9rem !important;
            }
            .product-card {
                min-height: 240px !important;
            }
            .chem-icon-static {
                font-size: 4.5rem !important;
            }
            .product-card-footer {
                padding: 8px 10px 10px !important;
                min-height: 70px !important;
            }
            .product-card-footer div:last-child {
                min-height: 1.8rem !important;
                gap: 4px !important;
            }
            .product-card-old-price {
                font-size: 0.7rem !important;
            }
            .product-card-badge-percentage {
                font-size: 0.6rem !important;
                padding: 1px 6px !important;
            }
        }

        /* ============================================================
           ПРЕЛОАДЕР
           ============================================================ */

        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #050a05;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        #preloader.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* --- ХИМИЧЕСКИЙ ЛОГОТИП В ПРЕЛОАДЕРЕ --- */
        .preloader-logo {
            font-family: 'Russo One', 'Oswald', sans-serif;
            font-size: 3.5rem;
            font-weight: 700;
            color: #66ffaa;
            text-shadow: 0 0 40px rgba(0, 255, 100, 0.2), 0 0 80px rgba(0, 255, 100, 0.1);
            letter-spacing: 4px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: preloaderLogoPulse 2s ease-in-out infinite alternate;
        }

        @keyframes preloaderLogoPulse {
            0% { text-shadow: 0 0 20px rgba(0, 255, 100, 0.1); transform: scale(1); }
            100% { text-shadow: 0 0 60px rgba(0, 255, 100, 0.3), 0 0 100px rgba(0, 255, 100, 0.1); transform: scale(1.02); }
        }

        /* --- ТЕКСТ ЗАГРУЗКИ --- */
        .preloader-text {
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 1.2rem;
            color: #8aaa8a;
            letter-spacing: 6px;
            text-transform: uppercase;
            margin-bottom: 25px;
            opacity: 0.7;
            animation: preloaderTextPulse 1.5s ease-in-out infinite alternate;
        }

        @keyframes preloaderTextPulse {
            0% { opacity: 0.4; letter-spacing: 4px; }
            100% { opacity: 0.9; letter-spacing: 8px; }
        }

        /* --- ХИМИЧЕСКАЯ ИКОНКА (АНИМАЦИЯ) --- */
        .preloader-icon {
            font-size: 4rem;
            color: rgba(0, 255, 100, 0.3);
            animation: preloaderIconSpin 3s linear infinite;
            margin-bottom: 30px;
        }

        @keyframes preloaderIconSpin {
            0% { transform: rotate(0deg) scale(1); opacity: 0.3; }
            50% { transform: rotate(180deg) scale(1.2); opacity: 0.8; }
            100% { transform: rotate(360deg) scale(1); opacity: 0.3; }
        }

        /* --- ПРОГРЕСС-БАР (ТОКСИЧНЫЙ) --- */
        .preloader-bar-container {
            width: 260px;
            height: 3px;
            background: rgba(0, 255, 100, 0.05);
            border-radius: 2px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 255, 100, 0.02);
        }

        .preloader-bar {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, #00ff88, #66ffaa, #00ff88);
            background-size: 200% 100%;
            border-radius: 2px;
            animation: preloaderBarFill 5s ease-in-out forwards, preloaderBarShine 1.5s ease-in-out infinite alternate;
        }

        @keyframes preloaderBarFill {
            0% { width: 0%; }
            20% { width: 15%; }
            40% { width: 35%; }
            60% { width: 55%; }
            80% { width: 78%; }
            95% { width: 95%; }
            100% { width: 100%; }
        }

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

        /* --- ТОКСИЧНЫЕ ЧАСТИЦЫ (ФОН) --- */
        .preloader-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .preloader-particles span {
            position: absolute;
            display: block;
            width: 2px;
            height: 2px;
            background: rgba(0, 255, 100, 0.15);
            border-radius: 50%;
            animation: particlesFloat 8s ease-in-out infinite alternate;
        }

        .preloader-particles span:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
        .preloader-particles span:nth-child(2) { top: 30%; left: 80%; animation-delay: 1s; }
        .preloader-particles span:nth-child(3) { top: 60%; left: 15%; animation-delay: 2s; }
        .preloader-particles span:nth-child(4) { top: 80%; left: 70%; animation-delay: 0.5s; }
        .preloader-particles span:nth-child(5) { top: 20%; left: 50%; animation-delay: 1.5s; }
        .preloader-particles span:nth-child(6) { top: 70%; left: 40%; animation-delay: 2.5s; }
        .preloader-particles span:nth-child(7) { top: 45%; left: 90%; animation-delay: 0.8s; }
        .preloader-particles span:nth-child(8) { top: 90%; left: 25%; animation-delay: 1.8s; }
        .preloader-particles span:nth-child(9) { top: 15%; left: 75%; animation-delay: 3s; }
        .preloader-particles span:nth-child(10) { top: 55%; left: 5%; animation-delay: 0.3s; }

        @keyframes particlesFloat {
            0% { transform: translate(0, 0) scale(1); opacity: 0.2; }
            100% { transform: translate(20px, -30px) scale(2); opacity: 0.8; }
        }

        /* ============================================================
           ОСНОВНОЙ КОНТЕНТ (СКРЫТ ДО ЗАГРУЗКИ)
           ============================================================ */

        #main-content {
            opacity: 0;
            transition: opacity 0.8s ease;
        }

        #main-content.visible {
            opacity: 1;
        }
    </style>
</head>
<body>

    <!-- ============================================================
         ПРЕЛОАДЕР
         ============================================================ -->
    <div id="preloader">
        <!-- ТОКСИЧНЫЕ ЧАСТИЦЫ -->
        <div class="preloader-particles">
            <span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span>
        </div>

        <!-- ЛОГОТИП -->
        <div class="preloader-logo">☣ DEAD FOG RP</div>

        <!-- ХИМИЧЕСКАЯ ИКОНКА -->
        <div class="preloader-icon">☣</div>

        <!-- ТЕКСТ -->
        <div class="preloader-text">Загрузка, пожалуйста подождите</div>

        <!-- ПРОГРЕСС-БАР -->
        <div class="preloader-bar-container">
            <div class="preloader-bar"></div>
        </div>
    </div>

    <!-- ============================================================
         ОСНОВНОЙ КОНТЕНТ
         ============================================================ -->
    <div id="main-content">
        <!-- ТУМАН -->
        <div class="fog-layer-1"></div>
        <div class="fog-layer-2"></div>
        <div class="fog-layer-3"></div>

        <!-- ============================================================
             ВАШ КОНТЕНТ (ПРИМЕР)
             ============================================================ -->
        <div style="position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 20px;">

            <!-- ЛОГОТИП -->
            <div class="navbar__brand" style="text-align: center; padding: 30px 0;">
                <p style="font-size: 3rem; color: #66ffaa;">☣ DEAD FOG RP</p>
                <p style="font-size: 1rem; color: #5a7a6a; letter-spacing: 8px; text-transform: uppercase;">Химическая угроза</p>
            </div>

            <!-- БАННЕР -->
            <div class="banner" style="margin-bottom: 30px; min-height: 250px;">
                <div style="padding: 40px; text-align: center;">
                    <p style="font-size: 2rem; color: #66ffaa; font-family: 'Russo One', sans-serif; text-shadow: 0 0 30px rgba(0,255,100,0.1);">☣ ЗОНА ОТЧУЖДЕНИЯ</p>
                    <p style="font-size: 1.2rem; color: #8aaa8a; letter-spacing: 4px;">Всё для выживания</p>
                </div>
            </div>

            <!-- КНОПКИ КАТЕГОРИЙ -->
            <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px;">
                <button class="app-button app-button--active">Все</button>
                <button class="app-button">Вооружение</button>
                <button class="app-button">Амуниция</button>
                <button class="app-button">Сеты</button>
                <button class="app-button">Транспорт</button>
            </div>

            <!-- ПОЛЕ ПОИСКА -->
            <div style="margin-bottom: 30px;">
                <input type="text" class="text-input" placeholder="Поиск товара..." style="width: 100%;">
            </div>

            <!-- СЕТКА КАРТОЧЕК (ПРИМЕР) -->
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;">

                <!-- КАРТОЧКА 1 -->
                <div class="product-card">
                    <div class="chem-icon-static">☣</div>
                    <div class="line-horizontal"></div>
                    <div class="glow"></div>
                    <div class="product-card-image-container">
                        <img src="https://via.placeholder.com/400x250/1a2a1a/66ffaa?text=AK-12" alt="AK-12">
                    </div>
                    <div class="product-card-footer">
                        <span class="product-card-name">AK-12</span>
                        <div>
                            <span class="product-card-price">3 500 ₽</span>
                            <span class="product-card-old-price">5 500 ₽</span>
                            <span class="product-card-badge-percentage">-40%</span>
                        </div>
                    </div>
                </div>

                <!-- КАРТОЧКА 2 -->
                <div class="product-card">
                    <div class="chem-icon-static">☣</div>
                    <div class="line-horizontal"></div>
                    <div class="glow"></div>
                    <div class="product-card-image-container">
                        <img src="https://via.placeholder.com/400x250/1a2a1a/66ffaa?text=HK-416" alt="HK-416">
                    </div>
                    <div class="product-card-footer">
                        <span class="product-card-name">HK-416</span>
                        <div>
                            <span class="product-card-price">6 500 ₽</span>
                            <span class="product-card-old-price">8 000 ₽</span>
                            <span class="product-card-badge-percentage">-19%</span>
                        </div>
                    </div>
                </div>

                <!-- КАРТОЧКА 3 -->
                <div class="product-card">
                    <div class="chem-icon-static">☣</div>
                    <div class="line-horizontal"></div>
                    <div class="glow"></div>
                    <div class="product-card-image-container">
                        <img src="https://via.placeholder.com/400x250/1a2a1a/66ffaa?text=DVL-10" alt="DVL-10">
                    </div>
                    <div class="product-card-footer">
                        <span class="product-card-name">DVL-10</span>
                        <div>
                            <span class="product-card-price">10 000 ₽</span>
                            <span class="product-card-old-price">11 000 ₽</span>
                            <span class="product-card-badge-percentage">-9%</span>
                        </div>
                    </div>
                </div>

                <!-- КАРТОЧКА 4 -->
                <div class="product-card">
                    <div class="chem-icon-static">☣</div>
                    <div class="line-horizontal"></div>
                    <div class="glow"></div>
                    <div class="product-card-image-container">
                        <img src="https://via.placeholder.com/400x250/1a2a1a/66ffaa?text=Thor" alt="Thor">
                    </div>
                    <div class="product-card-footer">
                        <span class="product-card-name">Бронежилет Thor</span>
                        <div>
                            <span class="product-card-price">3 700 ₽</span>
                            <span class="product-card-old-price">4 500 ₽</span>
                            <span class="product-card-badge-percentage">-18%</span>
                        </div>
                    </div>
                </div>

                <!-- КАРТОЧКА 5 -->
                <div class="product-card">
                    <div class="chem-icon-static">☣</div>
                    <div class="line-horizontal"></div>
                    <div class="glow"></div>
                    <div class="product-card-image-container">
                        <img src="https://via.placeholder.com/400x250/1a2a1a/66ffaa?text=BTR-70" alt="BTR-70">
                    </div>
                    <div class="product-card-footer">
                        <span class="product-card-name">BTR-70</span>
                        <div>
                            <span class="product-card-price">24 000 ₽</span>
                            <span class="product-card-old-price">35 000 ₽</span>
                            <span class="product-card-badge-percentage">-31%</span>
                        </div>
                    </div>
                </div>

                <!-- КАРТОЧКА 6 -->
                <div class="product-card">
                    <div class="chem-icon-static">☣</div>
                    <div class="line-horizontal"></div>
                    <div class="glow"></div>
                    <div class="product-card-image-container">
                        <img src="https://via.placeholder.com/400x250/1a2a1a/66ffaa?text=Altyn" alt="Altyn">
                    </div>
                    <div class="product-card-footer">
                        <span class="product-card-name">Шлем Алтын</span>
                        <div>
                            <span class="product-card-price">2 500 ₽</span>
                            <span class="product-card-old-price">4 000 ₽</span>
                            <span class="product-card-badge-percentage">-38%</span>
                        </div>
                    </div>
                </div>

            </div>

            <!-- ФУТЕР -->
            <div style="text-align: center; padding: 40px 0 20px; border-top: 1px solid rgba(0,255,100,0.05); margin-top: 30px;">
                <p style="font-size: 0.8rem; color: #5a7a6a; letter-spacing: 2px;">
                    ☣ DEAD FOG RP · 2026 · Химическая угроза
                </p>
            </div>

        </div>
    </div>

    <!-- ============================================================
         СКРИПТ ПРЕЛОАДЕРА (5 СЕКУНД)
         ============================================================ -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Через 5 секунд скрываем прелоадер и показываем контент
            setTimeout(function() {
                const preloader = document.getElementById('preloader');
                const mainContent = document.getElementById('main-content');

                preloader.classList.add('hidden');
                mainContent.classList.add('visible');

                // Удаляем прелоадер из DOM после анимации
                setTimeout(function() {
                    preloader.style.display = 'none';
                }, 900);
            }, 5000);
        });
    </script>

</body>
</html>