/* Base */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif;}
body{background:#0f172a;color:white;scroll-behavior:smooth;}

/* Navbar */
nav{display:flex;justify-content:space-between;padding:20px 50px;position:sticky;top:0;background:rgba(15,23,42,0.85);z-index:1000;}
nav a{margin-left:20px;color:#cbd5f5;text-decoration:none;transition:.3s;}
nav a:hover{color:#38bdf8;}

/* Hero */
.hero-section{display:flex;align-items:center;justify-content:space-between;padding:100px 50px;flex-wrap:wrap;}
.hero-text h1{font-size:60px;}
.hero-text span{background:linear-gradient(90deg,#38bdf8,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-text p{font-size:28px;margin:20px 0;}
.hero-photo img{width:400px;border-radius:20px;box-shadow:0 0 30px rgba(56,189,248,0.4);transition:.5s;}
.hero-photo img:hover{transform:scale(1.05);}

/* Buttons */
.btn{padding:12px 30px;background:linear-gradient(90deg,#38bdf8,#818cf8);border-radius:30px;text-decoration:none;color:black;font-weight:500;transition:.3s;}
.btn:hover{box-shadow:0 0 15px #38bdf8;}

/* Sections */
.section{padding:100px 50px;max-width:1100px;margin:auto;text-align:left;}
.section h2{font-size:42px;margin-bottom:20px;}
.section p{font-size:20px;color:#cbd5f5;line-height:1.7;margin-bottom:10px;}

/* Skills */
.skills-container{display:flex;flex-wrap:wrap;gap:25px;margin-top:30px;}
.skill-card{background:rgba(30,41,59,0.6);border-radius:20px;width:130px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.4s;position:relative;}
.skill-card img{width:50px;margin-bottom:10px;transition:.4s;}
.skill-card:hover{transform:translateY(-12px) scale(1.08);box-shadow:0 0 25px rgba(56,189,248,0.4);}
.skill-card:hover img{transform:scale(1.2) rotate(5deg);}
.skill-card:hover p{color:#38bdf8;}

/* Projects */
.projects{display:flex;gap:20px;flex-wrap:wrap;margin-top:30px;}
.card{background:rgba(30,41,59,0.6);padding:20px;border-radius:15px;width:260px;transition:.3s;position:relative;}
.card img{width:100%;border-radius:10px;}
.card:hover{transform:translateY(-10px);}
.buttons a{margin-right:10px;padding:8px 12px;background:linear-gradient(90deg,#38bdf8,#818cf8);color:white;border-radius:6px;text-decoration:none;font-weight:500;transition:.3s;}
.buttons a:hover{background:linear-gradient(90deg,#22d3ee,#4f46e5);transform:translateY(-3px);box-shadow:0 4px 15px rgba(56,189,248,0.5);}

/* Contact */
.contact-section{text-align:center;padding:120px 20px;background:#020617;position:relative;}
.contact-section h2{font-size:42px;margin-bottom:40px;}
.contact-section h3{font-size:32px;margin:20px 0 20px;}
.contact-section p{max-width:700px;margin:15px auto;font-size:20px;color:#cbd5f5;line-height:2.2;}
.contact-buttons{display:flex;justify-content:center;gap:25px;margin-bottom:40px;flex-wrap:wrap;}
.btn.primary{background:linear-gradient(90deg,#6366f1,#8b5cf6);color:white;}
.btn.secondary{background:transparent;border:1px solid #444;color:#ddd;}
.social-icons a{font-size:26px;margin:0 16px;color:#cbd5f5;transition:.3s;}
.social-icons a:hover{color:#38bdf8;transform:scale(1.2);}
.contact-info{list-style:none;max-width:500px;margin:0 auto 40px;padding:0;}
.contact-info li{font-size:20px;color:#cbd5f5;line-height:2.2;display:flex;align-items:center;gap:12px;}
.contact-info li i{color:#38bdf8;min-width:25px;text-align:center;font-size:18px;}
.contact-info li strong{width:90px;display:inline-block;color:#94a3b8;}

/* Footer */
footer{text-align:center;padding:25px;background:#020617;margin-top:50px;}
footer p{color:#94a3b8;font-size:14px;}

/* Reveal Animation */
.reveal{opacity:0;transform:translateY(50px);transition:.6s;}
.reveal.active{opacity:1;transform:translateY(0);}

/* Responsive */
@media(max-width:1024px){
  .hero-section{flex-direction:column-reverse;text-align:center;}
  .section{text-align:center;}
  .hero-photo img{width:300px;}
  .hero-text h1{font-size:48px;}
  .hero-text p{font-size:22px;}
}