/* ============================================
   PHILLIP HAMPTON - PORTFOLIO v3.0
   Liquid Glass Design System - Enhanced Edition
   Inspired by Apple WWDC 2025
   ============================================ */

/* ============================================
   Accessibility: Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .orb {
        animation: none !important;
    }

    .hero-badge::before,
    .hero-badge::after {
        animation: none !important;
    }

    .hero-glow,
    .hero-particles,
    .custom-cursor,
    .custom-cursor-dot {
        display: none !important;
    }
}

/* ============================================
   Skip Navigation Link (Accessibility)
   ============================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: var(--bg-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    z-index: 9999;
    transition: top 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(96, 165, 250, 0.4);
}

.skip-link:focus {
    top: var(--space-md);
    outline: none;
}

/* ============================================
   Mobile Header (branding at top on small screens)
   ============================================ */
.mobile-header {
    display: none;
}

@media (max-width: 768px) {
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-md) var(--space-lg);
        background: rgba(10, 10, 15, 0.6);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--glass-border);
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .mobile-header-logo {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        text-decoration: none;
        color: var(--text-primary);
    }

    .mobile-header-icon {
        width: 28px;
        height: 28px;
        background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: var(--font-size-sm);
        color: var(--bg-primary);
    }

    .mobile-header-name {
        font-size: var(--font-size-base);
        font-weight: 600;
        letter-spacing: -0.02em;
    }
}

/* CSS Custom Properties */
:root {
    /* Colors */
    --bg-primary: #050507;
    --bg-secondary: #0a0a0f;
    --bg-tertiary: #111118;

    /* Glass Properties */
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-bg-hover: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.08);
    --glass-glow: rgba(120, 119, 198, 0.15);

    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-tertiary: rgba(255, 255, 255, 0.4);

    /* Accent Colors */
    --accent-cyan: #60a5fa;
    --accent-purple: #a78bfa;
    --accent-pink: #f472b6;
    --accent-green: #34d399;
    --accent-orange: #fb923c;

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

    /* Layout */
    --sidebar-width: 220px;
    --content-max-width: 900px;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.9375rem;
    --font-size-lg: 1.0625rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.75rem;
    --font-size-5xl: 3.5rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-base: 300ms var(--ease-out);
    --transition-slow: 500ms var(--ease-out);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 60px var(--glass-glow);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* ============================================
   Animated Background
   ============================================ */
.background {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg-primary);
    overflow: hidden;
}

.background::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(96, 165, 250, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 80% 90%, rgba(167, 139, 250, 0.06) 0%, transparent 50%);
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
    will-change: transform;
    animation: float 40s ease-in-out infinite;
}

/* Cyan orb - top center, very subtle */
.orb-1 {
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(96, 165, 250, 0.3) 0%, transparent 70%);
    top: -200px;
    left: calc(50% - 300px);
    opacity: 0.2;
}

/* Purple orb - bottom right, balanced with sidebar */
.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.25) 0%, transparent 70%);
    bottom: -150px;
    right: 10%;
    animation-delay: -15s;
    opacity: 0.2;
}

/* Pink orb - subtle accent, lower left of content area */
.orb-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(244, 114, 182, 0.2) 0%, transparent 70%);
    top: 60%;
    left: 20%;
    animation-delay: -8s;
    opacity: 0.15;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(20px, -25px) scale(1.02);
    }
    66% {
        transform: translate(-15px, 15px) scale(0.98);
    }
}

/* Noise Texture */
.noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.02;
    pointer-events: none;
}

/* ============================================
   Layout Structure
   ============================================ */
.app {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: var(--space-2xl);
    padding-bottom: var(--space-3xl);
}

.container {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

/* ============================================
   Left Sidebar Navigation
   ============================================ */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-right: 1px solid var(--glass-border);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.sidebar-header {
    margin-bottom: var(--space-2xl);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--text-primary);
}

.sidebar-logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--bg-primary);
}

.sidebar-logo-text {
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: var(--transition-fast);
}

.nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.nav-link.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 3px;
    height: 20px;
    background: linear-gradient(180deg, var(--accent-cyan), var(--accent-purple));
    border-radius: 0 2px 2px 0;
}

.nav-link svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.nav-link:hover svg,
.nav-link.active svg {
    opacity: 1;
}

.sidebar-footer {
    display: flex;
    gap: var(--space-sm);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--glass-border);
}

.social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    transition: var(--transition-fast);
}

.social-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.social-link svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   Liquid Glass Components
   ============================================ */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.05) inset,
        var(--shadow-md);
    transition: var(--transition-base);
}

.glass:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.08) inset,
        var(--shadow-lg),
        var(--shadow-glow);
    transform: translateY(-2px);
}

.glass-static {
    background: var(--glass-bg);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.05) inset,
        var(--shadow-md);
}

/* Glass Card Variants */
.glass-card {
    padding: var(--space-xl);
}

.glass-card-sm {
    padding: var(--space-lg);
}

.glass-card-lg {
    padding: var(--space-2xl);
}

/* ============================================
   Typography
   ============================================ */
.page-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: var(--space-2xl);
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.section-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    padding: var(--space-3xl) 0;
    text-align: center;
}

/* Hero Profile Avatar */
.hero-avatar {
    display: inline-block;
    width: 140px;
    height: 140px;
    margin-bottom: var(--space-lg);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid transparent;
    background:
        linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
        linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)) border-box;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(96, 165, 250, 0.3);
    animation: heroReveal 0.8s var(--ease-out) 0.05s both;
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}

.hero-avatar:hover {
    transform: scale(1.05);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(96, 165, 250, 0.4);
}

@keyframes heroReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.24) translate(1px, 9%);
}

/* Responsive avatar sizing */
@media (max-width: 768px) {
    .hero-avatar {
        width: 120px;
        height: 120px;
    }
    .hero-avatar-img {
        transform: scale(1.24) translate(0px, 9%);
    }
}

@media (max-width: 480px) {
    .hero-avatar {
        width: 100px;
        height: 100px;
    }
    .hero-avatar-img {
        transform: scale(1.24) translate(0px, 9%);
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--accent-green);
    margin-bottom: var(--space-lg);
}

.hero-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent-green);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.hero-name {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: var(--space-md);
    background: linear-gradient(135deg, var(--text-primary) 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-title {
    font-size: var(--font-size-xl);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.hero-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-tertiary);
    margin-bottom: var(--space-xl);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: var(--transition-fast);
}

.btn svg {
    width: 16px;
    height: 16px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: var(--bg-primary);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(96, 165, 250, 0.3);
}

.btn-secondary {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
}

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

.btn-ghost:hover {
    border-color: var(--glass-border-hover);
    color: var(--text-primary);
}

/* ============================================
   About Section
   ============================================ */
.about-section {
    margin-top: var(--space-3xl);
}

.about-text {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.about-text:last-of-type {
    margin-bottom: var(--space-xl);
}

.about-highlight {
    color: var(--text-primary);
    font-weight: 500;
}

/* ============================================
   Stats/Metrics Grid
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.stat-card {
    text-align: center;
    padding: var(--space-lg);
}

.stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-xs);
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   Skills/Tags
   ============================================ */
.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.skill-tag {
    padding: var(--space-xs) var(--space-md);
    background: rgba(167, 139, 250, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--accent-purple);
}

.tech-tag {
    padding: var(--space-xs) var(--space-sm);
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
}

/* ============================================
   Projects Grid
   ============================================ */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.project-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.project-card-link {
    cursor: pointer;
}

.project-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.project-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* Image-based project icons */
.project-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    transform: scale(1.03);
}

.project-icon-img[alt="Chimera"] {
    transform: scale(1.04);
}

/* OpenReply needs a background since it has transparency */
.project-icon-openreply {
    background: linear-gradient(135deg, #1a1f2e, #0f1219);
    padding: 8px;
}

.project-icon-openreply .project-icon-img {
    object-fit: contain;
}

/* Blackwater is circular */
.project-icon-blackwater {
    border-radius: 50%;
}

.project-icon-blackwater .project-icon-img {
    border-radius: 50%;
}

/* Fallback SVG icons */
.project-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--bg-primary);
}

.project-icon-halt-fallback { background: linear-gradient(135deg, #10b981, #059669); }
.project-icon-openreply-fallback { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.project-icon-chimera-fallback { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.project-icon-blackwater-fallback { background: linear-gradient(135deg, #1e293b, #334155); }

.project-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
}

.project-badge {
    padding: 3px 8px;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-badge-role {
    background: rgba(167, 139, 250, 0.1);
    border-color: rgba(167, 139, 250, 0.2);
    color: var(--accent-purple);
}

.project-badge-wip {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.2);
    color: var(--accent-orange);
}

.project-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.project-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    flex: 1;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.project-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.project-rating {
    color: #fbbf24;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    background: rgba(251, 191, 36, 0.15);
    padding: 0.25em 0.6em;
    border-radius: 6px;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.project-rating::before {
    content: "★";
    font-size: 1.1em;
}

.project-arrow {
    opacity: 0;
    transform: translate(-8px, 8px);
    transition: var(--transition-fast);
    color: var(--text-tertiary);
    margin-top: var(--space-md);
}

.project-card:hover .project-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* ============================================
   Timeline
   ============================================ */
/* Timeline wrapper contains the line */
.timeline-wrapper {
    position: relative;
    padding-left: 32px;
}

/* Main vertical line - extends full height with faded endpoints */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 3px;
    bottom: 63px;
    width: 2px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(96, 165, 250, 0.3) 47px,
        var(--accent-cyan) 77px,
        var(--accent-purple) 50%,
        var(--accent-cyan) calc(100% - 77px),
        rgba(96, 165, 250, 0.3) calc(100% - 47px),
        transparent 100%
    );
    opacity: 0.4;
    border-radius: 2px;
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: relative;
}

.timeline-item {
    position: relative;
}

/* Expanded items - hidden by default */
.timeline-item-expanded {
    display: none;
    opacity: 0;
    transform: translateY(15px);
}

/* Show expanded items when section is expanded */
.timeline-section.is-expanded .timeline-item-expanded {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.timeline-section.is-expanded .timeline-item-expanded:nth-child(6) { transition-delay: 0.05s; }
.timeline-section.is-expanded .timeline-item-expanded:nth-child(7) { transition-delay: 0.1s; }
.timeline-section.is-expanded .timeline-item-expanded:nth-child(8) { transition-delay: 0.15s; }
.timeline-section.is-expanded .timeline-item-expanded:nth-child(9) { transition-delay: 0.2s; }
.timeline-section.is-expanded .timeline-item-expanded:nth-child(10) { transition-delay: 0.25s; }

/* Timeline marker - vertically centered on card */
.timeline-marker {
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
    z-index: 2;
    border: 2px solid var(--bg-primary);
}

.timeline-card {
    padding: var(--space-lg);
}

.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
    gap: var(--space-md);
}

.timeline-header-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.timeline-company-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.9;
    transition: all var(--transition-base);
    padding: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
}

.timeline-company-logo:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.12);
}

.timeline-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.timeline-date {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--accent-cyan);
    background: rgba(96, 165, 250, 0.1);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.timeline-company {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.timeline-location {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
}

.timeline-details {
    list-style: none;
}

.timeline-details li {
    position: relative;
    padding-left: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    line-height: 1.5;
}

.timeline-details li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-purple);
    opacity: 0.5;
}

