/* ═══════════════════════════════════════════════════════════════
   GAME / TABLE / SUDOKU STYLES  (unchanged — used by sub-pages)
═══════════════════════════════════════════════════════════════ */
table { border-collapse: collapse; margin: auto; }
td { width: 50px; height: 50px; text-align: center; font-size: 24px; position: relative; }
input { width: 100%; height: 100%; text-align: center; border: none; font-size: 24px; }
hr { color: inherit; border: 1; opacity: 1; }

.sudoku-grid { margin: 0 auto; width: 450px; }
.sudoku-grid table { border-collapse: collapse; width: 100%; background-color: #1d2125a9; border: 4px solid #ffffff; }
.sudoku-grid td { width: 50px; height: 50px; border: 1px solid #ffffff; padding: 0; }
.sudoku-grid td:nth-child(0)  { border-left: 4px solid #ffffff; }
.sudoku-grid td:nth-child(3n) { border-right: 4px solid #ffffff; }
.sudoku-grid tr:nth-child(3n) td { border-bottom: 4px solid #ffffff; }
.sudoku-grid td:first-child   { border-left: 2px solid #777575; }
.sudoku-grid tr:first-child td { border-top: 2px solid #777575; }
.sudoku-grid input { width: 100%; height: 100%; text-align: center; font-size: 24px; border: none; background-color: #1d2125a9; color: white; }
.sudoku-grid input:focus { outline: none; }
.sudoku-input { appearance: none; -moz-appearance: textfield; -webkit-appearance: none; background-color: black; border: none; text-align: center; width: 100%; height: 100%; font-size: 20px; color: white; }
.sudoku-input::-webkit-outer-spin-button,
.sudoku-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
  --bg:          #07070d;
  --surface:     #0e0e18;
  --card:        #121220;
  --card-hover:  #181828;
  --border:      rgba(255,255,255,0.07);
  --border-hover:rgba(255,255,255,0.14);
  --bg-mid1:     #0a0a14;
  --bg-mid2:     #0d0d1a;
  --bg-mid3:     #08080f;
  --accent:      #6366f1;
  --accent-light:#a5b4fc;
  --accent-dim:  rgba(99,102,241,0.14);
  --accent-rgb: 99, 102, 241;
  --text:        #e2e2ec;
  --text-muted:  rgba(226,226,236,0.55);
  --text-dim:    rgba(226,226,236,0.28);
  --green:       #4ade80;
  --green-dim:   rgba(74,222,128,0.09);
  --r:           10px;
  --r-lg:        14px;
  --space-xs:    0.5rem;
  --space-sm:    1rem;
  --space-md:    1.5rem;
  --space-lg:    2rem;
  --space-xl:    3rem;
  --space-2xl:   4.5rem;
  --space-3xl:   6rem;
  --header-gap:  2.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; height: auto; }

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

/* Moving background effect */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: 
    radial-gradient(ellipse 140% 100% at 15% 10%, rgba(var(--accent-rgb), 0.28) 0%, transparent 45%),
    radial-gradient(ellipse 120% 80% at 85% 90%, rgba(var(--accent-rgb), 0.22) 0%, transparent 45%),
    radial-gradient(ellipse 100% 120% at 50% 50%, rgba(var(--accent-rgb), 0.12) 0%, transparent 55%);
  animation: bgFloat 12s ease-in-out infinite;
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    var(--bg) 0%,
    var(--bg-mid1) 20%,
    var(--bg-mid2) 40%,
    var(--bg-mid3) 60%,
    var(--bg-mid1) 80%,
    var(--bg) 100%
  );
  background-size: 300% 300%;
  animation: bgShift 10s ease infinite;
  pointer-events: none;
}
@keyframes bgFloat {
  0%, 100% { opacity: 1; transform: scale(1) translate(0, 0) rotate(0deg); }
  25% { opacity: 0.95; transform: scale(1.08) translate(3%, 2%) rotate(0.5deg); }
  50% { opacity: 1; transform: scale(0.95) translate(-2%, 3%) rotate(-0.3deg); }
  75% { opacity: 0.98; transform: scale(1.05) translate(2%, -1%) rotate(0.2deg); }
}
@keyframes bgShift {
  0%, 100% { background-position: 0% 50%; }
  33% { background-position: 100% 0%; }
  66% { background-position: 50% 100%; }
}

/* Page-specific themes — different hue, same saturation/lightness */
/* Background/surface/card tints use same hue with low saturation for cohesive theme */
body.page-home {
  --accent: hsl(243, 70%, 62%);
  --accent-light: hsl(243, 70%, 82%);
  --accent-dim: hsla(243, 70%, 62%, 0.18);
  --accent-rgb: 99, 102, 241;
  --bg: hsl(243, 35%, 2.8%);
  --surface: hsl(243, 32%, 5.5%);
  --card: hsl(243, 35%, 8.5%);
  --card-hover: hsl(243, 35%, 11.5%);
  --border: rgba(99, 102, 241, 0.1);
  --border-hover: rgba(99, 102, 241, 0.2);
  --bg-mid1: hsl(243, 30%, 4%);
  --bg-mid2: hsl(243, 30%, 5.2%);
  --bg-mid3: hsl(243, 30%, 3.2%);
}
body.page-resources {
  --accent: hsl(152, 70%, 55%);
  --accent-light: hsl(152, 70%, 78%);
  --accent-dim: hsla(152, 70%, 55%, 0.18);
  --accent-rgb: 34, 197, 94;
  --bg: hsl(152, 35%, 2.8%);
  --surface: hsl(152, 32%, 5.5%);
  --card: hsl(152, 35%, 8.5%);
  --card-hover: hsl(152, 35%, 11.5%);
  --border: rgba(34, 197, 94, 0.1);
  --border-hover: rgba(34, 197, 94, 0.2);
  --bg-mid1: hsl(152, 30%, 4%);
  --bg-mid2: hsl(152, 30%, 5.2%);
  --bg-mid3: hsl(152, 30%, 3.2%);
}
body.page-games {
  --accent: hsl(32, 85%, 55%);
  --accent-light: hsl(32, 85%, 78%);
  --accent-dim: hsla(32, 85%, 55%, 0.18);
  --accent-rgb: 234, 138, 31;
  --bg: hsl(32, 40%, 2.8%);
  --surface: hsl(32, 35%, 5.5%);
  --card: hsl(32, 40%, 8.5%);
  --card-hover: hsl(32, 40%, 11.5%);
  --border: rgba(234, 138, 31, 0.1);
  --border-hover: rgba(234, 138, 31, 0.2);
  --bg-mid1: hsl(32, 35%, 4%);
  --bg-mid2: hsl(32, 35%, 5.2%);
  --bg-mid3: hsl(32, 35%, 3.2%);
}
body.page-quantum {
  --accent: hsl(271, 70%, 62%);
  --accent-light: hsl(271, 70%, 82%);
  --accent-dim: hsla(271, 70%, 62%, 0.18);
  --accent-rgb: 147, 102, 234;
  --bg: hsl(271, 35%, 2.8%);
  --surface: hsl(271, 32%, 5.5%);
  --card: hsl(271, 35%, 8.5%);
  --card-hover: hsl(271, 35%, 11.5%);
  --border: rgba(147, 102, 234, 0.1);
  --border-hover: rgba(147, 102, 234, 0.2);
  --bg-mid1: hsl(271, 30%, 4%);
  --bg-mid2: hsl(271, 30%, 5.2%);
  --bg-mid3: hsl(271, 30%, 3.2%);
}
body.page-covid {
  --accent: hsl(0, 72%, 58%);
  --accent-light: hsl(0, 72%, 80%);
  --accent-dim: hsla(0, 72%, 58%, 0.18);
  --accent-rgb: 236, 66, 66;
  --bg: hsl(0, 40%, 2.8%);
  --surface: hsl(0, 35%, 5.5%);
  --card: hsl(0, 40%, 8.5%);
  --card-hover: hsl(0, 40%, 11.5%);
  --border: rgba(236, 66, 66, 0.1);
  --border-hover: rgba(236, 66, 66, 0.2);
  --bg-mid1: hsl(0, 35%, 4%);
  --bg-mid2: hsl(0, 35%, 5.2%);
  --bg-mid3: hsl(0, 35%, 3.2%);
}
body.page-ml-visualizer {
  --accent: hsl(207, 82%, 58%);
  --accent-light: hsl(207, 82%, 80%);
  --accent-dim: hsla(207, 82%, 58%, 0.18);
  --accent-rgb: 51, 142, 218;
  --bg: hsl(207, 45%, 2.8%);
  --surface: hsl(207, 40%, 5.5%);
  --card: hsl(207, 45%, 8.5%);
  --card-hover: hsl(207, 45%, 11.5%);
  --border: rgba(51, 142, 218, 0.1);
  --border-hover: rgba(51, 142, 218, 0.2);
  --bg-mid1: hsl(207, 38%, 4%);
  --bg-mid2: hsl(207, 38%, 5.2%);
  --bg-mid3: hsl(207, 38%, 3.2%);
}
body.page-agent-os {
  --accent: hsl(185, 70%, 55%);
  --accent-light: hsl(185, 70%, 78%);
  --accent-dim: hsla(185, 70%, 55%, 0.18);
  --accent-rgb: 34, 197, 210;
  --bg: hsl(185, 40%, 2.8%);
  --surface: hsl(185, 35%, 5.5%);
  --card: hsl(185, 40%, 8.5%);
  --card-hover: hsl(185, 40%, 11.5%);
  --border: rgba(34, 197, 210, 0.1);
  --border-hover: rgba(34, 197, 210, 0.2);
  --bg-mid1: hsl(185, 35%, 4%);
  --bg-mid2: hsl(185, 35%, 5.2%);
  --bg-mid3: hsl(185, 35%, 3.2%);
}
body.page-boggle,
body.page-sudoku,
body.page-simon {
  --accent: hsl(32, 85%, 55%);
  --accent-light: hsl(32, 85%, 78%);
  --accent-dim: hsla(32, 85%, 55%, 0.18);
  --accent-rgb: 234, 138, 31;
  --bg: hsl(32, 40%, 2.8%);
  --surface: hsl(32, 35%, 5.5%);
  --card: hsl(32, 40%, 8.5%);
  --card-hover: hsl(32, 40%, 11.5%);
  --border: rgba(234, 138, 31, 0.1);
  --border-hover: rgba(234, 138, 31, 0.2);
  --bg-mid1: hsl(32, 35%, 4%);
  --bg-mid2: hsl(32, 35%, 5.2%);
  --bg-mid3: hsl(32, 35%, 3.2%);
}

/* Page-specific background gradient tints */
body.page-resources::before {
  background: radial-gradient(ellipse 140% 100% at 15% 10%, rgba(34,197,94,0.45) 0%, transparent 50%),
    radial-gradient(ellipse 120% 80% at 85% 90%, rgba(22,163,74,0.35) 0%, transparent 50%),
    radial-gradient(ellipse 100% 120% at 50% 50%, rgba(74,222,128,0.2) 0%, transparent 55%);
}
body.page-games::before {
  background: radial-gradient(ellipse 140% 100% at 15% 10%, rgba(251,146,60,0.5) 0%, transparent 50%),
    radial-gradient(ellipse 120% 80% at 85% 90%, rgba(234,88,12,0.4) 0%, transparent 50%),
    radial-gradient(ellipse 100% 120% at 50% 50%, rgba(251,191,36,0.25) 0%, transparent 55%);
}
body.page-quantum::before {
  background: radial-gradient(ellipse 140% 100% at 15% 10%, rgba(168,85,247,0.5) 0%, transparent 50%),
    radial-gradient(ellipse 120% 80% at 85% 90%, rgba(147,51,234,0.4) 0%, transparent 50%),
    radial-gradient(ellipse 100% 120% at 50% 50%, rgba(192,132,252,0.25) 0%, transparent 55%);
}
body.page-covid::before {
  background: radial-gradient(ellipse 140% 100% at 15% 10%, rgba(239,68,68,0.5) 0%, transparent 50%),
    radial-gradient(ellipse 120% 80% at 85% 90%, rgba(220,38,38,0.4) 0%, transparent 50%),
    radial-gradient(ellipse 100% 120% at 50% 50%, rgba(248,113,113,0.2) 0%, transparent 55%);
}
body.page-ml-visualizer::before {
  background: radial-gradient(ellipse 140% 100% at 15% 10%, rgba(59,130,246,0.5) 0%, transparent 50%),
    radial-gradient(ellipse 120% 80% at 85% 90%, rgba(14,165,233,0.4) 0%, transparent 50%),
    radial-gradient(ellipse 100% 120% at 50% 50%, rgba(56,189,248,0.25) 0%, transparent 55%);
}
body.page-agent-os::before {
  background: radial-gradient(ellipse 140% 100% at 15% 10%, rgba(20,184,166,0.5) 0%, transparent 50%),
    radial-gradient(ellipse 120% 80% at 85% 90%, rgba(6,182,212,0.4) 0%, transparent 50%),
    radial-gradient(ellipse 100% 120% at 50% 50%, rgba(34,211,238,0.25) 0%, transparent 55%);
}
body.page-boggle::before,
body.page-sudoku::before,
body.page-simon::before {
  background: radial-gradient(ellipse 140% 100% at 15% 10%, rgba(251,146,60,0.45) 0%, transparent 50%),
    radial-gradient(ellipse 120% 80% at 85% 90%, rgba(234,88,12,0.35) 0%, transparent 50%),
    radial-gradient(ellipse 100% 120% at 50% 50%, rgba(251,191,36,0.2) 0%, transparent 55%);
}

/* Scroll-triggered animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}
.row > .animate-on-scroll.animate-in:nth-child(1),
.card-row > .animate-on-scroll.animate-in:nth-child(1) { transition-delay: 0s; }
.row > .animate-on-scroll.animate-in:nth-child(2),
.card-row > .animate-on-scroll.animate-in:nth-child(2) { transition-delay: 0.06s; }
.row > .animate-on-scroll.animate-in:nth-child(3),
.card-row > .animate-on-scroll.animate-in:nth-child(3) { transition-delay: 0.12s; }
.row > .animate-on-scroll.animate-in:nth-child(4),
.card-row > .animate-on-scroll.animate-in:nth-child(4) { transition-delay: 0.18s; }
.row > .animate-on-scroll.animate-in:nth-child(5),
.card-row > .animate-on-scroll.animate-in:nth-child(5) { transition-delay: 0.24s; }
.row > .animate-on-scroll.animate-in:nth-child(n+6),
.card-row > .animate-on-scroll.animate-in:nth-child(n+6) { transition-delay: 0.3s; }

::selection { background: var(--accent-dim); color: var(--accent-light); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-light); }

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — Header, Sections, Spacing
═══════════════════════════════════════════════════════════════ */
#header {
  padding: var(--space-3xl) 0 var(--space-2xl);
  position: relative;
  overflow: hidden;
}
#header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%);
  pointer-events: none;
}
#header .container { position: relative; z-index: 1; }
#header h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}
#header h1 small {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--accent-light);
  letter-spacing: 0.04em;
}
#header p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 720px;
  margin-bottom: 0;
}
#header + .container { margin-top: 0; }

.section-spacing {
  padding: var(--space-2xl) 0;
}
.section-spacing .section-title {
  margin-bottom: var(--header-gap);
  margin-top: 0;
}

/* Metric cards (highlights) */
.metric-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-md) var(--space-lg);
  height: 100%;
  transition: all 0.25s ease;
}
.metric-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.metric-card .metric-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.3rem;
}
.metric-card .metric-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.metric-card .metric-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Accordion (Experience) */
.section-spacing .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--border);
  --bs-accordion-btn-bg: var(--card);
  --bs-accordion-active-bg: var(--card-hover);
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-btn-focus-border-color: var(--accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.2);
}
.section-spacing .accordion-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg) !important;
  margin-bottom: var(--space-sm);
  overflow: hidden;
}
.section-spacing .accordion-item:last-child { margin-bottom: 0; }
.section-spacing .accordion-button {
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--space-md) var(--space-lg);
  color: var(--text) !important;
  background: var(--card) !important;
  border: none !important;
}
.section-spacing .accordion-button:not(.collapsed) {
  background: var(--card-hover) !important;
  box-shadow: inset 0 -1px 0 var(--border);
}
.section-spacing .accordion-button::after { filter: brightness(0.8); }
.section-spacing .accordion-body {
  background: var(--card-hover);
  padding: var(--space-md) var(--space-lg);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}
