/* ---------- Cosmic theme ---------- */
:root {
  --bg: #03020c;
  --bg-2: #0a0820;
  --surface: rgba(20, 18, 50, 0.45);
  --surface-strong: rgba(30, 25, 70, 0.65);
  --border: rgba(180, 170, 255, 0.18);
  --text: #ecedff;
  --text-dim: #a3a8d4;
  --accent: #a78bfa;        /* violet */
  --accent-2: #67e8f9;      /* cyan */
  --accent-3: #f0abfc;      /* magenta */
  --gold: #fde68a;
  --gradient: linear-gradient(135deg, #a78bfa 0%, #67e8f9 50%, #f0abfc 100%);
  --gradient-soft: radial-gradient(circle at 30% 30%, #6d28d9, transparent 60%),
    radial-gradient(circle at 70% 60%, #0891b2, transparent 60%);
  --shadow: 0 20px 60px -20px rgba(167, 139, 250, 0.5);
  --radius: 18px;
}

[data-theme="light"] {
  --bg: #e8e4ff;
  --bg-2: #ffffff;
  --surface: rgba(255, 255, 255, 0.75);
  --surface-strong: rgba(255, 255, 255, 0.95);
  --border: rgba(76, 29, 149, 0.2);
  --text: #1e1b4b;
  --text-dim: #4c1d95;
  --accent: #6d28d9;
  --accent-2: #0891b2;
  --accent-3: #c026d3;
  --gradient: linear-gradient(135deg, #6d28d9 0%, #0891b2 50%, #c026d3 100%);
  --shadow: 0 20px 60px -20px rgba(109, 40, 217, 0.4);
}
[data-theme="light"] body {
  background: radial-gradient(ellipse at top, #d8d0ff 0%, #ede9ff 55%, #f5f3ff 100%);
  color: var(--text);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(ellipse at top, #1a1140 0%, var(--bg) 55%, #000 100%);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Starfield ---------- */
#starfield {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.55;
}

/* ---------- Nebula ---------- */
.nebula {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.nebula-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.3;
  mix-blend-mode: screen;
  will-change: transform;
}
.nb-1 {
  width: 620px; height: 620px;
  background: radial-gradient(circle, #6d28d9 0%, transparent 70%);
  top: -160px; left: -160px;
  animation: drift 24s ease-in-out infinite;
}
.nb-2 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, #0891b2 0%, transparent 70%);
  bottom: -120px; right: -160px;
  animation: drift 30s ease-in-out infinite reverse;
}
.nb-3 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #db2777 0%, transparent 70%);
  top: 45%; left: 45%;
  animation: drift 34s ease-in-out infinite;
}
[data-theme="light"] .nebula-blob { opacity: 0.16; mix-blend-mode: multiply; }
[data-theme="light"] #starfield { opacity: 0.35; mix-blend-mode: multiply; }
[data-theme="light"] .shooting-stars span {
  background: #6d28d9;
  box-shadow: 0 0 6px 1px rgba(109, 40, 217, 0.6);
}
[data-theme="light"] .shooting-stars span::after {
  background: linear-gradient(90deg, rgba(109, 40, 217, 0.8), transparent);
}
[data-theme="light"] .tag-now,
[data-theme="light"] .btn-primary { color: #ffffff; }

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(70px, -50px) scale(1.12); }
  66% { transform: translate(-60px, 60px) scale(0.92); }
}

/* ---------- Shooting stars ---------- */
.shooting-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.shooting-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8);
  animation: shoot 8s linear infinite;
  opacity: 0;
}
.shooting-stars span::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), transparent);
  transform-origin: right;
}
.shooting-stars span:nth-child(1) { top: 12%; left: -10%; animation-delay: 0s; }
.shooting-stars span:nth-child(2) { top: 38%; left: -10%; animation-delay: 3.4s; }
.shooting-stars span:nth-child(3) { top: 70%; left: -10%; animation-delay: 6.2s; }
@keyframes shoot {
  0% { transform: translate(0, 0) rotate(15deg); opacity: 0; }
  5% { opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(120vw, 30vh) rotate(15deg); opacity: 0; }
}

/* Cursor */
.cursor-dot {
  position: fixed;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-2);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, opacity 0.3s;
  opacity: 0;
  filter: blur(3px);
  box-shadow: 0 0 30px var(--accent-2);
}
@media (hover: hover) and (pointer: fine) {
  .cursor-dot { opacity: 0.7; }
}

/* ---------- Glass utility ---------- */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 18px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  max-width: calc(100vw - 24px);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 0.95rem;
}
.logo-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--gradient);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.6);
}
.nav-links { display: flex; gap: 22px; list-style: none; }
.nav-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s, text-shadow 0.2s;
}
.nav-links a:hover {
  color: var(--text);
  text-shadow: 0 0 10px var(--accent-2);
}
.nav-toggle {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  place-items: center;
}
.theme-toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  display: grid; place-items: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.theme-toggle:hover {
  transform: rotate(20deg);
  box-shadow: 0 0 18px var(--accent);
}
@media (max-width: 900px) {
  .nav {
    left: 12px;
    right: 12px;
    transform: none;
    top: 10px;
    border-radius: 20px;
    padding: 10px 12px;
    gap: 10px;
    justify-content: flex-start;
  }
  .logo-text {
    display: none;
  }
  .nav-toggle {
    display: grid;
    margin-left: auto;
  }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7);
  }
  .nav.nav-open .nav-links {
    display: flex;
  }
  .nav-links a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.95rem;
    color: var(--text);
  }
  .nav-links a:hover,
  .nav-links a:focus-visible {
    background: var(--surface);
    text-shadow: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 120px 24px 140px;
  position: relative;
  isolation: isolate;
}
.hero-inner {
  max-width: 980px;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Orbits */
.orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
}
.orbit-ring {
  position: absolute;
  border: 1px dashed rgba(167, 139, 250, 0.25);
  border-radius: 50%;
  animation: spin linear infinite;
}
.r1 { width: 380px; height: 380px; animation-duration: 30s; }
.r2 { width: 620px; height: 620px; animation-duration: 60s; animation-direction: reverse; }
.r3 { width: 880px; height: 880px; animation-duration: 90s; }
.planet {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
}
.p1 {
  width: 14px; height: 14px;
  background: radial-gradient(circle at 30% 30%, #fcd34d, #b45309);
  box-shadow: 0 0 12px #fcd34d;
}
.p2 {
  width: 18px; height: 18px;
  background: radial-gradient(circle at 30% 30%, #67e8f9, #0e7490);
  box-shadow: 0 0 16px #67e8f9;
}
.p3 {
  width: 12px; height: 12px;
  background: radial-gradient(circle at 30% 30%, #f0abfc, #86198f);
  box-shadow: 0 0 12px #f0abfc;
}
.sun {
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7ed, #f97316 60%, #7c2d12 100%);
  box-shadow: 0 0 50px rgba(249, 115, 22, 0.55), 0 0 120px rgba(244, 114, 182, 0.25);
  animation: pulseSun 5s ease-in-out infinite;
}
@keyframes pulseSun {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width: 820px) {
  .orbit { display: none; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(103, 232, 249, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(103, 232, 249, 0); }
  100% { box-shadow: 0 0 0 0 rgba(103, 232, 249, 0); }
}

.hero-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Word rotator (seamless slide) */
.word-rotator {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  height: 1.05em;
  overflow: hidden;
  line-height: 1.05;
}
.word-rotator-inner {
  display: block;
  animation: slideWords 10s cubic-bezier(0.77, 0, 0.18, 1) infinite;
}
.word-rotator-inner > span {
  display: block;
  height: 1.05em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes slideWords {
  0%, 20%   { transform: translateY(0); }
  25%, 45%  { transform: translateY(-1.05em); }
  50%, 70%  { transform: translateY(-2.1em); }
  75%, 95%  { transform: translateY(-3.15em); }
  100%      { transform: translateY(-4.2em); }
}

.hero-subtitle {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: var(--text-dim);
  max-width: 720px;
  margin: 0 auto 36px;
}
.hero-subtitle strong { color: var(--text); font-weight: 600; }

.hero-tagline {
  font-size: clamp(0.9rem, 1.5vw, 1.12rem);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.2px;
  line-height: 1.5;
  margin: -4px auto 26px;
  padding: 8px 18px;
  display: inline-block;
  max-width: min(92%, 640px);
  text-align: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.hero-tagline strong { font-weight: 700; }

.hero-cta {
  display: flex; gap: 14px;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 60px;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-weight: 500; font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-primary {
  background: var(--gradient);
  color: #0a0820;
  font-weight: 600;
  box-shadow: var(--shadow), 0 0 30px rgba(103, 232, 249, 0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 70px -20px rgba(167, 139, 250, 0.7), 0 0 40px var(--accent-2);
}
.btn-ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover {
  background: var(--surface-strong);
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(167, 139, 250, 0.25);
}
.btn-icon { display: inline-block; vertical-align: -3px; margin-right: 2px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}
.stat {
  padding: 22px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: "✦";
  position: absolute;
  top: 6px; right: 8px;
  color: var(--accent);
  opacity: 0.35;
  font-size: 0.7rem;
}
.stat:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 30px rgba(167, 139, 250, 0.25);
}
.stat-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.stat-label {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 8px;
  line-height: 1.35;
  max-width: 18ch;
}
@media (max-width: 640px) {
  .hero-stats { grid-template-columns: 1fr; max-width: 360px; }
  .stat { min-height: auto; padding: 18px; }
}

.scroll-hint {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.7;
}
.scroll-hint span {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--accent-2), transparent);
  animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(1); transform-origin: top; }
  50% { transform: scaleY(0.4); transform-origin: top; }
}
@media (max-height: 820px) { .scroll-hint { display: none; } }

/* ---------- Sections ---------- */
.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px;
  position: relative;
}
.section-head { margin-bottom: 50px; }
.kicker {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: var(--accent-2);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-shadow: 0 0 10px rgba(103, 232, 249, 0.4);
}
.section h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
}
.about-card { padding: 32px; }
.about-card p { color: var(--text-dim); margin-bottom: 14px; }
.about-card p:last-child { margin-bottom: 0; }
.about-card strong { color: var(--text); font-weight: 600; }
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.86rem;
  backdrop-filter: blur(8px);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.chip:hover {
  transform: translateY(-2px);
  background: var(--surface-strong);
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.35);
}
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

/* Timeline */
.timeline {
  position: relative;
  padding-left: 28px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--accent-2), var(--accent-3));
  border-radius: 2px;
  opacity: 0.7;
  box-shadow: 0 0 12px var(--accent-2);
}
.tl-item { position: relative; margin-bottom: 28px; }
.tl-dot {
  position: absolute;
  left: -28px; top: 24px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent-2);
  box-shadow: 0 0 0 4px var(--bg), 0 0 20px var(--accent-2);
}
.tl-card { padding: 26px 28px; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.tl-card:hover {
  transform: translateX(4px);
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 30px rgba(167, 139, 250, 0.2);
}
.tl-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.tl-date {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  color: var(--accent-2);
}
.tl-tag {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tag-now {
  background: var(--gradient);
  color: #0a0820;
  font-weight: 600;
  border: none;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.5);
}
.tl-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.tl-card h4 {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.tl-card ul { list-style: none; }
.tl-card li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.tl-card li::before {
  content: "✦";
  position: absolute; left: 0;
  color: var(--accent-2);
  font-size: 0.8rem;
  top: 2px;
}
.tl-card li strong { color: var(--text); font-weight: 600; }

/* Projects */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.proj-card {
  padding: 28px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.proj-card::after {
  content: "";
  position: absolute;
  top: -40%; right: -40%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.proj-card:hover {
  transform: translateY(-6px);
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: var(--shadow);
}
.proj-card:hover::after { opacity: 1; }
.proj-emoji { font-size: 2.2rem; margin-bottom: 14px; filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.5)); }
.proj-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem; margin-bottom: 4px;
}
.proj-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: var(--accent-2);
  margin-bottom: 12px !important;
}
.proj-card p { color: var(--text-dim); font-size: 0.92rem; }
.proj-card strong { color: var(--text); font-weight: 600; }

