* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #00d4ff;
    --secondary-color: #ff0080;
    --accent-color: #39ff14;
    --dark-bg: #0a0e27;
    --darker-bg: #050a1a;
    --text-color: #e0e0e0;
    --text-muted: #a0a0a0;
    --neon-cyan: #00d4ff;
    --neon-pink: #ff0080;
    --neon-green: #39ff14;
    --glass-bg: rgba(10, 14, 39, 0.7);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    background: linear-gradient(135deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 212, 255, 0.03) 0px,
            rgba(0, 212, 255, 0.03) 1px,
            transparent 1px,
            transparent 2px
        );
    pointer-events: none;
    z-index: 1;
    animation: scanlines 8s linear infinite;
}

@keyframes scanlines {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(10px);
    }
}

/* Animated stars background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    top: 20%;
    left: 10%;
    box-shadow: 100px 50px white, 200px 30px white, 300px 100px white, 400px 40px white,
                50px 200px white, 150px 250px white, 250px 200px white, 350px 150px white,
                100px 300px white, 450px 200px white, 200px 400px white, 350px 350px white,
                500px 100px white, 150px 150px white, 380px 280px white;
    animation: twinkle 5s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--glass-bg);
    border-bottom: 2px solid var(--neon-cyan);
    z-index: 1000;
    backdrop-filter: blur(15px);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--neon-cyan);
    text-decoration: none;
    text-shadow: 0 0 15px var(--neon-cyan);
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.logo:hover {
    text-shadow: 0 0 25px var(--neon-pink), 0 0 15px var(--neon-cyan);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    font-size: 0.95rem;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--neon-cyan);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(255, 0, 128, 0.05));
    position: relative;
    overflow: hidden;
    padding-top: 60px;
}

.hero::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    top: -50px;
    right: -50px;
    animation: float 6s ease-in-out infinite;
}

.hero::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 0, 128, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -50px;
    left: -50px;
    animation: float 8s ease-in-out infinite reverse;
}

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

.hero-content {
    text-align: center;
    z-index: 2;
    position: relative;
}

.rocket-animation {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: bounce 2s ease-in-out infinite;
}

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

.hero h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    color: var(--text-color);
    text-shadow: 
        0 0 20px var(--neon-cyan),
        0 0 40px var(--neon-pink),
        0 0 60px rgba(255, 0, 128, 0.5);
    margin-bottom: 1rem;
    letter-spacing: 3px;
    position: relative;
    animation: glitch 3s infinite;
}

@keyframes glitch {
    0%, 100% {
        text-shadow: 
            0 0 20px var(--neon-cyan),
            0 0 40px var(--neon-pink),
            0 0 60px rgba(255, 0, 128, 0.5);
    }
    25% {
        text-shadow: 
            -3px 0 var(--neon-cyan),
            3px 0 var(--neon-pink),
            0 0 20px rgba(255, 0, 128, 0.5);
    }
    50% {
        text-shadow: 
            3px 0 var(--neon-cyan),
            -3px 0 var(--neon-pink),
            0 0 20px rgba(255, 0, 128, 0.5);
    }
}

.subtitle {
    font-size: 1.5rem;
    color: var(--neon-cyan);
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.description {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.cta-button {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
    color: var(--darker-bg);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    font-size: 1rem;
    letter-spacing: 1px;
    border: 2px solid transparent;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.8), 0 0 15px rgba(255, 0, 128, 0.5);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Sections */
section {
    padding: 4rem 0;
    position: relative;
    z-index: 2;
}

section h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--neon-cyan);
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 2px;
    position: relative;
}

section h2::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: var(--neon-pink);
    opacity: 0.5;
    clip-path: polygon(0 0, 0 50%, 0 50%, 0 0);
    animation: glitch-before 0.3s infinite;
}

section h2::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: var(--neon-green);
    opacity: 0.5;
    clip-path: polygon(0 50%, 0 100%, 0 100%, 0 50%);
    animation: glitch-after 0.3s infinite;
}