.section-spacing .accordion-body p { margin-bottom: var(--space-sm); }
.section-spacing .accordion-body ul { padding-left: 1.25rem; }
.section-spacing .accordion-body li { margin-bottom: 0.4rem; }
.section-spacing .accordion-body li::marker { color: var(--accent); }

/* Projects — card rows */
.card-row {
  margin-bottom: var(--space-xl);
}
.card-row:last-child { margin-bottom: 0; }
.card-row .col { display: flex; }
.card-row .col > * { width: 100%; }

/* Skills charts grid */
.skills-charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  .skills-charts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .skills-charts-grid { grid-template-columns: repeat(2, 1fr); }
}
.skill-chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-lg);
  transition: border-color 0.2s;
}
.skill-chart-card:hover { border-color: var(--border-hover); }
.skill-chart-header h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}
.skill-chart-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-md);
}
.skill-chart-canvas {
  min-height: 200px;
  position: relative;
}

/* Other section cards */
.other-section-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-lg);
  transition: border-color 0.2s;
}
.other-section-card:last-child { margin-bottom: 0; }
.other-section-card:hover { border-color: var(--border-hover); }
.other-section-card h4 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 0.35rem;
}
.other-section-card h5 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}
.other-section-card small {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: var(--space-sm);
}
.other-section-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-sm);
}
.other-section-card p:last-of-type { margin-bottom: 0; }
.other-section-card ul {
  padding-left: 1.25rem;
  margin: var(--space-sm) 0 0;
}
.other-section-card li {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  line-height: 1.6;
}
.other-section-card li::marker { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════════ */
.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 1rem;
  background: transparent !important;
  border-bottom: none;
  z-index: 1030;
  pointer-events: none;
}
.navbar {
  pointer-events: all;
  background: color-mix(in srgb, var(--bg) 52%, transparent) !important;
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 100px;
  padding: 0.35rem 1.1rem;
  width: fit-content;
  box-shadow:
    0 4px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.navbar:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow:
    0 4px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(var(--accent-rgb), 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar .container-fluid {
  padding: 0;
  gap: 0;
}
.navbar-brand { padding-left: 0; }
.navbar-nav {
  margin-left: 0 !important;
  align-items: center;
  gap: 0.1rem;
  padding-right: 0;
  justify-content: center;
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
    justify-content: flex-end !important;
  }
}
.nav-social-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}
.nav-social-row .nav-link {
  padding: 0.45rem 0.6rem !important;
}
.dropdown-menu {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}
.dropdown-item {
  color: var(--text) !important;
}
.dropdown-item:hover {
  background: var(--card-hover) !important;
  color: var(--text) !important;
}
.navbar-nav .nav-link {
  display: flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
#hero {
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 82% -5%, rgba(var(--accent-rgb), 0.1) 0%, transparent 65%),
    radial-gradient(ellipse 40% 55% at 10% 95%, rgba(var(--accent-rgb), 0.04) 0%, transparent 60%);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}

#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.017) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem;
  background: var(--green-dim);
  border: 1px solid rgba(74,222,128,0.2);
  border-radius: 100px;
  font-size: 0.73rem;
  font-weight: 600;
  color: #86efac;
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: blink 2.5s ease-in-out infinite;
}

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

.hero-name {
  font-size: clamp(3.2rem, 8.5vw, 6.8rem);
  font-weight: 800;
  line-height: 0.93;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 1.1rem;
}

.hero-name .name-dim { color: rgba(255,255,255,0.62); }

.hero-role {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 1.5rem;
}

.hero-pitch {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--text-muted);
  max-width: 540px;
  line-height: 1.72;
  margin-bottom: 2.5rem;
}
.hero-pitch strong { color: var(--text); font-weight: 600; }

.hero-ctas { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; }

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.4rem;
  background: var(--accent);
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}
.cta-primary:hover {
  background: #5254e0;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(var(--accent-rgb), 0.42);
}

.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.4rem;
  background: transparent;
  color: var(--text) !important;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--r);
  border: 1px solid var(--border-hover);
  transition: all 0.2s;
  letter-spacing: 0.01em;
}
.cta-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-light) !important;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   METRICS STRIP
═══════════════════════════════════════════════════════════════ */
.metrics-strip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3rem 0;
}

