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

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    background: linear-gradient(180deg, #0a1628 0%, #0d1f2d 50%, #1a0f1f 100%);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 30% 80%, rgba(255, 100, 50, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 60%, rgba(100, 200, 200, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

body[style*="background-image"]::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(10, 22, 40, 0.7) 0%, rgba(10, 22, 40, 0.5) 50%, rgba(10, 22, 40, 0.8) 100%);
    pointer-events: none;
    z-index: 0;
}

.container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
}

/* ===== CLEAN REALISTIC MOON ===== */
.moon-container {
    position: fixed;
    top: 5%;
    right: 5%;
    width: 90px;
    height: 90px;
    z-index: 10;
    pointer-events: none;
    transition: all 0.5s ease-in-out;
}

.moon-container .theme-toggle {
    pointer-events: auto;
}

.moon {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 
        /* Craters - small dark spots with shadows */
        radial-gradient(4px 4px at 25% 30%, rgba(160, 170, 190, 0.6) 0%, transparent 70%),
        radial-gradient(6px 6px at 35% 25%, rgba(150, 165, 185, 0.5) 0%, transparent 70%),
        radial-gradient(3px 3px at 45% 35%, rgba(165, 175, 195, 0.55) 0%, transparent 70%),
        radial-gradient(5px 5px at 30% 45%, rgba(155, 168, 188, 0.5) 0%, transparent 70%),
        radial-gradient(4px 4px at 40% 40%, rgba(170, 180, 200, 0.45) 0%, transparent 70%),
        radial-gradient(7px 7px at 20% 40%, rgba(145, 160, 180, 0.55) 0%, transparent 70%),
        radial-gradient(3px 3px at 50% 28%, rgba(168, 178, 198, 0.5) 0%, transparent 70%),
        radial-gradient(5px 5px at 28% 50%, rgba(158, 172, 192, 0.48) 0%, transparent 70%),
        radial-gradient(4px 4px at 38% 32%, rgba(162, 175, 195, 0.52) 0%, transparent 70%),
        /* Base moon gradient */
        radial-gradient(circle at 30% 30%, 
            #ffffff 0%,
            #f0f4f8 20%,
            #e0e8f0 40%,
            #c8d4e0 60%,
            #b0c0d0 80%,
            #98a8c0 100%
        );
    box-shadow: 
        /* Inner depth */
        inset -20px -10px 40px rgba(0, 0, 0, 0.15),
        inset 15px 15px 30px rgba(255, 255, 255, 0.4),
        /* Blue-white outer glow */
        0 0 30px 5px rgba(255, 255, 255, 0.6),
        0 0 60px 15px rgba(200, 230, 255, 0.4),
        0 0 100px 30px rgba(180, 220, 255, 0.3),
        0 0 150px 50px rgba(160, 210, 255, 0.2);
    animation: moon-pulse 4s ease-in-out infinite;
}

@keyframes moon-pulse {
    0%, 100% {
        box-shadow: 
            inset -20px -10px 40px rgba(0, 0, 0, 0.15),
            inset 15px 15px 30px rgba(255, 255, 255, 0.4),
            0 0 30px 5px rgba(255, 255, 255, 0.6),
            0 0 60px 15px rgba(200, 230, 255, 0.4),
            0 0 100px 30px rgba(180, 220, 255, 0.3),
            0 0 150px 50px rgba(160, 210, 255, 0.2);
    }
    50% {
        box-shadow: 
            inset -20px -10px 40px rgba(0, 0, 0, 0.15),
            inset 15px 15px 30px rgba(255, 255, 255, 0.5),
            0 0 40px 8px rgba(255, 255, 255, 0.8),
            0 0 80px 20px rgba(200, 230, 255, 0.6),
            0 0 130px 40px rgba(180, 220, 255, 0.4),
            0 0 180px 60px rgba(160, 210, 255, 0.3);
    }
}

@media (max-width: 768px) {
    .moon-container {
        width: 65px;
        height: 65px;
    }
}

@media (max-width: 480px) {
    .moon-container {
        width: 50px;
        height: 50px;
    }
}

/* ===== THEME TOGGLE BUTTON - Dynamic Position ===== */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    cursor: pointer;
    z-index: 1000;
    box-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.3),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Night Mode - Button is transparent and clickable, positioned over moon */
body:not(.day-mode) .theme-toggle {
    top: 5%;
    right: 5%;
    width: 90px;
    height: 90px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.5s ease-in-out;
}

/* Day Mode - Button is completely invisible, only clickable area */
body.day-mode .theme-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    z-index: 1000;
    top: 5%;
    right: 5%;
    width: 90px;
    height: 90px;
    transition: all 0.5s ease-in-out;
}

/* Day mode - no icon visible, just clickable transparent area */
body.day-mode .theme-toggle::before,
body.day-mode .theme-toggle::after,
body.day-mode .theme-toggle .toggle-icon {
    display: none !important;
}

/* ===== TOUCH INDICATOR - Centered below buttons ===== */
.touch-indicator {
    position: fixed;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
    animation: touch-pulse 2s ease-in-out infinite;
    transition: all 0.5s ease-in-out;
}

