/* -----------------------
   Theme
------------------------ */
:root{
  --bg: #0b1220;
  --bg2:#070c16;
  --glass: rgba(255,255,255,.07);
  --glass2: rgba(255,255,255,.09);
  --stroke: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --accent: #8b5cf6; /* violet */
  --accent2:#22c55e; /* green */
}

body{
  background: radial-gradient(1200px 600px at 15% 10%, rgba(139,92,246,.20), transparent 60%),
              radial-gradient(900px 500px at 85% 20%, rgba(34,197,94,.14), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

.bg-darker{
  background: rgba(0,0,0,.22);
}

/* -----------------------
   Navbar
------------------------ */
.glass-nav{
  background: rgba(10,14,25,.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
}

.brand-dot{
  display:inline-block;
  width:10px;height:10px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  margin-right:10px;
  box-shadow: 0 0 18px rgba(139,92,246,.55);
}

/* -----------------------
   Buttons & Pills
------------------------ */
.btn-accent{
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  border: 0;
  color: white;
  box-shadow: 0 12px 30px rgba(139,92,246,.22);
}
.btn-accent:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn-ghost{
  border: 1px solid var(--stroke);
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.04);
}
.btn-ghost:hover{
  background: rgba(255,255,255,.07);
}

.pill{
  font-size: .75rem;
  padding: .35rem .6rem;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
}

.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
  font-size: .9rem;
}

/* -----------------------
   Cards (glass)
------------------------ */
.glass-card{
  background: linear-gradient(180deg, var(--glass), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  border-radius: 18px;
}

.project-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  border-radius: 18px;
  transition: transform .15s ease, background .15s ease;
}
.project-card:hover{
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
}

/* -----------------------
   Hero
------------------------ */
.hero{
  position: relative;
  overflow: hidden;
}
.hero::after{
  content:"";
  position:absolute;
  inset:-200px -200px auto auto;
  width:480px;height:480px;
  background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.25), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(139,92,246,.24), transparent 60%);
  filter: blur(18px);
  pointer-events:none;
  transform: rotate(12deg);
}

/* -----------------------
   Elements
------------------------ */
.avatar{
  width:52px;height:52px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139,92,246,.9), rgba(34,197,94,.65));
  display:grid;
  place-items:center;
  box-shadow: 0 18px 45px rgba(139,92,246,.18);
}
.avatar-initials{
  font-weight: 800;
  letter-spacing: .5px;
}

.mini-stat{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: .75rem .9rem;
}
.mini-stat-title{
  color: rgba(255,255,255,.55);
  font-size: .75rem;
}
.mini-stat-value{
  font-weight: 600;
  font-size: .92rem;
  margin-top: .15rem;
}

.icon-badge{
  width:44px;height:44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  font-size: 1.2rem;
}
.text-accent{ color: #a78bfa !important; }

.tag{
  font-size: .75rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.78);
}

.v-list li{
  padding: .2rem 0;
}

.soft-progress{
  height: .7rem;
  background: rgba(255,255,255,.07);
  border-radius: 999px;
}
.soft-progress .progress-bar{
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

.feature{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  padding: .85rem;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
.feature i{
  font-size: 1.2rem;
  color: #a78bfa;
  margin-top: .1rem;
}

.quote-card{
  position: relative;
  padding: 1.2rem 1.2rem 1.1rem;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
.quote-mark{
  position:absolute;
  top:-18px; left:16px;
  font-size: 3rem;
  color: rgba(167,139,250,.55);
}
.quote-text{
  font-size: 1.05rem;
  line-height: 1.5;
}

.contact-link{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.75rem .9rem;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  text-decoration:none;
}
.contact-link:hover{
  background: rgba(255,255,255,.07);
  color: white;
}

.soft-input{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
}
.soft-input:focus{
  background: rgba(255,255,255,.05);
  border-color: rgba(167,139,250,.65);
  box-shadow: 0 0 0 .25rem rgba(139,92,246,.16);
  color: rgba(255,255,255,.9);
}

/* Slightly nicer anchors */
a.nav-link{ color: rgba(255,255,255,.78); }
a.nav-link:hover{ color: white; }