.metric-item { text-align: center; padding: 0 1rem; position: relative; }

.metric-item + .metric-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 48px;
  width: 1px;
  background: var(--border);
}

.metric-value {
  display: block;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.metric-value .accent { color: var(--accent-light); }

.metric-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-dim);
  margin-bottom: 0.45rem;
}

.metric-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 155px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
═══════════════════════════════════════════════════════════════ */
.py-section { padding: 5rem 0; }
.section-header { margin-bottom: 2.75rem; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 0.7rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--accent);
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   EXPERIENCE — custom accordion
═══════════════════════════════════════════════════════════════ */
.exp-list {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.exp-item { border-bottom: 1px solid var(--border); }
.exp-item:last-child { border-bottom: none; }

.exp-toggle {
  width: 100%;
  background: var(--card);
  border: none;
  color: var(--text);
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}
.exp-toggle:hover { background: var(--card-hover); }
.exp-toggle[aria-expanded="true"] {
  background: var(--card-hover);
  border-bottom: 1px solid var(--accent-dim);
}

.exp-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: all 0.25s;
}
.exp-toggle[aria-expanded="true"] .exp-dot {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
}

.exp-meta { flex: 1; min-width: 0; }
.exp-title { display: block; font-size: 0.975rem; font-weight: 600; color: #fff; margin-bottom: 0.2rem; }
.exp-company { display: block; font-size: 0.8rem; color: var(--text-muted); }

.exp-date {
  flex-shrink: 0;
  font-size: 0.73rem;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
  margin-right: 0.5rem;
}

.exp-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  transition: transform 0.27s, color 0.2s;
}
.exp-toggle[aria-expanded="true"] .exp-chevron {
  transform: rotate(180deg);
  color: var(--accent-light);
}

