html,body{font-family:Arial,sans-serif;line-height:1.5;background-color:#f9f9f9;color:#333}button{cursor:pointer}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:16px;line-height:1.6;color:#111827;background-color:#f9fafb;scroll-behavior:smooth}.App{min-height:100vh;display:flex;flex-direction:column}a{text-decoration:none;color:inherit}button{font-family:inherit;background:none;border:none;cursor:pointer}.header{position:fixed;top:0;width:100%;z-index:50;transition:all .3s ease;background-color:transparent}.header.scrolled{background-color:#fff;box-shadow:0 2px 8px #0000001a}.nav-container{max-width:1200px;margin:0 auto;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.nav-left{font-size:24px;font-weight:700;color:#333}.nav-menu button,.mobile-menu button{margin-left:1rem;font-size:16px;background:none;border:none;color:#333;cursor:pointer}.nav-menu button:hover,.mobile-menu button:hover{color:#007bff}.desktop-only{display:flex}.mobile-menu-button{display:none;background:none;border:none}.mobile-menu{display:flex;flex-direction:column;padding:1rem;border-top:1px solid #ccc}@media (max-width: 768px){.desktop-only{display:none}.mobile-menu-button{display:block}}.hero-section{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(135deg,#2563eb,#9333ea,#ec4899);overflow:hidden}.hero-section:before{content:"";position:absolute;inset:0;background:url(https://www.transparenttextures.com/patterns/cubes.png);opacity:.15;z-index:0}.hero-section:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.08) 0%,transparent 70%);z-index:1}.hero-content{position:relative;z-index:2;text-align:center;color:#fff;padding:0 2rem;animation:fadeInUp 1.2s cubic-bezier(.77,0,.175,1)}.hero-title{font-size:clamp(2.5rem,7vw,4.5rem);font-weight:900;margin-bottom:1.5rem;letter-spacing:-2px;background:linear-gradient(90deg,#fff 60%,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 4px 32px rgba(60,0,100,.18),0 1px 0 #fff;animation:pulseGlow 2.5s infinite}.hero-subtitle{font-size:clamp(1.1rem,2vw,1.7rem);margin-bottom:2.2rem;opacity:.93;text-shadow:0 2px 8px rgba(80,0,80,.1);animation:fadeIn 2s .5s both}.highlight{font-weight:700;color:#f472b6;text-shadow:0 1px 8px #9333ea44}.hero-button{background:linear-gradient(90deg,#fff 70%,#f472b6);color:#9333ea;padding:.85rem 2.5rem;border:none;border-radius:999px;font-weight:700;font-size:1.1rem;display:inline-flex;align-items:center;gap:.7rem;box-shadow:0 2px 16px #9333ea33,0 1px #fff;transition:background .3s,box-shadow .3s,transform .2s;cursor:pointer;position:relative;overflow:hidden}.hero-button:after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 32px 8px #f472b655;opacity:0;transition:opacity .3s;pointer-events:none}.hero-button:hover{background:linear-gradient(90deg,#f472b6,#fff);box-shadow:0 4px 32px #9333ea55,0 1px #fff;transform:translateY(-2px) scale(1.04)}.hero-button:hover:after{opacity:.5}@keyframes pulseGlow{0%,to{text-shadow:0 4px 32px rgba(60,0,100,.18),0 1px 0 #fff}50%{text-shadow:0 8px 48px #f472b688,0 1px 0 #fff}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 600px){.hero-title{font-size:2.2rem}.hero-subtitle{font-size:1rem}.hero-content{padding:0 .5rem}.hero-button{font-size:1rem;padding:.7rem 1.5rem}}.about-section{min-height:100vh;padding:5rem 1.5rem;background:linear-gradient(120deg,#f3e8ff,#d142c5);position:relative;overflow:hidden}.about-section:before{content:"";position:absolute;inset:0;background:url(https://www.transparenttextures.com/patterns/diamond-upholstery.png);opacity:.12;z-index:0}.about-section:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(147,51,234,.08) 0%,transparent 70%);z-index:1}.about-container{max-width:1000px;margin:0 auto;position:relative;z-index:2}.about-title{text-align:center;font-size:2.7rem;font-weight:900;margin-bottom:3rem;color:#9333ea;letter-spacing:-1px;text-shadow:0 2px 16px #ec489944;background:linear-gradient(90deg,#9333ea 60%,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.about-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}@media (min-width: 768px){.about-grid{grid-template-columns:1fr 1fr}}.about-image-wrapper{display:flex;justify-content:center;align-items:center}.about-image{width:350px;height:350px;border-radius:50%;object-fit:cover;box-shadow:0 8px 32px #9333ea33,0 1px #fff;border:6px solid #fff;background:linear-gradient(135deg,#9333ea,#f472b6);transition:box-shadow .3s;position:relative}.about-image:hover{box-shadow:0 0 48px 12px #f472b6aa,0 1px #fff}.about-text p{font-size:1.08rem;color:#333;line-height:1.85;margin-bottom:1.3rem;text-shadow:0 1px 8px #9333ea11;letter-spacing:.01em}.about-text .highlight{color:#9333ea;font-weight:700;text-shadow:0 1px 8px #f472b644}.about-buttons{display:flex;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}.about-button{display:inline-flex;align-items:center;gap:.7rem;padding:.85rem 2rem;border-radius:999px;font-weight:700;text-decoration:none;font-size:1.08rem;transition:background .3s,box-shadow .3s,transform .2s;color:#fff;box-shadow:0 2px 16px #9333ea22,0 1px #fff;position:relative;overflow:hidden;border:none;cursor:pointer}.about-button.email{background:linear-gradient(90deg,#2563eb 70%,#9333ea)}.about-button.email:hover{background:linear-gradient(90deg,#9333ea,#2563eb);box-shadow:0 4px 32px #2563eb44,0 1px #fff;transform:translateY(-2px) scale(1.04)}.about-button.github{background:linear-gradient(90deg,#333 70%,#f472b6)}.about-button.github:hover{background:linear-gradient(90deg,#f472b6,#333);box-shadow:0 4px 32px #f472b644,0 1px #fff;transform:translateY(-2px) scale(1.04)}@media (max-width: 600px){.about-title{font-size:2rem}.about-image{width:160px;height:160px}.about-text p{font-size:.98rem}.about-button{font-size:1rem;padding:.7rem 1.2rem}}.skills-section{padding:5rem 1.5rem;min-height:100vh;background:linear-gradient(120deg,#f3e8ff,#be4bb5);position:relative;overflow:hidden}.skills-section:before{content:"";position:absolute;inset:0;background:url(https://www.transparenttextures.com/patterns/diamond-upholstery.png);opacity:.1;z-index:0}.skills-section:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(147,51,234,.08) 0%,transparent 70%);z-index:1}.skills-container{max-width:1000px;margin:0 auto;position:relative;z-index:2}.skills-title{text-align:center;font-size:2.7rem;font-weight:900;margin-bottom:3rem;color:#9333ea;letter-spacing:-1px;text-shadow:0 2px 16px #ec489944;background:linear-gradient(90deg,#9333ea 60%,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.skills-grid{display:grid;grid-template-columns:1fr;gap:2rem}@media (min-width: 768px){.skills-grid{grid-template-columns:1fr 1fr}}.skill-card{background:linear-gradient(120deg,#fff 80%,#f3e8ff);padding:2rem 1.5rem;border-radius:18px;box-shadow:0 8px 32px #9333ea22,0 1px #fff;border:2px solid #f472b6;position:relative;transition:box-shadow .3s,transform .2s}.skill-card:hover{box-shadow:0 0 48px 12px #f472b6aa,0 1px #fff;transform:translateY(-2px) scale(1.03)}.skill-header{display:flex;justify-content:space-between;margin-bottom:.7rem;font-weight:700;color:#9333ea;font-size:1.15rem;letter-spacing:.01em}.skill-bar-bg{background:linear-gradient(90deg,#e5e5e5 70%,#f3e8ff);height:12px;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px #9333ea11}.skill-bar-fill{height:100%;background:linear-gradient(90deg,#9333ea,#f472b6);box-shadow:0 0 16px #f472b655;transition:width 1s cubic-bezier(.77,0,.175,1);border-radius:6px 0 0 6px}@media (max-width: 600px){.skills-title{font-size:2rem}.skill-card{padding:1.2rem .7rem}.skill-header{font-size:1rem}}.projects-section{padding:5rem 1.5rem;background:linear-gradient(120deg,#f3e8ff,#d968dd);min-height:100vh}.projects-container{max-width:1200px;margin:0 auto}.projects-title{text-align:center;font-size:2.5rem;font-weight:700;margin-bottom:3rem;color:#a21caf}.projects-grid{display:grid;gap:2rem;grid-template-columns:1fr}.project-card{background:linear-gradient(135deg,#fdf2fa,#f1f5f9 60%,#f3e8ff);border-radius:16px;overflow:hidden;box-shadow:0 6px 16px #a21caf12;transition:box-shadow .3s ease,transform .3s;border:1px solid #fbcfe8}.project-card:hover{box-shadow:0 10px 24px #ec489921;transform:translateY(-4px) scale(1.02)}.project-image{width:100%;height:200px;object-fit:cover}.project-content{padding:1.5rem}.project-title{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;color:#ec4899}.project-description{font-size:.98rem;color:#7c3aed;margin-bottom:1rem}.project-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.project-tag{background:linear-gradient(90deg,#fbcfe8,#e9d5ff);color:#a21caf;padding:.3rem .75rem;border-radius:999px;font-size:.78rem;font-weight:500;letter-spacing:.01em;border:1px solid #f3e8ff}.project-links{display:flex;gap:1rem}.project-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.95rem;color:#ec4899;text-decoration:none;font-weight:500;transition:color .2s}.project-link:hover{color:#a21caf}.contact-section{background:linear-gradient(120deg,#f3e8ff,#d165c3);color:#9333ea;padding:5rem 1.5rem;text-align:center;min-height:50vh;position:relative;overflow:hidden}.contact-section:before{content:"";position:absolute;inset:0;background:url(https://www.transparenttextures.com/patterns/diamond-upholstery.png);opacity:.1;z-index:0}.contact-section:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(147,51,234,.08) 0%,transparent 70%);z-index:1}.contact-container{max-width:700px;margin:0 auto;position:relative;z-index:2}.contact-title{font-size:2.7rem;font-weight:900;margin-bottom:2rem;color:#9333ea;letter-spacing:-1px;text-shadow:0 2px 16px #ec489944;background:linear-gradient(90deg,#9333ea 60%,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.contact-message{font-size:1.2rem;margin-bottom:2.5rem;color:#333;text-shadow:0 1px 8px #9333ea11}.contact-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem}.contact-button{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 2.2rem;border-radius:999px;font-weight:700;font-size:1.08rem;text-decoration:none;transition:background .3s,box-shadow .3s,transform .2s;color:#fff;box-shadow:0 2px 16px #9333ea22,0 1px #fff;position:relative;overflow:hidden;border:none;cursor:pointer}.contact-button.email{background:linear-gradient(90deg,#2563eb 70%,#9333ea)}.contact-button.email:hover{background:linear-gradient(90deg,#9333ea,#2563eb);box-shadow:0 4px 32px #2563eb44,0 1px #fff;transform:translateY(-2px) scale(1.04)}.contact-button.github{background:linear-gradient(90deg,#333 70%,#f472b6)}.contact-button.github:hover{background:linear-gradient(90deg,#f472b6,#333);box-shadow:0 4px 32px #f472b644,0 1px #fff;transform:translateY(-2px) scale(1.04)}@media (max-width: 600px){.contact-title{font-size:2rem}.contact-button{font-size:1rem;padding:.7rem 1.2rem}}.footer-section{background-color:#111827;color:#fff;padding:2rem 1.5rem}.footer-container{max-width:800px;margin:0 auto;text-align:center;font-size:.9rem}