:root {
  /* ===== Global design system =====
     Light: premium blue & white. body.dark (further down) swaps every value for the teal theme,
     so each section reads these tokens instead of its own colours. */
  --bg: #ffffff;
  --bg-alt: #f4f8ff;
  --card: #ffffff;
  --card-2: #f4f8ff;
  --primary: #174ea6;
  --primary-light: #2868c7;
  --accent: #3987ff;
  --accent-soft: #6ea8ff;
  --soft: #dceaff;
  --text: #152b49;
  --text-muted: #64748b;
  --text-muted-alt: #5b6b81; /* secondary text placed directly on --bg-alt (4.5:1+) */
  --border: #dce6f2;
  --border-strong: #c5d3e6;
  --grad-primary: linear-gradient(135deg, #174ea6, #2868c7);
  --ink: #152b49;
  --overlay: rgba(10, 24, 46, 0.55);
  --focus-ring: rgba(57, 135, 255, 0.6);
  --skeleton: #e6edf8;
  --skeleton-hi: #f4f8ff;
  --ghost-bg: #ffffff;
  --ghost-border: #c5d3e6;
  --btn-soft-bg: #dceaff;
  --btn-soft-text: #174ea6;
  --status-text: #166534;
  --chart: #2868c7;

  /* Deep bands: How I Work, Contact and the footers */
  --strong-bg: linear-gradient(160deg, #0b2552 0%, #123e85 100%);
  --footer-bg: #0b2552;
  --strong-card-solid: #1a4a94;
  --on-strong: #ffffff;
  --on-strong-2: #dceaff;
  --on-strong-accent: #a6c8ff;
  --strong-btn-bg: #ffffff;
  --strong-btn-text: #174ea6;
  --strong-active-bg: #ffffff;
  --strong-active-text: #174ea6;
  --success-on-strong: #34d399;
  --error-on-strong: #ff9b9b;

  /* Terminal window (dark in both themes, like a real terminal) */
  --term-bg: #0b1830;
  --term-bar: #13223f;
  --term-text: #e6eefa;
  --term-muted: #8fa3c2;
  --term-accent: #78aeff;
  --term-accent-2: #a6c8ff;

  /* Hero */
  --hero-bg:
    radial-gradient(1000px circle at 8% -12%, rgba(57, 135, 255, 0.16), transparent 60%),
    radial-gradient(900px circle at 100% 110%, rgba(23, 78, 166, 0.1), transparent 60%),
    linear-gradient(180deg, #f7faff 0%, #e9f1ff 100%);
  --hero-veil: 247, 250, 255;
  --hero-card: rgba(255, 255, 255, 0.8);
  --hero-card-border: #dce6f2;
  --grad-name: linear-gradient(135deg, #174ea6, #2868c7 45%, #3987ff);

  /* Code background: a light editor theme */
  --code-text: #24324a;
  --code-window: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 255, 0.82));
  --code-window-border: #dce6f2;
  --code-window-shadow: 0 24px 48px -26px rgba(21, 43, 73, 0.35);
  --code-mid: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(244, 248, 255, 0.3));
  --code-chrome: #64748b;
  --code-gutter: rgba(100, 116, 139, 0.55);
  --code-active: rgba(57, 135, 255, 0.09);
  --tok-k: #8250df;
  --tok-k2: #cf2e7b;
  --tok-s: #1a7f37;
  --tok-f: #0969da;
  --tok-p: #1f6feb;
  --tok-n: #b54a00;
  --tok-c: #6e7781;
  --tok-t: #c4462a;
  --tok-tb: #cf222e;
  --tok-o: #57606a;

  /* Older names, kept so every existing rule keeps working */
  --light-bg: #f4f8ff;
  --surface-alt: #f4f8ff;
  --gold: #3987ff;
  --gold-soft: #6ea8ff;
  --line: #dce6f2;
  --shadow: 0 10px 40px rgba(21, 43, 73, 0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

html {
  /* Space taken by the floating menu bar (gap above + capsule + a little air); jumps to
     #sections stop below it instead of underneath, and the hero starts below it */
  --header-h: 80px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  /* No colour transition here: it made pages fade from light to dark on load. Switching themes
     cross-fades the whole page with View Transitions instead (script.js). */
}

/* Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent));
  z-index: 10001;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s linear;
}

/* Header & Navbar: a floating glass capsule
   Logo on the left, links in the middle, search + theme switch + Contact on the right.
   Below 1024px the links move into a glass panel that drops down from the capsule. */
/* body > header: the blog article has its own <header>, which must not get these styles */
body > header {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 16px;
  pointer-events: none; /* only the capsule itself takes clicks, not the gap around it */
}

.navbar {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 7px 7px 7px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: auto;
  isolation: isolate;
  border-radius: 999px;
  border: 1px solid rgba(21, 43, 73, 0.08);
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* The glass itself sits on its own layer: blur on .navbar would stop the drop-down menu
   (inside it) from blurring the page behind it */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  transition: background 0.3s ease;
}

/* Once the page scrolls, the glass gets a little more solid so text behind it can't compete */
body > header.scrolled .navbar {
  box-shadow: 0 14px 36px -14px rgba(15, 23, 42, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body > header.scrolled .navbar::before {
  background: rgba(255, 255, 255, 0.9);
}

.logo {
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .logo:hover {
    transform: scale(1.04);
  }
}

.logo span {
  color: var(--primary);
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease;
}

/* Current section: orange text and a short underline that grows from the centre */
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-soft));
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.nav-link.active {
  color: var(--primary);
}

.nav-link.active::after {
  width: 18px;
}

@media (hover: hover) {
  .nav-link:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
}

.nav-link:focus-visible {
  color: var(--primary);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}

.nav-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

/* Search: a round icon button like the menu button (Ctrl+K / ⌘K is in its tooltip) */
.nav-actions .cmdk-trigger {
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
}

.nav-actions .cmdk-trigger-label,
.nav-actions .cmdk-trigger-kbd {
  display: none;
}

/* Wide screens: links exactly in the middle of the capsule, whatever the width of each side */
@media (min-width: 1200px) {
  .navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .logo {
    justify-self: start;
  }

  .nav-actions {
    justify-self: end;
  }
}

/* Sun / moon switch: the thumb slides under the active icon */
.theme-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  width: 58px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(21, 43, 73, 0.1);
  background: rgba(21, 43, 73, 0.05);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
  .theme-toggle:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  }
}

.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1), background 0.3s ease, box-shadow 0.3s ease;
}

.theme-icon {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1), color 0.3s ease;
}

.theme-icon--sun { color: var(--accent); }
.theme-icon--moon { color: var(--text-muted); transform: rotate(-30deg) scale(0.85); }

body.dark .theme-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark .theme-toggle-thumb {
  transform: translateX(26px);
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.dark .theme-icon--sun { color: var(--text-muted); transform: rotate(-90deg) scale(0.85); }
body.dark .theme-icon--moon { color: var(--primary); transform: none; }

/* Contact Me: the one solid, orange element in the bar */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: var(--grad-primary);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  }
}

.nav-cta:active {
  transform: scale(0.97);
}

/* The copy inside the drop-down menu, for phones where the bar has no room for it */
.nav-links-cta {
  display: none;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(21, 43, 73, 0.1);
  background: rgba(21, 43, 73, 0.04);
  color: var(--text);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.menu-toggle-bar {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Bars turn into a cross while the menu is open */
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (hover: hover) {
  .menu-toggle:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
}

/* Dark theme glass */
body.dark .navbar {
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 34px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark .navbar::before {
  background: rgba(18, 60, 53, 0.62);
}

body.dark > header.scrolled .navbar::before {
  background: rgba(18, 60, 53, 0.84);
}

body.dark .logo {
  color: var(--text);
}

body.dark .nav-link {
  color: var(--text-muted);
}

body.dark .nav-link.active {
  color: var(--primary);
}

body.dark .nav-link::after {
  background: linear-gradient(90deg, var(--accent), var(--gold-soft));
}

@media (hover: hover) {
  body.dark .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
}

body.dark .nav-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  outline-color: var(--gold-soft);
}

body.dark .menu-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

/* Small laptops: slightly tighter links so Contact Me still fits inside the capsule */
@media (min-width: 1024px) and (max-width: 1199px) {
  .navbar {
    gap: 10px;
    padding-left: 18px;
  }

  .logo {
    font-size: 1.2rem;
  }

  .nav-link {
    padding: 9px 10px;
  }
}

/* Tablets and phones: links move into a drop-down glass panel */
@media (max-width: 1023px) {
  .navbar {
    padding: 6px 6px 6px 18px;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(21, 43, 73, 0.08);
    box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.35);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s;
  }

  .nav-links.active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
  }

  .nav-link {
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 1rem;
  }

  /* In the list, the current page/section is a tinted row instead of an underline */
  .nav-link::after {
    display: none;
  }

  .nav-link.active {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }

  body.dark .nav-links {
    background: rgba(18, 60, 53, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  }

  body.dark .nav-link.active {
    background: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  }
}

/* Phones: a slimmer capsule; Contact Me moves into the menu, the theme switch stays in the bar */
@media (max-width: 768px) {
  html {
    --header-h: 70px;
  }

  body > header {
    top: 10px;
    padding: 0 10px;
  }

  .navbar {
    gap: 10px;
    padding: 5px 5px 5px 16px;
  }

  .logo {
    font-size: 1.15rem;
  }

  .nav-actions {
    gap: 6px;
  }

}

@media (max-width: 599px) {
  .nav-cta--bar {
    display: none;
  }

  .nav-links-cta {
    display: block;
    margin-top: 6px;
  }

  .nav-links-cta .nav-cta {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
  }
}

/* Small phones: everything a touch smaller so the bar never overflows */
@media (max-width: 380px) {
  .navbar {
    padding-left: 13px;
  }

  .logo {
    font-size: 1rem;
  }

  .nav-actions {
    gap: 5px;
  }

  .nav-actions .cmdk-trigger {
    width: 34px;
    height: 34px;
  }

  .theme-toggle {
    width: 52px;
    height: 30px;
    padding: 0 7px;
  }

  .theme-toggle-thumb {
    width: 22px;
    height: 22px;
  }

  body.dark .theme-toggle-thumb {
    transform: translateX(22px);
  }

  .menu-toggle {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  /* Light: soft blue-white workspace; dark: deep teal. Both come from the theme tokens */
  background: var(--hero-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text);
  padding: calc(var(--header-h) + 40px) 20px 72px;
  overflow: hidden;
  /* Soft rounded base and a warm glow, so the dark hero hands over to the light page instead of a hard cut */
  border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
  box-shadow: 0 36px 70px -46px color-mix(in srgb, var(--accent) 50%, transparent);
  isolation: isolate;
}

/* Thin glowing line along the bottom edge */
.hero::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 75%, transparent), transparent);
  pointer-events: none;
  z-index: 3;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.hero-profile {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.hero-photo {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent), 0 12px 36px rgba(21, 43, 73, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .hero-photo:hover {
    transform: scale(1.03);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 24%, transparent), 0 16px 44px rgba(21, 43, 73, 0.3);
  }
}

