:root{
  --primary:#2563eb;
  --dark:#020617;
  --light:#f8fafc;
  --border:#e5e7eb;
}
body{
  font-family:'Inter',sans-serif;
  background:var(--light);
  color:var(--dark);
  line-height:1.7;
  scroll-behavior:smooth;
}
.navbar{
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--border);
}
.nav-btn{
  display:inline-block;
  margin:0 5px;
  padding:8px 15px;
  border-radius:5px;
  transition:0.3s;
}
.nav-btn:hover{background:var(--primary);color:#fff;}
.hero{
  min-height:90vh;
  display:flex;
  align-items:center;
}
.hero-box{
  background:#fff;
  border-radius:20px;
  padding:30px;
  border:1px solid var(--border);
}
.avatar-img{
  width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid #e5e7eb;margin:auto;display:block;transition:0.4s;
}
.avatar-img:hover{border-color:var(--primary);box-shadow:0 0 20px rgba(37,99,235,0.2);}
.section{padding:80px 0;}
.section-title{font-weight:800;margin-bottom:40px;text-align:center;}
.card-pro{
  background:#fff;border:1px solid var(--border);
  border-radius:18px;padding:25px;height:100%;transition:0.3s;
}
.card-pro:hover{transform:translateY(-5px);box-shadow:0 5px 20px rgba(0,0,0,0.1);}
.badge-skill{
  border:1px solid var(--border);
  border-radius:30px;padding:10px 18px;font-weight:600;margin:6px;display:inline-block;background:#fff;
}
footer{background:#020617;color:#cbd5f5;}
.wa-float{position:fixed;bottom:25px;right:25px;background:#25d366;color:#fff;width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;z-index:999}
.wa-float:nth-child(2){right:90px;background:#0072c6;}
body.dark{background:#020617;color:#e5e7eb}
body.dark .navbar{background:rgba(2,6,23,.95)}
body.dark .hero-box,body.dark .card-pro,body.dark .badge-skill{background:#020617;border-color:#1e293b}
body.dark footer{background:#000;color:#cbd5f5;}
.contact-cards{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.contact-card{background:#fff;border:1px solid var(--border);padding:20px 30px;border-radius:15px;transition:0.3s;}
.contact-card:hover{background:var(--primary);color:#fff;}
.contact-card i{color:var(--primary);}
body.dark .contact-card{background:#020617;border-color:#1e293b;color:#e5e7eb;}
body.dark .contact-card i{color:var(--primary);}