/* Timeline Expand Button */
.timeline-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: fit-content;
    margin: var(--space-xl) auto 0;
    padding: var(--space-sm) var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.timeline-expand-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.timeline-expand-btn:active {
    transform: translateY(0);
}

.timeline-expand-btn .expand-icon {
    transition: transform 0.3s ease;
}

.timeline-expand-btn[aria-expanded="true"] .expand-icon {
    transform: rotate(180deg);
}

/* Button position changes when expanded */
.timeline-expand-btn {
    margin-top: var(--space-lg);
}

.timeline-section.is-expanded .timeline-expand-btn {
    margin-top: var(--space-xl);
}

/* Logo placeholder for companies without logos */
.timeline-company-logo-placeholder {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--bg-dark);
    flex-shrink: 0;
}

/* ============================================
   Testimonials
   ============================================ */
.testimonials-section {
    margin-top: var(--space-3xl);
}

/* Carousel Container */
.carousel-container {
    position: relative;
    display: block;
    overflow: visible;
    /* Constrain shadow overflow */
    margin: 0 var(--space-sm);
}

/* Carousel Viewport */
.carousel-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

/* Carousel Track */
.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Testimonial Card */
.testimonial-card {
    flex: 0 0 100%;
    padding: var(--space-xl) var(--space-3xl);
    box-sizing: border-box;
    position: relative;
    /* Reduce shadow spread to keep it closer to card edges */
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.05) inset,
        0 4px 20px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Company Logo in Testimonial Cards */
.testimonial-company-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    max-width: 160px;
    opacity: 0.9;
    transition: all var(--transition-base);
    text-decoration: none;
    margin-left: auto;
    flex-shrink: 0;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.testimonial-company-logo:hover {
    opacity: 1;
    transform: scale(1.02);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.testimonial-company-logo svg {
    height: 100%;
    width: auto;
    max-width: 100%;
}

.testimonial-company-logo-img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Tesla logo needs more height and padding on desktop */
.testimonial-company-logo:has(img[alt="Tesla"]) {
    padding: 20px 15px;
    height: 66px;
}
.testimonial-company-logo-img[alt="Tesla"] {
    height: 192%;
}

/* Carousel Arrow Buttons - Liquid Glass Style */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel-arrow-left {
    left: var(--space-lg);
}

.carousel-arrow-right {
    right: var(--space-lg);
}

.carousel-arrow svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.carousel-arrow:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.05);
}

.carousel-arrow:hover svg {
    color: var(--text-primary);
}

.carousel-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Carousel Dots - Liquid Glass Style */
.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-dot:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.15);
}

.carousel-dot.active {
    width: 32px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg,
        rgba(96, 165, 250, 0.4) 0%,
        rgba(168, 85, 247, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 0 20px rgba(96, 165, 250, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* Avatar Image */
.testimonial-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Testimonial Relation Tag */
.testimonial-relation {
    font-size: var(--font-size-xs);
    color: var(--accent-cyan);
    margin-top: 2px;
}

/* Swipe Indicator - hidden on desktop */
.swipe-indicator {
    display: none;
}

/* Mobile: Hide arrows, rely on swipe */
@media (max-width: 768px) {
    .carousel-container {
        margin: 0;
    }

    .carousel-arrow {
        display: none;
    }

    .carousel-viewport {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
        /* Remove border-radius so peeking cards aren't clipped */
        border-radius: 0;
    }

    .carousel-viewport::-webkit-scrollbar {
        display: none;
    }

    .carousel-track {
        transition: none;
        will-change: auto;
    }

    .testimonial-card {
        scroll-snap-align: center;
        flex: 0 0 88%;
        margin: 0 2%;
        padding: var(--space-md) var(--space-lg);
    }

    .testimonial-quote {
        font-size: var(--font-size-sm);
        line-height: 1.6;
        margin-bottom: var(--space-sm);
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .testimonial-quote.expanded,
    .testimonial-quote.no-truncate {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .testimonial-expand-btn {
        background: none;
        border: none;
        color: var(--accent-cyan);
        font-size: var(--font-size-xs);
        font-weight: 500;
        cursor: pointer;
        padding: var(--space-xs) var(--space-lg);
        margin-bottom: var(--space-sm);
        transition: opacity 0.2s ease;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .testimonial-expand-btn:active {
        opacity: 0.7;
    }

    .testimonial-author {
        gap: var(--space-sm);
    }

    .testimonial-company-logo {
        height: 36px;
        padding: 5px 8px;
    }

    /* Tesla logo - match desktop padding ratio, slightly smaller */
    .testimonial-company-logo:has(img[alt="Tesla"]) {
        height: 54px;
        padding: 16px 12px;
    }

    .testimonial-company-logo-img[alt="Tesla"] {
        height: 155%;
    }

    .testimonial-avatar-img {
        width: 40px;
        height: 40px;
    }

    /* Reduce backdrop-filter on dots for mobile performance */
    .carousel-dot {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.1);
        position: relative;
    }

    /* Expand tap target to 44px minimum for touch accessibility */
    .carousel-dot::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

    .carousel-dot.active {
        box-shadow: 0 0 12px rgba(96, 165, 250, 0.3);
    }

    /* Swipe indicator for mobile */
    .swipe-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        margin-top: var(--space-sm);
        color: var(--text-muted);
        font-size: var(--font-size-xs);
        opacity: 0.7;
        animation: swipe-hint 2s ease-in-out infinite;
        transition: opacity 0.3s ease;
    }

    .swipe-indicator svg {
        width: 16px;
        height: 16px;
    }

    @keyframes swipe-hint {
        0%, 100% { transform: translateX(0); opacity: 0.7; }
        50% { transform: translateX(5px); opacity: 1; }
    }
}

.testimonial-quote {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.8;
    font-style: italic;
    margin-bottom: var(--space-lg);
    position: relative;
    padding: 0 var(--space-lg);
}

.testimonial-quote::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -5px;
    font-size: var(--font-size-3xl);
    color: var(--accent-purple);
    opacity: 0.3;
    font-style: normal;
}

/* Read more expandable quotes */
.quote-full {
    display: none;
}

.quote-preview {
    display: inline;
}

.testimonial-quote.expanded .quote-full {
    display: inline;
}

.testimonial-quote.expanded .quote-preview {
    display: none;
}

.read-more-btn {
    background: none;
    border: none;
    color: var(--accent-cyan);
    font-size: var(--font-size-sm);
    font-style: normal;
    cursor: pointer;
    padding: 0;
    margin-left: var(--space-xs);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.read-more-btn:hover {
    opacity: 1;
    text-decoration: underline;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0 var(--space-lg);
}

.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--bg-primary);
}

.testimonial-info {
    flex: 1;
}

.testimonial-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.testimonial-role {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* ============================================
   Education Section
   ============================================ */
.education-card {
    display: flex;
    gap: var(--space-xl);
    align-items: flex-start;
    padding: var(--space-xl);
}

.education-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #ffc904, #b89507);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.education-logo svg {
    width: 32px;
    height: 32px;
    stroke: var(--bg-primary);
}

.education-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.education-content {
    flex: 1;
}

.education-school {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.education-degree {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.education-years {
    font-size: var(--font-size-sm);
    color: var(--accent-cyan);
    margin-bottom: var(--space-md);
}

.education-activities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.education-activities span {
    padding: 3px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.education-achievement {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    font-style: italic;
}

/* ============================================
   Contact Section
   ============================================ */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl);
    text-decoration: none;
    color: inherit;
}

.contact-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    color: var(--accent-cyan);
    transition: var(--transition-fast);
}

.contact-card:hover .contact-icon {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: var(--bg-primary);
    border-color: transparent;
}

.contact-icon svg {
    width: 24px;
    height: 24px;
}

.contact-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.contact-value {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

/* ============================================
   Footer
   ============================================ */
.footer {
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--glass-border);
    text-align: center;
}

.footer p {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* ============================================
   Animations
   ============================================ */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    :root {
        --sidebar-width: 100%;
    }

    .app {
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        padding: var(--space-sm) var(--space-md);
        border-right: none;
        border-top: 1px solid var(--glass-border);
        gap: 0;
    }

    .sidebar-header,
    .sidebar-footer {
        display: none;
    }

    .sidebar-nav {
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        gap: 0;
    }

    .nav-link {
        flex-direction: column;
        padding: var(--space-sm);
        font-size: 10px;
        gap: 4px;
    }

    .nav-link svg {
        width: 20px;
        height: 20px;
    }

    .nav-link.active::before {
        display: none;
    }

    .main-content {
        margin-left: 0;
        padding: var(--space-lg);
        padding-bottom: 100px;
        overflow-x: hidden;
    }

    .hero-name {
        font-size: var(--font-size-3xl);
    }

    .hero-title {
        font-size: var(--font-size-lg);
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .stat-card {
        padding: var(--space-md);
    }

    .stat-value {
        font-size: var(--font-size-2xl);
    }

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

    .education-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .education-activities {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: var(--font-size-2xl);
    }

    .glass-card {
        padding: var(--space-lg);
    }
}

/* ============================================
   Contact Page
   ============================================ */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.contact-card {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.contact-card-link {
    cursor: pointer;
}

.contact-card-link:hover {
    transform: translateY(-4px);
}

.contact-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.contact-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.contact-icon-linkedin {
    background: linear-gradient(135deg, #0A66C2, #0077B5);
}

.contact-icon-linkedin svg {
    width: 24px;
    height: 24px;
}

.contact-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.contact-value {
    font-size: var(--font-size-base);
    color: var(--accent-blue);
    margin-bottom: var(--space-sm);
}

.contact-description {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    line-height: 1.5;
}

.contact-arrow {
    position: absolute;
    top: var(--space-xl);
    right: var(--space-xl);
    color: var(--text-quaternary);
    transition: var(--transition-base);
}

.contact-card-link:hover .contact-arrow {
    color: var(--accent-blue);
    transform: translate(4px, -4px);
}

/* Availability Grid */
.availability-grid {
    display: grid;
    gap: var(--space-lg);
}

.availability-item {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.availability-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-md);
    background: rgba(96, 165, 250, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.availability-icon svg {
    width: 20px;
    height: 20px;
    color: var(--accent-blue);
}

.availability-content h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2xs);
}

.availability-content p {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Scrollbar
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Selection
   ============================================ */
::selection {
    background: rgba(96, 165, 250, 0.3);
    color: var(--text-primary);
}

/* ============================================
   Enhanced Focus States (Accessibility)
   ============================================ */
:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.btn:focus-visible {
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.3);
}

.nav-link:focus-visible {
    background: rgba(96, 165, 250, 0.1);
    outline-offset: -2px;
}

.project-card:focus-visible,
.contact-card:focus-visible {
    outline-offset: 4px;
    transform: translateY(-2px);
}

.carousel-viewport:focus-within {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 4px;
}

.carousel-arrow:focus-visible,
.carousel-dot:focus-visible {
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.4);
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .sidebar,
    .background {
        display: none;
    }

    .main-content {
        margin-left: 0;
    }

    .glass,
    .glass-static {
        background: white;
        border: 1px solid #ddd;
        box-shadow: none;
    }
}

/* ============================================
   PHASE 2: HERO SECTION ENHANCEMENTS
   ============================================ */

/* Hero Container Enhancement */
.hero {
    position: relative;
    overflow: visible;
}

/* Hero glow hidden - particles react to cursor position only */
.hero-glow {
    display: none;
}

/* Ensure hero content is above glow */
.hero > *:not(.hero-glow):not(.hero-particles) {
    position: relative;
    z-index: 1;
}

/* Hero Text Reveal Animations */
@keyframes textReveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(96, 165, 250, 0);
    }
    50% {
        text-shadow: 0 0 40px rgba(96, 165, 250, 0.3);
    }
}

/* Staggered Hero Entrance Animations */
.hero-stagger-1 {
    animation: heroStaggerIn 0.8s var(--ease-out) 0.1s both;
}

.hero-stagger-2 {
    animation: heroStaggerIn 0.8s var(--ease-out) 0.25s both, textGlow 4s ease-in-out 1.5s infinite;
}

.hero-stagger-3 {
    animation: heroStaggerIn 0.8s var(--ease-out) 0.4s both;
}

.hero-stagger-4 {
    animation: heroStaggerIn 0.8s var(--ease-out) 0.5s both;
}

.hero-stagger-5 {
    animation: heroStaggerIn 0.8s var(--ease-out) 0.65s both;
}

@keyframes heroStaggerIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Legacy fallbacks (keep for any elements without stagger class) */
.hero-badge {
    animation: textReveal 0.7s var(--ease-out) 0.1s both;
}

.hero-name:not(.hero-stagger-2) {
    animation: textReveal 0.8s var(--ease-out) 0.2s both, textGlow 4s ease-in-out 1s infinite;
}

.hero-title:not(.hero-stagger-3) {
    animation: textReveal 0.8s var(--ease-out) 0.4s both;
}

.hero-subtitle:not(.hero-stagger-4) {
    animation: textReveal 0.8s var(--ease-out) 0.5s both;
}

.hero-actions:not(.hero-stagger-5) {
    animation: textReveal 0.8s var(--ease-out) 0.6s both;
}

/* Enhanced "Available" Badge */
.hero-badge {
    position: relative;
    overflow: hidden;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
    box-shadow:
        0 0 20px rgba(52, 211, 153, 0.15),
        inset 0 0 20px rgba(52, 211, 153, 0.05);
}

/* Enhanced pulsing dot with ring */
.hero-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent-green);
    border-radius: 50%;
    position: relative;
    z-index: 1;
    animation: dotPulse 2s ease-in-out infinite;
    box-shadow: 0 0 10px var(--accent-green);
}

.hero-badge::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-green);
    animation: ringPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 10px var(--accent-green);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.15);
        box-shadow: 0 0 20px var(--accent-green);
    }
}

@keyframes ringPulse {
    0% {
        transform: translateY(-50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-50%) scale(2.5);
        opacity: 0;
    }
}

/* Badge shimmer effect */
@keyframes badgeShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.hero-badge {
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(52, 211, 153, 0.15) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: textReveal 0.7s var(--ease-out) 0.1s both, badgeShimmer 4s linear 1.5s infinite;
}

/* Hero Floating Particles */
.hero-particles {
    position: absolute;
    top: 0;
    left: -40px;
    right: -40px;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

@media (min-width: 1200px) {
    .hero-particles {
        left: -80px;
        right: -80px;
    }
}

@media (min-width: 1600px) {
    .hero-particles {
        left: -120px;
        right: -120px;
    }
}

.hero-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--accent-cyan);
    /* Size, opacity, and glow set by JS for natural variation */
}

/* Subtle twinkle for idle particles */
@keyframes particleTwinkle {
    0%, 100% { opacity: var(--particle-opacity, 0.6); }
    50% { opacity: calc(var(--particle-opacity, 0.6) * 1.3); }
}

/* Size classes - applied by JS */
.hero-particle--tiny {
    width: 2px;
    height: 2px;
    box-shadow:
        0 0 4px currentColor,
        0 0 8px currentColor;
}