/* Hierarchy: eyebrow → name → role → availability → typed line → description */
.hero-greeting {
  font-size: 0.8rem;
  color: var(--primary);
  margin-bottom: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  text-wrap: balance;
}

.hero-content h1 {
  font-size: clamp(2.25rem, 4.2vw + 1rem, 4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}

.gradient-text {
  background: var(--grad-name);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-role {
  font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}

.hero-role-title {
  font-weight: 700;
  color: var(--text);
}

.hero-role-sep {
  margin: 0 0.4em;
  color: var(--accent);
  font-weight: 400;
}

.hero .open-to-work {
  margin-bottom: 22px;
}

.hero-subtitle {
  font-size: 1.1rem;
  min-height: 1.6em;
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--text);
}

.typing-cursor {
  animation: blink 0.8s step-end infinite;
  color: var(--accent);
}

@keyframes blink {
  50% { opacity: 0; }
}

.hero-desc {
  font-size: 1.04rem;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto 32px;
  line-height: 1.7;
  text-wrap: pretty;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 0;
}

.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  .btn:hover::before {
    width: 300px;
    height: 300px;
  }
}

.btn-primary {
  background: var(--grad-primary);
  color: #fff;
  border: 2px solid transparent;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

@media (hover: hover) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
  }
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
}

@media (hover: hover) {
  .btn-outline:hover {
    background: var(--soft);
    transform: translateY(-2px);
    border-color: var(--primary);
  }
}

.btn-cv {
  background: var(--ghost-bg);
  color: var(--text);
  border: 2px solid var(--ghost-border);
}

@media (hover: hover) {
  .btn-cv:hover {
    background: var(--soft);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(21, 43, 73, 0.12);
  }
}

.btn-booking {
  background: var(--btn-soft-bg);
  color: var(--btn-soft-text);
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 18%, transparent);
}

@media (hover: hover) {
  .btn-booking:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);
  }
}

.bg-dark .btn-booking {
  background: var(--strong-btn-bg);
  color: var(--strong-btn-text);
  border-color: transparent;
}

.booking-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto 30px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  text-align: left;
}

.booking-cta h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: #fff;
}

.booking-cta p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.5;
}

.contact-divider {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

/* Four equal stat cards */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 780px;
  margin: 0 auto;
}

.stat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 14px 18px;
  overflow: hidden;
  background: var(--hero-card);
  border-radius: 16px;
  border: 1px solid var(--hero-card-border);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

/* Accent line that draws in along the top edge on hover */
.stat-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
  .stat-item:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card));
    box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--accent) 50%, transparent);
  }

  .stat-item:hover::before {
    opacity: 1;
    transform: scaleX(1);
  }

  .stat-item:hover .stat-number,
  .stat-item:hover .stat-text {
    color: var(--primary-light);
  }
}

/* .stat-text matches .stat-number, but isn't picked up by the counter animation */
.stat-number,
.stat-text {
  font-size: clamp(2rem, 1.6vw + 1.4rem, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  transition: color 0.35s ease;
}

.stat-number::after {
  content: "+";
  display: inline-block;
  margin-left: 2px;
  font-size: 0.6em;
  font-weight: 700;
  color: var(--accent);
  vertical-align: 0.32em;
}

/* Small pop on the "+" when a number finishes counting */
.stat-number.is-counted::after {
  animation: stat-plus 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes stat-plus {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
}

.stat-label {
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Sections */
.section {
  padding: clamp(64px, 7.5vw, 88px) 20px;
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-soft));
  border-radius: 2px;
}

.section-subtitle {
  color: var(--text-muted);
  margin-bottom: 40px;
  font-size: 1.05rem;
}

.section-text {
  max-width: 700px;
  margin: auto;
  line-height: 1.8;
}

.bg-light {
  background: var(--bg-alt);
  max-width: 100%;
}

.bg-light .section,
.bg-light .skills-grid {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.bg-dark {
  background: var(--strong-bg);
  max-width: 100%;
  color: var(--on-strong);
}

.bg-dark .section-title,
.bg-dark .section-subtitle {
  color: var(--on-strong);
}

.bg-dark .section-title::after {
  background: linear-gradient(90deg, var(--on-strong-accent), #ffffff);
}

.light {
  color: #fff;
}

/* About */
.about-content {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.about-card {
  max-width: 700px;
  padding: 40px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.about-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 4px solid var(--primary);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 0 3px var(--accent-soft);
  flex-shrink: 0;
}

.about-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 5%, transparent), transparent);
  transition: left 0.6s ease;
}

@media (hover: hover) {
  .about-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px color-mix(in srgb, var(--accent) 20%, transparent);
  }

  .about-card:hover::before {
    left: 100%;
  }
}

/* Skills: premium blue & white in light mode, deep teal-green in dark mode.
   The palette lives in custom properties on the section; the site's own theme (body.dark) swaps them,
   so the section follows the theme switch instantly and needs no theme logic of its own.
   Illustrations: 3D tiles in assets/icons/skills (official logos from Devicon, MIT). */
.skills-section {
  /* Skills reads the global design tokens (see :root and body.dark) */
  --sk-bg: var(--bg-alt);
  --sk-card: var(--card);
  --sk-card-2: var(--card-2);
  --sk-primary: var(--primary);
  --sk-accent: var(--accent);
  --sk-soft: var(--soft);
  --sk-text: var(--text);
  --sk-muted: var(--text-muted);
  --sk-border: var(--border);
  --sk-chip-text: var(--primary);
  --sk-glow: color-mix(in srgb, var(--accent) 32%, transparent);
  --sk-shadow: var(--shadow-card);
  --sk-shadow-hover: 0 2px 4px rgba(21, 43, 73, 0.05), 0 28px 50px -22px color-mix(in srgb, var(--accent) 50%, transparent);
  position: relative;
  max-width: none;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 10% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(800px 420px at 100% 100%, color-mix(in srgb, var(--primary-light) 8%, transparent), transparent 70%),
    var(--sk-bg);
}

.skills-section .section-title,
.skills-section .section-subtitle,
.skills-section .skills-grid {
  position: relative;
  z-index: 1;
}

#skills .section-eyebrow {
  color: var(--sk-primary);
  background: var(--sk-soft);
}

#skills .section-title {
  color: var(--sk-text);
}

#skills .section-title::after {
  background: linear-gradient(90deg, var(--sk-primary), var(--sk-accent));
}

#skills .section-subtitle,
.bg-light .section-subtitle,
.bg-light .gh-foot,
.bg-light .gh-note {
  color: var(--text-muted-alt);
}

/* Grid: 3 across on desktop (last row of two centred), 2 on tablets, 1 on small phones */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.skills-grid > .skill-card {
  grid-column: span 2;
}

.skills-grid > .skill-card:nth-child(3n + 1):nth-last-child(2) {
  grid-column: 2 / span 2;
}

#skills .skill-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 22px 24px;
  overflow: hidden;
  text-align: center;
  color: var(--sk-text);
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  border-radius: 22px;
  box-shadow: var(--sk-shadow);
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Blue edge light and a soft glow behind the illustration, both shown on hover */
#skills .skill-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--sk-accent), transparent 55%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

#skills .skill-card::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 120%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--sk-glow), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

@media (hover: hover) {
  #skills .skill-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--sk-accent) 45%, var(--sk-border));
    box-shadow: var(--sk-shadow-hover);
  }

  #skills .skill-card:hover::before {
    opacity: 0.9;
  }

  #skills .skill-card:hover::after {
    opacity: 1;
  }
}

/* Illustration: three floating 3D tiles, the main one in front */
.skill-art {
  position: relative;
  z-index: 1;
  width: 156px;
  height: 104px;
  margin: 0 auto 14px;
}

.skill-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 130px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sk-glow), transparent);
  opacity: 0.7;
}

.skill-art-tile {
  position: absolute;
  display: block;
  animation: skill-float 6s ease-in-out infinite alternate;
  transition: scale 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.skill-art-tile--front {
  z-index: 2;
  left: 50%;
  top: 8px;
  width: 84px;
  height: 84px;
  margin-left: -42px;
  animation-duration: 5s;
}

.skill-art-tile--left {
  z-index: 1;
  left: 2px;
  top: 4px;
  width: 58px;
  height: 58px;
  --tilt: -10deg;
  animation-delay: -2s;
}

.skill-art-tile--right {
  z-index: 1;
  right: 2px;
  top: 30px;
  width: 58px;
  height: 58px;
  --tilt: 9deg;
  animation-delay: -4s;
}

@keyframes skill-float {
  from { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  to { transform: translateY(-7px) rotate(var(--tilt, 0deg)); }
}

@media (hover: hover) {
  #skills .skill-card:hover .skill-art-tile--front { scale: 1.08; }
  #skills .skill-card:hover .skill-art-tile--left { translate: -5px 0; }
  #skills .skill-card:hover .skill-art-tile--right { translate: 5px 0; }
}

/* Pause the floating while the section is off screen (js/ui.js) */
.skills-section.is-offscreen .skill-art-tile {
  animation-play-state: paused;
}

#skills .skill-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--sk-text);
}

#skills .skill-category-desc {
  position: relative;
  z-index: 1;
  max-width: 32ch;
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--sk-muted);
}

