:root {
  --bg-dark: #01030a;
  --bg-darker: #010109;
  --bg-space: #030111;
  --bg-space-2: #0b0318;
  --grid-line: rgba(122, 255, 255, 0.05);
  --grid-glow: rgba(255, 122, 69, 0.2);
  --accent: #74f7ff;
  --accent-soft: rgba(116, 247, 255, 0.18);
  --accent-2: #ff7a45;
  --accent-warm: #ffb347;
  --accent-violet: #c084fc;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --card-bg: rgba(9, 9, 20, 0.9);
  --shadow: 0 30px 80px -40px rgba(15, 23, 42, 0.98);
  --border-subtle: rgba(148, 163, 184, 0.18);
  --glow-1: rgba(116, 247, 255, 0.55);
  --glow-2: rgba(255, 95, 156, 0.4);
  --glow-3: rgba(251, 174, 60, 0.35);
  --scroll-progress: 0%;
  --nav-indicator-left: 0px;
  --nav-indicator-top: 0px;
  --nav-indicator-width: 0px;
  --nav-indicator-height: 0px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    linear-gradient(180deg, #05070f 0%, #09132a 55%, #04060b 100%);
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
  scroll-behavior: smooth;
  background-attachment: fixed;
  overflow-x: hidden;
}

.webgl-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -3;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.webgl-bg.is-active {
  opacity: 1;
}

[data-theme='light'] .webgl-bg {
  display: none;
}

.background-gradient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 18%, rgba(116, 247, 255, 0.18), transparent 45%),
    radial-gradient(circle at 82% 12%, rgba(255, 122, 69, 0.14), transparent 55%);
  filter: blur(6px);
  opacity: 0.55;
}

.code-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    linear-gradient(90deg, rgba(29, 185, 84, 0.06) 0%, rgba(29, 185, 84, 0.06) 1px, transparent 1px),
    repeating-linear-gradient(180deg, rgba(29, 185, 84, 0.18) 0 2px, rgba(3, 7, 16, 0) 2px 14px);
  background-size: 100% 160px, 100% 100%;
  mix-blend-mode: screen;
  opacity: 0.35;
  animation: codeLines 12s linear infinite;
}

.code-lines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(29, 185, 84, 0.2), rgba(29, 185, 84, 0) 60%);
  mix-blend-mode: screen;
  animation: codePulse 9s ease-in-out infinite;
  opacity: 0.6;
}
 
.language-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  mix-blend-mode: screen;
}

.language-particle {
  position: absolute;
  left: 50%;
  top: 35%;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.35);
  background: rgba(3, 8, 22, 0.65);
  color: rgba(226, 232, 240, 0.85);
  font-size: clamp(0.7rem, 1vw, 0.95rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 15px 35px -28px rgba(116, 247, 255, 0.8);
  text-shadow: 0 0 12px rgba(116, 247, 255, 0.65);
  filter: blur(0.3px);
  opacity: 0;
  transform-origin: center;
  animation: language-pop var(--duration, 2800ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.language-particle.is-static {
  animation: none;
  opacity: 0.4;
  transform: scale(0.85);
  filter: blur(0.6px);
}

@keyframes language-pop {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.65);
  }
  18% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform:
      translate3d(
        calc(-50% + var(--x, 0px)),
        calc(-50% + var(--y, 0px)),
        0
      )
      scale(1.25)
      rotate(var(--rot, 0deg));
    filter: blur(2px);
  }
}

::selection {
  background: rgba(116, 247, 255, 0.38);
  color: #020817;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 12px;
  background: #020817;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(116, 247, 255, 0.5);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
}

.scroll-tracker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(18px);
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

.scroll-tracker::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--scroll-progress);
  background: linear-gradient(
    90deg,
    rgba(116, 247, 255, 1),
    rgba(192, 132, 252, 0.9),
    rgba(255, 122, 69, 0.95)
  );
  background-size: 220% 100%;
  border-radius: 0 999px 999px 0;
  box-shadow: 0 0 18px rgba(116, 247, 255, 0.7);
  transform-origin: left;
  animation: progressGlow 9s linear infinite;
}

.cursor-orb {
  position: fixed;
  top: 0;
  left: 0;
  width: 170px;
  height: 170px;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(226, 232, 240, 0.5), transparent 65%),
    radial-gradient(circle at 70% 70%, rgba(148, 163, 184, 0.25), transparent 70%),
    radial-gradient(circle at center, rgba(116, 247, 255, 0.55), transparent 70%);
  transform: translate3d(-85px, -85px, 0) scale(0.9);
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform;
  mix-blend-mode: screen;
  filter: blur(14px);
  z-index: 30;
}

body.cursor-active .cursor-orb {
  opacity: 0.7;
}

header {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 20px 120px;
  text-align: center;
  overflow: hidden;
  perspective: 1200px;
}

header::before,
header::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  filter: blur(140px);
  z-index: 0;
  opacity: 0.65;
}

header::before {
  width: 420px;
  height: 420px;
  top: 6%;
  left: 12%;
  background: rgba(116, 247, 255, 0.24);
  animation: float 14s ease-in-out infinite;
}

header::after {
  width: 460px;
  height: 460px;
  bottom: 4%;
  right: 10%;
  background: rgba(255, 122, 69, 0.18);
  animation: float 16s ease-in-out infinite reverse;
}

.hero {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1140px;
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
  opacity: 0;
  /* No translateY entrance here on purpose: a slide-up looks nice, but a
     transform on a box this large (the hero, plus its huge ::before glow
     layer) still counts toward Cumulative Layout Shift -- the Layout
     Instability API tracks painted position across frames regardless of
     which property moved it. A pure opacity fade keeps the reveal without
     that cost; the pointer-tilt rotation below is unaffected. */
  transform:
    rotateX(var(--hero-tilt-y))
    rotateY(var(--hero-tilt-x));
  transform-style: preserve-3d;
  transition:
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 1s ease;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -70px -50px;
  background:
    radial-gradient(circle at 50% 0%, rgba(116, 247, 255, 0.22), transparent 65%),
    radial-gradient(circle at 0% 80%, rgba(255, 122, 69, 0.18), transparent 75%);
  filter: blur(60px);
  opacity: 0;
  z-index: -1;
  transition: opacity 1.25s ease;
}

html.has-js body.is-ready .hero {
  opacity: 1;
}

.hero.is-tilt-live {
  /* Drop the transform transition while the pointer-tilt rAF loop is
     actively driving --hero-tilt-x/-y every frame -- see .hero's own
     transition comment for why a competing CSS transition here causes
     visible lag. Opacity stays covered for the entrance fade. */
  transition: opacity 1s ease;
}

html.has-js body.is-ready .hero::before {
  opacity: 1;
}

.hero-grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 2.1fr) minmax(260px, 0.9fr);
  align-items: flex-start;
}

.hero-copy {
  text-align: left;
  min-width: 0;
}

.hero-panel {
  display: grid;
  gap: 16px;
  background: rgba(4, 7, 18, 0.9);
  border-radius: 32px;
  padding: 26px;
  border: 1px solid rgba(116, 247, 255, 0.22);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 90px -45px rgba(8, 12, 28, 0.9);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-clip: padding-box;
}

