/**
 * DevAveb Portfolio - Sections
 */

/* Navigation - Neural Command Interface */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-fixed); padding: var(--space-3) 0; transition: all var(--transition-normal); background: transparent; }
.nav.scrolled { background: rgba(10, 22, 40, 0.95); backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 1px 0 rgba(59, 130, 246, 0.2); }
.nav:not(.scrolled) { background: transparent !important; backdrop-filter: none; box-shadow: none; }
.nav-container { display: flex; align-items: center; justify-content: center; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6); }

/* Status Indicator */
.nav-status { display: flex; align-items: center; gap: var(--space-2); }
.status-dot { width: 6px; height: 6px; background: #10b981; border-radius: 50%; box-shadow: 0 0 8px #10b981; animation: status-pulse 2s ease-in-out infinite; }
.status-text { font-family: 'Fira Code', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.15em; color: #10b981; text-transform: uppercase; }
@keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Central Menu */
.nav-menu { display: flex; align-items: center; }

/* Nav Links - Command Style */
.nav-link { 
    display: flex; 
    align-items: center; 
    gap: var(--space-1); 
    font-family: 'Fira Code', monospace; 
    font-size: 11px; 
    font-weight: 500; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    color: var(--color-gray-300); 
    text-decoration: none; 
    padding: var(--space-2) var(--space-3); 
    border-radius: var(--radius-sm); 
    transition: all var(--transition-fast); 
    position: relative;
    margin: 0 var(--space-3);
}
/* Separator after each link except last - desktop only */
.nav-link:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: calc(-1 * var(--space-3) - 3px);
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
    font-size: 12px;
}
.nav-link.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--color-secondary);
    box-shadow: 0 0 8px var(--color-secondary);
}
@media (max-width: 768px) {
    .nav-link:not(:last-child)::after { display: none !important; }
}
.link-index { color: var(--color-secondary); font-size: 9px; opacity: 0.7; transition: all var(--transition-fast); }
.link-text { transition: all var(--transition-fast); }
.nav-link:hover { color: var(--color-white); background: rgba(59, 130, 246, 0.1); }
.nav-link:hover .link-index { opacity: 1; text-shadow: 0 0 8px var(--color-secondary); }
.nav-link.active { color: var(--color-white); }
.nav-link.active .link-index { opacity: 1; color: var(--color-accent); text-shadow: 0 0 10px var(--color-accent); }

/* System Clock */
.nav-clock { display: flex; align-items: center; gap: var(--space-2); font-family: 'Fira Code', monospace; }
.clock-label { font-size: 9px; color: var(--color-gray-600); letter-spacing: 0.1em; }
.clock-time { font-size: 11px; color: var(--color-secondary); letter-spacing: 0.05em; text-shadow: 0 0 10px var(--color-secondary); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: transparent; border: none; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--color-white); transition: all var(--transition-fast); display: block; }

/* Hero - PERFECTLY CENTERED */
.hero { 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    overflow: hidden; 
    padding: var(--space-20) 0 var(--space-12);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(59,130,246,0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(6,182,212,0.1) 0%, transparent 50%); }

/* Falling formulas - Einstein & Tesla - repelled by logo energy field */
.falling-formula {
    position: fixed;
    font-family: 'Caveat', cursive;
    color: rgba(100, 180, 255, 0.35);
    font-size: 1rem;
    pointer-events: none;
    z-index: 2;
    top: -5%;
}

/* Smaller 3 6 9 numbers */
.formula-small { font-size: 0.75rem !important; letter-spacing: 2px; }

/* Delta symbol styling */
.formula-delta { font-family: 'Inter', sans-serif; font-size: 0.9rem !important; }

