:root {
            --primary: #3b82f6;
            --zinc: #111318;
        }

        body {
            font-family: 'Manrope', sans-serif;
            background: #fff;
            margin: 0;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        h1, h2, h3, h4, .font-display { font-family: 'Space Grotesk', sans-serif; }

        .grain::before {
            content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('../images/shared/noisy-texture.svg');
            opacity: 0.02; pointer-events: none; z-index: 9999; transform: translateZ(0); will-change: transform;
        }

        @keyframes gradient-text { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .text-gradient-animated {
            background: linear-gradient(270deg, #3b82f6, #60a5fa, #2563eb, #3b82f6); background-size: 300% 300%;
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; 
            animation: gradient-text 5s ease infinite; padding-right: 0.1em;
        }

        .hero-glow {
            position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 70%);
            top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; pointer-events: none;
            filter: blur(60px); animation: pulse-glow 8s infinite alternate;
        }
        @keyframes pulse-glow { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } }

        .btn-magnetic { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; }
        .btn-magnetic:active { transform: scale(0.95) !important; }
        .glow-btn { box-shadow: 0 0 40px -10px rgba(59, 130, 246, 0.6); }
        .glow-btn:hover { box-shadow: 0 0 60px -10px rgba(59, 130, 246, 0.8); }

        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }