/* ============================================
   PREMIUM ANIMATIONS & EFFECTS
   ============================================ */

/* Enhanced hero blob animations */
.hero-blobs .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: blobFloat 20s infinite ease-in-out;
    mix-blend-mode: multiply;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.blob-2 {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--fire-color) 100%);
    top: 50%;
    right: -175px;
    animation-delay: 3s;
}

.blob-3 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, var(--electric-color) 0%, var(--cosmic-color) 100%);
    bottom: -150px;
    left: 30%;
    animation-delay: 6s;
}

@keyframes blobFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        border-radius: 50%;
    }
    33% {
        transform: translate3d(60px, -50px, 0) scale(1.1);
        border-radius: 42% 58% 62% 38% / 45% 55% 45% 55%;
    }
    66% {
        transform: translate3d(-40px, 60px, 0) scale(0.92);
        border-radius: 60% 40% 35% 65% / 50% 60% 40% 50%;
    }
}

/* Premium gradient animations — uses shared gradientShift keyframe */
.animated-gradient {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Shared gradient position shift — used by .animated-gradient, .gradient-text, #typing-text etc. */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Enhanced button animations */
.btn-v9 {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

.btn-v9::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-v9:hover::before {
    left: 100%;
}

.btn-v9:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 40px rgba(91, 76, 219, 0.3);
}

/* Premium card hover effects */
.minimal-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
               box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.minimal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(91, 76, 219, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.minimal-card:hover::before {
    opacity: 1;
}

.minimal-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px -15px rgba(91, 76, 219, 0.2);
}

/* Enhanced social cards */
.social-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
               box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.social-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.social-card:hover::after {
    width: 300px;
    height: 300px;
}

.social-card:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.18);
}

/* Premium loading animations */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
               visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1),
               transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.loader-content {
    text-align: center;
    color: white;
}

