/* =====================================================
   FAHAD HAFEEZ PORTFOLIO — PREMIUM DESIGN SYSTEM
   =====================================================
   01. Fonts & Reset
   02. Design Tokens (CSS Variables)
   03. Base & Typography
   04. Utility Classes
   05. Animated Background & Mouse Spotlight
   06. Navigation
   07. Hero Section
   08. Metrics Strip
   09. Featured Work
   10. Khwand AI Section
   11. Datasets Section
   12. Research Section
   13. Publications
   14. Projects
   15. Open Source
   16. Timeline
   17. Skills
   18. Contact
   19. Footer
   20. Page Hero (blog/publications)
   21. Animations & Reveals

   22. Responsive
   ===================================================== */

/* 01. Fonts & Reset */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* 02. Design Tokens */
:root {
  /* Colors */
  --bg:              #050816;
  --surface:         rgba(255,255,255,0.03);
  --surface-solid:   #0a0f1e;
  --border:          rgba(255,255,255,0.08);
  --border-strong:   rgba(255,255,255,0.14);
  --primary:         #4F46E5;
  --primary-soft:    rgba(79,70,229,0.10);
  --primary-glow:    rgba(79,70,229,0.25);
  --secondary:       #06B6D4;
  --secondary-soft:   rgba(6,182,212,0.10);
  --text:            #F8FAFC;
  --text-muted:      #94A3B8;
  --success:         #22C55E;
  --success-soft:    rgba(34,197,94,0.10);
  /* Layout */
  --nav-h:           64px;
  --max-w:           1120px;
  --radius:          24px;
  --radius-sm:       12px;
  --radius-pill:     999px;
  /* Shadows */
  --shadow:          0 8px 40px rgba(0,0,0,0.35);
  --shadow-sm:       0 4px 16px rgba(0,0,0,0.2);
  /* Motion */
  --ease:            0.3s cubic-bezier(0.16,1,0.3,1);
  --ease-spring:     0.5s cubic-bezier(0.34,1.56,0.64,1);
}

/* Light theme overrides */
.light {
  --bg:              #f8fafc;
  --surface:         rgba(0,0,0,0.03);
  --surface-solid:   #ffffff;
  --border:          rgba(0,0,0,0.08);
  --border-strong:   rgba(0,0,0,0.14);
  --primary:         #4338CA;
  --primary-soft:    rgba(67,56,202,0.08);
  --primary-glow:    rgba(67,56,202,0.15);
  --text:            #0f172a;
  --text-muted:      #64748b;
  --shadow:          0 8px 40px rgba(0,0,0,0.08);
  --shadow-sm:       0 4px 16px rgba(0,0,0,0.05);
}

/* 03. Base & Typography */
html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 100px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background var(--ease), color var(--ease);
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fluid typography */
h1, h2, h3, h4 {
  font-family: 'Inter Tight', system-ui, sans-serif;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -0.03em;
}

code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.87em;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 6px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ease);
}

a:hover { color: var(--primary); }

::selection { background: var(--primary); color: #fff; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Vertical scroll progress indicator (right edge dot marker) ── */
#scroll-progress-track {
  position: fixed;
  top: 0;
  right: 0;
  width: 24px;
  height: 100vh;
  background: transparent;
  z-index: 300;
  cursor: pointer;
}

/* Thin vertical rail line */
#scroll-progress-track::before {
  content: '';
  position: absolute;
  top: 24px;
  bottom: 24px;
  right: 11px;
  width: 2px;
  background: var(--border);
  border-radius: 2px;
}

/* Filled portion of the rail (top → current position) */
#scroll-progress {
  position: fixed;
  top: 24px;
  right: 11px;
  width: 2px;
  height: 0;
  z-index: 301;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  border-radius: 2px;
  transition: none;
  pointer-events: none;
}