/* Skills */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.skill-col { padding: 28px; }
.skill-col h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem; margin-bottom: 18px;
}
.skill-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tags span {
  padding: 7px 13px;
  border-radius: 8px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  font-size: 0.84rem;
  font-family: "JetBrains Mono", monospace;
  color: var(--text-dim);
  transition: color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.skill-tags span:hover {
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.4);
}

/* Contact */
.contact-section { padding-bottom: 30px; }
.contact-card {
  padding: 60px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: var(--gradient);
  opacity: 0.18;
  filter: blur(80px);
  top: -120px; right: -120px;
}
.contact-card .kicker { color: var(--accent-3); }
.contact-card h2 { margin-bottom: 14px; }
.contact-card > p {
  color: var(--text-dim);
  max-width: 560px;
  margin: 0 auto 32px;
}
.contact-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.footer {
  text-align: center;
  padding: 40px 20px 20px;
  color: var(--text-dim);
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding: 110px 16px 90px;
  }
  .hero-badge {
    margin-bottom: 18px;
  }
  .hero-title {
    line-height: 1.12;
    margin-bottom: 16px;
  }
  .hero-subtitle {
    margin-bottom: 24px;
  }
  .hero-cta {
    margin-bottom: 34px;
  }
  .btn {
    min-height: 44px;
    padding: 11px 18px;
  }
  .section {
    padding: 72px 16px;
  }
  .section-head {
    margin-bottom: 28px;
  }
  .about-card,
  .skill-col,
  .proj-card {
    padding: 22px;
  }
  .timeline {
    padding-left: 18px;
  }
  .timeline::before {
    left: 4px;
  }
  .tl-dot {
    left: -19px;
    top: 20px;
    width: 12px;
    height: 12px;
    border-width: 2px;
  }
  .tl-card {
    padding: 18px;
  }
  .tl-card h3 {
    font-size: 1.08rem;
  }
  .contact-section {
    padding-bottom: 20px;
  }
  .contact-card {
    padding: 32px 18px;
  }
  .contact-card::before {
    width: 300px;
    height: 300px;
    top: -90px;
    right: -90px;
    filter: blur(54px);
  }
}

