:root{--bg-main: #f0f4f5;--bg-card: rgba(255, 255, 255, .7);--bg-card-hover: rgba(255, 255, 255, .95);--text-main: #1d4a53;--text-muted: #5e7a7f;--primary: #2c6e7c;--secondary: #62b0a5;--accent: #b1d0ca;--border-color: rgba(44, 110, 124, .1);--shadow-sm: 0 4px 6px -1px rgba(44, 110, 124, .1);--shadow-glow: 0 0 20px rgba(98, 176, 165, .3)}[data-theme=dark]{--bg-main: #1a2c32;--bg-card: rgba(44, 110, 124, .15);--bg-card-hover: rgba(44, 110, 124, .25);--text-main: #ffffff;--text-muted: #c8cfd0;--primary: #62b0a5;--secondary: #2c6e7c;--accent: #3d8b99;--border-color: rgba(255, 255, 255, .1);--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, .3);--shadow-glow: 0 0 25px rgba(98, 176, 165, .2)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{text-decoration:none;color:inherit}button{border:none;background:none;font:inherit;cursor:pointer;outline:none}ul,ol{list-style:none}img{max-width:100%;height:auto;display:block}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes float{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,-20px,0)}}body{background-color:var(--bg-main);color:var(--text-main);font-family:Inter,sans-serif;overflow-x:hidden;transition:background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1)}::selection{background:#3d8b99;color:#fff}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:4px;opacity:.5}::-webkit-scrollbar-thumb:hover{background:var(--text-main)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}@media(max-width:768px){.container{padding:0 .5rem}}.gradient-text{background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.header{position:fixed;top:0;left:0;width:100%;z-index:100;padding:1rem 0;transition:padding .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-bottom:1px solid var(--border-color)}.header.scrolled{padding:.5rem 0;box-shadow:var(--shadow-sm)}.header .container{display:flex;align-items:center;justify-content:space-between}.header .logo{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:700;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.header .nav{display:flex;align-items:center;gap:2rem}.header .nav ul{display:flex;gap:2rem}@media(max-width:768px){.header .nav ul{display:none}}.header .nav a{font-weight:500;color:var(--text-muted);transition:color .2s;position:relative}.header .nav a:after{content:"";position:absolute;width:0;height:2px;bottom:-4px;left:0;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);transition:width .2s}.header .nav a:hover,.header .nav a.active{color:var(--primary)}.header .nav a:hover:after,.header .nav a.active:after{width:100%}.footer{padding:4rem 0;background:var(--bg-main);border-top:1px solid var(--border-color);margin-top:4rem}.footer .container{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;text-align:center}.footer p{color:var(--text-muted);font-size:.9rem}.footer .socials{display:flex;gap:1rem}.footer .socials a{color:var(--text-muted);transition:all .2s;display:flex;align-items:center;justify-content:center}.footer .socials a:hover{color:var(--primary);transform:translateY(-2px)}.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding-top:4rem;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;bottom:0;left:5%;right:5%;height:1px;background:linear-gradient(to right,transparent 0%,rgba(var(--primary),.4) 30%,rgba(var(--primary),.4) 70%,transparent 100%);filter:blur(.5px);box-shadow:0 0 20px var(--primary);opacity:.3;z-index:1;pointer-events:none}.hero:before{content:"";position:absolute;top:-10%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(98,176,165,.15) 0%,transparent 70%);filter:blur(80px);z-index:-1;animation:float 10s ease-in-out infinite}.hero:after{content:"";position:absolute;bottom:-10%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(44,110,124,.1) 0%,transparent 70%);filter:blur(80px);z-index:-1;animation:float 15s ease-in-out infinite reverse}.hero .container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}@media(max-width:1024px){.hero .container{grid-template-columns:1fr;text-align:center}}.hero .content{max-width:600px;text-align:left}@media(max-width:1024px){.hero .content{max-width:100%;text-align:center;margin:0 auto}}.hero .image-area{display:flex;justify-content:center;align-items:center}@media(max-width:1024px){.hero .image-area{order:-1}}.hero .image-area .image-placeholder{position:relative;width:100%;max-width:400px;aspect-ratio:1;border-radius:24px;overflow:hidden;border:4px solid var(--primary);box-shadow:var(--shadow-glow);background:var(--bg-card)}.hero .image-area .image-placeholder img{width:100%;height:100%;object-fit:cover;display:block}.hero .image-area .image-placeholder:empty:before{content:"Your Photo";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-muted);font-size:1.2rem}.hero h2{font-size:1.5rem;color:var(--primary);margin-bottom:.5rem;font-weight:500;opacity:0;animation:fadeInUp .3s ease forwards;animation-delay:.2s}.hero h1{font-family:Outfit,sans-serif;font-size:4rem;font-weight:800;line-height:1.1;margin-bottom:1rem;opacity:0;animation:fadeInUp .3s ease forwards;animation-delay:.4s}@media(max-width:768px){.hero h1{font-size:2.5rem}}.hero h1 .name{background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block}.hero p{font-size:1.25rem;color:var(--text-muted);margin-bottom:2rem;line-height:1.6;opacity:0;animation:fadeInUp .3s ease forwards;animation-delay:.6s}.hero .buttons{display:flex;gap:1rem;opacity:0;animation:fadeInUp .3s ease forwards;animation-delay:.8s}@media(max-width:1024px){.hero .buttons{justify-content:center}}@media(max-width:768px){.hero .buttons{flex-direction:column}}.hero .btn.primary{display:inline-flex;align-items:center;justify-content:center;padding:1rem 2rem;border-radius:9999px;font-weight:600;font-size:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;cursor:pointer;text-decoration:none;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;box-shadow:var(--shadow-glow);border:none}.hero .btn.primary:hover{transform:translateY(-2px);box-shadow:0 0 30px #2c6e7c66;color:#fff}.hero .btn.outline{display:inline-flex;align-items:center;justify-content:center;padding:1rem 2rem;border-radius:9999px;font-weight:600;font-size:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;cursor:pointer;text-decoration:none;border:2px solid rgba(44,110,124,.2);color:var(--text-main);background:transparent}.hero .btn.outline:hover{border-color:var(--primary);color:#fff;background:var(--primary);transform:translateY(-2px)}.projects{padding:4rem 0;position:relative;background:#62b0a508}.projects:after{content:"";position:absolute;bottom:0;left:5%;right:5%;height:1px;background:linear-gradient(to right,transparent 0%,rgba(var(--accent),.4) 30%,rgba(var(--accent),.4) 70%,transparent 100%);filter:blur(.5px);box-shadow:0 0 20px var(--accent);opacity:.3;z-index:1;pointer-events:none}.projects .section-title{text-align:center;margin-bottom:4rem}.projects .section-title h2{font-size:2.5rem;font-family:Outfit,sans-serif;margin-bottom:.5rem;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.projects .section-title p{color:var(--text-muted);max-width:600px;margin:0 auto}.projects .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}@media(max-width:768px){.projects .grid{grid-template-columns:1fr}}.project-card{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:24px;overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);will-change:transform;height:100%;display:flex;flex-direction:column;position:relative;border:1px solid rgba(0,0,0,.05)}.project-card:hover{transform:translateY(-10px);border-color:#2c6e7c4d;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;background:var(--bg-card-hover)}.project-card:hover .image-wrapper img{transform:scale(1.05)}.project-card .image-wrapper{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;border-bottom:1px solid rgba(255,255,255,.05)}.project-card .image-wrapper img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.project-card .image-wrapper .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0006;opacity:0;transition:opacity .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.project-card:hover .image-wrapper .overlay{opacity:1}.project-card .content{padding:2rem;flex:1;display:flex;flex-direction:column}.project-card .content h3{font-size:1.5rem;margin-bottom:.5rem;font-weight:600}.project-card .content p{color:var(--text-muted);margin-bottom:1rem;font-size:.95rem;flex:1}.project-card .content .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}.project-card .content .tag{font-size:.8rem;padding:4px 10px;border-radius:9999px;background:#2c6e7c1a;color:#3d8b99;border:1px solid rgba(44,110,124,.2)}.project-card .content .links{margin-top:1rem;display:flex;gap:1rem}.project-card .content .links a{display:inline-flex;align-items:center;justify-content:center;padding:1rem 2rem;border-radius:9999px;font-weight:600;font-size:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;cursor:pointer;text-decoration:none;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;box-shadow:var(--shadow-glow);border:none}.project-card .content .links a:hover{transform:translateY(-2px);box-shadow:0 0 30px #2c6e7c66;color:#fff}.project-card .content .links a{padding:.5rem 2rem;font-size:.9rem}.about{padding:4rem 0;position:relative}.about:after{content:"";position:absolute;bottom:0;left:5%;right:5%;height:1px;background:linear-gradient(to right,transparent 0%,rgba(var(--secondary),.4) 30%,rgba(var(--secondary),.4) 70%,transparent 100%);filter:blur(.5px);box-shadow:0 0 20px var(--secondary);opacity:.3;z-index:1;pointer-events:none}.about .about-bio{padding:0 2rem;margin-bottom:4rem;max-width:1000px;margin-left:auto;margin-right:auto}.about .about-bio h2{font-size:2.5rem;font-family:Outfit,sans-serif;margin-bottom:2rem;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-align:center}.about .about-bio .content{background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:24px;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.about .about-bio .content p{color:var(--text-main);line-height:1.8;margin-bottom:2rem;font-size:1.1rem}.about .about-bio .content p:last-child{margin-bottom:0}.about .tech-marquee-section .tech-title{font-size:1.2rem;margin-bottom:2rem;color:var(--text-main);text-align:center;font-family:Outfit,sans-serif}.about .tech-marquee-section .marquee{width:100%;overflow:hidden;padding:2rem 0;background:#62b0a508;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);position:relative}.about .tech-marquee-section .marquee:before,.about .tech-marquee-section .marquee:after{content:"";position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}.about .tech-marquee-section .marquee:before{left:0;background:linear-gradient(to right,var(--bg-main),transparent)}.about .tech-marquee-section .marquee:after{right:0;background:linear-gradient(to left,var(--bg-main),transparent)}.about .tech-marquee-section .marquee .marquee-content{display:flex;gap:4rem;width:max-content;animation:marquee 40s linear infinite}.about .tech-marquee-section .marquee .marquee-content:hover{animation-play-state:paused}.about .tech-marquee-section .marquee .skill-item{padding:.5rem;background:transparent;color:var(--text-muted);border:1px solid transparent;font-weight:600;white-space:nowrap;transition:all .3s ease;display:flex;align-items:center;gap:1rem;filter:grayscale(100%);opacity:.5}.about .tech-marquee-section .marquee .skill-item .skill-icon{display:flex;font-size:2.2rem}.about .tech-marquee-section .marquee .skill-item .skill-name{font-size:1.25rem}.about .tech-marquee-section .marquee .skill-item:hover{background:transparent;color:var(--brand-color);transform:translateY(-8px) scale(1.05);filter:grayscale(0%);opacity:1}.about .tech-marquee-section .marquee .skill-item:hover .skill-icon{color:var(--brand-color);filter:drop-shadow(0 0 15px var(--brand-color))}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.education{padding:4rem 0;position:relative}.education:after{content:"";position:absolute;bottom:0;left:5%;right:5%;height:1px;background:linear-gradient(to right,transparent 0%,rgba(var(--secondary),.4) 30%,rgba(var(--secondary),.4) 70%,transparent 100%);filter:blur(.5px);box-shadow:0 0 20px var(--secondary);opacity:.3;z-index:1;pointer-events:none}.education .section-title{text-align:center;margin-bottom:4rem}.education .section-title h2{font-size:2.5rem;font-family:Outfit,sans-serif;margin-bottom:.5rem;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.education .section-title p{color:var(--text-muted);font-size:1.1rem}.education .education-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:1100px;margin:0 auto;padding:0 2rem}.education .education-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:24px;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;position:relative;overflow:hidden}.education .education-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);opacity:.6}.education .education-card .duration{display:inline-block;padding:4px 12px;background:#62b0a51a;color:var(--secondary);border-radius:9999px;font-size:.9rem;font-weight:600;margin-bottom:1rem;border:1px solid rgba(98,176,165,.2)}.education .education-card h3{font-size:1.4rem;color:var(--text-main);margin-bottom:.25rem;font-family:Outfit,sans-serif}.education .education-card .institution{font-size:1.1rem;color:var(--secondary);margin-bottom:1rem;font-weight:500}.education .education-card p{color:var(--text-muted);line-height:1.6;font-size:1rem}.education .education-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px -15px #0000004d;border-color:var(--secondary)}.education .education-card:hover:before{opacity:1}.contact{padding:4rem 0;text-align:center;position:relative;overflow:hidden;background:#2c6e7c05}.contact:before{content:"";position:absolute;top:-10%;left:-10%;width:40%;height:60%;background:radial-gradient(circle,rgba(98,176,165,.05) 0%,transparent 70%);z-index:-1}.contact .container{max-width:800px;margin:0 auto;padding:0 2rem}.contact .contact-header{margin-bottom:4rem}.contact .contact-header h2{font-size:3rem;font-family:Outfit,sans-serif;margin-bottom:.5rem;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.contact .contact-header p{color:var(--text-muted);font-size:1.1rem;max-width:600px;margin:0 auto;line-height:1.6}.contact .contact-box{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:24px;padding:4rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;text-align:left;transition:transform .3s ease,box-shadow .3s ease}.contact .contact-box:hover{transform:translateY(-5px);box-shadow:var(--shadow-glow)}.contact .contact-form{display:grid;gap:2rem}.contact .contact-form .form-group{display:flex;flex-direction:column;gap:.5rem}.contact .contact-form .form-group label{font-weight:600;color:var(--text-main);font-size:.95rem;letter-spacing:.02em}.contact .contact-form .form-group input,.contact .contact-form .form-group textarea{padding:1rem;background:#ffffff0d;border:1px solid var(--border-color);border-radius:12px;color:var(--text-main);font-family:inherit;font-size:1rem;transition:all .2s ease}.contact .contact-form .form-group input:focus,.contact .contact-form .form-group textarea:focus{outline:none;border-color:var(--primary);background:#ffffff1a;box-shadow:0 0 0 4px #2c6e7c1a}.contact .contact-form .form-group input::placeholder,.contact .contact-form .form-group textarea::placeholder{color:var(--text-muted);opacity:.6}.contact .contact-form .form-group textarea{resize:vertical}.contact .contact-form .btn{display:flex;align-items:center;justify-content:center;padding:1rem 4rem;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;border:none;border-radius:12px;font-weight:600;font-size:1.1rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.contact .contact-form .btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-glow);opacity:.95}.contact .contact-form .btn:active:not(:disabled){transform:translateY(0)}.contact .contact-form .btn:disabled{opacity:.7;cursor:not-allowed}.contact .contact-form .btn.loading{color:transparent}.contact .contact-form .btn.loading:after{content:"";position:absolute;width:20px;height:20px;border:2px solid #ffffff;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}.contact .contact-form .status-message{text-align:center;padding:1rem;border-radius:8px;font-weight:500;margin-top:1rem;animation:fadeIn .3s ease}.contact .contact-form .status-message.success{background:#62b0a51a;color:#3d8b99;border:1px solid rgba(98,176,165,.2)}.contact .contact-form .status-message.error{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}[data-theme=dark] .contact .contact-box{background:#2c6e7c1a}[data-theme=dark] .contact .contact-form input,[data-theme=dark] .contact .contact-form textarea{background:#ffffff05}[data-theme=dark] .contact .contact-form input:focus,[data-theme=dark] .contact .contact-form textarea:focus{background:#ffffff0d}