/* ============================================================
   DESIGN SYSTEM — Harsit Upadhya Personal Academic Portfolio
   Tech-forward theme: dark mode first, electric accents, circuit motifs
   ============================================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');

/* --- CSS Custom Properties --- */
:root {
  /* Colors — Dark Mode (default/primary) */
  --bg-primary: #0A0E17;
  --bg-secondary: #0F1623;
  --bg-tertiary: #141D2E;
  --bg-card: #111827;
  --text-primary: #E8F0FE;
  --text-secondary: #8B9EBF;
  --text-tertiary: #4A5568;
  --accent: #00E5CC;
  --accent-secondary: #7B61FF;
  --accent-tertiary: #FF6B35;
  --accent-subtle: rgba(0, 229, 204, 0.08);
  --accent-subtle-hover: rgba(0, 229, 204, 0.14);
  --border: rgba(255, 255, 255, 0.06);
  --border-accent: rgba(0, 229, 204, 0.3);
  --glow: rgba(0, 229, 204, 0.15);
  --glow-strong: rgba(0, 229, 204, 0.3);

  /* Typography */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --content-width: 760px;
  --wide-width: 1200px;
  --nav-height: 64px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Mode override */
[data-theme="light"] {
  --bg-primary: #0D0B1E;
  --bg-secondary: #14112A;
  --bg-tertiary: #1C1840;
  --bg-card: #1A1635;
  --text-primary: #E8E4FF;
  --text-secondary: #A8A4C8;
  --text-tertiary: #6B6890;
  --accent: #00E5CC;
  --accent-secondary: #9B7FFF;
  --accent-tertiary: #FF7A4D;
  --accent-subtle: rgba(0, 229, 204, 0.1);
  --accent-subtle-hover: rgba(0, 229, 204, 0.16);
  --border: rgba(255, 255, 255, 0.07);
  --border-accent: rgba(0, 229, 204, 0.3);
  --glow: rgba(0, 229, 204, 0.12);
  --glow-strong: rgba(0, 229, 204, 0.25);
  /* Light mode still keeps galaxy theme */
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 50px 80px, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90px 150px, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 130px 60px, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 200px 200px, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 280px 100px, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60px 200px, rgba(180,220,255,0.8) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 180px 50px, rgba(255,240,200,0.8) 0%, transparent 100%),
    radial-gradient(ellipse at 20% 60%, rgba(60, 20, 120, 0.2) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 30%, rgba(0, 60, 90, 0.2) 0%, transparent 40%),
    linear-gradient(rgba(0, 229, 204, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 204, 0.02) 1px, transparent 1px);
  background-size:
    300px 250px,
    300px 250px,
    300px 250px,
    300px 250px,
    300px 250px,
    300px 250px,
    300px 250px,
    300px 250px,
    60% 50%,
    40% 40%,
    48px 48px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-base), color var(--transition-base);
  /* Galaxy background: stars pattern + nebula glow */
  background-image:
    /* Star field layer 1 — tiny stars (1px) scattered across screen */
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 60px 160px, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 80px 240px, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 120px 100px, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 140px 200px, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 180px 50px, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 220px 300px, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 260px 140px, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 300px 80px, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 340px 220px, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 380px 180px, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 420px 60px, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 460px 280px, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 500px 120px, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 540px 340px, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 580px 200px, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 620px 40px, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 660px 160px, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 700px 260px, rgba(255,255,255,0.7) 0%, transparent 100%),
    /* Star field layer 2 — slightly larger stars (1.5px) with glow */
    radial-gradient(1.5px 1.5px at 15px 90px, rgba(180,220,255,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90px 180px, rgba(255,240,200,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 170px 270px, rgba(200,180,255,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 250px 40px, rgba(180,220,255,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 330px 150px, rgba(255,240,200,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 410px 300px, rgba(200,180,255,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 490px 80px, rgba(180,220,255,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 570px 230px, rgba(255,240,200,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 650px 120px, rgba(200,180,255,1) 0%, transparent 100%),
    /* Nebula / galaxy cloud layers */
    radial-gradient(ellipse at 15% 50%, rgba(60, 20, 120, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(0, 80, 100, 0.2) 0%, transparent 45%),
    radial-gradient(ellipse at 60% 80%, rgba(100, 30, 80, 0.15) 0%, transparent 50%),
    /* Subtle grid still present but very faint */
    linear-gradient(rgba(0, 229, 204, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 204, 0.015) 1px, transparent 1px);
  background-size:
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    720px 360px,
    360px 180px,
    360px 180px,
    360px 180px,
    360px 180px,
    360px 180px,
    360px 180px,
    360px 180px,
    360px 180px,
    360px 180px,
    60% 50%,
    40% 40%,
    50% 40%,
    48px 48px;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-lg); }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p {
  margin-bottom: var(--space-md);
  max-width: 68ch;
  color: var(--text-secondary);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
  color: var(--accent);
  opacity: 0.8;
  text-decoration: none;
}

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

strong { font-weight: 600; color: var(--text-primary); }
em { font-style: italic; }

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.content {
  max-width: var(--content-width);
  margin: 0 auto;
}

section {
  padding: var(--space-3xl) 0;
}

section + section {
  border-top: 1px solid var(--border);
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

[data-theme="light"] .nav {
  background: rgba(244, 247, 251, 0.85);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-logo:hover {
  text-decoration: none;
  color: var(--accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: var(--space-xs) 0;
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
  text-decoration: none;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--transition-fast);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--glow);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Dark mode toggle */
.theme-toggle {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--glow);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* --- Hero Section --- */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + var(--space-2xl));
  padding-bottom: var(--space-3xl);
  position: relative;
  overflow: hidden;
}

/* Circuit/network SVG background */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: -5%;
  width: 65%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 500' opacity='0.18'%3E%3Ccircle cx='420' cy='80' r='5' fill='%2300E5CC'/%3E%3Ccircle cx='180' cy='160' r='4' fill='%2300E5CC'/%3E%3Ccircle cx='520' cy='240' r='6' fill='%2300E5CC'/%3E%3Ccircle cx='80' cy='300' r='4' fill='%2300E5CC'/%3E%3Ccircle cx='350' cy='380' r='5' fill='%2300E5CC'/%3E%3Ccircle cx='560' cy='420' r='4' fill='%2300E5CC'/%3E%3Cline x1='420' y1='80' x2='520' y2='240' stroke='%2300E5CC' stroke-width='1' stroke-opacity='0.5'/%3E%3Cline x1='520' y1='240' x2='350' y2='380' stroke='%2300E5CC' stroke-width='1' stroke-opacity='0.4'/%3E%3Cline x1='180' y1='160' x2='80' y2='300' stroke='%2300E5CC' stroke-width='1' stroke-opacity='0.5'/%3E%3Cline x1='80' y1='300' x2='350' y2='380' stroke='%2300E5CC' stroke-width='1' stroke-opacity='0.3'/%3E%3Cline x1='420' y1='80' x2='180' y2='160' stroke='%2300E5CC' stroke-width='1' stroke-opacity='0.4'/%3E%3Cline x1='520' y1='240' x2='560' y2='420' stroke='%2300E5CC' stroke-width='1' stroke-opacity='0.3'/%3E%3Cline x1='350' y1='380' x2='80' y2='300' stroke='%2300E5CC' stroke-width='0.5' stroke-opacity='0.2'/%3E%3Cline x1='180' y1='160' x2='350' y2='380' stroke='%237B61FF' stroke-width='0.5' stroke-opacity='0.3'/%3E%3Ccircle cx='280' cy='200' r='3' fill='%237B61FF'/%3E%3Ccircle cx='460' cy='340' r='3' fill='%237B61FF'/%3E%3Crect x='200' y='150' width='80' height='50' rx='4' fill='none' stroke='%2300E5CC' stroke-width='1' stroke-opacity='0.3'/%3E%3Crect x='390' y='320' width='80' height='50' rx='4' fill='none' stroke='%237B61FF' stroke-width='1' stroke-opacity='0.3'/%3E%3Ctext x='210' y='172' font-family='monospace' font-size='7' fill='%2300E5CC' opacity='0.5'>ML</text>%3E%3Ctext x='400' y='342' font-family='monospace' font-size='7' fill='%237B61FF' opacity='0.5'>GNN</text>%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] .hero::before {
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 500' opacity='0.4'%3E%3Ccircle cx='420' cy='80' r='5' fill='%230891B2'/%3E%3Ccircle cx='180' cy='160' r='4' fill='%230891B2'/%3E%3Ccircle cx='520' cy='240' r='6' fill='%230891B2'/%3E%3Ccircle cx='80' cy='300' r='4' fill='%230891B2'/%3E%3Ccircle cx='350' cy='380' r='5' fill='%230891B2'/%3E%3Ccircle cx='560' cy='420' r='4' fill='%230891B2'/%3E%3Cline x1='420' y1='80' x2='520' y2='240' stroke='%230891B2' stroke-width='1' stroke-opacity='0.5'/%3E%3Cline x1='520' y1='240' x2='350' y2='380' stroke='%230891B2' stroke-width='1' stroke-opacity='0.4'/%3E%3Cline x1='180' y1='160' x2='80' y2='300' stroke='%230891B2' stroke-width='1' stroke-opacity='0.5'/%3E%3Cline x1='80' y1='300' x2='350' y2='380' stroke='%230891B2' stroke-width='1' stroke-opacity='0.3'/%3E%3Crect x='200' y='150' width='80' height='50' rx='4' fill='none' stroke='%230891B2' stroke-width='1' stroke-opacity='0.4'/%3E%3Crect x='390' y='320' width='80' height='50' rx='4' fill='none' stroke='%230891B2' stroke-width='1' stroke-opacity='0.4'/%3E%3Ctext x='210' y='172' font-family='monospace' font-size='7' fill='%230891B2' opacity='0.7'>ML</text>%3E%3Ctext x='400' y='342' font-family='monospace' font-size='7' fill='%230891B2' opacity='0.7'>GNN</text>%3E%3C/svg%3E");
}

/* Ambient glow orbs */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 15%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 229, 204, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-text h1 {
  margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-title {
  font-family: var(--font-mono);
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  font-weight: 400;
  color: var(--accent);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.01em;
}

.hero-bio {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: 58ch;
  margin-bottom: var(--space-xl);
  line-height: 1.7;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
}

.hero-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
}

.hero-links a:hover {
  background: var(--accent-subtle);
  border-color: var(--border-accent);
  color: var(--accent);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--glow), 0 0 0 1px var(--border-accent);
}

.hero-links svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.hero-profile {
  width: 200px;
  height: 200px;
  border-radius: 16px;
  object-fit: cover;
  border: 2px solid var(--border-accent);
  box-shadow: 0 0 30px var(--glow), 0 8px 32px rgba(0,0,0,0.3);
  position: relative;
}

.hero-profile::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  z-index: -1;
  opacity: 0.4;
}

/* --- Tags / Badges --- */
.tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--border-accent);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.tag-purple {
  background: rgba(123, 97, 255, 0.08);
  color: var(--accent-secondary);
  border-color: rgba(123, 97, 255, 0.3);
}

.tag-orange {
  background: rgba(255, 107, 53, 0.08);
  color: var(--accent-tertiary);
  border-color: rgba(255, 107, 53, 0.3);
}

.tag-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* --- Section Headers --- */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.section-number {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  min-width: 2rem;
  padding: 3px 8px;
  background: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  border-radius: 4px;
}

/* --- Cards --- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-xl);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 229, 204, 0.1), 0 0 0 1px rgba(0, 229, 204, 0.08);
}

.card:hover::before {
  opacity: 1;
}

[data-theme="dark"] .card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 229, 204, 0.15);
}

/* Project Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-lg);
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.project-card h3 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
}

.project-pitch {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  flex-grow: 1;
  line-height: 1.6;
}

.project-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(0, 229, 204, 0.12), rgba(123, 97, 255, 0.12));
  border: 1px solid var(--border-accent);
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 500;
}

.metric-chip svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
}

.project-links {
  display: flex;
  gap: var(--space-md);
  font-size: 0.875rem;
  margin-top: var(--space-xs);
}

.project-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 5px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.project-links a:hover {
  background: var(--accent-subtle);
  border-color: var(--border-accent);
  color: var(--accent);
}

/* --- Featured/Highlight Card --- */
.project-card.featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.project-card.featured .project-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.project-card.featured h3 {
  font-size: 1.375rem;
}

.project-card.featured .project-pitch {
  font-size: 1rem;
}

.project-card.featured .project-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --- Publications --- */
.publication-year {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--accent);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.05em;
}

.publication-entry {
  margin-bottom: var(--space-xl);
}

.publication-entry .authors {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.publication-entry .authors strong {
  color: var(--accent);
}

.publication-entry .title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.publication-entry .venue {
  font-size: 0.9375rem;
  color: var(--accent-secondary);
  font-family: var(--font-mono);
  margin-bottom: var(--space-sm);
}

.publication-links {
  display: flex;
  gap: var(--space-md);
  font-size: 0.875rem;
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(123, 97, 255, 0.12);
  color: var(--accent-secondary);
  border: 1px solid rgba(123, 97, 255, 0.3);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: var(--space-sm);
  vertical-align: middle;
}

/* --- Timeline --- */
.timeline {
  position: relative;
  padding-left: var(--space-xl);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--accent-secondary), transparent);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all var(--transition-fast);
}

.timeline-item:hover {
  border-color: var(--border-accent);
  box-shadow: 0 0 20px var(--glow);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-xl) - 5px);
  top: 1.5rem;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--glow-strong);
}