/* Moving dot marker on the rail */
#scroll-marker {
  position: fixed;
  right: 6px;
  top: 24px;
  width: 12px;
  height: 12px;
  z-index: 302;
  background: var(--primary);
  border: 2px solid var(--bg);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--primary-glow), 0 0 20px var(--primary-glow);
  pointer-events: none;
  transition: none;
}

/* Tooltip for scroll progress — appears on hover near the right edge */
#scroll-tooltip {
  position: fixed;
  right: 32px;
  top: 0;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: var(--surface-solid);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  transform: translateY(-50%);
  z-index: 310;
  white-space: nowrap;
}

/* Connector line from tooltip to dot */
#scroll-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 1px;
  background: var(--border);
}

/* Show tooltip when hovering the track area (JS also controls this) */
#scroll-progress-track:hover ~ #scroll-tooltip {
  opacity: 1;
}
#scroll-progress-track:hover ~ #scroll-marker {
  box-shadow: 0 0 12px var(--primary-glow), 0 0 28px var(--primary-glow);
}

/* Light theme overrides for scroll indicator */
.light #scroll-marker {
  border-color: var(--bg);
}
.light #scroll-progress-track::before {
  background: var(--border);
}

/* 04. Utility Classes */
.glass-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease), background var(--ease);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 42%, transparent 70%, rgba(255,255,255,0.04));
  pointer-events: none;
  opacity: 0.8;
}

.glass-card::after {
  content: '';
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,0.14), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--ease), transform var(--ease);
}

.glass-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 54px rgba(0,0,0,0.42);
}

.glass-card:hover::after {
  opacity: 1;
  transform: scale(1);
}

.glass-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: all var(--ease-spring);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.glass-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}

.glass-button:hover::before {
  transform: translateX(120%);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 0 24px var(--primary-glow);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 40px var(--primary-glow);
  color: #fff;
}

.btn-outline {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px);
}

.btn-outline:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: rgba(79,70,229,0.4);
  transform: translateY(-3px) scale(1.02);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: all var(--ease);
}

.btn-sm:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--border-strong);
}

.section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  position: relative;
  letter-spacing: -0.03em;
  display: block;
  text-align: center;
  margin-inline: auto;
  text-wrap: balance;
}

.section-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), transparent);
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 48px;
  text-align: center;
  text-wrap: pretty;
}

.section-subtitle.centered {
  margin-inline: auto;
  text-align: center;
}

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

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 10px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid rgba(79,70,229,0.18);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Grids */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.section-cta {
  margin-top: 40px;
  text-align: center;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--primary);
  transition: opacity var(--ease);
}

.card-link:hover { opacity: 0.75; }

/* 05. Animated Background & Mouse Spotlight */
.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.3;
  will-change: transform;
}

.orb-blue {
  width: 600px;
  height: 600px;
  top: -10%;
  left: -5%;
  background: radial-gradient(circle, rgba(79,70,229,0.4), rgba(6,182,212,0.1) 60%, transparent 80%);
  animation: orbFloat 18s ease-in-out infinite;
}

.orb-indigo {
  width: 500px;
  height: 500px;
  bottom: -10%;
  right: -5%;
  background: radial-gradient(circle, rgba(6,182,212,0.3), rgba(79,70,229,0.1) 60%, transparent 80%);
  animation: orbFloat 18s ease-in-out infinite reverse;
  animation-delay: -9s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(40px, -30px) scale(1.05); }
  50%      { transform: translate(-20px, 40px) scale(0.95); }
  75%      { transform: translate(30px, 20px) scale(1.02); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}

#mouse-spotlight {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,0.06), transparent 70%);
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%);
  transition: left 0.15s ease-out, top 0.15s ease-out, opacity 0.3s;
  opacity: 0;
  will-change: left, top;
}

.light #mouse-spotlight {
  background: radial-gradient(circle, rgba(79,70,229,0.04), transparent 70%);
}

