/* Modern Software Engineer Portfolio 2025 */
:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-tertiary:#1a1a2e;--bg-card:rgba(26,26,46,.8);--gradient-primary:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--gradient-accent:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);--gradient-success:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);--gradient-hero:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);--gradient-text:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--text-primary:#fff;--text-secondary:#b4b4c5;--text-tertiary:#8a8a9e;--text-accent:#667eea;--accent-primary:#667eea;--accent-secondary:#764ba2;--accent-cyan:#00f2fe;--accent-pink:#f093fb;--border-color:rgba(255,255,255,.1);--shadow-sm:0 2px 8px rgba(0,0,0,.3);--shadow-md:0 4px 20px rgba(0,0,0,.4);--shadow-lg:0 8px 40px rgba(0,0,0,.5);--shadow-glow:0 0 30px rgba(102,126,234,.3);--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:2rem;--spacing-lg:4rem;--spacing-xl:6rem;--font-primary:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;--font-secondary:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--transition-fast:.2s cubic-bezier(.4,0,.2,1);--transition-base:.3s cubic-bezier(.4,0,.2,1);--transition-slow:.5s cubic-bezier(.4,0,.2,1);--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-full:9999px;--max-width:1400px;--nav-height:80px}[data-theme=light]{--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--bg-card:rgba(255,255,255,.9);--text-primary:#1a1a2e;--text-secondary:#4a4a5e;--text-tertiary:#6a6a7e;--border-color:rgba(0,0,0,.1);--shadow-sm:0 2px 8px rgba(0,0,0,.08);--shadow-md:0 4px 20px rgba(0,0,0,.12);--shadow-lg:0 8px 40px rgba(0,0,0,.16)}*,::after,::before{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{font-family:var(--font-secondary);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;min-height:100vh;position:relative;transition:background-color var(--transition-base)}body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(102,126,234,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(118,75,162,.1) 0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(0,242,254,.05) 0%,transparent 50%);pointer-events:none;z-index:-1;animation:gradientShift 20s ease infinite}@keyframes gradientShift{0%,100%{opacity:1}50%{opacity:.8}}h1,h2,h3,h4,h5,h6{font-family:var(--font-primary);font-weight:700;line-height:1.2;margin-bottom:var(--spacing-sm)}h1{font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.02em}h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.01em}h3{font-size:clamp(1.5rem,3vw,2.5rem)}h4{font-size:clamp(1.25rem,2.5vw,2rem)}p{font-size:1.125rem;line-height:1.8;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}a{color:var(--text-accent);text-decoration:none;transition:all var(--transition-base)}a:hover{color:var(--accent-cyan)}.gradient-text{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientFlow 3s ease infinite;background-size:200% auto}@keyframes gradientFlow{0%,100%{background-position:0 center}50%{background-position:100% center}}.surname-fade{display:inline-block;animation:surnameFade 1.1s linear infinite;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@keyframes surnameFade{0%{opacity:1}40%{opacity:.1}60%{opacity:.1}100%{opacity:1}}
.nav{position:fixed;top:0;left:0;width:100%;height:var(--nav-height);background:rgba(10,10,15,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);z-index:1000;transition:all var(--transition-base)}.nav.scrolled{background:rgba(10,10,15,.95);box-shadow:var(--shadow-md)}.nav__container{max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-md);height:100%;display:flex;justify-content:space-between;align-items:center}.nav__logo{font-family:var(--font-primary);font-size:1.75rem;font-weight:800;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:transform var(--transition-base);cursor:pointer}.nav__logo:hover{transform:scale(1.05)}.nav__menu{display:flex;gap:var(--spacing-md);list-style:none;align-items:center}.nav__menu a{color:var(--text-secondary);font-weight:500;font-size:1rem;padding:.5rem 1rem;border-radius:var(--radius-sm);position:relative;transition:all var(--transition-base)}.nav__menu a::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--gradient-primary);transition:width var(--transition-base)}.nav__menu a.active::before,.nav__menu a:hover::before{width:80%}.nav__menu a.active,.nav__menu a:hover{color:var(--text-primary)}.theme-toggle{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-full);width:50px;height:28px;cursor:pointer;position:relative;transition:all var(--transition-base);margin-left:var(--spacing-sm)}.theme-toggle:hover{border-color:var(--accent-primary)}.theme-toggle::before{content:'🌙';position:absolute;top:50%;left:4px;transform:translateY(-50%);width:20px;height:20px;background:var(--gradient-primary);border-radius:50%;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center;font-size:.7rem}[data-theme=light] .theme-toggle::before{content:'☀️';left:calc(100% - 24px)}.nav__toggle{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;padding:.5rem;transition:transform var(--transition-base)}.nav__toggle:hover{transform:scale(1.1)}main{padding-top:var(--nav-height);min-height:100vh}.hero{min-height:calc(100vh - var(--nav-height));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:var(--spacing-xl) var(--spacing-md)}.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:800px;height:800px;background:radial-gradient(circle,rgba(102,126,234,.15) 0%,transparent 70%);border-radius:50%;animation:float 20s ease-in-out infinite}@keyframes float{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(30px,-30px) rotate(120deg)}66%{transform:translate(-20px,20px) rotate(240deg)}}.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-md);width:100%}.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl);align-items:flex-start;position:relative;z-index:1}
.hero-text{animation:fadeInUp .8s ease-out;position:relative;z-index:2;min-height:260px}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-text h1{margin-bottom:var(--spacing-md);animation:fadeInUp .8s ease-out .2s both}.hero-text h1 span{display:inline-block;animation:fadeInUp .8s ease-out .2s both}.hero-text h1 span:last-child{display:inline-block;animation:fadeInUp .8s ease-out .2s both}.highlight{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.8}}.subtitle{font-size:1.5rem;color:var(--accent-cyan);font-weight:600;margin-bottom:var(--spacing-sm);animation:fadeInUp .8s ease-out .4s both}.hero-text>p{font-size:1.2rem;margin-bottom:var(--spacing-md);animation:fadeInUp .8s ease-out .6s both}.cta-buttons{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;animation:fadeInUp .8s ease-out .8s both}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;border-radius:var(--radius-sm);font-weight:600;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-primary{background:var(--gradient-primary);border:0}.btn-outline{background:transparent;border:1px solid var(--border-color)}
/* Ambient color changing text for hero description */
.ambient-text{background:linear-gradient(120deg,#a5b4fc,#f093fb,#00f2fe,#a5b4fc);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:ambientShift 8s ease-in-out infinite}
@keyframes ambientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero-text p{color: var(--text-secondary);}
.hero-image{position:relative;animation:fadeIn 1s ease-out .5s both;display:flex;justify-content:center;padding:0;z-index:1;flex:0 0 auto;width:100%;left:0}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}.profile-image{width:100%;max-width:580px;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);position:relative;z-index:1;transition:transform var(--transition-slow)}.profile-image:hover{transform:scale(1.02) rotate(1deg)}.hero-image::before{content:'';position:absolute;top:-20px;right:-48px;width:88%;height:88%;background:var(--gradient-primary);border-radius:var(--radius-lg);z-index:0;opacity:.18;animation:pulse 3s ease-in-out infinite;transform:translateX(36px)}
section{padding:var(--spacing-xl) 0;position:relative}.section-header{text-align:center;margin-bottom:var(--spacing-lg)}.section-subtitle{font-size:1.25rem;color:var(--text-secondary);max-width:600px;margin:0 auto}.about-section{background:var(--bg-secondary);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}.about-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);align-items:center}.about-image{position:relative}.about-image img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.about-text h2{margin-bottom:var(--spacing-md)}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-sm);margin-top:var(--spacing-md)}.skill-item{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--spacing-sm);text-align:center;transition:all var(--transition-base)}.skill-item:hover{transform:translateY(-5px);border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}.projects-section{position:relative}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-lg)}.project-card-link{text-decoration:none;color:inherit}.project-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-base);cursor:pointer;position:relative;height:100%;display:flex;flex-direction:column}.project-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-base);z-index:0}.project-card:hover::before{opacity:.05}.project-card:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}.project-image{width:100%;height:200px;display:flex;align-items:center;justify-content:center;font-size:4rem;background:linear-gradient(135deg,rgba(102,126,234,.1),rgba(118,75,162,.1));position:relative;overflow:hidden}.project-image i{color:var(--accent-primary);transition:transform var(--transition-base);z-index:1}.project-card:hover .project-image i{transform:scale(1.1) rotate(5deg)}.project-content{padding:var(--spacing-md);flex:1;display:flex;flex-direction:column;position:relative;z-index:1}.project-content h3{font-size:1.5rem;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.project-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--spacing-sm)}.project-tags span{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--accent-cyan);padding:.25rem .75rem;border-radius:var(--radius-full);font-size:.875rem;font-weight:500;transition:all var(--transition-base)}.project-card:hover .project-tags span{border-color:var(--accent-primary);transform:translateY(-2px)}.project-content p{flex:1;margin-bottom:var(--spacing-sm)}.project-link{color:var(--accent-primary);font-weight:600;display:inline-flex;align-items:center;gap:.5rem;transition:all var(--transition-base)}.project-link i{transition:transform var(--transition-base)}.project-card:hover .project-link i{transform:translateX(5px)}.contact-section{background:var(--bg-secondary);border-top:1px solid var(--border-color)}.contact-container{max-width:800px;margin:0 auto}.contact-form{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-lg)}.form-group{margin-bottom:var(--spacing-md)}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text-primary)}.form-group input,.form-group textarea{width:100%;padding:1rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:1rem;transition:all var(--transition-base)}.form-group input:focus,.form-group textarea:focus{outline:0;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(102,126,234,.1)}.form-group textarea{min-height:150px;resize:vertical}.contact-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-sm);margin-top:var(--spacing-md)}.contact-item{background:var(--bg-tertiary);padding:var(--spacing-sm);border-radius:var(--radius-sm);border:1px solid var(--border-color);transition:all var(--transition-base)}.contact-item:hover{border-color:var(--accent-primary);transform:translateY(-2px)}.social-links{display:flex;gap:var(--spacing-sm);justify-content:center;margin-top:var(--spacing-md)}.social-link{width:50px;height:50px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all var(--transition-base)}.social-link:hover{background:var(--gradient-primary);border-color:transparent;transform:translateY(-5px) rotate(5deg);color:#fff}.footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:var(--spacing-md) 0;text-align:center;color:var(--text-tertiary)}.scroll-to-top{position:fixed;bottom:2rem;right:2rem;width:50px;height:50px;background:var(--gradient-primary);border:none;border-radius:50%;color:#fff;font-size:1.5rem;cursor:pointer;opacity:0;visibility:hidden;transition:all var(--transition-base);box-shadow:var(--shadow-glow);z-index:999}.scroll-to-top.visible{opacity:1;visibility:visible}.scroll-to-top:hover{transform:translateY(-5px);box-shadow:0 0 50px rgba(102,126,234,.6)}.skip-to-content{position:absolute;top:-100px;left:50%;transform:translateX(-50%);background:var(--gradient-primary);color:#fff;padding:1rem 2rem;border-radius:var(--radius-md);z-index:9999;transition:top var(--transition-base)}.skip-to-content:focus{top:1rem}.text-center{text-align:center}@media (max-width:1024px){:root{--spacing-lg:3rem;--spacing-xl:4rem}.about-content,.hero-content{grid-template-columns:1fr;gap:var(--spacing-md)}.hero-text{text-align:center}.cta-buttons{justify-content:center}.hero-image{text-align:center}.project-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}@media (max-width:768px){:root{--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--nav-height:70px}.nav__menu{position:fixed;top:var(--nav-height);left:0;width:100%;height:calc(100vh - var(--nav-height));background:rgba(10,10,15,.98);backdrop-filter:blur(20px);flex-direction:column;padding:var(--spacing-md);transform:translateX(-100%);transition:transform var(--transition-base);border-right:1px solid var(--border-color)}.nav__menu.active{transform:translateX(0)}.nav__toggle{display:block}.hero{min-height:auto;padding:var(--spacing-lg) var(--spacing-sm)}.project-grid{grid-template-columns:1fr}.btn,.cta-buttons{flex-direction:column}.btn{width:100%}}@media (max-width:480px){h1{font-size:2rem}h2{font-size:1.75rem}p{font-size:1rem}.profile-image{max-width:100%}}
/* ================================================================
   ADVANCED ENHANCEMENTS & ANIMATIONS
   Additional styles for portfolio enhancement
   ================================================================ */

/* Contact Quick Info */
.contact-quick-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--text-secondary);
    transition: all var(--transition-base);
}