.hero-panel::after {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at top, rgba(116, 247, 255, 0.14), transparent 60%);
  opacity: 0.6;
}

.panel-holo {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 95, 156, 0.35), transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(116, 247, 255, 0.3), transparent 50%);
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: holoSweep 20s linear infinite;
  pointer-events: none;
}

.signal-card {
  padding: 20px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(2, 4, 14, 0.95), rgba(15, 8, 28, 0.85));
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(116, 247, 255, 0.05),
    0 25px 50px -35px rgba(6, 182, 212, 0.6);
  display: grid;
  gap: 8px;
  transition: border 0.4s ease, box-shadow 0.4s ease;
}

.signal-card.live-status {
  border: 1px solid rgba(116, 247, 255, 0.4);
  background: linear-gradient(140deg, rgba(116, 247, 255, 0.16), rgba(2, 6, 23, 0.92));
}

.signal-card h2 {
  margin: 0;
  font-size: 1.2rem;
}

.signal-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.signal-card.availability .btn-availability {
  justify-content: center;
  width: 100%;
  margin-top: 4px;
  font-size: 0.82rem;
  padding: 10px 18px;
}

.signal-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(116, 247, 255, 0.45);
  color: var(--accent);
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}

.status-dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.9);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.7);
}

.status-dot.is-open::before {
  background: rgba(74, 222, 128, 0.95);
}

.stack-label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.7);
}

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

.chip {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid rgba(116, 247, 255, 0.35);
  color: rgba(226, 232, 240, 0.85);
  background: linear-gradient(120deg, rgba(8, 12, 24, 0.9), rgba(32, 12, 42, 0.8));
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.tech-token-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tech-token-list li {
  margin-bottom: 6px;
}

.tech-token {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  margin: 0 4px;
  background: var(--chip-bg, rgba(15, 23, 42, 0.85));
  color: var(--chip-color, rgba(226, 232, 240, 0.9));
  box-shadow: 0 6px 20px var(--chip-shadow, rgba(2, 6, 23, 0.45));
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.tech-token:first-child {
  margin-left: 0;
}

.chip-row.tech-chips {
  justify-content: flex-start;
}

.chip[data-tech],
.tech-token[data-tech] {
  border-color: transparent;
  color: var(--chip-color, rgba(226, 232, 240, 0.9));
  background: var(--chip-bg, rgba(8, 12, 24, 0.9));
  box-shadow: 0 12px 28px var(--chip-shadow, rgba(2, 6, 23, 0.65));
  font-weight: 600;
  letter-spacing: 0.01em;
}

.chip[data-tech]:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 38px var(--chip-shadow, rgba(2, 6, 23, 0.7));
}

.tech-chips .chip {
  background: linear-gradient(135deg, rgba(24, 122, 255, 0.15), rgba(255, 40, 118, 0.2));
  position: relative;
  overflow: hidden;
}

.tech-chips .chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.tech-chips .chip:hover::after {
  opacity: 0.8;
}

.tech-chips .chip[data-tech='react'],
.tech-chips .chip[data-tech='javascript'],
.tech-chips .chip[data-tech='python'],
.tech-chips .chip[data-tech='flutter'],
.tech-chips .chip[data-tech='java'],
.tech-chips .chip[data-tech='sql'] {
  animation: chipPulse 8s ease-in-out infinite;
}

.chip[data-tech='python'],
.tech-token[data-tech='python'] {
  --chip-bg: linear-gradient(135deg, rgba(48, 105, 152, 0.95), rgba(255, 212, 59, 0.65));
  --chip-shadow: rgba(48, 105, 152, 0.45);
  --chip-color: #fffaf0;
}

.chip[data-tech='java'],
.tech-token[data-tech='java'] {
  --chip-bg: linear-gradient(135deg, rgba(248, 152, 32, 0.92), rgba(90, 32, 3, 0.85));
  --chip-shadow: rgba(248, 152, 32, 0.45);
  --chip-color: #fff2df;
}

.chip[data-tech='javascript'],
.tech-token[data-tech='javascript'] {
  --chip-bg: linear-gradient(135deg, rgba(247, 223, 30, 0.9), rgba(65, 51, 1, 0.85));
  --chip-shadow: rgba(247, 223, 30, 0.4);
  --chip-color: #201b00;
}

.chip[data-tech='react'],
.tech-token[data-tech='react'] {
  --chip-bg: linear-gradient(135deg, rgba(97, 218, 251, 0.95), rgba(12, 20, 30, 0.9));
  --chip-shadow: rgba(97, 218, 251, 0.4);
  --chip-color: #f0fbff;
}

.chip[data-tech='flutter'],
.tech-token[data-tech='flutter'] {
  --chip-bg: linear-gradient(135deg, rgba(10, 97, 201, 0.95), rgba(71, 197, 251, 0.8));
  --chip-shadow: rgba(10, 97, 201, 0.45);
  --chip-color: #e8f5ff;
}

.chip[data-tech='sql'],
.tech-token[data-tech='sql'] {
  --chip-bg: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(8, 47, 73, 0.9));
  --chip-shadow: rgba(14, 165, 233, 0.4);
  --chip-color: #e6f7ff;
}

.chip[data-tech='node'],
.tech-token[data-tech='node'] {
  --chip-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(6, 78, 59, 0.9));
  --chip-shadow: rgba(34, 197, 94, 0.45);
  --chip-color: #f0fff7;
}

.chip[data-tech='rest'],
.tech-token[data-tech='rest'] {
  --chip-bg: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(8, 47, 73, 0.9));
  --chip-shadow: rgba(14, 165, 233, 0.4);
  --chip-color: #e6f7ff;
}

.chip[data-tech='graphql'],
.tech-token[data-tech='graphql'] {
  --chip-bg: linear-gradient(135deg, rgba(216, 70, 239, 0.92), rgba(88, 28, 135, 0.9));
  --chip-shadow: rgba(216, 70, 239, 0.45);
  --chip-color: #fff0ff;
}

.chip[data-tech='api'],
.tech-token[data-tech='api'] {
  --chip-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.92), rgba(49, 46, 129, 0.9));
  --chip-shadow: rgba(99, 102, 241, 0.45);
  --chip-color: #eef0ff;
}

.chip[data-tech='docker'],
.tech-token[data-tech='docker'] {
  --chip-bg: linear-gradient(135deg, rgba(14, 116, 228, 0.95), rgba(30, 27, 75, 0.9));
  --chip-shadow: rgba(14, 116, 228, 0.45);
  --chip-color: #e7f1ff;
}

.chip[data-tech='github'],
.tech-token[data-tech='github'] {
  --chip-bg: linear-gradient(135deg, rgba(12, 12, 12, 0.95), rgba(51, 51, 51, 0.9));
  --chip-shadow: rgba(15, 15, 15, 0.45);
  --chip-color: #f5f5f5;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  margin-bottom: 20px;
  border-radius: 999px;
  border: 1px solid rgba(116, 247, 255, 0.55);
  background: rgba(9, 9, 20, 0.9);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-badge::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  animation: twinkle 1.7s ease-in-out infinite alternate;
}