.hero-particle--small {
    width: 3px;
    height: 3px;
    box-shadow:
        0 0 6px currentColor,
        0 0 12px rgba(96, 165, 250, 0.3);
}

.hero-particle--medium {
    width: 4px;
    height: 4px;
    box-shadow:
        0 0 8px currentColor,
        0 0 16px currentColor,
        0 0 24px rgba(96, 165, 250, 0.2);
}

.hero-particle--large {
    width: 6px;
    height: 6px;
    box-shadow:
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 35px rgba(96, 165, 250, 0.3);
}

.hero-particle--star {
    width: 8px;
    height: 8px;
    box-shadow:
        0 0 12px currentColor,
        0 0 25px currentColor,
        0 0 50px rgba(96, 165, 250, 0.4);
}

/* Color classes */
.hero-particle--cyan { background: var(--accent-cyan); }
.hero-particle--purple {
    background: var(--accent-purple);
    box-shadow:
        0 0 8px currentColor,
        0 0 16px currentColor,
        0 0 24px rgba(168, 85, 247, 0.3);
}
.hero-particle--pink {
    background: var(--accent-pink);
    box-shadow:
        0 0 8px currentColor,
        0 0 16px currentColor,
        0 0 24px rgba(236, 72, 153, 0.3);
}

/* ============================================
   PHASE 3: NAVIGATION ENHANCEMENTS
   ============================================ */

/* Enhanced Navigation Link Animation */
.nav-link {
    position: relative;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s var(--ease-out);
}

.nav-link:hover {
    transform: translateX(4px);
}

.nav-link svg {
    transition:
        opacity 0.25s ease,
        transform 0.25s var(--ease-out);
}

.nav-link:hover svg {
    transform: scale(1.1);
}

/* Active indicator animation */
.nav-link.active::before {
    animation: indicatorSlideIn 0.4s var(--ease-out);
}

@keyframes indicatorSlideIn {
    0% {
        height: 0;
        opacity: 0;
    }
    100% {
        height: 20px;
        opacity: 1;
    }
}

/* Mobile Navigation Improvements */
@media (max-width: 768px) {
    .nav-link {
        min-width: 64px;
        min-height: 56px;
        padding: var(--space-sm) var(--space-md);
        font-size: 11px;
        gap: 4px;
        justify-content: center;
    }

    .nav-link svg {
        width: 22px;
        height: 22px;
    }

    .nav-link:hover {
        transform: translateY(-2px);
    }

    /* Show social links on mobile */
    .mobile-social-links {
        display: flex;
        position: fixed;
        top: var(--space-md);
        right: var(--space-md);
        flex-direction: row;
        gap: var(--space-xs);
        z-index: 101;
    }

    .mobile-social-links .social-link {
        width: 40px;
        height: 40px;
        background: rgba(10, 10, 15, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   PHASE 4: PROJECT CARD ENHANCEMENTS
   ============================================ */

/* Project Card Base Enhancements */
.project-card {
    position: relative;
    overflow: hidden;
}

/* Gradient Sweep Animation */
.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(96, 165, 250, 0.08) 50%,
        transparent 100%
    );
    transition: left 0.6s var(--ease-out);
    pointer-events: none;
    z-index: 0;
}

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

/* Animated Border Draw Effect */
.project-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    padding: 1px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.project-card:hover::after {
    opacity: 1;
    animation: borderDraw 0.6s var(--ease-out) forwards;
}

@keyframes borderDraw {
    0% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
    25% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
    50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); }
    75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Enhanced Project Icon */
.project-icon {
    transition:
        transform 0.35s var(--ease-out),
        box-shadow 0.35s ease;
}

.project-card:hover .project-icon {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Enhanced Project Badge */
.project-badge {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.project-card:hover .project-badge {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25);
}

/* Project content stays above effects */
.project-header,
.project-title,
.project-description,
.project-tech,
.project-meta {
    position: relative;
    z-index: 1;
}

/* ============================================
   PHASE 5: TIMELINE ENHANCEMENTS
   ============================================ */

/* Animated Timeline Connector Line - overlays the static line with gradient */
.timeline-wrapper::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 3px;
    bottom: 63px;
    width: 2px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(96, 165, 250, 0.5) 47px,
        var(--accent-cyan) 77px,
        var(--accent-purple) 50%,
        var(--accent-cyan) calc(100% - 77px),
        rgba(96, 165, 250, 0.5) calc(100% - 47px),
        transparent 100%
    );
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 1.5s var(--ease-out);
    border-radius: 2px;
    z-index: 1;
}

