/* ============================================================
   FULL VISUAL REDESIGN — Impressive Dark Neon Portfolio
   Vibrant, modern dark theme with neon cyan & purple accents
   ============================================================ */

/* ============================================
   BASE & RESET
   ============================================ */

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

:root {
    /* Sophisticated Dark Palette */
    --black: #000000;
    --gray-950: #0a0a0a;
    --gray-900: #111111;
    --gray-850: #1a1a1a;
    --gray-800: #262626;
    --gray-700: #3f3f3f;
    --gray-600: #525252;
    --gray-500: #737373;
    --gray-400: #a3a3a3;
    --gray-300: #d4d4d4;
    --gray-200: #e5e5e5;
    --gray-100: #f5f5f5;
    --white: #ffffff;

    /* Accent Colors — Dark Editorial */
    --accent: #10B981;
    --accent-muted: #059669;
    --accent-dim: rgba(16, 185, 129, 0.1);
    --accent-glow: rgba(16, 185, 129, 0.18);
    --accent-glow-strong: rgba(16, 185, 129, 0.3);
    --accent2: #818CF8;
    --accent2-dim: rgba(129, 140, 248, 0.1);
    --accent2-glow: rgba(129, 140, 248, 0.18);
    --accent2-glow-strong: rgba(129, 140, 248, 0.3);
    --accent3: #F59E0B;
    --accent3-dim: rgba(245, 158, 11, 0.1);
    --accent3-glow: rgba(245, 158, 11, 0.18);

    /* Theme */
    --bg: #0A0A0A;
    --bg-elevated: #111111;
    --bg-card: #141414;
    --text: #F0F0F0;
    --text-secondary: #888888;
    --text-muted: #555555;
    --border: #1E1E1E;
    --border-light: #161616;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    /* Animations — all 250ms cubic-bezier */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
    --bg: #f8fafc;
    --bg-elevated: #f1f5f9;
    --bg-card: #ffffff;
    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --accent-dim: rgba(0, 217, 255, 0.08);
    --accent2-dim: rgba(139, 92, 246, 0.08);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

/* Dot grid background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0,217,255,0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   AURORA BACKGROUND — enhanced gradient mesh
   ============================================ */

.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.aurora-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.22;
    animation: aurora-drift linear infinite;
    will-change: transform;
}

.aurora-orb:nth-child(1) {
    width: 700px; height: 700px;
    background: radial-gradient(circle, #00D9FF 0%, rgba(0,217,255,0.3) 40%, transparent 70%);
    top: -250px; left: -150px;
    animation-duration: 22s;
}
.aurora-orb:nth-child(2) {
    width: 600px; height: 600px;
    background: radial-gradient(circle, #8B5CF6 0%, rgba(139,92,246,0.3) 40%, transparent 70%);
    top: 15%; right: -200px;
    animation-duration: 28s;
    animation-delay: -9s;
}
.aurora-orb:nth-child(3) {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #00D9FF 0%, rgba(0,217,255,0.2) 40%, transparent 70%);
    bottom: 5%; left: 25%;
    animation-duration: 19s;
    animation-delay: -5s;
}
.aurora-orb:nth-child(4) {
    width: 450px; height: 450px;
    background: radial-gradient(circle, #8B5CF6 0%, rgba(139,92,246,0.2) 40%, transparent 70%);
    bottom: -120px; right: 15%;
    animation-duration: 24s;
    animation-delay: -13s;
}

/* Hero mesh: multiple animated radial gradients */
.hero-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(0,217,255,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139,92,246,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 50% 80%, rgba(0,217,255,0.08) 0%, transparent 60%);
    animation: mesh-drift 12s ease-in-out infinite alternate;
}

@keyframes mesh-drift {
    0% {
        background:
            radial-gradient(ellipse 80% 50% at 20% 40%, rgba(0,217,255,0.12) 0%, transparent 60%),
            radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139,92,246,0.12) 0%, transparent 60%),
            radial-gradient(ellipse 50% 60% at 50% 80%, rgba(0,217,255,0.08) 0%, transparent 60%);
    }
    50% {
        background:
            radial-gradient(ellipse 80% 50% at 30% 55%, rgba(0,217,255,0.15) 0%, transparent 60%),
            radial-gradient(ellipse 60% 40% at 70% 30%, rgba(139,92,246,0.15) 0%, transparent 60%),
            radial-gradient(ellipse 50% 60% at 45% 70%, rgba(139,92,246,0.1) 0%, transparent 60%);
    }
    100% {
        background:
            radial-gradient(ellipse 80% 50% at 15% 35%, rgba(0,217,255,0.1) 0%, transparent 60%),
            radial-gradient(ellipse 60% 40% at 85% 25%, rgba(139,92,246,0.1) 0%, transparent 60%),
            radial-gradient(ellipse 50% 60% at 55% 85%, rgba(0,217,255,0.12) 0%, transparent 60%);
    }
}

