@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

    body {
        margin: 0;
        padding: 0;
        font-family: 'Roboto', sans-serif;
        background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
    }

    canvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .container {
        position: relative;
        z-index: 1;
        text-align: center;
        backdrop-filter: blur(5px);
        padding: 40px;
        border-radius: 20px;
        box-shadow: 0 0 50px rgba(0,255,247,0.3);
    }

    h1 {
        font-family: 'Orbitron', sans-serif;
        font-size: 12em;
        margin: 0;
        color: #00fff7;
        position: relative;
        animation: glitch 1.5s infinite;
        text-shadow: 0 0 10px #00fff7, 0 0 20px #00fff7;
    }

    h1::before,
    h1::after {
        content: '500';
        position: absolute;
        left: 0;
    }

    h1::before {
        animation: glitchTop 1.5s infinite;
        clip: rect(0, 900px, 60px, 0);
        color: #ff3c3c;
    }

    h1::after {
        animation: glitchBottom 1.5s infinite;
        clip: rect(60px, 900px, 120px, 0);
        color: #ffd700;
    }

    p {
        font-size: 1.5em;
        margin: 20px 0 0;
        opacity: 0.9;
    }

    a {
        display: inline-block;
        margin-top: 30px;
        padding: 14px 40px;
        text-decoration: none;
        font-weight: 500;
        font-size: 1.1em;
        color: #0f0c29;
        background: #00fff7;
        border-radius: 50px;
        transition: 0.3s;
        box-shadow: 0 0 20px #00fff7, 0 0 40px #00fff7;
    }

    a:hover {
        color: #00fff7;
        background: transparent;
        box-shadow: 0 0 30px #00fff7, 0 0 60px #00fff7;
        transform: translateY(-4px);
    }

    @keyframes glitch {
        0% { text-shadow: 2px 2px #ff3c3c, -2px -2px #ffd700; }
        20% { text-shadow: -2px -2px #ff3c3c, 2px 2px #ffd700; }
        40% { text-shadow: 2px -2px #ff3c3c, -2px 2px #ffd700; }
        60% { text-shadow: -2px 2px #ff3c3c, 2px -2px #ffd700; }
        80% { text-shadow: 2px 2px #ff3c3c, -2px -2px #ffd700; }
        100% { text-shadow: -2px -2px #ff3c3c, 2px 2px #ffd700; }
    }

    @keyframes glitchTop {
        0% { transform: translate(0px, 0px); }
        20% { transform: translate(-5px, -5px); }
        40% { transform: translate(-5px, 5px); }
        60% { transform: translate(5px, -5px); }
        80% { transform: translate(5px, 5px); }
        100% { transform: translate(0px, 0px); }
    }

    @keyframes glitchBottom {
        0% { transform: translate(0px, 0px); }
        20% { transform: translate(5px, 5px); }
        40% { transform: translate(5px, -5px); }
        60% { transform: translate(-5px, 5px); }
        80% { transform: translate(-5px, -5px); }
        100% { transform: translate(0px, 0px); }
    }