:root {
  --bg: #090714;
  --card: #120f22;
  --card-hover: #1a1630;
  --border: rgba(167, 139, 250, 0.07);
  --border-hover: rgba(167, 139, 250, 0.18);
  --text: #eeebf5;
  --text-second: #aba4c5;
  --muted: #7a729f;
  --violet: #a78bfa;
  --violet-soft: rgba(167, 139, 250, 0.1);
  --green: #6ee7b7;
  --green-soft: rgba(110, 231, 183, 0.1);
  --blue: #60a5fa;
  --blue-soft: rgba(96, 165, 250, 0.1);
  --amber: #fbbf24;
  --pink: #f9a8d4;
}

* { margin:0; padding:0; box-sizing:border-box }

html { scroll-behavior:smooth }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background:var(--violet-soft) }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-thumb { background:var(--violet); border-radius:2px }

.mono { font-family:"JetBrains Mono","Fira Code",monospace; font-size:.85em }

/* ── grid background ── */
body::before {
  content:"";
  position:fixed;
  inset:0;
  background-image:radial-gradient(rgba(167,139,250,.06) 1px,transparent 0);
  background-size:28px 28px;
  pointer-events:none;
  z-index:-1
}

/* ── NAV ── */
.nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.5rem;
  height:50px;
  max-width:1100px;
  margin:0 auto;
  background:rgba(9,7,20,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  left:50%;
  transform:translateX(-50%);
  width:100%;
}

.nav__logo { font-weight:800; font-size:.9rem; color:var(--violet); font-family:"JetBrains Mono",monospace }

.nav__links { display:flex; gap:1.2rem }

.nav__links a {
  color:var(--text-second);
  text-decoration:none;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.8px;
  transition:color .2s
}

.nav__links a:hover { color:var(--violet) }

.nav__track {
  position:relative;
  padding:.2rem .65rem !important;
  border-radius:6px;
  font-weight:700 !important;
  transition:all .25s !important
}

.nav__track::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  opacity:0;
  transition:opacity .25s
}

.nav__track--qa {
  color:var(--violet) !important;
  background:rgba(167,139,250,.08);
  box-shadow:0 0 12px rgba(167,139,250,.08)
}

.nav__track--qa:hover {
  background:rgba(167,139,250,.18);
  box-shadow:0 0 20px rgba(167,139,250,.2);
  transform:translateY(-1px)
}

.nav__track--dev {
  color:var(--blue) !important;
  background:rgba(96,165,250,.08);
  box-shadow:0 0 12px rgba(96,165,250,.08)
}

.nav__track--dev:hover {
  background:rgba(96,165,250,.18);
  box-shadow:0 0 20px rgba(96,165,250,.2);
  transform:translateY(-1px)
}

/* ── MAIN ── */
main { max-width:1100px; margin:0 auto; padding:0 1.5rem }

/* ── SECTION ── */
.section {
  margin-bottom:4rem;
  scroll-margin-top:60px
}

.section__head {
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1.5rem
}

.section__num {
  font-size:.55rem;
  font-weight:800;
  color:var(--violet);
  letter-spacing:1.5px;
  padding:.2rem .6rem;
  border:1px solid var(--violet-soft);
  border-radius:20px;
  font-family:"JetBrains Mono",monospace
}

.section__head h2 {
  font-size:clamp(1.2rem,2.5vw,1.6rem);
  font-weight:800;
  letter-spacing:-.3px
}

/* ── TRACK BUTTONS ── */
.hero__tracks {
  display:flex;
  gap:.6rem;
  margin-top:1.2rem;
  padding-top:1rem;
  border-top:1px solid var(--border)
}

.track-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.5rem 1rem;
  border:1px solid var(--violet-soft);
  border-radius:8px;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--violet);
  text-decoration:none;
  transition:all .25s;
  font-family:"JetBrains Mono",monospace
}

.track-btn:hover { background:var(--violet-soft) }

.track-btn--dev {
  border-color:var(--blue-soft);
  color:var(--blue)
}

.track-btn--dev:hover { background:var(--blue-soft) }

.nav__track {
  color:var(--violet) !important;
  border-left:1px solid var(--border);
  padding-left:.8rem
}

.nav__track--dev { color:var(--blue) !important }

/* ── SEPARATE TRACK PAGES ── */
.track-page {
  margin-top:3.5rem;
  margin-bottom:2.5rem
}

.track-page .hero {
  margin-top:2rem;
  margin-bottom:2.5rem
}

.track-page__head {
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:2rem;
  font-family:"JetBrains Mono",monospace
}

.track-page__head i { font-size:1rem }

.track-page .stack__grid { margin-bottom:2.5rem }

.track-page .timeline { margin-bottom:2.5rem }

.track__edu { display:grid; gap:.5rem }
.track__edu .edu__item { margin-bottom:0 }

/* ── CARD ── */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.3rem 1.4rem;
  transition:all .25s
}

.card:hover {
  border-color:var(--border-hover);
  background:var(--card-hover)
}

.card__head {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:1rem
}

.card__head i { font-size:1rem }

.card--full { grid-column:1/-1 }

/* ── HERO ── */
.hero {
  margin-top:4rem;
  margin-bottom:4rem;
  max-width:700px
}

.hero__badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--green);
  padding:.25rem .7rem;
  border:1px solid var(--green-soft);
  border-radius:30px;
  margin-bottom:1.5rem;
  font-family:"JetBrains Mono",monospace
}

.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  animation:pulse 2s ease-in-out infinite
}

@keyframes pulse {
  0%,100% { opacity:1 }
  50% { opacity:.3 }
}

.hero__name {
  font-size:clamp(2.8rem,8vw,5rem);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-1.5px;
  margin-bottom:.6rem
}

.gradient-text {
  background:linear-gradient(135deg,var(--violet),var(--pink));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}

.hero__tags {
  display:flex;
  gap:.5rem;
  margin-bottom:.8rem
}

.tag {
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:.25rem .6rem;
  border-radius:4px;
  background:var(--violet-soft);
  color:var(--violet);
  font-family:"JetBrains Mono",monospace
}

.hero__desc {
  color:var(--text-second);
  font-size:.95rem;
  margin-bottom:1.5rem
}

.hero__desc .mono { color:var(--violet) }

.hero__actions {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem
}

/* ── BUTTON ── */
.btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.6rem 1.3rem;
  border:none;
  border-radius:8px;
  font-weight:600;
  font-size:.8rem;
  font-family:"JetBrains Mono",monospace;
  text-decoration:none;
  background:var(--violet);
  color:#fff;
  transition:all .2s
}

.btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(167,139,250,.3) }

.btn--ghost {
  background:transparent;
  color:var(--text-second);
  border:1px solid var(--border)
}

.btn--ghost:hover {
  border-color:var(--violet);
  color:var(--violet);
  box-shadow:none
}

.cv-group { position:relative; display:inline-block }

.cv-dropdown {
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:210px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:4px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-3px);
  transition:all .15s;
  z-index:200
}

.cv-dropdown.open { opacity:1; visibility:visible; transform:translateY(0) }

.cv-dropdown a {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  color:var(--text);
  text-decoration:none;
  border-radius:6px;
  font-size:.78rem;
  transition:background .15s
}

.cv-dropdown a:hover { background:var(--violet-soft) }

.cv-dropdown a i { width:16px; text-align:center; color:var(--violet); font-size:.75rem }

/* ── STACK ── */
.stack__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem
}

.stack__list { display:grid; gap:.5rem }

.stack-item {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-second);
  font-size:.82rem;
  font-weight:500;
  padding:.15rem 0;
  transition:color .15s
}

.stack-item:hover { color:var(--text) }

.stack-item i { width:14px; text-align:center; font-size:.8rem }

.stack__grid .card:nth-child(1) .stack-item i { color:var(--violet) }
.stack__grid .card:nth-child(2) .stack-item i { color:var(--blue) }
.stack__grid .card:nth-child(3) .stack-item i { color:var(--amber) }

.stack__tags { display:flex; flex-wrap:wrap; gap:.4rem }

.pill {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--green-soft);
  border:1px solid rgba(110,231,183,.15);
  color:var(--text);
  padding:.25rem .7rem;
  border-radius:20px;
  font-size:.72rem;
  font-weight:500;
  transition:all .15s
}

.pill:hover {
  background:rgba(110,231,183,.2);
  border-color:rgba(110,231,183,.3);
  transform:translateY(-1px)
}

.pill i { color:var(--green); font-size:.65rem }

/* ── TIMELINE ── */
.timeline {
  position:relative;
  display:grid;
  gap:1.2rem
}

.timeline::before {
  content:"";
  position:absolute;
  left:13px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(to bottom,var(--violet),var(--blue),transparent)
}

.tl__item { position:relative; padding-left:3.2rem }

.tl__dot {
  position:absolute;
  left:5px;
  top:22px;
  width:18px;
  height:18px;
  background:var(--bg);
  border:3px solid var(--violet);
  border-radius:50%;
  transition:all .3s
}