@keyframes aurora-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(70px, -50px) scale(1.12); }
    66%  { transform: translate(-50px, 70px) scale(0.93); }
    100% { transform: translate(0, 0) scale(1); }
}

/* ============================================
   MOUSE SPOTLIGHT
   ============================================ */

.spotlight {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,217,255,0.07) 0%, transparent 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* ============================================
   CURSOR TRAIL
   ============================================ */

.cursor-dot {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    box-shadow: 0 0 10px var(--accent-glow), 0 0 20px var(--accent-dim);
}

.cursor-ring {
    position: fixed;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 217, 255, 0.5);
    pointer-events: none;
    z-index: 9997;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
}

@media (hover: none) {
    .cursor-dot, .cursor-ring { display: none; }
}

/* Floating Code Symbols */
.floating-symbols {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.code-symbol {
    position: absolute;
    font-family: var(--font-mono);
    color: var(--accent);
    opacity: 0.08;
    font-size: 1.5rem;
    animation: float-symbol 20s infinite ease-in-out;
    will-change: transform;
}

@keyframes float-symbol {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.05;
    }
    50% {
        transform: translateY(-35px) rotate(6deg);
        opacity: 0.15;
    }
}

/* ============================================
   NAVIGATION — frosted glass with gradient border
   ============================================ */

.navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(3, 7, 18, 0.8);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid transparent;
    background-clip: padding-box;
    z-index: 1000;
    transition: all var(--transition);
}

/* Gradient bottom border via pseudo-element */
.navigation::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-dim), rgba(139,92,246,0.2), var(--accent-dim), transparent);
    opacity: 0.8;
}

[data-theme="light"] .navigation {
    background: rgba(248, 250, 252, 0.85);
}

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

.nav-brand {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: all var(--transition);
    position: relative;
}

.nav-brand:hover {
    color: var(--accent);
    text-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-dim);
}

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

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

/* Animated underline slide */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transition: width var(--transition);
    border-radius: 2px;
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent);
}

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

.nav-link-cta {
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #000;
    border-radius: 6px;
    font-weight: 600;
    transition: all var(--transition);
    box-shadow: 0 0 0 0 var(--accent-glow);
}

.nav-link-cta::after { display: none; }

.nav-link-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px var(--accent-glow), 0 0 0 1px var(--accent);
    color: #000;
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    font-size: 1.125rem;
}

.theme-toggle:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-dim);
    transform: rotate(15deg);
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem 4rem;
    overflow: hidden;
}

.hero-bg-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(0,217,255,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.hero-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
}

/* Hero badge with pulse glow */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(0,217,255,0.06);
    border: 1px solid rgba(0,217,255,0.35);
    border-radius: 50px;
    font-size: 0.875rem;
    color: var(--accent);
    margin-bottom: 2rem;
    transition: all var(--transition);
    animation: badge-pulse-glow 3s ease-in-out infinite;
    will-change: box-shadow;
}

@keyframes badge-pulse-glow {
    0%, 100% { box-shadow: 0 0 8px var(--accent-dim), inset 0 0 8px rgba(0,217,255,0.03); }
    50% { box-shadow: 0 0 24px var(--accent-glow), 0 0 40px var(--accent-dim), inset 0 0 12px rgba(0,217,255,0.08); }
}

.hero-badge:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: status-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    box-shadow: 0 0 8px rgba(16,185,129,0.5);
    flex-shrink: 0;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.85); }
}

.hero-heading {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--white) 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Typewriter accent with neon glow */
.hero-heading-accent {
    display: block;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    filter: drop-shadow(0 0 30px var(--accent-glow));
    animation: accent-glow-breathe 4s ease-in-out infinite;
}

@keyframes accent-glow-breathe {
    0%, 100% { filter: drop-shadow(0 0 20px var(--accent-glow)); }
    50% { filter: drop-shadow(0 0 40px var(--accent-glow-strong)) drop-shadow(0 0 60px var(--accent-dim)); }
}

.hero-heading-accent::after {
    content: '|';
    background: none;
    -webkit-text-fill-color: var(--accent);
    color: var(--accent);
    animation: blink-cursor 1s infinite;
    margin-left: 4px;
}

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

/* ============================================
   PROFILE PHOTO — spinning conic-gradient ring
   ============================================ */

.hero-profile-wrapper {
    margin-bottom: 3rem;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Spinning ring container */
.profile-ring {
    position: relative;
    width: 196px;
    height: 196px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

/* The spinning conic gradient ring */
.profile-ring::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--accent) 0deg,
        var(--accent2) 90deg,
        transparent 120deg,
        transparent 180deg,
        var(--accent2) 210deg,
        var(--accent) 270deg,
        transparent 300deg,
        transparent 340deg,
        var(--accent) 360deg
    );
    animation: ring-spin 4s linear infinite;
    will-change: transform;
}

/* Mask inner circle */
.profile-ring::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--bg-card);
    z-index: 0;
}