#skills .skill-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#skills .skill-tags li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sk-chip-text);
  background: var(--sk-card-2);
  border: 1px solid var(--sk-border);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

#skills .skill-tags li:has(img) {
  padding-left: 5px;
}

#skills .skill-tags img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: -3px 0 -2px;
}

@media (hover: hover) {
  #skills .skill-tags li:hover {
    transform: translateY(-2px);
    background: var(--sk-soft);
    border-color: var(--sk-accent);
  }
}

/* Tablets: two balanced columns (the last card centred) */
@media (max-width: 1023px) {
  .skills-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .skills-grid > .skill-card:nth-child(3n + 1):nth-last-child(2) {
    grid-column: span 2;
  }

  .skills-grid > .skill-card:nth-child(odd):last-child {
    grid-column: 2 / span 2;
  }
}

/* Small phones: one column */
@media (max-width: 559px) {
  .skills-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* Undo the centring spans from wider layouts (a span of 2 here would add a second column) */
  .skills-grid > .skill-card,
  .skills-grid > .skill-card:nth-child(odd):last-child,
  .skills-grid > .skill-card:nth-child(3n + 1):nth-last-child(2) {
    grid-column: auto;
  }

  #skills .skill-card {
    padding: 22px 18px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skill-art-tile {
    animation: none;
  }
}

/* Projects */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.project-card {
  position: relative;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.project-image {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--card-2);
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
}

@media (hover: hover) {
  .project-card:hover .project-image img {
    transform: scale(1.08);
  }
}

.project-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 60%
  );
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.6s ease;
}

@media (hover: hover) {
  .project-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px color-mix(in srgb, var(--accent) 25%, transparent);
  }

  .project-card:hover::after {
    transform: rotate(45deg) translateX(100%);
  }
}

.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(23, 78, 166, 0.92), rgba(40, 104, 199, 0.88));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

@media (hover: hover) {
  .project-card:hover .project-overlay {
    opacity: 1;
  }
}

.project-tag {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

@media (hover: hover) {
  .project-card:hover .project-tag {
    transform: translateY(0);
    opacity: 1;
  }

  .project-card:hover .project-tag:nth-child(1) {   transition-delay: 0.05s;
  }

  .project-card:hover .project-tag:nth-child(2) {   transition-delay: 0.1s;
  }

  .project-card:hover .project-tag:nth-child(3) {   transition-delay: 0.15s;
  }
}

.project-content {
  padding: 30px;
  text-align: left;
  position: relative;
  z-index: 1;
}

.project-content h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  color: var(--text);
  transition: color 0.3s ease;
}

@media (hover: hover) {
  .project-card:hover .project-content h3 {
    color: var(--primary);
  }
}

.project-content p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.project-case {
  margin: 0 0 20px;
  padding: 16px;
  background: var(--light-bg);
  border-radius: 10px;
  border-left: 3px solid var(--primary);
}

.case-row {
  margin-bottom: 10px;
}

.case-row:last-child {
  margin-bottom: 0;
}

.case-row dt {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin-bottom: 2px;
}

.case-row dd {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.button,
.project-btn {
  display: inline-block;
  background: var(--grad-primary);
  border: 2px solid color-mix(in srgb, var(--accent-soft) 35%, transparent);
  border-radius: 50px;
  text-decoration: none;
  color: white;
  padding: 12px 24px;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

@media (hover: hover) {
  .button:hover,
  .project-btn:hover {
    transform: translateX(5px);
    border-color: var(--accent-soft);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 20%, transparent);
  }
}

/* Contact: form beside info card */
.contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
  align-items: start;
}

/* Form on the left (spanning both rows), contact card top right */
.contact-grid > .contact-form {
  grid-row: span 2;
}

.contact-card {
  padding: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  text-align: left;
}

.contact-card h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: #fff;
}

.contact-card-note {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 16px;
}

.contact-card .social-links {
  justify-content: flex-start;
  gap: 14px;
  margin: 24px 0 0;
}

/* Contact Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-group {
  position: relative;
  margin-bottom: 15px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px 20px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1rem;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
  outline: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--on-strong-accent);
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.02);
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.input-highlight {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--on-strong-accent), var(--on-strong-accent), var(--on-strong-accent));
  transition: width 0.4s ease, left 0.4s ease;
  border-radius: 2px;
}

.input-group:focus-within .input-highlight {
  width: 100%;
  left: 0;
}

.bg-dark .btn-primary,
.site-footer .btn-primary {
  background: var(--strong-btn-bg);
  color: var(--strong-btn-text);
  border: 2px solid transparent;
  margin-top: 10px;
}

@media (hover: hover) {
  .bg-dark .btn-primary:hover {
    border-color: var(--on-strong-accent);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--on-strong-accent) 50%, transparent), 0 0 20px color-mix(in srgb, var(--on-strong-accent) 25%, transparent);
  }
}

.bg-dark .btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.form-status {
  min-height: 1.25rem;
  margin: 5px 0 10px;
  font-size: 0.95rem;
  transition: opacity 0.3s ease;
}

.form-status.success {
  color: var(--success-on-strong);
}

.form-status.error {
  color: var(--error-on-strong);
}

.check-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: draw-check 0.5s ease 0.1s forwards;
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* Footer */
footer.Contact {
  text-align: center;
  padding: 20px 20px 30px;
  background: var(--footer-bg);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-info p {
  margin: 10px 0;
}

.contact-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.whatsapp-icon {
  width: 22px;
  height: 22px;
  color: #25d366;
  flex-shrink: 0;
}

.contact-info a {
  color: var(--on-strong-accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

@media (hover: hover) {
  .contact-info a:hover {
    color: var(--on-strong-accent);
    text-decoration: underline;
  }
}

.copy-btn {
  margin-left: 8px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: middle;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .copy-btn:hover {
    color: #fff;
    background: color-mix(in srgb, var(--on-strong-accent) 25%, transparent);
    border-color: var(--on-strong-accent);
  }
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 25px 0;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .social-icon:hover {
    transform: translateY(-8px) scale(1.15);
    background: color-mix(in srgb, var(--on-strong-accent) 20%, transparent);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--on-strong-accent) 30%, transparent);
  }
}

.social-icon img,
.social-icon svg {
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.social-icon svg {
  color: #fff;
}

@media (hover: hover) {
  .social-icon--github:hover {
    background: rgba(46, 160, 67, 0.25);
    box-shadow: 0 10px 25px rgba(46, 160, 67, 0.35);
  }

  .social-icon--github:hover svg {
    color: #2ea043;
  }

  .social-icon--linkedin:hover {
    background: rgba(10, 102, 194, 0.25);
    box-shadow: 0 10px 25px rgba(10, 102, 194, 0.35);
  }

  .social-icon--linkedin:hover svg {
    color: #0a66c2;
  }

  .social-icon--x:hover {
    background: rgba(239, 68, 68, 0.25);
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.35);
  }

  .social-icon--x:hover svg {
    color: #ef4444;
  }
}

.social-icon img {
  border-radius: 50%;
}

@media (hover: hover) {
  .social-icon:hover img,
  .social-icon:hover svg {
    transform: rotate(10deg);
  }
}

.copyright {
  opacity: 0.6;
  font-size: 0.9rem;
  margin-top: 15px;
}

.project-btn--code {
  background: transparent;
  color: var(--primary-light);
  border: 2px solid var(--primary-light);
}

@media (hover: hover) {
  .project-btn--code:hover {
    background: var(--grad-primary);
    color: #fff;
    border-color: var(--accent-soft);
    transform: translateX(0) translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--primary-light) 40%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent);
  }
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-card.hidden {
  display: none;
}

.project-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 35px;
}

.filter-btn {
  padding: 10px 20px;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: #fff;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn.active {
  background: var(--grad-primary);
  color: #fff;
  border-color: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent);
}

@media (hover: hover) {
  .filter-btn:hover {
    background: var(--grad-primary);
    color: #fff;
    border-color: var(--accent-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent);
  }
}

/* Open to Work */
.open-to-work {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  margin-bottom: 15px;
  background: rgba(40, 167, 69, 0.15);
  border: 1px solid rgba(40, 167, 69, 0.4);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--status-text);
  backdrop-filter: blur(8px);
}

.status-dot {
  width: 10px;
  height: 10px;
  background: #28a745;
  border-radius: 50%;
  animation: pulse-dot 2s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); }
}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  padding: 35px 28px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  text-align: center;
}

@media (hover: hover) {
  .service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

.service-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.service-card h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: var(--text);
}

.service-card p {
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 0.95rem;
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-card {
  padding: 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  text-align: left;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}

.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 4rem;
  color: color-mix(in srgb, var(--accent) 10%, transparent);
  line-height: 1;
}

@media (hover: hover) {
  .testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px color-mix(in srgb, var(--accent) 15%, transparent);
  }
}

.testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}

.testimonial-stars span {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--border);
  transition: color 0.2s ease;
}

