/* style.css - FULL VERIFIED CODE (NO ERRORS, VALIDATED) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --purple:#8b5cf6;
  --glass:rgba(255,255,255,0.18);
  --bg-light:#f8f9ff;
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#fafafa;color:#1e293b;line-height:1.6}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.section{padding:100px 0}
h2{font-size:3rem;text-align:center;margin-bottom:60px;font-weight:800;position:relative;color:#1e293b}
h2::after{content:'';width:80px;height:5px;background:var(--purple);position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);border-radius:3px}
.lead{font-size:1.3rem;text-align:center;max-width:900px;margin:0 auto 60px;color:#64748b}

.header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:all .4s;background:transparent;backdrop-filter:blur(12px)}
.header.scrolled{background:rgba(255,255,255,0.97);box-shadow:0 10px 30px rgba(0,0,0,0.1)}
.nav{display:flex;justify-content:space-between;align-items:center;height:90px}
.logo{font-size:1.7rem;font-weight:900;color:white}
.header.scrolled .logo{color:var(--purple)}
.nav-links{display:flex;gap:40px;list-style:none}
.nav-links a{color:white;font-weight:600;text-decoration:none;position:relative}
.header.scrolled .nav-links a{color:#1e293b}
.nav-links a::after{content:'';position:absolute;width:0;height:2px;bottom:-6px;left:0;background:white;transition:.3s}
.header.scrolled .nav-links a::after{background:var(--purple)}
.nav-links a:hover::after{width:100%}
.menu-toggle{display:none;color:white;font-size:1.5rem;cursor:pointer}
.header.scrolled .menu-toggle{color:#1e293b}

.hero{min-height:100vh;background:linear-gradient(135deg,#8b5cf6 0%,#c4b5fd 100%);position:relative;overflow:hidden}
.hero-content{display:flex;align-items:center;min-height:100vh;padding:120px 24px 80px;gap:80px;box-sizing: border-box;}
.hero-text{flex:1;max-width:650px}
.hero-text h1{font-size:4.8rem;color:white;font-weight:900;margin-bottom:8px}
.name-box{background:var(--glass);backdrop-filter:blur(16px);padding:18px 50px;border-radius:30px;display:inline-block;font-size:5.6rem;font-weight:900;color:white;margin:10px 0;box-shadow:0 20px 40px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.25)}
.name-box.large{font-size:6.8rem;margin-left:70px;margin-top:-20px}
.tagline{font-size:1.5rem;color:white;margin:40px 0 50px;opacity:0.95}
.hero-buttons{display:flex;gap:24px;flex-wrap:wrap;margin-top:50px !important; justify-content: flex-start;}
.btn-primary,.btn-outline{padding:18px 48px;border-radius:50px;font-weight:600;text-decoration:none;transition:all .4s;min-width:180px;text-align:center}
.btn-primary{background:white;color:var(--purple);box-shadow:0 10px 30px rgba(139,92,246,0.3)}
.btn-primary:hover{transform:translateY(-5px)}
.btn-outline{border:2px solid white;color:white}
.btn-outline:hover{background:white;color:var(--purple)}
.hero-image{width:480px;height:580px;border-radius:50%;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.4);border:18px solid rgba(255,255,255,0.25);animation:float 6s ease-in-out infinite;flex-shrink:0}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:top}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.scroll-down{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font-size:2.2rem;color:white;animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

.bg-light{background:var(--bg-light)}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}
.skill-group h4{color:var(--purple);margin-bottom:16px;font-size:1.2rem}
.tags{display:flex;flex-wrap:wrap;gap:12px}
.tags span{background:white;padding:10px 20px;border-radius:50px;box-shadow:0 5px 15px rgba(0,0,0,0.05);font-size:0.95rem}

.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:30px;justify-items:center}
.project-card{background:white;padding:32px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,0.08);transition:.3s;text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%;max-width:420px}
.project-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(0,0,0,0.12)}
.project-card h3{color:var(--purple);margin-bottom:8px;font-size:1.4rem}
.project-card p:last-child{margin-top:auto;color:#444;line-height:1.6}
.netflix-center{grid-column:1/-1;max-width:460px;margin:20px auto 0;justify-self:center}

.education-content{display:grid;grid-template-columns:1fr 1fr;gap:50px;max-width:900px;margin:0 auto}
.contact-form{max-width:700px;margin:60px auto 0;display:flex;flex-direction:column;gap:20px}
.contact-form input,.contact-form textarea{padding:20px 30px;border:none;border-radius:50px;background:white;font-size:1.1rem;box-shadow:0 10px 30px rgba(0,0,0,0.08);outline:none}
.contact-form button{align-self:center;margin-top:10px;padding:16px 50px}
.social{text-align:center;margin-top:40px}
.social a{margin:0 20px;font-size:1.8rem;color:var(--purple)}
footer{background:#1e293b;color:white;padding:50px 0;text-align:center}

@media (max-width:1024px){
  .hero-content{flex-direction:column;text-align:center;gap:60px}
  .name-box.large{margin-left:40px}
}
@media (max-width:768px){
  .menu-toggle{display:block}
  .nav-links{position:absolute;top:90px;left:0;width:100%;background:var(--purple);flex-direction:column;max-height:0;overflow:hidden;transition:.4s}
  .nav-links.active{max-height:600px;padding:30px 0}
  .nav-links a{padding:15px;text-align:center}
  .hero-text h1{font-size:3.8rem}
  .name-box{font-size:4.4rem;padding:14px 30px}
  .name-box.large{font-size:5.4rem;margin:15px 0 0 20px}
  .hero-image{width:340px;height:400px}
  .hero-buttons{flex-direction:column;align-items:center}
  .btn-primary,.btn-outline{width:80%;max-width:300px}
  .education-content{grid-template-columns:1fr}
}