:root{
  --bg:#070b16;
  --bg-soft:#0f1630;
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.14);
  --text:#edf2ff;
  --text-soft:rgba(237,242,255,.75);
  --brand:#7f5cff;
  --brand-2:#2ad9b8;
  --shadow:0 16px 45px rgba(0,0,0,.32);
}

*{box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% 0%, rgba(127,92,255,.3), transparent 55%),
    radial-gradient(900px 550px at 90% 10%, rgba(42,217,184,.2), transparent 55%),
    linear-gradient(170deg, var(--bg), var(--bg-soft));
}

.app-nav{
  background:rgba(7,11,22,.75);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.navbar-brand{color:var(--text)}
.navbar-brand:hover{color:var(--text)}
.nav-link{color:var(--text-soft)}
.nav-link:hover,.nav-link:focus{color:var(--text)}

.hero-section{
  padding:9rem 0 4rem;
}

.tag{
  display:inline-block;
  padding:.45rem .85rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:#cabdff;
  font-weight:600;
  font-size:.88rem;
}

.hero-title{
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.12;
  letter-spacing:-.025em;
  font-weight:800;
}

.hero-subtitle{
  color:var(--text-soft);
  max-width:58ch;
}

.hero-card,
.content-card,
.project-card{
  border:1px solid var(--line);
  background:linear-gradient(145deg, var(--surface), var(--surface-2));
  border-radius:18px;
  box-shadow:var(--shadow);
}

.hero-card li{
  color:var(--text-soft);
}

.section-space{
  padding:4rem 0;
}

.section-heading{
  margin-bottom:1.5rem;
}
.section-heading h2{
  font-size:clamp(1.5rem,2.8vw,2rem);
  margin:0;
}
.section-kicker{
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.75rem;
  font-weight:700;
  color:#b8a8ff;
  margin-bottom:.45rem;
}

.content-card{
  padding:1.35rem;
}

.timeline{
  display:grid;
  gap:1rem;
}
.timeline-item{
  position:relative;
}

.time-badge{
  padding:.22rem .65rem;
  border-radius:999px;
  border:1px solid var(--line);
  color:#b8a8ff;
  font-size:.84rem;
}

.project-card{
  padding:1.5rem;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.project-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.24);
  box-shadow:0 20px 55px rgba(0,0,0,.45);
}
.project-card p,
.project-card ul{
  color:var(--text-soft);
}

.project-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:#b8a8ff;
  text-decoration:none;
  font-weight:600;
}
.project-link:hover{color:#d5ccff}

.list-tight li{
  margin:.45rem 0;
  color:var(--text-soft);
}

.contact-section{
  padding:2.6rem 0 3rem;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.contact-links a{
  text-decoration:none;
  color:var(--text-soft);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.6rem .75rem;
  background:var(--surface-2);
}
.contact-links a:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.28);
}

.btn-primary{
  --bs-btn-bg:var(--brand);
  --bs-btn-hover-bg:#6d47ff;
  --bs-btn-active-bg:#5f39f8;
  --bs-btn-border-color:rgba(255,255,255,.15);
}

.btn-outline-light{
  --bs-btn-color:var(--text);
  --bs-btn-border-color:rgba(255,255,255,.34);
  --bs-btn-hover-bg:rgba(255,255,255,.09);
}

.text-secondary{
  color:rgba(237,242,255,.68)!important;
}

@media (max-width: 991.98px){
  .hero-section{padding-top:7.5rem}
}