@keyframes ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.profile-image-container {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 20px 60px -10px rgba(0,217,255,0.3), 0 0 0 2px var(--bg-card);
    animation: profile-float 5s ease-in-out infinite;
    will-change: transform;
}

@keyframes profile-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.01); }
}

.hero-profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

.profile-image-container:hover .hero-profile-photo {
    transform: scale(1.08);
}

.profile-glow {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    opacity: 0;
    filter: blur(20px);
    transition: opacity var(--transition);
    z-index: -1;
}

.profile-image-container:hover .profile-glow {
    opacity: 0.5;
}

/* Developer Glasses Icon */
.developer-icon {
    position: absolute;
    bottom: -10px;
    right: calc(50% - 118px);
    width: 60px;
    height: 60px;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 12px var(--accent-dim);
    animation: icon-bounce 2.5s ease-in-out infinite;
    z-index: 2;
    will-change: transform;
}

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

.developer-icon svg {
    width: 40px;
    height: 40px;
}

.glasses {
    animation: glasses-shine 3.5s ease-in-out infinite;
}

@keyframes glasses-shine {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; filter: brightness(1.4) drop-shadow(0 0 8px var(--accent)); }
}

/* Typewriter with neon glow */
.hero-typewriter {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: 600;
    margin-bottom: 1.5rem;
    min-height: 1.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-dim);
    letter-spacing: 0.02em;
}

.hero-typewriter-text {
    display: inline;
}

.hero-typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--accent);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: tw-blink 0.75s step-end infinite;
    box-shadow: 0 0 8px var(--accent-glow);
}

@keyframes tw-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.hero-description {
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    font-family: inherit;
    will-change: transform;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #0099cc 100%);
    color: #000;
    box-shadow: 0 4px 15px -3px var(--accent-glow);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -6px var(--accent-glow-strong);
}

.btn-secondary {
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
}

.btn-secondary:hover {
    border-color: var(--accent);
    background: rgba(0,217,255,0.06);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -4px var(--accent-dim);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    border-color: var(--accent2);
    color: var(--accent2);
    transform: translateY(-2px);
    background: var(--accent2-dim);
}

/* ============================================
   BENTO STATS ROW — glass cards with neon borders
   ============================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 720px;
    margin: 4rem auto 0;
}

.stat-item {
    position: relative;
    text-align: center;
    padding: 2rem 1.5rem;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0,217,255,0.18);
    border-radius: 20px;
    transition: all var(--transition);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 0 1px transparent,
        0 4px 20px -4px rgba(0,0,0,0.5);
    will-change: transform, box-shadow;
}

/* Top neon line */
.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.7;
    transition: opacity var(--transition);
}

.stat-item:nth-child(2)::before {
    background: linear-gradient(90deg, transparent, var(--accent2), transparent);
}

.stat-item:hover::before {
    opacity: 1;
    left: 0;
    right: 0;
}

.stat-item:hover {
    border-color: var(--accent);
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px -10px rgba(0,0,0,0.6),
        0 0 30px -5px var(--accent-glow),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.stat-item:nth-child(2):hover {
    border-color: var(--accent2);
    box-shadow:
        0 20px 40px -10px rgba(0,0,0,0.6),
        0 0 30px -5px var(--accent2-glow),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.stat-value {
    font-size: 2.75rem;
    font-weight: 800;
    font-family: var(--font-mono);
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--white) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-item:nth-child(2) .stat-value {
    background: linear-gradient(135deg, var(--white) 0%, var(--accent2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================
   SECTION STYLES
   ============================================ */

section {
    position: relative;
    padding: 5rem 2rem;
    z-index: 1;
}

section:nth-child(even) {
    background: var(--bg);
}

section:nth-child(odd) {
    background: var(--bg-elevated);
}

.section-header {
    max-width: 1200px;
    margin: 0 auto 5rem;
    text-align: center;
}

.section-label {
    display: inline-block;
    font-size: 0.8125rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding: 0.4rem 1.25rem;
    background: rgba(0,217,255,0.06);
    border: 1px solid rgba(0,217,255,0.3);
    border-radius: 50px;
    box-shadow: 0 0 12px var(--accent-dim);
}

/* Enhanced animated gradient sweep on section titles */
.section-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    line-height: 1.15;
    background: linear-gradient(
        90deg,
        var(--text) 0%,
        var(--text) 20%,
        var(--accent) 35%,
        var(--accent2) 50%,
        var(--accent) 65%,
        var(--text) 80%,
        var(--text) 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: section-title-sweep 5s linear infinite;
}

@keyframes section-title-sweep {
    0% { background-position: 300% center; }
    100% { background-position: -300% center; }
}

.section-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Scroll reveal for all sections */
.reveal-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--ease-spring), transform 0.7s var(--ease-spring);
}

.reveal-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   WORK TIMELINE — gradient line, glowing dots
   ============================================ */

.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

/* Gradient timeline line overlay */
.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), var(--accent2), var(--accent), transparent);
    opacity: 0.6;
}