.exp-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1);
  background: var(--card-hover);
}
.exp-body.open { max-height: 620px; }
.exp-body-inner { padding: 1.4rem 1.75rem 1.75rem calc(1.75rem + 8px + 1.25rem); }
.exp-body p { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.9rem; }
.exp-body ul { padding-left: 1.1rem; margin: 0; }
.exp-body li { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.45rem; line-height: 1.65; }
.exp-body li::marker { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   PROJECTS GRID
═══════════════════════════════════════════════════════════════ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

@media (max-width: 767px)  { .project-grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1023px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .project-grid { grid-template-columns: repeat(4, 1fr); } }

.project-card {
  background: var(--card);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  transition: background 0.2s;
  position: relative;
  overflow: hidden;
}
.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  top: auto;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.project-card:hover { background: var(--card-hover); }
.project-card:hover::before { transform: scaleX(1); }

.proj-stack {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 0.55rem;
  opacity: 0.85;
}
.proj-name { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 0.7rem; }
.proj-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; flex: 1; margin-bottom: 1.5rem; }
.proj-links { display: flex; gap: 0.6rem; margin-top: auto; }

.proj-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all 0.2s;
}
.proj-btn:hover { border-color: var(--accent); color: var(--accent-light); }
.proj-btn.active { background: var(--accent-dim); color: var(--accent-light); border-color: rgba(var(--accent-rgb), 0.25); }
.proj-btn.disabled { opacity: 0.22; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   SKILLS — tag chips (no progress bars)
═══════════════════════════════════════════════════════════════ */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.skill-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  transition: border-color 0.2s;
}
.skill-group:hover { border-color: var(--border-hover); }