.timeline-dates {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.03em;
}

.timeline-role {
  font-weight: 600;
  margin-bottom: var(--space-xs);
  font-size: 1rem;
}

.timeline-org {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-bottom: var(--space-sm);
}

.timeline-bullets {
  list-style: none;
  font-size: 0.9375rem;
}

.timeline-bullets li {
  position: relative;
  padding-left: var(--space-md);
  margin-bottom: var(--space-xs);
  color: var(--text-secondary);
  line-height: 1.6;
}

.timeline-bullets li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* --- Skills Grid --- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-xl);
}

.skill-category h4 {
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* --- CV Section --- */
.cv-download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color: #0A0E17;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 16px var(--glow);
}

.cv-download:hover {
  opacity: 0.9;
  text-decoration: none;
  color: #0A0E17;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--glow-strong);
}

.cv-download svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Email obfuscation */
.email-obfuscated {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  display: inline-block;
  user-select: all;
  color: var(--accent);
  box-shadow: 0 0 12px var(--glow);
}

/* --- Footer --- */
.footer {
  padding: var(--space-2xl) 0;
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: var(--space-3xl);
  background: var(--bg-secondary);
}

.footer p {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin: 0 auto;
  max-width: none;
}

/* --- Animations --- */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in-stagger.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.fade-in-stagger.visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.fade-in-stagger.visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.fade-in-stagger.visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.fade-in-stagger.visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.fade-in-stagger.visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.fade-in-stagger.visible > *:nth-child(7) { transition-delay: 480ms; opacity: 1; transform: translateY(0); }
.fade-in-stagger.visible > *:nth-child(8) { transition-delay: 560ms; opacity: 1; transform: translateY(0); }

