@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Inter:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary: #00f5ff;
            --secondary: #9d4edd;
            --accent: #ff006e;
            --dark: #0a0a1a;
            --darker: #050510;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--darker);
            color: white;
            overflow-x: hidden;
        }
        
        h1, h2, h3, h4, .logo {
            font-family: 'Orbitron', sans-serif;
        }
        
        /* Custom animations */
        @keyframes float3d {
            0%, 100% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
            25% { transform: translate3d(5px, -10px, 5px) rotateX(5deg) rotateY(5deg); }
            50% { transform: translate3d(0, -20px, 10px) rotateX(0) rotateY(10deg); }
            75% { transform: translate3d(-5px, -10px, 5px) rotateX(-5deg) rotateY(5deg); }
        }
        
        @keyframes particle-float {
            0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            50% { transform: translateY(-100px) rotate(180deg); }
            90% { opacity: 0; }
        }
        
        @keyframes hologram-flicker {
            0%, 100% { opacity: 0.8; filter: brightness(1) hue-rotate(0deg); }
            25% { opacity: 0.9; filter: brightness(1.2) hue-rotate(90deg); }
            50% { opacity: 0.7; filter: brightness(0.9) hue-rotate(180deg); }
            75% { opacity: 0.95; filter: brightness(1.1) hue-rotate(270deg); }
        }
        
        @keyframes matrix-fall {
            0% { transform: translateY(-100vh); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(100vh); opacity: 0; }
        }
        
        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0); }
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 15px var(--primary); }
            50% { box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary), 0 0 40px var(--primary); }
        }
        
        @keyframes morph {
            0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
            50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
            100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
        }
        
        /* Element styles */
        .hologram-card {
            background: linear-gradient(135deg, rgba(157, 78, 221, 0.1), rgba(0, 245, 255, 0.1));
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 245, 255, 0.3);
            animation: hologram-flicker 4s infinite;
            position: relative;
            overflow: hidden;
        }
        
        .hologram-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(0, 245, 255, 0.1), transparent);
            transform: rotate(45deg);
            animation: shine 6s infinite;
        }
        
        @keyframes shine {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--primary);
            border-radius: 50%;
            animation: particle-float 15s infinite linear;
        }
        
        .matrix-char {
            position: absolute;
            color: var(--primary);
            font-family: 'Orbitron', monospace;
            font-size: 14px;
            animation: matrix-fall 10s infinite linear;
            opacity: 0;
        }
        
        .glitch-text {
            position: relative;
            display: inline-block;
        }
        
        .glitch-text::before,
        .glitch-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .glitch-text::before {
            color: var(--accent);
            animation: glitch 0.5s infinite;
            clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
        }
        
        .glitch-text::after {
            color: var(--secondary);
            animation: glitch 0.5s infinite reverse;
            clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
        }
        
        .morph-bg {
            background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent));
            animation: morph 10s ease-in-out infinite, pulse-glow 4s infinite;
            background-size: 400% 400%;
        }
        
        .floating-3d {
            animation: float3d 8s ease-in-out infinite;
            transform-style: preserve-3d;
        }
        
        .cyber-border {
            position: relative;
            border: 2px solid transparent;
            background: linear-gradient(var(--darker), var(--darker)) padding-box,
                        linear-gradient(45deg, var(--primary), var(--secondary), var(--accent)) border-box;
        }
        
        .cyber-button {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            border: none;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .cyber-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: all 0.5s ease;
        }
        
        .cyber-button:hover::before {
            left: 100%;
        }
        
        .cyber-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 245, 255, 0.3);
        }
        
       
        
        .grid-pattern {
            background-image: 
                linear-gradient(rgba(0, 245, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 245, 255, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        .stake-card {
            transition: all 0.5s ease;
            perspective: 1000px;
        }
        
        .stake-card-inner {
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        
        .stake-card:hover .stake-card-inner {
            transform: rotateY(180deg);
        }
        
        .stake-card-front, .stake-card-back {
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .stake-card-back {
            transform: rotateY(180deg);
        }