/* Spread across entire screen - staggered random delays */
.formula-1 { left: 5%; animation: fall-repel-left 22s linear infinite; animation-delay: 0.3s; font-size: 0.9rem; }
.formula-2 { left: 15%; animation: fall-repel-left-alt 19s linear infinite; animation-delay: 7.2s; font-size: 1.1rem; }
.formula-3 { left: 25%; animation: fall-repel-left 25s linear infinite; animation-delay: 3.8s; font-size: 0.95rem; }
.formula-4 { left: 35%; animation: fall-repel-center-left 21s linear infinite; animation-delay: 11.5s; font-size: 1.05rem; }
.formula-5 { left: 45%; animation: fall-repel-center-left-alt 18s linear infinite; animation-delay: 2.1s; font-size: 0.85rem; }
.formula-6 { left: 50%; animation: fall-repel-center-split 24s linear infinite; animation-delay: 15.7s; font-size: 1rem; }
.formula-7 { left: 55%; animation: fall-repel-center-right 20s linear infinite; animation-delay: 5.4s; font-size: 1rem; }
.formula-8 { left: 65%; animation: fall-repel-center-right-alt 23s linear infinite; animation-delay: 9.9s; font-size: 0.9rem; }
.formula-9 { left: 75%; animation: fall-repel-right 17s linear infinite; animation-delay: 13.3s; font-size: 1.15rem; }
.formula-10 { left: 85%; animation: fall-repel-right-alt 21s linear infinite; animation-delay: 1.6s; font-size: 0.95rem; }
.formula-11 { left: 92%; animation: fall-repel-right 26s linear infinite; animation-delay: 18.2s; font-size: 1.1rem; }
.formula-12 { left: 42%; animation: fall-repel-center-left 16s linear infinite; animation-delay: 6.7s; font-size: 0.88rem; }

/* Left side - pushed left at light boundary */
@keyframes fall-repel-left {
    0% { top: -8%; opacity: 0; transform: rotate(10deg) translateX(0); }
    5% { top: 0%; opacity: 0.4; transform: rotate(20deg) translateX(5px); }
    20% { top: 15%; opacity: 0.35; transform: rotate(-30deg) translateX(15px); }
    /* Approaches light boundary - pushed left early */
    30% { top: 24%; opacity: 0.3; transform: rotate(60deg) translateX(-60px); }
    35% { top: 28%; opacity: 0.2; transform: rotate(120deg) translateX(-120px) scale(0.9); }
    40% { top: 34%; opacity: 0.22; transform: rotate(180deg) translateX(-100px); }
    55% { top: 55%; opacity: 0.25; transform: rotate(280deg) translateX(-70px); }
    75% { top: 78%; opacity: 0.18; transform: rotate(380deg) translateX(-40px); }
    100% { top: 110%; opacity: 0; transform: rotate(500deg) translateX(-15px); }
}

@keyframes fall-repel-left-alt {
    0% { top: -6%; opacity: 0; transform: rotate(-15deg) translateX(0); }
    6% { top: 2%; opacity: 0.38; transform: rotate(-5deg) translateX(8px); }
    22% { top: 18%; opacity: 0.32; transform: rotate(25deg) translateX(20px); }
    32% { top: 26%; opacity: 0.25; transform: rotate(80deg) translateX(-70px); }
    38% { top: 31%; opacity: 0.18; transform: rotate(150deg) translateX(-140px) scale(0.88); }
    45% { top: 40%; opacity: 0.22; transform: rotate(220deg) translateX(-110px); }
    62% { top: 62%; opacity: 0.2; transform: rotate(340deg) translateX(-65px); }
    100% { top: 112%; opacity: 0; transform: rotate(520deg) translateX(-20px); }
}

/* Center-left - strong push left at numbers circle */
@keyframes fall-repel-center-left {
    0% { top: -6%; opacity: 0; transform: rotate(-15deg) translateX(0); }
    5% { top: 2%; opacity: 0.38; transform: rotate(-5deg) translateX(0); }
    18% { top: 14%; opacity: 0.35; transform: rotate(25deg) translateX(10px); }
    /* Hits the light field - strong push */
    28% { top: 22%; opacity: 0.28; transform: rotate(80deg) translateX(-50px); }
    33% { top: 26%; opacity: 0.12; transform: rotate(180deg) translateX(-200px) scale(0.82); }
    38% { top: 32%; opacity: 0.1; transform: rotate(280deg) translateX(-250px) scale(0.78); }
    45% { top: 42%; opacity: 0.15; transform: rotate(380deg) translateX(-200px); }
    58% { top: 58%; opacity: 0.18; transform: rotate(500deg) translateX(-140px); }
    75% { top: 78%; opacity: 0.12; transform: rotate(620deg) translateX(-80px); }
    100% { top: 112%; opacity: 0; transform: rotate(780deg) translateX(-30px); }
}