.loader-logo {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 2rem;
    animation: logoPulse 2s infinite;
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.loader-progress-bar {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.loader-progress {
    height: 100%;
    background: linear-gradient(90deg, #fff, #f0f0f0, #fff);
    background-size: 200% 100%;
    animation: progressShimmer 1.5s infinite;
    width: 0%;
    transition: width 0.3s;
}

@keyframes progressShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Enhanced text animations — transform/opacity only */
.hero-title-stacked .hero-line-huge {
    opacity: 0;
    transform: translateY(60px) rotateX(12deg);
    animation: titleReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title-stacked .hero-line-huge:nth-child(1) {
    animation-delay: 0.15s;
}

.hero-title-stacked .hero-line-huge:nth-child(2) {
    animation-delay: 0.35s;
}

.hero-title-stacked .hero-line-accent {
    opacity: 0;
    transform: translateY(30px);
    animation: titleAccentReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(60px) rotateX(12deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

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

/* Premium scroll indicators */
.scroll-indicator {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 50px;
    border: 2px solid var(--primary-color);
    border-radius: 25px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.scroll-indicator::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: scrollBounce 2s infinite;
}

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

/* Enhanced metric cards */
.metric-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.metric-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s;
}

.metric-card:hover::before {
    opacity: 0.3;
}

.metric-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px rgba(91, 76, 219, 0.2);
}

.metric-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(91, 76, 219, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.metric-card:hover .metric-glow {
    opacity: 1;
}

/* Premium particle effects */
.particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

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

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

/* Enhanced responsive animations */
@media (prefers-reduced-motion: no-preference) {
    .hero-blobs .blob,
    .animated-gradient,
    .btn-v9::before,
    .social-card::after,
    .loader-progress,
    .scroll-indicator::before,
    .particle {
        animation-play-state: running;
    }
}

/* ============================================
   PREMIUM ENHANCEMENTS & OPTIMIZATIONS
   ============================================ */

/* Enhanced glassmorphism effects */
.glass-enhanced {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Premium gradient text — reuses shared gradientShift keyframe */
.gradient-text-enhanced {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 8s ease infinite;
}

/* Enhanced hover states */
.hover-lift-enhanced {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-lift-enhanced:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(91, 76, 219, 0.2);
}

/* Premium loading skeleton */
.skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Enhanced focus states */
.focus-ring {
    position: relative;
}

.focus-ring:focus-visible {
    outline: none;
}

.focus-ring:focus-visible::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 3px solid var(--primary-color);
    border-radius: inherit;
    animation: focusRingPulse 1s ease-out;
}

@keyframes focusRingPulse {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Premium transitions */
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-bounce {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.transition-elastic {
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Enhanced shadows */
.shadow-premium {
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.shadow-premium-lg {
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.15),
        0 5px 15px rgba(0, 0, 0, 0.07),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Premium micro-interactions */
.micro-interaction {
    position: relative;
    overflow: hidden;
}

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

.micro-interaction:active::before {
    width: 300px;
    height: 300px;
}

/* Enhanced responsive design */
@media (max-width: 480px) {
    .blob-1, .blob-2, .blob-3 {
        width: 150px;
        height: 150px;
    }
    
    .particle {
        width: 2px;
        height: 2px;
    }
    
    .hero-title-stacked .hero-line-huge {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }
}

/* Performance optimizations */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.will-change-transform {
    will-change: transform;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .animated-gradient,
    .gradient-text-enhanced,
    .blob,
    .particle,
    .skeleton-loader {
        animation: none !important;
    }
    
    .hover-lift-enhanced:hover {
        transform: none;
    }
    
    .micro-interaction::before {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .glass-enhanced {
        background: rgba(255, 255, 255, 0.9);
        border: 2px solid var(--text-primary);
    }
    
    .gradient-text-enhanced {
        color: var(--text-primary);
        background: none;
        -webkit-text-fill-color: var(--text-primary);
    }
}


*:focus-visible {
    outline: 3px solid var(--primary-color, #5b4cdb);
    outline-offset: 2px;
    border-radius: 4px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

:root {
    /* Light Mode Color Scheme - Modern & Vibrant */
    --primary-color: #5b4cdb;
    --primary-dark: #4338ca;
    --primary-light: #7c6ef0;
    --secondary-color: #7c3aed;
    --accent-color: #e11d74;
    --electric-color: #0891b2;
    --cosmic-color: #9333ea;
    --fire-color: #e11d48;
    --sunset-color: #ea580c;
    --success-color: #059669;
    --warning-color: #d97706;
    --error-color: #dc2626;
    
    /* Light Mode Text Colors */
    --text-primary: #0c0a1d;
    --text-secondary: #2e2a4a;
    --text-tertiary: #4a4566;
    --text-light: #7c7896;
    --text-inverse: #ffffff;
    
    /* Light Mode Background Colors */
    --bg-primary: #fefeff;
    --bg-secondary: #f8f7fc;
    --bg-tertiary: #f0eef8;
    --bg-elevated: #ffffff;
    --bg-dark: #0c0a1d;
    
    /* Light Mode Border & Divider */
    --border-light: #e4e2f0;
    --border-medium: #c9c6db;
    --border-dark: #9b97b3;
    --divider: rgba(91, 76, 219, 0.12);
    
    /* Light Mode Shadows - Enhanced depth */
    --shadow-sm: 0 1px 3px 0 rgba(91, 76, 219, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px -2px rgba(91, 76, 219, 0.12), 0 2px 8px -2px rgba(91, 76, 219, 0.08);
    --shadow-lg: 0 12px 28px -4px rgba(91, 76, 219, 0.15), 0 6px 16px -6px rgba(91, 76, 219, 0.12);
    --shadow-xl: 0 24px 50px -12px rgba(91, 76, 219, 0.18), 0 12px 28px -12px rgba(124, 58, 237, 0.15);
    --shadow-2xl: 0 32px 68px -16px rgba(91, 76, 219, 0.22), 0 16px 36px -16px rgba(124, 58, 237, 0.18);
    
    /* Light Mode Gradients - More vibrant */
    --gradient-primary: linear-gradient(135deg, #5b4cdb 0%, #7c3aed 50%, #9333ea 100%);
    --gradient-electric: linear-gradient(135deg, #0891b2 0%, #0284c7 100%);
    --gradient-cosmic: linear-gradient(135deg, #9333ea 0%, #e11d74 100%);
    --gradient-fire: linear-gradient(135deg, #e11d48 0%, #ea580c 100%);
    --gradient-sunset: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);
    --gradient-ocean: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    
    --card-bg: rgba(255, 255, 255, 0.5);
    --border-color: #e4e2f0;
    
    --glass-bg: rgba(254, 254, 255, 0.85);
    --glass-border: rgba(228, 226, 240, 0.9);
    --glass-shadow: 0 8px 32px rgba(91, 76, 219, 0.12);
    
    --border-radius: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing tokens */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;

    /* Radius tokens */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Focus ring */
    --focus-ring: 3px;
}

/* ============================================
   DARK MODE THEME
   ============================================ */
[data-theme="dark"] {
    --primary-color: #8b7cf7;
    --primary-dark: #7c6ef0;
    --primary-light: #a59bfa;
    --secondary-color: #a78bfa;
    --accent-color: #f472b6;
    --electric-color: #22d3ee;
    --cosmic-color: #c084fc;
    --fire-color: #fb7185;
    --sunset-color: #fb923c;
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --error-color: #f87171;

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-light: #475569;
    --text-inverse: #0f172a;

    --bg-primary: #0b0f1a;
    --bg-secondary: #111827;
    --bg-tertiary: #1e293b;
    --bg-elevated: #1a2236;
    --bg-dark: #030712;

    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);
    --border-dark: rgba(255, 255, 255, 0.18);
    --divider: rgba(139, 124, 247, 0.12);

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.4), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 28px -4px rgba(0, 0, 0, 0.5), 0 6px 16px -6px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 24px 50px -12px rgba(0, 0, 0, 0.6), 0 12px 28px -12px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 32px 68px -16px rgba(0, 0, 0, 0.7), 0 16px 36px -16px rgba(0, 0, 0, 0.6);

    --gradient-primary: linear-gradient(135deg, #8b7cf7 0%, #a78bfa 50%, #c084fc 100%);
    --gradient-electric: linear-gradient(135deg, #22d3ee 0%, #38bdf8 100%);
    --gradient-cosmic: linear-gradient(135deg, #c084fc 0%, #f472b6 100%);
    --gradient-fire: linear-gradient(135deg, #fb7185 0%, #fb923c 100%);
    --gradient-sunset: linear-gradient(135deg, #fb923c 0%, #fbbf24 100%);
    --gradient-ocean: linear-gradient(135deg, #22d3ee 0%, #67e8f9 100%);

    --card-bg: rgba(26, 34, 54, 0.6);
    --border-color: rgba(255, 255, 255, 0.08);
    
    --glass-bg: rgba(11, 15, 26, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Dark mode component overrides */
[data-theme="dark"] body {
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

[data-theme="dark"] body::before {
    opacity: 0.15;
    mix-blend-mode: soft-light;
}

[data-theme="dark"] .lando-nav {
    background: rgba(11, 15, 26, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .lando-nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .lando-nav-link:hover {
    color: var(--primary-color);
    background: rgba(139, 124, 247, 0.1);
}

[data-theme="dark"] .lando-nav-link:hover,
[data-theme="dark"] .lando-nav-link:focus-visible,
[data-theme="dark"] .lando-nav-link.active {
    color: white;
    background: var(--gradient-primary);
}

[data-theme="dark"] .nav-cta-secondary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color);
    background: transparent !important;
}

[data-theme="dark"] .nav-cta-secondary:hover {
    background: rgba(139, 124, 247, 0.12) !important;
}

[data-theme="dark"] .lando-menu-toggle .menu-line {
    background: var(--text-primary);
}

@media (max-width: 1024px) {
    [data-theme="dark"] .lando-nav-links {
        background: rgba(11, 15, 26, 0.98);
        border-radius: 24px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 124, 247, 0.1);
    }
}

[data-theme="dark"] .stat-card {
    background: rgba(26, 34, 54, 0.6);
    border-color: var(--border-light);
}

[data-theme="dark"] .stat-card:hover {
    background: rgba(26, 34, 54, 0.85);
    border-color: rgba(139, 124, 247, 0.25);
}

[data-theme="dark"] .skill-card {
    background: rgba(26, 34, 54, 0.6);
    border-color: var(--border-light);
}

[data-theme="dark"] .skill-card:hover {
    border-color: rgba(139, 124, 247, 0.25);
}

[data-theme="dark"] .skill-bar-bg {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .project-card {
    background: rgba(26, 34, 54, 0.65);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .project-card:hover {
    background: rgba(26, 34, 54, 0.85);
    border-color: rgba(139, 124, 247, 0.3);
}

[data-theme="dark"] .project-tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

[data-theme="dark"] .project-action--outline {
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

[data-theme="dark"] .project-action--outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .project-visual__gradient {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 60%);
}

[data-theme="dark"] .timeline-card {
    background: rgba(26, 34, 54, 0.6);
    border-color: var(--border-light);
}

[data-theme="dark"] .timeline-card:hover {
    border-color: rgba(139, 124, 247, 0.2);
}

[data-theme="dark"] .timeline-skill-tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

[data-theme="dark"] .social-card {
    background: rgba(26, 34, 54, 0.6);
    border-color: var(--border-light);
}

[data-theme="dark"] .minimal-card {
    background: rgba(26, 34, 54, 0.6);
    border-color: var(--border-light);
}

[data-theme="dark"] .minimal-card:hover {
    border-color: var(--primary-color);
}

[data-theme="dark"] .minimal-skills span {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

[data-theme="dark"] .minimal-skills span:hover {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"] .quick-stats {
    background: rgba(26, 34, 54, 0.6);
    border-color: var(--border-light);
}

[data-theme="dark"] .logo-loop-item {
    background: rgba(26, 34, 54, 0.6);
    border-color: var(--border-light);
}

[data-theme="dark"] .logo-loop-item:hover {
    border-color: rgba(139, 124, 247, 0.3);
}

[data-theme="dark"] .filter-btn {
    background: var(--bg-secondary);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-secondary-v9 {
    background: rgba(26, 34, 54, 0.8);
    color: var(--text-primary);
    border-color: var(--border-light);
}

[data-theme="dark"] .btn-secondary-v9:hover {
    border-color: var(--primary-color);
    background: rgba(139, 124, 247, 0.08);
    color: var(--primary-color);
}

[data-theme="dark"] .status-badge {
    background: rgba(139, 124, 247, 0.1);
    border-color: rgba(139, 124, 247, 0.2);
}

[data-theme="dark"] .metric-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .metric-card:hover {
    border-color: rgba(139, 124, 247, 0.3);
}

[data-theme="dark"] .about-image-card {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .journey-card {
    background: rgba(26, 34, 54, 0.6);
    border-color: var(--border-light);
}

[data-theme="dark"] .journey-card:hover {
    border-color: var(--primary-color);
}

[data-theme="dark"] .contact-form-panel {
    background: rgba(26, 34, 54, 0.65);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .contact-studio-card {
    background: rgba(139, 124, 247, 0.08);
    border-color: rgba(139, 124, 247, 0.15);
}

[data-theme="dark"] .contact-social-link {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .contact-social-link:hover {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(139, 124, 247, 0.15);
}

[data-theme="dark"] .contact-availability {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .mesh-gradient {
    background:
        radial-gradient(circle at 20% 80%, rgba(139, 124, 247, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(167, 139, 250, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(244, 114, 182, 0.06) 0%, transparent 50%);
}

[data-theme="dark"] .preloader {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .blob {
    opacity: 0.15;
}

[data-theme="dark"] .hero-blobs .blob {
    mix-blend-mode: screen;
}

[data-theme="dark"] .profile-image {
    box-shadow: 0 20px 60px rgba(139, 124, 247, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .profile-image:hover {
    box-shadow: 0 35px 90px rgba(139, 124, 247, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    border-color: var(--bg-secondary);
}

[data-theme="dark"] .tech-tag-primary {
    background: rgba(139, 124, 247, 0.12);
    border-color: rgba(139, 124, 247, 0.2);
}

[data-theme="dark"] .tech-tag-secondary {
    background: rgba(167, 139, 250, 0.12);
    border-color: rgba(167, 139, 250, 0.2);
}

[data-theme="dark"] .tech-tag-accent {
    background: rgba(244, 114, 182, 0.12);
    border-color: rgba(244, 114, 182, 0.2);
}

[data-theme="dark"] .tech-tag-warm {
    background: rgba(251, 113, 133, 0.12);
    border-color: rgba(251, 113, 133, 0.2);
}

/* Modern Noise Texture */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: -1;
    opacity: 0.3;
    mix-blend-mode: overlay;
}

/* Smooth theme transitions */
body,
.lando-nav,
.stat-card,
.skill-card,
.project-card,
.timeline-card,
.social-card,
.minimal-card,
.quick-stats,
.logo-loop-item,
.filter-btn,
.btn-secondary-v9,
.status-badge,
.metric-card,
.journey-card,
.contact-form-panel,
.site-footer {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    font-family: 'Inter', 'Google Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 400;
    line-height: 1.7;
}

/* Performance optimizations */
img {
    content-visibility: auto;
}

.hero-blobs .blob,
.logo-loop-track {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Layout containment for cards (isolates paint/layout) */
.project-card,
.skill-card,
.stat-card,
.journey-card,
.social-card,
.timeline-card {
    contain: layout style;
}

/* Ensure elements are visible by default */
.reveal-fade-up,
.reveal-stagger > * {
    opacity: 1;
    transform: none;
}

/* Only hide when JS adds the class — transform/opacity only for perf */
.js-enabled .reveal-fade-up {
    opacity: 0;
    transform: translateY(40px);
}

.js-enabled .reveal-stagger > * {
    opacity: 0;
    transform: translateY(25px);
}

/* Hero elements should animate immediately on load */
.js-enabled .hero-content-v9 .reveal-fade-up,
.js-enabled .hero-content-v9 .reveal-stagger > * {
    animation: heroFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.js-enabled .hero-content-v9 .reveal-fade-up:nth-child(1) { animation-delay: 0.1s; }
.js-enabled .hero-content-v9 .reveal-fade-up:nth-child(2) { animation-delay: 0.2s; }
.js-enabled .hero-content-v9 .reveal-fade-up:nth-child(3) { animation-delay: 0.3s; }
.js-enabled .hero-content-v9 .reveal-fade-up:nth-child(4) { animation-delay: 0.4s; }
.js-enabled .hero-content-v9 .reveal-fade-up:nth-child(5) { animation-delay: 0.5s; }

.js-enabled .hero-content-v9 .reveal-stagger > *:nth-child(1) { animation-delay: 0.35s; }
.js-enabled .hero-content-v9 .reveal-stagger > *:nth-child(2) { animation-delay: 0.4s; }
.js-enabled .hero-content-v9 .reveal-stagger > *:nth-child(3) { animation-delay: 0.45s; }
.js-enabled .hero-content-v9 .reveal-stagger > *:nth-child(4) { animation-delay: 0.5s; }
.js-enabled .hero-content-v9 .reveal-stagger > *:nth-child(5) { animation-delay: 0.55s; }
.js-enabled .hero-content-v9 .reveal-stagger > *:nth-child(6) { animation-delay: 0.6s; }

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

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

body {
    font-family: 'Google Sans Flex', 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.7;
    color: var(--text-primary);
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    contain: layout style;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Google Sans Flex', 'Google Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
}

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

/* ============================================
   PILL NAVIGATION (ReactBits Style)
   ============================================ */

/* Override Materialize nav defaults */
nav {
    background-color: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
}

.lando-nav {
    position: fixed;
    top: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    backdrop-filter: blur(20px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 100px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 1200px;
    width: calc(100% - 24px);
    box-shadow: 0 4px 24px -4px rgba(91, 76, 219, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.lando-nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.lando-logo {
    display: flex;
    align-items: center;
    font-weight: 900;
    color: var(--text-primary);
    transition: var(--transition-fast);
    z-index: 10;
    padding: 0.25rem 0;
}

.lando-logo:hover {
    transform: translateY(-2px);
}

.logo-stack {
    display: flex;
    flex-direction: column;
    line-height: 0.85;
    letter-spacing: -0.02em;
}

.logo-line-top,
.logo-line-bottom {
    font-family: 'Google Sans Flex', 'Google Sans', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.logo-line-top {
    font-size: 1.125rem;
    letter-spacing: 0.02em;
}

.logo-line-bottom {
    font-size: 1.375rem;
    letter-spacing: 0.05em;
}

.lando-nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lando-nav-link {
    padding: 0.625rem 1.25rem;
    border-radius: 100px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    position: relative;
}

.lando-nav-link:hover {
    color: var(--primary-color);
    background: rgba(91, 76, 219, 0.08);
}

.lando-nav-link:hover,
.lando-nav-link:focus-visible,
.lando-nav-link.active {
    color: white;
    background: var(--gradient-primary);
    box-shadow: 0 4px 12px rgba(91, 76, 219, 0.3);
}

.lando-nav-link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Nav CTA Buttons */
.nav-cta {
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 2px solid transparent;
}

.nav-cta-primary {
    background: var(--gradient-primary) !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(91, 76, 219, 0.35);
}

.nav-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(91, 76, 219, 0.45);
}

.nav-cta-secondary {
    background: transparent !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color);
}

.nav-cta-secondary:hover {
    background: rgba(91, 76, 219, 0.1) !important;
    transform: translateY(-2px);
}

.lando-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 10;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.lando-menu-toggle:hover,
.lando-menu-toggle:focus-visible {
    background: rgba(91, 76, 219, 0.1);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.lando-menu-toggle .menu-line {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.lando-menu-toggle.active .menu-line:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.lando-menu-toggle.active .menu-line:nth-child(2) {
    opacity: 0;
}

.lando-menu-toggle.active .menu-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

@media (max-width: 1024px) {
    .lando-nav-links {
        display: flex;
        position: fixed;
        top: 80px;
        left: 12px;
        right: 12px;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.98);
        -webkit-backdrop-filter: blur(24px) saturate(200%);
        backdrop-filter: blur(24px) saturate(200%);
        padding: 2rem;
        gap: 0.5rem;
        border-radius: 24px;
        box-shadow: 0 12px 40px rgba(91, 76, 219, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.3);
        z-index: 999;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .lando-nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    /* Mobile menu backdrop */
    .lando-nav-links.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: -1;
        backdrop-filter: blur(4px);
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    
    .lando-nav-link {
        width: 100%;
        text-align: center;
        padding: 1rem 1.5rem;
        border-radius: 8px;
        transition: background-color 0.2s ease;
        min-height: 44px; /* Ensure touch target is at least 44px */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .lando-nav-link:hover,
    .lando-nav-link:focus {
        background: rgba(91, 76, 219, 0.1);
    }
    
    /* Mobile CTA styles */
    .nav-cta {
        margin-top: 0.5rem;
    }
    
    .nav-cta-primary {
        background: var(--gradient-primary) !important;
        color: white !important;
    }
    
    .nav-cta-secondary {
        border: 2px solid var(--primary-color);
    }
    
    .lando-menu-toggle {
        display: flex;
    }
}

@media (max-width: 768px) {
    .lando-nav {
        padding: 0.5rem 0;
    }
    
    .lando-nav-container {
        padding: 0.75rem 1rem;
    }
    
    .logo-line-top {
        font-size: 0.9375rem;
    }
    
    .logo-line-bottom {
        font-size: 1.125rem;
    }
}

/* Project Filters */
.project-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 100px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: 'Google Sans Flex', 'Google Sans', 'Outfit', sans-serif;
    position: relative;
    overflow: hidden;
    /* Ensure text stays above ::before gradient overlay */
    isolation: isolate;
}

.filter-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.filter-btn:hover::before,
.filter-btn.active::before {
    opacity: 1;
}

.filter-btn:hover,
.filter-btn.active {
    color: white;
    border-color: transparent;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 24px -4px rgba(91, 76, 219, 0.4);
}

.filter-btn:active {
    transform: translateY(0) scale(1);
}

/* Contact Section */
.contact-grid {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

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

.contact-availability {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 1.125rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 100px;
    width: fit-content;
}

.availability-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

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

.availability-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #10b981;
}

.contact-headline {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

@media (max-width: 768px) {
    .contact-headline {
        font-size: 1.625rem;
    }
}

.contact-intro {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
}

.contact-studio-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(91, 76, 219, 0.05);
    border: 1px solid rgba(91, 76, 219, 0.1);
    border-radius: 16px;
    transition: border-color 0.3s ease;
}

.contact-studio-card:hover {
    border-color: rgba(91, 76, 219, 0.25);
}

.studio-logo {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 12px;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.studio-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.studio-name {
    font-weight: 700;
    font-size: 0.9375rem;
}

.studio-role {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

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

.contact-detail-item i {
    width: 1.25rem;
    text-align: center;
    color: var(--primary-color);
    font-size: 1rem;
    flex-shrink: 0;
}

.contact-socials {
    display: flex;
    gap: 0.75rem;
}

.contact-social-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    font-size: 1.125rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}

.contact-social-link:hover {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px -4px rgba(91, 76, 219, 0.3);
}

/* Form Panel */
.contact-form-panel {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    padding: 2.25rem;
    box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
    .contact-form-panel {
        padding: 1.75rem;
    }
}

.contact-form-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, rgba(241, 245, 249, 0.6));
    border: 1.5px solid var(--border-light, rgba(226, 232, 240, 0.6));
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-tertiary, #94a3b8);
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(91, 76, 219, 0.1);
}

.form-input.invalid,
.form-textarea.invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.form-input.valid,
.form-textarea.valid {
    border-color: #10b981;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-height: 48px;
}

.contact-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(91, 76, 219, 0.4);
}

.contact-submit-btn.green {
    background: linear-gradient(135deg, #10b981, #059669);
}

.contact-submit-btn.disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.contact-form-note {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

/* Cursor for typing effect */
.cursor {
    display: inline-block;
    margin-left: 4px;
    font-weight: 300;
    color: var(--primary-color);
    animation: cursor-blink 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.cursor-animated {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
    font-size: 1.1em;
    text-shadow: 0 0 20px rgba(91, 76, 219, 0.5);
}

@keyframes cursor-blink {
    0%, 100% {
        opacity: 1;
        transform: scaleY(1);
    }
    50% {
        opacity: 0;
        transform: scaleY(0.8);
    }
}

/* Typing text styling */
#typing-text {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease infinite;
}

/* Base reveal classes */
.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
}

/* Magnetic Button Effect */
.magnetic-btn {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.magnetic-btn:hover {
    transform: scale(1.02);
}

.magnetic-btn:active {
    transform: scale(0.98);
}

/* Tilt Effect */
.tilt-effect {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.tilt-effect:hover {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0)) rotateY(var(--tilt-y, 0));
}

/* Parallax Layers */
.parallax-layer {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gradient Border Animation */
.animated-border {
    position: relative;
    border-radius: inherit;
}

.animated-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        45deg,
        #5b4cdb,
        #7c3aed,
        #ec4899,
        #06b6d4,
        #5b4cdb
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    background-size: 300% 300%;
}

/* Spotlight Effect — follows mouse via --spotlight-x / --spotlight-y */
.spotlight {
    position: relative;
    overflow: hidden;
}

.spotlight::before {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    left: var(--spotlight-x, 50%);
    top: var(--spotlight-y, 50%);
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(91, 76, 219, 0.12) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
    will-change: left, top;
}

.spotlight:hover::before {
    opacity: 1;
}

[data-theme="dark"] .spotlight::before {
    background: radial-gradient(
        circle,
        rgba(139, 124, 247, 0.15) 0%,
        transparent 70%
    );
}

/* Card Hover Lift */
.card-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Ripple Effect */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.ripple:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: width 0.6s, height 0.6s, opacity 0.6s;
}

/* Scroll Progress Indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gradient-primary);
    z-index: 9999;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.1s ease;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(91, 76, 219, 0.4);
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    box-shadow: 0 8px 24px rgba(91, 76, 219, 0.4);
    opacity: 1;
    visibility: visible;
    transform: translateY(-4px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
               box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
               opacity 0.3s ease;
    z-index: 1000;
}

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

.back-to-top:hover {
    transform: translateY(-10px) scale(1.12);
    box-shadow: 0 16px 36px rgba(91, 76, 219, 0.55);
}

.back-to-top:active {
    transform: translateY(-2px) scale(0.95);
}

/* Nav link underline animation */
.lando-nav-link {
    position: relative;
}

.lando-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--primary-color);
    width: 0;
    margin: 0 auto;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Hide underline when active link has gradient background */
.lando-nav-link.active::after {
    width: 0;
}

/* Print-friendly resume styles */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html, body { background: #ffffff !important; color: #000000 !important; }
  a { color: #000 !important; text-decoration: none; }
  a::after { content: " (" attr(href) ")"; font-size: 10px; }

  /* Hide decorative/interactive elements */
  .lando-nav,
  .animated-bg,
  .hero-blobs,
  .hero-cta-group,
  .hero-visual-v9,
  .logo-loop-section,
  .showcase-section,
  #projects,
  .lando-journey-section,
  .project-filters,
  .project-actions,
  .metric-glow,
  .metric-divider,
  .scroll-progress { display: none !important; }

  /* Keep core sections concise */
  #home { display: none !important; }
  #about, #skills, #experience, #contact { break-inside: avoid; page-break-inside: avoid; }
  .section { padding: 16px 0 !important; box-shadow: none !important; background: transparent !important; }
  .section-header .section-label, .section-header .section-title, .section-description { color: #000 !important; }

  /* Simplify skills visuals */
  .skill-bar-bg, .skill-bar-fill { display: none !important; }
  .skill-item-header { display: flex; justify-content: space-between; }

  /* Typography adjustments for print readability */
  h1, h2, h3 { color: #000 !important; -webkit-text-fill-color: initial !important; }
}

/* Noise Texture Overlay */
.noise-texture {
    position: relative;
}

.noise-texture::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media (max-width: 1024px) {
    .container {
        padding: 0 1.5rem;
    }
}

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

.section {
    padding: 6rem 0;
}

@media (max-width: 1024px) {
    .section {
        padding: 5rem 0;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 4rem 0;
    }
}

.section-bg-secondary {
    background-color: var(--bg-secondary);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Lando Norris Style Section Headers */
.section-number {
    display: block;
    font-family: 'Space Grotesk', 'Outfit', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

.section-label {
    display: inline-block;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 2rem;
}

.section-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.section-title-bold {
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.section-divider {
    width: 48px;
    height: 3px;
    background: var(--gradient-primary);
    margin: 0 auto;
    border-radius: 4px;
    position: relative;
}

.section-divider::after {
    content: '';
    position: absolute;
    left: 56px;
    top: 0;
    width: 8px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 4px;
    opacity: 0.5;
}

/* About Section Specific */
.about-headline {
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.about-text-clean {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    font-weight: 400;
}

@media (max-width: 768px) {
    .section-header {
        margin-bottom: 3rem;
    }
    
    .section-title-bold {
        font-size: clamp(2.25rem, 8vw, 3.5rem);
    }
    
    .about-headline {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px -2px rgba(91, 76, 219, 0.3);
    transition: var(--transition-fast);
}

.section-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -2px rgba(91, 76, 219, 0.4);
}

.section-title {
    font-size: clamp(2.25rem, 5vw, 3rem);
    margin-bottom: 1.25rem;
    letter-spacing: -0.03em;
    font-weight: 800;
    line-height: 1.15;
}

@media (max-width: 768px) {
    .section-title {
        font-size: clamp(1.875rem, 4vw, 2.25rem);
    }
}

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

@media (max-width: 768px) {
    .section-description {
        font-size: 1rem;
        line-height: 1.7;
    }
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
}

/* Skip Link - Enhanced Accessibility */
.skip-link {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    color: white;
    padding: 1rem 2rem;
    z-index: 10000;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 0 12px 12px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: none;
}

/* SVG Gradient Stops */
.gradient-stop-start {
    stop-color: #5b4cdb;
    stop-opacity: 1;
}

.gradient-stop-end {
    stop-color: #7c3aed;
    stop-opacity: 1;
}

/* Hero Section */
.hero-v9 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 100px 0 80px;
}

.hero-container-v9 {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 5rem;
    align-items: center;
}

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

@media (max-width: 1280px) {
    .hero-grid {
        gap: 4rem;
    }
}

.hero-visual-v9 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.visual-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    background: rgba(91, 76, 219, 0.08);
    border: 1px solid rgba(91, 76, 219, 0.15);
    border-radius: 100px;
    margin-bottom: 2rem;
    position: relative;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px -2px rgba(91, 76, 219, 0.1);
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Hero Title - Lando Norris Bold Stacked Style */
.hero-title-stacked {
    margin-bottom: 2rem;
    line-height: 0.88;
    letter-spacing: -0.03em;
}

.hero-line-huge {
    display: block;
    font-family: 'Space Grotesk', 'Outfit', 'Inter', -apple-system, sans-serif;
    font-size: clamp(3.5rem, 9vw, 8rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}

.hero-line-accent {
    display: block;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.hero-description-clean {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 600px;
    margin-bottom: 2.5rem;
    font-weight: 400;
}



.hero-metrics {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .hero-metrics {
        gap: 1.5rem;
    }
}

.metric-card {
    position: relative;
    text-align: center;
    min-width: 100px;
    padding: 1.5rem 1.25rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.metric-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(91, 76, 219, 0.3);
    box-shadow: 0 8px 32px -4px rgba(91, 76, 219, 0.3);
}

.metric-card:hover::before {
    opacity: 0.05;
}

.metric-number {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    position: relative;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-shadow: 0 2px 20px rgba(91, 76, 219, 0.3);
    filter: drop-shadow(0 2px 8px rgba(91, 76, 219, 0.2));
}

.metric-card:hover .metric-number {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 12px rgba(91, 76, 219, 0.35));
}

.metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.metric-card:hover .metric-label {
    color: var(--text-secondary);
}

.metric-divider {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--border-light), transparent);
    align-self: center;
}

.hero-cta-group {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 768px) {
    .hero-cta-group {
        gap: 1rem;
        margin-bottom: 2.5rem;
    }
}

.btn-v9 {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 2.5rem;
    border-radius: 100px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: var(--transition-fast);
    font-size: 1rem;
    letter-spacing: -0.011em;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .btn-v9 {
        padding: 1rem 2rem;
        font-size: 0.9375rem;
    }
}

.btn-primary-v9 {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 12px -2px rgba(91, 76, 219, 0.25);
}

.btn-primary-v9:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(91, 76, 219, 0.3);
}

.btn-secondary-v9 {
    background: rgba(254, 254, 255, 0.8);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.btn-secondary-v9:hover {
    border-color: var(--primary-color);
    background: rgba(91, 76, 219, 0.06);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -4px rgba(91, 76, 219, 0.12);
}

/* Button Content & Icon Animations */
.btn-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-text {
    font-weight: 600;
    letter-spacing: -0.011em;
}

.btn-icon {
    font-size: 1.125rem;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-v9:hover .btn-icon {
    transform: translateX(3px);
}

.btn-secondary-v9:hover .btn-icon {
    transform: translateX(3px);
}

/* ========================================
   Let's Connect - Social Cards Section
   ======================================== */

.hero-connect-section {
    margin-top: 3rem;
    width: 100%;
}

.connect-header {
    margin-bottom: 2rem;
    text-align: left;
}

.connect-title {
    font-size: clamp(1.5rem, 2vw, 1.75rem);
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.connect-subtitle {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.social-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
}

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

@media (max-width: 768px) {
    .social-cards-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
}

.social-card {
    position: relative;
    padding: 1.5rem;
    border-radius: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
}

.social-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.social-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -8px rgba(91, 76, 219, 0.25);
    border-color: rgba(91, 76, 219, 0.3);
}

.social-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -8px rgba(91, 76, 219, 0.25);
    border-color: var(--primary-color);
    outline: none;
}

.social-card:hover::before {
    opacity: 1;
}

.social-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-card:hover .social-card-icon {
    transform: scale(1.1) rotate(-5deg);
}

.social-card-content {
    flex: 1;
}

.social-card-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.social-card-handle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.social-card-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(91, 76, 219, 0.1);
    color: #5b4cdb;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-card:hover .social-card-arrow {
    transform: translate(4px, -4px);
    background: rgba(91, 76, 219, 0.2);
}

/* Platform-Specific Card Variants */
.github-card .social-card-icon {
    background: linear-gradient(135deg, #24292e 0%, #000000 100%);
    color: white;
}

.github-card:hover {
    box-shadow: 0 12px 32px -8px rgba(36, 41, 46, 0.3);
    border-color: rgba(36, 41, 46, 0.4);
}

.linkedin-card .social-card-icon {
    background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
    color: white;
}

.linkedin-card:hover {
    box-shadow: 0 12px 32px -8px rgba(0, 119, 181, 0.3);
    border-color: rgba(0, 119, 181, 0.4);
}

.linkedin-card .social-card-arrow {
    background: rgba(0, 119, 181, 0.1);
    color: #0077b5;
}

.linkedin-card:hover .social-card-arrow {
    background: rgba(0, 119, 181, 0.2);
}

.behance-card .social-card-icon {
    background: linear-gradient(135deg, #1769ff 0%, #0056d2 100%);
    color: white;
}

.behance-card:hover {
    box-shadow: 0 12px 32px -8px rgba(23, 105, 255, 0.3);
    border-color: rgba(23, 105, 255, 0.4);
}

.behance-card .social-card-arrow {
    background: rgba(23, 105, 255, 0.1);
    color: #1769ff;
}

.behance-card:hover .social-card-arrow {
    background: rgba(23, 105, 255, 0.2);
}

.youtube-card .social-card-icon {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    color: white;
}

.youtube-card:hover {
    box-shadow: 0 12px 32px -8px rgba(255, 0, 0, 0.3);
    border-color: rgba(255, 0, 0, 0.4);
}

.youtube-card .social-card-arrow {
    background: rgba(255, 0, 0, 0.1);
    color: #ff0000;
}

.youtube-card:hover .social-card-arrow {
    background: rgba(255, 0, 0, 0.2);
}

.instagram-card .social-card-icon {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.instagram-card:hover {
    box-shadow: 0 12px 32px -8px rgba(225, 48, 108, 0.3);
    border-color: rgba(225, 48, 108, 0.4);
}

.instagram-card .social-card-arrow {
    background: rgba(225, 48, 108, 0.1);
    color: #e1306c;
}

.instagram-card:hover .social-card-arrow {
    background: rgba(225, 48, 108, 0.2);
}

.x-card .social-card-icon {
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    color: white;
}

.x-card:hover {
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 0, 0, 0.4);
}

.x-card .social-card-arrow {
    background: rgba(0, 0, 0, 0.1);
    color: #000000;
}

.x-card:hover .social-card-arrow {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .x-card .social-card-icon {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    color: #000;
}

[data-theme="dark"] .x-card:hover {
    box-shadow: 0 12px 32px -8px rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .x-card .social-card-arrow {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

[data-theme="dark"] .x-card:hover .social-card-arrow {
    background: rgba(255, 255, 255, 0.2);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .hero-connect-section {
        margin-top: 2.5rem;
    }

    .connect-header {
        margin-bottom: 1.5rem;
    }

    .social-card {
        padding: 1.25rem;
    }

    .social-card-icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .social-card-arrow {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }
}

.hero-visual-v9 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    padding-top: 2rem;
}

/* Simple GitHub Profile Image */
.profile-image-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-image {
    width: 380px;
    height: 380px;
    border-radius: 24px;
    object-fit: cover;
    box-shadow: 0 20px 60px rgba(91, 76, 219, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.profile-image:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 35px 90px rgba(91, 76, 219, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.2);
}

.profile-ring {
    position: absolute;
    inset: -6px;
    border-radius: 28px;
    background: conic-gradient(from 0deg, #5b4cdb, #7c3aed, #ec4899, #06b6d4, #a855f7, #5b4cdb);
    opacity: 0.6;
    transition: opacity 0.4s;
    animation: rotate 6s linear infinite;
    z-index: 1;
    filter: blur(1px);
    will-change: transform;
}

.profile-image-container:hover .profile-ring {
    opacity: 1;
    filter: blur(0px);
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.profile-image-v9 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scroll-indicator-v9 {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.scroll-icon {
    width: 30px;
    height: 50px;
    border: 2px solid var(--text-light);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.scroll-wheel {
    width: 4px;
    height: 8px;
    background: var(--text-light);
    border-radius: 2px;
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% { 
        transform: translateY(0); 
        opacity: 1; 
    }
    50% {
        opacity: 0.5;
    }
    100% { 
        transform: translateY(15px); 
        opacity: 0; 
    }
}

.scroll-label {
    font-size: 0.875rem;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.scroll-indicator:hover .scroll-label {
    color: var(--primary-color);
    transform: translateY(2px);
}

/* About Section */
.about-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 5rem;
    align-items: center;
}

@media (max-width: 1024px) {
    .about-grid {
        gap: 3rem;
    }
}

.about-text-lg {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    line-height: 1.65;
}

@media (max-width: 768px) {
    .about-text-lg {
        font-size: 1.125rem;
    }
}

.about-text-md {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.75;
}

@media (max-width: 768px) {
    .about-text-md {
        font-size: 1rem;
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    margin: 2.5rem 0;
}

@media (max-width: 768px) {
    .stats-grid {
        gap: 1.25rem;
        margin: 2rem 0;
    }
}

.stat-card {
    text-align: center;
    padding: 2.25rem 1.75rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-fast);
    border: 1px solid var(--border-light);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.stat-card:hover::before {
    opacity: 0.04;
}

.stat-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px -10px rgba(91, 76, 219, 0.22);
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(91, 76, 219, 0.25);
}

.stat-number {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 0.625rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(91, 76, 219, 0.25));
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tech-tag {
    padding: 0.625rem 1.125rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.tech-tag::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tech-tag:hover {
    transform: translateY(-4px) scale(1.08);
}

.tech-tag:hover::before {
    opacity: 1;
}

.tech-tag-primary {
    background: rgba(91, 76, 219, 0.1);
    color: var(--primary-color);
    border-color: rgba(91, 76, 219, 0.15);
}

.tech-tag-primary:hover {
    background: rgba(91, 76, 219, 0.2);
    box-shadow: 0 8px 20px -4px rgba(91, 76, 219, 0.35);
    border-color: rgba(91, 76, 219, 0.3);
}

.tech-tag-secondary {
    background: rgba(139, 92, 246, 0.1);
    color: var(--secondary-color);
    border-color: rgba(139, 92, 246, 0.15);
}

.tech-tag-secondary:hover {
    background: rgba(139, 92, 246, 0.15);
    box-shadow: 0 4px 8px -2px rgba(139, 92, 246, 0.2);
}

.tech-tag-accent {
    background: rgba(236, 72, 153, 0.1);
    color: var(--accent-color);
    border-color: rgba(236, 72, 153, 0.15);
}

.tech-tag-accent:hover {
    background: rgba(236, 72, 153, 0.15);
    box-shadow: 0 4px 8px -2px rgba(236, 72, 153, 0.2);
}

.tech-tag-warm {
    background: rgba(244, 63, 94, 0.1);
    color: var(--fire-color);
    border-color: rgba(244, 63, 94, 0.15);
}

.tech-tag-warm:hover {
    background: rgba(244, 63, 94, 0.15);
    box-shadow: 0 4px 8px -2px rgba(244, 63, 94, 0.2);
}

.about-image-wrapper {
    display: flex;
    justify-content: center;
}

.about-image-card {
    width: 100%;
    max-width: 420px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2xl), 0 0 40px rgba(139, 124, 247, 0.15);
    border: 2px solid transparent;
    background-image: linear-gradient(var(--bg-primary), var(--bg-primary)), linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: var(--transition);
    position: relative;
}

.about-image-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(139, 124, 247, 0.08), transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.about-image-card:hover {
    box-shadow: 0 32px 64px -16px rgba(91, 76, 219, 0.3), 0 0 60px rgba(139, 124, 247, 0.2);
    transform: translateY(-6px);
}

.about-image {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.about-image-card:hover .about-image {
    transform: scale(1.05);
}

/* Skills Section */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
}

@media (max-width: 768px) {
    .skills-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

.skill-card {
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
               box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
               border-color 0.35s ease;
    border: 1px solid var(--border-light);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.skill-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 24px 52px -14px rgba(91, 76, 219, 0.22);
    border-color: rgba(91, 76, 219, 0.25);
}

.skill-card:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px -12px rgba(91, 76, 219, 0.25);
    border-color: var(--primary-color);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.skill-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.skill-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.625rem;
    color: white;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15);
}

.skill-icon-primary {
    background: var(--gradient-primary);
}

.skill-icon-secondary {
    background: var(--gradient-electric);
}

.skill-icon-electric {
    background: var(--gradient-electric);
}

.skill-icon-sunset {
    background: var(--gradient-fire);
}

.skill-icon-cosmic {
    background: var(--gradient-cosmic);
}

.skill-icon-fire {
    background: var(--gradient-fire);
}

.skill-title {
    font-weight: 700;
    font-size: 1.125rem;
}

.skill-count {
    font-size: 0.875rem;
    color: var(--text-light);
}

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

.skill-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.skill-name {
    font-weight: 500;
}

.skill-level {
    font-size: 0.875rem;
    color: var(--text-light);
}

.skill-bar-bg {
    height: 8px;
    background: rgba(226, 232, 240, 0.6);
    border-radius: 100px;
    overflow: hidden;
}

.skill-bar-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.2);
    position: relative;
}

.skill-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 60%, rgba(255, 255, 255, 0.4) 100%);
    animation: skillGlow 2s ease-in-out infinite;
    animation-play-state: paused;
}

.skill-card:hover .skill-bar-fill::after {
    animation-play-state: running;
}

@keyframes skillGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

.skill-bar-primary {
    background: var(--gradient-primary);
}

.skill-bar-secondary {
    background: var(--gradient-electric);
}

.skill-bar-electric {
    background: var(--gradient-electric);
}

.skill-bar-sunset {
    background: var(--gradient-fire);
}

.skill-bar-cosmic {
    background: var(--gradient-cosmic);
}

.skill-bar-fire {
    background: var(--gradient-fire);
}

.skill-width-90 { width: 90%; }
.skill-width-85 { width: 85%; }
.skill-width-82 { width: 82%; }
.skill-width-95 { width: 95%; }
.skill-width-80 { width: 80%; }
.skill-width-75 { width: 75%; }
.skill-width-88 { width: 88%; }
.skill-width-83 { width: 83%; }
.skill-width-86 { width: 86%; }
.skill-width-78 { width: 78%; }

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.project-hero {
    grid-column: span 2;
    grid-row: span 2;
}

.project-hero__layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

.project-hero__layout .project-visual {
    height: 100%;
    min-height: 420px;
}

.project-hero__layout .project-body {
    padding: 2.25rem 2.5rem;
    justify-content: center;
}

.project-hero__layout .project-title {
    font-size: 1.75rem;
}

.project-hero__layout .project-desc {
    font-size: 0.9375rem;
}

@media (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .project-hero {
        grid-column: span 2;
        grid-row: span 1;
    }
    .project-hero__layout {
        grid-template-columns: 1fr;
    }
    .project-hero__layout .project-visual {
        min-height: 240px;
    }
}

@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .project-hero {
        grid-column: span 1;
    }
    .project-hero__layout {
        grid-template-columns: 1fr;
    }
    .project-hero__layout .project-visual {
        min-height: 200px;
    }
    .project-hero__layout .project-body {
        padding: 1.5rem 1.75rem;
    }
}

/* Project Card */
.project-card {
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.project-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent 30%, rgba(91, 76, 219, 0.3) 70%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

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

.project-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 28px 56px -14px rgba(91, 76, 219, 0.18);
    border-color: rgba(91, 76, 219, 0.25);
    background: rgba(255, 255, 255, 0.85);
}

.project-card:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 28px 56px -12px rgba(91, 76, 219, 0.2);
    border-color: var(--primary-color);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Visual Area */
.project-visual {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.project-visual__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.project-visual__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, transparent 50%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.project-card:hover .project-visual__gradient {
    opacity: 0.7;
}

/* Badges */
.project-badges {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.project-badge {
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid transparent;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.badge-live {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.2);
}

.badge-featured {
    background: rgba(91, 76, 219, 0.15);
    color: var(--primary-color);
    border-color: rgba(91, 76, 219, 0.2);
}

.badge-active {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.2);
}

.badge-new {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.2);
}

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

@media (max-width: 768px) {
    .project-body {
        padding: 1.25rem 1.5rem 1.5rem;
    }
}

.project-category {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-color);
    margin-bottom: 0.625rem;
}

.project-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
}

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

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

.project-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(241, 245, 249, 0.8);
    border-radius: 100px;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    font-weight: 600;
    border: 1px solid rgba(226, 232, 240, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Action Buttons */
.project-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: auto;
}

.project-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5625rem 1.25rem;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-height: 44px;
}

.project-action--primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 2px 8px -2px rgba(91, 76, 219, 0.3);
}

.project-action--primary:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px -4px rgba(91, 76, 219, 0.4);
}

.project-action--outline {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--border-medium, rgba(226, 232, 240, 0.8));
}

.project-action--outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.project-action:active {
    transform: scale(0.97);
}

/* Experience Section */
.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gradient-primary);
}

.timeline-items {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.timeline-item {
    display: flex;
    gap: 2rem;
}

.timeline-dot {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.2);
}

.timeline-dot-primary {
    background: var(--gradient-primary);
}

.timeline-dot-secondary {
    background: var(--gradient-electric);
}

.timeline-dot-electric {
    background: var(--gradient-electric);
}

.timeline-dot-sunset {
    background: var(--gradient-fire);
}

.timeline-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius-lg);
    padding: 2.25rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
               box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
               border-color 0.35s ease;
    border: 1px solid var(--border-light);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.timeline-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.timeline-card:hover::before {
    opacity: 1;
}

.timeline-card:hover {
    transform: translateX(10px) scale(1.01);
    box-shadow: 0 24px 48px -10px rgba(91, 76, 219, 0.22);
    border-color: rgba(91, 76, 219, 0.25);
}

.timeline-date {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    border: 1px solid transparent;
}

.timeline-date-primary {
    background: rgba(91, 76, 219, 0.1);
    color: var(--primary-color);
    border-color: rgba(91, 76, 219, 0.15);
}

.timeline-date-secondary {
    background: rgba(6, 182, 212, 0.1);
    color: var(--electric-color);
    border-color: rgba(6, 182, 212, 0.15);
}

.timeline-date-accent {
    background: rgba(236, 72, 153, 0.1);
    color: var(--accent-color);
    border-color: rgba(236, 72, 153, 0.15);
}

.timeline-date-warm {
    background: rgba(244, 63, 94, 0.1);
    color: var(--fire-color);
    border-color: rgba(244, 63, 94, 0.15);
}

.timeline-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.timeline-company {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

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

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

.timeline-skill-tag {
    padding: 0.375rem 0.875rem;
    background: rgba(241, 245, 249, 0.8);
    border-radius: 100px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    border: 1px solid rgba(226, 232, 240, 0.6);
}

/* Contact Section */
.contact-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.social-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-secondary);
    font-size: 1.375rem;
    transition: var(--transition-fast);
    border: 1px solid var(--border-light);
}

.social-icon:hover {
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 16px -4px rgba(91, 76, 219, 0.3);
    border-color: transparent;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-left {
        flex-direction: column;
    }
    
    .footer-text {
        max-width: 100%;
    }
}

/* Background Elements */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
}

.mesh-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(91, 76, 219, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
}

/* Hero Blobs */
.hero-blobs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.1;
    transform: translate3d(0, 0, 0);
}

.blob-1 {
    width: 300px;
    height: 300px;
    background: var(--primary-color);
    top: 10%;
    left: 10%;
}

.blob-2 {
    width: 400px;
    height: 400px;
    background: var(--secondary-color);
    top: 50%;
    right: 10%;
}

.blob-3 {
    width: 250px;
    height: 250px;
    background: var(--accent-color);
    bottom: 10%;
    left: 20%;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-v9 {
        padding: 80px 0 60px;
    }
    
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .hero-visual-v9 {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .profile-image {
        width: 350px;
        height: 350px;
    }
    
    .profile-ring {
        inset: -6px;
        border-radius: 26px;
    }
    
    .hero-title-v9 {
        font-size: 3.5rem;
    }
    
    .hero-description-v9 {
        max-width: 100%;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
    }
    
    .footer-middle {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background: var(--bg-primary);
        flex-direction: column;
        padding: 2rem;
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .mobile-toggle {
        display: flex;
    }

    .mobile-toggle.active .toggle-bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-toggle.active .toggle-bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-toggle.active .toggle-bar:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    .profile-image {
        width: 280px;
        height: 280px;
    }
    
    .profile-ring {
        inset: -5px;
        border-radius: 24px;
    }
    
    .hero-v9 {
        padding: 60px 0 40px;
    }
    
    .hero-container-v9 {
        padding: 0 1.5rem;
    }
    
    .hero-grid {
        gap: 2rem;
    }

    .hero-title-v9 {
        font-size: 2.5rem;
        margin-bottom: 1.25rem;
    }
    
    .hero-description-v9 {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .hero-metrics {
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .metric-card {
        min-width: auto;
    }
    
    .metric-number {
        font-size: 1.75rem;
    }
    
    .metric-label {
        font-size: 0.75rem;
    }
    
    .metric-divider {
        display: none;
    }

    .hero-cta-group {
        flex-direction: row;
        margin-bottom: 2rem;
    }
    
    .btn-v9 {
        flex: 1;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 0.9375rem;
    }
    
    .hero-social-v9 {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
    }

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

    .timeline-item {
        flex-direction: column;
        gap: 1rem;
    }

    .timeline-line {
        left: 30px;
    }

    .footer-middle {
        grid-template-columns: 1fr;
    }

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

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

/* Bubble Menu Styles - REMOVED (duplicate navigation) */
.bubble-menu {
    display: none !important;
}

.bubble-menu.fixed {
    display: none !important;
}

.bubble-menu.absolute {
    position: absolute;
}

.bubble-menu .bubble {
    --bubble-size: 48px;
    width: var(--bubble-size);
    height: var(--bubble-size);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(91, 76, 219, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    cursor: pointer;
}

.bubble-menu .bubble:hover,
.bubble-menu .bubble:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(91, 76, 219, 0.15);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}



.bubble-menu .logo-bubble {
    width: auto;
    min-height: var(--bubble-size);
    height: var(--bubble-size);
    padding: 0 16px;
    border-radius: calc(var(--bubble-size) / 2);
    gap: 8px;
}

.bubble-menu .toggle-bubble {
    width: var(--bubble-size);
    height: var(--bubble-size);
}

.bubble-menu .bubble-logo {
    max-height: 60%;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.bubble-menu .logo-content {
    --logo-max-height: 60%;
    --logo-max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 100%;
}

.bubble-menu .logo-content > .bubble-logo,
.bubble-menu .logo-content > img,
.bubble-menu .logo-content > svg {
    max-height: var(--logo-max-height);
    max-width: var(--logo-max-width);
}

.bubble-menu .logo-content svg {
    animation: rotateText 20s linear infinite;
}

@keyframes rotateText {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.bubble-menu .menu-btn {
    border: none;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 100%;
    height: 100%;
}

.bubble-menu .menu-line {
    width: 26px;
    height: 2px;
    background: #111;
    border-radius: 2px;
    display: block;
    margin: 0 auto;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
    transform-origin: center;
}

.bubble-menu .menu-line + .menu-line {
    margin-top: 6px;
}

.bubble-menu .menu-btn.open .menu-line:first-child {
    transform: translateY(4px) rotate(45deg);
}

.bubble-menu .menu-btn.open .menu-line:nth-child(2) {
    opacity: 0;
}

.bubble-menu .menu-btn.open .menu-line:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

@media (min-width: 768px) {
    .bubble-menu .bubble {
        --bubble-size: 56px;
    }

    .bubble-menu .logo-bubble {
        padding: 0 16px;
    }
}

/* Bubble Menu Items - REMOVED (duplicate navigation) */
.bubble-menu-items {
    display: none !important;
}

.bubble-menu-items.active {
    display: none !important;
}

.bubble-menu-items.fixed {
    position: fixed;
}

.bubble-menu-items.absolute {
    position: absolute;
}

.bubble-menu-items .pill-list {
    list-style: none;
    margin: 0;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: 4px;
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    pointer-events: auto;
    justify-content: stretch;
}

.bubble-menu-items .pill-list .pill-spacer {
    width: 100%;
    height: 0;
    pointer-events: none;
}

.bubble-menu-items .pill-list .pill-col {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex: 0 0 calc(100% / 3);
    box-sizing: border-box;
}

.bubble-menu-items .pill-list .pill-col:nth-child(4):nth-last-child(2) {
    margin-left: calc(100% / 6);
}

.bubble-menu-items .pill-list .pill-col:nth-child(4):last-child {
    margin-left: calc(100% / 3);
}

.bubble-menu-items .pill-link {
    --pill-bg: #ffffff;
    --pill-color: #111;
    --pill-border: rgba(0, 0, 0, 0.12);
    --item-rot: 0deg;
    --pill-min-h: 160px;
    --hover-bg: #f3f4f6;
    --hover-color: #111;
    width: 100%;
    min-height: var(--pill-min-h);
    padding: clamp(1.5rem, 3vw, 8rem) 0;
    font-size: clamp(1.5rem, 4vw, 4rem);
    font-weight: 400;
    line-height: 1.2;
    border-radius: 999px;
    background: var(--pill-bg);
    color: var(--pill-color);
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}

@media (min-width: 900px) {
    .bubble-menu-items .pill-link {
        transform: rotate(var(--item-rot));
    }

    .bubble-menu-items .pill-link:hover {
        transform: rotate(var(--item-rot)) scale(1.06);
        background: var(--hover-bg);
        color: var(--hover-color);
    }

    .bubble-menu-items .pill-link:active {
        transform: rotate(var(--item-rot)) scale(0.94);
    }
}

.bubble-menu-items .pill-link .pill-label {
    display: inline-block;
    height: 1.2em;
    line-height: 1.2;
}

/* Custom styles for each pill */
.bubble-menu-items .pill-link:nth-child(1) {
    --item-rot: -4deg;
    --hover-bg: #f0f4ff;
    --hover-color: #5b4cdb;
}

.bubble-menu-items .pill-col:nth-child(2) .pill-link {
    --item-rot: 2deg;
    --hover-bg: #fef3f2;
    --hover-color: #ec4899;
}

.bubble-menu-items .pill-col:nth-child(3) .pill-link {
    --item-rot: -3deg;
    --hover-bg: #f5f3ff;
    --hover-color: #7c3aed;
}

.bubble-menu-items .pill-col:nth-child(5) .pill-link {
    --item-rot: 3deg;
    --hover-bg: #ecfeff;
    --hover-color: #06b6d4;
}

.bubble-menu-items .pill-col:nth-child(6) .pill-link {
    --item-rot: -2deg;
    --hover-bg: #fff7ed;
    --hover-color: #f97316;
}

.bubble-menu-items .pill-col:nth-child(7) .pill-link {
    --item-rot: 4deg;
    --hover-bg: #f0fdf4;
    --hover-color: #10b981;
}

@media (max-width: 899px) {
    .bubble-menu-items {
        padding-top: 0px;
        align-items: flex-start;
        padding-top: 120px;
    }

    .bubble-menu-items .pill-list {
        row-gap: 16px;
    }

    .bubble-menu-items .pill-list .pill-col {
        flex: 0 0 100%;
        margin-left: 0 !important;
        overflow: visible;
    }

    .bubble-menu-items .pill-link {
        font-size: clamp(1.2rem, 3vw, 4rem);
        padding: clamp(1rem, 2vw, 2rem) 0;
        min-height: 80px;
    }

    .bubble-menu-items .pill-link:hover {
        transform: scale(1.06);
        background: var(--hover-bg);
        color: var(--hover-color);
    }

    .bubble-menu-items .pill-link:active {
        transform: scale(0.94);
    }
}

/* Logo Loop Animation Section */
.logo-loop-section {
    overflow: hidden;
    padding: 5rem 0;
}

.logo-loop-container {
    width: 100%;
    overflow: hidden;
    margin-top: 4rem;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-loop-track {
    display: flex;
    gap: 4rem;
    animation: logoLoop 30s linear infinite;
    width: fit-content;
}

.logo-loop-track:hover {
    animation-play-state: paused;
}

.logo-loop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 3rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-light);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    min-width: 180px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.logo-loop-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.logo-loop-item:hover::before {
    opacity: 0.04;
}

.logo-loop-item:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 20px 40px -8px rgba(91, 76, 219, 0.25);
    border-color: rgba(91, 76, 219, 0.25);
}

.logo-loop-item i {
    font-size: 3.5rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.3s ease;
}

.logo-loop-item img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo-loop-item:hover i,
.logo-loop-item:hover img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.logo-loop-item span {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

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

/* ============================================
   SHOWCASE SECTION (NEW)
   ============================================ */
.showcase-section {
    padding: 7rem 0;
    position: relative;
}

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

/* Showcase Cards */
.showcase-card {
    background: var(--bg-elevated);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.showcase-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(91, 76, 219, 0.2);
    border-color: var(--primary-color);
}

/* Featured Card - Spans 2 columns */
.showcase-featured {
    grid-column: span 2;
}

/* Image Container */
.showcase-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.showcase-featured .showcase-image {
    height: 350px;
}

.showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-card:hover .showcase-image img {
    transform: scale(1.1);
}

.showcase-overlay {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.showcase-badge {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.showcase-badge-featured {
    background: rgba(91, 76, 219, 0.9);
    color: white;
}

.showcase-badge-video {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

.showcase-badge-design {
    background: rgba(236, 72, 153, 0.9);
    color: white;
}

.showcase-badge-code {
    background: rgba(6, 182, 212, 0.9);
    color: white;
}

/* Play Button */
.showcase-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
}

.showcase-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: white;
}

/* Content */
.showcase-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.showcase-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.showcase-tag {
    padding: 0.375rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.showcase-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.showcase-title-sm {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.showcase-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex: 1;
}

/* Stats Row */
.showcase-stats {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-light);
    margin-bottom: 1.5rem;
}

.showcase-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.showcase-stat i {
    color: var(--primary-color);
}

/* Link Button */
.showcase-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.showcase-link:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(91, 76, 219, 0.4);
}

/* Stats Grid Card */
.showcase-stats {
    grid-column: span 2;
}

.showcase-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Skills/Tech Grid Card */
.showcase-skills {
    background: var(--gradient-primary);
    color: white;
}

.showcase-skills .showcase-title-sm {
    color: white;
}

.showcase-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.tech-item {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.tech-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
}

.tech-item::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    padding: 0.375rem 0.75rem;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.tech-item:hover::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ============================================
   MINIMAL SHOWCASE SECTION
   ============================================ */
.minimal-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.minimal-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.minimal-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from 180deg, transparent 50%, var(--primary-color) 70%, var(--secondary-color) 85%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

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

.minimal-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 16px 40px rgba(91, 76, 219, 0.12);
}

.minimal-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    margin-bottom: 1.5rem;
    position: relative;
}

.minimal-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    background: var(--gradient-primary);
    opacity: 0.2;
    filter: blur(8px);
    z-index: -1;
    transition: opacity 0.3s ease;
}

.minimal-card:hover .minimal-icon::after {
    opacity: 0.4;
}

.minimal-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

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

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

.minimal-skills span {
    padding: 0.375rem 0.875rem;
    background: var(--bg-secondary);
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.minimal-skills span:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* Quick Stats Bar */
.quick-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 4rem;
    padding: 2.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
}

.quick-stat-item {
    text-align: center;
}

.quick-stat-number {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 2px 10px rgba(91, 76, 219, 0.3));
    letter-spacing: -0.02em;
}

.quick-stat-label {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.quick-stat-divider {
    width: 1px;
    height: 50px;
    background: var(--border-light);
}

/* Responsive */
@media (max-width: 1024px) {
    .showcase-featured,
    .showcase-stats {
        grid-column: span 1;
    }
    
    .minimal-showcase-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .showcase-grid {
        grid-template-columns: 1fr;
    }
    
    .showcase-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .showcase-tech-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    
    .minimal-showcase-grid {
        grid-template-columns: 1fr;
    }
    
    .minimal-card {
        padding: 2rem;
    }
    
    .quick-stats {
        flex-wrap: wrap;
        gap: 2rem;
        padding: 2rem;
    }
    
    .quick-stat-divider {
        display: none;
    }
    
    .quick-stat-number {
        font-size: 2rem;
    }
    
    .tech-item {
        font-size: 1.5rem;
    }
}

/* ============================================
   MICRO-INTERACTIONS & ANIMATIONS
   ============================================ */

/* Slide In Animation */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in {
    animation: slide-in 0.8s ease-out forwards;
}

.animate-slide-in:nth-child(1) {
    animation-delay: 0.1s;
}

.animate-slide-in:nth-child(2) {
    animation-delay: 0.2s;
}

.animate-slide-in:nth-child(3) {
    animation-delay: 0.3s;
}

/* Scale Animation */
@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale {
    animation: scale-in 0.6s ease-out forwards;
}

.animate-scale:nth-child(1) {
    animation-delay: 0.1s;
}

.animate-scale:nth-child(2) {
    animation-delay: 0.2s;
}

.animate-scale:nth-child(3) {
    animation-delay: 0.3s;
}

.animate-scale:nth-child(4) {
    animation-delay: 0.4s;
}

/* Card Animation */
@keyframes card-enter {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-card {
    animation: card-enter 0.8s ease-out forwards;
}

.animate-card:nth-child(1) {
    animation-delay: 0.1s;
}

.animate-card:nth-child(2) {
    animation-delay: 0.2s;
}

.animate-card:nth-child(3) {
    animation-delay: 0.3s;
}

.animate-card:nth-child(4) {
    animation-delay: 0.4s;
}

/* Hover Lift Effect */
.hover-lift {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(91, 76, 219, 0.2);
}

/* Smooth Transitions for Interactive Elements */
.minimal-card,
.stat-card,
.skill-card,
.project-card,
.timeline-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced Icon Animation */
.minimal-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.minimal-card:hover .minimal-icon {
    transform: scale(1.1);
}

/* Skill Tag Interactions */
.minimal-skills span,
.tech-tag {
    transition: all 0.2s ease;
    cursor: pointer;
}

.minimal-skills span:hover,
.tech-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(91, 76, 219, 0.15);
}

.magnetic-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.magnetic-btn:active {
    transform: scale(0.95);
}

/* Stat Counter Animation */
.stat-number,
.quick-stat-number,
.metric-number {
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
}

.stat-number:hover,
.quick-stat-number:hover,
.metric-number:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 16px rgba(91, 76, 219, 0.4));
}

/* Section Badge Enhanced */
.section-badge {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.section-badge i {
    transition: transform 0.3s ease;
}

.section-badge:hover i {
    transform: rotate(360deg);
}

/* Gradient Text Animation — reuses shared gradientShift keyframe */
.gradient-text {
    background-size: 200% auto;
    animation: gradientShift 3s ease infinite;
}

/* ============================================
   STAR BORDER ANIMATION
   ============================================ */
.star-border-wrapper {
    position: relative;
    display: inline-block;
    border-radius: 16px;
    padding: 2px;
    isolation: isolate;
}

.star-border-wrapper.large {
    border-radius: 20px;
    padding: 3px;
}

.star-border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: inherit;
    background: linear-gradient(
        90deg,
        #5b4cdb 0%,
        #7c3aed 15%,
        #ec4899 35%,
        #06b6d4 55%,
        #a855f7 75%,
        #5b4cdb 100%
    );
    background-size: 200% 100%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: star-border-rotate 6s linear infinite;
}

.star-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: inherit;
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.star-border-wrapper:hover .star-border {
    opacity: 1;
}

.star-border-wrapper:hover .star-border::before {
    opacity: 0.6;
}

.star-border-wrapper.large .star-border {
    padding: 3px;
    animation: star-border-rotate 8s linear infinite;
}

.star-border-wrapper.large .star-border::before {
    filter: blur(12px);
}

@keyframes star-border-rotate {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/* Star border active state */
.star-border-wrapper.active .star-border {
    opacity: 1;
    animation-play-state: running;
}

/* Pause animation on reduced motion */
@media (prefers-reduced-motion: reduce) {
    .star-border {
        animation: none;
        background: linear-gradient(135deg, #5b4cdb, #7c3aed, #ec4899);
        background-size: 100% 100%;
    }
}

.star-border-wrapper .btn-v9 {
    position: relative;
    z-index: 1;
    margin: 0;
}

/* Star border color variants */
.star-border-wrapper.primary .star-border {
    background: linear-gradient(
        90deg,
        #5b4cdb 0%,
        #7c3aed 25%,
        #a855f7 50%,
        #7c3aed 75%,
        #5b4cdb 100%
    );
    background-size: 200% 100%;
}

.star-border-wrapper.electric .star-border {
    background: linear-gradient(
        90deg,
        #06b6d4 0%,
        #3b82f6 25%,
        #06b6d4 50%,
        #0891b2 75%,
        #06b6d4 100%
    );
    background-size: 200% 100%;
}

.star-border-wrapper.cosmic .star-border {
    background: linear-gradient(
        90deg,
        #a855f7 0%,
        #ec4899 25%,
        #f43f5e 50%,
        #ec4899 75%,
        #a855f7 100%
    );
    background-size: 200% 100%;
}

/* Fast variant */
.star-border-wrapper.fast .star-border {
    animation-duration: 4s;
}

/* Slow variant */
.star-border-wrapper.slow .star-border {
    animation-duration: 10s;
}

/* Always visible variant */
.star-border-wrapper.always-on .star-border {
    opacity: 1;
}

.lando-statement-section {
    padding: 120px 0;
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.statement-wrapper {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.statement-label {
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.statement-text {
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 2rem;
    text-transform: none;
}

.statement-author {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-style: italic;
}

/* Journey Timeline Section */
.lando-journey-section {
    padding: 120px 0;
    background: var(--bg-secondary);
}

.journey-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    margin-top: 4rem;
}

.journey-card {
    position: relative;
    padding: 2.5rem;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
               box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
               border-color 0.35s ease;
    overflow: hidden;
    will-change: transform;
}

.journey-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: var(--gradient-primary);
    opacity: 0.03;
    border-radius: 0 20px 0 80px;
    transition: opacity 0.4s ease;
}

.journey-card:hover::before {
    opacity: 0.08;
}

.journey-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--primary-color);
    box-shadow: 0 28px 70px -15px rgba(91, 76, 219, 0.2);
}

.journey-year {
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.journey-title {
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.journey-description {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Enhanced Section Spacing */
.lando-statement-section + .section,
.lando-journey-section + .section {
    margin-top: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .lando-statement-section {
        padding: 80px 0;
    }
    
    .statement-text {
        font-size: clamp(1.75rem, 6vw, 3rem);
    }
    
    .lando-journey-section {
        padding: 80px 0;
    }
    
    .journey-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .journey-card {
        padding: 2rem;
    }
    
    .journey-year {
        font-size: 2.5rem;
    }
}

/* Notification animations */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .hero-blobs .blob,
    .profile-ring,
    .logo-loop-track,
    .magnetic-btn {
        animation: none !important;
    }

    /* Disable new pseudo-element animations */
    .skill-bar-fill::after,
    .minimal-card::after,
    .project-card::after,
    .skill-card::before,
    .timeline-card::before,
    .journey-card::before,
    .stat-card::before,
    .site-footer::before,
    .section-divider::after,
    .minimal-icon::after,
    .logo-loop-item::before {
        animation: none !important;
        transition: none !important;
    }

    .profile-ring {
        opacity: 0.4;
        filter: blur(2px);
    }

    .scroll-progress {
        transition: none !important;
    }

    /* Reduce all hover transforms */
    .minimal-card:hover,
    .skill-card:hover,
    .stat-card:hover,
    .journey-card:hover,
    .timeline-card:hover,
    .project-card:hover,
    .social-card:hover,
    .logo-loop-item:hover {
        transform: none !important;
    }
}

/* ============================================
   UI OPTIMIZATIONS & ENHANCEMENTS
   ============================================ */

/* Smooth Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
    border-radius: 5px;
    border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-dark), var(--primary-color));
}

/* Selection Styling */
::selection {
    background: var(--primary-color);
    color: white;
}

::-moz-selection {
    background: var(--primary-color);
    color: white;
}

/* Enhanced Focus States */
*:focus-visible {
    outline: var(--focus-ring, 3px) solid var(--primary-color);
    outline-offset: 3px;
    border-radius: var(--radius-sm, 6px);
}

.lando-nav-link:focus-visible,
.filter-btn:focus-visible {
    outline-offset: 4px;
    border-radius: var(--radius-full, 9999px);
}

.action-bubble:focus-visible,
.social-card:focus-visible,
.project-card:focus-visible,
.minimal-card:focus-visible,
.skill-card:focus-visible,
.stat-card:focus-visible,
.journey-card:focus-visible,
.timeline-card:focus-visible {
    outline-offset: 4px;
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 0 0 6px rgba(91, 76, 219, 0.15);
}

.btn-v9:focus-visible,
.contact-social-link:focus-visible,
.back-to-top:focus-visible,
.theme-toggle-btn:focus-visible {
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(91, 76, 219, 0.2);
}

[data-theme="dark"] .contact-social-link:focus-visible,
[data-theme="dark"] .social-card:focus-visible,
[data-theme="dark"] .project-card:focus-visible,
[data-theme="dark"] .minimal-card:focus-visible,
[data-theme="dark"] .skill-card:focus-visible,
[data-theme="dark"] .stat-card:focus-visible,
[data-theme="dark"] .journey-card:focus-visible,
[data-theme="dark"] .timeline-card:focus-visible,
[data-theme="dark"] .btn-v9:focus-visible,
[data-theme="dark"] .contact-social-link:focus-visible,
[data-theme="dark"] .back-to-top:focus-visible,
[data-theme="dark"] .theme-toggle-btn:focus-visible {
    box-shadow: 0 0 0 6px rgba(139, 124, 247, 0.25);
}

/* Button Micro-interactions */
.btn-v9,
.btn,
.cta-btn,
.magnetic-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-v9:hover,
.btn:hover,
.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(91, 76, 219, 0.3);
}

.btn-v9:active,
.btn:active,
.cta-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Card Hover Enhancements */
.project-card,
.stat-card,
.social-card,
.journey-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.project-card:hover,
.stat-card:hover,
.journey-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(91, 76, 219, 0.15);
}

.social-card:hover {
    transform: translateY(-5px) scale(1.02);
}

/* Smooth Image Loading */
img {
    transition: opacity 0.3s ease;
}

img[loading="lazy"] {
    opacity: 0;
}

img.loaded,
img:not([loading="lazy"]) {
    opacity: 1;
}

/* Text Selection Prevention on Interactive Elements */
.btn-v9,
.btn,
.cta-btn,
.magnetic-btn,
.nav-item,
.pill-nav-item,
.lando-nav-link {
    -webkit-user-select: none;
    user-select: none;
}

/* Improved Link Underline Animation */
.about-text-clean a,
.footer a:not(.btn):not(.social-card) {
    position: relative;
    display: inline-block;
}

.about-text-clean a::after,
.footer a:not(.btn):not(.social-card)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.about-text-clean a:hover::after,
.footer a:not(.btn):not(.social-card):hover::after {
    width: 100%;
}

/* Stagger Animations on Scroll — transform/opacity only */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
               transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.in-view > * {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.06s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.3s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.36s; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.42s; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.48s; }
.reveal-stagger.in-view > *:nth-child(9) { transition-delay: 0.54s; }
.reveal-stagger.in-view > *:nth-child(10) { transition-delay: 0.6s; }
.reveal-stagger.in-view > *:nth-child(11) { transition-delay: 0.66s; }
.reveal-stagger.in-view > *:nth-child(12) { transition-delay: 0.72s; }

/* Fade Up Animation — transform/opacity only */
.reveal-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
               transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Gradient Text Animation - uses gradient-shift defined earlier */
.hero-line-huge,
.section-title-bold {
    background-size: 200% 200%;
}

/* Input Focus Glow */
input:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 4px rgba(91, 76, 219, 0.15);
    border-color: var(--primary-color) !important;
    outline: none;
}

/* Skeleton Loading State */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Smooth Section Transitions */
section {
    position: relative;
}

/* Navigation Active State Enhancement */
.lando-nav-link.active,
.pill-nav-item.active {
    position: relative;
}

.lando-nav-link.active::before,
.pill-nav-item.active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    border-radius: inherit;
    z-index: -1;
    opacity: 1;
}

/* Tooltip Enhancement */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    padding: 0.5rem 0.75rem;
    background: var(--bg-dark);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* Mobile Touch Feedback */
@media (hover: none) {
    .btn-v9:active,
    .social-card:active,
    .project-card:active {
        transform: scale(0.97);
        opacity: 0.9;
    }
}

/* Print Styles */
@media print {
    .lando-nav,
    .hero-blobs,
    .scroll-progress,
    .cursor-dot,
    .cursor-ring,
    .github-stats-section,
    .lando-journey-section,
    .logo-loop-section,
    .lando-statement-section,
    .back-to-top,
    #backToTop {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    section {
        page-break-inside: avoid;
    }

    .section {
        padding: 1.5rem 0 !important;
    }

    h1, h2, h3 {
        color: #000 !important;
        -webkit-text-fill-color: initial !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.75rem;
        color: #555;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #4338ca;
        --text-primary: #000000;
        --text-secondary: #1a1a1a;
        --border-light: #333333;
    }
    
    .btn-v9,
    .lando-nav-link.active {
        border: 2px solid currentColor;
    }
}

/* ============================================
   MOBILE TOUCH TARGETS (WCAG 2.5.5 — 44x44px)
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .filter-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1.25rem;
    }

    .project-btn,
    .project-btn-icon {
        min-height: 44px;
        min-width: 44px;
    }

    .lando-nav-link {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    .action-bubble {
        min-width: 48px;
        min-height: 48px;
    }

    .social-card {
        min-height: 56px;
    }

    .back-to-top {
        width: 48px;
        height: 48px;
    }
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
               background 0.35s ease,
               box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
               border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-light);
    z-index: 10;
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 6px 20px rgba(91, 76, 219, 0.35);
}

.theme-toggle-btn:hover .theme-icon-dark,
.theme-toggle-btn:hover .theme-icon-light {
    color: white !important;
}

.theme-toggle-btn:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.theme-icon-dark,
.theme-icon-light {
    position: absolute;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    font-size: 1.125rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light mode: show moon icon (to switch to dark) */
.theme-icon-dark {
    color: #6366f1;
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-icon-light {
    color: #fbbf24;
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

/* Dark mode: show sun icon (to switch to light) */
[data-theme="dark"] .theme-icon-dark {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="dark"] .theme-icon-light {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-toggle-btn {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

/* ============================================
   SITE FOOTER
   ============================================ */
.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
    padding: 5rem 0 2.5rem;
    margin-top: 0;
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: var(--gradient-primary);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--border-light);
}

.footer-logo {
    display: flex;
    flex-direction: column;
    line-height: 0.85;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.footer-tagline {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 320px;
}

.footer-heading {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.footer-links nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-link {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.footer-link:hover {
    color: var(--primary-color);
    transform: translateX(4px);
}

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

.footer-social-links a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 1.125rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-light);
}

.footer-social-links a:hover {
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(91, 76, 219, 0.3);
    border-color: transparent;
}

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

.footer-copyright {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

.footer-credit {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    font-style: italic;
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}

/* ============================================
   CUSTOM CURSOR & PRELOADER & ANIMATIONS
   ============================================ */

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-primary);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
}

.loader-logo {
    font-family: 'Google Sans Flex', 'Google Sans', 'Outfit', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards;
}

.loader-progress-bar {
    width: 200px;
    height: 4px;
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto;
}

.loader-progress {
    width: 0%;
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

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

/* Hover Glow Effect */
.hover-glow {
    position: relative;
    overflow: hidden;
}

.hover-glow::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: skewX(-25deg);
    transition: left 0.5s ease;
    pointer-events: none;
}

.hover-glow:hover::after {
    left: 150%;
    transition: left 0.7s ease;
}

/* Pulse Animation */
.pulse-animation {
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(91, 76, 219, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(91, 76, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(91, 76, 219, 0); }
}

/* ============================================
   CUSTOM CURSOR
   ============================================ */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate3d(-100px, -100px, 0);
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    mix-blend-mode: difference;
    opacity: 0;
    will-change: transform;
}

.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99997;
    transform: translate3d(-100px, -100px, 0);
    transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
    opacity: 0;
    will-change: transform;
}

.cursor-dot.visible,
.cursor-ring.visible {
    opacity: 1;
}

/* Cursor grows on interactive elements */
.cursor-dot.cursor-hover {
    width: 12px;
    height: 12px;
    background: var(--accent-color, #e11d74);
}

.cursor-ring.cursor-hover {
    width: 48px;
    height: 48px;
    border-color: var(--accent-color, #e11d74);
    opacity: 0.5;
}

/* Cursor click state */
.cursor-dot.cursor-click {
    width: 6px;
    height: 6px;
}

.cursor-ring.cursor-click {
    width: 28px;
    height: 28px;
}

/* Hide on touch devices and small screens */
@media (hover: none), (max-width: 768px) {
    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }
}

/* ============================================
   GITHUB STATS WIDGET
   ============================================ */
.github-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4, 1.5rem);
    margin-top: var(--space-6, 2.5rem);
}

.github-stat-card {
    background: var(--card-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-4, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    min-height: 140px;
    overflow: hidden;
}

/* Skeleton shimmer while images load */
.github-stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(91, 76, 219, 0.06) 40%,
        rgba(91, 76, 219, 0.1) 50%,
        rgba(91, 76, 219, 0.06) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: inherit;
    z-index: 0;
    transition: opacity 0.4s ease;
}

.github-stat-card.loaded::after {
    opacity: 0;
    pointer-events: none;
}

[data-theme="dark"] .github-stat-card::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(139, 124, 247, 0.06) 40%,
        rgba(139, 124, 247, 0.12) 50%,
        rgba(139, 124, 247, 0.06) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
}

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

.github-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(91, 76, 219, 0.15);
}

.github-stat-card-wide {
    grid-column: 1 / -1;
}

.github-stats-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 12px);
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.github-stats-img.loaded {
    opacity: 1;
}

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

/* ============================================
   VIEW TRANSITIONS API
   ============================================ */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: fade-out 0.25s ease-in forwards;
}

::view-transition-new(root) {
    animation: fade-in 0.35s ease-out forwards;
}

@keyframes fade-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.97); }
}

@keyframes fade-in {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ============================================
   ENHANCED MICRO-INTERACTIONS
   ============================================ */

/* Button press effect */
.btn-primary:active,
.btn-outline:active,
.cta-btn-primary:active,
.cta-btn-secondary:active {
    transform: scale(0.96);
    transition-duration: 0.1s;
}

/* Ripple effect on CTA buttons */
.cta-btn-primary,
.cta-btn-secondary {
    position: relative;
    overflow: hidden;
}

.cta-btn-primary::after,
.cta-btn-secondary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.cta-btn-primary:hover::after,
.cta-btn-secondary:hover::after {
    opacity: 1;
}

/* Focus ring pulse for interactive elements */
@keyframes focusPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(91, 76, 219, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(91, 76, 219, 0.1); }
}

/* Smooth image reveal on load */
.project-visual__img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
               opacity 0.5s ease;
}

/* Social card icon bounce on hover */
.social-card:hover .social-card-icon {
    animation: iconBounce 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes iconBounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1.1); }
}

/* Journey year shimmer on hover */
.journey-card:hover .journey-year {
    background-size: 300% 300%;
    animation: yearShimmer 1.5s ease infinite;
}

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

/* Stat number count-up glow */
.stat-card:hover .stat-number {
    filter: drop-shadow(0 4px 12px rgba(91, 76, 219, 0.4));
    transition: filter 0.4s ease;
}

/* Project filter chip active animation */
.filter-chip.active {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smooth color transitions for theme switching - applied to elements without existing transitions */
.nav-header,
.site-footer {
    transition-property: background-color, border-color, color;
    transition-duration: 0.4s;
    transition-timing-function: ease;
}

/* Button ripple expand animation */
@keyframes rippleExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.6;
    }
    100% {
        width: 400px;
        height: 400px;
        opacity: 0;
    }
}

/* Input focus glow */
.input-focused {
    position: relative;
}

.input-focused::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: center;
    animation: inputFocusLine 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes inputFocusLine {
    to {
        transform: scaleX(1);
    }
}


/* OVERRIDES FOR MATERIALIZE DEFAULTS */
body, input, textarea, button, .btn {
    font-family: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

/* ============================================
   EDUCHAIN ID — SHOWCASE SECTION
   ============================================ */
.educhain-section {
    --ec-primary: #2563EB;
    --ec-primary-light: #3b82f6;
    --ec-green: #22C55E;
    --ec-dark: #0F172A;
    --ec-darker: #0a0f1e;
    --ec-light: #F3F4F6;
    --ec-surface: rgba(30, 41, 59, 0.6);
    --ec-border: rgba(37, 99, 235, 0.2);

    position: relative;
    background: linear-gradient(168deg, var(--ec-dark) 0%, var(--ec-darker) 50%, #0d1424 100%);
    overflow: hidden;
    color: #e2e8f0;
}

/* Background effects */
.educhain-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.educhain-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.educhain-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
}

.educhain-glow-1 {
    width: 500px;
    height: 500px;
    background: var(--ec-primary);
    top: -150px;
    right: -100px;
    animation: blobFloat 20s infinite ease-in-out;
}

.educhain-glow-2 {
    width: 400px;
    height: 400px;
    background: var(--ec-green);
    bottom: -100px;
    left: -100px;
    animation: blobFloat 25s infinite ease-in-out reverse;
}

.educhain-section .container {
    position: relative;
    z-index: 1;
}

/* Section header overrides */
.educhain-section .section-header .section-number {
    color: var(--ec-primary-light);
}

.educhain-section .section-header .section-label {
    color: var(--ec-primary-light);
}

.educhain-section .section-header .section-title-bold {
    color: #f1f5f9;
    background: linear-gradient(135deg, #f1f5f9 0%, var(--ec-primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.educhain-divider {
    background: linear-gradient(90deg, var(--ec-primary), var(--ec-green)) !important;
}

/* Hero banner */
.educhain-hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
    padding: 2.5rem;
    background: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: var(--border-radius-lg, 24px);
    backdrop-filter: blur(12px);
}

.educhain-hero__brand {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.educhain-logo {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(37, 99, 235, 0.3));
}

.educhain-hero__name {
    font-size: 2rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0;
    line-height: 1.2;
}

.educhain-accent {
    color: var(--ec-primary-light);
}

.educhain-hero__tagline {
    font-size: 0.95rem;
    color: #94a3b8;
    margin: 0;
    font-weight: 500;
}

.educhain-hero__desc {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #cbd5e1;
    margin-bottom: 2rem;
}

.educhain-hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.educhain-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.educhain-btn--primary {
    background: linear-gradient(135deg, var(--ec-primary) 0%, #1d4ed8 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}

.educhain-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.45);
    color: #fff;
}

.educhain-btn--outline {
    background: transparent;
    color: var(--ec-primary-light);
    border: 1.5px solid var(--ec-border);
}

.educhain-btn--outline:hover {
    border-color: var(--ec-primary-light);
    background: rgba(37, 99, 235, 0.08);
    transform: translateY(-2px);
    color: var(--ec-primary-light);
}

.educhain-badge-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.educhain-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 100px;
    color: var(--ec-green);
    font-size: 0.8125rem;
    font-weight: 600;
}

.educhain-pulse {
    font-size: 0.5rem;
    animation: ecPulse 2s infinite;
}

@keyframes ecPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.educhain-tech-badge {
    padding: 0.3rem 0.7rem;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 6px;
    color: #93c5fd;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Browser mockup */
.educhain-hero__visual {
    display: flex;
    justify-content: center;
}

.educhain-mockup {
    width: 100%;
    max-width: 380px;
    perspective: 1000px;
}

.educhain-mockup__screen {
    background: #111827;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow:
        0 20px 60px -15px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(37, 99, 235, 0.1);
    transform: rotateY(-3deg) rotateX(2deg);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.educhain-mockup__screen:hover {
    transform: rotateY(0) rotateX(0);
}

.educhain-mockup__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #1e293b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.educhain-mockup__dots {
    display: flex;
    gap: 5px;
}

.educhain-mockup__dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #334155;
}

.educhain-mockup__dots span:first-child { background: #ef4444; }
.educhain-mockup__dots span:nth-child(2) { background: #f59e0b; }
.educhain-mockup__dots span:last-child { background: #22c55e; }

.educhain-mockup__url {
    font-size: 0.75rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    flex: 1;
}

.educhain-mockup__url i {
    color: var(--ec-green);
    font-size: 0.65rem;
}

.educhain-mockup__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.educhain-mock-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(30, 41, 59, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.educhain-mock-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ec-primary), #7c3aed);
    flex-shrink: 0;
}

.educhain-mock-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.educhain-mock-line {
    border-radius: 4px;
    height: 10px;
}

.educhain-mock-line--name {
    background: #334155;
    width: 65%;
}

.educhain-mock-line--sub {
    background: #1e293b;
    width: 45%;
}

.educhain-mock-line--med {
    background: #334155;
    width: 75%;
}

.educhain-mock-line--short {
    background: #1e293b;
    width: 50%;
}

.educhain-mock-verified {
    color: var(--ec-green);
    font-size: 1.25rem;
}

.educhain-mock-cred {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.educhain-mock-cred-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ec-primary-light);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.educhain-mock-shield {
    color: var(--ec-green);
    font-size: 1rem;
    opacity: 0.7;
}

/* Feature Grid */
.educhain-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.educhain-feature-card {
    padding: 2rem 1.5rem;
    background: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.educhain-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ec-primary), var(--ec-green));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.educhain-feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 16px 40px -10px rgba(37, 99, 235, 0.2);
}

.educhain-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 1.25rem;
    transition: transform 0.3s ease;
}

.educhain-feature-card:hover .educhain-feature-icon {
    transform: scale(1.12);
}

.educhain-feature-icon--blue {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
}

.educhain-feature-icon--green {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.educhain-feature-icon--purple {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.educhain-feature-icon--amber {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.educhain-feature-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.75rem;
}

.educhain-feature-desc {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.65;
}

/* Security Badges */
.educhain-security {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: 16px;
}

.educhain-security-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
}

.educhain-security-label i {
    color: var(--ec-green);
}

.educhain-security-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.educhain-sec-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 8px;
    color: #93c5fd;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.educhain-sec-badge:hover {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.3);
    transform: translateY(-2px);
}

.educhain-sec-badge i {
    font-size: 0.9rem;
    color: var(--ec-primary-light);
}

/* Audience Cards */
.educhain-audience {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.educhain-audience-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: 16px;
    transition: all 0.35s ease;
}

.educhain-audience-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 12px 32px -8px rgba(37, 99, 235, 0.15);
}

.educhain-audience-card i {
    font-size: 2rem;
    color: var(--ec-primary-light);
    margin-bottom: 1rem;
    display: block;
}

.educhain-audience-card h5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.75rem;
}

.educhain-audience-card p {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
    .educhain-hero {
        grid-template-columns: 1fr;
    }

    .educhain-hero__visual {
        order: -1;
    }

    .educhain-mockup {
        max-width: 320px;
    }

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

@media (max-width: 768px) {
    .educhain-hero {
        padding: 1.5rem;
    }

    .educhain-hero__name {
        font-size: 1.5rem;
    }

    .educhain-features {
        grid-template-columns: 1fr;
    }

    .educhain-audience {
        grid-template-columns: 1fr;
    }

    .educhain-security-badges {
        gap: 0.5rem;
    }

    .educhain-sec-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .educhain-hero__brand {
        flex-direction: column;
        text-align: center;
    }

    .educhain-hero__actions {
        flex-direction: column;
    }

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

    .educhain-badge-strip {
        justify-content: center;
    }
}

/* Light mode overrides for EduChain */
[data-theme="light"] .educhain-section {
    background: linear-gradient(168deg, #f0f4ff 0%, #e8eeff 50%, #f5f3ff 100%);
    color: var(--ec-dark);
}

[data-theme="light"] .educhain-grid-overlay {
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px);
}

[data-theme="light"] .educhain-glow-1 { opacity: 0.08; }
[data-theme="light"] .educhain-glow-2 { opacity: 0.06; }

[data-theme="light"] .educhain-section .section-title-bold {
    background: linear-gradient(135deg, var(--ec-dark) 0%, var(--ec-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .educhain-hero {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(37, 99, 235, 0.12);
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.08);
}

[data-theme="light"] .educhain-hero__name { color: var(--ec-dark); }
[data-theme="light"] .educhain-hero__tagline { color: #475569; }
[data-theme="light"] .educhain-hero__desc { color: #334155; }

[data-theme="light"] .educhain-feature-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(37, 99, 235, 0.1);
}

[data-theme="light"] .educhain-feature-title { color: var(--ec-dark); }
[data-theme="light"] .educhain-feature-desc { color: #475569; }

[data-theme="light"] .educhain-security {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(37, 99, 235, 0.08);
}

[data-theme="light"] .educhain-sec-badge {
    background: rgba(37, 99, 235, 0.06);
    color: var(--ec-primary);
    border-color: rgba(37, 99, 235, 0.12);
}

[data-theme="light"] .educhain-audience-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(37, 99, 235, 0.1);
}

[data-theme="light"] .educhain-audience-card h5 { color: var(--ec-dark); }
[data-theme="light"] .educhain-audience-card p { color: #475569; }

[data-theme="light"] .educhain-mockup__screen {
    background: #1e293b;
}

[data-theme="light"] .educhain-tech-badge {
    background: rgba(37, 99, 235, 0.06);
    color: var(--ec-primary);
    border-color: rgba(37, 99, 235, 0.12);
}

[data-theme="light"] .educhain-status-badge {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.18);
}

/* ============================================
   HERO TEXT REVEAL ANIMATION
   ============================================ */
@keyframes heroSlideUp {
    0% {
        opacity: 0;
        transform: translateY(60px) skewY(3deg);
        filter: blur(8px);
    }
    50% {
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) skewY(0deg);
        filter: blur(0);
    }
}

.hero-text-reveal {
    overflow: hidden;
}

.hero-text-reveal > * {
    animation: heroSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-text-reveal > *:nth-child(1) { animation-delay: 0.1s; }
.hero-text-reveal > *:nth-child(2) { animation-delay: 0.25s; }
.hero-text-reveal > *:nth-child(3) { animation-delay: 0.4s; }
.hero-text-reveal > *:nth-child(4) { animation-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
    .hero-text-reveal > * {
        animation: none !important;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ============================================
   ARCHITECTURE FLOW DIAGRAM
   ============================================ */
.ec-arch-section {
    margin: 3rem 0;
}

.ec-arch-title {
    color: #f1f5f9;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
}

.ec-arch-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    padding: 1.5rem 0;
}

.ec-arch-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 16px;
    min-width: 140px;
    max-width: 170px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.ec-arch-node:hover {
    border-color: rgba(37, 99, 235, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
}

.ec-arch-node-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.ec-arch-node-icon--blue {
    background: rgba(37, 99, 235, 0.15);
    color: #3b82f6;
}

.ec-arch-node-icon--green {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.ec-arch-node-icon--purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.ec-arch-node-icon--amber {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.ec-arch-node-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
    line-height: 1.3;
}

.ec-arch-node-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.3;
}

.ec-arch-arrow {
    display: flex;
    align-items: center;
    color: #3b82f6;
    font-size: 1.5rem;
    padding: 0 0.5rem;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .ec-arch-flow {
        flex-direction: column;
        gap: 0.5rem;
    }
    .ec-arch-arrow {
        transform: rotate(90deg);
        padding: 0.25rem 0;
    }
    .ec-arch-node {
        min-width: 200px;
        max-width: 260px;
    }
}

[data-theme="light"] .ec-arch-node {
    background: rgba(241, 245, 249, 0.8);
    border-color: rgba(37, 99, 235, 0.15);
}
[data-theme="light"] .ec-arch-node-label { color: #1e293b; }
[data-theme="light"] .ec-arch-node-sub { color: #64748b; }
[data-theme="light"] .ec-arch-title { color: #1e293b; }

/* ============================================
   ROADMAP TIMELINE
   ============================================ */
.ec-roadmap {
    margin: 3rem 0;
    position: relative;
}

.ec-roadmap-title {
    color: #f1f5f9;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
}

.ec-timeline {
    position: relative;
    padding: 1rem 0;
    max-width: 700px;
    margin: 0 auto;
}

.ec-timeline::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #3b82f6 0%, #22c55e 50%, rgba(37, 99, 235, 0.2) 100%);
}

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

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

.ec-timeline-dot {
    position: absolute;
    left: 16px;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #3b82f6;
    background: #0f172a;
    z-index: 1;
}

.ec-timeline-dot--done {
    background: #22c55e;
    border-color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.ec-timeline-dot--active {
    background: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.4);
    animation: timelinePulse 2s infinite;
}

@keyframes timelinePulse {
    0%, 100% { box-shadow: 0 0 12px rgba(37, 99, 235, 0.4); }
    50% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.7); }
}

.ec-timeline-dot--future {
    background: transparent;
    border-color: rgba(37, 99, 235, 0.3);
}

.ec-timeline-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition: all 0.3s ease;
}

.ec-timeline-card:hover {
    border-color: rgba(37, 99, 235, 0.4);
    transform: translateX(4px);
}

.ec-timeline-phase {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.ec-timeline-phase--done { color: #22c55e; }
.ec-timeline-phase--active { color: #3b82f6; }
.ec-timeline-phase--future { color: #64748b; }

.ec-timeline-name {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 0.4rem;
}

.ec-timeline-desc {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.5;
}

[data-theme="light"] .ec-roadmap-title { color: #1e293b; }
[data-theme="light"] .ec-timeline::before {
    background: linear-gradient(180deg, #2563eb 0%, #16a34a 50%, rgba(37, 99, 235, 0.15) 100%);
}
[data-theme="light"] .ec-timeline-dot { background: #fff; }
[data-theme="light"] .ec-timeline-dot--done { background: #16a34a; border-color: #16a34a; }
[data-theme="light"] .ec-timeline-dot--active { background: #2563eb; border-color: #2563eb; }
[data-theme="light"] .ec-timeline-card {
    background: rgba(241, 245, 249, 0.8);
    border-color: rgba(37, 99, 235, 0.12);
}
[data-theme="light"] .ec-timeline-name { color: #1e293b; }
[data-theme="light"] .ec-timeline-desc { color: #64748b; }

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */
.testimonials-section {
    position: relative;
    overflow: hidden;
}

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

.testimonial-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 8rem;
    font-family: Georgia, serif;
    color: var(--primary-color);
    opacity: 0.06;
    line-height: 1;
    pointer-events: none;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px -12px rgba(91, 76, 219, 0.2);
    border-color: rgba(139, 124, 247, 0.3);
}

.testimonial-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 1.25rem;
}

.testimonial-stars i {
    color: #fbbf24;
    font-size: 0.9rem;
}

.testimonial-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.testimonial-avatar i {
    font-size: 1.5rem;
    color: white;
}

.testimonial-info {
    display: flex;
    flex-direction: column;
}

.testimonial-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.testimonial-role {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* ============================================
   FORM VALIDATION ERROR MESSAGES
   ============================================ */
.form-error-msg {
    display: none;
    font-size: 0.8rem;
    color: var(--error-color, #ef4444);
    margin-top: 6px;
    padding-left: 2px;
    animation: errorSlide 0.3s ease-out;
}

.form-group.has-error .form-error-msg {
    display: block;
}

.form-group.has-error .form-input,
.form-group.has-error .form-textarea {
    border-color: var(--error-color, #ef4444) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-group.has-success .form-input,
.form-group.has-success .form-textarea {
    border-color: var(--success-color, #22c55e) !important;
}

@keyframes errorSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   GITHUB STATS FALLBACK
   ============================================ */
.github-stat-card .github-stats-fallback {
    display: none;
    padding: 2rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.github-stat-card .github-stats-fallback i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: var(--primary-color);
    display: block;
}

.github-stat-card.stats-error .github-stats-img {
    display: none;
}

.github-stat-card.stats-error .github-stats-fallback {
    display: block;
}

/* ============================================
   CONTACT FORM SUCCESS STATE
   ============================================ */
.contact-form-success {
    display: none;
    text-align: center;
    padding: 3rem 2rem;
    animation: successPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-form-success .success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--success-color), #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.contact-form-success .success-icon i {
    font-size: 2rem;
    color: white;
}

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

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

@keyframes successPop {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

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

/* ============================================
   GLIMPSE OF NINETY5 SECTION
   ============================================ */
.ninety5-glimpse-section {
    position: relative;
    background: #000;
    color: #fff;
    overflow: hidden;
    padding: 8rem 0;
    margin: 4rem 0;
}

.ninety5-glimpse-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.ninety5-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.15;
    pointer-events: none;
}

.ninety5-teaser {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 6rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.ninety5-teaser__content {
    text-align: left;
}

.ninety5-teaser__logo {
    height: 70px;
    width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 2.5rem;
}

.ninety5-teaser__headline {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 2rem;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif !important;
    letter-spacing: -0.04em;
}

.ninety5-teaser__text {
    font-size: 1.25rem;
    color: #a0a0a0;
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 650px;
}

.ninety5-teaser__btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 1.4rem 3.5rem;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid #fff;
}

.ninety5-teaser__btn:hover {
    background: transparent;
    color: #fff;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(255,255,255,0.1);
}

.ninety5-teaser__visual {
    display: flex;
    justify-content: center;
    position: relative;
}

.ninety5-teaser__monogram {
    width: 100%;
    max-width: 450px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    animation: floatingNinety5 8s ease-in-out infinite;
}

@keyframes floatingNinety5 {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-30px) rotate(3deg) scale(1.05); }
}

@media (max-width: 1024px) {
    .ninety5-teaser {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 4rem;
    }
    .ninety5-teaser__content { text-align: center; }
    .ninety5-teaser__text {
        margin-left: auto;
        margin-right: auto;
    }
    .ninety5-teaser__visual {
        order: -1;
    }
    .ninety5-teaser__logo { height: 50px; margin-left: auto; margin-right: auto; }
}

/* ============================================
   ENHANCED FOOTER GRID
   ============================================ */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-heading {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: #8b7cf7;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-link {
    color: #a0a0a0;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    width: fit-content;
}

.footer-link:hover {
    color: #fff;
    transform: translateX(5px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 3rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-bottom-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tech-mini-badge {
    padding: 4px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
}

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

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-link { margin: 0 auto; }
    .footer-bottom { justify-content: center; text-align: center; }
}