html, body { overflow-x: hidden; }
        body { font-family: 'Libre Baskerville', serif; }
        .nav-link { transition: color 0.3s; }
        .nav-link:hover { color: #f82d26; }
        .hero {min-height: 60vh}
        .fade-text span { opacity: 0; display: inline-block; transform: translateY(20px); }
        .logo-container {
            position: relative;
            display: inline-block;
        }
        .logo-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            box-shadow: 0 0 20px 10px rgba(248, 39, 39, 0.6);
            border-radius: 50%;
            z-index: -1;
        }

        .underline-decor {
            position: relative;
            display: inline-block;
            padding-bottom: 20px;
        }

        .underline-decor::after {
            content: "";
            position: absolute;
            bottom: -8px;
            left: 50%;
            width: 80px;
            height: 8px;
            background: radial-gradient(circle, rgba(255, 0, 0, 0.7), rgba(255, 0, 0, 0));
            transform: translateX(-50%);
            border-radius: 50%;
        }

        @keyframes beamMove {
            0% {
                transform: translateX(-10%) rotate(12deg)
            }

            50% {
                transform: translateX(10%) rotate(12deg)
            }

            100% {
                transform: translateX(-10%) rotate(12deg)
            }
        }

        .animate-beam {
            animation: beamMove 6s ease-in-out infinite;
        }

        /* small utility if your Tailwind build strips unknown utilities */
        .blur-3xl {
            filter: blur(36px);
        }

        .drop-shadow-\[0_25px_50px_rgba\(2\,6\,23\,0.6\)\] { filter: drop-shadow(0 25px 50px rgba(2,6,23,0.6)); }
    
        /* Gradient + light animation */
        /* @media (prefers-reduced-motion: no-preference) {
            @keyframes slowGradient {
                0% {
                    background-position: 0% 50%;
                }

                50% {
                    background-position: 100% 50%;
                }

                100% {
                    background-position: 0% 50%;
                }
            }

            @keyframes sweep {
                0% {
                    transform: translateX(-120%) rotate(-10deg);
                    opacity: 0;
                }

                10% {
                    opacity: 0.45;
                }

                50% {
                    transform: translateX(120%) rotate(-10deg);
                    opacity: 0.25;
                }

                100% {
                    transform: translateX(240%) rotate(-10deg);
                    opacity: 0;
                }
            }
        }

        .hero-animated {
            background: linear-gradient(120deg, #060606, #080808, #130b0b, #0e0d0d);
            background-size: 250% 250%;
            color: white;
            position: relative;
        }

        @media (prefers-reduced-motion: no-preference) {
            .hero-animated {
                animation: slowGradient 18s ease infinite;
            }
        }

        .hero-beam {
            position: absolute;
            inset: -20% -40%;
            pointer-events: none;
            overflow: visible;
        }

        .hero-beam>.beam {
            position: absolute;
            left: -50%;
            top: 10%;
            width: 80%;
            height: 120%;
            transform: rotate(-10deg);
            filter: blur(28px);
            background: linear-gradient(90deg, rgba(255, 120, 120, 0.08), rgba(255, 255, 255, 0.01), rgba(255, 120, 120, 0.06));
            mix-blend-mode: screen;
            opacity: 0;
        }

        @media (prefers-reduced-motion: no-preference) {
            .hero-beam>.beam {
                animation: sweep 7s ease-in-out infinite;
            }
        } */