@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Exo+2:wght@300;400;500;600;700&display=swap');

:root {
    --neon-purple: #b026ff;
    --electric-blue: #0892d0;
    --dark-bg: #0f0f1a;
}

body {
    font-family: 'Exo 2', sans-serif;
    background-color: var(--dark-bg);
    color: white;
}

.orbitron {
    font-family: 'Orbitron', sans-serif;
}

.neon-glow {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--neon-purple), 0 0 20px var(--neon-purple);
    animation: pulsate 2s infinite alternate;
}

@keyframes pulsate {
    0% {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--neon-purple), 0 0 20px var(--neon-purple);
    }
    100% {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--neon-purple), 0 0 20px var(--neon-purple), 0 0 25px var(--neon-purple);
    }
}

.blue-glow {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--electric-blue), 0 0 20px var(--electric-blue);
    animation: pulsateBlue 2s infinite alternate;
}

@keyframes pulsateBlue {
    0% {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--electric-blue), 0 0 20px var(--electric-blue);
    }
    100% {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--electric-blue), 0 0 20px var(--electric-blue), 0 0 25px var(--electric-blue);
    }
}

.card-glow {
    box-shadow: 0 0 15px rgba(176, 38, 255, 0.5);
    transition: all 0.3s ease;
}

.card-glow:hover {
    box-shadow: 0 0 25px rgba(176, 38, 255, 0.8);
    transform: translateY(-5px);
}

.blue-card-glow {
    box-shadow: 0 0 15px rgba(8, 146, 208, 0.5);
    transition: all 0.3s ease;
}

.blue-card-glow:hover {
    box-shadow: 0 0 25px rgba(8, 146, 208, 0.8);
    transform: translateY(-5px);
}

.btn-glow {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-glow:hover {
    box-shadow: 0 0 15px var(--neon-purple);
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(176, 38, 255, 0.3), transparent);
    transform: rotate(45deg);
    animation: glowEffect 3s linear infinite;
}

@keyframes glowEffect {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.grid-pattern {
    background-image: linear-gradient(rgba(8, 146, 208, 0.1) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(8, 146, 208, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.hero-bg {
    background: linear-gradient(135deg, rgba(15, 15, 26, 0.9) 0%, rgba(15, 15, 26, 0.7) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23404' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23505'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.console-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

.rotate-slow {
    animation: rotate 15s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.slide-in-left {
    animation: slideInLeft 1s ease-out forwards;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slideInRight 1s ease-out forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: white;
    margin-left: 5px;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.glow-border {
    position: relative;
}

.glow-border::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid var(--neon-purple);
    border-radius: inherit;
    animation: borderGlow 2s infinite alternate;
    pointer-events: none;
}

@keyframes borderGlow {
    0% {
        box-shadow: 0 0 5px var(--neon-purple);
    }
    100% {
        box-shadow: 0 0 15px var(--neon-purple), 0 0 20px var(--neon-purple);
    }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

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

.particle {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--neon-purple);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

.star-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.5;
    animation: twinkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.8;
    }
}