@media (max-width: 520px) {
  .hero {
    padding: 104px 18px 110px;
  }
  .hero-title {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
  .hero-title .word-rotator {
    display: block;
    margin: 4px auto 0;
  }
  .hero-tagline {
    font-size: 0.9rem;
    border-radius: 16px;
    padding: 8px 14px;
    max-width: 100%;
  }
  .hero-subtitle {
    font-size: 0.98rem;
  }
  .chip {
    width: 100%;
    text-align: center;
  }
  .cards-grid,
  .skills-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .contact-links {
    gap: 10px;
  }
  .contact-links .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (hover: none), (pointer: coarse) {
  .shooting-stars,
  .cursor-dot {
    display: none;
  }
  .nebula-blob {
    filter: blur(90px);
  }
  .nb-1,
  .nb-2,
  .nb-3 {
    animation-duration: 40s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .shooting-stars,
  .cursor-dot,
  .orbit {
    display: none;
  }
}

::selection { background: var(--accent); color: #0a0820; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--surface-strong);
  border-radius: 10px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }


/* ---------------------------------------------------------------------------
   Hero chat — the chatbot IS the hero, Claude-style
   --------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The greeting clears out of the way once the visitor engages. Animating
   max-height alongside opacity lets the composer glide upward into the centre
   instead of the layout snapping. */
.hero-greeting {
  overflow: hidden;
  max-height: 640px;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease, transform 0.45s ease, margin 0.55s ease;
}
body.chat-engaged .hero-greeting {
  max-height: 0;
  opacity: 0;
  transform: translateY(-18px);
  margin-bottom: 0;
  pointer-events: none;
}

/* CTA + stats also step aside so the conversation owns the viewport. */
.hero-cta,
.hero-stats {
  transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease,
    margin 0.55s ease;
  max-height: 400px;
  opacity: 1;
  /* NO `overflow: hidden` at rest. It clips the primary button's glow to this
     container's rectangle, turning a soft halo into a hard-edged rectangle of
     light. Clipping is only needed while collapsing, so it lives in the
     .chat-engaged rule below. */
}

/* Breathing room between the chat's disclaimer line and these buttons; without
   it they sit flush against the text and read as overlapping. */
.hero-cta { margin-top: 34px; }
body.chat-engaged .hero-cta,
body.chat-engaged .hero-stats {
  overflow: hidden; /* only while collapsing — see note above */
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
body.chat-engaged .scroll-hint { opacity: 0; pointer-events: none; }

.hero-chat {
  width: min(720px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- Composer ---------- */

.composer {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px 8px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-strong);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow);
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
    transform 0.25s ease;
}
.composer:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 4px rgba(167, 139, 250, 0.16);
}
.composer input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 1.02rem;
  padding: 14px 0;
}
.composer input:focus { outline: none; }
.composer input::placeholder { color: var(--text-dim); }
.composer button {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.composer button:hover:not(:disabled) { transform: scale(1.07); }
.composer button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Transcript ---------- */

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  padding: 4px 4px 8px;
  text-align: left;
  scrollbar-width: thin;
}
.chat-log[hidden] { display: none; }

.chat-msg {
  max-width: 86%;
  padding: 13px 17px;
  border-radius: 18px;
  font-size: 0.95rem;
  line-height: 1.6;
  animation: msg-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--gradient);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.chat-msg.bot {
  align-self: flex-start;
  border: 1px solid var(--border);
  background: var(--surface-strong);
  border-bottom-left-radius: 6px;
}
.chat-msg p { margin: 0 0 9px; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg strong { color: var(--accent-2); font-weight: 600; }
.chat-msg.user strong { color: #fff; }
.chat-msg a { color: var(--accent-2); }
.chat-msg code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.88em;
  background: rgba(167, 139, 250, 0.16);
  padding: 1px 5px;
  border-radius: 5px;
}
.chat-msg.error {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}
[data-theme="light"] .chat-msg.error {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.3);
  background: rgba(254, 226, 226, 0.9);
}

.chat-typing { display: inline-flex; gap: 5px; align-items: center; }
.chat-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: chat-bounce 1.3s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ---------- Suggestions + meta ---------- */

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}
.chat-suggestions[hidden] { display: none; }
.chat-suggestions button {
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.chat-suggestions button:hover {
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.chat-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.chat-reset {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.chat-reset:hover { color: var(--text); border-color: var(--accent); }
.chat-reset[hidden] { display: none; }

.chat-disclaimer {
  color: var(--text-dim);
  font-size: 0.72rem;
  margin: 0;
}
.chat-disclaimer a { color: var(--accent); }
.chat-disclaimer a:hover { color: var(--accent-2); }

/* ---------- Scroll-back button ---------- */

.chat-fab {
  position: fixed;
  right: clamp(16px, 4vw, 32px);
  bottom: clamp(16px, 4vw, 32px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--gradient);
  color: #fff;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.25s ease;
}
.chat-fab:hover { transform: translateY(-3px) scale(1.03); }
.chat-fab[hidden] { display: none; }
.chat-fab .fab-spark { font-size: 1.15rem; animation: fab-twinkle 2.6s ease-in-out infinite; }
@keyframes fab-twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.65; transform: scale(1.18) rotate(12deg); }
}

@media (max-width: 640px) {
  .composer { padding-left: 18px; }
  .composer input { font-size: 0.95rem; padding: 12px 0; }
  .composer button { width: 42px; height: 42px; }
  .chat-msg { max-width: 94%; font-size: 0.92rem; }
  .chat-log { max-height: 46vh; }
  .chat-fab .fab-label { display: none; }
  .chat-fab { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-greeting, .hero-cta, .hero-stats, .composer,
  .chat-suggestions button, .composer button, .chat-fab { transition: none; }
  .chat-msg { animation: none; }
  .chat-typing span, .chat-fab .fab-spark { animation: none; }
}

/* Once the greeting collapses, the hero can be shorter than the screen. The
   mobile breakpoint sets `min-height: auto` (correct for the tall at-rest
   marketing block), which would strand the composer near the top — so re-assert
   a full-height, centred hero whenever a conversation is in progress. Higher
   specificity than the media-query rule, so source order doesn't matter.
   dvh tracks the collapsing mobile address bar; vh is the fallback. */
body.chat-engaged .hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 96px;
  padding-bottom: 48px;
  transition: min-height 0.45s ease, padding 0.45s ease;
}

/* ---------------------------------------------------------------------------
   Chat emphasis — draw the eye to the composer
   --------------------------------------------------------------------------- */

/* ---------- Spotlight the chat ---------- */

.hero-chat {
  position: relative;
  width: min(760px, 100%);
}

/* A soft pool of light behind the conversation. Does the work the orbit rings
   used to do — draws the eye to the centre — without any moving parts. */
.hero-chat::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 190%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(167, 139, 250, 0.17) 0%,
    rgba(103, 232, 249, 0.08) 35%,
    transparent 70%
  );
  transition: opacity 0.5s ease;
}
[data-theme="light"] .hero-chat::before {
  background: radial-gradient(
    ellipse at center,
    rgba(109, 40, 217, 0.11) 0%,
    rgba(8, 145, 178, 0.06) 35%,
    transparent 70%
  );
}
body.chat-engaged .hero-chat::before { opacity: 1.25; }

