@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@500;700&display=swap');
        
        :root {
            --primary: #7c3aed;
            --secondary: #10b981;
            --dark: #0f172a;
        }
        
        body {
            font-family: 'Rajdhani', sans-serif;
            background-color: #020617;
            color: white;
            overflow-x: hidden;
        }
        
        h1, h2, h3 {
            font-family: 'Orbitron', sans-serif;
        }
        
        .cyber-border {
            position: relative;
            border: 2px solid transparent;
        }
        
        .cyber-border::before {
            content: '';
            position: absolute;
            inset: 0;
            border: 2px solid transparent;
            background: linear-gradient(90deg, var(--primary), var(--secondary)) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        
        .bracelet-glow {
            box-shadow: 0 0 30px rgba(124, 58, 237, 0.7);
            animation: pulse 3s infinite alternate;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.5); }
            100% { box-shadow: 0 0 40px rgba(124, 58, 237, 0.9); }
        }
        
        .grid-pattern {
            background-image: 
                linear-gradient(rgba(124, 58, 237, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(124, 58, 237, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        .tech-card:hover {
            transform: translateY(-10px) scale(1.04);
            transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
            box-shadow: 0 16px 40px 0 rgba(16,185,129,0.35), 0 2px 8px 0 rgba(124,58,237,0.15);
            border-color: var(--secondary);
            filter: brightness(1.08) saturate(1.2);
        }
        
        .animate-fade-in {
            animation: fadeInUp 1s cubic-bezier(0.4,0,0.2,1) both;
        }
        @keyframes fadeInUp {
            0% { opacity: 0; transform: translateY(40px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        .sticky-nav {
            position: sticky;
            top: 0;
            z-index: 50;
            backdrop-filter: blur(12px) saturate(1.5);
            background: rgba(15,23,42,0.7);
            box-shadow: 0 2px 16px 0 rgba(124,58,237,0.08);
            transition: background 0.3s;
        }
        .scroll-indicator {
            position: absolute;
            left: 50%;
            bottom: 32px;
            transform: translateX(-50%);
            z-index: 30;
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(16px); }
        }
        .floating-contact {
            position: fixed;
            right: 32px;
            bottom: 32px;
            z-index: 100;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            color: #fff;
            border-radius: 9999px;
            box-shadow: 0 4px 24px 0 rgba(124,58,237,0.25);
            padding: 16px 28px;
            font-weight: bold;
            font-size: 1.1rem;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .floating-contact:hover {
            transform: scale(1.07) translateY(-4px);
            box-shadow: 0 8px 32px 0 rgba(16,185,129,0.25);
        }
        .hero-animate {
            opacity: 0;
            transform: translateY(40px);
            animation: fadeInUp 1.2s cubic-bezier(0.4,0,0.2,1) 0.2s forwards;
        }
        .hero-animate-delay {
            opacity: 0;
            transform: translateY(40px);
            animation: fadeInUp 1.2s cubic-bezier(0.4,0,0.2,1) 0.5s forwards;
        }
        .hero-bg-animated {
            background: linear-gradient(120deg, #7c3aed 0%, #10b981 100%);
            background-size: 200% 200%;
            animation: gradientMove 8s ease-in-out infinite alternate;
            opacity: 0.18;
            position: absolute;
            inset: 0;
            z-index: 1;
        }
        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }
        
        /* Floating coins animation */
        .floating-coin {
            position: absolute;
            z-index: 5;
            pointer-events: none;
            will-change: transform;
        }
        
        @keyframes floatCoin1 {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(20px, -30px) rotate(10deg); }
            50% { transform: translate(-10px, -60px) rotate(25deg); }
            75% { transform: translate(-25px, -30px) rotate(10deg); }
        }
        
        @keyframes floatCoin2 {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(-15px, -40px) rotate(-15deg); }
            50% { transform: translate(25px, -70px) rotate(-30deg); }
            75% { transform: translate(15px, -40px) rotate(-15deg); }
        }
        
        @keyframes floatCoin3 {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(30px, -50px) rotate(20deg); }
            66% { transform: translate(-20px, -90px) rotate(-20deg); }
        }
        
        @keyframes floatCoin4 {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(-30px, -40px) rotate(-25deg); }
            66% { transform: translate(10px, -80px) rotate(25deg); }
        }
        
        @keyframes coinSpin {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        }
        
        .coin-spin {
            animation: coinSpin 2s linear infinite;
            transform-style: preserve-3d;
        }

        /* Mobile menu styles */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .mobile-menu.show {
            display: flex;
            opacity: 1;
        }
        .mobile-menu-content {
            width: 100%;
            padding: 2rem;
            display: flex;
            flex-direction: column;
        }
        .mobile-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
        .mobile-menu-links {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            text-align: center;
        }
        .mobile-menu-link {
            font-size: 1.25rem;
            color: white;
            padding: 0.5rem;
            transition: all 0.2s ease;
        }
        .mobile-menu-link:hover {
            transform: translateY(-2px);
        }