.testimonial-stars[data-rating="1"] span:nth-child(-n+1),
.testimonial-stars[data-rating="2"] span:nth-child(-n+2),
.testimonial-stars[data-rating="3"] span:nth-child(-n+3),
.testimonial-stars[data-rating="4"] span:nth-child(-n+4),
.testimonial-stars[data-rating="5"] span:nth-child(-n+5) {
  color: var(--accent);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

.testimonial-text {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar,
.testimonial-author .author-avatar {
  color: #fff;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.testimonial-author strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text);
}

.testimonial-author span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Blog */
.blog-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 40px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(21, 43, 73, 0.08);
  border: 1px solid var(--border);
  text-align: left;
}

.blog-article-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.blog-article-header h3 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  margin: 10px 0 8px;
  color: var(--text);
  line-height: 1.35;
}

.blog-article-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.blog-article-body p {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.blog-article-body h4 {
  font-size: 1.05rem;
  color: var(--text);
  margin: 24px 0 10px;
}

.blog-article-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.blog-date {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

@media (hover: hover) {
  .blog-link:hover {
    color: var(--primary-light);
  }
}

/* Scroll to Top */
.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 999;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 30%, transparent);
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (hover: hover) {
  .scroll-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--accent) 50%, transparent);
  }
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 20px);
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--strong-card-solid);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* A link straight to this element (#id): fade in without the slide, so the jump lands
   where it ends up and the heading isn't left under the menu bar */
.reveal:target {
  transform: none;
  transition: opacity 0.8s ease;
}

/* ===== Modern polish =====
   A design layer over the base styles: depth, rhythm and clearer hierarchy.
   It sits before Dark Mode and Responsive so those still win where they apply. */
:root {
  --radius-card: 18px;
  --shadow-card: 0 1px 2px rgba(21, 43, 73, 0.04), 0 8px 24px rgba(21, 43, 73, 0.07);
  --shadow-card-hover: 0 2px 4px rgba(21, 43, 73, 0.05), 0 18px 40px rgba(23, 78, 166, 0.16);
}

/* Keyboard focus that's easy to see */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

.section-title {
  font-weight: 800;
}

.section-subtitle {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* Small label above each section title */
.section-eyebrow,
.page-eyebrow {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}

.bg-dark .section-eyebrow {
  color: var(--on-strong-accent);
  background: color-mix(in srgb, var(--on-strong-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--on-strong-accent) 25%, transparent);
}

/* Alternate sections get a soft dot texture */
.bg-light {
  background-color: var(--surface-alt);
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* One card language across the site */
.about-card,
.skill-card,
.service-card,
.project-card,
.testimonial-card,
.blog-article {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.skill-card::before {
  border-radius: inherit;
}

@media (hover: hover) {
  .service-card:hover,
  .testimonial-card:hover {
    box-shadow: var(--shadow-card-hover);
  }

  .project-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
  }
}

/* Service illustrations (assets/icons/services/*.svg) sit in a soft peach tile */
.service-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--primary-light) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.service-icon img {
  display: block;
  width: 64px;
  height: 64px;
}

/* Gentle lift, tilt and float when the card is hovered */
@media (hover: hover) {
  .service-card:hover .service-icon {
    transform: scale(1.06) rotate(-3deg);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
  }

  .service-card:hover .service-icon img {
    animation: icon-float 2.4s ease-in-out infinite;
  }
}

@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Project tags always visible on the screenshot, not only on hover */
.project-overlay {
  opacity: 1;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(to top, rgba(21, 43, 73, 0.8), rgba(21, 43, 73, 0) 60%);
}

.project-tag {
  opacity: 1;
  transform: none;
  padding: 5px 12px;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: none;
}

.filter-btn {
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(21, 43, 73, 0.04);
}

.section-cta {
  margin-top: 44px;
}

/* Four testimonials read best as an even 2x2 grid instead of 3 + 1 */
@media (min-width: 769px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 980px;
  }
}

/* Static depth behind the Projects and Blog page banners: soft light and a faint grid */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(600px circle at 15% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(500px circle at 85% 85%, color-mix(in srgb, var(--primary-light) 14%, transparent), transparent 60%),
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* Projects and Blog page banner */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 20px 80px;
  text-align: center;
  color: var(--text);
  background: var(--hero-bg);
}

.page-hero-content {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.page-hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 14px;
}

.page-hero-text {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.7;
}

.section--page {
  padding-top: 70px;
}

/* Footer used on the Projects and Blog pages */
.site-footer {
  background: var(--footer-bg);
  color: #fff;
  text-align: center;
  padding: 70px 20px 34px;
}

.site-footer-cta h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: 10px;
}

.site-footer-cta p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
}

.site-footer .copyright {
  margin-top: 22px;
}

body.dark .section-eyebrow {
  color: var(--gold-soft);
  background: color-mix(in srgb, var(--accent-soft) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent-soft) 20%, transparent);
}

body.dark .about-card,
body.dark .skill-card,
body.dark .service-card,
body.dark .project-card,
body.dark .testimonial-card,
body.dark .blog-article,
body.dark .filter-btn {
  border-color: rgba(255, 255, 255, 0.08);
}

/* The active / hovered filter keeps the blue button style in dark mode too */
body.dark .filter-btn.active {
  color: #fff;
  background: var(--grad-primary);
  border-color: transparent;
}

@media (hover: hover) {
  body.dark .filter-btn:hover {
    color: #fff;
    background: var(--grad-primary);
    border-color: transparent;
  }
}

body.dark .service-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-soft) 12%, transparent));
  border-color: rgba(255, 255, 255, 0.08);
}

/* ===== Interactive features =====
   Command palette, project explorer, developer terminal, portfolio assistant,
   page transitions and micro-interactions. Components live in js/. */

.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;
}

kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(21, 43, 73, 0.04);
  font: 600 0.72rem/1.6 ui-monospace, "Cascadia Code", Consolas, monospace;
  color: var(--text-muted);
}

/* Smooth fade between pages (browsers that support cross-page View Transitions) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Press feedback on every button */
.btn:active,
.project-btn:active,
.filter-btn:active,
.cmdk-trigger:active,
.terminal-quick button:active,
.assistant-chips button:active,
#modeBtn:active {
  transform: scale(0.97);
}

/* Loading spinner while the contact form sends */
.btn.is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Shimmer behind a screenshot until it loads */
.project-image.is-loading {
  background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-hi) 50%, var(--skeleton) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* ---- Command palette ---- */
.cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(21, 43, 73, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cmdk-trigger-icon {
  font-size: 1.15rem;
  line-height: 1;
}

@media (hover: hover) {
  .cmdk-trigger:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

.cmdk {
  width: min(640px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 48px));
  margin: 10vh auto auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 24px 64px rgba(21, 43, 73, 0.28);
}

.cmdk[open],
.project-preview[open] {
  display: flex;
  flex-direction: column;
  animation: dialog-in 0.18s ease-out;
}

.cmdk::backdrop,
.project-preview::backdrop {
  background: var(--overlay);
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

.cmdk-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.cmdk-icon {
  font-size: 1.3rem;
  color: var(--primary);
}

.cmdk-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
}

.cmdk-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
}

.cmdk-group {
  padding: 10px 10px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}

.cmdk-item.is-active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--primary-light);
}

.cmdk-item-icon {
  width: 24px;
  text-align: center;
}

.cmdk-item-label {
  flex: 1;
  font-weight: 600;
}

.cmdk-item-hint {
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.cmdk-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

.cmdk-footer {
  display: flex;
  gap: 18px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ---- Project explorer ---- */
.project-image {
  cursor: zoom-in;
}

.project-btn--details {
  background: transparent;
  color: var(--primary);
  border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (hover: hover) {
  .project-btn--details:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: var(--primary-light);
  }
}

.project-count {
  margin: -18px 0 26px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.project-card.is-entering {
  animation: card-in 0.35s ease both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

.project-preview {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 30px 80px rgba(21, 43, 73, 0.32);
}

.preview-content {
  overflow-y: auto;
}

.preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 65%, transparent);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.preview-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  object-position: top center;
  background: var(--skeleton);
}

.preview-body {
  padding: 26px 30px 10px;
  text-align: left;
}

.preview-count {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.preview-body h2 {
  margin: 6px 0 12px;
  font-size: 1.7rem;
}

.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.preview-tags li {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.preview-summary {
  color: var(--text-muted);
  line-height: 1.7;
}

.preview-case {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 18px 0;
}

.preview-case div {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
}

.preview-case dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

.preview-case dd {
  margin: 4px 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

.preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.preview-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.preview-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 30px;
  border-top: 1px solid var(--line);
}

.preview-nav {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (hover: hover) {
  .preview-nav:hover {
    border-color: var(--primary-light);
    color: var(--primary);
  }
}

/* ---- Developer terminal ---- */
.terminal {
  max-width: 860px;
  margin: 0 auto;
  overflow: hidden;
  text-align: left;
  border-radius: 14px;
  background: var(--term-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(21, 43, 73, 0.28);
  font: 0.92rem/1.6 ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  color: var(--term-text);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--term-bar);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.terminal-bar span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
}

.terminal-bar span:nth-child(2) { background: #febc2e; }
.terminal-bar span:nth-child(3) { background: #28c840; }

.terminal-bar p {
  margin: 0 auto;
  padding-right: 56px;
  font-size: 0.8rem;
  color: var(--term-muted);
}

.terminal-screen {
  height: 340px;
  padding: 16px 18px;
  overflow-y: auto;
  cursor: text;
}

.t-line {
  white-space: pre-wrap;
  word-break: break-word;
}

.t-prompt { color: var(--term-accent); font-weight: 600; }
.t-typed { color: #fff; }
.t-cmd { color: var(--term-accent-2); }
.t-accent { color: var(--term-accent-2); font-weight: 600; }
.t-muted { color: var(--term-muted); }

.terminal a {
  color: var(--term-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.terminal-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.terminal-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--term-text);
  font: inherit;
  caret-color: var(--term-accent);
}

.terminal-noscript {
  padding: 16px 18px;
  color: var(--term-muted);
}

.terminal-quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 860px;
  margin: 18px auto 0;
}

.terminal-quick button {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: 600 0.85rem ui-monospace, "Cascadia Code", Consolas, monospace;
  cursor: pointer;
}

@media (hover: hover) {
  .terminal-quick button:hover {
    border-color: var(--on-strong-accent);
    color: var(--on-strong-accent);
  }
}

.section-subtitle code {
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--primary);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* ---- Portfolio assistant ---- */
.scroll-top {
  bottom: 100px;
}

.assistant-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 58px;
  padding: 0 20px 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--grad-primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}

.assistant-fab-icon {
  font-size: 1.4rem;
}

.assistant-fab.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

@media (hover: hover) {
  .assistant-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 50%, transparent);
  }
}

.assistant-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: 390px;
  height: min(600px, calc(100vh - 120px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 30px 80px rgba(21, 43, 73, 0.3);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.assistant-panel[hidden] {
  display: none;
}

.assistant-panel.is-open {
  opacity: 1;
  transform: none;
}

.assistant-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: #fff;
  background: var(--strong-bg);
}

.assistant-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--accent-soft);
}

.assistant-header h2 {
  margin: 0;
  font-size: 1rem;
}

.assistant-header p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--on-strong-2);
}

.assistant-close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.assistant-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  background: var(--surface-alt);
  text-align: left;
}