.hero-motto {
  margin: 18px 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(116, 247, 255, 0.35);
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.85rem, 5.4vw, 4.2rem);
  letter-spacing: -0.03em;
  background: linear-gradient(
    130deg,
    rgba(241, 245, 249, 0.95),
    rgba(116, 247, 255, 0.9),
    rgba(255, 122, 69, 0.92)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleGlow 7s ease-in-out infinite;
}

.hero h1[data-scramble-active='true'] {
  text-shadow: 0 0 22px rgba(116, 247, 255, 0.35);
}

.hero p {
  margin: 0 0 26px;
  max-width: 640px;
  font-size: 1.1rem;
  color: var(--muted);
  animation: paragraphRise 1.4s ease forwards;
}

.hero-tech-chips {
  margin: -8px 0 26px;
}

.hero-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  padding: 0;
  margin: 0 0 30px;
  list-style: none;
  color: rgba(226, 232, 240, 0.8);
  font-size: 0.9rem;
  animation: paragraphRise 1.7s ease forwards;
}

.hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-meta li::before {
  content: '\2022';
  color: rgba(148, 163, 184, 0.6);
}

.hero-meta li:first-child::before {
  display: none;
}

.hero-meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.5);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hero-meta a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 38px;
  animation: paragraphRise 1.9s ease forwards;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
  cursor: pointer;
  white-space: nowrap;
}

[data-magnetic] {
  position: relative;
  --magnet-x: 0px;
  --magnet-y: 0px;
  --magnet-scale: 1;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0) scale(var(--magnet-scale));
  will-change: transform;
}

.btn-primary {
  background: transparent;
  color: var(--text);
  border-color: rgba(116, 247, 255, 0.45);
  box-shadow: inset 0 0 15px rgba(116, 247, 255, 0.15);
  backdrop-filter: blur(2px) saturate(1.6);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.6), transparent 65%);
  opacity: 0;
  transform: translate3d(-40%, 40%, 0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.btn-primary:hover {
  transform: translateY(-4px);
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--accent);
  box-shadow: 0 18px 46px -26px rgba(116, 247, 255, 0.55);
}

.btn-primary:hover::after {
  opacity: 0.7;
  transform: translate3d(18%, -18%, 0);
}

.btn-secondary {
  background: rgba(5, 8, 22, 0.85);
  color: var(--text);
  border-color: rgba(255, 95, 156, 0.45);
  box-shadow: inset 0 0 15px rgba(255, 95, 156, 0.25);
}

.btn-secondary:hover {
  background: rgba(15, 23, 42, 1);
  transform: translateY(-3px);
  box-shadow: 0 18px 46px -26px rgba(255, 95, 156, 0.55);
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  max-width: 640px;
  margin: 26px 0 0;
}

.hero-stats .stat {
  --tilt-scale: 1;
  --stat-delay: 0s;
}

.stat {
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(6, 11, 25, 0.95), rgba(22, 9, 32, 0.92));
  border: 1px solid rgba(116, 247, 255, 0.18);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.4s ease;
  /* Scopes this card's own reflow/repaint so its tilt-hover transform and
     entrance animation don't force layout/paint work on unrelated
     siblings. Safe here specifically because nothing needs to paint
     outside this box (overflow: hidden already enforces that). */
  contain: layout paint;
}

html.has-js .stat {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
}

.stat.is-visible {
  animation: statEntrance 0.5s ease-out var(--stat-delay, 0s) forwards;
}

.hero-stats .stat:nth-of-type(1) {
  --stat-delay: 0.1s;
}

.hero-stats .stat:nth-of-type(2) {
  --stat-delay: 0.28s;
}

.hero-stats .stat:nth-of-type(3) {
  --stat-delay: 0.45s;
}

.stat-number {
  font-size: 1.6rem;
  font-weight: 700;
  display: block;
}

.stat-label {
  font-size: 0.86rem;
  color: var(--muted);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(4, 7, 18, 0.92);
  font-size: 0.85rem;
  color: rgba(226, 232, 240, 0.86);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(116, 247, 255, 0.8);
  box-shadow: 0 0 12px rgba(116, 247, 255, 0.7);
  animation: pulse 2s ease-in-out infinite;
}

.pulse-dot.is-green {
  background: rgba(16, 185, 129, 0.9);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

.pulse-dot.is-purple {
  background: rgba(129, 140, 248, 0.9);
  box-shadow: 0 0 12px rgba(129, 140, 248, 0.6);
}

nav:not(.footer-nav) {
  position: sticky;
  top: 4px;
  margin-top: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  /* Extra left padding reserves room inside the pill for .nav-wordmark
     (a fixed-position sibling, not a flex child of nav) so it has
     somewhere to sit that isn't already "ABOUT"'s own space -- nav's
     centered content shifts right by the same amount, opening a matching
     gap at the pill's left edge. */
  padding: 14px 18px 14px 64px;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
  backdrop-filter: blur(18px);
  z-index: 35;
  opacity: 0;
  transform: translateY(-22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  border-bottom: 1px solid rgba(15, 23, 42, 0.9);
  border-radius: 999px;
  max-width: min(1060px, calc(100% - 32px));
  margin-left: auto;
  margin-right: 320px;
  overflow: hidden;
}

html.has-js body.is-ready nav {
  opacity: 1;
  transform: translateY(0);
}

.nav-wordmark {
  position: fixed;
  top: 25px;
  left: 34px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 40;
}

/* Apple's "headline shrinks into the nav" trick: rather than literally
   moving the h1 into the nav bar (a much fussier DOM/FLIP animation), a
   small wordmark fades in here in the same moment the real hero heading
   scrolls out of view -- script.js toggles body.is-past-hero off an
   IntersectionObserver on <header>, so this is a one-shot crossfade at the
   boundary, not something recalculated on every scroll frame. */
body.is-past-hero .nav-wordmark {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

nav a {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
  position: relative;
  z-index: 1;
}

nav a:hover,
nav a:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

nav a.is-active {
  color: var(--text);
  border-color: rgba(116, 247, 255, 0.6);
}

.nav-cta {
  position: fixed;
  top: 18px;
  right: 130px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 40;
}

.btn-nav {
  padding: 8px 16px;
  font-size: 0.76rem;
}

.nav-indicator {
  position: absolute;
  top: var(--nav-indicator-top);
  left: var(--nav-indicator-left);
  width: var(--nav-indicator-width);
  height: var(--nav-indicator-height);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(116, 247, 255, 0.25), rgba(255, 95, 156, 0.35));
  box-shadow: 0 10px 35px -18px rgba(116, 247, 255, 0.8);
  opacity: 0;
  transform: translateZ(0);
  transition: opacity 0.4s ease, top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
  pointer-events: none;
}

.nav-indicator.is-visible {
  opacity: 0.9;
}

.section {
  padding: 80px 20px;
  max-width: 1120px;
  margin: 40px auto;
  position: relative;
  scroll-margin-top: 120px;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.4), rgba(2, 6, 23, 0.95));
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: 0 26px 70px -48px rgba(15, 23, 42, 1);
  overflow: hidden;
  --section-shift: 0px;
  transform: translate3d(0, var(--section-shift), 0);
  will-change: transform;
}