.skill-group-title {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.skill-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.skill-tag {
  padding: 0.28rem 0.75rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.15s;
  cursor: default;
}

.skill-tag.sales {
  background: var(--accent-dim);
  color: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}
.skill-tag.sales:hover { background: rgba(var(--accent-rgb), 0.22); border-color: rgba(var(--accent-rgb), 0.35); }

.skill-tag.tech {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border: 1px solid var(--border);
}
.skill-tag.tech:hover { background: rgba(255,255,255,0.09); border-color: var(--border-hover); }

.skill-tag.soft {
  background: rgba(74,222,128,0.08);
  color: #86efac;
  border: 1px solid rgba(74,222,128,0.15);
}
.skill-tag.soft:hover { background: rgba(74,222,128,0.14); }

/* ═══════════════════════════════════════════════════════════════
   OTHER SECTION  (Education, Athletics, etc.)
═══════════════════════════════════════════════════════════════ */
.other-cards { display: flex; flex-direction: column; gap: 1rem; }

.other-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem 2rem;
  transition: border-color 0.2s;
}
.other-card:hover { border-color: var(--border-hover); }

.other-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}
.other-card-title { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
.other-card-date { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); letter-spacing: 0.04em; white-space: nowrap; }
.other-card-sub { font-size: 0.8rem; color: var(--accent-light); font-weight: 500; margin-bottom: 0.9rem; margin-top: 0.15rem; }
.other-card p { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.7rem; }
.other-card p:last-child { margin-bottom: 0; }
.other-card ul { padding-left: 1.1rem; margin: 0; }
.other-card li { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.45rem; line-height: 1.65; }
.other-card li::marker { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   CTA STRIP  (pre-footer call-to-action)
═══════════════════════════════════════════════════════════════ */
.cta-strip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(var(--accent-rgb), 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.cta-strip-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 0.75rem;
}
.cta-strip-title {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 0.75rem;
}
.cta-strip-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 2rem;
  line-height: 1.65;
}
.cta-strip-btns { display: flex; justify-content: center; gap: 0.85rem; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  margin-top: 5rem;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-copy { font-size: 0.8rem; color: var(--text-dim); }
.footer-copy a { color: var(--text-muted); }
.footer-copy a:hover { color: var(--text); }
.footer-socials { display: flex; align-items: center; gap: 0.25rem; }
.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 16px;
  transition: all 0.2s;
}
.footer-socials a:hover { background: var(--card); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ═══════════════════════════════════════════════════════════════
   STANDARD CARD  (backward-compat — used by sub-pages)
═══════════════════════════════════════════════════════════════ */
.standard-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.25s;
}
.standard-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
}
.standard-card .card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 0; }
.standard-card .card-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.standard-card .card-subtitle {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-light); opacity: 0.85; margin-bottom: 0.9rem;
}
.standard-card .card-text { flex-grow: 1; margin-bottom: 1rem; font-size: 0.88rem; line-height: 1.6; color: var(--text-muted); }
.standard-card .card-buttons { display: flex; gap: 0.6rem; margin-top: auto; padding-top: 1rem; }