.timeline-item {
    position: relative;
    padding-left: 3rem;
    padding-bottom: 3rem;
    border-left: 2px solid transparent; /* hidden — replaced by ::before on .timeline */
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: transform, opacity;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item.revealed {
    opacity: 1;
    transform: translateX(0);
}

.timeline-item:nth-child(1) { transition-delay: 0s; }
.timeline-item:nth-child(2) { transition-delay: 0.12s; }
.timeline-item:nth-child(3) { transition-delay: 0.24s; }
.timeline-item:nth-child(4) { transition-delay: 0.36s; }

/* Glowing neon dot marker */
.timeline-marker {
    position: absolute;
    left: -9px;
    top: 8px;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border: 3px solid var(--bg-elevated);
    border-radius: 50%;
    transition: all var(--transition);
    box-shadow: 0 0 12px var(--accent-glow);
    z-index: 2;
    will-change: transform, box-shadow;
}

/* Ripple ring animation on marker */
.timeline-marker::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0;
    animation: marker-ripple 2.5s ease-out infinite;
}

.timeline-marker::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    opacity: 0;
    animation: marker-ripple 2.5s ease-out infinite 0.8s;
}

@keyframes marker-ripple {
    0% { opacity: 0.6; transform: scale(0.8); }
    100% { opacity: 0; transform: scale(1.8); }
}

.timeline-item:hover .timeline-marker {
    transform: scale(1.4);
    box-shadow: 0 0 24px var(--accent-glow-strong), 0 0 40px var(--accent-dim);
}

/* Timeline card — dot grid background, cyan left border */
.timeline-content {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    background-image: radial-gradient(circle, rgba(0,217,255,0.04) 1px, transparent 1px);
    background-size: 20px 20px;
}

.timeline-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,217,255,0.03) 0%, transparent 60%);
    pointer-events: none;
}

.timeline-item:hover .timeline-content {
    border-color: var(--accent);
    border-left-color: var(--accent);
    transform: translateX(10px);
    box-shadow: 0 8px 32px -8px rgba(0,0,0,0.5), 0 0 20px -4px var(--accent-dim);
}

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

.timeline-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.timeline-company {
    font-size: 0.9375rem;
    color: var(--accent);
    font-weight: 500;
}

.timeline-date {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    padding: 0.2rem 0.6rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    white-space: nowrap;
}

.timeline-description {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.timeline-tech {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.timeline-tech span {
    padding: 0.25rem 0.75rem;
    background: rgba(0,217,255,0.06);
    border: 1px solid rgba(0,217,255,0.2);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--accent);
    font-family: var(--font-mono);
    transition: all var(--transition);
}

.timeline-tech span:hover {
    background: rgba(0,217,255,0.12);
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-dim);
}

/* ============================================
   PROJECT CARDS — shimmer, hover glow, noise
   ============================================ */

.projects-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.project-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    position: relative;
    cursor: default;
    will-change: transform, box-shadow;
}

.project-card:hover {
    border-color: var(--accent);
    transform: translateY(-12px);
    box-shadow:
        0 32px 64px -12px rgba(0,0,0,0.7),
        0 0 40px -10px var(--accent-glow),
        0 0 0 1px rgba(0,217,255,0.2);
}

.project-card:nth-child(even):hover {
    border-color: var(--accent2);
    box-shadow:
        0 32px 64px -12px rgba(0,0,0,0.7),
        0 0 40px -10px var(--accent2-glow),
        0 0 0 1px rgba(139,92,246,0.2);
}

/* Preview banner */
.project-preview {
    height: 180px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Noise texture overlay */
.project-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

/* Shimmer sweep on hover */
.project-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255,255,255,0.12) 40%,
        rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0.12) 60%,
        transparent 80%
    );
    transform: translateX(-150%);
    transition: transform 0s;
    pointer-events: none;
    z-index: 2;
}

.project-card:hover .project-preview::after {
    transform: translateX(150%);
    transition: transform 0.6s ease;
}

.project-preview-icon {
    font-size: 3.5rem;
    z-index: 3;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.5));
    transition: transform var(--transition), filter var(--transition);
    will-change: transform;
}

.project-card:hover .project-preview-icon {
    transform: scale(1.2) rotate(-6deg);
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.6)) drop-shadow(0 0 20px rgba(0,217,255,0.3));
}

.project-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.project-category {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(0,217,255,0.12);
    color: var(--accent);
    border: 1px solid rgba(0,217,255,0.3);
    z-index: 4;
    pointer-events: none;
}

.project-card:nth-child(even) .project-category {
    background: rgba(139,92,246,0.12);
    color: var(--accent2);
    border-color: rgba(139,92,246,0.3);
}

.project-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.625rem;
    line-height: 1.3;
}

.project-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
    flex: 1;
}