/* --- Responsive --- */
@media (max-width: 768px) {
  :root {
    --nav-height: 56px;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-height) + var(--space-xl));
    padding-bottom: var(--space-2xl);
  }

  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-profile {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    order: -1;
  }

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

  .hero::before {
    opacity: 0.4;
    width: 100%;
  }

  .nav-links {
    gap: var(--space-md);
  }

  .nav-links a {
    font-size: 0.8125rem;
  }

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

  .project-card.featured {
    grid-template-columns: 1fr;
  }

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

  section {
    padding: var(--space-2xl) 0;
  }

  .container {
    padding: 0 var(--space-md);
  }
}

@media (max-width: 480px) {
  .nav-links {
    gap: var(--space-sm);
  }

  .nav-links a:not(.active) span {
    display: none;
  }

  .hero-profile {
    width: 120px;
    height: 120px;
  }

  .metric-chip {
    font-size: 0.65rem;
    padding: 3px 8px;
  }
}

/* --- Utility Classes --- */
.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;
}

/* --- Print Styles --- */
@media print {
  body {
    background: white;
    background-image: none;
  }
  .nav, .theme-toggle, .hero::before, .hero::after {
    display: none;
  }
  section {
    padding: var(--space-lg) 0;
  }
  .card {
    border: 1px solid #ccc;
    box-shadow: none;
  }
}