/* A subtle hue shift per section -- same dark base, same contrast, just a
   different accent tint in the corner glow -- so scrolling through About
   -> Skills -> Experience -> Now -> Projects reads as distinct chapters
   instead of one uniform card repeated six times.
   Scoped under html:not([data-theme='light']) rather than left as bare ID
   selectors: an ID beats [data-theme='light'] .section on specificity
   regardless of source order, which would otherwise leak this dark tint
   into light theme and break its white-card look. */
html:not([data-theme='light']) #about.section {
  background: radial-gradient(circle at top left, rgba(19, 78, 82, 0.45), rgba(2, 6, 23, 0.95));
}

html:not([data-theme='light']) #skills.section {
  background: radial-gradient(circle at top left, rgba(60, 24, 82, 0.42), rgba(2, 6, 23, 0.95));
}

html:not([data-theme='light']) #experience.section {
  background: radial-gradient(circle at top left, rgba(80, 22, 52, 0.4), rgba(2, 6, 23, 0.95));
}

html:not([data-theme='light']) #now.section {
  background: radial-gradient(circle at top left, rgba(84, 56, 16, 0.38), rgba(2, 6, 23, 0.95));
}

html:not([data-theme='light']) #projects.section {
  background: radial-gradient(circle at top left, rgba(16, 44, 88, 0.42), rgba(2, 6, 23, 0.95));
}

html:not([data-theme='light']) #contact.section {
  background: radial-gradient(circle at top left, rgba(78, 24, 66, 0.4), rgba(2, 6, 23, 0.95));
}

.section::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  box-shadow: inset 0 0 25px rgba(2, 6, 23, 0.6);
}

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

.section::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(140deg, rgba(116, 247, 255, 0.08), transparent 55%),
    linear-gradient(320deg, rgba(255, 122, 69, 0.08), transparent 60%),
    repeating-linear-gradient(
      -45deg,
      rgba(116, 247, 255, 0.05),
      rgba(116, 247, 255, 0.05) 1px,
      transparent 1px,
      transparent 18px
    );
  opacity: 0.35;
  pointer-events: none;
}

.section h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  margin: 0 0 18px;
}

.section p.lead {
  margin: 0 0 26px;
  max-width: 760px;
  color: var(--muted);
  font-size: 1rem;
}

body.detail-page header {
  min-height: auto;
  text-align: left;
  padding: 160px 20px 80px;
}

body.detail-page header::before,
body.detail-page header::after {
  display: none;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 18px;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--accent);
}

.detail-hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}

.detail-hero-card {
  background: rgba(6, 10, 20, 0.85);
  border-radius: 24px;
  border: 1px solid rgba(116, 247, 255, 0.2);
  padding: 28px;
  box-shadow: 0 25px 60px -40px rgba(15, 23, 42, 0.9);
}

.detail-hero-card ul {
  padding-left: 18px;
  margin: 0;
  color: rgba(226, 232, 240, 0.9);
  line-height: 1.5;
}

.detail-hero-card li {
  margin-bottom: 10px;
}

.detail-label {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.7);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.detail-meta {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 10px;
}

.detail-meta li {
  color: rgba(226, 232, 240, 0.88);
  font-size: 0.95rem;
}

.detail-section {
  margin-top: 40px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.detail-card {
  background: rgba(8, 12, 24, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 48px -32px rgba(15, 23, 42, 0.9);
}

.detail-card h4 {
  margin-top: 0;
  margin-bottom: 10px;
}

.result-list {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.92);
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.result-table th,
.result-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  text-align: left;
}

.result-table th {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  color: rgba(226, 232, 240, 0.7);
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.workflow-step {
  background: rgba(6, 9, 20, 0.85);
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(116, 247, 255, 0.12);
}

.code-panel {
  background: rgba(4, 8, 18, 0.92);
  border-radius: 28px;
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 32px;
  box-shadow: 0 34px 85px -48px rgba(30, 64, 175, 0.8);
}

.code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
}

.code-block {
  max-height: 520px;
  overflow: auto;
  background: rgba(2, 6, 23, 0.95);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.4;
  white-space: pre;
}

.ghost-btn {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: rgba(226, 232, 240, 0.9);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ghost-btn:hover,
.ghost-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.glass-card {
  position: relative;
  overflow: hidden;
  background: rgba(5, 6, 18, 0.9);
  border-radius: 28px;
  padding: 32px;
  border: 1px solid rgba(116, 247, 255, 0.3);
  backdrop-filter: blur(22px);
  box-shadow:
    0 20px 60px -30px rgba(4, 6, 17, 0.9),
    0 12px 40px rgba(116, 247, 255, 0.15);
  isolation: isolate;
}

.glass-card::before {
  content: '';
  position: absolute;
  inset: -20% -30%;
  background: radial-gradient(circle at top, rgba(116, 247, 255, 0.25), transparent 45%) ,
    radial-gradient(circle at 80% 20%, rgba(255, 122, 69, 0.25), transparent 40%);
  filter: blur(8px);
  opacity: 0.7;
  animation: haloShift 12s linear infinite;
  pointer-events: none;
  z-index: -2;
}

.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
  box-shadow: inset 0 0 30px rgba(116, 247, 255, 0.08);
  z-index: -1;
}

[data-tilt] {
  position: relative;
  --tilt-rotate-x: 0deg;
  --tilt-rotate-y: 0deg;
  --tilt-translate-x: 0px;
  --tilt-translate-y: 0px;
  --tilt-scale: 1;
  transform:
    perspective(900px)
    rotateX(var(--tilt-rotate-x))
    rotateY(var(--tilt-rotate-y))
    translate3d(var(--tilt-translate-x), var(--tilt-translate-y), 0)
    scale(var(--tilt-scale));
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

[data-tilt].is-tilting {
  /* JS already lerps rotate/translate/scale every animation frame while the
     pointer is over the element; a competing CSS transition here would
     re-ease each of those per-frame updates on top, doubling the damping
     and making the tilt visibly lag behind the cursor. Let JS drive motion
     directly while tilting, and only ease back to neutral on pointer-leave. */
  transition: none;
}

.about-grid {
  display: grid;
  gap: 26px;
}

.now-card {
  display: grid;
  gap: 16px;
}

.now-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.now-heading h2 {
  margin: 0;
}

.now-updated {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.now-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--muted);
}

.now-marker {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.pill {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(116, 247, 255, 0.3);
  font-size: 0.8rem;
  color: var(--muted);
  background: linear-gradient(120deg, rgba(10, 16, 32, 0.96), rgba(28, 10, 42, 0.9));
  mix-blend-mode: screen;
  animation: pillGlow 6s ease-in-out infinite;
  box-shadow: 0 8px 18px rgba(116, 247, 255, 0.15);
}

.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.highlight {
  padding: 16px 14px;
  border-radius: 18px;
  background: linear-gradient(125deg, rgba(9, 9, 20, 0.95), rgba(20, 8, 32, 0.9));
  border: 1px solid rgba(116, 247, 255, 0.18);
  font-size: 0.86rem;
  color: var(--muted);
  position: relative;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.highlight::before {
  content: '';
  position: absolute;
  inset: -40% 30%;
  background: radial-gradient(circle, rgba(116, 247, 255, 0.3), transparent 55%);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.highlight::after {
  content: '';
  position: absolute;
  inset: -40% 60% 70% -40%;
  background: linear-gradient(
    120deg,
    rgba(116, 247, 255, 0),
    rgba(116, 247, 255, 0.32),
    rgba(116, 247, 255, 0)
  );
  transform: translateX(-90%) rotate(9deg);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.highlight:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: linear-gradient(125deg, rgba(12, 12, 28, 0.98), rgba(34, 10, 46, 0.94));
  animation: highlightPulse 5s ease-in-out infinite;
}

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

.highlight:hover::after {
  transform: translateX(130%) rotate(9deg);
}

.project-card::before {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: inherit;
  border: 1px solid rgba(116, 247, 255, 0.12);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}

.project-card span {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.project-card h3 {
  margin: 0;
  font-size: 1.3rem;
}

.project-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  flex: 1;
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.project-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.74rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.project-link:hover,
.project-link:focus-visible {
  color: var(--text);
  border-color: rgba(116, 247, 255, 0.5);
}

.project-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: var(--accent);
  background: linear-gradient(125deg, rgba(4, 7, 18, 1), rgba(24, 8, 32, 0.98));
  box-shadow: 0 32px 80px -40px rgba(116, 247, 255, 0.6);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 22px;
}

.skill-card {
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(125deg, rgba(4, 7, 18, 0.95), rgba(22, 8, 32, 0.9));
  border: 1px solid rgba(116, 247, 255, 0.18);
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  font-size: 0.9rem;
}

.skill-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.skill-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
  color: var(--muted);
}

.timeline {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  position: relative;
  padding-left: 32px;
}

.build-log {
  margin-top: 36px;
}

.build-log-label {
  margin: 0 0 12px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.build-log-track {
  display: flex;
  gap: 16px;
  margin: 0 -20px;
  padding: 4px 20px 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(116, 247, 255, 0.4) transparent;
}

.build-log-track::-webkit-scrollbar {
  height: 8px;
}

.build-log-track::-webkit-scrollbar-thumb {
  background: rgba(116, 247, 255, 0.35);
  border-radius: 999px;
}

.build-log-track::-webkit-scrollbar-track {
  background: transparent;
}

.build-log-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(125deg, rgba(9, 9, 20, 0.95), rgba(20, 8, 32, 0.9));
  border: 1px solid rgba(116, 247, 255, 0.18);
  display: grid;
  gap: 6px;
  contain: layout paint;
}

.build-log-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 6px;
  background: linear-gradient(135deg, rgba(116, 247, 255, 0.18), rgba(192, 132, 252, 0.16));
  border: 1px solid rgba(116, 247, 255, 0.15);
}

.build-log-card small {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.build-log-card h4 {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text);
}

.build-log-card p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(116, 247, 255, 0.65), rgba(116, 247, 255, 0.05));
}