.project-tech {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.project-tech span {
    padding: 0.25rem 0.625rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    transition: all var(--transition);
}

.project-tech span:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.project-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.project-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition);
    position: relative;
    z-index: 10;
    cursor: pointer;
    flex-shrink: 0;
    will-change: transform;
}

.project-icon-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    transform: scale(1.15);
    box-shadow: 0 0 20px var(--accent-glow);
}

.project-icon-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.project-footer-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-left: auto;
    font-family: var(--font-mono);
}

/* ============================================
   CERTIFICATIONS — unique gradient accents
   ============================================ */

.certifications-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.cert-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    will-change: transform;
}

/* Unique gradient per card */
.cert-card:nth-child(1) {
    --cert-color: #FF9900;
    --cert-glow: rgba(255,153,0,0.3);
}
.cert-card:nth-child(2) {
    --cert-color: #00ADEF;
    --cert-glow: rgba(0,173,239,0.3);
}
.cert-card:nth-child(3) {
    --cert-color: var(--accent);
    --cert-glow: var(--accent-glow);
}
.cert-card:nth-child(4) {
    --cert-color: var(--accent2);
    --cert-glow: var(--accent2-glow);
}

.cert-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--cert-color, var(--accent)), transparent);
    transition: opacity var(--transition);
}

.cert-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% -20%, rgba(var(--cert-color, 0,217,255), 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition);
}

.cert-card:hover::after {
    opacity: 1;
}

.cert-card:hover {
    border-color: var(--cert-color, var(--accent));
    transform: translateY(-10px);
    box-shadow: 0 20px 40px -10px var(--cert-glow, var(--accent-glow));
}

/* Animated badge icon */
.cert-icon {
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 1;
    display: inline-block;
    animation: cert-badge-idle 4s ease-in-out infinite;
    will-change: transform;
}

.cert-card:hover .cert-icon {
    animation: cert-badge-spin 0.6s ease-out forwards;
}

@keyframes cert-badge-idle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(3deg); }
}

@keyframes cert-badge-spin {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(12deg); }
    100% { transform: scale(1.05) rotate(0deg); }
}

.cert-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.cert-issuer {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.cert-tags {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.cert-tags span {
    padding: 0.3rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all var(--transition);
}

.cert-card:hover .cert-tags span {
    border-color: var(--cert-color, var(--accent));
    color: var(--cert-color, var(--accent));
}

/* ============================================
   EXPERTISE — glowing SVG icon containers, dot grid
   ============================================ */

.expertise-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    position: relative;
}

/* dot grid bg on section */
#expertise {
    background-image: radial-gradient(circle, rgba(0,217,255,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
}

.expertise-card {
    background: rgba(17,24,39,0.8);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    transition: all var(--transition);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.expertise-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.expertise-card:hover::before {
    transform: scaleX(1);
}

.expertise-card:hover {
    border-color: var(--accent);
    transform: translateY(-6px);
    box-shadow: 0 16px 40px -8px rgba(0,0,0,0.5), 0 0 24px -4px var(--accent-dim);
}

.expertise-card:nth-child(even):hover {
    border-color: var(--accent2);
    box-shadow: 0 16px 40px -8px rgba(0,0,0,0.5), 0 0 24px -4px var(--accent2-dim);
}

/* Glowing icon container */
.expertise-icon {
    width: 56px;
    height: 56px;
    background: rgba(0,217,255,0.08);
    border: 1px solid rgba(0,217,255,0.3);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    transition: all var(--transition);
    box-shadow: 0 0 16px rgba(0,217,255,0.1), inset 0 0 16px rgba(0,217,255,0.05);
    will-change: transform, box-shadow;
}

.expertise-card:nth-child(even) .expertise-icon {
    background: rgba(139,92,246,0.08);
    border-color: rgba(139,92,246,0.3);
    box-shadow: 0 0 16px rgba(139,92,246,0.1), inset 0 0 16px rgba(139,92,246,0.05);
}

.expertise-card:hover .expertise-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 24px var(--accent-glow), inset 0 0 16px rgba(0,217,255,0.1);
    background: rgba(0,217,255,0.12);
    border-color: var(--accent);
}

.expertise-card:nth-child(even):hover .expertise-icon {
    box-shadow: 0 0 24px var(--accent2-glow), inset 0 0 16px rgba(139,92,246,0.1);
    background: rgba(139,92,246,0.12);
    border-color: var(--accent2);
}

.expertise-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.expertise-description {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.expertise-skills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.expertise-skills span {
    padding: 0.3rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    transition: all var(--transition);
}

.expertise-skills span:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

/* ============================================
   LANGUAGES — bigger cards, shimmer, bounce flag
   ============================================ */

.languages-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1.25rem;
}

.language-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,217,255,0.15);
    border-radius: 16px;
    padding: 1.75rem 1rem;
    text-align: center;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    will-change: transform;
}

/* Shimmer effect */
.language-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(0,217,255,0.08) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0s;
}