.timeline-section.line-animated .timeline-wrapper::after {
    transform: scaleY(1);
}

.timeline-section.line-animated .timeline-wrapper::before {
    opacity: 0;
}

/* Enhanced Timeline Markers - subtle pulse */
.timeline-marker::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    opacity: 0;
    animation: markerPulse 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes markerPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0;
    }
    50% {
        transform: scale(1.8);
        opacity: 0.3;
    }
}

/* Stagger pulse animation */
.timeline-item:nth-child(1) .timeline-marker::before { animation-delay: 0s; }
.timeline-item:nth-child(2) .timeline-marker::before { animation-delay: 0.5s; }
.timeline-item:nth-child(3) .timeline-marker::before { animation-delay: 1s; }
.timeline-item:nth-child(4) .timeline-marker::before { animation-delay: 1.5s; }
.timeline-item:nth-child(5) .timeline-marker::before { animation-delay: 2s; }

.timeline-item:hover .timeline-marker {
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.6);
}

.timeline-marker {
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}

/* Timeline Item Reveal Animation */
.timeline-item.reveal-animate {
    opacity: 0;
    transform: translateX(-25px);
    transition:
        opacity 0.6s var(--ease-out),
        transform 0.6s var(--ease-out);
}

.timeline-item.reveal-animate.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   PHASE 6: TESTIMONIALS CAROUSEL ENHANCEMENTS
   ============================================ */

/* Enhanced Avatar with Glow */
.testimonial-avatar-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    background:
        linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
        linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)) border-box;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(96, 165, 250, 0.2);
    transition:
        box-shadow 0.4s ease,
        transform 0.4s var(--ease-out);
    animation: avatarGlow 8s linear infinite;
}

@keyframes avatarGlow {
    0%, 100% {
        filter: hue-rotate(0deg);
    }
    50% {
        filter: hue-rotate(30deg);
    }
}

.testimonial-card:hover .testimonial-avatar-img {
    transform: scale(1.08);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(96, 165, 250, 0.35);
}

/* Carousel Slide Counter */
.carousel-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.carousel-current {
    color: var(--accent-cyan);
    font-weight: 600;
    min-width: 1.5ch;
    text-align: center;
    transition: transform 0.3s var(--ease-out);
}

.carousel-current.changing {
    transform: translateY(-5px);
    opacity: 0.5;
}

.carousel-separator {
    opacity: 0.4;
}

.carousel-total {
    opacity: 0.6;
}

/* Enhanced Carousel Transitions */
.carousel-track {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   PHASE 7: CONTACT CARD ENHANCEMENTS
   ============================================ */

/* Contact Card Glow Effects */
.contact-card {
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent-cyan) 50%,
        transparent 100%
    );
    transform: scaleX(0);
    transition: transform 0.5s var(--ease-out);
}

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

.contact-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center top,
        rgba(96, 165, 250, 0.12) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

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

/* Enhanced Contact Icons */
.contact-icon {
    position: relative;
    z-index: 1;
    transition:
        transform 0.35s var(--ease-out),
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.contact-card:hover .contact-icon {
    transform: translateY(-6px) scale(1.08);
    box-shadow:
        0 12px 30px rgba(96, 165, 250, 0.35),
        0 0 50px rgba(96, 165, 250, 0.15);
}

/* Icon-specific animations */
@keyframes emailBounce {
    0%, 100% { transform: translateY(-6px) scale(1.08); }
    25% { transform: translateY(-10px) scale(1.08); }
    50% { transform: translateY(-6px) scale(1.08); }
    75% { transform: translateY(-8px) scale(1.08); }
}

@keyframes linkedinPulse {
    0%, 100% { transform: translateY(-6px) scale(1.08); }
    50% { transform: translateY(-6px) scale(1.15); }
}

.contact-card:first-child:hover .contact-icon {
    animation: emailBounce 0.6s ease;
}

.contact-card:nth-child(2):hover .contact-icon {
    animation: linkedinPulse 0.5s ease;
}

/* Contact content above glow */
.contact-icon,
.contact-label,
.contact-value,
.contact-description,
.contact-title {
    position: relative;
    z-index: 1;
}

/* ============================================
   PHASE 8: CUSTOM CURSOR (Desktop Only)
   ============================================ */

.custom-cursor,
.custom-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: difference;
}

.custom-cursor {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transition:
        width 0.25s var(--ease-out),
        height 0.25s var(--ease-out),
        margin 0.25s var(--ease-out),
        border-color 0.25s ease,
        background 0.25s ease;
    will-change: transform;
}

.custom-cursor-dot {
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background: white;
    border-radius: 50%;
    will-change: transform;
}

.custom-cursor.cursor-hover {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-color: var(--accent-cyan);
    background: rgba(96, 165, 250, 0.1);
}

.custom-cursor.cursor-click {
    transform: scale(0.85);
}