@keyframes glitch-before {
    0% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
    50% {
        clip-path: polygon(0 0, 0 100%, 10% 100%, 0 0);
    }
    100% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}

@keyframes glitch-after {
    0% {
        clip-path: polygon(0 50%, 0 50%, 0 50%, 0 50%);
    }
    50% {
        clip-path: polygon(0 50%, 0 100%, 10% 100%, 0 50%);
    }
    100% {
        clip-path: polygon(0 50%, 0 50%, 0 50%, 0 50%);
    }
}

/* About Section */
.about {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(255, 0, 128, 0.05) 100%);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.about-text h3, .about-text p {
    margin-bottom: 1.5rem;
}

.philosophy {
    list-style: none;
    padding-left: 0;
}

.philosophy li {
    padding: 0.8rem;
    margin: 0.5rem 0;
    background: var(--glass-bg);
    border-left: 3px solid var(--neon-cyan);
    backdrop-filter: blur(10px);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.philosophy li:hover {
    border-left-color: var(--neon-pink);
    background: rgba(0, 212, 255, 0.1);
    transform: translateX(5px);
}

/* Terminal */
.terminal {
    background: var(--darker-bg);
    border: 2px solid var(--neon-green);
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
    overflow: hidden;
}

.terminal-header {
    background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan));
    color: var(--darker-bg);
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.terminal-content {
    padding: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.8;
}

.terminal-content p {
    margin: 0.5rem 0;
    color: var(--neon-green);
}

.blink {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 49%, 100% {
        opacity: 1;
    }
    50%, 99% {
        opacity: 0;
    }
}

/* Features Section */
.features {
    background: linear-gradient(135deg, rgba(255, 0, 128, 0.05) 0%, rgba(0, 212, 255, 0.05) 100%);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--glass-bg);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    padding: 2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
    transition: left 0.5s ease;
    z-index: 0;
}

.feature-card:hover::before {
    left: 100%;
}

.feature-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.4), inset 0 0 25px rgba(0, 212, 255, 0.1);
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    color: var(--neon-cyan);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.feature-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* GitHub Section */
.github-section {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.05) 0%, rgba(0, 212, 255, 0.05) 100%);
}

.github-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.github-card {
    background: var(--glass-bg);
    border: 2px solid var(--neon-green);
    border-radius: 8px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.2);
}

.github-card h3 {
    color: var(--neon-green);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.github-card p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.github-button {
    display: inline-block;
    padding: 10px 20px;
    background: var(--neon-green);
    color: var(--darker-bg);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.github-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
}

.github-stats {
    background: var(--glass-bg);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.github-stats p {
    margin: 1rem 0;
    color: var(--text-color);
}

/* Contact Section */
.contact {
    background: linear-gradient(135deg, rgba(255, 0, 128, 0.05) 0%, rgba(57, 255, 20, 0.05) 100%);
    text-align: center;
}

.contact-content p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.contact-note {
    color: var(--neon-pink);
    font-weight: 600;
    margin-bottom: 2rem;
}

.contact-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.contact-btn {
    padding: 12px 25px;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
    color: var(--darker-bg);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
}

.contact-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 10px rgba(255, 0, 128, 0.5);
}

/* Footer */
.footer {
    background: var(--darker-bg);
    border-top: 2px solid var(--neon-cyan);
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    box-shadow: 0 -10px 30px rgba(0, 212, 255, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        gap: 1rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    section h2 {
        font-size: 1.8rem;
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .github-content {
        grid-template-columns: 1fr;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .contact-links {
        flex-direction: column;
    }

    .contact-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.2rem;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .subtitle {
        font-size: 1rem;
    }

    .description {
        font-size: 0.9rem;
    }

    section h2 {
        font-size: 1.5rem;
    }

    .nav-menu {
        display: none;
    }
}