.language-card:hover::before {
    transform: translateX(100%);
    transition: transform 0.5s ease;
}

/* Gradient glow border on hover */
.language-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition);
}

.language-card:hover::after {
    opacity: 0.7;
}

.language-card:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 16px 32px -8px rgba(0,0,0,0.5), 0 0 24px -4px var(--accent-glow);
    background: rgba(0,217,255,0.05);
    border-color: transparent;
}

.language-flag {
    width: 52px;
    height: 34px;
    margin-bottom: 0.75rem;
    display: block;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: transform var(--transition);
    will-change: transform;
    font-size: 0;
}

.language-card:hover .language-flag {
    animation: flag-bounce 0.5s var(--ease-spring);
}

@keyframes flag-bounce {
    0% { transform: scale(1) translateY(0); }
    40% { transform: scale(1.3) translateY(-8px); }
    70% { transform: scale(0.95) translateY(2px); }
    100% { transform: scale(1.05) translateY(0); }
}

.language-name {
    font-size: 0.9375rem;
    color: var(--text);
    font-weight: 600;
}

/* ============================================
   CONTACT — glowing CTA, pill social buttons
   ============================================ */

.contact-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* Available for work badge */
.available-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.4);
    border-radius: 50px;
    font-size: 0.875rem;
    color: #10b981;
    font-weight: 600;
    margin-bottom: 2rem;
    animation: available-pulse 3s ease-in-out infinite;
    letter-spacing: 0.02em;
}

@keyframes available-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(16,185,129,0.2); }
    50% { box-shadow: 0 0 25px rgba(16,185,129,0.4), 0 0 40px rgba(16,185,129,0.15); }
}

.available-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: status-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(16,185,129,0.6);
    flex-shrink: 0;
}

/* Glowing CTA area */
.contact-cta-area {
    padding: 2.5rem 2rem;
    background: rgba(0,217,255,0.03);
    border: 1px solid rgba(0,217,255,0.15);
    border-radius: 24px;
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
}

.contact-cta-area::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(0,217,255,0.15), rgba(139,92,246,0.15));
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition);
}

.contact-cta-area:hover::before {
    opacity: 1;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

/* Large glowing pill buttons */
.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.contact-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-dim), transparent);
    opacity: 0;
    transition: opacity var(--transition);
}

.contact-item:hover::before {
    opacity: 1;
}

.contact-item:hover {
    border-color: var(--accent);
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -8px rgba(0,0,0,0.5), 0 0 20px -4px var(--accent-glow);
}

.contact-item:nth-child(2):hover {
    border-color: #0077b5;
    box-shadow: 0 16px 32px -8px rgba(0,0,0,0.5), 0 0 20px -4px rgba(0,119,181,0.3);
}

.contact-icon {
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}

.contact-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.contact-value {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* ============================================
   SCROLL PROGRESS BAR
   ============================================ */

#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
    background-size: 200% auto;
    animation: progress-shimmer 2s linear infinite;
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px var(--accent-glow);
}

@keyframes progress-shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ============================================
   HAMBURGER MENU
   ============================================ */

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    transition: all var(--transition);
}

.hamburger span {
    display: block;
    height: 2px;
    width: 18px;
    background: var(--text);
    border-radius: 2px;
    transition: all var(--transition);
}

.hamburger:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-dim);
}

.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================
   BACK TO TOP
   ============================================ */

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 46px;
    height: 46px;
    background: rgba(0,217,255,0.08);
    border: 1px solid rgba(0,217,255,0.3);
    border-radius: 12px;
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(12px);
    transition: all var(--transition);
    z-index: 500;
    backdrop-filter: blur(8px);
    will-change: transform, opacity;
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.back-to-top:hover {
    border-color: var(--accent);
    background: rgba(0,217,255,0.15);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px -4px var(--accent-glow);
}

/* ============================================
   FOOTER — gradient line top, sparkle
   ============================================ */

.footer {
    padding: 3rem 2rem;
    position: relative;
    text-align: center;
    overflow: hidden;
}

/* Gradient line at top */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), var(--accent), transparent);
    opacity: 0.5;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-text {
    color: var(--text-muted);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.footer-sparkle {
    display: inline-block;
    animation: sparkle-spin 3s linear infinite;
    color: var(--accent2);
    will-change: transform;
}

@keyframes sparkle-spin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.2); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.2); }
}

/* ============================================
   NAV SECTION PILL
   ============================================ */

.nav-section-pill {
    display: none;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: var(--accent-dim);
    border: 1px solid rgba(0,217,255,0.3);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: capitalize;
    letter-spacing: 0.02em;
    margin-left: 0.75rem;
    transition: all var(--transition);
    white-space: nowrap;
}

.nav-section-pill.visible {
    display: inline-flex;
}

/* ============================================
   HERO PARTICLES
   ============================================ */

.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hero-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.18;
    animation: particle-float linear infinite;
    will-change: transform, opacity;
}