/* Night Mode - centered below the moon button (90px button) - DESKTOP ONLY */
body:not(.day-mode) .touch-indicator {
    top: calc(5% + 95px);
    right: 60px;
    width: 90px;
}

/* Day Mode - centered below the day button (90px button) */
body.day-mode .touch-indicator {
    top: calc(5% + 95px);
    right: 60px;
    width: 90px;
}

/* Arrow pointing UP to button (above text) */
.touch-arrow {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 12px solid rgba(255, 255, 255, 0.8);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    animation: arrow-bounce-up 1.5s ease-in-out infinite;
    order: -1;
}

body.day-mode .touch-arrow {
    border-bottom-color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}

.touch-text {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    transition: all 0.3s ease;
    order: 1;
}

.touch-indicator:hover .touch-text {
    color: rgba(255, 255, 255, 1);
    text-shadow: 
        0 0 15px rgba(255, 255, 255, 0.8),
        0 0 30px rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

body.day-mode .touch-text {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 255, 0.4);
}

body.day-mode .touch-indicator:hover .touch-text {
    text-shadow: 
        0 0 15px rgba(255, 255, 255, 1),
        0 0 30px rgba(255, 255, 255, 0.6);
}

@keyframes touch-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

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

/* Tablet Responsive (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    body:not(.day-mode) .touch-indicator {
        top: calc(5% + 90px);
        right: 55px;
        width: 80px;
    }
    
    body.day-mode .touch-indicator {
        top: calc(5% + 95px);
        right: 55px;
        width: 80px;
    }
    
    .touch-text {
        font-size: 11px;
        letter-spacing: 2px;
    }
    
    .touch-arrow {
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 10px solid rgba(255, 255, 255, 0.8);
    }
}

/* Mobile Responsive (max-width: 480px) */
@media (max-width: 480px) {
    body:not(.day-mode) .touch-indicator {
        top: calc(5% + 70px);
        right: 15px;
        width: 65px;
    }
    
    body.day-mode .touch-indicator {
        top: calc(3% + 70px);
        right: 15px;
        width: 65px;
    }
    
    .touch-text {
        font-size: 10px;
        letter-spacing: 1.5px;
    }
    
    .touch-arrow {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 9px solid rgba(255, 255, 255, 0.8);
    }
}

/* Large Desktop (min-width: 1200px) */
@media (min-width: 1200px) {
    body:not(.day-mode) .touch-indicator {
        top: calc(5% + 100px);
        right: 60px;
        width: 90px;
    }
    
    body.day-mode .touch-indicator {
        top: calc(5% + 100px);
        right: 60px;
        width: 90px;
    }
    
    .touch-text {
        font-size: 14px;
        letter-spacing: 3px;
    }
    
    .touch-arrow {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 14px solid rgba(255, 255, 255, 0.85);
    }
}

/* Night Mode - Button is transparent and clickable, moon icon hidden */
body:not(.day-mode) .theme-toggle .toggle-icon {
    display: none !important;
}

/* Day Mode - Hide the toggle-icon span */
body.day-mode .theme-toggle .toggle-icon {
    display: none !important;
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 2px 10px rgba(0, 0, 0, 0.3),
            inset 0 0 15px rgba(255, 255, 255, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 3px 15px rgba(0, 0, 0, 0.4),
            0 0 20px rgba(255, 255, 255, 0.2),
            inset 0 0 15px rgba(255, 255, 255, 0.15);
    }
}

/* Hover effects for both modes - transparent button */
body:not(.day-mode) .theme-toggle:hover,
body.day-mode .theme-toggle:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}


/* ===== PROFESSIONAL DAY MODE SUN - From testindex.html ===== */
.sun-wrapper {
    position: fixed;
    top: 5%;
    right: 5%;
    width: 90px;
    height: 90px;
    z-index: 998;
    pointer-events: none;
    display: none;
    transition: all 0.5s ease-in-out;
}

/* Main sun circle - positioned centered */
.sun-wrapper .sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7c2 0%, #ffd75e 35%, #ffb300 65%, #ff8c00 100%);
    box-shadow:
        0 0 20px rgba(255, 200, 0, 0.8),
        0 0 40px rgba(255, 180, 0, 0.6),
        0 0 80px rgba(255, 160, 0, 0.4);
    animation: sun-glow 4s ease-in-out infinite;
    z-index: 3;
    transition: all 0.5s ease-in-out;
}

/* Inner highlight */
.sun-wrapper .sun::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,240,180,0.55) 50%, rgba(255,200,0,0) 75%);
    filter: blur(2px);
}

/* Outer aura glow */
.sun-wrapper .sun::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,210,80,0.35) 0%, rgba(255,170,0,0.15) 40%, rgba(255,140,0,0) 75%);
    animation: pulse-aura 5s ease-in-out infinite;
    z-index: -1;
}