.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.92rem;
  line-height: 1.55;
  animation: msg-in 0.2s ease-out;
}

.msg p + p {
  margin-top: 6px;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
}

.msg--bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}

.msg--user {
  align-self: flex-end;
  color: #fff;
  background: var(--grad-primary);
  border-bottom-right-radius: 6px;
}

.msg--typing {
  display: flex;
  gap: 5px;
  padding: 14px 16px;
}

.msg--typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing 1s ease-in-out infinite;
}

.msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.msg--typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.msg-projects {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.msg-project {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  background: var(--surface-alt);
  transition: border-color 0.2s ease;
}

.msg-project img {
  width: 64px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  object-position: top;
}

.msg-project strong {
  display: block;
  font-size: 0.88rem;
}

.msg-project small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.msg-actions a,
.msg-actions button {
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--primary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .msg-project:hover,
  .msg-actions a:hover,
  .msg-actions button:hover {
    border-color: var(--primary-light);
  }
}

.assistant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 10px;
  background: var(--surface-alt);
}

.assistant-chips:empty {
  display: none;
}

.assistant-chips button {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

@media (hover: hover) {
  .assistant-chips button:hover {
    border-color: var(--primary-light);
    color: var(--primary);
  }
}

.assistant-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.assistant-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
  outline: none;
}

.assistant-input:focus {
  border-color: var(--primary-light);
}