.timeline-item {
  position: relative;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(130deg, rgba(4, 7, 18, 0.95), rgba(20, 8, 34, 0.9));
  border-right: 1px solid rgba(116, 247, 255, 0.15);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  color: var(--muted);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 0 4px rgba(3, 7, 16, 0.92);
}

.timeline-item:first-child::before {
  animation: pulse 2s ease-in-out infinite;
}

.timeline-item small {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.timeline-item h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--text);
}

.timeline-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    140deg,
    rgba(116, 247, 255, 0.12),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.timeline-item:hover::after {
  opacity: 1;
}

.section-intro {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 760px;
}

.project-card,
.contact-card {
  isolation: isolate;
}

.project-card::after,
.contact-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(116, 247, 255, 0.1), transparent 70%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}

[data-tilt]:hover::after {
  opacity: 1;
}

.projects-list {
  display: flex;
  gap: 20px;
  margin: 8px -20px 0;
  padding: 4px 20px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(116, 247, 255, 0.4) transparent;
}

.projects-list::-webkit-scrollbar {
  height: 8px;
}

.projects-list::-webkit-scrollbar-thumb {
  background: rgba(116, 247, 255, 0.35);
  border-radius: 999px;
}

.projects-list::-webkit-scrollbar-track {
  background: transparent;
}

.project-card {
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(4, 7, 18, 0.95), rgba(18, 8, 34, 0.88));
  border: 1px solid rgba(116, 247, 255, 0.2);
  box-shadow: var(--shadow);
  contain: layout paint;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--muted);
  min-height: 210px;
  flex: 0 0 clamp(260px, 32vw, 340px);
  scroll-snap-align: start;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.project-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(116, 247, 255, 0.22), rgba(192, 132, 252, 0.2)),
    linear-gradient(120deg, rgba(4, 7, 18, 0.98), rgba(18, 8, 34, 0.96));
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.project-preview-icon {
  font-size: 2.6rem;
}

.project-preview-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.project-card:hover .project-preview,
.project-card:focus-within .project-preview {
  opacity: 1;
  transform: scale(1);
}

.project-card h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text);
}

.project-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.project-tags {
  gap: 6px;
}

.project-tags .chip {
  padding: 3px 10px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.project-links {
  margin-top: auto;
}

.project-card a {
  margin-top: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.08em;
}

.project-card a:hover {
  text-decoration: underline;
}

.projects-footer {
  margin-top: 24px;
  text-align: center;
}

.projects-footer .btn {
  width: fit-content;
  margin: 0 auto;
}

#contact .contact-card {
  display: grid;
  gap: 18px;
  padding: 34px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(116, 247, 255, 0.28), rgba(255, 95, 156, 0.18));
  border: 1px solid rgba(116, 247, 255, 0.35);
  text-align: center;
  box-shadow: 0 40px 120px -70px rgba(116, 247, 255, 0.8);
}

.status-strip {
  margin-top: 20px;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(9, 9, 20, 0.95), rgba(20, 8, 32, 0.9));
  border: 1px solid rgba(116, 247, 255, 0.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--muted);
}

.status-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-strip-divider {
  width: 1px;
  height: 16px;
  background: rgba(148, 163, 184, 0.3);
}

.spotify-card {
  margin-top: 28px;
  padding: 30px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(6, 10, 28, 0.92), rgba(3, 17, 34, 0.85));
  border: 1px solid rgba(29, 185, 84, 0.45);
  color: #e2fbe8;
  display: grid;
  gap: 16px;
  box-shadow: 0 35px 90px -70px rgba(29, 185, 84, 0.9);
}

.spotify-meta h4 {
  margin: 4px 0 6px;
  font-size: 1.2rem;
  color: #1db954;
}

.spotify-meta p {
  margin: 0;
  color: rgba(226, 251, 232, 0.85);
  font-size: 0.95rem;
}