/* 06. Navigation */
nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: min(calc(100% - 32px), var(--max-w));
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(5,8,22,0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.28);
  transition: background var(--ease), border-color var(--ease), backdrop-filter var(--ease),
              height var(--ease), padding var(--ease), top var(--ease), box-shadow var(--ease), width var(--ease);
}

nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-140%);
  transition: transform 0.8s ease;
  pointer-events: none;
}

nav:hover::before {
  transform: translateX(140%);
}

/* Shrink navbar when scrolling down */
nav.shrink {
  height: 54px;
  padding: 0 16px;
  top: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.18);
}

/* Adjust logo size when navbar is shrunk */
nav.shrink .logo {
  font-size: 1.2rem;
  padding: 7px 10px;
}

nav.scrolled {
  background: rgba(5,8,22,0.90);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 20px 50px rgba(0,0,0,0.28);
}

.light nav {
  background: rgba(248,250,252,0.76);
  border-color: rgba(15,23,42,0.08);
}

.light nav.scrolled {
  background: rgba(248,250,252,0.92);
}

.logo {
  font-family: 'Inter Tight', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.04em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(79,70,229,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}

.logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.16), transparent 50%);
  pointer-events: none;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  margin: 0 8px;
}

.nav-links a {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 999px;
  transition: color var(--ease), background var(--ease), transform var(--ease), box-shadow var(--ease);
  white-space: nowrap;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  inset: auto 10px 4px 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  background: var(--primary-soft);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: color var(--ease), background var(--ease), transform var(--ease), border-color var(--ease), box-shadow var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.nav-icon:hover {
  color: var(--text);
  background: var(--primary-soft);
  border-color: rgba(79,70,229,0.25);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 22px rgba(79,70,229,0.12);
}

.nav-icon-text {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: 'Inter Tight', sans-serif;
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted);
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
  flex-shrink: 0;
  position: relative;
}

.theme-btn:hover {
  background: var(--primary-soft);
  border-color: rgba(79,70,229,0.25);
  color: var(--text);
  transform: translateY(-1px);
}

.theme-icon-light,
.theme-icon-dark {
  position: absolute;
  transition: opacity var(--ease), transform var(--ease);
}

/* Dark mode (default) — show moon, hide sun */
.theme-icon-dark  { opacity: 1; transform: rotate(0deg); }
.theme-icon-light { opacity: 0; transform: rotate(90deg); }

/* Light mode — show sun, hide moon */
.light .theme-icon-dark  { opacity: 0; transform: rotate(-90deg); }
.light .theme-icon-light { opacity: 1; transform: rotate(0deg); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 7px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 07. Hero Section */
header#home {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 112px 32px 80px;
}

section[id] {
  scroll-margin-top: 96px;
}

.hero-container {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 56px;
  width: 100%;
  position: relative;
  z-index: 1;
  /* Stack vertically on narrow screens */
  flex-direction: column;
}

/* Larger screens – place hero content side‑by‑side */
@media (min-width: 768px) {
  .hero-container {
    flex-direction: row;
    align-items: flex-start;
  }
}

.hero-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
}

/* Profile picture and name styling */
.profile-pic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 4px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 0 6px rgba(79,70,229,0.12), 0 20px 60px rgba(79,70,229,0.18);
  transition: transform var(--ease-spring), box-shadow var(--ease);
}

.profile-pic:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 8px rgba(79,70,229,0.14), 0 24px 70px rgba(79,70,229,0.22);
}

/* Hero right – center the metrics card and give it some breathing room */
.hero-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.hero-name {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0.5rem 0;
  color: var(--text);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--primary);
  letter-spacing: 0.06em;
  padding: 8px 14px;
  background: var(--primary-soft);
  border: 1px solid rgba(79,70,229,0.2);
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.hero-badge i { color: var(--secondary); }

.hero-title {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--text) 40%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 12px 40px rgba(79,70,229,0.15);
  text-wrap: balance;
}

.hero-subtitle {
  color: var(--text-muted);
  font-size: 1.06rem;
  line-height: 1.75;
  max-width: 580px;
  margin-bottom: 20px;
}

.hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.hero-highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  transition: transform var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}

.hero-highlight-pill i {
  color: var(--secondary);
}

.hero-highlight-pill:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(79,70,229,0.28);
  box-shadow: 0 8px 22px rgba(79,70,229,0.12);
}

.typing-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  min-height: 1.8rem;
}

.typing-prompt {
  font-family: 'JetBrains Mono', monospace;
  color: var(--primary);
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.6;
}

#typing {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  color: var(--secondary);
  font-weight: 400;
}

.typing-cursor {
  font-family: 'JetBrains Mono', monospace;
  color: var(--primary);
  font-size: 1.1rem;
  animation: blink 1.1s step-end infinite;
  flex-shrink: 0;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-buttons .glass-button:hover i {
  transform: translateY(-1px) scale(1.05);
}

.hero-buttons .glass-button i {
  transition: transform var(--ease);
}

/* Hero right metrics card */
.hero-right {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.hero-card {
  padding: 30px 34px;
  min-width: 280px;
  animation: heroCardFloat 6s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  border-color: rgba(79,70,229,0.16);
}

.hero-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(125deg, rgba(79,70,229,0.18), transparent 35%, transparent 70%, rgba(6,182,212,0.18));
  pointer-events: none;
  border-radius: inherit;
}

@keyframes heroCardFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.01); }
}

.hero-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 46px var(--primary-glow), var(--shadow);
  transform: translateY(-8px) scale(1.03);
}

.hero-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--ease), transform var(--ease);
}

.hero-card-row:hover {
  color: var(--text);
  transform: translateX(4px);
}

.hero-card-row i { color: var(--secondary); flex-shrink: 0; }

.hero-card-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.hero-card-founder {
  color: var(--primary);
  font-weight: 600;
}

.hero-card-founder i { color: var(--primary); }

/* 08. Metrics Strip */
.metrics {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: var(--max-w);
  margin: -32px auto 0;
  position: relative;
  z-index: 2;
  padding: 0 32px;
}

.metric-card {
  padding: 24px 28px;
  text-align: center;
  min-width: 140px;
  flex: 1;
  transition: transform var(--ease-spring), border-color var(--ease), box-shadow var(--ease);
  position: relative;
  overflow: hidden;
}

.metric-card:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--primary);
  box-shadow: 0 12px 36px rgba(79,70,229,0.16);
}

.metric-card-accent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: rgba(79,70,229,0.2);
  background: var(--primary-soft);
}

.metric-card-accent i { color: var(--primary); }

.metric-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  display: inline;
}

.metric-suffix {
  font-family: 'Inter Tight', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  opacity: 0.7;
}

.metric-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-top: 6px;
}

/* 09. Featured Work */
.featured-card {
  padding: 32px;
  transition: transform var(--ease-spring), border-color var(--ease), box-shadow var(--ease);
  position: relative;
  overflow: hidden;
}

.featured-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: var(--primary);
  box-shadow: 0 0 32px var(--primary-glow), var(--shadow);
}

.featured-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 16px;
}

.featured-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  background: var(--secondary-soft);
  color: var(--secondary);
  border: 1px solid rgba(6,182,212,0.2);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.featured-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.35;
}

.featured-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 18px;
}

/* 10. Khwand AI Section */
.khwand-card {
  padding: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.khwand-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 24px var(--primary-glow), var(--shadow);
  transform: translateY(-4px);
}

.kw-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 14px;
}

.khwand-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.khwand-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* 11. Datasets Section */
.dataset-card {
  padding: 28px;
  transition: transform var(--ease-spring), border-color var(--ease), box-shadow var(--ease);
  position: relative;
  overflow: hidden;
}

.dataset-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: var(--secondary);
  box-shadow: 0 0 24px rgba(6,182,212,0.15), var(--shadow);
}

.dataset-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--secondary-soft);
  color: var(--secondary);
  margin-bottom: 14px;
}

