:root{
  --accent1: #7c3aed; /* purple */
  --accent2: #ec4899; /* pink */
  --bg: #0f172a;
}
*{box-sizing:border-box}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, rgba(15,23,42,0.02), #fff 40%);
  color:#0b1220;
  padding-top:70px;
}

/* Navbar */
.navbar{
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  box-shadow:0 6px 18px rgba(124,58,237,0.12);
}
.navbar .nav-link{color:rgba(255,255,255,0.9)}
.navbar .navbar-brand{font-weight:700; color:#fff}

.hero{
  background: linear-gradient(135deg, rgba(124,58,237,0.95), rgba(236,72,153,0.9));
  padding:60px 0;
  margin-top:0;
  border-radius:16px;
  color:white;
  overflow:hidden;
}
.hero .accent{background:linear-gradient(90deg,var(--accent2),#fff); -webkit-background-clip:text; background-clip:text; color:transparent}

.profile-card{
  background: rgba(255,255,255,0.06);
  padding:18px;
  border-radius:12px;
  width:220px;
}
.profile-img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

/* Cards */
.card{border:none}
.project-card img{height:180px; object-fit:cover}
.service{border-radius:12px}

/* Timeline */
.timeline{border-left:3px solid rgba(0,0,0,0.06); padding-left:16px}
.timeline-item{margin-bottom:1rem; padding-left:12px; position:relative}
.timeline-item::before{content:''; position:absolute; left:-11px; top:8px; width:10px; height:10px; background:linear-gradient(90deg,var(--accent1),var(--accent2)); border-radius:50%}

/* Subtle animations */
.fade-in{opacity:0; transform: translateY(8px); animation:fadeIn 0.6s forwards}
@keyframes fadeIn{to{opacity:1; transform:none}}

/* Responsive tweaks */
@media (max-width:768px){
  .hero{padding:36px 0; border-radius:8px}
  .profile-card{width:180px}
}