@keyframes fall-repel-center-left-alt {
    0% { top: -10%; opacity: 0; transform: rotate(20deg) translateX(0); }
    6% { top: -1%; opacity: 0.36; transform: rotate(10deg) translateX(5px); }
    20% { top: 13%; opacity: 0.33; transform: rotate(-20deg) translateX(15px); }
    29% { top: 21%; opacity: 0.24; transform: rotate(70deg) translateX(-80px); }
    34% { top: 26%; opacity: 0.1; transform: rotate(160deg) translateX(-220px) scale(0.8); }
    40% { top: 35%; opacity: 0.14; transform: rotate(260deg) translateX(-180px); }
    55% { top: 55%; opacity: 0.16; transform: rotate(400deg) translateX(-120px); }
    100% { top: 110%; opacity: 0; transform: rotate(650deg) translateX(-40px); }
}

/* Dead center - violent spiral repulsion */
@keyframes fall-repel-center-split {
    0% { top: -5%; opacity: 0; transform: rotate(0deg) translateX(0); }
    5% { top: 3%; opacity: 0.4; transform: rotate(10deg) translateX(0); }
    16% { top: 12%; opacity: 0.35; transform: rotate(-20deg) translateX(5px); }
    /* Hits light barrier - maximum repulsion */
    26% { top: 20%; opacity: 0.2; transform: rotate(90deg) translateX(-80px); }
    30% { top: 24%; opacity: 0.08; transform: rotate(200deg) translateX(-280px) scale(0.75); }
    35% { top: 30%; opacity: 0.06; transform: rotate(350deg) translateX(250px) scale(0.72); }
    42% { top: 40%; opacity: 0.1; transform: rotate(500deg) translateX(-200px); }
    52% { top: 52%; opacity: 0.12; transform: rotate(650deg) translateX(150px); }
    65% { top: 68%; opacity: 0.14; transform: rotate(800deg) translateX(-80px); }
    100% { top: 110%; opacity: 0; transform: rotate(1000deg) translateX(30px); }
}

/* Center-right - strong push right at numbers circle */
@keyframes fall-repel-center-right {
    0% { top: -7%; opacity: 0; transform: rotate(20deg) translateX(0); }
    5% { top: 1%; opacity: 0.36; transform: rotate(10deg) translateX(0); }
    18% { top: 14%; opacity: 0.32; transform: rotate(-30deg) translateX(-10px); }
    /* Hits the light field - strong push right */
    28% { top: 22%; opacity: 0.26; transform: rotate(-90deg) translateX(60px); }
    33% { top: 26%; opacity: 0.1; transform: rotate(-190deg) translateX(210px) scale(0.8); }
    38% { top: 32%; opacity: 0.08; transform: rotate(-300deg) translateX(260px) scale(0.76); }
    45% { top: 42%; opacity: 0.14; transform: rotate(-420deg) translateX(200px); }
    58% { top: 58%; opacity: 0.16; transform: rotate(-550deg) translateX(145px); }
    75% { top: 78%; opacity: 0.1; transform: rotate(-680deg) translateX(85px); }
    100% { top: 111%; opacity: 0; transform: rotate(-820deg) translateX(35px); }
}

@keyframes fall-repel-center-right-alt {
    0% { top: -8%; opacity: 0; transform: rotate(-25deg) translateX(0); }
    6% { top: 0%; opacity: 0.34; transform: rotate(-15deg) translateX(-8px); }
    19% { top: 13%; opacity: 0.3; transform: rotate(20deg) translateX(-15px); }
    29% { top: 22%; opacity: 0.22; transform: rotate(-80deg) translateX(90px); }
    34% { top: 27%; opacity: 0.08; transform: rotate(-200deg) translateX(240px) scale(0.78); }
    42% { top: 38%; opacity: 0.12; transform: rotate(-340deg) translateX(190px); }
    58% { top: 60%; opacity: 0.14; transform: rotate(-480deg) translateX(130px); }
    100% { top: 109%; opacity: 0; transform: rotate(-700deg) translateX(50px); }
}

