/* === BASE STYLES === */
        :root {
            --primary: #3c74d7; 
            --secondary: #00d2ff;
            --dark: #0a192f;
            --light: #f8f9fa;
            --white: #ffffff;
            --text: #444;
            --success: #28a745;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Open Sans', sans-serif; color: var(--text); line-height: 1.6; overflow-x: hidden; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        
        /* === 1. TOP NAV === */
        .top-nav { background: #fff; border-bottom: 1px solid #eee; padding: 10px 0; font-size: 13px; color: #333; font-weight: 500; }
        .flex-row { display: flex; justify-content: space-between; align-items: center; }
        .top-left-links a { text-decoration: none; color: #333; margin-right: 25px; transition: 0.3s; display: inline-flex; align-items: center; gap: 5px; }
        .top-left-links a:hover { color: var(--primary); }
        .top-right-actions { display: flex; align-items: center; gap: 20px; }
        .contact-phone { display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: rgb(17, 24, 39);
    cursor: pointer;
    font-size: 18px; }
        .social-icons { display: flex; gap: 10px; align-items: center; border-right: 1px solid #ddd; padding-right: 20px; }
        .social-icons a { font-size: 18px; color: #333; transition: 0.3s; }
        .social-icons a.wa:hover { color: #25D366; }
        .social-icons a.tg:hover { color: #0088cc; }
        .lang-switcher a { text-decoration: none; color: #333; font-weight: 600; display: flex; align-items: center; gap: 5px; }

        /* === 2. MIDDLE HEADER === */
        .middle-header { background: #fff; padding: 25px 0; position: relative; z-index: 1001; }
        .middle-header .container { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
        .logo { font-size: 26px; font-weight: 700; font-family: 'Montserrat'; }
        .logo a { text-decoration: none; color: var(--dark); }
        .header-search-form { flex: 1; max-width: 600px; display: flex; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
        .header-search-form input { flex: 1; padding: 12px 15px; border: none; outline: none; font-size: 14px; color: #333; }
        .header-search-form button { background: #f8f9fa; border: none; border-left: 1px solid #e0e0e0; padding: 0 25px; font-weight: 600; cursor: pointer; color: #111; transition: 0.3s; display: flex; align-items: center; gap: 8px; }
        .header-search-form button:hover { background: #e9ecef; }
        .header-tools { display: flex; align-items: center; gap: 30px; }
        .cart-icon { position: relative; color: #111; font-size: 22px; text-decoration: none; }
        .cart-badge { position: absolute; top: -8px; right: -12px; background: #e74c3c; color: white; font-size: 11px; font-weight: bold; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .client-login { display: flex; align-items: center; gap: 10px; color: #111; text-decoration: none; font-weight: 600; font-size: 15px; }
        .client-login i { font-size: 20px; }
        .menu-toggle { display: none; font-size: 24px; color: #111; cursor: pointer; }

        /* === 3. BOTTOM NAV (DARK) === */
        .bottom-nav { background: #0f172a; position: relative; z-index: 1000; }
        .nav-links { display: flex; list-style: none; align-items: center; margin: 0; padding: 0; }
        .nav-links > li > a { text-decoration: none; color: #fff; font-weight: 600; font-size: 15px; padding: 20px 25px; display: flex; align-items: center; transition: 0.3s; }
        .nav-links > li > a:hover { background: rgba(255,255,255,0.1); }

        /* === MEGA MENU STYLES === */
        .has-dropdown { position: static; }
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); /* Идеальное центрирование */
    width: calc(100% - 40px); /* Учитываем отступы экрана на небольших мониторах */
    max-width: 1160px; /* Точная внутренняя ширина вашего контейнера (1200px - 40px) */
    background: #fff;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-top: 1px solid #eee;
    border-radius: 0 0 10px 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 30px;
}       h4 ,p {text-decoration: none;}
        .has-dropdown:hover .mega-menu { opacity: 1; visibility: visible; }
        .mega-menu-grid { display: grid; gap: 30px; }
        .mega-menu-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
        .mega-menu-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
        /* Убираем подчеркивание у всей карточки при наведении */
.nav-links li a.mega-item, 
.nav-links li a.mega-item:hover { 
    text-decoration: none !important; 
}

/* Убираем подчеркивание у слова "Անցնել ->" при наведении */
.mega-item:hover .mega-link-text { 
    text-decoration: none !important; 
}
        /* Исправление сплющивания карточек мега-меню */
        .nav-links li a.mega-item { display: flex; flex-direction: column; align-items: flex-start; padding: 15px; white-space: normal; line-height: 1.4; color: #333; font-weight: 400; border-radius: 8px; transition: 0.3s; border: 1px solid transparent; }
        .nav-links li a.mega-item:hover { transform: translateY(-3px); border-color: #eee; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
        .mega-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; width: 48px; height: 48px; background: var(--primary); color: #fff; font-size: 20px; border-radius: 8px; }
        .mega-item h4 { color: #1a202c; font-size: 15px; margin-bottom: 8px; font-family: 'Montserrat', sans-serif; font-weight: 700; width: 100%; text-align: left; }
        .mega-item p { font-size: 13px; color: #718096; line-height: 1.4; margin-bottom: 15px; width: 100%; text-align: left; }
        .mega-link-text { color: var(--primary); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 5px; width: 100%; text-align: left; }

        /* === SECTIONS === */
        .hero { background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%); color: var(--white); padding: 80px 0; text-align: center; }
        .hero h1 { font-size: 3rem; font-family: 'Montserrat'; margin-bottom: 20px; }
        .domain-search { max-width: 700px; margin: 40px auto; background: rgba(255,255,255,0.1); padding: 30px; border-radius: 10px; backdrop-filter: blur(5px); }
        .search-group { display: flex; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
        .search-group input { flex: 1; padding: 18px; border: none; border-radius: 5px 0 0 5px; font-size: 16px; outline: none; color: #333; }
        .search-group button { padding: 0 35px; background: var(--secondary); border: none; border-radius: 0 5px 5px 0; cursor: pointer; font-weight: 700; color: var(--dark); transition: 0.3s; }
        .search-group button:hover { background: #fff; }

        .trust-bar { display: flex; justify-content: space-around; padding: 30px 0; background: #fff; border-bottom: 1px solid #eee; margin-top: -50px; position: relative; z-index: 10; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .trust-item { font-weight: 600; color: var(--dark); display: flex; align-items: center; gap: 10px; }
        .trust-item i { color: var(--primary); font-size: 20px; }

        .services-detailed { padding: 100px 0; }
        .service-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; }
        .check-list { list-style: none; margin: 20px 0; }
        .check-list li { margin-bottom: 10px; font-weight: 500; }
        .check-list i { color: #27ae60; margin-right: 10px; }
        .btn-secondary { display: inline-block; padding: 12px 25px; border: 2px solid var(--primary); color: var(--primary); text-decoration: none; border-radius: 5px; font-weight: 700; transition: 0.3s; }
        .btn-secondary:hover { background: var(--primary); color: #fff; }

        .pricing { padding: 80px 0; background: var(--light); }
        .section-title { text-align: center; font-size: 2.5rem; margin-bottom: 50px; font-family: 'Montserrat'; }
        .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
        .card { background: var(--white); padding: 40px; border-radius: 15px; text-align: center; border: 1px solid #eee; transition: 0.3s; display: flex; flex-direction: column; }
        .card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
        .card.featured { border: 2px solid var(--primary); position: relative; }
        .badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--secondary); padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: bold; }
        .price { font-size: 2.5rem; color: var(--primary); margin: 20px 0; font-weight: 700; }
        .price span { font-size: 1rem; color: #888; }
        .card ul { list-style: none; margin-bottom: 30px; text-align: left; flex-grow: 1; }
        .card ul li { margin-bottom: 12px; }
        .card ul li i { color: var(--success); margin-right: 10px; }
        .btn-order { display: block; background: var(--primary); color: white; text-decoration: none; padding: 15px; border-radius: 5px; font-weight: 700; transition: 0.3s; }
        .btn-order:hover { opacity: 0.9; }

        .faq { padding: 80px 0; }
        .faq-item { border-bottom: 1px solid #eee; padding: 20px 0; cursor: pointer; }
        .faq-item h4 { font-family: 'Montserrat'; margin-bottom: 10px; }
        .faq-item p { display: none; color: #666; }

        footer { background: var(--dark); color: #fff; padding: 60px 0 20px; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 40px; }
        .footer-grid h4 { margin-bottom: 20px; font-family: 'Montserrat'; }
        .footer-grid ul { list-style: none; }
        .footer-grid ul li a { color: #ccc; text-decoration: none; line-height: 2; transition: 0.3s; }
        .footer-grid ul li a:hover { color: var(--secondary); }
        .copy { text-align: center; border-top: 1px solid #222; padding-top: 20px; font-size: 14px; color: #888; }

        /* === MOBILE STYLES === */
        @media (max-width: 768px) {
            .top-nav { display: none; } /* Скрываем верхнюю серую полосу на телефонах */
            .middle-header .container { flex-wrap: wrap; }
            .header-search-form { order: 3; width: 100%; max-width: 100%; margin-top: 15px; }
            .client-login span { display: none; } 
            .menu-toggle { display: block; }
            
            /* Навигация на мобильных */
            .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: #0f172a; margin: 0; padding: 0; }
            .nav-links.active { display: flex; }
            .nav-links > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); }
            .nav-links > li > a { justify-content: space-between; padding: 15px 20px; }
            
            /* Аккордеон мега-меню */
            .has-dropdown { display: flex; flex-direction: column; position: relative; }
            .mega-menu { position: static; opacity: 1; visibility: visible; box-shadow: none; padding: 0 20px 15px; display: none; border-radius: 0; background: #fff; }
            .has-dropdown.mobile-open .mega-menu { display: block; }
            .has-dropdown.mobile-open > a i { transform: rotate(180deg); }
            .mega-menu-grid { grid-template-columns: 1fr !important; gap: 10px; }
            
            .nav-links li a.mega-item { padding: 10px; }
            .mega-icon { width: 35px; height: 35px; font-size: 14px; margin-bottom: 10px; }
            
            .hero h1 { font-size: 2rem; }
            .search-group { flex-direction: column; }
            .search-group input, .search-group button { border-radius: 5px; width: 100%; margin-bottom: 10px; padding: 15px; }
            .trust-bar { flex-direction: column; gap: 20px; margin-top: 20px; text-align: center; }
            .service-row { grid-template-columns: 1fr; text-align: center; }
        }
        /* Выпадающее меню языков */
        .lang-switcher { position: relative; padding: 10px 0; }
        .lang-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 5px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            list-style: none;
            padding: 5px 0;
            min-width: 120px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            z-index: 1100;
        }
        /* Показываем меню при наведении */
        .lang-switcher:hover .lang-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        /* Стили для ссылок внутри меню */
        .lang-dropdown li a {
            padding: 10px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #444;
            text-decoration: none;
            font-weight: 500;
            transition: 0.2s;
        }
        .lang-dropdown li a:hover {
            background: #f8f9fa;
            color: var(--primary);
        }
        .lang-dropdown img {
            width: 20px;
            border-radius: 3px;
        }
        /* === MOBILE STYLES (Полная адаптация) === */
        @media (max-width: 768px) {
            /* 1. Верхняя полоса - оставляем только язык и телефон */
            .top-left-links, .social-icons { display: none; }
            .top-nav .flex-row { justify-content: center; }
            .top-right-actions { width: 100%; justify-content: space-between; gap: 10px; }
            .contact-phone { font-size: 14px; }
            .lang-switcher { padding: 0; }
            
            /* 2. Шапка, логотип и поиск */
            .middle-header { padding: 15px 0; }
            .middle-header .container { flex-wrap: wrap; }
            .logo a img { width: 120px !important; } /* Уменьшаем логотип */
            
            .header-search-form { order: 3; width: 100%; max-width: 100%; margin-top: 5px; flex-direction: column; border: none; }
            .header-search-form input { border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 10px; padding: 15px; width: 100%; }
            .header-search-form button { border-radius: 6px; padding: 15px; width: 100%; justify-content: center; border: none; }
            
            .client-login span { display: none; } /* Скрываем текст "Личный кабинет", оставляем иконку */
            .menu-toggle { display: block; font-size: 26px; }
            
            /* 3. Мобильное меню (Гамбургер) */
            .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: #0f172a; margin: 0; padding: 0; max-height: 80vh; overflow-y: auto; border-top: 1px solid #1e293b; }
            .nav-links.active { display: flex; }
            .nav-links > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); }
            .nav-links > li > a { justify-content: space-between; padding: 15px 20px; }
            
            /* Аккордеон мега-меню для телефонов (Темная тема) */
            .has-dropdown { display: flex; flex-direction: column; position: relative; }
            .mega-menu { position: static; opacity: 1; visibility: visible; box-shadow: none; padding: 0 15px 15px; display: none; border-radius: 0; background: #1e293b; transform: none; width: 100%; }
            .has-dropdown.mobile-open .mega-menu { display: block; }
            .has-dropdown.mobile-open > a i { transform: rotate(180deg); }
            .mega-menu-grid { grid-template-columns: 1fr !important; gap: 10px; }
            
            /* Карточки внутри мобильного меню */
            .nav-links li a.mega-item { padding: 15px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); border-radius: 0; }
            .nav-links li a.mega-item:hover { transform: none; box-shadow: none; background: transparent; }
            .mega-item h4 { color: #fff; font-size: 15px; margin-bottom: 5px; }
            .mega-item p { color: #94a3b8; font-size: 12px; margin-bottom: 10px; }
            .mega-link-text { color: var(--secondary); }
            .mega-icon { width: 30px; height: 30px; font-size: 14px; margin-bottom: 10px; }
            
            /* 4. Главный экран (Hero) и поиск */
            .hero { padding: 40px 0; }
            .hero h1 { font-size: 1.8rem; line-height: 1.3; }
            .domain-search { padding: 20px; margin: 20px auto; }
            .search-group { flex-direction: column; box-shadow: none; }
            .search-group input, .search-group button { border-radius: 5px; width: 100%; margin-bottom: 10px; padding: 15px; }
            
            /* 5. Блоки преимуществ и картинка сервера */
            .trust-bar { flex-direction: column; gap: 15px; margin-top: 20px; text-align: center; padding: 20px 0; }
            .services-detailed { padding: 50px 0; }
            .service-row { grid-template-columns: 1fr; text-align: center; gap: 30px; }
            .service-img img { width: 100%; max-width: 320px; height: auto !important; } /* Перекрываем inline-стиль height:400px */
            .check-list { display: inline-block; text-align: left; } /* Центрируем список, но текст оставляем слева */
            
            /* 6. Тарифы и подвал */
            .pricing { padding: 50px 0; }
            .section-title { font-size: 2rem; margin-bottom: 30px; }
            .pricing-grid { grid-template-columns: 1fr; gap: 20px; }
            .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
            .footer-grid ul li a { display: inline-block; padding: 5px 0; }

            /* Адаптация баннера для телефонов */
            .free-hosting-banner { padding: 30px 20px; margin: 40px 20px 20px; border-radius: 12px; }
            .banner-flex { flex-direction: column; text-align: center; gap: 20px; }
            .banner-text h2 { justify-content: center; flex-wrap: wrap; font-size: 1.5rem; }
            .free-features { justify-content: center; gap: 15px; }
            .btn-free { width: 100%; }
        }
        /* === FREE HOSTING BANNER === */
        .free-hosting-banner {
            background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
            color: white;
            padding: 40px;
            border-radius: 15px;
            margin: 60px auto 20px;
            max-width: 1160px; /* Чтобы баннер был вровень с контентом */
            box-shadow: 0 15px 30px rgba(60, 116, 215, 0.2);
            position: relative;
            overflow: hidden;
        }
        /* Декоративный круг на фоне */
        .free-hosting-banner::after {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
        }
        .banner-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 30px;
            position: relative;
            z-index: 2;
        }
        .banner-text h2 {
            font-size: 2rem;
            font-family: 'Montserrat', sans-serif;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            color: white;
        }
        .badge-free {
            background: #ff4757;
            color: white;
            font-size: 14px;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
        }
        .free-features {
            list-style: none;
            display: flex;
            gap: 25px;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
        }
        .free-features li {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .free-features li i {
            color: #fff;
            opacity: 0.9;
        }
        .btn-free {
            background: #fff;
            color: var(--primary);
            padding: 16px 35px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 700;
            text-decoration: none;
            transition: 0.3s;
            display: inline-block;
            white-space: nowrap;
        }
        .btn-free:hover {
            background: #f8f9fa;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }
        /* Стили для скидок */
        .old-price {
            font-size: 1.2rem;
            color: #a0aec0;
            text-decoration: line-through;
            margin-right: 8px;
            font-weight: 500;
        }
        .discount-tag {
            display: inline-block;
            background: #ff4757;
            color: white;
            font-size: 12px;
            padding: 4px 12px;
            border-radius: 20px;
            margin-bottom: 10px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(255, 71, 87, 0.3);
        }