.assistant-send {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

/* ---- Dark mode for the new components ---- */
body.dark kbd {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}

body.dark .cmdk-trigger {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark .cmdk,
body.dark .project-preview,
body.dark .assistant-panel {
  background: var(--card);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark .cmdk-search,
body.dark .cmdk-footer,
body.dark .preview-footer,
body.dark .assistant-form {
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .cmdk-item.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

body.dark .cmdk-group,
body.dark .cmdk-item-hint,
body.dark .preview-summary,
body.dark .preview-note,
body.dark .project-count,
body.dark .msg-project small {
  color: var(--text-muted);
}

body.dark .cmdk-icon,
body.dark .preview-count,
body.dark .preview-case dt,
body.dark .project-btn--details,
body.dark .msg-actions a,
body.dark .msg-actions button {
  color: var(--primary);
}

body.dark .preview-case div,
body.dark .assistant-messages,
body.dark .assistant-chips,
body.dark .msg-project,
body.dark .assistant-input {
  background: var(--bg);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .preview-tags li {
  color: var(--primary);
  background: color-mix(in srgb, var(--accent-soft) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent-soft) 20%, transparent);
}

body.dark .preview-nav,
body.dark .terminal-quick button,
body.dark .assistant-chips button {
  color: var(--text);
  background: var(--card-2);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark .msg--bot,
body.dark .assistant-form {
  background: var(--card-2);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .project-image.is-loading {
  background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%);
  background-size: 200% 100%;
}

body.dark .section-subtitle code {
  background: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  color: var(--primary);
}

/* Tablets and small laptops: icon-only search button so the menu still fits */
@media (min-width: 769px) and (max-width: 1279px) {
  .cmdk-trigger {
    margin-left: 10px;
    padding: 7px 10px;
  }

  .cmdk-trigger-label,
  .cmdk-trigger-kbd {
    display: none;
  }
}

/* ---- Phones ---- */
@media (max-width: 768px) {
  .cmdk-trigger {
    margin-left: auto;
    margin-right: 8px;
    padding: 8px 10px;
  }

  .cmdk-trigger-label,
  .cmdk-trigger-kbd,
  .cmdk-footer {
    display: none;
  }

  .cmdk {
    margin-top: 12px;
  }

  .preview-case {
    grid-template-columns: 1fr;
  }

  .preview-body {
    padding: 20px 18px 6px;
  }

  .preview-footer {
    padding: 12px 18px;
  }

  .terminal {
    font-size: 0.82rem;
  }

  .terminal-screen {
    height: 300px;
    padding: 12px 14px;
  }

  .terminal-bar p {
    padding-right: 0;
  }

  .scroll-top {
    right: 20px;
    bottom: 88px;
    width: 46px;
    height: 46px;
  }

  /* Round icon-only button on phones, so it covers less of the page */
  .assistant-fab {
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
  }

  .assistant-fab-label {
    display: none;
  }

  .assistant-panel {
    right: 10px;
    left: 10px;
    bottom: 10px;
    width: auto;
    height: min(78vh, 620px);
  }
}

/* ===== Hero code background =====
   Syntax-highlighted code panels behind the hero (built by js/hero-code.js).
   Three depth layers: far (blurred, scrolling columns), mid (soft panels), front (sharp editor windows).
   Only transform and opacity animate; everything stops for reduced motion and while the hero is off screen. */

.hero-code {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

/* Dark veil behind the text column so the headline always reads first */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(min(560px, 44%) 60% at 50% 52%, rgba(var(--hero-veil), 0.9) 0%, rgba(var(--hero-veil), 0.72) 50%, rgba(var(--hero-veil), 0) 100%),
    linear-gradient(to bottom, rgba(var(--hero-veil), 0.25), rgba(var(--hero-veil), 0) 20%, rgba(var(--hero-veil), 0) 80%, rgba(var(--hero-veil), 0.6));
}

.code-layer {
  position: absolute;
  inset: 0;
}

.code-panel {
  position: absolute;
  opacity: var(--o, 1);
  animation: code-in 1.6s ease-out var(--d, 0s) both;
}

.code-panel[data-from="tablet"],
.code-panel[data-from="desktop"] {
  display: none;
}

.code-panel--far { --o: 0.34; top: 0; bottom: 0; }
.code-panel--mid { --o: 0.6; }
.code-panel--front { --o: 0.9; }

.code-float {
  transform: rotate(var(--rot, 0deg));
  animation: code-float var(--fd, 12s) ease-in-out infinite alternate;
  will-change: transform;
}

.code-panel--far .code-float {
  transform: none;
  animation: none;
}

.code-window {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: var(--fs, 12px);
  line-height: 1.65;
  color: var(--code-text);
  white-space: pre;
  text-align: left;
  tab-size: 2;
}

/* Front: an editor window with tabs dots, a file name and line numbers */
.code-window--front {
  padding: 0 18px 12px;
  line-height: 1.5;
  border-radius: 12px;
  background: var(--code-window);
  border: 1px solid var(--code-window-border);
  box-shadow: var(--code-window-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.code-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -18px 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--code-window-border);
  color: var(--code-chrome);
  font-size: 0.86em;
}

.code-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f57;
  opacity: 0.8;
}

.code-bar i:nth-child(2) { background: #febc2e; }
.code-bar i:nth-child(3) { background: #28c840; }
.code-bar span { margin-left: 10px; }

.code-window--front .code-block {
  counter-reset: line;
}

.code-window--front .code-line::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 1.4em;
  margin-right: 1.1em;
  text-align: right;
  color: var(--code-gutter);
}

.code-line {
  display: block;
}

.code-line.is-active {
  margin: 0 -18px;
  padding: 0 18px 0 16px;
  border-left: 2px solid var(--accent);
  background: var(--code-active);
}

.code-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--accent);
  animation: code-caret 1.1s steps(1) infinite;
}

/* Mid: a soft panel with a faint gradient, slightly out of focus, slowly breathing */
.code-window--mid {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--code-mid);
  border: 1px solid color-mix(in srgb, var(--code-window-border) 60%, transparent);
  filter: blur(0.4px);
  animation: code-breathe 10s ease-in-out infinite alternate;
}

/* Far: tall columns that scroll slowly, blurred like code in the distance */
.code-panel--far .code-float,
.code-window--far,
.code-window--far .code-body {
  height: 100%;
}

.code-window--far {
  padding: 0 6px;
  filter: blur(1.1px);
}

.code-body.is-scrolling {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

.is-scrolling .code-track {
  animation: code-scroll var(--sd, 80s) linear infinite var(--sdir, normal);
  will-change: transform;
}

.code-copy {
  padding-bottom: 2em;
}

.code-file {
  margin: 0 0 0.5em;
  color: var(--tok-c);
}

.code-file::before {
  content: "── ";
}

.code-block + .code-file {
  margin-top: 1.8em;
}

/* Syntax colours */
.tok-k { color: var(--tok-k); }              /* keywords: purple */
.tok-k2 { color: var(--tok-k2); }             /* keywords: pink */
.tok-s { color: var(--tok-s); }              /* strings: green */
.tok-f { color: var(--tok-f); }              /* functions: electric blue */
.tok-p,
.tok-a { color: var(--tok-p); }              /* properties, attributes: light blue */
.tok-n { color: var(--tok-n); }              /* numbers: orange */
.tok-c { color: var(--tok-c); font-style: italic; } /* comments: muted grey */
.tok-t { color: var(--tok-t); }              /* tags and selectors: orange */
.tok-tb { color: var(--tok-tb); }             /* tag brackets: red */
.tok-o { color: var(--tok-o); }              /* punctuation */

/* Positions (large screens). Front windows sit above the headline, mid panels beside the text. */
.code-panel--web { left: -1%; --fs: 10.5px; --sd: 80s; }
.code-panel--ops { right: -1%; --fs: 10.5px; --sd: 95s; --sdir: reverse; }
.code-panel--types { top: 47%; left: 2%; --rot: 1.2deg; --fs: 10.5px; --fd: 14s; --fy: -10px; }
.code-panel--accounts { top: 45%; right: 2%; --rot: -1.2deg; --fs: 10.5px; --fd: 16s; --fy: 12px; }
.code-panel--server { top: calc(var(--header-h) + 10px); left: 3%; --rot: -2deg; --fs: 11px; --fd: 11s; --fy: -10px; }
.code-panel--card { top: calc(var(--header-h) + 6px); right: 2.5%; --rot: 1.8deg; --fs: 11px; --fd: 13s; --fy: 8px; }

@media (min-width: 769px) {
  .code-panel[data-from="tablet"] { display: block; }
}

@media (min-width: 1240px) {
  .code-panel[data-from="desktop"] { display: block; }
}

/* Laptops and tablets: slightly smaller windows so they end above the headline */
@media (min-width: 769px) and (max-width: 1499px) {
  .code-panel--server,
  .code-panel--card { --fs: 10.5px; }
}

/* Narrower screens: tuck the windows further out, clear of the photo and the eyebrow line */
@media (min-width: 769px) and (max-width: 1239px) {
  .code-panel--server { left: -12px; }
  .code-panel--card { right: -24px; }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .code-panel--card { right: -48px; top: var(--header-h); }
}

/* Big screens have room for larger code */
@media (min-width: 1600px) {
  .code-panel--types,
  .code-panel--accounts { --fs: 11.5px; }

  .code-panel--server,
  .code-panel--card { --fs: 12.5px; }
}

/* Frosted stat cards on larger screens, so any code behind them blurs away */
@media (min-width: 769px) {
  .stat-item {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* Slight parallax while scrolling: distant code drifts slower than the page */
@supports (animation-timeline: scroll()) {
  .code-layer {
    animation: code-parallax linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 100vh;
  }

  .code-layer--far { --px: 110px; }
  .code-layer--mid { --px: 60px; }
  .code-layer--front { --px: 24px; }
}

@keyframes code-in {
  from { opacity: 0; }
}

@keyframes code-float {
  from { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
  to { transform: translate3d(0, var(--fy, -10px), 0) rotate(calc(var(--rot, 0deg) + 0.5deg)); }
}

@keyframes code-scroll {
  to { transform: translate3d(0, -50%, 0); }
}

@keyframes code-breathe {
  to { opacity: 0.55; }
}

@keyframes code-caret {
  50% { opacity: 0; }
}

@keyframes code-parallax {
  to { transform: translate3d(0, var(--px, 0px), 0); }
}

.hero-code.is-paused,
.hero-code.is-paused * {
  animation-play-state: paused !important;
}

/* Tablets: the text column is wider, so the veil is too */
@media (max-width: 1023px) {
  .hero::before {
    background:
      radial-gradient(70% 58% at 50% 50%, rgba(var(--hero-veil), 0.9) 0%, rgba(var(--hero-veil), 0.7) 55%, rgba(var(--hero-veil), 0.1) 100%),
      linear-gradient(to bottom, rgba(var(--hero-veil), 0.25), rgba(var(--hero-veil), 0) 22%, rgba(var(--hero-veil), 0) 80%, rgba(var(--hero-veil), 0.6));
  }

}

/* Phones: fewer, fainter panels peeking in from the edges; no blur (cheaper to draw) */
@media (max-width: 768px) {
  .hero::before {
    background:
      radial-gradient(95% 62% at 50% 46%, rgba(var(--hero-veil), 0.9) 0%, rgba(var(--hero-veil), 0.72) 55%, rgba(var(--hero-veil), 0.35) 100%);
  }

  .code-panel--front { --o: 0.55; }
  .code-panel--far { --o: 0.26; }
  .code-window--far { filter: none; }
  .code-panel--web { left: -6%; --fs: 9.5px; }
  .code-panel--ops { right: -10%; --fs: 9.5px; }
  .code-panel--server { top: calc(var(--header-h) - 2px); left: -132px; --fs: 9.5px; --rot: -4deg; }

  /* A shorter window on phones, so it ends above the eyebrow line */
  .code-panel--server .code-line:nth-child(n + 7) { display: none; }
}

@media (max-width: 360px) {
  .code-panel--server { left: -180px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-code,
  .hero-code * {
    animation: none !important;
  }
}

/* ===== Section photo backgrounds: Blog and Projects =====
   Each photo sits on a full-width layer behind a section that keeps its 1200px content width,
   under a theme-coloured veil (light: blue-white, dark: rgb(18, 60, 53)) so headings and cards stay clear.
   js/ui.js adds .has-bg when the section comes near, so the photo only downloads when needed. */
#blog,
#projects {
  position: relative;
  isolation: isolate;
  --veil: 244, 248, 255;
}

body.dark #blog,
body.dark #projects {
  --veil: 18, 60, 53;
}

#blog::before,
#projects::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background-color: rgb(var(--veil));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#blog.has-bg::before,
#projects.has-bg::before {
  --veil-layers:
    radial-gradient(ellipse 52% 62% at 50% 46%, rgba(var(--veil), 0.9) 0%, rgba(var(--veil), 0.72) 60%, rgba(var(--veil), 0.42) 100%),
    linear-gradient(180deg, rgba(var(--veil), 0.7) 0%, rgba(var(--veil), 0.1) 22%, rgba(var(--veil), 0.1) 78%, rgba(var(--veil), 0.7) 100%);
}

#blog.has-bg::before {
  background-image: var(--veil-layers), url("assets/backgrounds/blog-section.webp");
}

#projects.has-bg::before {
  background-image: var(--veil-layers), url("assets/backgrounds/projects-section.webp");
  background-image: var(--veil-layers), image-set(url("assets/backgrounds/projects-section.avif") type("image/avif"), url("assets/backgrounds/projects-section.webp") type("image/webp"));
}

/* The Blog and Projects pages are long: keep the photo filling the window while the content scrolls over it */
@media (min-width: 1024px) {
  .section--page.has-bg::before {
    background-attachment: fixed;
  }
}

/* Phones and tablets: show the whole photo across the top instead of a narrow zoomed-in slice,
   fading into the section colour below it */
@media (max-width: 1023px) {
  #blog.has-bg::before,
  #projects.has-bg::before {
    --veil-layers: linear-gradient(180deg, rgba(var(--veil), 0.55) 0, rgba(var(--veil), 0.68) 38vw, rgb(var(--veil)) 56vw);
    background-size: 100% 100%, 100% auto;
    background-position: center top;
  }
}

/* ===== Journey, process, before & after, GitHub activity, availability ===== */

/* ---- Availability status (availability.json) ---- */
.availability-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-strong);
  background: rgba(40, 167, 69, 0.15);
  border: 1px solid rgba(40, 167, 69, 0.4);
}

.is-limited.open-to-work,
.is-limited.availability-pill {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.45);
}

.is-busy.open-to-work,
.is-busy.availability-pill {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.45);
}