/* Right side - pushed right at light boundary */
@keyframes fall-repel-right {
    0% { top: -9%; opacity: 0; transform: rotate(-12deg) translateX(0); }
    5% { top: -1%; opacity: 0.4; transform: rotate(-20deg) translateX(-5px); }
    20% { top: 14%; opacity: 0.35; transform: rotate(35deg) translateX(-18px); }
    /* Approaches light boundary - pushed right early */
    30% { top: 24%; opacity: 0.28; transform: rotate(-70deg) translateX(70px); }
    35% { top: 28%; opacity: 0.18; transform: rotate(-140deg) translateX(130px) scale(0.88); }
    40% { top: 34%; opacity: 0.2; transform: rotate(-200deg) translateX(105px); }
    55% { top: 55%; opacity: 0.22; transform: rotate(-300deg) translateX(75px); }
    75% { top: 78%; opacity: 0.15; transform: rotate(-420deg) translateX(45px); }
    100% { top: 109%; opacity: 0; transform: rotate(-550deg) translateX(18px); }
}

@keyframes fall-repel-right-alt {
    0% { top: -5%; opacity: 0; transform: rotate(18deg) translateX(0); }
    6% { top: 3%; opacity: 0.38; transform: rotate(8deg) translateX(-10px); }
    21% { top: 17%; opacity: 0.33; transform: rotate(-25deg) translateX(-22px); }
    31% { top: 25%; opacity: 0.25; transform: rotate(-85deg) translateX(85px); }
    36% { top: 29%; opacity: 0.16; transform: rotate(-160deg) translateX(150px) scale(0.86); }
    44% { top: 40%; opacity: 0.2; transform: rotate(-240deg) translateX(115px); }
    60% { top: 62%; opacity: 0.18; transform: rotate(-360deg) translateX(70px); }
    100% { top: 108%; opacity: 0; transform: rotate(-500deg) translateX(25px); }
}
.hero-grid { 
    position: absolute; 
    inset: 0; 
    background-image: linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px); 
    background-size: 50px 50px; 
    mask-image: radial-gradient(ellipse at center 40%, black 30%, transparent 75%);
    animation: grid-ocean-wave 3s ease-in-out infinite;
    transform-origin: center 40%;
}

@keyframes grid-ocean-wave {
    0% { 
        transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1); 
    }
    8% { 
        transform: perspective(1000px) rotateX(0.5deg) translateY(-3px) scale(1.005); 
    }
    16% { 
        transform: perspective(1000px) rotateX(-0.3deg) translateY(2px) scale(0.998); 
    }
    24% { 
        transform: perspective(1000px) rotateX(0.4deg) translateY(-2px) scale(1.003); 
    }
    32% { 
        transform: perspective(1000px) rotateX(-0.2deg) translateY(1px) scale(0.999); 
    }
    45% { 
        transform: perspective(1000px) rotateX(0.1deg) translateY(-1px) scale(1.001); 
    }
    60% { 
        transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1); 
    }
    100% { 
        transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1); 
    }
} 
    }
}

.hero .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero-content { margin: 80px auto 0 auto; 
    text-align: center; 
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hero Logo with beating heart */
.hero-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-4); margin-bottom: var(--space-6);
}

.logo-icon {
    position: relative;
    z-index: 2;
    font-family: 'Fira Code', monospace;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    color: var(--color-white);
    animation: heartbeat 1.5s ease-in-out infinite;
}

.logo-icon .bracket { color: var(--color-secondary); }
.logo-icon .logo-text { color: var(--color-white); }

.logo-pulse {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px solid var(--color-secondary);
    border-radius: 50%;
    animation: spread-vibes 3s ease-out infinite;
    opacity: 0;
}

.logo-pulse.delay-1 { animation-delay: 1s; }
.logo-pulse.delay-2 { animation-delay: 2s; }

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

@keyframes spread-vibes {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(4); opacity: 0; }
}

.hero-badge { 
    display: inline-flex; 
    align-items: center; 
    gap: var(--space-2); 
    padding: var(--space-2) var(--space-4); 
    background: rgba(59,130,246,0.1); 
    border: 1px solid rgba(59,130,246,0.3); 
    border-radius: var(--radius-full); 
    font-size: var(--text-sm); 
    color: var(--color-secondary-light); 
    margin-top: var(--space-8); margin-bottom: var(--space-4); 
}
.hero-badge.hero-badge-small {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}
.hero-badge i { animation: pulse 2s ease infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.hero-title {  
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); 
    font-weight: var(--font-bold); 
    line-height: 1.1; 
    margin-top: var(--space-12); margin-bottom: var(--space-4);
    text-align: center;
    color: rgba(203, 213, 225, 0.85);
}