/* Rotating light rays - transparent soft beams */
.sun-wrapper .rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 257px;
    height: 257px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            rgba(255, 220, 120, 0.00) 0deg,
            rgba(255, 220, 120, 0.22) 14deg,
            rgba(255, 220, 120, 0.00) 28deg,
            rgba(255, 220, 120, 0.16) 46deg,
            rgba(255, 220, 120, 0.00) 68deg,
            rgba(255, 220, 120, 0.18) 95deg,
            rgba(255, 220, 120, 0.00) 120deg,
            rgba(255, 220, 120, 0.14) 150deg,
            rgba(255, 220, 120, 0.00) 180deg,
            rgba(255, 220, 120, 0.18) 210deg,
            rgba(255, 220, 120, 0.00) 240deg,
            rgba(255, 220, 120, 0.16) 275deg,
            rgba(255, 220, 120, 0.00) 310deg,
            rgba(255, 220, 120, 0.20) 340deg,
            rgba(255, 220, 120, 0.00) 360deg
        );
    filter: blur(6px);
    opacity: 0.9;
    animation: rotate-rays 20s linear infinite;
    z-index: 1;
}

/* Soft ambient glow */
.sun-wrapper .light-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 428px;
    height: 428px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,210,100,0.22) 0%, rgba(255,180,80,0.10) 35%, rgba(255,140,50,0.03) 55%, transparent 75%);
    filter: blur(15px);
    animation: breathe 6s ease-in-out infinite;
    z-index: 0;
}

/* Downward volumetric light beam */
.sun-wrapper .sun-beam {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    width: 214px;
    height: 214px;
    background: linear-gradient(
        to bottom,
        rgba(255, 220, 120, 0.28) 0%,
        rgba(255, 190, 90, 0.12) 35%,
        rgba(255, 160, 70, 0.04) 60%,
        transparent 100%
    );
    clip-path: polygon(44% 0%, 56% 0%, 100% 100%, 0% 100%);
    filter: blur(12px);
    opacity: 0.8;
    animation: beam-flicker 4s ease-in-out infinite;
    z-index: 0;
}

/* Animations */
@keyframes sun-glow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 20px rgba(255, 200, 0, 0.8),
            0 0 40px rgba(255, 180, 0, 0.6),
            0 0 80px rgba(255, 160, 0, 0.4);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.04);
        box-shadow:
            0 0 28px rgba(255, 220, 80, 0.95),
            0 0 60px rgba(255, 190, 30, 0.75),
            0 0 100px rgba(255, 160, 0, 0.5);
    }
}

@keyframes pulse-aura {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.65;
    }
}

@keyframes rotate-rays {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes breathe {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.06);
        opacity: 1;
    }
}

@keyframes beam-flicker {
    0%, 100% {
        opacity: 0.72;
        transform: translateX(-50%) scaleY(1);
    }
    50% {
        opacity: 0.92;
        transform: translateX(-50%) scaleY(1.04);
    }
}

/* Day Mode - Show sun */
body.day-mode .sun-wrapper {
    display: block !important;
}

body.day-mode .theme-toggle {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 215, 0, 0.4),
        inset 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .sun-wrapper {
        width: 65px;
        height: 65px;
        top: 3%;
        right: 3%;
    }
    
    .sun-wrapper .sun {
        width: 54px;
        height: 54px;
    }
    
    .sun-wrapper .rays {
        width: 185px;
        height: 185px;
    }
    
    .sun-wrapper .light-glow {
        width: 308px;
        height: 308px;
    }
    
    .sun-wrapper .sun-beam {
        width: 154px;
        height: 154px;
    }
    
    /* Mobile: Day mode button */
    body.day-mode .theme-toggle {
        width: 65px;
        height: 65px;
        top: 3%;
        right: 3%;
    }
    
    body.day-mode .theme-toggle::before {
        width: 55px;
        height: 55px;
    }
    
    body.day-mode .theme-toggle::after {
        transform: translate(-50%, -50%) scale(0.8);
    }
    
    /* Mobile: Night mode button over moon - transparent */
    body:not(.day-mode) .theme-toggle {
        width: 65px;
        height: 65px;
        top: 5%;
        right: 5%;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    body:not(.day-mode) .theme-toggle .toggle-icon {
        display: none !important;
    }
}

/* ===== SINGLE BRIGHT METEOR WITH SPARKLES ===== */
.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Thin Bright Meteor Light */
.meteor {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 
        /* Core bright glow */
        0 0 10px 2px rgba(255, 255, 255, 1),
        /* Cyan glow layer */
        0 0 30px 8px rgba(0, 212, 170, 0.8),
        /* Outer glow */
        0 0 60px 15px rgba(0, 212, 170, 0.4);
    opacity: 0;
    animation: meteor-fall linear forwards;
}

/* Thin bright light beam behind meteor */
.meteor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 1px;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 1) 0%,
        rgba(0, 212, 170, 0.8) 30%,
        rgba(0, 212, 170, 0.3) 60%,
        transparent 100%
    );
    transform-origin: right center;
    transform: translate(-100%, -50%);
    filter: blur(0.5px);
    opacity: 0.9;
}

@keyframes meteor-fall {
    0% {
        opacity: 0;
        transform: translateY(-5vh) translateX(0);
    }
    3% {
        opacity: 1;
        transform: translateY(2vh) translateX(5px);
    }
    97% {
        opacity: 1;
        transform: translateY(105vh) translateX(150px);
    }
    100% {
        opacity: 0;
        transform: translateY(110vh) translateX(160px);
    }
}

/* Sparkle particles trailing behind meteor */
.sparkle {
    position: absolute;
    width: 1px;
    height: 1px;
    background: rgba(0, 212, 170, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 4px 1px rgba(0, 212, 170, 0.6);
    animation: sparkle-fade linear forwards;
}

@keyframes sparkle-fade {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    20% {
        opacity: 1;
        transform: scale(1);
    }
    80% {
        opacity: 0.5;
        transform: scale(0.8);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.profile-section {
    text-align: center;
    margin-bottom: 30px;
}

.profile-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    padding: 4px;
    background: linear-gradient(135deg, #00c9a7, #00d4aa);
    box-shadow: 
        0 0 8px rgba(0, 201, 167, 0.3),
        0 0 15px rgba(0, 201, 167, 0.2),
        0 0 25px rgba(0, 201, 167, 0.1);
    animation: soft-rgb-glow 5s ease-in-out infinite;
}

@keyframes soft-rgb-glow {
    0% {
        box-shadow: 
            0 0 8px rgba(0, 201, 167, 0.35),
            0 0 15px rgba(0, 201, 167, 0.2),
            0 0 25px rgba(0, 201, 167, 0.1),
            inset 0 0 8px rgba(0, 201, 167, 0.15);
    }
    20% {
        box-shadow: 
            0 0 8px rgba(0, 150, 200, 0.35),
            0 0 15px rgba(0, 150, 200, 0.2),
            0 0 25px rgba(0, 150, 200, 0.1),
            inset 0 0 8px rgba(0, 150, 200, 0.15);
    }
    40% {
        box-shadow: 
            0 0 8px rgba(100, 200, 255, 0.35),
            0 0 15px rgba(100, 200, 255, 0.2),
            0 0 25px rgba(100, 200, 255, 0.1),
            inset 0 0 8px rgba(100, 200, 255, 0.15);
    }
    60% {
        box-shadow: 
            0 0 8px rgba(200, 100, 255, 0.35),
            0 0 15px rgba(200, 100, 255, 0.2),
            0 0 25px rgba(200, 100, 255, 0.1),
            inset 0 0 8px rgba(200, 100, 255, 0.15);
    }
    80% {
        box-shadow: 
            0 0 8px rgba(255, 100, 150, 0.35),
            0 0 15px rgba(255, 100, 150, 0.2),
            0 0 25px rgba(255, 100, 150, 0.1),
            inset 0 0 8px rgba(255, 100, 150, 0.15);
    }
    100% {
        box-shadow: 
            0 0 8px rgba(0, 201, 167, 0.35),
            0 0 15px rgba(0, 201, 167, 0.2),
            0 0 25px rgba(0, 201, 167, 0.1),
            inset 0 0 8px rgba(0, 201, 167, 0.15);
    }
}

.profile-image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #0a1628;
    background: #1a2a3a;
}

.status-dot {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    background: #00d4aa;
    border-radius: 50%;
    border: 2px solid #0a1628;
}

/* ===== SPECIAL TYPOGRAPHY - SCI-FI NEON ===== */
.header-typography {
    position: relative;
    margin-bottom: 25px;
    padding: 20px 0;
}

/* Top Light Bar */
.header-typography::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(0, 212, 170, 0.3) 20%,
        rgba(0, 212, 170, 0.8) 50%,
        rgba(0, 212, 170, 0.3) 80%,
        transparent 100%
    );
    box-shadow: 
        0 0 10px rgba(0, 212, 170, 0.5),
        0 0 20px rgba(0, 212, 170, 0.3),
        0 -5px 15px rgba(0, 212, 170, 0.2);
}

/* Neon Name - Orbitron Bold with Glow */
.neon-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    font-weight: 700;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    letter-spacing: 8px;
    text-transform: uppercase;
    position: relative;
}

/* Orbitron Characters with Clean Glow */
.neon-name .char {
    position: relative;
    color: #fff;
    display: inline-block;
    padding: 0 2px;
    /* Clean neon glow effect */
    text-shadow: 
        0 0 10px rgba(0, 212, 170, 0.8),
        0 0 20px rgba(0, 212, 170, 0.5),
        0 0 40px rgba(0, 212, 170, 0.3);
    animation: orbitron-glow 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

/* Staggered animation delays */
.neon-name .char:nth-child(1) { animation-delay: 0s; }
.neon-name .char:nth-child(2) { animation-delay: 0.1s; }
.neon-name .char:nth-child(3) { animation-delay: 0.2s; }
.neon-name .char:nth-child(5) { animation-delay: 0.3s; }
.neon-name .char:nth-child(6) { animation-delay: 0.4s; }
.neon-name .char:nth-child(7) { animation-delay: 0.5s; }
.neon-name .char:nth-child(8) { animation-delay: 0.6s; }
.neon-name .char:nth-child(9) { animation-delay: 0.7s; }
.neon-name .char:nth-child(10) { animation-delay: 0.8s; }

@keyframes orbitron-glow {
    0%, 100% {
        text-shadow: 
            0 0 10px rgba(0, 212, 170, 0.8),
            0 0 20px rgba(0, 212, 170, 0.5),
            0 0 40px rgba(0, 212, 170, 0.3);
        opacity: 1;
    }
    50% {
        text-shadow: 
            0 0 15px rgba(0, 255, 255, 0.9),
            0 0 30px rgba(0, 212, 170, 0.7),
            0 0 60px rgba(0, 212, 170, 0.5);
        opacity: 0.98;
    }
}

/* Hover effect */
.neon-name .char:hover {
    text-shadow: 
        0 0 15px rgba(0, 255, 255, 1),
        0 0 30px rgba(0, 255, 255, 0.8),
        0 0 60px rgba(0, 212, 170, 0.6);
}

.neon-name .space {
    width: 22px;
}

/* Enhanced Glow Line */
.glow-line {
    width: 140px;
    height: 2px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 212, 170, 0.3) 10%,
        rgba(0, 255, 255, 0.9) 50%,
        rgba(0, 212, 170, 0.3) 90%,
        transparent 100%
    );
    border-radius: 1px;
    box-shadow: 
        0 0 15px rgba(0, 212, 170, 0.6),
        0 0 30px rgba(0, 255, 255, 0.4),
        0 0 60px rgba(0, 212, 170, 0.2);
    animation: line-glow 3s ease-in-out infinite;
    position: relative;
}

.glow-line::before,
.glow-line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: rgba(0, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

.glow-line::before { left: -3px; }
.glow-line::after { right: -3px; }

@keyframes line-pulse {
    0%, 100% { 
        opacity: 0.7;
        transform: scaleX(1);
        box-shadow: 
            0 0 15px rgba(0, 212, 170, 0.6),
            0 0 30px rgba(0, 255, 255, 0.3);
    }
    50% { 
        opacity: 1;
        transform: scaleX(1.1);
        box-shadow: 
            0 0 25px rgba(0, 212, 170, 0.9),
            0 0 50px rgba(0, 255, 255, 0.6),
            0 0 80px rgba(0, 212, 170, 0.4);
    }
}

/* Badge - Oxanium Medium - Always Active */
.badge-sharp {
    display: inline-block;
    font-family: 'Oxanium', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(224, 255, 252, 0.95);
    background: rgba(0, 212, 170, 0.1);
    padding: 10px 24px;
    margin-bottom: 15px;
    position: relative;
    border: 1px solid rgba(0, 255, 255, 0.5);
    border-radius: 2px;
    box-shadow: 
        0 0 30px rgba(0, 212, 170, 0.4),
        0 0 60px rgba(0, 255, 255, 0.2),
        inset 0 0 40px rgba(0, 212, 170, 0.1);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
    animation: badge-pulse 3s ease-in-out infinite;
}

/* Badge corner accents - always glowing */
.badge-sharp::before,
.badge-sharp::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    animation: corner-glow 2s ease-in-out infinite;
}

.badge-sharp::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}

.badge-sharp::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

/* Inner quote marks */
.badge-sharp .quote-left,
.badge-sharp .quote-right {
    position: absolute;
    font-size: 20px;
    color: rgba(0, 255, 255, 0.7);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    animation: quote-pulse 2.5s ease-in-out infinite;
}

.badge-sharp .quote-left {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.badge-sharp .quote-right {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Badge animations */
@keyframes badge-pulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(0, 212, 170, 0.3),
            0 0 40px rgba(0, 255, 255, 0.15),
            inset 0 0 30px rgba(0, 212, 170, 0.08);
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
    }
    50% {
        box-shadow: 
            0 0 35px rgba(0, 212, 170, 0.5),
            0 0 70px rgba(0, 255, 255, 0.3),
            inset 0 0 50px rgba(0, 212, 170, 0.15);
        text-shadow: 0 0 20px rgba(0, 255, 255, 1);
    }
}

@keyframes corner-glow {
    0%, 100% {
        border-color: rgba(0, 255, 255, 0.6);
        box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
    }
    50% {
        border-color: rgba(0, 255, 255, 1);
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
    }
}

@keyframes quote-pulse {
    0%, 100% {
        opacity: 0.6;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 20px rgba(0, 255, 255, 0.9);
    }
}

/* Hover effects - enhance the already active state */
.badge-sharp:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 0 40px rgba(0, 212, 170, 0.6),
        0 0 80px rgba(0, 255, 255, 0.4),
        inset 0 0 50px rgba(0, 212, 170, 0.2);
}

.badge-sharp:hover::before,
.badge-sharp:hover::after {
    width: 12px;
    height: 12px;
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* Location - Inter Regular */
.location-modern {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.location-modern i {
    color: #ff4757;
    font-size: 16px;
    text-shadow: 
        0 0 10px rgba(255, 71, 87, 0.8),
        0 0 20px rgba(255, 71, 87, 0.4);
    animation: pin-pulse 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

@keyframes pin-pulse {
    0%, 100% { 
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255, 71, 87, 0.8), 0 0 20px rgba(255, 71, 87, 0.4);
    }
    50% { 
        transform: scale(1.1);
        text-shadow: 0 0 20px rgba(255, 71, 87, 1), 0 0 40px rgba(255, 71, 87, 0.6);
    }
}

.location-modern span {
    background: linear-gradient(180deg, #fff 0%, rgba(224, 255, 252, 0.9) 50%, rgba(0, 212, 170, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.location-modern:hover i {
    transform: scale(1.2) translateY(-2px);
    text-shadow: 0 0 30px rgba(255, 71, 87, 1), 0 0 60px rgba(255, 71, 87, 0.8);
}

/* Old classes - hide if still referenced */
.name, .badge, .location {
    display: none;
}

/* Responsive Typography */
@media (max-width: 768px) {
    .header-typography::before {
        width: 70%;
    }
    
    .neon-name {
        font-size: 28px;
        letter-spacing: 6px;
        gap: 3px;
    }
    
    .neon-name .space {
        width: 16px;
    }
    
    .glow-line {
        width: 120px;
    }
    
    .badge-sharp {
        font-size: 11px;
        padding: 9px 18px;
        letter-spacing: 2px;
    }
    
    .badge-sharp .quote-left,
    .badge-sharp .quote-right {
        font-size: 16px;
    }
    
    .location-modern {
        font-size: 10px;
        letter-spacing: 1.5px;
    }
    
    .description {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .header-typography {
        padding: 15px 0;
    }
    
    .header-typography::before {
        width: 60%;
    }
    
    .neon-name {
        font-size: 22px;
        letter-spacing: 5px;
        gap: 2px;
    }
    
    .neon-name .space {
        width: 12px;
    }
    
    .glow-line {
        width: 100px;
        margin-top: 12px;
    }
    
    .badge-sharp {
        font-size: 10px;
        padding: 8px 14px;
        letter-spacing: 2px;
    }
    
    .badge-sharp .quote-left,
    .badge-sharp .quote-right {
        font-size: 14px;
    }
    
    .location-modern {
        font-size: 9px;
        letter-spacing: 1.5px;
        gap: 6px;
    }
    
    .location-modern i {
        font-size: 14px;
    }
    
    .description {
        font-size: 12px;
    }
}

.description {
    font-family: 'Poppins', sans-serif;
    color: rgba(224, 255, 252, 0.9);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.3px;
    margin-bottom: 20px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.tags {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.tag {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 10px;
    font-weight: 500;
}

.tag-green {
    background: rgba(0, 180, 100, 0.15);
    color: #00c9a7;
    border: 1px solid rgba(0, 201, 167, 0.3);
}

.tag-teal {
    background: rgba(0, 150, 150, 0.15);
    color: #00d4aa;
    border: 1px solid rgba(0, 212, 170, 0.3);
}

.tag-purple {
    background: rgba(150, 100, 200, 0.15);
    color: #b084ff;
    border: 1px solid rgba(176, 132, 255, 0.3);
}

.tag-blue {
    background: rgba(66, 133, 244, 0.15);
    color: #4285f4;
    border: 1px solid rgba(66, 133, 244, 0.3);
}

.tag-orange {
    background: rgba(255, 167, 38, 0.15);
    color: #ffa726;
    border: 1px solid rgba(255, 167, 38, 0.3);
}

/* ===== AI TOOLS MARQUEE SLIDER ===== */
.tools-marquee-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 20px 0;
    padding: 15px 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.tools-marquee-container::before,
.tools-marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.tools-marquee-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(10, 22, 40, 0.9), transparent);
}

.tools-marquee-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(10, 22, 40, 0.9), transparent);
}

.tools-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
}

.tools-marquee {
    display: flex;
    width: fit-content;
    animation: marquee-flow 35s linear infinite;
    will-change: transform;
}

.tools-marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee-flow {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.tool-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin: 0 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    white-space: nowrap;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.tool-item:hover {
    background: rgba(0, 212, 170, 0.1);
    border-color: rgba(0, 212, 170, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 212, 170, 0.2);
}

.tool-item i {
    font-size: 14px;
    color: #00d4aa;
    transition: all 0.3s;
}

.tool-item:hover i {
    color: #00ffcc;
    transform: scale(1.2);
}

.tool-item span {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.3px;
}

.tool-item:hover span {
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tools-marquee-container {
        margin: 15px 0;
        padding: 12px 0;
        border-radius: 10px;
    }
    
    .tools-marquee-container::before,
    .tools-marquee-container::after {
        width: 40px;
    }
    
    .tools-marquee-wrapper {
        mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
    }
    
    .tools-marquee {
        animation: marquee-flow 28s linear infinite;
    }
    
    .tool-item {
        padding: 6px 12px;
        margin: 0 4px;
    }
    
    .tool-item i {
        font-size: 12px;
    }
    
    .tool-item span {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .tools-marquee-container {
        padding: 10px 0;
    }
    
    .tools-marquee-container::before,
    .tools-marquee-container::after {
        width: 30px;
    }
    
    .tools-marquee-wrapper {
        mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);
    }
    
    .tools-marquee {
        animation: marquee-flow 22s linear infinite;
    }
    
    .tool-item {
        padding: 5px 10px;
        margin: 0 3px;
        border-radius: 20px;
    }
    
    .tool-item span {
        font-size: 10px;
    }
}

/* ===== PROGRAMMING LANGUAGES MARQUEE ===== */
.langs-marquee-container {
    width: 100%;
    overflow: hidden;
    margin: 20px 0 15px;
    padding: 12px 0;
    position: relative;
}

.langs-marquee-container::before,
.langs-marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.langs-marquee-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(10, 22, 40, 0.95), transparent);
}