.spotify-embed {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 170px;
  background: linear-gradient(160deg, rgba(3, 6, 18, 0.95), rgba(6, 14, 12, 0.92));
  border: 1px solid rgba(29, 185, 84, 0.3);
}

.spotify-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 170px;
  border: 0;
  display: block;
  background: transparent;
}

.spotify-launch {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #e2fbe8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.spotify-launch:hover,
.spotify-launch:focus-visible {
  color: #1db954;
}

.spotify-launch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(29, 185, 84, 0.18);
  border: 1px solid rgba(29, 185, 84, 0.45);
  color: #1db954;
  font-size: 0.8rem;
}

.spotify-open-link {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(226, 251, 232, 0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 251, 232, 0.3);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.spotify-open-link:hover {
  color: #1db954;
  border-color: #1db954;
}

.contact-card h3 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  color: #0b1020;
}

.contact-card p {
  margin: 0 auto;
  max-width: 620px;
  color: rgba(15, 23, 42, 0.9);
  font-size: 0.95rem;
}

.contact-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.contact-options a {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.85);
  text-decoration: none;
  color: #020817;
  font-weight: 600;
  font-size: 0.86rem;
  background: rgba(248, 250, 252, 0.98);
  transition: all 0.22s ease;
}

.contact-options a[data-platform='email'] {
  border-color: #c5221f;
  color: #c5221f;
  background: rgba(197, 34, 31, 0.12);
}

.contact-options a[data-platform='linkedin'] {
  border-color: #0a66c2;
  color: #0a66c2;
  background: rgba(10, 102, 194, 0.12);
}

.contact-options a[data-platform='github'] {
  border-color: #0b1020;
  color: #0b1020;
  background: rgba(11, 16, 32, 0.12);
}

.contact-options a[data-platform='medium'] {
  border-color: #00ab6c;
  color: #008757;
  background: rgba(0, 171, 108, 0.12);
}

.contact-options a[data-magnetic] {
  will-change: transform;
}

.contact-options a:not([data-platform]):hover {
  background: #020817;
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.98);
}

.contact-options a[data-platform='email']:hover {
  background: #c5221f;
  color: #fff;
  border-color: #c5221f;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(197, 34, 31, 0.9);
}

.contact-options a[data-platform='linkedin']:hover {
  background: #0a66c2;
  color: #fff;
  border-color: #0a66c2;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(10, 102, 194, 0.75);
}

.contact-options a[data-platform='github']:hover {
  background: #0b1020;
  color: #f8fafc;
  border-color: #0b1020;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(11, 16, 32, 0.8);
}

.contact-options a[data-platform='medium']:hover {
  background: #00ab6c;
  color: #fff;
  border-color: #00ab6c;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(0, 171, 108, 0.65);
}

footer {
  text-align: center;
  padding: 32px 20px 46px;
  font-size: 0.8rem;
  color: var(--muted);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}

.footer-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--accent);
}

.footer-copy {
  margin: 0;
}

.reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.has-js .reveal {
  opacity: 0;
  transform: translateY(40px);
}

html.has-js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Where supported, drive the reveal off the section's own scroll position
   (a native view() timeline) instead of an IntersectionObserver + CSS
   transition. Two wins: the animation runs on the compositor thread
   instead of main-thread JS reacting to scroll, and it's a true
   scroll-linked cross-fade -- content eases in on the way down AND back
   out on the way up, rather than only ever animating once and staying put.
   script.js checks the same CSS.supports() and skips the
   IntersectionObserver entirely when this branch is active, so the
   `.is-visible` class is simply never added and never fights this.

   Uses the standalone `scale`/`filter` properties rather than
   `transform: translateY(...)` deliberately: .section already owns
   `transform` for its independent JS-driven parallax
   (translate3d(0, var(--section-shift), 0)), and an active CSS animation
   completely overrides the static `transform` value for as long as it
   runs -- an earlier translateY-based version of this silently cancelled
   the parallax out for every single reveal section, while the parallax JS
   kept right on computing a value nothing was using. `scale` and `filter`
   composite independently of `transform`, so both effects coexist and
   nothing is animated for nothing. Deliberately opacity + scale only, no
   filter/blur -- that's also a compositor-level effect but a genuinely
   pricier one, and adding it here would cut against the actual goal
   (this exists to fix a reported scroll-lag complaint, not add to it). */