.is-limited .status-dot { background: #f59e0b; animation: none; }
.is-busy .status-dot { background: #ef4444; animation: none; }

.t-status--available { color: #4ade80; }
.t-status--limited { color: #fbbf24; }
.t-status--busy { color: #f87171; }

/* ---- Shared pill buttons for filters and view switches ---- */
.journey-filters,
.compare-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}

.journey-filter,
.compare-tab,
.gh-refresh {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.journey-filter.is-active,
.compare-tab.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--grad-primary);
}

.journey-filter:active,
.compare-tab:active,
.gh-refresh:active,
.journey-toggle:active,
.process-tab:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .journey-filter:hover,
  .compare-tab:hover,
  .gh-refresh:hover {
    border-color: var(--primary-light);
  }
}

/* ---- Developer Journey ---- */
.journey-wrap {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}

.journey-wrap::before,
.journey-progress {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
}

.journey-wrap::before {
  background: var(--line);
}

.journey-progress {
  background: linear-gradient(var(--primary-light), var(--accent));
  transform: scaleY(0);
  transform-origin: top;
}

.journey {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-item {
  position: relative;
  width: 50%;
  padding-right: 42px;
}

/* Alternate sides, counting only the milestones currently shown */
.journey-item:nth-child(even of :not([hidden])) {
  margin-left: 50%;
  padding-right: 0;
  padding-left: 42px;
}

.journey-marker {
  position: absolute;
  top: 24px;
  right: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--border-strong);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.journey-item:nth-child(even of :not([hidden])) .journey-marker {
  right: auto;
  left: -9px;
}

.journey-item.is-passed .journey-marker {
  background: var(--primary-light);
  border-color: var(--primary-light);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent);
}

.journey-card {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .journey-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }
}

.journey-item.is-upcoming .journey-card {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: none;
}

.journey-item.is-upcoming .journey-marker {
  border-style: dashed;
}

.journey-card time,
.journey-date {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.journey-card h3 {
  margin: 6px 0 8px;
  font-size: 1.08rem;
}

.journey-card p {
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.6;
}

.journey-more {
  margin-top: 12px;
  animation: panel-in 0.3s ease both;
}

.journey-tags,
.process-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-tags li {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--primary);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

.journey-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 10px;
}

.journey-links a {
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.journey-toggle {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.journey-toggle::after {
  content: " ↓";
}

.journey-toggle[aria-expanded="true"]::after {
  content: " ↑";
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* ---- How I Work ---- */
.process {
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}

.process-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Without JavaScript the steps show as cards */
.process-step {
  padding: 22px 24px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.process-step-title,
.process-panel-title {
  margin-bottom: 10px;
  font-size: 1.3rem;
  color: #fff;
}

.process-num {
  margin-right: 6px;
  color: var(--on-strong-accent);
}

.process-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 28px;
}

.process-track {
  position: absolute;
  top: 22px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
}

.process-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--on-strong-accent), var(--on-strong-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.process-tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.process-dot {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--strong-card-solid);
  border: 2px solid rgba(255, 255, 255, 0.14);
  color: var(--on-strong);
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.process-tab.is-done .process-dot {
  border-color: var(--on-strong-accent);
  color: var(--on-strong-accent);
}

.process-tab[aria-selected="true"] {
  color: #fff;
}

.process-tab[aria-selected="true"] .process-dot {
  color: var(--strong-active-text);
  border-color: transparent;
  background: var(--strong-active-bg);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--on-strong-accent) 28%, transparent);
  transform: scale(1.08);
}

@media (hover: hover) {
  .process-tab:hover .process-dot {
    border-color: var(--on-strong-accent);
  }
}

.process-panels .process-panel {
  padding: 28px 30px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.process-panel.is-entering {
  animation: panel-in 0.35s ease both;
}

.process-panel p {
  color: var(--on-strong-2);
  line-height: 1.7;
}

.process-output {
  margin-top: 12px;
}

.process-output strong {
  color: var(--on-strong-accent);
}

.process-tags {
  margin-top: 16px;
}

.process-tags li {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--on-strong);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ---- Before & After ---- */
.compare {
  max-width: 1000px;
  margin: 0 auto;
}

.compare-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--border);
  box-shadow: var(--shadow-card-hover);
}

.compare-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.compare-before {
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(21, 43, 73, 0.2), 0 0 18px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.compare-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  letter-spacing: 2px;
  background: var(--grad-primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.compare-stage:has(.compare-range:focus-visible) .compare-handle span {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (hover: hover) {
  .compare-stage:hover .compare-handle span {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* Invisible slider over the whole image: drag, tap or use arrow keys */
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}

.compare-label {
  position: absolute;
  top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  pointer-events: none;
}

.compare-label--before { left: 14px; }
.compare-label--after { right: 14px; }

.compare-notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 26px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.compare-notes strong {
  color: var(--text);
}

/* ---- GitHub Activity ---- */
.gh {
  max-width: 1100px;
  min-height: 280px;
  margin: 0 auto;
  text-align: left;
  transition: opacity 0.2s ease;
}

.gh.is-refreshing {
  opacity: 0.55;
}

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

.gh-skeleton span {
  height: 110px;
  border-radius: var(--radius-card);
  background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-hi) 50%, var(--skeleton) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

/* Desktop: languages and activity stacked on the left, recent repositories on the right */
.gh-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "profile profile"
    "stats stats"
    "langs repos"
    "activity repos"
    "foot foot";
  align-items: start;
  gap: 20px;
  animation: panel-in 0.4s ease both;
}

.gh-profile { grid-area: profile; }
.gh-stats { grid-area: stats; }
.gh-langs { grid-area: langs; }
.gh-repos { grid-area: repos; align-self: stretch; }
.gh-activity { grid-area: activity; }
.gh-foot { grid-area: foot; }

.gh-repos .gh-repo-list {
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
}

.gh-repos .gh-repo-list li:nth-last-child(2):nth-child(odd) {
  padding-bottom: 0;
  border-bottom: none;
}

.gh-profile,
.gh-stat,
.gh-card,
.gh-error {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.gh-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
}

.gh-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--accent-soft);
}

.gh-who {
  flex: 1;
  min-width: 200px;
}

.gh-who h3 {
  font-size: 1.25rem;
}

.gh-login,
.gh-note,
.gh-footnote,
.gh-repo-desc,
.gh-repo-meta,
.gh-events time,
.gh-foot,
.gh-empty {
  color: var(--text-muted);
}

.gh-login {
  font-size: 0.9rem;
}

.gh-bio {
  margin-top: 4px;
  font-size: 0.92rem;
}

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

.gh-stat {
  padding: 20px 22px;
}

.gh-stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.gh-stat span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.gh-card {
  padding: 22px 24px;
}

.gh-card h4 {
  margin-bottom: 4px;
  font-size: 1.02rem;
}

.gh-note {
  margin-bottom: 16px;
  font-size: 0.82rem;
}

.gh-bars {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gh-bar {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr 26px;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  border-radius: 6px;
  font-size: 0.88rem;
}

.gh-bar-name {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
}

.gh-bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(21, 43, 73, 0.06);
}

.gh-bar-fill {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--chart);
  transform-origin: left;
  animation: bar-grow 0.8s ease-out both;
}

@keyframes bar-grow {
  from { transform: scaleX(0); }
}

.gh-bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Hover / focus tooltip on each bar */
.gh-bar::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 2;
  bottom: calc(100% + 6px);
  left: 98px;
  padding: 6px 10px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.78rem;
  white-space: nowrap;
  background: var(--strong-card-solid);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.gh-bar:hover::after,
.gh-bar:focus-visible::after {
  opacity: 1;
  transform: none;
}

.gh-footnote {
  margin-top: 16px;
  font-size: 0.78rem;
}

.gh-repo-list,
.gh-events {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.gh-repo-list li,
.gh-events li {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.gh-repo-list li:last-child,
.gh-events li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.gh-repo-name {
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

.gh-repo-desc {
  margin: 2px 0 6px;
  font-size: 0.85rem;
}

.gh-repo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.78rem;
}

.gh-lang-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--chart);
}

.gh-events li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
}

.gh-events time {
  flex-shrink: 0;
  font-size: 0.78rem;
}

.gh-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
}

.gh-error {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
}

.gh-error a {
  color: var(--primary);
  font-weight: 600;
}

/* ---- Dark mode for these sections ---- */
body.dark .journey-filter,
body.dark .compare-tab,
body.dark .gh-refresh {
  color: var(--text);
  background: var(--card-2);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark .journey-filter.is-active,
body.dark .compare-tab.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--grad-primary);
}

body.dark .journey-wrap::before {
  background: rgba(255, 255, 255, 0.1);
}

body.dark .journey-card,
body.dark .gh-profile,
body.dark .gh-stat,
body.dark .gh-card,
body.dark .gh-error {
  background: var(--card);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .journey-marker {
  background: var(--bg);
  border-color: rgba(255, 255, 255, 0.28);
}

body.dark .journey-item.is-passed .journey-marker {
  background: var(--primary-light);
  border-color: var(--primary-light);
}

body.dark .journey-card h3,
body.dark .gh-who h3,
body.dark .gh-card h4,
body.dark .gh-stat strong,
body.dark .gh-bar-name,
body.dark .compare-notes strong {
  color: #fff;
}

body.dark .journey-card p,
body.dark .gh-login,
body.dark .gh-note,
body.dark .gh-footnote,
body.dark .gh-repo-desc,
body.dark .gh-repo-meta,
body.dark .gh-events time,
body.dark .gh-foot,
body.dark .gh-empty,
body.dark .gh-stat span,
body.dark .gh-bar-value,
body.dark .compare-notes {
  color: var(--text-muted);
}

body.dark .journey-card time,
body.dark .journey-date,
body.dark .journey-toggle,
body.dark .journey-links a,
body.dark .gh-repo-name,
body.dark .gh-error a {
  color: var(--primary);
}

body.dark .journey-tags li {
  color: var(--primary);
  background: color-mix(in srgb, var(--accent-soft) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent-soft) 20%, transparent);
}

body.dark .gh-bar-track {
  background: rgba(255, 255, 255, 0.08);
}

body.dark .gh-repo-list li,
body.dark .gh-events li {
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .gh-skeleton span {
  background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%);
  background-size: 200% 100%;
}

body.dark .compare-stage {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ---- Tablets ---- */
@media (max-width: 1023px) {
  /* Languages and activity side by side, recent repositories full width below */
  .gh-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "profile profile"
      "stats stats"
      "langs activity"
      "repos repos"
      "foot foot";
    align-items: stretch;
  }
}

/* ---- Phones ---- */
@media (max-width: 768px) {
  .journey-wrap::before,
  .journey-progress {
    left: 18px;
  }

  .journey-item,
  .journey-item:nth-child(even of :not([hidden])) {
    width: 100%;
    margin-left: 0;
    padding-right: 0;
    padding-left: 46px;
  }

  .journey-marker,
  .journey-item:nth-child(even of :not([hidden])) .journey-marker {
    right: auto;
    left: 9px;
  }

  .process-rail {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 18px;
  }

  .process-track {
    display: none;
  }

  .process-dot {
    width: 40px;
    height: 40px;
  }

  .process-tab {
    font-size: 0.82rem;
  }

  .process-panels .process-panel {
    padding: 22px 20px;
  }

  .compare-notes {
    grid-template-columns: 1fr;
  }

  .compare-label {
    top: 10px;
    padding: 4px 9px;
    font-size: 0.7rem;
  }

  .compare-label--before { left: 10px; }
  .compare-label--after { right: 10px; }

  .compare-handle span {
    width: 38px;
    height: 38px;
  }

  .gh-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "profile" "stats" "langs" "repos" "activity" "foot";
  }

  .gh-skeleton,
  .gh-repos .gh-repo-list {
    grid-template-columns: 1fr;
  }

  .gh-repos .gh-repo-list li:nth-last-child(2):nth-child(odd) {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  body.dark .gh-repos .gh-repo-list li:nth-last-child(2):nth-child(odd) {
    border-color: rgba(255, 255, 255, 0.08);
  }

  .gh-stats {
    grid-template-columns: 1fr 1fr;
  }

  .gh-stat strong {
    font-size: 1.6rem;
  }
}

