:root {
            --primary-color: #0f172a;
            --accent-color: #15803d; 
            --text-color: #475569;
            --bg-color: #f1f5f9;
            --card-bg: rgba(255, 255, 255, 0.98);
            --border-color: rgba(226, 232, 240, 0.8);
            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --radius: 20px;
        }

        body.dark-theme {
            --primary-color: #f8fafc;
            --text-color: #94a3b8;
            --bg-color: #020617;
            --card-bg: rgba(15, 23, 42, 0.98);
            --border-color: rgba(30, 41, 59, 0.8);
            --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
        }

        html, body { overflow-x: hidden; width: 100%; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }

        body {
            background: var(--bg-color);
            color: var(--text-color);
            font-family: 'Inter', sans-serif;
            transition: background 0.4s ease;
            -webkit-font-smoothing: antialiased;
            padding-top: 100px; /* Відступ під фіксовану шапку */
        }

        .container { max-width: 1140px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }

        /* =========================================
           ШАПКА: ЦЕНТРОВАНА ТА ФІКСОВАНА
           ========================================= */
        .header {
            background: var(--card-bg);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow);
            border-radius: var(--radius);
            padding: 0.6rem 0;
            position: fixed;
            top: 15px; left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 30px); 
            max-width: 1140px; 
            z-index: 2000;
        }

        .nav-container { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
        .header-left, .header-right { display: flex; align-items: center; }
        .header-left { gap: 12px; }
        .header-right { gap: 15px; }

        .site-logo { max-height: 36px; width: auto; display: block; }
        body.dark-theme .site-logo { filter: brightness(0) invert(1); }

        .hamburger { background: none; border: none; cursor: pointer; padding: 8px; display: none; }
        .hamburger .bar { display: block; width: 22px; height: 2px; margin: 4px auto; background-color: var(--primary-color); transition: 0.3s; }

        .theme-toggle {
            background: rgba(15, 23, 42, 0.05); border: 1px solid var(--border-color);
            color: var(--primary-color); width: 40px; height: 40px; border-radius: 12px;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem; transition: 0.2s;
        }

        .nav-list { list-style: none; display: flex; margin: 0; padding: 0; gap: 5px; }
        .nav-list a { text-decoration: none; color: var(--primary-color); font-weight: 700; font-size: 0.9rem; padding: 10px 15px; border-radius: 10px; transition: 0.2s; white-space: nowrap; }
        .nav-list a:hover, .nav-list .current a { color: var(--accent-color); background: rgba(21, 128, 61, 0.1); }

        /* АДАПТАЦІЯ ТА МОБІЛЬНЕ МЕНЮ */
        @media (max-width: 1024px) {
            .hamburger { display: block; }
            .nav-list {
                position: absolute; top: calc(100% + 10px); left: 0; right: 0;
                background: var(--card-bg); flex-direction: column; display: none;
                border: 1px solid var(--border-color); border-radius: var(--radius);
                box-shadow: var(--shadow); padding: 10px 0; backdrop-filter: blur(20px);
            }
            .nav-list.active { display: flex; }
            .nav-list li { width: 100%; border-bottom: 1px solid var(--border-color); }
            .nav-list li:last-child { border-bottom: none; }
            .nav-list a { display: block; width: 100%; padding: 18px 25px; text-align: left; font-size: 1.1rem; border-radius: 0; }
        }

        /* Landscape режим - меню в рядок */
        @media (orientation: landscape) and (max-width: 1024px) {
            .hamburger { display: none !important; }
            .header { top: 5px; padding: 0.3rem 0; width: calc(100% - 10px); }
            .nav-list { display: flex !important; position: static !important; flex-direction: row !important; background: none !important; box-shadow: none !important; padding: 0 !important; border: none !important; width: auto !important; }
            .nav-list a { padding: 8px 12px !important; font-size: 0.85rem !important; }
            .site-logo { max-height: 28px; }
            body { padding-top: 75px; }
        }

        /* Пульсуюча кнопка ТГ чату */
        .floating-contact {
            position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px;
            background: #229ED9; color: white; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 0 0 rgba(34, 158, 217, 0.7); z-index: 3000;
            text-decoration: none; animation: pulse-blue 2s infinite;
        }
        .floating-contact svg { width: 30px; height: 30px; fill: currentColor; }
        @keyframes pulse-blue {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 158, 217, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(34, 158, 217, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 158, 217, 0); }
        }

        .main-content { background: var(--card-bg); border-radius: var(--radius); padding: clamp(1.2rem, 5vw, 3rem); border: 1px solid var(--border-color); box-shadow: var(--shadow); }
        .page-title { color: var(--primary-color); margin: 0 0 2rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); font-size: 1.8rem; font-weight: 800; text-align: center !important; }

        /* ФУТЕР ТА ІКОНКИ МЕСЕНДЖЕРІВ */
        .footer-socials { display: flex; justify-content: center; gap: 15px; margin-top: 25px; flex-wrap: wrap; }
        .social-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-color); font-weight: 700; padding: 12px 20px; border-radius: 16px; background: rgba(0,0,0,0.04); transition: 0.2s; }
        body.dark-theme .social-link { background: rgba(255,255,255,0.06); }
        .social-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
        .social-link svg { width: 24px; height: 24px; }
        .social-link.viber:hover { color: #7360f2; background: rgba(115, 96, 242, 0.1); }
        .social-link.telegram:hover { color: #229ED9; background: rgba(34, 158, 217, 0.1); }

        .hamburger.active .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
        .hamburger.active .bar:nth-child(2) { opacity: 0; }
        .hamburger.active .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }