/* ===========================
   Reset & Base Styles
   =========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Light Theme Colors - Blue & Pink Theme */
    --primary-color: #3b82f6;      /* Bright blue (was purple) */
    --secondary-color: #ec4899;    /* Hot pink */
    --accent-color: #06b6d4;       /* Cyan accent */
    --bg-light: #ffffff;
    --bg-lighter: #f9fafb;
    --bg-card: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    
    /* Gradients - Blue to Pink */
    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #ec4899 100%);     /* Blue to Pink */
    --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #f472b6 100%);  /* Cyan to Light Pink */
    --gradient-accent: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);     /* Light Blue to Purple */
    
    /* Spacing */
    --section-padding: 100px 0;
    --container-width: 1200px;
    
    /* Transitions */
    --transition: all 0.3s ease;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Dark Theme */
body.dark-mode {
    --bg-light: #0f172a;
    --bg-lighter: #0b1120;
    --bg-card: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #334155;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}

/* Dark mode canvas visibility */
.dark-mode .network-canvas {
    opacity: 0.6;
}

.dark-mode .cyber-background {
    opacity: 0.15;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-lighter);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    max-width: var(--container-width);
    width: 100%;
    margin: 0 auto !important;
    padding: 0 20px;
    box-sizing: border-box;
    display: block;
}

/* ===========================
   Animated Network Canvas
   =========================== */
.network-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.75; /* Even more visible! */
    transition: opacity 0.3s ease; /* Smooth theme transition */
    /* NO BLUR - Crystal clear network mesh! */
}

.light-mode .network-canvas {
    opacity: 0.45; /* More visible in light mode too */
}

/* ===========================
   Particle System
   =========================== */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0.6;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100vh) translateX(50px);
        opacity: 0;
    }
}

/* ===========================
   Cybersecurity Background Animation
   =========================== */
.cyber-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    opacity: 0.08;
    transition: opacity 0.3s ease; /* Smooth theme transition */
}

.light-mode .cyber-background {
    opacity: 0.03;
}

/* Binary code layer */
.cyber-background::before {
    content: "01010101 11010110 00101101 10110100 11011010 01101011 10101010 01010111 11101010 00110101 10101110 01011101 10110101 11010101 01010110 10101011 01101101 10111010 01011010 11010110 10101101 01101011 10101110 11010101 01011010 10110101 11101010 01010110 10101101 01101110 10111010 01011011 11010101 10101010 01010111 10101101 01101011 10111010 01011101 11010101 10101110 01010101 10101011 01101101 10110101 01011010 11010110 10101101 01101110 10101010 01011011 01010101 11010110 00101101 10110100 11011010 01101011 10101010 01010111";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    color: var(--primary-color);
    white-space: pre-wrap;
    word-wrap: break-word;
    animation: cyberScroll 20s linear infinite;
    transition: opacity 0.3s ease; /* Smooth theme transition */
}

/* Network visualization overlay */
.cyber-background::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: url('../img/network-bg.png') center/contain no-repeat;
    opacity: 0.15;
    animation: networkPulse 4s ease-in-out infinite, networkRotate 60s linear infinite;
}

.light-mode .cyber-background::after {
    opacity: 0.08;
}

@keyframes cyberScroll {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-10%, -10%);
    }
}

@keyframes networkPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.15;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.25;
    }
}

@keyframes networkRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Dark mode glitch effect for binary */
.dark-mode .cyber-background::before {
    animation: cyberScroll 20s linear infinite, glitchPulse 3s ease-in-out infinite;
}

@keyframes glitchPulse {
    0%, 85%, 100% {
        opacity: 0.08;
    }
    88% {
        opacity: 0.20;
        transform: translate(-10%, -10%) skew(1deg);
    }
    91% {
        opacity: 0.05;
        transform: translate(-10.5%, -10%) skew(-1deg);
    }
    94% {
        opacity: 0.15;
        transform: translate(-10%, -10%);
    }
}

/* ===========================
   Navigation
   =========================== */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    animation: dataStream 3s linear infinite;
}

@keyframes dataStream {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.dark-mode .navbar {
    background: rgba(15, 23, 42, 0.95);
}

.navbar.scrolled {
    box-shadow: var(--shadow-md);
}

.nav-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

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

.nav-link.active {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-color));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: activeNavShimmer 2s ease-in-out infinite;
}

@keyframes activeNavShimmer {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-toggle {
    background: none;
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.theme-toggle:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    transition: var(--transition);
}

/* ===========================
   Hero Section
   =========================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 50px;
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.hero::after {
    content: '⬡ ⬢ ⬡ ⬢ ⬡ ⬢ ⬡ ⬢ ⬡';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: auto;
    font-size: 20px;
    color: rgba(79, 70, 229, 0.3);
    animation: dataPackets 15s linear infinite;
    will-change: transform;
    letter-spacing: 40px;
    z-index: 1;
}

@keyframes dataPackets {
    0% {
        transform: translate3d(-50%, 0, 0);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translate3d(50%, 100vh, 0);
        opacity: 0;
    }
}

.hero-container {
    max-width: var(--container-width);
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-content {
    z-index: 1;
    will-change: auto;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    will-change: auto;
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: textShimmer 3s ease-in-out infinite;
    will-change: background-position;
}

.gradient-text-secondary {
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: textShimmer 3s ease-in-out infinite;
    will-change: background-position;
}

@keyframes textShimmer {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

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

.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn {
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(79, 70, 229, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-3px);
}

.hero-image {
    position: relative;
    z-index: 1;
}

.image-container {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.25;
    animation: pulse 4s ease-in-out infinite;
    will-change: transform;
}

.image-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: rotate360 15s linear infinite;
    opacity: 0.4;
    will-change: transform;
}

@keyframes rotate360 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.profile-img {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--bg-light);
    box-shadow: var(--shadow-xl);
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-indicator a {
    color: var(--text-muted);
    font-size: 2rem;
    text-decoration: none;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* ===========================
   Section Styles
   =========================== */
section {
    padding: var(--section-padding);
    position: relative;
    transition: background-color 0.3s ease; /* Smooth theme transitions */
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    width: 100%;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 2px;
    animation: titleUnderline 2s ease-in-out infinite;
}

@keyframes titleUnderline {
    0%, 100% {
        width: 80px;
    }
    50% {
        width: 120px;
    }
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

/* ===========================
   About Section
   =========================== */
.about {
    background: var(--bg-light);
}

.about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
}

.about-text {
    font-size: 1.1rem;
    line-height: 1.8;
}

.about-text .lead {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.about-text p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.research-interests {
    margin-top: 2rem;
}

.research-interests h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.interests-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.interest-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 8px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.interest-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(79, 70, 229, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.interest-item:hover::before {
    width: 200%;
    height: 200%;
}

.interest-item:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-md);
}

.interest-item i {
    color: var(--primary-color);
    font-size: 1.5rem;
    transition: var(--transition);
}

.interest-item:hover i {
    transform: rotate(360deg) scale(1.2);
}

.about-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.stat-card {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    will-change: transform; /* Performance optimization */
}

.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.1) 0%, transparent 70%);
    animation: cardGlow 4s ease-in-out infinite;
}

/* Data packet animation */
.stat-card::after {
    content: '⬢';
    position: absolute;
    font-size: 60px;
    color: var(--primary-color);
    opacity: 0.05;
    top: -20px;
    right: -20px;
    animation: dataRotate 20s linear infinite;
    z-index: 0;
}

@keyframes dataRotate {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.05;
    }
    50% {
        transform: rotate(180deg) scale(1.2);
        opacity: 0.1;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.05;
    }
}

@keyframes cardGlow {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.3;
    }
    50% {
        transform: translate(10%, 10%);
        opacity: 0.6;
    }
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--primary-color);
    background: linear-gradient(145deg, var(--bg-card), rgba(79, 70, 229, 0.05));
}

.stat-card:hover::after {
    opacity: 0.15;
    animation: dataRotate 5s linear infinite;
}

.stat-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    animation: iconFloat 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(79, 70, 229, 0.3));
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) scale(1.1) rotate(-5deg);
    }
    50% {
        transform: translateY(-12px) scale(1.12) rotate(0deg);
    }
    75% {
        transform: translateY(-8px) scale(1.1) rotate(5deg);
    }
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
    animation: numberPulse 2s ease-in-out infinite;
}

@keyframes numberPulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(79, 70, 229, 0.2);
    }
    50% {
        transform: scale(1.05);
        text-shadow: 0 0 15px rgba(79, 70, 229, 0.4);
    }
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ===========================
   Research & Publications Section
   =========================== */
.research-publications {
    background: var(--bg-lighter);
}

.publications-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.publication-card {
    background: var(--bg-light);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease; /* Faster transition */
    border-left: 4px solid var(--primary-color);
    position: relative;
    overflow: hidden;
    will-change: transform; /* Performance hint */
}

/* Animated binary data stream in background */
.publication-card::before {
    content: '01101000 01100101 01111000 00100000 01100100 01100001 01110100 01100001';
    position: absolute;
    top: 50%;
    left: -100%;
    width: 200%;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: var(--primary-color);
    opacity: 0;
    transition: all 0.6s ease;
    transform: translateY(-50%);
    white-space: nowrap;
    letter-spacing: 3px;
    z-index: 0;
}

/* Security shield corner decoration */
.publication-card::after {
    content: '🛡️';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    opacity: 0;
    transition: all 0.4s ease;
    transform: scale(0) rotate(0deg);
    z-index: 0;
}

.publication-card:hover::before {
    opacity: 0.08;
    left: 0;
    animation: dataFlow 5s linear infinite; /* Slower = smoother */
}

@keyframes dataFlow {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    100% {
        transform: translateY(-50%) translateX(20%);
    }
}

.publication-card:hover::after {
    opacity: 0.15;
    transform: scale(1) rotate(360deg);
}

.publication-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(79, 70, 229, 0.3), 0 0 0 1px rgba(79, 70, 229, 0.1);
    border-left-width: 6px;
    background: linear-gradient(135deg, var(--bg-light), rgba(79, 70, 229, 0.02));
}

.pub-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.pub-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.2);
}

.publication-card:hover .pub-icon {
    transform: rotate(360deg) scale(1.15);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.5);
    filter: brightness(1.2);
}

.pub-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pub-status {
    padding: 0.25rem 0.75rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.6);
    }
}

.dark-mode .pub-status {
    background: #78350f;
    color: #fef3c7;
}

.pub-venue {
    padding: 0.25rem 0.75rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.dark-mode .pub-venue {
    background: #1e3a8a;
    color: #dbeafe;
}

.pub-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.publication-card:hover .pub-title {
    color: var(--primary-color);
    transform: translateX(5px);
    text-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
}

.pub-authors {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    font-style: italic;
}

.pub-description {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.pub-links {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pub-link {
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.pub-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(79, 70, 229, 0.3), 
        transparent);
    transition: left 0.5s;
}

.pub-link:hover::before {
    left: 100%;
}

.pub-link:hover:not(.disabled) {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

.pub-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    padding: 0.25rem 0.75rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 15px;
    font-size: 0.85rem;
}

/* ===========================
   Scholar Services Section
   =========================== */
.scholar-services-section {
    background: var(--bg-light);
}

.scholar-services-content {
    margin-top: 3rem;
}

.service-card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

/* Animated data stream in background */
.service-card::before {
    content: '📝 ✓ 📊 ✓ 🔍 ✓';
    position: absolute;
    top: 50%;
    left: -100%;
    width: 200%;
    font-size: 14px;
    opacity: 0;
    transition: all 0.5s ease;
    transform: translateY(-50%);
    white-space: nowrap;
    letter-spacing: 30px;
    z-index: 0;
}

.service-card:hover::before {
    opacity: 0.1;
    left: 0;
    animation: serviceFlow 4s linear infinite;
}

@keyframes serviceFlow {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    100% {
        transform: translateY(-50%) translateX(10%);
    }
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(79, 70, 229, 0.2);
    border: 1px solid rgba(79, 70, 229, 0.2);
    background: linear-gradient(135deg, var(--bg-card), rgba(79, 70, 229, 0.03));
}

.service-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    animation: serviceIconPulse 3s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
    transition: all 0.3s ease;
}

@keyframes serviceIconPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
    }
    50% {
        transform: scale(1.05) rotate(5deg);
        box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5);
    }
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.6);
}

.service-details {
    flex: 1;
}

.service-details h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.service-item {
    padding: 1.5rem;
    background: var(--bg-light);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.service-item:hover {
    transform: translateX(8px);
    border-left-width: 6px;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.15);
    background: linear-gradient(90deg, var(--bg-light), rgba(79, 70, 229, 0.02));
}

.service-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.service-title i {
    color: #10b981;
    font-size: 1.2rem;
    animation: checkGlow 2s ease-in-out infinite;
}

@keyframes checkGlow {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6));
    }
}

.service-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.service-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.service-date i {
    color: var(--primary-color);
}

/* ===========================
   Experience Section (Timeline)
   =========================== */
.experience {
    background: var(--bg-lighter);
}

.timeline {
    position: relative;
    max-width: 900px;
    margin: 3rem auto 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, 
        var(--primary-color), 
        var(--secondary-color), 
        var(--primary-color));
    background-size: 100% 200%;
    animation: timelineGlow 3s ease-in-out infinite;
}

@keyframes timelineGlow {
    0%, 100% {
        background-position: 0% 0%;
        box-shadow: 0 0 10px var(--primary-color);
    }
    50% {
        background-position: 0% 100%;
        box-shadow: 0 0 20px var(--secondary-color);
    }
}

.timeline-item {
    position: relative;
    padding-left: 60px;
    margin-bottom: 3rem;
}

.timeline-dot {
    position: absolute;
    left: 11px;
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 4px solid var(--bg-lighter);
    z-index: 1;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
    }
}

.timeline-date {
    position: absolute;
    left: 60px;
    top: 0;
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.timeline-content {
    margin-top: 2.5rem;
    padding: 2rem;
    background: var(--bg-light);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.timeline-content:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-lg);
}

.timeline-header h3 {
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.timeline-header h4 {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.timeline-location {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-subtitle {
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 1rem;
}

.timeline-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.timeline-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.timeline-list li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
}

.timeline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ===========================
   Projects Section
   =========================== */
.projects {
    background: var(--bg-light);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.project-card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border-top: 4px solid var(--primary-color);
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.project-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    animation: projectIconPulse 2.5s ease-in-out infinite;
}

@keyframes projectIconPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(79, 70, 229, 0.2);
    }
}

.project-card h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.project-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.project-links {
    margin-bottom: 1rem;
}

.project-link {
    padding: 0.5rem 1rem;
    background: var(--bg-light);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.project-link:hover {
    background: var(--primary-color);
    color: white;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===========================
   Skills Section
   =========================== */
.skills {
    background: var(--bg-lighter);
}

.skills-container {
    max-width: 1000px;
    margin: 3rem auto 0;
}

.skill-category {
    margin-bottom: 3rem;
    padding: 2rem;
    background: var(--bg-light);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.skill-category::before {
    content: '01001001 01001110 01010100 01010010 01010101 01010011 01001001 01001111 01001110';
    position: absolute;
    top: 5px;
    left: -200%;
    width: 200%;
    height: auto;
    font-size: 8px;
    font-family: 'Courier New', monospace;
    color: var(--primary-color);
    opacity: 0.4;
    white-space: nowrap;
    animation: binaryStream 8s linear infinite;
    letter-spacing: 2px;
}

@keyframes binaryStream {
    0% {
        left: -200%;
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    90% {
        opacity: 0.4;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

.skill-category h3 {
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.skill-category h3 i {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 8px;
    transition: var(--transition);
}

.skill-item:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-md);
    background: var(--gradient-primary);
    color: white;
}

.skill-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: var(--transition);
}

.skill-item:hover i {
    color: white;
    transform: scale(1.2);
}

/* ===========================
   Certifications Section
   =========================== */
.certifications {
    background: var(--bg-light);
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.cert-category {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.cert-category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.cert-category-header i {
    font-size: 2rem;
    color: var(--primary-color);
}

.cert-category-header h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
}

.cert-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cert-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 8px;
    transition: var(--transition);
}

.cert-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.cert-item i {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.cert-details h4 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.cert-details p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ===========================
   Contact Section
   =========================== */
.contact {
    background: var(--bg-lighter);
}

.contact-content {
    max-width: 800px;
    margin: 3rem auto 0;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-light);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.contact-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(79, 70, 229, 0.1),
        transparent);
    transition: left 0.6s;
}

.contact-item:hover::before {
    left: 100%;
}

.contact-item:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(79, 70, 229, 0.2);
}

.contact-item i {
    font-size: 2rem;
    color: var(--primary-color);
    transition: var(--transition);
}

.contact-item:hover i {
    transform: scale(1.2) rotate(5deg);
}

.contact-item h4 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.contact-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}

.contact-item a:hover {
    color: var(--primary-color);
}

.contact-item p {
    color: var(--text-secondary);
}

.phd-interests {
    padding: 2rem;
    background: var(--bg-light);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.phd-interests h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.phd-interests ul {
    list-style: none;
    padding: 0;
}

.phd-interests li {
    padding: 0.75rem 0;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.phd-interests li i {
    color: #10b981;
}

.cta-section {
    margin-top: 3rem;
    text-align: center;
    padding: 3rem;
    background: var(--bg-light);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.cta-section h3 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ===========================
   Footer
   =========================== */
.footer {
    background: var(--bg-light);
    padding: 3rem 0 1.5rem;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.footer-left h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.footer-left p {
    color: var(--text-muted);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ===========================
   Scroll to Top Button
   =========================== */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: var(--transition);
    z-index: 999;
}

.scroll-top:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.scroll-top.show {
    display: flex;
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 968px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: var(--bg-light);
        flex-direction: column;
        padding: 2rem;
        transition: var(--transition);
        box-shadow: var(--shadow-lg);
    }

    .nav-menu.active {
        left: 0;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

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

    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .image-container {
        width: 300px;
        height: 300px;
    }

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

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

    .impact-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .cta-buttons {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .impact-stats {
        grid-template-columns: 1fr;
    }

    .timeline::before {
        left: 10px;
    }

    .timeline-dot {
        left: 1px;
    }

    .timeline-item {
        padding-left: 40px;
    }

    .timeline-date {
        position: static;
        display: inline-block;
        margin-bottom: 1rem;
    }

    .image-container {
        width: 250px;
        height: 250px;
    }

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

/* ===========================
   Utility Classes
   =========================== */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* ===========================
   Additional Cybersecurity Effects
   =========================== */

/* Matrix rain effect - removed scan line */
/* Scan lines removed - using network mesh and other cybersecurity effects instead */

/* Cursor removed - clean subtitle look */
.hero-subtitle::after {
    content: "";
    display: none;
}

/* Enhanced border animation for profile image - Rotation + Glow + Scale */
.profile-img {
    animation: profileGlow 3s ease-in-out infinite, profileRotate 20s linear infinite;
}

@keyframes profileGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4),
                    0 0 40px rgba(59, 130, 246, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.6),
                    0 0 60px rgba(236, 72, 153, 0.3),
                    0 0 80px rgba(59, 130, 246, 0.1);
    }
}

@keyframes profileRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(5deg) scale(1.02);
    }
    50% {
        transform: rotate(0deg) scale(1.03);
    }
    75% {
        transform: rotate(-5deg) scale(1.02);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* Terminal-style tags */
.tag::before {
    content: ">";
    margin-right: 4px;
    color: var(--primary-color);
    opacity: 0;
    transition: opacity 0.3s;
}

.publication-card:hover .tag::before,
.project-card:hover .tag::before,
.timeline-content:hover .tag::before {
    opacity: 1;
}

/* ===========================
   Dark Mode - Comprehensive Overrides
   =========================== */

/* Sections with explicit backgrounds */
.dark-mode .about,
.dark-mode .experience,
.dark-mode .skills,
.dark-mode .certifications,
.dark-mode .contact,
.dark-mode .scholar-services-section,
.dark-mode .projects {
    background-color: var(--bg-lighter);
}

.dark-mode .research-publications {
    background: linear-gradient(135deg, var(--bg-light), rgba(59, 130, 246, 0.05));
}

/* Navbar */
.dark-mode .navbar {
    background: rgba(11, 17, 32, 0.95);
    border-bottom-color: var(--border-color);
}

/* Cards */
.dark-mode .publication-card,
.dark-mode .project-card,
.dark-mode .stat-card,
.dark-mode .cert-category,
.dark-mode .service-card,
.dark-mode .skill-category {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.dark-mode .publication-card:hover,
.dark-mode .project-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
}

/* Timeline */
.dark-mode .timeline-content {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.dark-mode .timeline-content:hover {
    border-color: var(--primary-color);
}

.dark-mode .timeline::before {
    background: var(--border-color);
}

.dark-mode .timeline-dot {
    background: var(--primary-color);
    border-color: var(--bg-lighter);
}

/* Tags */
.dark-mode .tag {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

/* Buttons */
.dark-mode .btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.dark-mode .btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Skill items */
.dark-mode .skill-item {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
    color: var(--text-secondary);
}

.dark-mode .skill-item:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--primary-color);
}

/* Cert items */
.dark-mode .cert-item {
    background: rgba(59, 130, 246, 0.05);
    border-color: var(--border-color);
}

/* Contact section */
.dark-mode .contact-item {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.dark-mode .cta-section {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* Footer */
.dark-mode .footer {
    background: #060a14;
    border-top-color: var(--border-color);
}

/* Scroll top button */
.dark-mode .scroll-top {
    background: var(--primary-color);
}

/* Links */
.dark-mode .pub-link {
    background: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.2);
}

.dark-mode .pub-link:hover {
    background: var(--primary-color);
    color: white;
}

.dark-mode .project-link {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

/* Interest items */
.dark-mode .interest-item {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

/* Research interests heading */
.dark-mode .research-interests h3 {
    color: var(--text-primary);
}

/* Theme toggle icon swap */
.dark-mode .theme-toggle .fa-moon { display: none; }
.dark-mode .theme-toggle .fa-sun { display: inline-block; }
.light-mode .theme-toggle .fa-sun { display: none; }
.light-mode .theme-toggle .fa-moon { display: inline-block; }

/* Hero badges in dark mode */
.dark-mode .hero-description {
    color: var(--text-secondary);
}

/* Nav links */
.dark-mode .nav-link {
    color: var(--text-secondary);
}

.dark-mode .nav-link:hover,
.dark-mode .nav-link.active {
    color: var(--primary-color);
}

.dark-mode .nav-logo {
    color: var(--text-primary);
}

/* Mobile nav menu */
@media (max-width: 768px) {
    .dark-mode .nav-menu.active {
        background: var(--bg-light);
    }
}

/* Section titles */
.dark-mode .section-title::after {
    background: var(--gradient-primary);
}

/* Hamburger */
.dark-mode .hamburger span {
    background: var(--text-primary);
}

/* Glow effect around profile image */
.dark-mode .glow-effect {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
}

/* About stats grid glow */
.dark-mode .stat-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}

/* Scholar services */
.dark-mode .service-card {
    border-color: var(--border-color);
}

/* Cert category header */
.dark-mode .cert-category-header {
    border-bottom-color: var(--border-color);
}

/* Dark mode: Hero proof-point badges */
.dark-mode .hero-content [style*="rgba(59,130,246,0.1)"],
.dark-mode .hero-content [style*="rgba(245,158,11,0.1)"],
.dark-mode .hero-content [style*="rgba(16,185,129,0.1)"],
.dark-mode .hero-content [style*="rgba(139,92,246,0.1)"] {
    border-color: rgba(255,255,255,0.15) !important;
}

/* Dark mode: Hero eyebrow text */
.dark-mode .hero-eyebrow {
    color: #60a5fa !important;
}

/* Dark mode: Thesis Core badges on publication cards */
.dark-mode .pub-status[style*="background: linear-gradient"] {
    opacity: 0.9;
}