:root {
        --primary: #6366f1;
        --secondary: #06b6d4;
        --accent: #f59e0b;
        --success: #10b981;
        --dark: #0f172a;
        --neon: #00ff88;
    }

    body {
        font-family: 'Inter', sans-serif;
        scroll-behavior: smooth;
    }

    .code-font {
        font-family: 'JetBrains Mono', monospace;
    }

    .gradient-text {
        background: linear-gradient(135deg, var(--primary), var(--secondary), var(--neon));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        background-size: 200% 200%;
        animation: gradientShift 3s ease-in-out infinite;
    }

    @keyframes gradientShift {

        0%,
        100% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }
    }

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

    .matrix-char {
        position: absolute;
        color: var(--neon);
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        animation: matrix-fall linear infinite;
        opacity: 0.7;
    }

    @keyframes matrix-fall {
        0% {
            transform: translateY(-100vh);
            opacity: 1;
        }

        100% {
            transform: translateY(100vh);
            opacity: 0;
        }
    }

    .hero-bg {
        background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
        position: relative;
        overflow: hidden;
    }

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

    @keyframes float {

        0%,
        100% {
            transform: translateY(0px) rotate(0deg);
        }

        33% {
            transform: translateY(-15px) rotate(1deg);
        }

        66% {
            transform: translateY(-5px) rotate(-1deg);
        }
    }

    .terminal {
        background: #0d1117;
        border: 1px solid #30363d;
        border-radius: 12px;
        padding: 1rem;
        position: relative;
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
    }

    .terminal-header {
        display: flex;
        gap: 8px;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #30363d;
    }

    .terminal-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .terminal-dot.red {
        background: #ff5f56;
    }

    .terminal-dot.yellow {
        background: #ffbd2e;
    }

    .terminal-dot.green {
        background: #27ca3f;
    }

    .terminal-content {
        color: var(--neon);
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        line-height: 1.5;
    }

    .terminal-line {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .typing-cursor {
        border-right: 2px solid var(--neon);
        animation: blink-caret 1s step-end infinite;
    }

    .typing-cursor.paused {
        animation-play-state: paused;
        border-color: var(--neon);
    }

    .centered-cursor {
        width: 2px;
        height: 1.5em;
        background-color: var(--neon);
        animation: blink-caret 1s step-end infinite;
    }

    .terminal-content:empty+.centered-cursor {
        display: block;
    }

    @keyframes blink-caret {

        from,
        to {
            border-color: transparent;
        }

        50% {
            border-color: var(--neon);
        }
    }

    .skill-card {
        @apply bg-white95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-20050 text-center flex flex-col items-center justify-center cursor-pointer relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        will-change: transform;
    }

    .skill-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px -12px rgba(99, 102, 241, 0.25);
        background: rgba(255, 255, 255, 1);
    }

    .skill-card img {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0 auto 1rem auto;
        display: block;
        transition: transform 0.2s ease, filter 0.2s ease;
        filter: grayscale(20%);
    }

    .skill-card:hover img {
        transform: scale(1.1);
        filter: grayscale(0%) brightness(1.1);
    }

    .floating-shapes {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
    }

    .shape {
        position: absolute;
        opacity: 0.1;
        animation: floatShape 20s infinite linear;
    }

    .shape:nth-child(1) {
        left: 10%;
        animation-delay: 0s;
        animation-duration: 25s;
    }

    .shape:nth-child(2) {
        left: 20%;
        animation-delay: 2s;
        animation-duration: 30s;
    }

    .shape:nth-child(3) {
        left: 70%;
        animation-delay: 4s;
        animation-duration: 20s;
    }

    .shape:nth-child(4) {
        left: 80%;
        animation-delay: 6s;
        animation-duration: 35s;
    }

    @keyframes floatShape {
        0% {
            transform: translateY(100vh) rotate(0deg);
        }

        100% {
            transform: translateY(-100vh) rotate(360deg);
        }
    }

    .project-card {
        @apply bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100 relative;
        background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        will-change: transform;
    }

    .project-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    }

    * Interactive Timeline * .timeline-item {
        position: relative;
        padding-left: 2rem;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, var(--primary), var(--secondary));
        border-radius: 2px;
    }

    .timeline-item::after {
        content: '';
        position: absolute;
        left: -6px;
        top: 1.5rem;
        width: 16px;
        height: 16px;
        background: var(--primary);
        border: 3px solid white;
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
        }

        50% {
            box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.1);
        }

        100% {
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
        }
    }

    .glass-card {
        @apply backdrop-blur-lg border border-white20 rounded-2xl p-8 relative;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    }

    .glass-card:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
    }

    .neon-glow {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
        transition: all 0.3s ease;
    }

    .neon-glow:hover {
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.6), 0 0 60px rgba(99, 102, 241, 0.3);
        transform: scale(1.02);
    }

    .status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(16, 185, 129, 0.1);
        border: 1px solid rgba(16, 185, 129, 0.3);
        border-radius: 9999px;
        color: #10b981;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .status-dot {
        width: 8px;
        height: 8px;
        background: #10b981;
        border-radius: 50%;
        animation: statusPulse 2s infinite;
    }

    @keyframes statusPulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }
    }

    .code-block {
        background: #0d1117;
        color: #e6edf3;
        padding: 1.5rem;
        border-radius: 12px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.875rem;
        line-height: 1.5;
        border: 1px solid #30363d;
        position: relative;
        overflow: hidden;
    }

    .code-block::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--neon), var(--primary), var(--secondary));
        animation: codeGlow 3s ease-in-out infinite;
    }

    @keyframes codeGlow {

        0%,
        100% {
            opacity: 0.5;
        }

        50% {
            opacity: 1;
        }
    }

    .nav-floating {
        position: fixed;
        top: 50%;
        right: 2rem;
        transform: translateY(-50%);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .nav-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

    .nav-dot.active {
        background: var(--neon);
        box-shadow: 0 0 10px var(--neon);
    }

    .nav-dot:hover {
        transform: scale(1.5);
        background: var(--primary);
    }

    .signature {
        font-family: 'Dancing Script', cursive;
        font-size: 1.5rem;
        color: var(--primary);
        opacity: 0.7;
    }

    .easter-egg {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .easter-egg:hover {
        transform: scale(1.1) rotate(5deg);
        color: var(--neon) !important;
    }

    @media (max-width: 768px) {
        .nav-floating {
            display: none;
        }

        .matrix-char {
            font-size: 12px;
        }

        .terminal {
            padding: 0.75rem;
        }

        .code-block {
            font-size: 0.75rem;
            padding: 1rem;
        }
    }

    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--primary), var(--secondary));
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--secondary), var(--neon));
    }

    .section-divider {
        background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), var(--neon), transparent);
        height: 2px;
        width: 120px;
        margin: 2rem auto;
        animation: dividerGlow 4s ease-in-out infinite;
    }

    @keyframes dividerGlow {

        0%,
        100% {
            opacity: 0.7;
        }

        50% {
            opacity: 1;
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
        }
    }