.info-item i {
    color: var(--accent-primary);
    font-size: 1.2rem;
    transition: all var(--transition-base);
}

.info-item:hover i {
    transform: scale(1.2);
    color: var(--accent-cyan);
}

.info-item a {
    color: var(--text-secondary);
    transition: all var(--transition-base);
}

.info-item a:hover {
    color: var(--accent-cyan);
    transform: translateX(5px);
}

/* Education Items */
.education-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.education-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--gradient-primary);
    transition: height var(--transition-base);
}

.education-item:hover::before {
    height: 100%;
}

.education-item:hover {
    transform: translateX(10px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.education-item h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.education-item .degree {
    color: var(--accent-cyan);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.education-item .date {
    color: var(--text-tertiary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Work Experience */
.job {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.job::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--gradient-primary);
    transition: height var(--transition-base);
}

.job:hover::before {
    height: 100%;
}

.job:hover {
    transform: translateX(10px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.job h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.job .company {
    color: var(--accent-cyan);
    font-weight: 600;
    margin-bottom: 1rem;
}

.job ul {
    list-style: none;
    padding-left: 0;
}

.job ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.job ul li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--accent-primary);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Skill Categories */
.skill-category {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: all var(--transition-base);
}

.skill-category:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.skill-category h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.skill-category ul {
    list-style: none;
    padding: 0;
}

.skill-category ul li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: 1.5rem;
    transition: all var(--transition-base);
}

.skill-category ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-primary);
    font-weight: bold;
}

.skill-category ul li:hover {
    color: var(--accent-cyan);
    transform: translateX(5px);
}

/* CV Embed */
.cv-embed-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-lg);
}