.langs-marquee-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(10, 22, 40, 0.95), transparent);
}

.langs-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
}

.langs-marquee {
    display: flex;
    width: fit-content;
    animation: langs-flow 40s linear infinite;
    will-change: transform;
}

.langs-marquee:hover {
    animation-play-state: paused;
}

@keyframes langs-flow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin: 0 5px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    white-space: nowrap;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.lang-item:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.lang-item i {
    font-size: 18px;
    transition: all 0.3s;
}

.lang-item span {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
}

/* Brand Colors */
.lang-item:has(.fa-python):hover { background: rgba(55, 118, 171, 0.15); border-color: #3776ab; box-shadow: 0 5px 20px rgba(55, 118, 171, 0.3); }
.lang-item:has(.fa-python):hover i { color: #3776ab; }

.lang-item:has(.fa-js):hover { background: rgba(247, 223, 30, 0.15); border-color: #f7df1e; box-shadow: 0 5px 20px rgba(247, 223, 30, 0.3); }
.lang-item:has(.fa-js):hover i { color: #f7df1e; }

.lang-item:has(.fa-php):hover { background: rgba(119, 123, 180, 0.15); border-color: #777bb4; box-shadow: 0 5px 20px rgba(119, 123, 180, 0.3); }
.lang-item:has(.fa-php):hover i { color: #777bb4; }

.lang-item:has(.fa-react):hover { background: rgba(97, 218, 251, 0.15); border-color: #61dafb; box-shadow: 0 5px 20px rgba(97, 218, 251, 0.3); }
.lang-item:has(.fa-react):hover i { color: #61dafb; }

.lang-item:has(.fa-node):hover { background: rgba(51, 153, 51, 0.15); border-color: #339933; box-shadow: 0 5px 20px rgba(51, 153, 51, 0.3); }
.lang-item:has(.fa-node):hover i { color: #339933; }

.lang-item:has(.fa-code):hover { background: rgba(49, 120, 198, 0.15); border-color: #3178c6; box-shadow: 0 5px 20px rgba(49, 120, 198, 0.3); }
.lang-item:has(.fa-code):hover i { color: #3178c6; }

.lang-item:has(.fa-css3-alt):hover { background: rgba(38, 77, 228, 0.15); border-color: #264de4; box-shadow: 0 5px 20px rgba(38, 77, 228, 0.3); }
.lang-item:has(.fa-css3-alt):hover i { color: #264de4; }

.lang-item:has(.fa-html5):hover { background: rgba(227, 79, 38, 0.15); border-color: #e34f26; box-shadow: 0 5px 20px rgba(227, 79, 38, 0.3); }
.lang-item:has(.fa-html5):hover i { color: #e34f26; }

.lang-item:has(.fa-vuejs):hover { background: rgba(79, 192, 141, 0.15); border-color: #4fc08d; box-shadow: 0 5px 20px rgba(79, 192, 141, 0.3); }
.lang-item:has(.fa-vuejs):hover i { color: #4fc08d; }

.lang-item:has(.fa-laravel):hover { background: rgba(255, 45, 32, 0.15); border-color: #ff2d20; box-shadow: 0 5px 20px rgba(255, 45, 32, 0.3); }
.lang-item:has(.fa-laravel):hover i { color: #ff2d20; }

/* Responsive */
@media (max-width: 768px) {
    .langs-marquee-container {
        margin: 15px 0 10px;
        padding: 10px 0;
    }
    
    .langs-marquee-container::before,
    .langs-marquee-container::after {
        width: 30px;
    }
    
    .langs-marquee-wrapper {
        mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);
    }
    
    .langs-marquee {
        animation: langs-flow 32s linear infinite;
    }
    
    .lang-item {
        padding: 6px 12px;
        margin: 0 4px;
    }
    
    .lang-item i {
        font-size: 16px;
    }
    
    .lang-item span {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .langs-marquee {
        animation: langs-flow 25s linear infinite;
    }
    
    .lang-item {
        padding: 5px 10px;
        border-radius: 15px;
    }
    
    .lang-item i {
        font-size: 14px;
    }
    
    .lang-item span {
        font-size: 10px;
    }
}

.links-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* Sequential wave animations - Left to Right, then Right to Left */
.link-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 255, 255, 0.05) 10%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.05) 90%,
        transparent 100%
    );
    animation: wave-left-to-right 6s ease-in-out infinite;
    pointer-events: none;
}

/* Second wave - Right to Left (starts after first finishes) */
.link-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(0, 212, 170, 0.05) 10%,
        rgba(0, 212, 170, 0.2) 50%,
        rgba(0, 212, 170, 0.05) 90%,
        transparent 100%
    );
    animation: wave-right-to-left 6s ease-in-out infinite;
    animation-delay: 3s;
    pointer-events: none;
}

@keyframes wave-left-to-right {
    0% {
        left: -40%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    45% {
        left: 100%;
        opacity: 1;
    }
    50% {
        left: 100%;
        opacity: 0;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes wave-right-to-left {
    0% {
        right: -40%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    45% {
        right: 100%;
        opacity: 1;
    }
    50% {
        right: 100%;
        opacity: 0;
    }
    100% {
        right: 100%;
        opacity: 0;
    }
}

.link-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.4), 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 30px rgba(0, 212, 170, 0.2);
    border-color: rgba(0, 212, 170, 0.3);
}

/* Speed up animation on hover (3x faster) */
.link-card:hover::before,
.link-card:hover::after {
    animation-duration: 2s;
}

.link-card:active {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.link-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.link-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform-style: preserve-3d;
}

.link-icon i {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.link-card:hover .link-icon {
    transform: rotateY(10deg) rotateX(-5deg) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Social Media 3D Icon Styles */
.website .link-icon {
    background: linear-gradient(145deg, #00c9a7, #00a884);
    color: #fff;
}

.github .link-icon {
    background: linear-gradient(145deg, #333, #24292e);
    color: #fff;
}

.google .link-icon {
    background: linear-gradient(145deg, #4285f4, #3367d6);
    color: #fff;
}

.linkedin .link-icon {
    background: linear-gradient(145deg, #0077b5, #005885);
    color: #fff;
}

.instagram .link-icon {
    background: linear-gradient(145deg, #833ab4, #fd1d1d, #f77737);
    color: #fff;
}

.twitter .link-icon {
    background: linear-gradient(145deg, #1da1f2, #0d8bd9);
    color: #fff;
}

.youtube .link-icon {
    background: linear-gradient(145deg, #ff0000, #cc0000);
    color: #fff;
}

.tiktok .link-icon {
    background: linear-gradient(145deg, #69c9d0, #ee1d52);
    color: #fff;
}

.facebook .link-icon {
    background: linear-gradient(145deg, #1877f2, #0d65d9);
    color: #fff;
}

.discord .link-icon {
    background: linear-gradient(145deg, #5865f2, #4752c4);
    color: #fff;
}

.telegram .link-icon {
    background: linear-gradient(145deg, #0088cc, #0077b5);
    color: #fff;
}

.whatsapp .link-icon {
    background: linear-gradient(145deg, #25d366, #128c7e);
    color: #fff;
}

.pinterest .link-icon {
    background: linear-gradient(145deg, #e60023, #bd081c);
    color: #fff;
}

.reddit .link-icon {
    background: linear-gradient(145deg, #ff4500, #cc3700);
    color: #fff;
}

.snapchat .link-icon {
    background: linear-gradient(145deg, #fffc00, #e6e300);
    color: #000;
}

.twitch .link-icon {
    background: linear-gradient(145deg, #9146ff, #7c2bdb);
    color: #fff;
}

.spotify .link-icon {
    background: linear-gradient(145deg, #1ed760, #1db954);
    color: #fff;
}

.behance .link-icon {
    background: linear-gradient(145deg, #1769ff, #0057cc);
    color: #fff;
}

.dribbble .link-icon {
    background: linear-gradient(145deg, #ea4c89, #c73b6f);
    color: #fff;
}

.medium .link-icon {
    background: linear-gradient(145deg, #000, #333);
    color: #fff;
}

.devto .link-icon {
    background: linear-gradient(145deg, #0a0a0a, #333);
    color: #fff;
}

.stackoverflow .link-icon {
    background: linear-gradient(145deg, #f48024, #d4681c);
    color: #fff;
}

.portfolio .link-icon {
    background: linear-gradient(145deg, #00d4aa, #00b894);
    color: #fff;
}

.mail .link-icon {
    background: linear-gradient(145deg, #ea4335, #d33b28);
    color: #fff;
}

.link-info {
    text-align: left;
}

.link-title {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
}

.link-url {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
}

.link-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateX(0);
}

.link-card:hover .link-arrow {
    color: rgba(255, 255, 255, 0.8);
    transform: translateX(5px) scale(1.2);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.footer-tags {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.footer-tag {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
    margin-top: 20px;
}

@media (max-width: 400px) {
    .container {
        max-width: 100%;
    }
    
    .profile-image {
        width: 90px;
        height: 90px;
    }
    
    .name {
        font-size: 22px;
    }
}