/* Dark Mode */
body.dark {
  /* Dark: deep teal rgb(18, 60, 53) with blue accents */
  --bg: #123c35;
  --bg-alt: #153f37;
  --card: #194b43;
  --card-2: #20564c;
  --primary: #a6c8ff;
  --primary-light: #78aeff;
  --accent: #78aeff;
  --accent-soft: #a6c8ff;
  --soft: rgba(120, 174, 255, 0.14);
  --text: #ffffff;
  --text-muted: #d0e1dc;
  --text-muted-alt: #d0e1dc;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --ink: #0b2a25;
  --overlay: rgba(4, 22, 19, 0.66);
  --focus-ring: rgba(120, 174, 255, 0.75);
  --skeleton: #1d5148;
  --skeleton-hi: #24604f;
  --ghost-bg: rgba(255, 255, 255, 0.06);
  --ghost-border: rgba(255, 255, 255, 0.24);
  --btn-soft-bg: rgba(120, 174, 255, 0.16);
  --btn-soft-text: #a6c8ff;
  --status-text: #ffffff;
  --chart: #468eff; /* validated for bars on the dark cards */

  --strong-bg: linear-gradient(160deg, #0b2b26 0%, #0f352f 100%);
  --footer-bg: #0b2b26;
  --strong-card-solid: #194b43;
  --on-strong-2: #d0e1dc;
  --strong-btn-bg: linear-gradient(135deg, #174ea6, #2868c7);
  --strong-btn-text: #ffffff;
  --strong-active-bg: #a6c8ff;
  --strong-active-text: #0b2b26;

  --term-bg: #0a2621;
  --term-bar: #0f302a;
  --term-text: #e7f2ee;
  --term-muted: #8fb0a6;

  --hero-bg:
    radial-gradient(1000px circle at 8% -12%, rgba(120, 174, 255, 0.12), transparent 60%),
    radial-gradient(900px circle at 100% 110%, rgba(32, 86, 76, 0.9), transparent 60%),
    linear-gradient(165deg, #0f342e 0%, #123c35 55%, #153f37 100%);
  --hero-veil: 18, 60, 53;
  --hero-card: rgba(25, 75, 67, 0.72);
  --hero-card-border: rgba(255, 255, 255, 0.12);
  --grad-name: linear-gradient(135deg, #ffffff, #a6c8ff 50%, #78aeff);

  --code-text: #e2eeea;
  --code-window: linear-gradient(160deg, rgba(11, 43, 38, 0.9), rgba(9, 36, 32, 0.82));
  --code-window-border: rgba(166, 200, 255, 0.18);
  --code-window-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  --code-mid: linear-gradient(160deg, rgba(32, 86, 76, 0.55), rgba(18, 60, 53, 0.15));
  --code-chrome: #a9c4bc;
  --code-gutter: rgba(208, 225, 220, 0.4);
  --code-active: rgba(120, 174, 255, 0.1);
  --tok-k: #c792ea;
  --tok-k2: #ff7ab2;
  --tok-s: #a5e075;
  --tok-f: #4fc1ff;
  --tok-p: #9cdcfe;
  --tok-n: #ff9e64;
  --tok-c: #86a39b;
  --tok-t: #f78c6c;
  --tok-tb: #ff5370;
  --tok-o: #9bb3ac;

  --light-bg: #153f37;
  --surface-alt: #153f37;
  --gold: #78aeff;
  --gold-soft: #a6c8ff;
  --line: rgba(255, 255, 255, 0.12);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 28px -10px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.25), 0 20px 44px -16px rgba(120, 174, 255, 0.32);
  background: var(--bg);
  color: var(--text);
}

body.dark .typing-cursor {
  color: var(--gold-soft);
}

body.dark .scroll-progress {
  background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--gold), var(--gold-soft));
}

body.dark .logo span {
  background: linear-gradient(135deg, var(--primary-light), var(--gold-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.dark .section-title::after {
  background: linear-gradient(90deg, var(--primary-light), var(--gold));
}

body.dark .stat-number,
body.dark .stat-text {
  color: var(--gold-soft);
}

body.dark .hero-photo {
  border-color: color-mix(in srgb, var(--gold-soft) 50%, #fff 50%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 3px color-mix(in srgb, var(--gold) 50%, transparent 50%);
}

body.dark .testimonial-stars[data-rating="1"] span:nth-child(-n+1),
body.dark .testimonial-stars[data-rating="2"] span:nth-child(-n+2),
body.dark .testimonial-stars[data-rating="3"] span:nth-child(-n+3),
body.dark .testimonial-stars[data-rating="4"] span:nth-child(-n+4),
body.dark .testimonial-stars[data-rating="5"] span:nth-child(-n+5) {
  color: var(--gold-soft);
  text-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 40%, transparent);
}

body.dark .btn-primary {
  border-color: color-mix(in srgb, var(--gold-soft) 50%, transparent 50%);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 12px color-mix(in srgb, var(--gold) 25%, transparent 75%);
}

@media (hover: hover) {
  body.dark .btn-primary:hover {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 18px color-mix(in srgb, var(--gold) 35%, transparent 65%);
  }
}

body.dark .bg-light {
  background: var(--bg-alt);
}

body.dark .project-case {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: var(--primary-light);
}

body.dark .case-row dt {
  color: var(--primary-light);
}

body.dark .case-row dd {
  color: var(--text-muted);
}

body.dark .blog-article {
  background: var(--card);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .blog-article-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark .blog-article-header h3,
body.dark .blog-article-body h4 {
  color: #fff;
}

body.dark .blog-article-body p {
  color: var(--text-muted);
}

body.dark .blog-article-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark .about-card,
body.dark .skill-card,
body.dark .project-card,
body.dark .service-card,
body.dark .testimonial-card {
  background: var(--card);
  color: var(--text);
}

body.dark .project-content h3 {
  color: #fff;
}

body.dark .project-content p,
body.dark .section-subtitle,
body.dark .service-card p,
body.dark .testimonial-text {
  color: var(--text-muted);
}

body.dark .service-card h3,
body.dark .testimonial-author strong {
  color: #fff;
}

body.dark .testimonial-stars span {
  color: rgba(255, 255, 255, 0.22);
}

body.dark .filter-btn {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}

body.dark .project-btn--code {
  color: var(--primary-light);
  border-color: var(--primary-light);
}

@media (hover: hover) {
  body.dark .project-btn--code:hover {
    background: var(--grad-primary);
    border-color: var(--gold-soft);
  }
}

/* Responsive */
@media (max-width: 768px) {
  /* Phones: skip costly blur and shorten scroll-in animations */
  .project-tag,
  .open-to-work {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .reveal {
    transform: translateY(16px);
    transition-duration: 0.4s;
  }

  .project-actions {
    flex-direction: column;
  }

  .project-btn,
  .project-btn--code {
    width: 100%;
    text-align: center;
  }

  /* Hero on phones: tighter rhythm, smaller photo, stats closer to the fold */
  .hero {
    padding: calc(var(--header-h) + 28px) 20px 56px;
  }

  .hero-profile {
    margin-bottom: 18px;
  }

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

  .hero-greeting {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
  }

  .hero-content h1 {
    margin-bottom: 14px;
  }

  .hero-role {
    margin-bottom: 14px;
  }

  .hero .open-to-work {
    margin-bottom: 18px;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-desc {
    font-size: 0.98rem;
    margin-bottom: 26px;
  }

  .hero-buttons {
    margin-bottom: 32px;
  }

  .project-overlay {
    padding: 12px;
  }

  .project-tag {
    font-size: 0.72rem;
    padding: 4px 10px;
  }

  .booking-cta {
    flex-direction: column;
    text-align: center;
  }

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

  .contact-grid > .contact-form {
    grid-row: auto;
  }

  .blog-article {
    padding: 24px 20px;
  }
}

/* Hero headline: split at the "|" before it can wrap mid-phrase (one line needs about 640px) */
@media (max-width: 680px) {
  .hero-role-title,
  .hero-role-stack {
    display: block;
  }

  .hero-role-sep {
    display: none;
  }

  .hero-role-stack {
    font-size: clamp(0.8125rem, 4.2vw, 1rem);
  }
}

/* Four stat cards need about 780px for one row; narrower screens get an even 2x2 grid */
@media (max-width: 820px) {
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr; /* both rows the same height, even when a label wraps */
    gap: 12px;
    max-width: 480px;
  }

  .stat-item {
    padding: 16px 12px;
  }
}

/* Below 900px the name gets its own line instead of breaking between "ADIAMO" and "BANKOLE" */
@media (max-width: 900px) {
  .hero-content h1 .gradient-text {
    display: block;
  }
}

@media (max-width: 600px) {
  .hero-content h1 {
    font-size: clamp(1.8rem, 8.2vw + 0.2rem, 2.6rem);
  }
}

/* Phones: the four hero buttons as a tidy 2x2 grid */
@media (max-width: 560px) {
  .hero-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons .btn {
    padding: 13px 10px;
    font-size: 0.93rem;
    white-space: nowrap;
  }
}

/* The longest typed phrase needs two lines here; reserve them so the page doesn't jump */
@media (max-width: 380px) {
  .hero-subtitle {
    font-size: 0.95rem;
    min-height: 3em;
  }
}

/* Portrait tablets: the hero takes the height of its content, so there's no empty band above and below */
@media (orientation: portrait) and (min-width: 600px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 56px);
    padding-bottom: 80px;
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }

}