@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #fafafa;
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #000000 0%, #333333 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .retro-gradient-bg {
            background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 50%, #eeeeee 100%);
            border: 2px solid #cccccc;
        }
        
        .retro-screen {
            background: #000000;
            color: #00ff00;
            font-family: 'JetBrains Mono', monospace;
            border: 4px solid #888888;
            border-radius: 12px;
            box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.1);
        }
        
        .retro-button {
            background: #ffffff;
            border: 2px solid #000000;
            color: #000000;
            transition: all 0.2s ease;
            box-shadow: 2px 2px 0px #cccccc;
        }
        
        .retro-button:hover {
            background: #000000;
            color: #ffffff;
            transform: translate(1px, 1px);
            box-shadow: 1px 1px 0px #cccccc;
        }
        
        .retro-card {
            background: #ffffff;
            border: 2px solid #cccccc;
            box-shadow: 4px 4px 0px #dddddd;
            transition: all 0.3s ease;
        }
        
        .retro-card:hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0px #cccccc;
        }
        
        .pixel-border {
            border: 1px solid #000000;
            background: repeating-linear-gradient(
                45deg,
                #ffffff,
                #ffffff 2px,
                #f0f0f0 2px,
                #f0f0f0 4px
            );
        }
        
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .crt-effect {
            position: relative;
        }
        
        .crt-effect::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                0deg,
                rgba(0, 255, 0, 0.05),
                rgba(0, 255, 0, 0.05) 1px,
                transparent 1px,
                transparent 3px
            );
            pointer-events: none;
        }
        
        .terminal-text {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 500;
        }