@keyframes particle-float {
    0% { transform: translateY(0) translateX(0); opacity: 0.15; }
    33% { transform: translateY(-25px) translateX(14px); opacity: 0.28; }
    66% { transform: translateY(-12px) translateX(-10px); opacity: 0.12; }
    100% { transform: translateY(0) translateX(0); opacity: 0.15; }
}

/* ============================================
   ANIMATIONS — fade/slide reveal
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        animation: fadeIn 0.7s var(--ease-spring);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(24px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ============================================
   ALTERNATE PROJECT CARD TOP BAR
   ============================================ */

.project-card:nth-child(even)::before {
    background: linear-gradient(90deg, var(--accent2) 0%, #6d28d9 100%);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .nav-container {
        padding: 1rem;
    }

    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(3, 7, 18, 0.97);
        backdrop-filter: blur(24px);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0;
        display: none;
    }

    .nav-menu.open {
        display: flex;
    }

    .nav-link {
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
        border-radius: 0;
    }

    .nav-link-cta {
        margin: 0.5rem 1.5rem;
        border-radius: 8px;
        text-align: center;
    }

    .hero-section {
        padding: 4rem 1rem 2rem;
    }

    section {
        padding: var(--space-2xl) 1rem;
    }

    .timeline-item {
        padding-left: 2rem;
    }

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

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 360px;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .profile-ring {
        width: 148px;
        height: 148px;
    }

    .profile-image-container {
        width: 132px;
        height: 132px;
    }

    .developer-icon {
        width: 50px;
        height: 50px;
        right: calc(50% - 86px);
    }

    .developer-icon svg {
        width: 30px;
        height: 30px;
    }

    .floating-symbols {
        display: none;
    }

    .languages-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

@media (max-width: 480px) {
    .languages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   2026 UPGRADES
   ============================================================ */

/* --- Grain / Film Noise Overlay --- */
.grain-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9990;
    opacity: 0.032;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
    animation: grainShift 8s steps(12) infinite;
}

@keyframes grainShift {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(-4%, -8%); }
    20%  { transform: translate(-12%, 4%); }
    30%  { transform: translate(6%, -20%); }
    40%  { transform: translate(-4%, 20%); }
    50%  { transform: translate(-12%, 8%); }
    60%  { transform: translate(12%, 0%); }
    70%  { transform: translate(0%, 12%); }
    80%  { transform: translate(3%, 28%); }
    90%  { transform: translate(-8%, 8%); }
    100% { transform: translate(0, 0); }
}

/* --- Tech Stack Marquee --- */
.marquee-section {
    overflow: hidden;
    padding: 1.25rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, var(--bg) 0%, transparent 8%, transparent 92%, var(--bg) 100%);
    position: relative;
    z-index: 1;
}

.marquee-track {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    white-space: nowrap;
    animation: marqueeScroll 28s linear infinite;
    flex-shrink: 0;
}

.marquee-content span {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.2s;
}

.marquee-content span:hover {
    color: var(--accent);
}

.marquee-sep {
    color: var(--accent) !important;
    opacity: 0.4;
    font-size: 1rem !important;
    letter-spacing: 0 !important;
}

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

/* Pause on hover */
.marquee-section:hover .marquee-content {
    animation-play-state: paused;
}

/* --- Section Number Background --- */
.section-header {
    position: relative;
}

.section-num {
    position: absolute;
    top: -0.3em;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(5rem, 14vw, 11rem);
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px var(--border);
    opacity: 0.5;
    pointer-events: none;
    line-height: 1;
    z-index: 0;
    user-select: none;
    letter-spacing: -0.04em;
}

.section-header > *:not(.section-num) {
    position: relative;
    z-index: 1;
}

/* --- Bento Grid for Projects --- */
@media (min-width: 900px) {
    .projects-grid {
        grid-template-columns: repeat(6, 1fr);
        max-width: 1280px;
    }

    .projects-grid .project-card {
        grid-column: span 2;
    }

    /* First 2 cards are featured — wider */
    .projects-grid .project-card:nth-child(1),
    .projects-grid .project-card:nth-child(2) {
        grid-column: span 3;
        flex-direction: row;
    }

    .projects-grid .project-card:nth-child(1) .project-preview,
    .projects-grid .project-card:nth-child(2) .project-preview {
        width: 220px;
        height: auto;
        flex-shrink: 0;
        border-radius: 24px 0 0 24px;
    }

    .projects-grid .project-card:nth-child(1) .project-body,
    .projects-grid .project-card:nth-child(2) .project-body {
        flex: 1;
    }
}