.hero-center-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-subtitle { font-family: var(--font-display); font-weight: var(--font-semibold); 
    font-size: var(--text-lg); 
    color: var(--color-gray-300); 
    max-width: 600px; 
    margin: 0 auto var(--space-4);
    text-align: center;
}

.hero-actions { margin-top: var(--space-4); margin-bottom: var(--space-6); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: var(--space-4); 
    flex-wrap: wrap; 
}

.hero-scroll { 
    position: absolute; 
    bottom: var(--space-6); 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: var(--space-2); 
    color: var(--color-gray-400); 
    font-size: var(--text-sm); 
    animation: bounce 2s ease infinite;
    text-decoration: none;
}
@keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } }

/* Section Labels */
.section-label { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-secondary); margin-bottom: var(--space-4); }
.section-label::before, .section-label::after { content: '◆'; font-size: 6px; color: var(--color-secondary); opacity: 0.7; }

/* About */
.about { background: var(--color-primary-light); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.about-content { text-align: center; display: flex; flex-direction: column; align-items: center; }
.about-content h2 { text-align: center; margin-bottom: var(--space-6); }
.about-content p { text-align: center; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8); width: 100%; }
.stat { text-align: center; }
.stat-value { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--font-bold); background: linear-gradient(135deg, var(--color-secondary), var(--color-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { font-size: var(--text-sm); color: var(--color-gray-300); margin-top: var(--space-3); }
.about-visual { position: relative; }
.about-image-wrapper { position: relative; border-radius: var(--radius-2xl); overflow: hidden; }
.about-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Services */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.service-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-2xl); padding: var(--space-8); transition: all var(--transition-normal); text-align: center; display: flex; flex-direction: column; align-items: center; }
.service-card:hover { transform: translateY(-8px); border-color: rgba(59,130,246,0.3); box-shadow: var(--shadow-2xl), var(--shadow-glow); }
.service-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-secondary), var(--color-accent)); border-radius: var(--radius-xl); font-size: var(--text-2xl); color: var(--color-white); margin-bottom: var(--space-4); transition: transform var(--transition-normal); }
.service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); }
.service-title { font-size: var(--text-xl); margin-bottom: var(--space-4); text-align: center; }
.service-card p { text-align: center; }
.service-description { color: var(--color-gray-300); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* Projects */
.projects { background: var(--color-primary-light); }
.projects-filter { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); margin-bottom: var(--space-10); flex-wrap: wrap; }
.filter-btn { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-gray-300); background: transparent; border: 1px solid var(--color-gray-700); border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); }
.filter-btn:hover, .filter-btn.active { color: var(--color-white); border-color: var(--color-secondary); background: rgba(59,130,246,0.1); }
.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.project-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-2xl); overflow: hidden; transition: all var(--transition-normal); display: flex; flex-direction: column; }
.project-card:hover { transform: translateY(-8px); border-color: rgba(59,130,246,0.3); box-shadow: var(--shadow-2xl), var(--shadow-glow); }
.project-image { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--color-gray-800); flex-shrink: 0; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.project-card:hover .project-image img { transform: scale(1.05); }
.project-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,22,40,0.9), transparent); display: flex; align-items: flex-end; padding: var(--space-4); opacity: 0; transition: opacity var(--transition-normal); }
.project-card:hover .project-overlay { opacity: 1; }
.project-content { padding: var(--space-6); text-align: center; display: flex; flex-direction: column; align-items: center; flex: 1; }
.project-category { display: inline-block; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.05em; background: rgba(59,130,246,0.2); color: var(--color-secondary-light); border-radius: var(--radius-full); margin-bottom: var(--space-4); }
.project-title { font-size: var(--text-xl); margin-bottom: var(--space-4); text-align: center; }
.project-description { color: var(--color-gray-300); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); text-align: center; flex: 1; max-width: 90%; margin-left: auto; margin-right: auto; }
.project-footer { display: flex; align-items: center; justify-content: center; width: 100%; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; }
.project-links { display: flex; gap: var(--space-3); margin-left: var(--space-3); }
.project-link { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--color-gray-800); border-radius: var(--radius-lg); color: var(--color-gray-300); transition: all var(--transition-fast); flex-shrink: 0; }
.project-link:hover { background: var(--color-secondary); color: var(--color-white); }

