@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Plus+Jakarta+Sans:wght@200;300;400;600;800&family=JetBrains+Mono:wght@100;300;500&display=swap');

        :root {
            --emerald: #00ff9d;
            --emerald-glow: rgba(0, 255, 157, 0.4);
            --bg: #020202;
            --card: rgba(10, 10, 10, 0.8);
            --border: rgba(255, 255, 255, 0.05);
            --font-syne: 'Syne', sans-serif;
            --font-main: 'Plus Jakarta Sans', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
            --ease: cubic-bezier(0.16, 1, 0.3, 1);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; cursor: none; outline: none; }
        body {
            background-color: var(--bg);
            color: #fff;
            font-family: var(--font-main);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            line-height: 1.6;
        }
        .noise {
            position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.03;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        .glow-sphere {
            position: fixed; width: 800px; height: 800px;
            background: radial-gradient(circle, rgba(0, 255, 157, 0.05) 0%, transparent 70%);
            border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(80px);
        }
        .premium-glass {
            background: var(--card);
            backdrop-filter: blur(50px) saturate(180%);
            border: 1px solid var(--border);
            transition: all 0.8s var(--ease);
        }
        .premium-glass:hover {
            border-color: rgba(0, 255, 157, 0.2);
            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5), 0 18px 36px -18px rgba(0, 255, 157, 0.1);
        }

        .h-mega {
            font-family: var(--font-syne);
            font-size: clamp(1rem, 10vw, 14rem);
            line-height: 0.8; letter-spacing: -0.05em;
        }

        .mono-label {
            font-family: var(--font-mono); font-size: 0.6rem;
            text-transform: uppercase; letter-spacing: 0.5em; color: var(--emerald);
        }
        #cursor-dot {
            position: fixed; width: 4px; height: 4px; background: #fff;
            border-radius: 50%; pointer-events: none; z-index: 10001;
        }
        #cursor-ring {
            position: fixed; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.1);
            border-radius: 50%; pointer-events: none; z-index: 10000;
        }
        .btn-nulix {
            position: relative; padding: 1.5rem 4rem;
            background: transparent; color: #fff;
            font-weight: 800; font-size: 0.7rem; letter-spacing: 0.4em;
            text-transform: uppercase; border: 1px solid var(--border);
            overflow: hidden; transition: all 0.4s var(--ease);
        }
        .btn-nulix::before {
            content: ''; position: absolute; inset: 0;
            background: #fff; transform: translateY(100%);
            transition: transform 0.4s var(--ease); z-index: -1;
        }
        .btn-nulix:hover { color: #000; border-color: #fff; }
        .btn-nulix:hover::before { transform: translateY(0); }
        .bg-grid {
            position: fixed; inset: 0; z-index: -2;
            background-image: linear-gradient(var(--border) 1px, transparent 1px),
                              linear-gradient(90deg, var(--border) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(circle at center, black, transparent 90%);
        }
        .reveal { opacity: 0; transform: translateY(60px); }
        .stat-line { height: 1px; background: var(--emerald); width: 0; }
        ::-webkit-scrollbar {
        width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #020202;
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, #00ff9d, #008f58);
            border-radius: 20px;
            border: 2px solid #020202;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #00ff9d;
            box-shadow: 0 0 10px var(--emerald-glow);
        }
        * {
            scrollbar-width: thin;
            scrollbar-color: #00ff9d #020202;
        }
        img {
            -webkit-user-drag: none;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
        /* RESPONSIVE FIXES */
@media (max-width: 768px) {
    /* 1. Typography Adjustment */
    .h-mega {
        font-size: clamp(3.5rem, 12vw, 5rem) !important;
        line-height: 1.1;
    }
    
    h2.font-syne.text-8xl, 
    h2.font-syne.text-7xl {
        font-size: 3rem !important;
        line-height: 1;
    }

    h3.font-syne.text-6xl {
        font-size: 2.5rem !important;
    }

    /* 2. Architecture Section Fix (Grid) */
    #architecture .max-w-\[1600px\] {
        height: auto !important; /* ვაუქმებთ ფიქსირებულ 1000px-ს */
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    #architecture .premium-glass {
        padding: 2.5rem 1.5rem !important;
        min-height: 300px;
    }

    /* 3. Navigation & Padding */
    nav {
        padding: 1.5rem 1.5rem !important;
    }

    section {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    /* 4. Buttons */
    .btn-nulix {
        padding: 1.2rem 1.5rem !important;
        width: 100%;
        font-size: 0.6rem !important;
        justify-content: center;
    }

    /* 5. Kernel Statistics Grid */
    #engine .grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    /* 6. Hero Section */
    .min-h-screen {
        justify-content: flex-start !important;
        padding-top: 10rem !important;
    }

    /* Disable Custom Cursor on Mobile */
    #cursor-dot, #cursor-ring {
        display: none !important;
    }
    * {
        cursor: auto !important;
    }
}

/* Extra small devices fix */
@media (max-width: 480px) {
    .h-mega {
        font-size: 2.8rem !important;
    }
    .font-syne.text-\[8vw\] {
        font-size: 10vw !important;
    }
}
/* --- ONLY MOBILE FIXES --- */
@media (max-width: 768px) {
    /* Footer-ის სრული გაცენტრება */
    footer .max-w-7xl {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 3rem !important;
    }

    footer .text-right {
        text-align: center !important;
    }

    footer .flex.gap-12 {
        justify-content: center !important;
        gap: 1.5rem !important;
    }

    /* Architecture სექციის ტექსტის გადასვლის გასწორება */
    #architecture .max-w-\[1600px\] {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #architecture h3.font-syne.text-6xl {
        font-size: 2.5rem !important; /* ტექსტი აღარ გადავა ჩარჩოდან */
        line-height: 1.1;
    }

    /* ზოგადი სექციების padding-ები, რომ გვერდებზე არ მიეკრას */
    section {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Hero ტექსტის ზომა (NULIX SECURE BROWSER) */
    .h-mega {
        font-size: 3.2rem !important;
    }

    /* ღილაკების დაპატარავება */
    .btn-nulix {
        padding: 1.2rem 1rem !important;
        width: 100% !important;
        font-size: 0.65rem !important;
    }
}