/* --- Animated Gradient Border on Featured Cards --- */
@media (min-width: 900px) {
    .projects-grid .project-card:nth-child(1),
    .projects-grid .project-card:nth-child(2) {
        border-color: transparent;
        background-clip: padding-box;
        position: relative;
    }

    .projects-grid .project-card:nth-child(1)::before,
    .projects-grid .project-card:nth-child(2)::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 25px;
        background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3), var(--accent));
        background-size: 300% 300%;
        animation: borderGradientSpin 6s ease infinite;
        z-index: -1;
    }

    @keyframes borderGradientSpin {
        0%   { background-position: 0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
}

/* --- Stagger animation on scroll reveal for project cards --- */
.projects-grid .project-card:nth-child(1)  { --stagger: 0ms; }
.projects-grid .project-card:nth-child(2)  { --stagger: 60ms; }
.projects-grid .project-card:nth-child(3)  { --stagger: 120ms; }
.projects-grid .project-card:nth-child(4)  { --stagger: 180ms; }
.projects-grid .project-card:nth-child(5)  { --stagger: 240ms; }
.projects-grid .project-card:nth-child(6)  { --stagger: 300ms; }
.projects-grid .project-card:nth-child(7)  { --stagger: 360ms; }
.projects-grid .project-card:nth-child(8)  { --stagger: 420ms; }
.projects-grid .project-card:nth-child(9)  { --stagger: 480ms; }
.projects-grid .project-card:nth-child(10) { --stagger: 540ms; }
.projects-grid .project-card:nth-child(11) { --stagger: 600ms; }

/* --- Magnetic Button — CSS part --- */
.btn {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

/* --- Tech tag accent3 color for third-type items --- */
.timeline-tech span:nth-child(3n),
.expertise-skills span:nth-child(3n),
.project-tech span:nth-child(3n) {
    border-color: var(--accent3-dim);
    color: var(--accent3);
}

/* --- Glossy card improvement --- */
.expertise-card,
.cert-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(145deg, rgba(13,20,36,0.9) 0%, rgba(8,13,26,0.7) 100%);
    border-color: rgba(56, 189, 248, 0.08);
}

/* --- Hero name scramble pointer --- */
#scramble-text {
    cursor: default;
}

#scramble-text:hover {
    color: var(--accent);
    transition: color 0.1s;
}

/* ============================================================
   DARK EDITORIAL OVERRIDES — Space Grotesk + Clean Minimal
   ============================================================ */

/* --- Display font on all headings --- */
h1, h2, h3,
.hero-heading,
.section-title,
.project-title,
.expertise-title,
.timeline-title,
.cert-title,
.nav-brand {
    font-family: var(--font-display);
}

/* --- Hero heading: clean, no gradient --- */
.hero-heading {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--text);
    background-clip: unset;
    color: var(--text);
    font-size: clamp(2.8rem, 7vw, 5rem);
    letter-spacing: -0.04em;
}

.hero-heading-accent {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--accent);
    background-clip: unset;
    color: var(--accent);
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-top: 0.4rem;
}

.hero-heading-accent::after {
    display: none;
}

/* --- Section titles: clean white, no sweep animation --- */
.section-title {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--text);
    background-clip: unset;
    color: var(--text);
    animation: none;
    font-size: clamp(2rem, 4.5vw, 3rem);
    letter-spacing: -0.03em;
}

/* --- Remove aurora, particles, spotlight, cursor (hidden if still in DOM) --- */
.aurora,
.spotlight,
.cursor-dot,
.cursor-ring,
.hero-particles,
.floating-symbols,
.grain-overlay {
    display: none !important;
}

/* --- Profile ring: remove spin, simplify --- */
.profile-ring::before,
.profile-ring::after {
    display: none;
}

.profile-ring {
    animation: none;
    border: 2px solid var(--border);
    background: none;
    padding: 3px;
}

/* --- Card hover: minimal — just border + tiny lift, no glow blob --- */
.project-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow:
        0 12px 32px -8px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(16, 185, 129, 0.15);
}

.project-card:nth-child(even):hover {
    border-color: var(--accent2);
    box-shadow:
        0 12px 32px -8px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(129, 140, 248, 0.15);
}

/* --- Expertise / cert card: clean, no heavy glassmorphism --- */
.expertise-card,
.cert-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-card);
    border-color: var(--border);
}

.expertise-card:hover,
.cert-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
}

/* --- Section label: use accent color --- */
.section-label {
    color: var(--accent);
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* --- Timeline marker: emerald --- */
.timeline-marker {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

/* --- Status dot: emerald --- */
.status-dot {
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
}

/* --- Nav brand: display font, accent on hover --- */
.nav-brand:hover {
    color: var(--accent);
}

/* --- Remove bento featured card border spin (too flashy) --- */
.projects-grid .project-card:nth-child(1)::before,
.projects-grid .project-card:nth-child(2)::before {
    display: none;
}

.projects-grid .project-card:nth-child(1),
.projects-grid .project-card:nth-child(2) {
    border-color: var(--border);
}

/* --- Footer: clean --- */
.footer-text {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* --- Scroll progress bar: emerald --- */
#scroll-progress {
    background: var(--accent) !important;
}

/* --- Back to top: clean --- */
.back-to-top {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-secondary);
}

.back-to-top:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}