.dataset-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.dataset-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.dataset-task {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 3px 10px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: var(--radius-pill);
}

.dataset-downloads {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.dataset-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 16px;
}

.dataset-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dataset-license {
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

/* 12. Research Section */
.research-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.research-interests .section-subtitle {
  margin-bottom: 28px;
}

.interest-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.interest-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--ease), background var(--ease), transform var(--ease);
}

.interest-item:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateX(4px);
}

.interest-item i { color: var(--secondary); flex-shrink: 0; }

/* Network visualization */
.research-viz {
  display: flex;
  align-items: center;
  justify-content: center;
}

.network-svg {
  width: 100%;
  max-width: 400px;
  height: auto;
}

.net-edge {
  stroke: var(--primary);
  stroke-width: 1;
  opacity: 0.12;
  stroke-linecap: round;
}

.net-node {
  opacity: 0.8;
  transition: opacity 0.4s ease, r 0.4s ease;
}

.net-node-sm { opacity: 0.5; }
.net-node-xs { opacity: 0.3; }

.network-svg:hover .net-node { opacity: 1; }
.network-svg:hover .net-edge { opacity: 0.25; }

/* Gentle pulse on center node */
.net-node {
  animation: nodePulse 4s ease-in-out infinite;
}

@keyframes nodePulse {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

.net-node-sm {
  animation: nodePulse 4s ease-in-out infinite;
  animation-delay: -1s;
}

.net-node-xs {
  animation: nodePulse 4s ease-in-out infinite;
  animation-delay: -2s;
}

/* 13. Publications */
.pub-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pub-card {
  padding: 28px;
  transition: transform var(--ease-spring), border-color var(--ease), box-shadow var(--ease);
  position: relative;
  overflow: hidden;
}

.pub-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--primary);
  box-shadow: 0 0 20px var(--primary-glow), var(--shadow);
}

.pub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.pub-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 12px;
}

.pub-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pub-venue {
  font-weight: 600;
  color: var(--secondary);
}

.pub-year {
  font-family: 'JetBrains Mono', monospace;
}

.pub-citations {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pub-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 14. Projects */
.project-card {
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.project-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 600;
}

.project-header h3 i { color: var(--primary); }

.status-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid rgba(79,70,229,0.2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.status-badge.active {
  background: var(--success-soft);
  color: var(--success);
  border-color: rgba(34,197,94,0.25);
}

.project-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 16px;
}

.project-card .tag-row { margin-bottom: 18px; }

/* 15. Open Source */
.oss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.repo-card {
  padding: 22px 24px;
  transition: transform var(--ease-spring), border-color var(--ease), box-shadow var(--ease);
  position: relative;
  overflow: hidden;
}

.repo-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 20px var(--primary-glow), var(--shadow);
  border-color: var(--primary);
}

.repo-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.repo-header i { color: var(--text-muted); flex-shrink: 0; margin-top: 2px; }

.repo-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.repo-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 0;
}

.repo-stats {
  display: flex;
  gap: 16px;
}

.repo-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.repo-stats i { color: var(--text-muted); }

/* 16. Timeline */
.timeline {
  position: relative;
  padding-left: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 680px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary), var(--secondary), transparent);
  border-radius: 2px;
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
}

.tl-dot {
  position: absolute;
  left: -41px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--bg);
  box-shadow: 0 0 12px var(--primary-glow);
  transition: transform var(--ease-spring);
}

.tl-item:hover .tl-dot {
  transform: scale(1.4);
}

.tl-year {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  padding-top: 24px;
  text-align: right;
  line-height: 1;
}

.tl-card {
  padding: 22px 26px;
  position: relative;
  overflow: hidden;
}

.tl-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.tl-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* 17. Skills */
.skills-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.skill-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  border-radius: var(--radius-pill);
  transition: transform var(--ease-spring), border-color var(--ease), background var(--ease), box-shadow var(--ease);
  cursor: default;
  position: relative;
  overflow: hidden;
}