@supports (animation-timeline: view()) {
  html.has-js .reveal {
    opacity: 1;
    transform: translate3d(0, var(--section-shift, 0px), 0);
    transition: none;
    animation: reveal-scrub linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

@keyframes reveal-scrub {
  0% {
    opacity: 0;
    scale: 0.94;
  }
  20%,
  80% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 0.94;
  }
}

@keyframes progressGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes holoSweep {
  0% { transform: translate3d(-4%, 0, 0); }
  50% { transform: translate3d(4%, 0, 0); }
  100% { transform: translate3d(-4%, 0, 0); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes twinkle {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 1; }
}

@keyframes titleGlow {
  0%,100% { filter: drop-shadow(0 0 18px rgba(15,23,42,0.9)); }
  50% { filter: drop-shadow(0 0 30px rgba(116,247,255,0.55)); }
}

@keyframes paragraphRise {
  0% { opacity: 0; transform: translate3d(0, 14px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

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

@keyframes float {
  0%,100% { transform: translate3d(0, -8px, 0) scale(1.02); }
  50% { transform: translate3d(0, 10px, 0) scale(0.98); }
}

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

@keyframes statEntrance {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes haloShift {
  0% {
    transform: translate3d(0, -10px, 0) scale(1);
    filter: blur(12px);
  }
  50% {
    transform: translate3d(30px, 10px, 0) scale(1.05);
    filter: blur(10px);
  }
  100% {
    transform: translate3d(0, -10px, 0) scale(1);
    filter: blur(12px);
  }
}

@keyframes pillGlow {
  0%, 100% {
    opacity: 0.7;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@keyframes highlightPulse {
  0% {
    box-shadow: 0 0 25px rgba(116, 247, 255, 0.08);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 122, 69, 0.35);
  }
  100% {
    box-shadow: 0 0 25px rgba(116, 247, 255, 0.08);
  }
}

@keyframes codeLines {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 0 160px, 0 480px;
  }
}

@keyframes codePulse {
  0%, 100% {
    opacity: 0.35;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 0.75;
    transform: translate3d(12px, -6px, 0) scale(1.02);
  }
}

@keyframes chipPulse {
  0%, 100% {
    box-shadow: 0 6px 26px rgba(255, 255, 255, 0.1), 0 0 0 2px rgba(29, 185, 84, 0.08);
  }
  50% {
    box-shadow: 0 18px 45px rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(255, 122, 69, 0.25);
  }
}

@media (max-width: 900px) {
  header {
    padding: 120px 16px 90px;
  }
  body.detail-page header {
    padding: 120px 16px 70px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    text-align: center;
  }
  .hero-meta,
  .cta-group {
    justify-content: center;
  }
  .hero-trust {
    justify-content: center;
  }
  .detail-hero-grid {
    grid-template-columns: 1fr;
  }
  .detail-hero-card {
    order: 2;
  }
  .section {
    margin: 26px auto;
    padding: 60px 16px;
    border-radius: 22px;
  }
}

@media (max-width: 640px) {
  nav:not(.footer-nav) {
    gap: 10px;
    padding: 10px 12px;
    margin-right: auto;
    /* backdrop-filter re-samples whatever's scrolling behind it every
       frame while sticky-stuck and visible -- cheap on a desktop GPU at
       18px, but mobile GPUs are the ones that actually feel this. The nav
       is on-screen for most of the scroll, so it's the one worth trimming;
       the toggle buttons are tiny circles and not worth bothering with. */
    backdrop-filter: blur(8px);
  }
  .scroll-tracker {
    backdrop-filter: blur(6px);
  }
  .nav-cta {
    position: static;
    justify-content: center;
    margin: 10px auto 0;
  }
  .nav-wordmark {
    /* Desktop reserves padding inside the pill for this; mobile's nav
       reverts to tight, symmetric padding above (no room reserved), and
       screen space is precious enough there that the logo mark isn't
       worth the layout gymnastics -- drop it. */
    display: none;
  }
  .hero-stats {
    margin-top: 18px;
    gap: 10px;
  }
  .glass-card,
  .project-card,
  .skill-card,
  .timeline-item,
  .detail-card,
  .code-panel {
    padding: 18px;
  }
  .code-block {
    max-height: 420px;
  }
  .result-table th,
  .result-table td {
    padding: 8px;
    font-size: 0.8rem;
  }
  .cursor-orb {
    display: none;
  }
}

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

  /* animation-duration has no effect here -- a view() timeline's progress
     is driven by scroll position, not wall-clock time, so the override
     above doesn't neutralize it. Drop the scroll-linked cross-fade
     entirely and land on the plain, always-visible state instead. */
  html.has-js .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Light theme
   Everything above is hand-tuned for a dark background. Only --text, --muted,
   --accent, --accent-2, --accent-soft, and --shadow are actually consumed as
   custom properties elsewhere in this file (verified by grep) -- redefining
   those here covers most text/muted/shadow rules for free. Every other rule
   below is an explicit override for a selector that hardcodes a dark literal
   (a gradient, an rgba(near-black, ...) fill, or light-on-dark text) that
   would otherwise be unreadable or invisible on a light background.
   The Spotify widget and the code-panel/code-block (skin-cancer.html) are
   deliberately left dark in both themes -- they read as embedded, branded
   widgets (a music player, a terminal) rather than page chrome.
   ========================================================================== */

:root[data-theme='light'] {
  --accent: #0e7490;
  --accent-soft: rgba(14, 116, 144, 0.14);
  --accent-2: #c2410c;
  --text: #0f172a;
  --muted: #475569;
  --shadow: 0 24px 60px -34px rgba(51, 65, 85, 0.35);
}

[data-theme='light'] body {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 55%, #f8fafc 100%);
}

[data-theme='light'] .code-lines {
  display: none;
}

[data-theme='light'] .scroll-tracker {
  background: rgba(255, 255, 255, 0.85);
}

[data-theme='light'] .cursor-orb {
  background:
    radial-gradient(circle at 30% 30%, rgba(14, 116, 144, 0.45), transparent 65%),
    radial-gradient(circle at 70% 70%, rgba(192, 132, 252, 0.28), transparent 70%),
    radial-gradient(circle at center, rgba(14, 116, 144, 0.5), transparent 70%);
  mix-blend-mode: multiply;
}

[data-theme='light'] .hero h1 {
  background: linear-gradient(
    130deg,
    rgba(15, 23, 42, 0.95),
    rgba(14, 116, 144, 0.95),
    rgba(194, 65, 12, 0.92)
  );
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme='light'] .hero-panel {
  background: rgba(255, 255, 255, 0.82);
}

[data-theme='light'] .panel-holo {
  mix-blend-mode: normal;
  opacity: 0.3;
}

[data-theme='light'] .hero-badge {
  background: rgba(255, 255, 255, 0.85);
}

[data-theme='light'] .hero-meta {
  color: rgba(15, 23, 42, 0.75);
}

[data-theme='light'] .signal-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
  border-color: rgba(15, 23, 42, 0.1);
}

[data-theme='light'] .signal-card.live-status {
  background: linear-gradient(140deg, rgba(14, 116, 144, 0.12), rgba(255, 255, 255, 0.94));
}

[data-theme='light'] .stat {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
  border-color: rgba(15, 23, 42, 0.1);
}

[data-theme='light'] .build-log-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
  border-color: rgba(15, 23, 42, 0.1);
}

[data-theme='light'] .status-strip {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
  border-color: rgba(15, 23, 42, 0.1);
}

[data-theme='light'] .stack-label {
  color: rgba(15, 23, 42, 0.6);
}

[data-theme='light'] .trust-pill {
  background: rgba(255, 255, 255, 0.85);
  color: rgba(15, 23, 42, 0.78);
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme='light'] .btn-primary {
  border-color: rgba(15, 23, 42, 0.18);
}

[data-theme='light'] .btn-primary:hover {
  background: rgba(255, 255, 255, 0.6);
}

[data-theme='light'] .btn-secondary {
  background: rgba(255, 255, 255, 0.8);
}

[data-theme='light'] .btn-secondary:hover {
  background: rgba(255, 255, 255, 1);
}

[data-theme='light'] nav {
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.97), rgba(241, 245, 249, 0.97));
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 50px -36px rgba(51, 65, 85, 0.4);
}

[data-theme='light'] .section {
  background: radial-gradient(circle at top left, rgba(226, 232, 240, 0.5), rgba(255, 255, 255, 0.96));
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 26px 70px -50px rgba(51, 65, 85, 0.3);
}

[data-theme='light'] .section::after {
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: inset 0 0 25px rgba(51, 65, 85, 0.08);
}

/* Same per-section chapter tint as the dark theme, in a light-appropriate
   pastel register -- these ARE the [data-theme='light'] .section rule
   (equal specificity), so normal source order is enough for them to win;
   no :not() trick needed on this side. */
[data-theme='light'] #about.section {
  background: radial-gradient(circle at top left, rgba(191, 233, 232, 0.55), rgba(255, 255, 255, 0.96));
}

[data-theme='light'] #skills.section {
  background: radial-gradient(circle at top left, rgba(226, 205, 240, 0.5), rgba(255, 255, 255, 0.96));
}

[data-theme='light'] #experience.section {
  background: radial-gradient(circle at top left, rgba(240, 205, 219, 0.5), rgba(255, 255, 255, 0.96));
}

[data-theme='light'] #now.section {
  background: radial-gradient(circle at top left, rgba(240, 224, 191, 0.5), rgba(255, 255, 255, 0.96));
}

[data-theme='light'] #projects.section {
  background: radial-gradient(circle at top left, rgba(197, 219, 240, 0.5), rgba(255, 255, 255, 0.96));
}