.card-btn {
  display: inline-flex; align-items: center;
  padding: 0.35rem 0.8rem; border-radius: 6px;
  font-size: 0.78rem; font-weight: 600;
  transition: all 0.2s; border: 1px solid var(--border);
  color: var(--text-muted);
}
.card-btn:hover { border-color: var(--accent); color: var(--accent-light); }
.card-btn.active { background: var(--accent-dim); color: var(--accent-light); border-color: rgba(var(--accent-rgb), 0.25); }
.card-btn.disabled { opacity: 0.22; pointer-events: none; cursor: not-allowed; }

.card-row .col { display: flex; }
.card-row .col > * { width: 100%; }

/* ─── "In progress" badge ────────────────────────────────────── */
.proj-btn-badge {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.65rem; border-radius: 100px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
  background: rgba(245,158,11,0.1); color: rgba(245,158,11,0.8);
  border: 1px solid rgba(245,158,11,0.18);
}

/* ─── Other cards wrapper ────────────────────────────────────── */
.other-cards { display: flex; flex-direction: column; gap: 1rem; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

/* ── Hide desktop pill on mobile ─────────────────────────── */
@media (max-width: 991px) {
  .nav { display: none !important; }
}

/* ── Floating Action Button ──────────────────────────────── */
.nav-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1060;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  cursor: grab;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.nav-fab:active { cursor: grabbing; }

@media (max-width: 991px) {
  .nav-fab { display: flex; }
}

.nav-fab-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}
.nav-fab-lines span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.28s ease, width 0.28s ease;
}
.nav-fab.is-open .nav-fab-lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-fab.is-open .nav-fab-lines span:nth-child(2) { opacity: 0; width: 0; }
.nav-fab.is-open .nav-fab-lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile full-screen slide-over ───────────────────────── */
.nav-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 1055;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.nav-mobile-overlay.open { transform: translateX(0); }

.nav-mobile-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 5rem 2.5rem 3rem;
  min-height: 100%;
}

