/* GLOBAL */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif;}
body { background:#0f172a; color:#e5e7eb; scroll-behavior: smooth; }
a { text-decoration:none; color: inherit; }

/* NAVBAR */
header { position:fixed; width:100%; background:#020617; z-index:1000;}
.navbar { max-width:1100px; margin:auto; padding:15px 20px; display:flex; justify-content:space-between; align-items:center; }
.logo { font-family:'Poppins',sans-serif; font-size:1.5rem; font-weight:700; color:#38bdf8; }
.nav-links { display:flex; list-style:none; }
.nav-links li a { margin-left:20px; font-weight:500; transition:0.3s; }
.nav-links li a:hover { color:#38bdf8; }
.menu-btn { display:none; font-size:1.8rem; cursor:pointer; }

/* HERO */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:100px 20px; }
.hero-content { max-width:1100px; width:100%; display:flex; justify-content:space-between; gap:40px; }
.hero-text h1 { font-family:'Poppins',sans-serif; font-size:2.8rem; }
.hero-text span { color:#38bdf8; }
.hero-text p { margin-top:10px; color:#cbd5f5; }
.social-icons { margin:15px 0; }
.social-icons a { color:#38bdf8; font-size:1.4rem; margin-right:15px; transition:0.3s; }
.social-icons a:hover { transform:scale(1.2); }
.btn { display:inline-block; margin-top:15px; padding:12px 28px; background:#38bdf8; color:#020617; border-radius:30px; font-weight:600; }

/* HERO IMAGE */
.hero-image img { width:260px; height:260px; border-radius:50%; border:4px solid #38bdf8; object-fit:cover; box-shadow:0 0 30px rgba(56,189,248,.4); animation:float 4s ease-in-out infinite; }
@keyframes float {0%{transform:translateY(0);}50%{transform:translateY(-12px);}100%{transform:translateY(0);}}

/* SECTIONS */
.section { padding:80px 20px; max-width:1000px; margin:auto; }
.dark { background:#020617; }
.section-title { font-family:'Poppins',sans-serif; text-align:center; font-size:2.2rem; margin-bottom:20px; }
.section-text { text-align:center; max-width:700px; margin:auto; color:#cbd5f5; }

/* PROJECTS */
.projects { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; margin-top:40px; }
.card { background:#020617; padding:25px; border-radius:15px; transition:transform .3s, box-shadow .3s; }
.card:hover { transform:translateY(-10px); box-shadow:0 10px 20px rgba(56,189,248,.2); }
.card-btn { display:inline-block; margin-top:10px; padding:8px 16px; border-radius:20px; background:#38bdf8; color:#020617; font-weight:500; transition:0.3s; }
.card-btn:hover { background:#22c1ff; }

/* CONTACT */
.contact-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; margin-top:30px; }
.contact-card { background:#020617; padding:30px; border-radius:15px; text-align:center; transition:transform .3s, box-shadow .3s; }
.contact-card i { font-size:2rem; color:#38bdf8; margin-bottom:10px; }
.contact-card:hover { transform:translateY(-10px); box-shadow:0 10px 20px rgba(56,189,248,.2); }

/* FOOTER */
footer { background:#020617; text-align:center; padding:20px; margin-top:40px; }

/* ANIMATIONS */
.fade-in { opacity:0; animation:fadeIn 1s forwards; }
.slide-up { opacity:0; transform:translateY(40px); animation:slideUp 1s forwards; }
.delay-1 { animation-delay:.4s; }
.delay-2 { animation-delay:.8s; }
@keyframes fadeIn { to{opacity:1;} }
@keyframes slideUp { to{opacity:1; transform:translateY(0);} }

/* MOBILE */
@media (max-width:768px){
  .nav-links { position:absolute; top:60px; right:-250px; background:#020617; flex-direction:column; width:200px; transition:right .3s ease; }
  .nav-links.active { right:0; }
  .menu-btn{display:block;}
  .hero-content { flex-direction:column-reverse; text-align:center; gap:20px;}
  .hero-image img { width:200px; height:200px; }
}