.tl__item:hover .tl__dot { background:var(--violet); box-shadow:0 0 16px var(--violet-soft) }

.tl__card { padding:1.2rem 1.3rem; transition:all .25s }
.tl__card:hover { transform:translateX(4px) }

.tl__top { display:flex; align-items:center; gap:10px; margin-bottom:.5rem }

.tl__top i {
  font-size:1rem;
  color:var(--violet);
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:var(--violet-soft);
  border-radius:6px;
  flex-shrink:0
}

.tl__top h3 { font-size:.95rem; font-weight:700 }
.tl__role { font-size:.68rem; color:var(--muted); display:block; margin-top:1px }

.tl__tags { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:.5rem }

.tl__tags span {
  background:var(--violet-soft);
  color:var(--violet);
  padding:1px 7px;
  border-radius:5px;
  font-size:.62rem;
  font-weight:600
}

.tl__card p { color:var(--text-second); font-size:.82rem; line-height:1.6 }

/* ── EDUCATION ── */
.edu__grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }

.edu__head {
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  padding-bottom:.6rem;
  border-bottom:2px solid var(--violet-soft);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:1rem
}

.edu__item {
  padding:.8rem .9rem;
  margin-bottom:.6rem;
  border-radius:8px;
  background:var(--card);
  border:1px solid var(--border);
  border-left:3px solid var(--violet);
  transition:all .2s
}

.edu__item:hover { border-color:var(--border-hover); background:var(--card-hover) }

.edu__item:nth-child(even) { border-left-color:var(--blue) }

.edu__tag {
  display:inline-block;
  font-size:.48rem;
  font-weight:800;
  text-transform:uppercase;
  padding:1px 5px;
  border-radius:3px;
  margin-bottom:3px;
  background:var(--violet-soft);
  color:var(--violet)
}

.edu__item:nth-child(even) .edu__tag { background:var(--blue-soft); color:var(--blue) }

.edu__name { font-size:.82rem; font-weight:700; margin-bottom:1px }
.edu__desc { color:var(--muted); font-size:.72rem }

/* ── PROJECTS ── */
.projects__grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1rem }

.project-card { position:relative; overflow:hidden }
.project-card::after {
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--violet),var(--pink));
  opacity:0;
  transition:opacity .3s
}
.project-card:hover::after { opacity:1 }

.project-card__icon { font-size:1.3rem; color:var(--violet); margin-bottom:.6rem }
.project-card h3 { font-size:.95rem; font-weight:700; margin-bottom:.2rem }
.project-card p { color:var(--muted); font-size:.8rem; margin-bottom:.8rem; line-height:1.5 }

.project-card__links { display:flex; gap:.8rem }

.project-card__tech {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:.6rem
}

.project-card__tech span {
  font-size:.58rem;
  font-weight:600;
  padding:1px 6px;
  border-radius:4px;
  background:var(--violet-soft);
  color:var(--violet)
}

.project-card__links a {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--text-second);
  text-decoration:none;
  font-size:.75rem;
  font-weight:600;
  transition:color .15s
}

.project-card__links a:hover { color:var(--violet) }
.project-card__links a i { font-size:.85rem }

.project-card__soon {
  display:inline-block;
  font-size:.55rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:2px 8px;
  border-radius:4px;
  background:rgba(251,191,36,.12);
  color:var(--amber);
  margin-bottom:.4rem
}

.project-card__confid {
  font-size:.65rem;
  color:var(--muted);
  font-style:italic;
  line-height:1.4
}

/* ── FOOTER ── */
.footer {
  max-width:1100px;
  margin:0 auto;
  padding:1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.78rem
}

.footer__links { display:flex; gap:.8rem }

.footer__links a { color:var(--muted); font-size:1rem; transition:color .15s }
.footer__links a:hover { color:var(--violet) }

/* ── RESPONSIVE ── */
@media(max-width:800px) {
  .stack__grid { grid-template-columns:1fr }
  .edu__grid { grid-template-columns:1fr }
  .footer { flex-direction:column; text-align:center; gap:.5rem }
}

@media(max-width:600px) {
  .nav__links { display:none }
  .nav__links:only-child { display:flex; gap:.8rem; font-size:.78rem }
  .hero__actions { flex-direction:column }
  .hero__actions .btn { width:100%; justify-content:center }
  .hero__tracks { flex-direction:column }
  .hero__tracks .track-btn { width:100%; justify-content:center }
  .tl__card { padding:1rem }
  .section { margin-bottom:3rem }
  .track-page .hero__actions { flex-direction:row }
  .track-page .hero__actions .btn { width:auto }
}