.nav-mobile-list {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
}
.nav-mobile-list > li + li { margin-top: 0.15rem; }

.nav-mobile-link {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: rgba(226,226,236,0.35);
  text-decoration: none;
  padding: 0.35rem 0;
  transition: color 0.18s;
}
.nav-mobile-link:hover,
.nav-mobile-link.active { color: var(--text); }

.nav-mobile-section-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 1.75rem 0 0.5rem;
}

.nav-mobile-sub-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-mobile-sub-list .nav-mobile-link {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(226,226,236,0.3);
  padding: 0.3rem 0;
}
.nav-mobile-sub-list .nav-mobile-link:hover,
.nav-mobile-sub-list .nav-mobile-link.active { color: var(--accent-light); }

.nav-mobile-socials {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
}
.nav-mobile-socials a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s;
}
.nav-mobile-socials a:hover { color: var(--text); }
.nav-mobile-socials i { font-size: 1.25rem; }

/* ── Legacy mobile block removed — replaced above ─────────── */
@media (max-width: 991px) {
  .navbar {
    padding: 0.4rem 0.85rem;
    border-radius: 50px;
    max-width: 100%;
  }
}

/* Prevent horizontal overflow globally */
html { overflow-x: hidden; }

/* Small phones < 480px */
@media (max-width: 479px) {
  body { font-size: 14px; }
  .container { padding-left: 1.1rem; padding-right: 1.1rem; }

  #header { padding: 2.5rem 0 2rem; }
  #header h1 { font-size: 1.75rem; }
  #header p  { font-size: 0.9rem; }
  .hero-status { font-size: 0.68rem; }
  .hero-ctas { flex-direction: column; gap: 0.65rem; }
  .hero-ctas .cta-primary, .hero-ctas .cta-secondary { justify-content: center; width: 100%; }

  .section-spacing { padding: 2rem 0; }
  .py-section      { padding: 2.5rem 0; }
  .section-title   { font-size: 1.5rem; }
  .section-header  { margin-bottom: 1.75rem; }

  .metric-card { padding: 1rem 1.1rem; }
  .metric-card .metric-value { font-size: 1.35rem; }
  .metric-card .metric-desc  { font-size: 0.8rem; }

  .exp-date { display: none; }
  .exp-toggle { padding: 1rem; gap: 0.75rem; }
  .exp-body-inner { padding: 1rem; }
  .exp-title { font-size: 0.875rem; }
  .exp-company { font-size: 0.75rem; }
  .exp-body.open { max-height: 900px; }

  .project-grid { grid-template-columns: 1fr; }
  .project-card { padding: 1.25rem; }
  .skills-charts-grid { grid-template-columns: 1fr; gap: 1rem; }
  .skill-chart-card { padding: 1.1rem; }
  .other-section-card { padding: 1.25rem; }

  .cta-strip { padding: 2rem 1.25rem; }
  .cta-strip-btns { flex-direction: column; gap: 0.65rem; }
  .cta-strip-btns .cta-primary, .cta-strip-btns .cta-secondary { justify-content: center; width: 100%; }

  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; }
  .site-footer  { margin-top: 2.5rem; padding: 1.5rem 0; }
}

/* Phones 480–767px */
@media (min-width: 480px) and (max-width: 767px) {
  #header { padding: 3rem 0 2.5rem; }
  .section-spacing { padding: 2.5rem 0; }
  .py-section { padding: 3rem 0; }
  .exp-date { display: none; }
  .project-grid { grid-template-columns: 1fr; }
  .skills-charts-grid { grid-template-columns: 1fr; }
  .cta-strip { padding: 2.25rem 1.75rem; }
  .cta-strip-btns { flex-wrap: wrap; justify-content: center; }
}

/* Tablets 768–991px */
@media (min-width: 768px) and (max-width: 991px) {
  #header { padding: 4rem 0 3rem; }
  .section-spacing { padding: 3rem 0; }
  .py-section { padding: 3.5rem 0; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .skills-charts-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-strip { padding: 2.5rem 2rem; }
}

/* Overflow guard */
.project-grid, .skills-charts-grid, .exp-list,
.other-cards, .cta-strip { min-width: 0; word-break: break-word; }
img, canvas, svg { max-width: 100%; height: auto; }