.btn-cv {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-glow);
}

.btn-cv:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.5);
}

/* Contact Methods */
.contact-method {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    transition: all var(--transition-base);
}

.contact-method:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: white;
    transition: all var(--transition-base);
}

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

.contact-info-container {
    margin-top: 3rem;
}

.contact-info-container .contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.contact-method h3 {
    color: var(--text-primary);
    margin: 0.5rem 0;
    font-size: 1.1rem;
}

.contact-method a,
.contact-method p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    text-decoration: none;
}

.contact-method a:hover {
    color: var(--accent-cyan);
}

/* Animated Background Particles */
.particles-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: radial-gradient(circle, var(--accent-primary), transparent);
    border-radius: 50%;
    opacity: 0.2;
    animation: float-particle 20s infinite ease-in-out;
}

@keyframes float-particle {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
    }
    25% {
        transform: translateY(-100px) translateX(50px) scale(1.2);
    }
    50% {
        transform: translateY(-50px) translateX(-50px) scale(0.8);
    }
    75% {
        transform: translateY(-150px) translateX(100px) scale(1.1);
    }
}

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

.tilt-card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg) scale(1.02);
}

/* Skill Progress Bars */
.skill-bar {
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    height: 10px;
    margin: 0.5rem 0;
    overflow: hidden;
    position: relative;
}