[data-theme='light'] #contact.section {
  background: radial-gradient(circle at top left, rgba(235, 205, 232, 0.5), rgba(255, 255, 255, 0.96));
}

[data-theme='light'] .glass-card {
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 20px 60px -34px rgba(51, 65, 85, 0.35),
    0 12px 40px rgba(14, 116, 144, 0.1);
}

[data-theme='light'] .glass-card::after {
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme='light'] .pill {
  background: rgba(14, 116, 144, 0.1);
  mix-blend-mode: normal;
}

[data-theme='light'] .highlight {
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
}

[data-theme='light'] .highlight:hover {
  background: linear-gradient(125deg, rgba(255, 255, 255, 1), rgba(236, 254, 255, 0.95));
}

[data-theme='light'] .skill-card {
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
}

[data-theme='light'] .timeline-item {
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
  border-right-color: rgba(14, 116, 144, 0.2);
}

[data-theme='light'] .timeline-item::before {
  box-shadow: 0 0 10px var(--accent), 0 0 0 4px rgba(248, 250, 252, 0.95);
}

[data-theme='light'] .project-card {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.88));
}

[data-theme='light'] .project-card:hover {
  background: linear-gradient(125deg, rgba(255, 255, 255, 1), rgba(236, 254, 255, 0.95));
}

[data-theme='light'] .language-particles {
  mix-blend-mode: normal;
}

[data-theme='light'] .language-particle {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.15);
  color: rgba(15, 23, 42, 0.75);
  text-shadow: none;
}

[data-theme='light'] .detail-hero-card {
  background: rgba(255, 255, 255, 0.88);
}

[data-theme='light'] .detail-hero-card ul {
  color: rgba(15, 23, 42, 0.82);
}

[data-theme='light'] .detail-label {
  color: rgba(15, 23, 42, 0.6);
}

[data-theme='light'] .detail-meta li {
  color: rgba(15, 23, 42, 0.8);
}

[data-theme='light'] .detail-card {
  background: rgba(255, 255, 255, 0.88);
}

[data-theme='light'] .result-list {
  color: rgba(15, 23, 42, 0.85);
}

[data-theme='light'] .result-table th {
  color: rgba(15, 23, 42, 0.6);
}

[data-theme='light'] .workflow-step {
  background: rgba(255, 255, 255, 0.88);
}

[data-theme='light'] .code-panel {
  /* .code-panel is deliberately kept dark in both themes (see comment
     above). Elements inside it that explicitly reference var(--text) /
     var(--muted) (e.g. p.lead, .btn-secondary) correctly pick up a local
     override of those tokens -- but plain elements with no color rule of
     their own (h2, <code>) merely inherit body's already-resolved color,
     which was computed using the page-level (light) --text and never sees
     this local re-scope. So both fixes are needed: the token re-scope for
     var()-referencing children, plus explicit colors below for the rest. */
  --text: #e2e8f0;
  --muted: #94a3b8;
}

[data-theme='light'] .code-panel h2 {
  color: #e2e8f0;
}

[data-theme='light'] .code-block {
  color: #cbd5e1;
}

[data-theme='light'] .code-panel .btn-secondary {
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
}

/* Theme toggle */

.theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(9, 9, 20, 0.85);
  color: var(--accent);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle .icon-moon {
  display: block;
}

.theme-toggle .icon-sun {
  display: none;
}

[data-theme='light'] .theme-toggle {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme='light'] .theme-toggle .icon-moon {
  display: none;
}

[data-theme='light'] .theme-toggle .icon-sun {
  display: block;
}

/* Galaxy fullscreen toggle */

.galaxy-toggle {
  position: fixed;
  top: 18px;
  right: 70px;
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(9, 9, 20, 0.85);
  color: var(--accent);
  cursor: pointer;
  backdrop-filter: blur(12px);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.galaxy-toggle.is-visible {
  display: inline-flex;
}

.galaxy-toggle:hover,
.galaxy-toggle:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.galaxy-toggle .icon-close {
  display: none;
}

body.is-galaxy-mode .galaxy-toggle .icon-sparkle {
  display: none;
}

body.is-galaxy-mode .galaxy-toggle .icon-close {
  display: block;
}

/* Galaxy fullscreen mode -- clears everything except the WebGL canvas */

body.is-galaxy-mode {
  overflow: hidden;
}

body.is-galaxy-mode .webgl-bg {
  z-index: 60;
}

body.is-galaxy-mode header,
body.is-galaxy-mode nav,
body.is-galaxy-mode .nav-cta,
body.is-galaxy-mode main,
body.is-galaxy-mode footer,
body.is-galaxy-mode .scroll-tracker,
body.is-galaxy-mode .cursor-orb,
body.is-galaxy-mode .code-lines,
body.is-galaxy-mode .language-particles,
body.is-galaxy-mode .background-gradient,
body.is-galaxy-mode .theme-toggle {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

@media (max-width: 640px) {
  .nav-cta {
    right: 18px;
  }
  .theme-toggle {
    top: auto;
    bottom: 18px;
    right: 18px;
  }
  .galaxy-toggle {
    top: auto;
    bottom: 18px;
    right: 70px;
  }
}

/* Command palette */

.command-trigger {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(9, 9, 20, 0.85);
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.command-trigger:hover,
.command-trigger:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: var(--text);
}

.command-trigger kbd {
  font-family: inherit;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.12);
}

[data-theme='light'] .command-trigger {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.12);
}

@media (max-width: 640px) {
  .command-trigger {
    display: none;
  }
}

.command-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
  background: rgba(2, 6, 23, 0.7);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.command-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.command-palette {
  width: min(560px, 100%);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(116, 247, 255, 0.25);
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.99));
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transform: translateY(-16px) scale(0.98);
  transition: transform 0.22s ease;
}

.command-overlay.is-open .command-palette {
  transform: translateY(0) scale(1);
}

.command-input {
  width: 100%;
  padding: 18px 20px;
  border: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
}

.command-input::placeholder {
  color: var(--muted);
}

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

.command-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
}

.command-item .command-item-label {
  color: var(--text);
  font-weight: 500;
}

.command-item .command-item-hint {
  font-size: 0.76rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.command-item.is-active {
  background: rgba(116, 247, 255, 0.12);
}

.command-item.is-active .command-item-label {
  color: var(--accent);
}

.command-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

[data-theme='light'] .command-palette {
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.99));
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme='light'] .command-item.is-active {
  background: rgba(14, 116, 144, 0.1);
}

/* 404 page */

.not-found {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  gap: 18px;
}

.not-found .code {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.not-found h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4rem);
  background: linear-gradient(130deg, rgba(241, 245, 249, 0.95), rgba(116, 247, 255, 0.9), rgba(255, 122, 69, 0.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme='light'] .not-found h1 {
  background: linear-gradient(130deg, rgba(15, 23, 42, 0.95), rgba(14, 116, 144, 0.95), rgba(194, 65, 12, 0.92));
  -webkit-background-clip: text;
  background-clip: text;
}

.not-found p {
  max-width: 480px;
  color: var(--muted);
  font-size: 1.05rem;
}