body { 
            background-color: #020617; 
            overflow-x: hidden; 
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Noise Texture */
        .bg-noise {
            position: fixed; inset: 0; z-index: 0; 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='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        /* Aurora Background */
        .aurora-bg {
            position: fixed; top: -50%; left: -50%; right: -50%; bottom: -50%; z-index: -1;
            background: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.15), transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.15), transparent 40%),
                        radial-gradient(circle at 20% 80%, rgba(168, 85, 247, 0.15), transparent 40%);
            filter: blur(60px); animation: blob 20s infinite alternate;
            -webkit-filter: blur(60px);
        }

        /* Modern Glassmorphism */
        .glass-panel {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            /* border removed */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            position: relative;
            overflow: hidden;
        }

        /* Inner Glow on Hover */
        .glass-panel::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.05) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .glass-panel:hover::after {
            opacity: 1;
        }

        /* Floating Nav Pill */
        .nav-pill {
            background: rgba(2, 6, 23, 0.6);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
        }

        /* Typography */
        .text-gradient {
            background: linear-gradient(to right, #38bdf8, #a78bfa, #f472b6);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            background-size: 200% auto;
            animation: gradientMove 5s ease infinite;
        }
        @keyframes gradientMove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

        /* Glitch Hover */
        .glitch-hover:hover {
            animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
            color: #38bdf8; text-shadow: 2px 0 #f472b6, -2px 0 #00fff9;
        }

        /* Reveal Animation Class */
        .reveal-section {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
        }
        .reveal-section.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Cursor */
        @media (min-width: 768px) {
            body { cursor: none !important; }
            a, button, input, select, textarea, .cursor-hover { cursor: none !important; }
            .cursor-dot { pointer-events: none; position: fixed; z-index: 999999; width: 8px; height: 8px; background: #38bdf8; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px #38bdf8; transition: opacity 0.3s; }
            .cursor-outline { pointer-events: none; position: fixed; z-index: 999998; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, border-color 0.2s, background-color 0.2s; }
        }
        
        [x-cloak] { display: none !important; }

        #preloader {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at 20% 20%, #0b1120, #020617 70%);
            z-index: 60;
            transition: opacity 0.4s ease;
        }

        /* iOS Safe Area Support */
        .safe-area-pb { padding-bottom: env(safe-area-inset-bottom, 16px); }
        .safe-area-pt { padding-top: env(safe-area-inset-top, 0); }

        /* iOS Touch Optimization */
        button, a, input, select, textarea {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        /* Prevent iOS text size adjustment */
        html {
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        /* iOS momentum scrolling */
        body {
            -webkit-overflow-scrolling: touch;
            overflow-x: hidden;
        }

        /* GPU acceleration for smoother animations on mobile */
        .glass-panel, .nav-pill, [x-transition], .transition-all {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Fix iOS input zoom issue - inputs must be 16px+ */
        input[type="text"], input[type="url"], input[type="email"], input[type="tel"] {
            font-size: 16px !important;
        }

        /* Mobile modal fixes */
        @media (max-width: 640px) {
            .fixed.inset-0 {
                -webkit-overflow-scrolling: touch;
            }
        }