/* =========================================
           CSS ПЕРЕМЕННЫЕ (Binance Dark Theme)
           ========================================= */
        :root {
            --bg-main: #0b0e11;
            --bg-card: #1e2329;
            --bg-card-hover: #2b3139;
            --accent: #fcd535;
            --accent-hover: #f0c808;
            --text-primary: #eaecef;
            --text-secondary: #848e9c;
            --border-color: #2b3139;
            --success: #0ecb81;
            --danger: #f6465d;
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            --transition-slow: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* =========================================
           БАЗОВЫЕ СТИЛИ
           ========================================= */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: var(--font-family);
            background-color: var(--bg-main);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        a { color: var(--accent); text-decoration: none; transition: var(--transition); }
        a:hover { color: var(--accent-hover); }
        ul { list-style: none; }
        img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
        
        /* Типографика */
        h1, h2, h3, h4 { color: var(--text-primary); font-weight: 600; margin-bottom: 1rem; }
        h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2; }
        h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; display: inline-block; margin-bottom: 2rem; }
        h3 { font-size: 1.25rem; }
        .text-muted { color: var(--text-secondary); }
        .text-center { text-align: center; }
        .section-label { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 8px; display: block; text-transform: uppercase; letter-spacing: 0.5px; }

        /* Контейнер и секции */
        .container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
        section { padding: 80px 0; border-bottom: 1px solid var(--border-color); }
        .bg-card { background-color: var(--bg-card); }

        /* =========================================
           АНИМАЦИИ И ПЛАВНОСТЬ
           ========================================= */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: var(--transition-slow);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes fadeInUpCard {
            from { opacity: 0; transform: translateY(30px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .catalog-item {
            opacity: 0;
            animation: fadeInUpCard 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        .fade-element {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        /* =========================================
           КНОПКИ И ЧИПЫ
           ========================================= */
        .btn {
            display: inline-flex; justify-content: center; align-items: center;
            padding: 12px 24px; font-weight: 600; border-radius: 6px;
            border: none; cursor: pointer; transition: var(--transition);
            font-size: 1rem; text-align: center; font-family: inherit;
        }
        .btn-primary { background-color: var(--accent); color: #000; }
        .btn-primary:hover { background-color: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(252, 213, 53, 0.25); }
        .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(252, 213, 53, 0.2); }
        
        .btn-outline { background-color: transparent; border: 1px solid var(--accent); color: var(--accent); }
        .btn-outline:hover { background-color: rgba(252, 213, 53, 0.1); transform: translateY(-2px); }
        .btn-outline:active { transform: translateY(0); }
        
        .btn-outline-gray { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-primary); }
        .btn-outline-gray.active, .btn-outline-gray:hover { border-color: var(--accent); color: var(--accent); }
        .btn-block { width: 100%; }

        .variants-container { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
        .btn-variant {
            background: var(--bg-main);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.25s ease;
            font-family: inherit;
        }
        .btn-variant:hover { border-color: var(--accent); color: var(--accent); background: rgba(252, 213, 53, 0.05); }
        .btn-variant.active {
            background: rgba(252, 213, 53, 0.1);
            border-color: var(--accent);
            color: var(--accent);
            font-weight: 600;
            transform: scale(1.03);
        }
        
        .spec-table { width: 100%; font-size: 0.9rem; }
        .spec-table td { padding: 6px 0; border-bottom: 1px solid var(--border-color); transition: var(--transition); }
        .spec-table td:last-child { text-align: right; color: var(--text-primary); font-weight: 500; }
        .spec-table td:first-child { color: var(--text-secondary); }

        /* =========================================
           ШАПКА И НАВИГАЦИЯ
           ========================================= */
        header { background-color: var(--bg-card); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--border-color); transition: var(--transition); }
        .navbar { display: flex; justify-content: space-between; align-items: center; height: 70px; }
        .logo { font-size: 1.5rem; font-weight: bold; color: var(--accent); display: flex; align-items: center; gap: 10px; transition: var(--transition); }
        .logo:hover { transform: scale(1.05); }
        
        .nav-links { display: flex; gap: 24px; }
        .nav-links a { color: var(--text-primary); font-weight: 500; font-size: 0.95rem; position: relative; }
        .nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: var(--accent); transition: var(--transition); }
        .nav-links a:hover::after { width: 100%; }
        .nav-links a:hover { color: var(--accent); }
        
        .header-actions { display: flex; align-items: center; gap: 15px; }
        .bot-link { background: var(--bg-card-hover); padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border-color); font-size: 0.9rem; font-weight: 600; transition: var(--transition); }
        .bot-link:hover { border-color: var(--accent); background: rgba(252, 213, 53, 0.1); transform: translateY(-2px); }

        .burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 5px; }
        .burger span { display: block; width: 25px; height: 3px; background-color: var(--text-primary); transition: var(--transition); border-radius: 2px; }
        .burger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); background-color: var(--accent); }
        .burger.active span:nth-child(2) { opacity: 0; }
        .burger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background-color: var(--accent); }

        .mobile-nav {
            position: fixed; top: 70px; left: -100%; width: 100%; height: calc(100vh - 70px);
            background-color: rgba(30, 35, 41, 0.98); backdrop-filter: blur(10px); flex-direction: column; padding: 20px;
            transition: var(--transition-slow); z-index: 999; overflow-y: auto; border-top: 1px solid var(--border-color);
        }
        .mobile-nav.active { left: 0; }
        .mobile-nav a { display: block; padding: 15px 0; font-size: 1.2rem; border-bottom: 1px solid var(--border-color); color: var(--text-primary); transition: var(--transition); }
        .mobile-nav a:hover { padding-left: 10px; color: var(--accent); }

        /* =========================================
           СЕТКИ (ГРИДЫ)
           ========================================= */
        .grid { display: grid; gap: 24px; }
        .grid-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-3 { grid-template-columns: repeat(3, 1fr); }
        .grid-4 { grid-template-columns: repeat(4, 1fr); }

        @media (max-width: 992px) {
            .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
        }

        /* Карточки */
        .card { background-color: var(--bg-card); padding: 24px; border-radius: 12px; border: 1px solid var(--border-color); transition: var(--transition); display: flex; flex-direction: column; }
        .card:hover { border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,0.3); transform: translateY(-5px); }
        .card-img-placeholder { width: 100%; height: 200px; background-color: var(--bg-card-hover); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--text-secondary); text-align: center; border: 1px dashed var(--border-color); }
        .badge { display: inline-block; background: rgba(14, 203, 129, 0.1); color: var(--success); padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; margin-bottom: 12px; width: max-content; transition: var(--transition);}

        /* =========================================
           СЕКЦИИ И ФОРМЫ
           ========================================= */
        .hero { text-align: center; padding: 100px 20px; background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-main) 100%); position: relative; }
        .hero p { font-size: 1.25rem; max-width: 700px; margin: 0 auto 2.5rem; color: var(--text-secondary); }
        .hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

        .catalog-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 24px; }
        .filter-group { display: flex; gap: 10px; flex-wrap: wrap; }

        .form-container { background-color: var(--bg-card); padding: 32px; border-radius: 12px; border: 1px solid var(--border-color); transition: var(--transition); }
        .form-container:hover { border-color: rgba(252, 213, 53, 0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
        .form-group { margin-bottom: 20px; text-align: left; }
        .form-group label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 0.9rem; transition: var(--transition); }
        input, select, textarea { width: 100%; padding: 12px 16px; border-radius: 6px; border: 1px solid var(--border-color); background-color: var(--bg-main); color: var(--text-primary); font-family: inherit; font-size: 1rem; transition: var(--transition); }
        input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background-color: var(--bg-card-hover); box-shadow: 0 0 0 3px rgba(252, 213, 53, 0.1); }
        textarea { resize: vertical; min-height: 100px; }
        .checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; transition: var(--transition); }
        .checkbox-label:hover { color: var(--text-primary); }
        .checkbox-label input { width: auto; margin-top: 4px; cursor: pointer; }

        /* =========================================
           КОМПАКТНЫЙ КАЛЬКУЛЯТОР
           ========================================= */
        .calc-box { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; max-width: 1000px; margin: 0 auto; padding: 24px; }
        .calc-result-panel { background: var(--bg-main); padding: 24px; border-radius: 8px; border-left: 4px solid var(--accent); transition: var(--transition); display: flex; flex-direction: column; justify-content: center; }
        .result-item { margin-bottom: 16px; }
        .result-item span { display: block; color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 4px; }
        .result-item strong { font-size: 1.5rem; color: var(--accent); transition: color 0.3s; }
        
        /* Спец. стили для сжатия внутри калькулятора */
        .calc-box .variants-container { gap: 6px; margin-bottom: 12px; }
        .calc-box .btn-variant { padding: 4px 10px; font-size: 0.8rem; }
        .calc-box .section-label { margin-bottom: 6px; font-size: 0.75rem; }
        
        .calc-compact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
        .profit-calc { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; padding: 18px; }
        .profit-left { display: flex; flex-direction: column; gap: 12px; }
        .profit-right { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; }
        .profit-title { margin-bottom: 10px; font-size: 1.4rem; }
        .profit-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
        .profit-row span { color: var(--text-secondary); }
        .profit-row strong { color: var(--text-primary); text-align: right; font-size: 1rem; }
        .coin-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(252, 213, 53, 0.12); border: 1px solid rgba(252, 213, 53, 0.4); color: var(--accent); font-weight: 600; width: fit-content; font-size: 0.9rem; }
        .calc-method-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
        .calc-method-tabs .btn { padding: 8px 10px; font-size: 0.85rem; }
        .period-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
        .period-grid label { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 0.88rem; cursor: pointer; }
        .period-grid input[type="radio"] { width: auto; }
        .profit-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .profit-calc .form-group { margin-bottom: 10px; }
        .profit-calc label { margin-bottom: 6px; }
        .card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
        .card-action-wide { grid-column: 1 / -1; }
        .product-modal-content { max-width: 720px; }
        .product-spec-table td { padding: 10px 0; }
        .product-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

        /* =========================================
           МОДАЛЬНОЕ ОКНО
           ========================================= */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.8); z-index: 2000;
            display: flex; justify-content: center; align-items: center;
            opacity: 0; visibility: hidden; transition: var(--transition-slow);
            padding: 20px; backdrop-filter: blur(8px);
        }
        .modal-overlay.active { opacity: 1; visibility: visible; }
        .modal-content {
            background: var(--bg-card); width: 100%; max-width: 500px;
            padding: 40px 30px; border-radius: 16px; border: 1px solid var(--border-color);
            position: relative; transform: translateY(50px) scale(0.95); transition: var(--transition-slow);
            box-shadow: 0 25px 50px rgba(0,0,0,0.5);
        }
        .modal-overlay.active .modal-content { transform: translateY(0) scale(1); }
        .modal-close {
            position: absolute; top: 15px; right: 20px; font-size: 1.8rem;
            color: var(--text-secondary); cursor: pointer; background: none; border: none; transition: var(--transition);
        }
        .modal-close:hover { color: var(--accent); transform: rotate(90deg); }

        /* =========================================
           ФУТЕР
           ========================================= */
        footer { background-color: var(--bg-card); padding: 60px 0 30px; border-top: 1px solid var(--border-color); }
        .footer-bottom { text-align: center; border-top: 1px solid var(--border-color); padding-top: 24px; margin-top: 40px; font-size: 0.85rem; color: var(--text-secondary); }

        /* =========================================
           АДАПТИВНОСТЬ (МЕДИА-ЗАПРОСЫ)
           ========================================= */
        @media (max-width: 992px) {
            .calc-box { grid-template-columns: 1fr; }
            .profit-calc { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .nav-links { display: none; }
            .burger { display: flex; }
            .header-actions .btn-primary { display: none; }
            
            section { padding: 60px 0; }
            .hero { padding: 80px 20px 60px; }
            .hero-btns { flex-direction: column; width: 100%; }
            .hero-btns .btn { width: 100%; }
            
            h2 { font-size: 1.75rem; }
            .catalog-controls { flex-direction: column; align-items: stretch; }
            .filter-group { justify-content: center; }
            .calc-compact-grid { grid-template-columns: 1fr; gap: 10px; }
            .period-grid { grid-template-columns: 1fr; }
            .profit-inputs { grid-template-columns: 1fr; }
            .calc-method-tabs { grid-template-columns: 1fr; }
            .product-modal-actions { grid-template-columns: 1fr; }
        }

        .btn-sm { padding: 8px 16px; font-size: 0.9rem; }
        .btn-mobile-cta { margin-top: 20px; }
        .btn-load-more { display: none; padding: 12px 40px; }
        .btn-form-submit { padding: 14px; }
        .btn-support { padding: 10px; }
        .mt-40 { margin-top: 40px; }
        .mb-0 { margin-bottom: 0; }
        .mb-15 { margin-bottom: 15px; }
        .mb-20 { margin-bottom: 20px; }
        .mb-24 { margin-bottom: 24px; }
        .mb-25 { margin-bottom: 25px; }
        .mb-40 { margin-bottom: 40px; }
        .d-block { display: block; }
        .items-center { align-items: center; }
        .items-start { align-items: start; }
        .text-left { text-align: left; }
        .text-sm { font-size: 0.9rem; }
        .text-xs { font-size: 0.8rem; }
        .text-accent { color: var(--accent); }
        .text-success { color: var(--success); }
        .lh-11 { line-height: 1.1; }
        .label-sm { font-size: 0.8rem; }
        .hero-anim-1 { animation: fadeInUpCard 0.8s ease forwards; }
        .hero-anim-2 { animation: fadeInUpCard 1s ease forwards; opacity: 0; }
        .hero-anim-3 { animation: fadeInUpCard 1.2s ease forwards; opacity: 0; }
        .hero-anim-4 { margin-top: 50px; animation: fadeInUpCard 1.4s ease forwards; opacity: 0; }
        .hero-image-placeholder { height: auto; padding: 40px; border: none; background: transparent; }
        .datacenter-chips { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
        .chip { background: var(--bg-card); padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border-color); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .feature-list { margin-bottom: 30px; color: var(--text-secondary); }
        .feature-list li { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
        .datacenter-image { height: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: none; }
        .datacenter-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
        .consult-intro { max-width: 700px; margin: 0 auto 40px; }
        .icon-title { display: flex; align-items: center; gap: 8px; }
        .icon-lg { font-size: 1.2rem; }
        .calc-intro { margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }
        .calc-equipment-box { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 16px; margin-top: 6px; }
        .input-compact { padding: 8px 12px; }
        .input-calc-power { transition: var(--transition); }
        .calc-note { font-size: 0.75rem; color: var(--text-secondary); display: block; margin-top: 8px; }
        .calc-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
        .result-item-sep { margin-bottom: 15px; padding-top: 15px; border-top: 1px solid var(--border-color); }
        .result-value-md { font-size: 1.25rem; }
        .result-value-xl { font-size: 2.2rem; }
        .news-card { padding: 0; overflow: hidden; display: block; }
        .news-image { border-radius: 0; border: none; border-bottom: 1px solid var(--border-color); margin: 0; height: 180px; background-color: #1a1e24; }
        .news-body { padding: 24px; }
        .news-tag { font-size: 0.8rem; color: var(--accent); font-weight: 600; text-transform: uppercase; }
        .news-title { margin: 12px 0; font-size: 1.15rem; line-height: 1.4; }
        .news-link { font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
        .contacts-list { margin-bottom: 30px; font-size: 1.1rem; line-height: 1.8; }
        .contact-row { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
        .contact-link { color: var(--text-primary); transition: color 0.3s; }
        .map-placeholder { height: 250px; border-radius: 12px; border: none; background: #1a1e24; display: flex; flex-direction: column; justify-content: center; }
        .map-icon { font-size: 2rem; margin-bottom: 10px; }
        .form-title { margin-bottom: 20px; font-size: 1.5rem; }
        .footer-list { display: flex; flex-direction: column; gap: 12px; }
        .footer-legal { font-size: 0.85rem; color: var(--text-secondary); }
        .link-transition { transition: color 0.3s; }
        .link-underline { text-decoration: underline; }
        .modal-title { margin-bottom: 5px; font-size: 1.6rem; }
        .modal-subtitle { margin-bottom: 24px; font-size: 0.95rem; }
        .form-success { display: none; color: var(--success); margin-top: 15px; text-align: center; font-weight: 500; animation: fadeInUpCard 0.4s ease forwards; }
        .catalog-image-wrap { height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 8px; background: var(--bg-card-hover); overflow: hidden; }
        .catalog-image-wrap-compact { height: 250px; margin-bottom: 20px; }
        .catalog-image { max-height: 100%; max-width: 100%; object-fit: contain; }
        .catalog-brand-title { font-size: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 20px; }
        .variants-grow { margin-bottom: auto; }
        .catalog-price { color: var(--accent); margin: 20px 0 15px; font-size: 1.6rem; font-weight: 700; }
        .badge-danger { background: rgba(246, 70, 93, 0.1); color: var(--danger); }
        .catalog-item-title { font-size: 1.1rem; line-height: 1.3; margin-bottom: 15px; }
        .spec-table-spaced { margin-top: auto; margin-bottom: 15px; }
        .catalog-flat-price { color: var(--accent); margin: auto 0 15px; font-size: 1.35rem; }
        .img-fallback { height: 100%; width: 100%; border: none; margin: 0; }