/* Hide default cursor when custom is active */
@media (min-width: 769px) {
    body.custom-cursor-active {
        cursor: none;
    }

    body.custom-cursor-active a,
    body.custom-cursor-active button,
    body.custom-cursor-active .glass,
    body.custom-cursor-active .project-card,
    body.custom-cursor-active .contact-card,
    body.custom-cursor-active .nav-link,
    body.custom-cursor-active .carousel-arrow,
    body.custom-cursor-active .carousel-dot {
        cursor: none;
    }
}

/* ============================================
   PHASE 8: BUTTON RIPPLE EFFECTS
   ============================================ */

.btn {
    position: relative;
    overflow: hidden;
    transform-origin: center;
}

.btn:active {
    transform: scale(0.97);
}

.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.4) 0%,
        transparent 60%
    );
    transform: scale(0);
    animation: btnRipple 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes btnRipple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Enhanced button glow on hover */
.btn-primary:hover {
    box-shadow:
        0 10px 30px rgba(96, 165, 250, 0.4),
        0 0 0 2px rgba(96, 165, 250, 0.15);
}

.btn-primary:active {
    box-shadow:
        0 5px 20px rgba(96, 165, 250, 0.35),
        0 0 0 3px rgba(96, 165, 250, 0.2);
}

/* ============================================
   PHASE 8: LINK HOVER UNDERLINES
   ============================================ */

.about-text a,
.timeline-details a,
p a:not(.btn) {
    position: relative;
    color: var(--accent-cyan);
    text-decoration: none;
}

.about-text a::after,
.timeline-details a::after,
p a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s var(--ease-out);
}

.about-text a:hover::after,
.timeline-details a:hover::after,
p a:not(.btn):hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ============================================
   PHASE 8: EXTERNAL LINK LOADING INDICATOR
   ============================================ */

a[target="_blank"].loading::after {
    content: '';
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: externalLinkSpin 0.7s linear infinite;
}

@keyframes externalLinkSpin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ============================================
   PHASE 8: ENHANCED GLOBAL GLOW EFFECTS
   ============================================ */

/* Stronger card hovers with color spread */
.glass:hover,
.glass-static:hover {
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.1) inset,
        var(--shadow-lg),
        0 0 80px rgba(96, 165, 250, 0.12),
        0 0 40px rgba(167, 139, 250, 0.08);
}

/* Pulsing accent on key elements */
@keyframes accentPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
    }
    50% {
        box-shadow: 0 0 35px rgba(96, 165, 250, 0.5);
    }
}

/* Stat value subtle glow - removed box-shadow animation that caused visual blocks */

/* Skill tag glow on hover */
.skill-tag {
    transition: all 0.3s ease;
}

.skill-tag:hover {
    background: rgba(167, 139, 250, 0.15);
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.25);
    transform: translateY(-2px);
}

/* Tech tag glow */
.tech-tag {
    transition: all 0.3s ease;
}

.tech-tag:hover {
    background: rgba(96, 165, 250, 0.15);
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.2);
}

/* ============================================
   PHASE 9: PERFORMANCE HINTS
   ============================================ */

.orb,
.hero-glow,
.custom-cursor,
.custom-cursor-dot,
.hero-particle {
    will-change: transform;
}

.project-card::before,
.project-card::after {
    will-change: transform, opacity;
}

/* Remove will-change after animation settles */
.visible,
.line-animated {
    will-change: auto;
}

/* ============================================
   MODAL STYLES
   ============================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 7, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: var(--space-lg);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: var(--space-2xl);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s var(--ease-out);
}

.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.modal-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.modal-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
}

.modal-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.modal-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group input,
.form-group select {
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: inherit;
    transition: all 0.2s ease;
}

.form-group input::placeholder {
    color: var(--text-tertiary);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    padding-right: var(--space-2xl);
}

.form-group select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-submit {
    width: 100%;
    margin-top: var(--space-sm);
}

/* ============================================
   CONTACT FORM STYLES
   ============================================ */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

@media (max-width: 600px) {
    .contact-form-row {
        grid-template-columns: 1fr;
    }
}

.contact-form textarea {
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: all 0.2s ease;
}

.contact-form textarea::placeholder {
    color: var(--text-tertiary);
}

.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-cyan);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.contact-submit-btn {
    align-self: flex-start;
    padding: var(--space-sm) var(--space-xl);
}

@media (max-width: 600px) {
    .contact-submit-btn {
        width: 100%;
    }
}

/* ============================================
   FEATURED PROJECTS SECTION (Homepage)
   ============================================ */

.featured-projects-section {
    margin-top: var(--space-3xl);
}

.featured-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

@media (max-width: 900px) {
    .featured-projects-grid {
        grid-template-columns: 1fr;
    }
}

.featured-project-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.featured-project-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: var(--space-md);
    transition: transform 0.35s var(--ease-out);
}

.featured-project-card:hover .featured-project-icon {
    transform: scale(1.08);
}

.featured-project-content {
    flex: 1;
}

.featured-project-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.featured-project-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.featured-project-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.featured-project-arrow {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    opacity: 0;
    transform: translate(-8px, 8px);
    transition: var(--transition-fast);
    color: var(--text-tertiary);
}

.featured-project-card:hover .featured-project-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

.featured-projects-cta {
    display: flex;
    justify-content: center;
    margin-top: var(--space-xl);
}