/* Base Settings */
        :root {
            --accent-purple: #7c3aed;
            --accent-glow: #4c1d95;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: #000000;
            color: #e5e5e5;
            overflow-x: hidden;
            font-size: 1.05rem;
        }

        /* Typography */
        h1, h2, h3, h4, .font-display { letter-spacing: -0.025em; }
        .tracking-tight-custom { letter-spacing: -0.04em; }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

        /* Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes border-spin {
            to { --gradient-angle: 360deg; }
        }
        @keyframes shine {
            0% { left: -100%; opacity: 0; }
            50% { opacity: 0.5; }
            100% { left: 200%; opacity: 0; }
        }

        /* Animate on Scroll */
        .animate-on-scroll { opacity: 0; animation-play-state: paused !important; }
        .animate-on-scroll.animate { 
            animation: fadeInUp 0.8s ease-out 0.1s forwards; 
            animation-play-state: running !important; 
        }

        /* --- Shiny Button (Primary) --- */
        @property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
        @property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
        @property --gradient-percent { syntax: "<percentage>"; initial-value: 20%; inherits: false; }
        @property --gradient-shine { syntax: "<color>"; initial-value: #8484ff; inherits: false; }
        
        .shiny-cta {
            --gradient-angle: 0deg;
            --gradient-angle-offset: 0deg;
            --gradient-percent: 20%;
            --gradient-shine: #a78bfa;
            position: relative;
            overflow: hidden;
            border-radius: 9999px;
            padding: 1rem 2.5rem;
            font-size: 1.1rem;
            font-weight: 500;
            color: #ffffff;
            background: linear-gradient(#000000, #000000) padding-box, 
                        conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent 0%, var(--accent-purple) 5%, var(--gradient-shine) 15%, var(--accent-purple) 30%, transparent 40%, transparent 100%) border-box;
            border: 2px solid transparent;
            box-shadow: inset 0 0 0 1px #1a1818;
            transition: transform 0.2s;
            isolation: isolate;
            animation: border-spin 2.5s linear infinite;
        }
        .shiny-cta:hover { transform: scale(1.02); }
        .shiny-cta:active { transform: scale(0.98); }
        .shiny-cta::before {
            content: ''; pointer-events: none; position: absolute; left: 50%; top: 50%;
            transform: translate(-50%, -50%); z-index: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at center, rgba(124, 58, 237, 0.15), transparent 70%);
            opacity: 0.4;
        }
        .shiny-cta span { position: relative; z-index: 2; }

        /* --- Interactive Button (Secondary) --- */
        .btn-interactive {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            transform: translateY(0);
        }
        .btn-interactive:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px -10px rgba(124, 58, 237, 0.3);
            border-color: rgba(124, 58, 237, 0.5);
        }
        .btn-interactive::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: none;
        }
        .btn-interactive:hover::after {
            animation: shine 1.5s ease-out;
        }

        /* --- Slide Over Panel --- */
        .slide-over-backdrop {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
        .slide-over-backdrop.open {
            opacity: 1;
            pointer-events: auto;
        }
        .slide-over-panel {
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .slide-over-panel.open {
            transform: translateX(0);
        }
        
        /* Glass Utilities */
        .glass-panel-dark {
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(20px);
            border-left: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .hero-card-glass {
            background: rgba(10, 10, 10, 0.6);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        /* Responsive Typography */
        @media (max-width: 640px) {
            body { font-size: 1rem; }
            h1 { font-size: 2.5rem !important; line-height: 1.1 !important; }
            h2 { font-size: 1.875rem !important; }
            h3 { font-size: 1.5rem !important; }
        }

        @media (min-width: 641px) and (max-width: 1024px) {
            h1 { font-size: 3.5rem !important; }
        }

        /* Mobile Navigation - Custom breakpoint at 1120px */
        @media (max-width: 1120px) {
            nav .hidden.lg\\:flex { display: none !important; }
            nav .lg\\:hidden { display: flex !important; }
        }
        @media (min-width: 1121px) {
            nav .lg\\:hidden { display: none !important; }
        }

        /* Container Padding Mobile */
        @media (max-width: 640px) {
            .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
            .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
        }

#notification {
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 768px) {
    #notification {
        transform: translateX(450px);
    }
}
#notification {
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 768px) {
    #notification {
        transform: translateX(450px);
    }
}

@media (max-width: 767px) {
    #notification {
        left: 1rem;
        right: 1rem;
        max-width: calc(100% - 2rem);
        transform: translateY(-150px);
    }
    
    #notification.show {
        transform: translateY(0) !important;
    }
}

#notification.show {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto;
}

#notification button {
    transition: all 0.2s ease;
}

#notification #notification-inner {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

#notification.show #notification-inner {
    animation: notificationPulse 0.5s ease-out;
}

@keyframes notificationPulse {
    0% { transform: scale(0.95); opacity: 0; }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

#notification.error #notification-inner {
    background: linear-gradient(to bottom right, #ef4444, #dc2626) !important;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .7;
    }
}