:root { 
  --bg:#0f1724; 
  --accent1:#7c3aed; 
  --accent2:#06b6d4; 
  --glass: rgba(255,255,255,0.06); 
  --muted:#9aa4b2;
}

* { box-sizing:border-box }

body { 
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto; 
  background: linear-gradient(180deg,#0b1220 0%, #071027 60%); 
  color:#e6eef8; 
  margin:0;
}

.container { 
  max-width:1100px; 
}

.nav-neo { 
  background:transparent; 
  padding:1rem 0;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: .6px;
  font-size: 1.35rem;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.nav-neo .nav-link { 
  color: rgba(255,255,255,0.85); 
  transition: .25s ease;
}

.nav-neo .nav-link:hover { 
  color: var(--accent1); 
}

.nav-neo .nav-link.active { 
  color: var(--accent1) !important; 
  font-weight:600; 
}

.navbar-toggler { 
  border-color:rgba(255,255,255,0.4); 
}

.navbar-toggler-icon { 
  filter:invert(100%); 
}

.hero-neo { 
  padding:100px 0; 
}

.grid-hero { 
  display:grid; 
  grid-template-columns: 1fr 420px; 
  gap:36px; 
  align-items:center;
}

.hero-left .eyebrow { 
  opacity:0.9; 
  color:var(--accent2); 
  font-weight:600;
}

.hero-name { 
  font-size:3.2rem; 
  margin:0; 
  font-weight:800;
}

.hero-name span { 
  color:var(--accent1); 
}

.hero-tag { 
  color:var(--muted); 
  margin-top:8px; 
}

.btn-ghost { 
  background:transparent; 
  border:1px solid rgba(255,255,255,0.12); 
  color:inherit; 
  padding:10px 18px; 
  border-radius:10px; 
  margin-right:8px;
}

.btn-solid { 
  background:linear-gradient(90deg,var(--accent1),var(--accent2)); 
  color:#08101a; 
  padding:10px 18px; 
  border-radius:12px; 
  border:0;
}

.traits span {
  display:inline-block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding:6px 12px;
  border-radius:8px;
  margin-right:6px;
  font-size:0.85rem;
  font-weight:500;
  color:var(--muted);
  backdrop-filter: blur(6px);
  transition:0.25s;
}

.traits span:hover {
  background: rgba(255, 255, 255, 0.12);
  color:#fff;
}

.glass { 
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); 
  border:1px solid rgba(255,255,255,0.06); 
  padding:20px; 
  border-radius:12px;
}

.rounded-profile { 
  width:100%; 
  border-radius:10px; 
  object-fit:cover;
}

.project-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  transition: 0.25s;
  color: #e6eef8;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.12);
}

.project-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.project-card .card-title {
  color: #f8fafc !important;
  font-weight: 600;
}

.project-card .card-body p,
.project-card .text-muted,
.project-card .small {
  color: #cbd5e1 !important;
}

.project-card .badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18);
}

.badge-web { background: #3b82f6 !important; }
.badge-design { background: #10b981 !important; }
.badge-other { background: #f59e0b !important; color:#222 !important; }

.modal-content {
  background: #0f172a !important; 
  color: #e2e8f0 !important;
}

.modal-title {
  color: #f8fafc !important;
  font-weight: 700;
}

#modalDesc {
  color: #cbd5e1 !important;
}

.footer-neo { 
  border-top:1px solid rgba(255,255,255,0.03); 
  padding-top:18px;
}

.footer-link { 
  color:var(--muted); 
  text-decoration:none; 
  transition:0.25s;
}

.footer-link:hover { 
  color:var(--accent1);
}

.footer-neo a i {
  color:var(--accent1);
  transition:0.25s;
}

.footer-neo a:hover i {
  color:var(--accent2);
}

@media(max-width:991px){
  .grid-hero { grid-template-columns:1fr }
  .hero-neo { padding:60px 0 }
}

.progress-bar {
  background: linear-gradient(90deg, var(--accent1), var(--accent2)) !important;
  border-radius: 8px;
}

.progress {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px;
  height: 12px;
}

.social-link {
  font-size: 1.4rem;
  color: var(--accent1);
  transition: 0.3s;
}

.social-link:hover {
  color: var(--accent2);
}