/* ---------- A composer with more presence ---------- */

.composer {
  padding: 9px 9px 9px 26px;
  border-width: 1.5px;
  border-radius: 999px;
  background: var(--surface-strong);
  box-shadow: 0 18px 50px -18px rgba(167, 139, 250, 0.55),
    0 0 0 1px rgba(167, 139, 250, 0.1) inset;
}
[data-theme="light"] .composer {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 50px -20px rgba(109, 40, 217, 0.35),
    0 0 0 1px rgba(109, 40, 217, 0.06) inset;
}
.composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 22px 60px -18px rgba(167, 139, 250, 0.7),
    0 0 0 4px rgba(167, 139, 250, 0.18);
}
[data-theme="light"] .composer:focus-within {
  box-shadow: 0 22px 60px -20px rgba(109, 40, 217, 0.4),
    0 0 0 4px rgba(109, 40, 217, 0.14);
}
.composer input {
  font-size: 1.08rem;
  padding: 16px 0;
}
.composer button { width: 50px; height: 50px; }

/* Bot replies read as a calm sheet rather than another glassy card. */
.chat-msg.bot {
  background: var(--surface-strong);
  border-color: var(--border);
}

@media (max-width: 640px) {
  .composer { padding-left: 20px; }
  .composer input { font-size: 1rem; padding: 13px 0; }
  .composer button { width: 44px; height: 44px; }
  .hero-chat::before { width: 130%; height: 160%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-chat::before { transition: none; }
}

/* The spotlight was tall enough to spill over the CTA buttons below the chat,
   washing them out. Pull it in so it lights the conversation only. */
.hero-chat::before { height: 150%; }

/* ---------------------------------------------------------------------------
   Recommendations — horizontally scrollable cards
   --------------------------------------------------------------------------- */

.recs-section { padding-top: 40px; }

.recs-wrap { position: relative; }

.recs-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  /* `overflow-x: auto` forces overflow-y to compute to auto as well, so the
     rail clips vertically too. The cards lift 5px on hover and cast a shadow,
     which was getting sliced off at the top edge — hence the "broken" top
     border. Padding has to exceed the lift, not just match it. */
  padding: 18px 4px 22px;
  margin: -18px -4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  -webkit-overflow-scrolling: touch;
}
.recs-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.recs-rail::-webkit-scrollbar { height: 6px; }
.recs-rail::-webkit-scrollbar-track { background: transparent; }
.recs-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.recs-rail::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.rec-card {
  flex: 0 0 min(380px, 82vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1),
    border-color 0.25s ease, box-shadow 0.25s ease;
}
.rec-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 24px 60px -24px rgba(167, 139, 250, 0.6);
}
.rec-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