.skill-progress {
    background: var(--gradient-primary);
    height: 100%;
    border-radius: inherit;
    transition: width 1.5s ease;
    position: relative;
}

.skill-progress::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

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

/* Stats Counter */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

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

.stat-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Loading Animation */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader {
    width: 50px;
    height: 50px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Page Transition */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-transition.active {
    transform: translateY(0);
}

/* Hover Glow Effect */
.glow-on-hover {
    position: relative;
    overflow: hidden;
}

.glow-on-hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.glow-on-hover:hover::after {
    width: 300px;
    height: 300px;
}

/* Animated Underline Links */
.animated-link {
    position: relative;
    display: inline-block;
}

.animated-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width var(--transition-base);
}

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

/* Floating Animation */
.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Reveal on Scroll */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: auto;
    transition: transform var(--transition-slow);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Contact Form Container */
.contact-form-container {
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-quick-info {
        gap: 0.75rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .contact-info-container .contact-info {
        grid-template-columns: 1fr;
    }
}
/* About Page Specific Styles */
.about-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.about-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    overflow: hidden;
    padding: 3rem 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 251, 245, 0.8) 0%, rgba(245, 230, 211, 0.6) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.about-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0) 60%);
    z-index: -1;
}

.about-title-content h1 {
    font-size: 3.5rem;
    color: var(--primary-dark);
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    position: relative;
    display: inline-block;
}