.skill-pill:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 16px var(--primary-glow);
}

/* 18. Contact */
.contact-inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.section-title.centered {
  text-align: center;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--ease-spring);
  position: relative;
  overflow: hidden;
}

.contact-btn:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 24px var(--primary-glow);
}

/* 19. Footer */
footer {
  text-align: center;
  padding: 40px 32px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
}

footer a {
  color: var(--primary);
}

footer a:hover { opacity: 0.8; }

/* 20. Page Hero (blog/publications) */
.page-hero {
  padding: 100px 32px 48px;
  min-height: auto;
  position: relative;
}

.page-hero .section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.page-hero .hero-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  background: var(--primary-soft);
  border: 1px solid rgba(79,70,229,0.2);
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.page-hero .hero-name {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--text) 40%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero .page-intro {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 700px;
}

.page-card h3 {
  margin: 14px 0 10px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-card h3 i { color: var(--primary); }

.page-card p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 14px;
}

/* 21. Sections Base */
.section {
  padding: 96px 32px;
  position: relative;
}

@media (min-width: 1024px) {
  .section {
    padding: 108px 40px;
  }
}

.section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(79,70,229,0.04), transparent 32%);
  pointer-events: none;
  z-index: 0;
}

.section > * {
  position: relative;
  z-index: 1;
}

.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 22. Animations & Reveals */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition:
    opacity 0.7s cubic-bezier(0.16,1,0.3,1),
    transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.16,1,0.3,1),
    transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.4s; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.48s; }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.56s; }

/* Hero entrance */
header#home .hero-left {
  animation: heroEntrance 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}

header#home .hero-right {
  animation: heroEntrance 0.9s cubic-bezier(0.16,1,0.3,1) 0.15s forwards;
  opacity: 0;
}

@keyframes heroEntrance {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  header#home .hero-left,
  header#home .hero-right,
  .hero-card,
  .orb,
  .net-node,
  .net-node-sm,
  .net-node-xs {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 23. Responsive */
@media (max-width: 980px) {
  .hero-container {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }

  .hero-subtitle {
    margin-inline: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-right {
    width: 100%;
  }

  .hero-card {
    min-width: auto;
    width: 100%;
    max-width: 340px;
  }

  .research-grid,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .metrics {
    flex-wrap: wrap;
  }

  .metric-card {
    flex: 1 1 calc(33% - 12px);
  }

  .oss-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  nav {
    top: 12px;
    width: calc(100% - 20px);
    padding: 0 12px;
  }

  nav.shrink {
    top: 8px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  }

  .nav-links.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-links li { width: 100%; }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 10px 12px;
  }

  .nav-icons {
    gap: 4px;
  }

  .nav-icon { width: 36px; height: 36px; }
  .nav-icon i { scale: 0.8; }

  header#home {
    padding: 64px 18px;
  }

  .hero-card {
    padding: 24px 28px;
  }

  .section {
    padding: 72px 18px;
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }

  .metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 18px;
  }

  .metric-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .metrics {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -20px;
  }

  .metric-card-accent {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 12px;
  }

  .metric-num { font-size: 1.8rem; }

  .hero-title {
    font-size: clamp(40px, 8vw, 52px);
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons .glass-button { width: 100%; justify-content: center; }

  .timeline { padding-left: 36px; }
  .tl-item { grid-template-columns: 44px 1fr; gap: 10px; }
  .tl-year { font-size: 0.82rem; }

  .contact-links {
    flex-direction: column;
    align-items: center;
  }

  .contact-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  #scroll-progress-track,
  #scroll-progress,
  #scroll-marker,
  #scroll-tooltip {
    display: none;
  }

  .hero-title { font-size: 2.1rem; }
  .metric-num { font-size: 2rem; }
  .section-title { font-size: 1.5rem; }
  .skills-pills { gap: 8px; }
  .skill-pill { padding: 8px 16px; font-size: 0.8rem; }
}