/* Skills */
.skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.skill-category { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-2xl); padding: var(--space-8); }
.skill-category-title { font-family: 'Fira Code', monospace; font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-secondary); margin-top: 0; margin-bottom: var(--space-6); text-align: center; }
.skill-category-title::before { content: '_'; opacity: 0.7; }
.skill-item { margin-bottom: var(--space-6); }
.skill-item:last-child { margin-bottom: 0; }
.skill-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.skill-name { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-gray-300); }
.skill-level { font-size: var(--text-xs); color: var(--color-gray-400); }

/* Testimonials */
.testimonials { background: var(--color-primary-light); }
.testimonials-slider { max-width: 800px; margin: 0 auto; }
.testimonial-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-2xl); padding: var(--space-8); text-align: center; }
.testimonial-quote { font-size: var(--text-3xl); color: var(--color-secondary); margin-top: var(--space-4); margin-bottom: var(--space-4); }
.testimonial-content { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-gray-300); margin-top: var(--space-4); margin-bottom: var(--space-6); font-style: italic; }
.testimonial-author { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
.testimonial-info h4 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.testimonial-info p { font-size: var(--text-sm); color: var(--color-gray-400); margin: 0; }

/* Contact */
.contact-wrapper { display: flex; flex-direction: column; align-items: center; max-width: 600px; margin: 0 auto; }
.contact-form-wrapper { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-2xl); padding: var(--space-8); width: 100%; }
.contact-footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); margin-top: var(--space-20); }
.contact-location { display: flex; align-items: center; gap: var(--space-3); color: var(--color-gray-300); font-size: var(--text-sm); }
.contact-location i { color: var(--color-secondary); font-size: var(--text-lg); }
.contact-socials { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.social-link { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--color-gray-800); border-radius: var(--radius-lg); color: var(--color-gray-300); font-size: var(--text-lg); transition: all var(--transition-fast); }
.social-link:hover { background: var(--color-secondary); color: var(--color-white); transform: translateY(-2px); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-group label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-gray-300); }
.form-control { padding: var(--space-3) var(--space-4); background: var(--color-gray-800); border: 1px solid var(--color-gray-700); border-radius: var(--radius-lg); color: var(--color-white); font-size: var(--text-lg); transition: border-color var(--transition-fast); }
.form-control:focus { border-color: var(--color-secondary); outline: none; }
.form-control::placeholder { color: var(--color-gray-600); }
textarea.form-control { min-height: 120px; resize: vertical; }

/* Footer */
.footer { background: var(--color-primary-dark); padding: var(--space-12) 0 var(--space-8); }
.footer-nav { display: flex; justify-content: center; margin-bottom: var(--space-6); }
.footer-menu { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }
.footer-separator { color: var(--color-gray-600); font-family: 'Fira Code', monospace; font-size: 12px; margin: 0 var(--space-2); }
.footer-link { font-family: 'Fira Code', monospace; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-gray-300); text-decoration: none; padding: var(--space-2) var(--space-2); transition: all var(--transition-fast); }
.footer-link:hover { color: var(--color-white); text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
.footer-bottom { display: flex; justify-content: center; padding-top: var(--space-6); border-top: 1px solid var(--color-gray-800); }
.footer-copyright { color: var(--color-gray-400); font-size: var(--text-sm); }

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-8);
    z-index: var(--z-fixed);
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    cursor: pointer;
    text-decoration: none;
    animation: whatsapp-pulse 2s ease-in-out infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
    animation: none;
}

@keyframes whatsapp-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
    10% { transform: scale(1.15) rotate(-5deg); box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5); }
    20% { transform: scale(1.15) rotate(5deg); }
    30% { transform: scale(1.15) rotate(-3deg); }
    40% { transform: scale(1) rotate(0deg); box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
}

.whatsapp-float .tooltip {
    position: absolute;
    right: 70px;
    background: var(--color-gray-800);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.whatsapp-float:hover .tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* WhatsApp Button - Site Theme Colors */
.whatsapp-float {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent)) !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4) !important;
}

.whatsapp-float:hover {
    box-shadow: 0 6px 30px rgba(59, 130, 246, 0.6) !important;
}

@keyframes whatsapp-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); }
    10% { transform: scale(1.15) rotate(-5deg); box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5); }
    20% { transform: scale(1.15) rotate(5deg); }
    30% { transform: scale(1.15) rotate(-3deg); }
    40% { transform: scale(1) rotate(0deg); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); }
}

.hero-badge {
    margin-bottom: var(--space-4) !important;
}