.about-title-content h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 2px;
}

.tagline {
    font-size: 1.5rem;
    color: var(--primary-light);
    margin-bottom: 2rem;
    font-weight: 500;
}

.about-image-container {
    width: 300px;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    margin: 2rem auto;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 5px solid white;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.about-image-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.about-title-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.contact-info {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.contact-info p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin: 0.5rem 0;
}

.contact-info a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.cv-embed-section {
    margin-top: 4rem;
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.cv-embed-section h2 {
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
    font-size: 2rem;
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
}

.cv-embed-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 2px;
}

.cv-embed-container {
    margin-top: 2rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* Responsive Design */
@media (min-width: 768px) {
    .about-header {
        flex-direction: row;
        text-align: left;
        padding: 4rem;
    }
    
    .about-title-content {
        flex: 1;
        padding-right: 4rem;
    }
    
    .about-image-container {
        margin: 0;
        flex-shrink: 0;
    }
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-section > * {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.about-section > *:nth-child(1) { animation-delay: 0.1s; }
.about-section > *:nth-child(2) { animation-delay: 0.2s; }
.about-section > *:nth-child(3) { animation-delay: 0.3s; }
.about-section > *:nth-child(4) { animation-delay: 0.4s; }

/* ================================================================
   FOOTER STYLES - Lifehacker Style
   ================================================================ */

.footer {
    background: #1a1a1a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem 0 2rem;
    margin-top: 4rem;
    text-align: center;
}

.footer-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

/* Social Media Icons - Colored */
.footer-social {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: white;
    transition: all var(--transition-base);
    font-size: 1.1rem;
    border: none;
}

/* LinkedIn - Blue */
.footer-social a[aria-label="LinkedIn"] {
    background: #0077b5;
}

.footer-social a[aria-label="LinkedIn"]:hover {
    background: #005885;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 119, 181, 0.4);
}

/* GitHub - Dark Gray */
.footer-social a[aria-label="GitHub"] {
    background: #333;
}

.footer-social a[aria-label="GitHub"]:hover {
    background: #24292e;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(51, 51, 51, 0.4);
}

/* Instagram - Gradient */
.footer-social a[aria-label="Instagram"] {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.footer-social a[aria-label="Instagram"]:hover {
    background: linear-gradient(45deg, #d87b2a 0%, #c85a2f 25%, #b91f35 50%, #a91a56 75%, #9a1376 100%);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(225, 48, 108, 0.4);
}

.footer-social a i {
    transition: transform var(--transition-base);
}

.footer-social a:hover i {
    transform: scale(1.1);
}

/* Footer Navigation */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.footer-nav a {
    color: #999;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color var(--transition-base);
    position: relative;
}

.footer-nav a:hover {
    color: #fff;
}

.footer-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #667eea;
    transition: width var(--transition-base);
}

.footer-nav a:hover::after {
    width: 100%;
}

/* Copyright */
.footer-content p {
    color: #666;
    margin: 1rem 0 0;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-nav {
        gap: 1rem;
        font-size: 0.85rem;
    }
    
    .footer-social {
        gap: 0.5rem;
    }
    
    .footer-social a {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}