.rec-head { display: flex; align-items: center; gap: 13px; }

/* The initials sit underneath as a data attribute, so a missing or slow photo
   still renders something deliberate rather than a broken-image icon. The
   <img> removes itself on error and reveals them. */
.rec-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
}
.rec-avatar::before { content: attr(data-initials); }
.rec-avatar img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.rec-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rec-name {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
}
.rec-title { color: var(--text-dim); font-size: 0.78rem; line-height: 1.35; }

.rec-quote {
  position: relative;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rec-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-2);
  font-size: 0.8rem;
  font-weight: 500;
}

/* Arrows: pointer users don't always realise a rail scrolls. Hidden from
   assistive tech because the rail itself is keyboard-scrollable. */
.recs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--accent-2);
  cursor: pointer;
  /* Always visible: a hover-only control is invisible to anyone who hasn't
     already guessed the rail scrolls, which defeats the point. */
  opacity: 1;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease, opacity 0.2s ease;
}
.recs-nav svg { display: block; }
.recs-nav:hover {
  border-color: var(--accent);
  color: #fff;
  background: var(--gradient);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 30px -10px rgba(167, 139, 250, 0.8);
}
.recs-nav:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* Dimmed rather than hidden, so the control's position stays stable. */
.recs-nav[disabled] { opacity: 0.25; pointer-events: none; }
.recs-nav.prev { left: -18px; }
.recs-nav.next { right: -18px; }

@media (hover: none), (max-width: 720px) {
  .recs-nav { display: none; }
  .rec-card { padding: 20px; }
  .rec-quote { -webkit-line-clamp: 7; line-clamp: 7; }
}

@media (prefers-reduced-motion: reduce) {
  .rec-card, .recs-nav { transition: none; }
}

/* Keep the suggestion chips on a single row so they never push the CTA below
   the fold. On narrow screens they scroll sideways rather than wrapping. */
.chat-suggestions {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* `overflow-x: auto` forces overflow-y to compute to auto too, so this box
     clips vertically as well. The chips lift 2px on hover, which was getting
     sliced off at the top edge. Pad above the lift and pull the box back up by
     the same amount so nothing moves. */
  padding-top: 10px;
  margin-top: -10px;
  padding-bottom: 4px;
}
.chat-suggestions::-webkit-scrollbar { display: none; }
.chat-suggestions button { flex: 0 0 auto; white-space: nowrap; }

/* On narrow screens let them wrap onto a second row. A one-line rail there
   would need sideways scrolling, which is less discoverable than simply
   seeing all four, and the CTA still clears the fold. */
@media (max-width: 640px) {
  .chat-suggestions {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
  }
}