/* Extracted from discord/discord.php for CSP compliance. */
body {
            background: #0a0a0f;
            overflow-x: hidden;
        }

        [data-reveal] {
            opacity: 0;
            transform: translateY(34px);
            transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
        }

        [data-reveal].visible {
            opacity: 1;
            transform: translateY(0);
        }

        .glow-card {
            background: rgba(11, 11, 22, 0.82);
            border: 1px solid rgba(255, 255, 255, .06);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            position: relative;
            overflow: hidden;
            transition: opacity .75s cubic-bezier(.16, 1, .3, 1), border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.4, 0, .2, 1);
        }

        .glow-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(88, 101, 242, .07), transparent);
            opacity: 0;
            transition: opacity .4s ease;
            pointer-events: none;
        }

        .glow-card:hover::before {
            opacity: 1;
        }

        .glow-card:hover {
            transform: translateY(-6px);
            border-color: rgba(88, 101, 242, .22);
            box-shadow: 0 24px 64px -16px rgba(88, 101, 242, .22), 0 4px 24px -8px rgba(0, 0, 0, .7);
        }
        .glow-card[data-reveal]:not(.visible) {
            transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
        }


        .shine-btn {
            position: relative;
            overflow: hidden;
        }

        .shine-btn::after {
            content: "";
            position: absolute;
            top: 0;
            left: -120%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
            transform: skewX(-20deg);
            transition: left .55s cubic-bezier(.4, 0, .2, 1);
        }

        .shine-btn:hover::after {
            left: 160%;
        }

        .text-gd-purple {
            background: linear-gradient(135deg, #8b9fff 0%, #5865F2 45%, #a78bfa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 48px rgba(88, 101, 242, .45));
        }

        .text-gd-red {
            background: linear-gradient(135deg, #f87171 0%, #e11d48 65%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .text-gd-phi {
            background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #ec4899 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .text-gd-cyan {
            background: linear-gradient(135deg, #93c5fd 0%, #06b6d4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .logo-ring {
            position: absolute;
            width: 188px;
            height: 188px;
            top: 50%;
            left: 50%;
            margin-top: -94px;
            margin-left: -94px;
            border-radius: 50%;
            border: 1px solid rgba(88, 101, 242, .2);
            animation: ring-expand 3s cubic-bezier(.4, 0, .2, 1) infinite;
        }

        .dot-grid-vignette {
            background: radial-gradient(ellipse 85% 85% at 50% 50%, transparent, #0a0a0f 80%);
        }

        .logo-ring-2 {
            animation-delay: 1s;
        }

        .logo-ring-3 {
            animation-delay: 2s;
        }

        @keyframes ring-expand {
            0% {
                transform: scale(.88);
                opacity: .65;
            }

            100% {
                transform: scale(1.65);
                opacity: 0;
            }
        }

        .float-slow {
            animation: float-anim 7s ease-in-out infinite;
        }

        @keyframes float-anim {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-14px);
            }
        }

        .mock-card {
            background: rgba(8, 8, 20, .96);
            border: 1px solid rgba(255, 255, 255, .06);
            border-radius: 20px;
            box-shadow: 0 20px 60px -12px rgba(0, 0, 0, .7);
        }

        .xp-bar-fill {
            height: 100%;
            border-radius: 99px;
            background: linear-gradient(90deg, #e11d48, #f87171);
            transform-origin: left;
            transform: scaleX(0);
        }

        .xp-bar-fill.run {
            animation: xp-grow 1.8s .4s cubic-bezier(.16, 1, .3, 1) forwards;
        }

        @keyframes xp-grow {
            to {
                transform: scaleX(.68);
            }
        }

        .dot-grid {
            background-image: radial-gradient(circle, rgba(88, 101, 242, .1) 1px, transparent 1px);
            background-size: 28px 28px;
        }

        @media (min-width: 768px) {
            .step-item {
                position: relative;
            }

            .step-item:not(:last-child)::after {
                content: "";
                position: absolute;
                top: 38px;
                left: calc(50% + 50px);
                right: calc(-50% + 50px);
                height: 1px;
                background: linear-gradient(90deg, rgba(88, 101, 242, .45), rgba(88, 101, 242, .06));
            }
        }

        .btn-discord {
            box-shadow: 0 0 44px rgba(88, 101, 242, .42), 0 8px 28px rgba(0, 0, 0, .45);
        }

        .btn-red {
            background: linear-gradient(135deg, #e11d48, #dc2626);
            box-shadow: 0 0 34px rgba(225, 29, 72, .38), 0 8px 24px rgba(0, 0, 0, .45);
        }

        .btn-phi {
            background: linear-gradient(135deg, #a855f7, #ec4899);
            box-shadow: 0 0 34px rgba(168, 85, 247, .38), 0 8px 24px rgba(0, 0, 0, .45);
        }

        .btn-discord-lg {
            box-shadow: 0 0 64px rgba(88, 101, 242, .52), 0 12px 36px rgba(0, 0, 0, .5);
        }

        .icon-red {
            background: linear-gradient(135deg, #dc2626, #ef4444);
            box-shadow: 0 8px 28px rgba(220, 38, 38, .3);
        }

        .icon-yellow {
            background: linear-gradient(135deg, #f59e0b, #f97316);
            box-shadow: 0 8px 28px rgba(245, 158, 11, .3);
        }

        .icon-purple {
            background: linear-gradient(135deg, #a855f7, #ec4899);
            box-shadow: 0 8px 28px rgba(168, 85, 247, .3);
        }

        .icon-blue {
            background: linear-gradient(135deg, #3b82f6, #06b6d4);
            box-shadow: 0 8px 28px rgba(59, 130, 246, .3);
        }

        .icon-green {
            background: linear-gradient(135deg, #22c55e, #10b981);
            box-shadow: 0 8px 28px rgba(34, 197, 94, .3);
        }

        .icon-pink {
            background: linear-gradient(135deg, #ef4444, #ec4899);
            box-shadow: 0 8px 28px rgba(239, 68, 68, .3);
        }

        .icon-green-lg {
            background: linear-gradient(135deg, #22c55e, #10b981);
            box-shadow: 0 0 44px rgba(34, 197, 94, .3);
        }

        .icon-yellow-lg {
            background: linear-gradient(135deg, #f59e0b, #f97316);
            box-shadow: 0 0 44px rgba(245, 158, 11, .3);
        }

        .icon-purple-lg {
            background: linear-gradient(135deg, #a855f7, #ec4899);
            box-shadow: 0 0 44px rgba(168, 85, 247, .3);
        }

        .h2-hero {
            font-size: clamp(2.4rem, 6.5vw, 6.2rem);
        }

        .h2-section {
            font-size: clamp(1.75rem, 5vw, 4rem);
        }

        .h2-cta {
            font-size: clamp(2.2rem, 7vw, 5.5rem);
        }

        .hero-logo-block {
            position: relative;
            width: 350px;
            height: 350px;
            border-radius: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
            transform: perspective(900px) rotateY(-20deg) rotateX(8deg) rotateZ(-4deg);
            animation: hero3d-float 7s ease-in-out infinite;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, .12),
                0 0 90px rgba(88, 101, 242, .7),
                0 50px 100px -20px rgba(0, 0, 0, .75),
                inset 0 1px 0 rgba(255, 255, 255, .2),
                inset 0 -1px 0 rgba(0, 0, 0, .3);
        }

        .hero-logo-block::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 56px;
            background: linear-gradient(135deg, rgba(255, 255, 255, .14) 0%, transparent 55%);
            pointer-events: none;
        }

        @keyframes hero3d-float {

            0%,
            100% {
                transform: perspective(900px) rotateY(-20deg) rotateX(8deg) rotateZ(-4deg) translateY(0px);
            }

            50% {
                transform: perspective(900px) rotateY(-20deg) rotateX(8deg) rotateZ(-4deg) translateY(-14px);
            }
        }

        .h3d-ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(88, 101, 242, .2);
            pointer-events: none;
            transform: perspective(900px) rotateY(-20deg) rotateX(8deg) rotateZ(-4deg);
        }

        .h3d-ring-1 {
            width: 308px;
            height: 308px;
            border-color: rgba(88, 101, 242, .22);
            animation: h3d-ring-pulse 3s 0s ease-in-out infinite;
        }

        .h3d-ring-2 {
            width: 390px;
            height: 390px;
            border-color: rgba(88, 101, 242, .12);
            animation: h3d-ring-pulse 3s .9s ease-in-out infinite;
        }

        .h3d-ring-3 {
            width: 472px;
            height: 472px;
            border-color: rgba(88, 101, 242, .06);
            animation: h3d-ring-pulse 3s 1.8s ease-in-out infinite;
        }

        @keyframes h3d-ring-pulse {

            0%,
            100% {
                opacity: .8;
            }

            50% {
                opacity: .2;
            }
        }