:root {
  --bg: #030407;
  --ink: #f7f8ff;
  --muted: #b9bed6;
  --line: rgba(244, 241, 232, 0.15);
  --panel: rgba(255, 255, 255, 0.055);
  --panel-strong: rgba(255, 255, 255, 0.1);
  --mint: #27f7ff;
  --coral: #ff4fd8;
  --amber: #8f6bff;
  --cyan: #2aa8ff;
  --violet: #7c4dff;
  --pink: #ff3bd4;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
  --radius: 8px;
  --max: 1180px;
}

@property --border-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --header-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --skill-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --contact-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --footer-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 18%, rgba(39, 247, 255, 0.18), transparent 30rem),
    radial-gradient(circle at 78% 12%, rgba(124, 77, 255, 0.2), transparent 34rem),
    radial-gradient(circle at 88% 58%, rgba(255, 59, 212, 0.14), transparent 32rem),
    linear-gradient(135deg, #020309 0%, #080015 42%, #030407 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: #07100e;
  background: var(--mint);
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: 0.08;
  background-image:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%),
    repeating-radial-gradient(circle at 10% 20%, rgba(255,255,255,0.5) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ffffff 0 18%, var(--mint) 42%, var(--cyan) 100%);
  box-shadow: 0 0 12px rgba(39, 247, 255, 0.74), 0 0 22px rgba(255, 59, 212, 0.18);
}

.cursor-ring {
  --cursor-spin: 0deg;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(247, 248, 255, 0.12);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(39, 247, 255, 0.08), transparent 30%),
    rgba(3, 4, 7, 0.18);
  box-shadow: 0 0 24px rgba(39, 247, 255, 0.12), 0 0 34px rgba(255, 59, 212, 0.08);
  backdrop-filter: blur(2px);
  transition: width 180ms ease, height 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.cursor-ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background:
    conic-gradient(
      from var(--cursor-spin),
      rgba(39, 247, 255, 0.92),
      transparent 82deg,
      rgba(255, 59, 212, 0.72) 136deg,
      transparent 220deg,
      rgba(143, 107, 255, 0.7) 282deg,
      rgba(39, 247, 255, 0.92)
    );
  filter: drop-shadow(0 0 8px rgba(39, 247, 255, 0.32));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
}

.cursor-ring::after {
  content: "";
  position: absolute;
  inset: 27px;
  border: 1px solid rgba(247, 248, 255, 0.2);
  border-radius: inherit;
  background: rgba(3, 4, 7, 0.2);
  box-shadow: inset 0 0 12px rgba(39, 247, 255, 0.12), 0 0 18px rgba(39, 247, 255, 0.14);
}

.cursor-text {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  transform: rotate(var(--cursor-spin));
  transform-origin: 50% 50%;
}

.cursor-text text {
  fill: rgba(247, 248, 255, 0.76);
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.85px;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(3, 4, 7, 0.18);
  stroke-width: 0.55px;
}

.cursor-ring.is-active {
  width: 92px;
  height: 92px;
  border-color: rgba(255, 59, 212, 0.28);
  box-shadow: 0 0 28px rgba(39, 247, 255, 0.18), 0 0 48px rgba(255, 59, 212, 0.16);
}

.cursor-ring.is-active .cursor-text text {
  fill: rgba(223, 252, 255, 0.92);
}

.site-header {
  --header-spin: 0deg;
  position: fixed;
  inset: 18px 18px auto;
  z-index: 50;
  max-width: calc(var(--max) + 40px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(3, 4, 7, 0.72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-140%);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background:
    conic-gradient(
      from var(--header-spin),
      transparent 0deg,
      transparent 44deg,
      rgba(39, 247, 255, 0.86) 62deg,
      rgba(255, 59, 212, 0.76) 82deg,
      transparent 108deg,
      transparent 212deg,
      rgba(42, 168, 255, 0.66) 232deg,
      rgba(143, 107, 255, 0.72) 252deg,
      transparent 282deg,
      transparent 360deg
    );
  opacity: 0.72;
  filter: drop-shadow(0 0 10px rgba(39, 247, 255, 0.24)) drop-shadow(0 0 18px rgba(255, 59, 212, 0.13));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  animation: headerBorderPatrol 7.2s linear infinite;
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(circle at calc(20% + var(--experience-progress, 0) * 20%) 50%, rgba(39, 247, 255, 0.08), transparent 18rem),
    rgba(3, 4, 7, 0.34);
  pointer-events: none;
}

.site-header.is-docked {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-header.is-docked::before {
  opacity: 0.95;
}

.brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
}

.brand-logo {
  width: clamp(132px, 13vw, 190px);
  height: 42px;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(244, 241, 232, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.nav-links a,
.header-cta {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  transition: color 180ms ease, background 180ms ease;
}

.nav-links a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

.header-cta {
  --border-spin: 0deg;
  justify-self: end;
  color: #f7fbff;
  text-shadow: 0 0 10px rgba(39, 247, 255, 0.26);
  background:
    linear-gradient(135deg, rgba(39, 247, 255, 0.055), rgba(255, 59, 212, 0.035)),
    rgba(3, 4, 7, 0.58);
  box-shadow: 0 0 16px rgba(39, 247, 255, 0.12), 0 0 24px rgba(255, 59, 212, 0.075);
  overflow: hidden;
  position: relative;
}

.header-cta::before {
  content: "";
  position: absolute;
  inset: -45% -65%;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.2), transparent 64%);
  transform: translateX(-76%) skewX(-18deg);
  animation: ctaShine 3.4s ease-in-out infinite;
}

.header-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background:
    conic-gradient(
      from var(--border-spin),
      transparent 0deg,
      transparent 42deg,
      rgba(39, 247, 255, 0.95) 60deg,
      rgba(255, 59, 212, 0.86) 78deg,
      transparent 104deg,
      transparent 222deg,
      rgba(42, 168, 255, 0.74) 238deg,
      rgba(143, 107, 255, 0.72) 254deg,
      transparent 282deg,
      transparent 360deg
    );
  border-radius: inherit;
  filter: drop-shadow(0 0 8px rgba(39, 247, 255, 0.32)) drop-shadow(0 0 14px rgba(255, 59, 212, 0.16));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  animation: borderPatrol 5.2s linear infinite;
}

.header-cta:hover {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(39, 247, 255, 0.09), rgba(255, 59, 212, 0.065)),
    rgba(3, 4, 7, 0.66);
  box-shadow: 0 0 22px rgba(39, 247, 255, 0.22), 0 0 34px rgba(255, 59, 212, 0.13);
}

.hero {
  --beam-x: 0px;
  --beam-y: 0px;
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  max-width: min(1440px, calc(100vw - 44px));
  margin: 0 auto;
  padding: 64px 0 54px;
}

#hero-canvas {
  position: absolute;
  inset: 0 calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  z-index: -2;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto calc(50% - 50vw) 0;
  height: 44%;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 9, 8, 0.94), transparent);
}

.hero::before {
  content: "";
  position: absolute;
  right: calc(min(-5vw, -18px) + var(--beam-x));
  top: calc(-12% + var(--beam-y));
  width: min(68vw, 880px);
  height: 126%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 48% 45%, rgba(247, 248, 255, 0.08) 0 4%, transparent 20%),
    radial-gradient(ellipse at 42% 48%, rgba(39, 247, 255, 0.15) 0 9%, transparent 36%),
    radial-gradient(ellipse at 56% 48%, rgba(255, 59, 212, 0.12) 0 12%, transparent 42%),
    radial-gradient(ellipse at 70% 48%, rgba(124, 77, 255, 0.13) 0 14%, transparent 48%),
    linear-gradient(112deg, transparent 0 22%, rgba(39, 247, 255, 0.09) 38%, rgba(255, 59, 212, 0.075) 54%, rgba(124, 77, 255, 0.085) 68%, transparent 88%);
  filter: blur(34px);
  opacity: 0.58;
  mix-blend-mode: screen;
  transform: rotate(9deg) skewX(-7deg);
  animation: solarDrift 9s ease-in-out infinite;
  transition: right 480ms cubic-bezier(0.16, 1, 0.3, 1), top 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-content {
  width: 100%;
  max-width: 1240px;
}

.eyebrow,
.section-kicker {
  margin: 0 0 18px;
  color: var(--mint);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.hero-title {
  position: relative;
  max-width: 1240px;
  margin: 0;
  font-size: clamp(56px, 7.15vw, 124px);
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
  filter: drop-shadow(0 0 22px rgba(42, 168, 255, 0.08));
  user-select: none;
}

.hero-title::after {
  content: "";
  position: absolute;
  inset: -0.18em -0.12em -0.08em;
  z-index: -1;
  border-radius: 24px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
  background:
    radial-gradient(ellipse at 16% 18%, rgba(var(--easter-glow-a, 39, 247, 255), 0.2), transparent 32%),
    radial-gradient(ellipse at 76% 62%, rgba(var(--easter-glow-b, 255, 59, 212), 0.16), transparent 38%),
    linear-gradient(
      115deg,
      rgba(var(--easter-glow-a, 39, 247, 255), 0.12),
      rgba(var(--easter-glow-c, 124, 77, 255), 0.08),
      rgba(var(--easter-glow-b, 255, 59, 212), 0.1)
    );
  filter: blur(22px) saturate(1.25);
  transition: opacity 480ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-title.is-easter-active::after {
  opacity: 0.82;
  transform: scale(1);
}

.hero-title.is-easter-active .title-line span {
  background-size: 180% 100%;
  filter:
    drop-shadow(0 0 18px rgba(var(--easter-glow-a, 39, 247, 255), 0.2))
    drop-shadow(0 0 32px rgba(var(--easter-glow-b, 255, 59, 212), 0.12));
}

html.sound-easter-active .hero::before {
  opacity: 0.82;
  filter: blur(30px) saturate(1.25);
}

.title-line {
  display: block;
  overflow: visible;
  padding: 0.01em 0 0.08em;
  margin: 0;
}

html.js-ready .title-line {
  overflow: hidden;
}

html.js-ready .hero-title.is-settled .title-line {
  overflow: visible;
}

html.js-ready .title-line span {
  display: block;
  padding: 0.01em 0 0.09em;
  margin: -0.01em 0 -0.09em;
  color: transparent;
  background: linear-gradient(115deg, #f7f8ff 0%, #f7f8ff 36%, #dffaff 48%, #8defff 58%, #ffd7fb 70%, #f7f8ff 84%);
  background-size: 260% 100%;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  transform: translateY(112%) rotate(3deg);
  transform-origin: left bottom;
}

html.js-ready .hero-title.is-visible .title-line span {
  animation: titleRise 980ms cubic-bezier(0.16, 1, 0.3, 1) forwards, titleGlow 18s ease-in-out 0.45s infinite;
}

html.js-ready .hero-title.is-visible .title-line:nth-child(2) span {
  animation-delay: 120ms, 0.7s;
}

html.js-ready .hero-title.is-visible .title-line:nth-child(3) span {
  animation-delay: 240ms, 0.95s;
}

.hero-copy {
  max-width: 940px;
  margin: 32px 0 0;
  color: rgba(244, 241, 232, 0.78);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.55;
}

.hero-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  --border-spin: 0deg;
  position: relative;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid rgba(244, 241, 232, 0.16);
  border-radius: 999px;
  overflow: hidden;
  font-weight: 800;
  isolation: isolate;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-104%);
  background: rgba(255, 255, 255, 0.16);
  transition: transform 300ms ease;
}

.button:hover::before {
  transform: translateX(0);
}

.button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button.primary {
  color: #f7fbff;
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(39, 247, 255, 0.055), rgba(42, 168, 255, 0.035) 48%, rgba(255, 59, 212, 0.06)),
    rgba(3, 4, 7, 0.58);
  box-shadow: 0 0 18px rgba(39, 247, 255, 0.12), 0 0 28px rgba(255, 59, 212, 0.08);
  text-shadow: 0 0 10px rgba(39, 247, 255, 0.24);
}

.button.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background:
    conic-gradient(
      from var(--border-spin),
      transparent 0deg,
      transparent 40deg,
      rgba(39, 247, 255, 0.98) 58deg,
      rgba(255, 59, 212, 0.88) 78deg,
      transparent 106deg,
      transparent 214deg,
      rgba(42, 168, 255, 0.76) 232deg,
      rgba(143, 107, 255, 0.74) 250deg,
      transparent 280deg,
      transparent 360deg
    );
  filter: drop-shadow(0 0 8px rgba(39, 247, 255, 0.34)) drop-shadow(0 0 14px rgba(255, 59, 212, 0.18));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  animation: borderPatrol 4.8s linear infinite;
}

.button.primary:hover {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(39, 247, 255, 0.09), rgba(42, 168, 255, 0.055) 48%, rgba(255, 59, 212, 0.095)),
    rgba(3, 4, 7, 0.68);
  box-shadow: 0 0 24px rgba(39, 247, 255, 0.22), 0 0 40px rgba(255, 59, 212, 0.13);
}

.button.ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
}

.pulse {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(39, 247, 255, 0.7);
  animation: pulse 1.8s infinite;
}

.scroll-cue {
  position: absolute;
  left: max(0px, calc((100% - 1440px) / 2));
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(244, 241, 232, 0.58);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  transform: translateX(0);
}

.scroll-cue p {
  margin: 0;
}

.scroll-cue span {
  width: 42px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  animation: cue 1.8s ease-in-out infinite;
}

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px 22px;
}

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

.intro-band {
  border-top: 1px solid var(--line);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.65fr);
  gap: 44px;
  align-items: start;
}

.intro-grid h2,
.section-heading h2,
.contact-inner h2 {
  margin: 0;
  font-size: clamp(36px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.intro-copy p,
.contact-inner p {
  margin: 0 0 18px;
  color: rgba(244, 241, 232, 0.72);
  font-size: 18px;
  line-height: 1.7;
}

.experience-section {
  --experience-progress: 0;
  position: relative;
  overflow: hidden;
}

.experience-section .section-heading {
  margin-bottom: 30px;
}

.experience-section .section-heading h2 {
  max-width: 920px;
  font-size: clamp(34px, 5vw, 64px);
}

.experience-section::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(39, 247, 255, 0.86), rgba(255, 59, 212, 0.72), transparent);
  transform: scaleX(var(--experience-progress));
  transform-origin: left center;
}

.experience-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.experience-card {
  --mx: 50%;
  --my: 50%;
  --border-spin: 0deg;
  position: relative;
  min-height: 172px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(39, 247, 255, 0.12), transparent 17rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018));
  cursor: pointer;
  outline: none;
  transition:
    min-height 680ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 360ms ease,
    background 520ms ease;
}

.experience-card:nth-child(-n + 2) {
  grid-column: 1 / -1;
}

.experience-card.compact {
  min-height: 150px;
}

.experience-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    conic-gradient(
      from var(--border-spin),
      transparent 0deg,
      transparent 38deg,
      rgba(39, 247, 255, 0.95) 58deg,
      rgba(255, 59, 212, 0.92) 78deg,
      transparent 104deg,
      transparent 198deg,
      rgba(42, 168, 255, 0.78) 222deg,
      rgba(143, 107, 255, 0.86) 242deg,
      transparent 272deg,
      transparent 360deg
    );
  opacity: 0.72;
  filter: drop-shadow(0 0 10px rgba(39, 247, 255, 0.32)) drop-shadow(0 0 18px rgba(255, 59, 212, 0.18));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  animation: borderPatrol 5.4s linear infinite;
  transition: opacity 360ms ease, filter 360ms ease;
}

.experience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.095) 48%, transparent 56%),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: auto, 100% 10px;
  opacity: 0.18;
  transform: translateX(-22%);
  transition: opacity 260ms ease, transform 480ms ease;
  pointer-events: none;
}

.experience-card:hover,
.experience-card:focus-visible,
.experience-card.is-active {
  min-height: 330px;
  transform: translateY(-7px);
  border-color: rgba(39, 247, 255, 0.36);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(39, 247, 255, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(39, 247, 255, 0.11), rgba(255, 59, 212, 0.085) 54%, rgba(255, 255, 255, 0.035));
}

.experience-card:hover::before,
.experience-card:focus-visible::before,
.experience-card.is-active::before {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(39, 247, 255, 0.54)) drop-shadow(0 0 24px rgba(255, 59, 212, 0.34));
}

.experience-card:hover::after,
.experience-card:focus-visible::after,
.experience-card.is-active::after {
  opacity: 0.82;
  transform: translateX(0);
}

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

.experience-summary {
  display: flex;
  min-height: 170px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
}

.experience-company,
.experience-summary time,
.experience-tags span {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.experience-company {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--coral);
}

.experience-summary time {
  color: var(--muted);
  white-space: nowrap;
}

.experience-summary h3 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(26px, 4.5vw, 58px);
  line-height: 0.98;
  letter-spacing: 0;
}

.experience-card:not(:first-child) .experience-summary h3 {
  font-size: clamp(24px, 3vw, 36px);
}

.experience-details {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(260px, 1fr);
  gap: 24px 34px;
  max-height: 0;
  padding: 0 28px;
  opacity: 0;
  transform: translateY(18px);
  transition:
    max-height 760ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 380ms ease 90ms,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.experience-card:hover .experience-details,
.experience-card:focus-visible .experience-details,
.experience-card.is-active .experience-details {
  max-height: 520px;
  padding-bottom: 28px;
  opacity: 1;
  transform: translateY(0);
}

.experience-card.compact:hover .experience-details,
.experience-card.compact:focus-visible .experience-details,
.experience-card.compact.is-active .experience-details {
  max-height: 320px;
}

.experience-card p,
.experience-card li {
  color: rgba(244, 241, 232, 0.7);
  line-height: 1.62;
}

.experience-card p {
  margin: 0;
  font-size: 17px;
}

.experience-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 8px;
}

.experience-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(247, 248, 255, 0.14);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(3, 4, 7, 0.46);
}

.experience-card ul {
  display: grid;
  grid-column: 1 / -1;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.experience-card li {
  position: relative;
  padding-left: 20px;
}

.experience-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 2px;
  background: var(--mint);
  box-shadow: 0 0 12px rgba(39, 247, 255, 0.52);
}

.marquee-section {
  max-width: none;
  padding: 26px 0 92px;
  overflow: hidden;
}

.marquee-shell {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 38px) 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.marquee-shell::before,
.marquee-shell::after {
  content: none;
}

.marquee-lanes::before,
.marquee-lanes::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: min(18vw, 180px);
  pointer-events: none;
}

.marquee-lanes::before {
  left: 0;
  background: linear-gradient(90deg, rgba(3, 4, 7, 0.58), rgba(3, 4, 7, 0));
}

.marquee-lanes::after {
  right: 0;
  background: linear-gradient(270deg, rgba(3, 4, 7, 0.58), rgba(3, 4, 7, 0));
}

.marquee-heading {
  position: relative;
  z-index: 4;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 22px 20px;
}

.marquee-heading h2 {
  margin: 0;
  color: var(--mint);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.marquee-lanes {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  padding-block: 2px;
}

.marquee {
  display: flex;
  width: 100%;
  background: transparent;
}

.marquee.reverse .marquee-track {
  animation-direction: reverse;
  animation-duration: 30s;
}

.marquee-track {
  display: flex;
  min-width: max-content;
  gap: 12px;
  animation: marquee 34s linear infinite;
}

.marquee-track span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid rgba(244, 241, 232, 0.14);
  border-radius: 999px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(39, 247, 255, 0.11), rgba(255, 59, 212, 0.075)),
    rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.035), 0 10px 28px rgba(0, 0, 0, 0.16);
  font-size: clamp(18px, 3vw, 34px);
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
}

.marquee-track span::before {
  content: "";
  position: absolute;
  inset: -35% -45%;
  z-index: -1;
  background: linear-gradient(110deg, transparent 36%, rgba(39, 247, 255, 0.16), rgba(255, 59, 212, 0.12), transparent 64%);
  opacity: 0.72;
  transform: translateX(62%) skewX(-18deg);
  animation: pillShineLeft 6.8s ease-in-out infinite;
}

.marquee.reverse .marquee-track span::before {
  transform: translateX(-62%) skewX(-18deg);
  animation-name: pillShineRight;
  animation-delay: -2.2s;
}

.marquee.reverse .marquee-track span {
  color: rgba(247, 248, 255, 0.88);
  background:
    linear-gradient(135deg, rgba(143, 107, 255, 0.12), rgba(42, 168, 255, 0.08)),
    rgba(255, 255, 255, 0.035);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(160px, 0.36fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-bottom: 42px;
}

.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.skill-tile {
  --skill-spin: 0deg;
  position: relative;
  min-height: 310px;
  padding: 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  overflow: hidden;
  isolation: isolate;
  transition: background 220ms ease, transform 220ms ease;
}

.skill-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  background:
    conic-gradient(
      from var(--skill-spin),
      transparent 0deg,
      transparent 40deg,
      rgba(39, 247, 255, 0.72) 58deg,
      rgba(255, 59, 212, 0.66) 78deg,
      transparent 108deg,
      transparent 220deg,
      rgba(143, 107, 255, 0.62) 242deg,
      transparent 270deg,
      transparent 360deg
    );
  opacity: 0.5;
  filter: drop-shadow(0 0 10px rgba(39, 247, 255, 0.2));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  animation: skillBorderPatrol 7.8s linear infinite;
  transition: opacity 260ms ease, filter 260ms ease;
}

.skill-tile:nth-child(2)::before {
  animation-delay: -1.7s;
}

.skill-tile:nth-child(3)::before {
  animation-delay: -3.4s;
}

.skill-tile:nth-child(4)::before {
  animation-delay: -5.1s;
}

.skill-tile:hover {
  transform: translateY(-6px);
  background: linear-gradient(180deg, rgba(111, 255, 215, 0.11), rgba(255, 255, 255, 0.03));
}

.skill-tile:hover::before {
  opacity: 0.95;
  filter: drop-shadow(0 0 14px rgba(39, 247, 255, 0.4)) drop-shadow(0 0 22px rgba(255, 59, 212, 0.22));
}

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

.skill-tile span,
.project-panel p {
  color: var(--coral);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.skill-tile h3,
.timeline-item h3,
.project-panel h3 {
  margin: 54px 0 14px;
  font-size: 24px;
  line-height: 1.1;
}

.skill-tile p,
.timeline-item p,
.project-panel span {
  margin: 0;
  color: rgba(244, 241, 232, 0.68);
  line-height: 1.6;
}

.timeline {
  --timeline-progress: 0;
  --timeline-orb-opacity: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.timeline-line {
  position: absolute;
  left: 31px;
  right: calc(33.333% - 42px);
  top: 29px;
  height: 1px;
  overflow: visible;
  background: rgba(244, 241, 232, 0.12);
}

.timeline-line::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--timeline-progress) * 100%);
  background: linear-gradient(90deg, var(--mint), var(--coral), var(--amber));
  box-shadow: 0 0 18px rgba(39, 247, 255, 0.26), 0 0 26px rgba(255, 59, 212, 0.18);
}

.timeline-line::after {
  content: "";
  position: absolute;
  left: calc(var(--timeline-progress) * 100%);
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0 18%, var(--mint) 19% 42%, rgba(255, 59, 212, 0.72) 58%, transparent 70%);
  box-shadow: 0 0 18px rgba(39, 247, 255, 0.72), 0 0 34px rgba(255, 59, 212, 0.36);
  opacity: var(--timeline-orb-opacity);
  transform: translate(-50%, -50%);
}

.timeline-item {
  --node-color: var(--mint);
  --node-rgb: 39, 247, 255;
  position: relative;
  min-height: 260px;
  padding: 58px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  overflow: hidden;
  transition: border-color 320ms ease, background 320ms ease, transform 320ms ease;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 22px;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(var(--node-rgb), 0.7);
  border-radius: 999px;
  background: rgba(3, 4, 7, 0.95);
  box-shadow: inset 0 0 0 4px rgba(3, 4, 7, 0.94), 0 0 0 1px rgba(var(--node-rgb), 0.22);
  transition: background 360ms ease, border-color 360ms ease, box-shadow 360ms ease, transform 360ms ease;
}

.timeline-item::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 9px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--node-rgb), 0.32), transparent 64%);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.72);
  transition: opacity 360ms ease, transform 360ms ease;
}

.timeline-item:nth-child(3)::before {
  --node-color: var(--coral);
  --node-rgb: 255, 59, 212;
}

.timeline-item:nth-child(4)::before {
  --node-color: var(--amber);
  --node-rgb: 143, 107, 255;
}

.timeline-item:nth-child(3),
.timeline-item:nth-child(3)::after {
  --node-color: var(--coral);
  --node-rgb: 255, 59, 212;
}

.timeline-item:nth-child(4),
.timeline-item:nth-child(4)::after {
  --node-color: var(--amber);
  --node-rgb: 143, 107, 255;
}

.timeline-item.is-lit {
  border-color: rgba(var(--node-rgb), 0.34);
  background:
    radial-gradient(circle at 16% 10%, rgba(var(--node-rgb), 0.13), transparent 14rem),
    rgba(255, 255, 255, 0.05);
  transform: translateY(-4px);
}

.timeline-item.is-lit::before {
  border: 3px solid var(--bg);
  background: var(--node-color);
  box-shadow: 0 0 0 1px rgba(var(--node-rgb), 0.82), 0 0 28px rgba(var(--node-rgb), 0.58);
  transform: scale(1.12);
}

.timeline-item.is-lit::after {
  opacity: 1;
  transform: scale(1);
}

.timeline-item time {
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.timeline-item h3 {
  margin-top: 18px;
}

.work-section {
  max-width: none;
  padding-inline: 0;
}

.work-section .section-heading {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 22px;
}

.work-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(310px, 34vw);
  gap: 18px;
  overflow-x: auto;
  padding: 0 max(22px, calc((100vw - var(--max)) / 2)) 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.project-panel {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  scroll-snap-align: start;
  overflow: hidden;
}

.project-panel.featured {
  grid-column: span 2;
  min-width: min(700px, 86vw);
  background:
    linear-gradient(135deg, rgba(111, 255, 215, 0.12), transparent 42%),
    linear-gradient(225deg, rgba(255, 111, 97, 0.16), transparent 40%),
    rgba(255, 255, 255, 0.055);
}

.panel-visual {
  position: relative;
  height: 220px;
  border: 1px solid rgba(244, 241, 232, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    radial-gradient(circle at 24% 38%, rgba(111, 255, 215, 0.34), transparent 10rem),
    radial-gradient(circle at 76% 62%, rgba(255, 111, 97, 0.28), transparent 11rem);
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.panel-visual span {
  position: absolute;
  width: 120px;
  aspect-ratio: 1;
  border: 1px solid rgba(244, 241, 232, 0.18);
  border-radius: 50%;
  animation: float 7s ease-in-out infinite;
}

.panel-visual span:nth-child(1) {
  left: 10%;
  top: 18%;
  background: rgba(111, 255, 215, 0.12);
}

.panel-visual span:nth-child(2) {
  right: 18%;
  top: 24%;
  animation-delay: -2s;
  background: rgba(255, 211, 107, 0.1);
}

.panel-visual span:nth-child(3) {
  left: 42%;
  bottom: -20%;
  animation-delay: -4s;
  background: rgba(131, 214, 255, 0.1);
}

.mini-visual {
  height: 210px;
  border: 1px solid rgba(244, 241, 232, 0.12);
  border-radius: var(--radius);
}

.mini-visual.code {
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(111, 255, 215, 0.7) 18px 21px, transparent 21px 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 18px);
}

.mini-visual.ui {
  background:
    linear-gradient(135deg, rgba(255, 111, 97, 0.28), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 42px);
}

.mini-visual.data {
  background:
    radial-gradient(circle, rgba(255, 211, 107, 0.8) 0 3px, transparent 4px) 0 0 / 34px 34px,
    linear-gradient(135deg, rgba(131, 214, 255, 0.18), rgba(255,255,255,0.02));
}

.contact-section {
  padding-top: 48px;
  padding-bottom: 34px;
}

.contact-inner {
  --contact-spin: 0deg;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
  margin-inline: auto;
  padding: clamp(22px, 3.4vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(39, 247, 255, 0.18), transparent 26rem),
    radial-gradient(ellipse at 88% 12%, rgba(255, 59, 212, 0.14), transparent 28rem),
    linear-gradient(135deg, rgba(39, 247, 255, 0.08), transparent 40%),
    linear-gradient(225deg, rgba(255, 59, 212, 0.07), transparent 38%),
    rgba(255, 255, 255, 0.045);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(247, 248, 255, 0.08);
}

.contact-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    conic-gradient(
      from var(--contact-spin),
      transparent 0deg,
      transparent 48deg,
      rgba(39, 247, 255, 0.7) 68deg,
      rgba(255, 59, 212, 0.58) 88deg,
      transparent 118deg,
      transparent 235deg,
      rgba(143, 107, 255, 0.54) 258deg,
      transparent 288deg,
      transparent 360deg
    );
  opacity: 0.62;
  filter: drop-shadow(0 0 16px rgba(39, 247, 255, 0.16));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  animation: contactBorderPatrol 9s linear infinite;
}

.contact-inner::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(244, 241, 232, 0.1);
  border-radius: var(--radius);
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(247, 248, 255, 0.055) 48%, transparent 58%);
  opacity: 0.7;
  pointer-events: none;
}

.contact-inner p {
  max-width: 660px;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
}

.contact-copy,
.contact-form {
  position: relative;
  z-index: 1;
}

.contact-copy {
  max-width: 940px;
}

.contact-inner h2 {
  max-width: 900px;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1;
  background: linear-gradient(115deg, #f7f8ff 0%, #f7f8ff 46%, #9ff6ff 68%, #ffd6fa 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(39, 247, 255, 0.08));
}

.contact-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  max-width: none;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(244, 241, 232, 0.1);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(39, 247, 255, 0.06), rgba(255, 59, 212, 0.045)),
    rgba(3, 4, 7, 0.28);
  box-shadow: inset 0 1px 0 rgba(247, 248, 255, 0.07), 0 18px 48px rgba(0, 0, 0, 0.2);
}

.contact-form::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(39, 247, 255, 0.82), rgba(255, 59, 212, 0.62), transparent);
  opacity: 0.72;
  pointer-events: none;
}

.contact-form label {
  position: relative;
  display: grid;
  gap: 6px;
}

.contact-form label.full {
  grid-column: 1 / -1;
}

.contact-form span {
  color: var(--mint);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(244, 241, 232, 0.17);
  border-radius: var(--radius);
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(39, 247, 255, 0.075), rgba(255, 59, 212, 0.045)),
    rgba(3, 4, 7, 0.56);
  font: inherit;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(247, 248, 255, 0.045);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

.contact-form label::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(39, 247, 255, 0.7), rgba(255, 59, 212, 0.56), transparent);
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.contact-form label:focus-within::after {
  opacity: 1;
  transform: scaleX(1);
}

.contact-form input {
  min-height: 42px;
  padding: 0 15px;
}

.contact-form textarea {
  min-height: 100px;
  resize: vertical;
  padding: 13px 15px;
}

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

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(39, 247, 255, 0.48);
  background:
    linear-gradient(135deg, rgba(39, 247, 255, 0.085), rgba(255, 59, 212, 0.055)),
    rgba(3, 4, 7, 0.58);
  box-shadow: 0 0 0 3px rgba(39, 247, 255, 0.09), 0 0 28px rgba(39, 247, 255, 0.08);
  transform: translateY(-1px);
}

.contact-form label:focus-within span {
  color: #f7f8ff;
}

.contact-form .button {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  min-width: 190px;
  height: 46px;
  min-height: 46px;
  border: 0;
  cursor: pointer;
}

.contact-form .button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.form-status {
  position: relative;
  grid-column: 2;
  justify-self: stretch;
  align-self: center;
  min-height: 46px;
  margin: 0;
  padding: 10px 14px 10px 34px;
  border: 1px solid rgba(244, 241, 232, 0.11);
  border-radius: var(--radius);
  color: rgba(247, 248, 255, 0.78);
  background:
    linear-gradient(135deg, rgba(39, 247, 255, 0.06), rgba(255, 59, 212, 0.045)),
    rgba(3, 4, 7, 0.5);
  box-shadow: inset 0 1px 0 rgba(247, 248, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.18);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  pointer-events: none;
}

.form-status:not(:empty) {
  opacity: 1;
  transform: translateY(0);
}

.form-status::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 14px rgba(247, 248, 255, 0.18);
  transform: translateY(-50%);
}

.form-status[data-state="success"] {
  border-color: rgba(39, 247, 255, 0.28);
  color: #dffcff;
  box-shadow: inset 0 1px 0 rgba(247, 248, 255, 0.08), 0 0 26px rgba(39, 247, 255, 0.11);
}

.form-status[data-state="success"]::before {
  background: var(--mint);
  box-shadow: 0 0 16px rgba(39, 247, 255, 0.58);
}

.form-status[data-state="loading"]::before {
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(42, 168, 255, 0.5);
  animation: statusPulse 900ms ease-in-out infinite;
}

.form-status[data-state="error"] {
  border-color: rgba(255, 59, 212, 0.28);
  color: #ffe6fb;
  box-shadow: inset 0 1px 0 rgba(247, 248, 255, 0.08), 0 0 26px rgba(255, 59, 212, 0.11);
}

.form-status[data-state="error"]::before {
  background: var(--pink);
  box-shadow: 0 0 16px rgba(255, 59, 212, 0.52);
}

.site-footer {
  --footer-spin: 0deg;
  position: relative;
  max-width: var(--max);
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto 22px;
  padding: 18px 20px;
  border: 1px solid rgba(244, 241, 232, 0.08);
  border-radius: var(--radius);
  color: var(--muted);
  background:
    radial-gradient(ellipse at 10% 50%, rgba(39, 247, 255, 0.09), transparent 22rem),
    radial-gradient(ellipse at 88% 0%, rgba(255, 59, 212, 0.07), transparent 20rem),
    rgba(255, 255, 255, 0.032);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(247, 248, 255, 0.06);
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    conic-gradient(
      from var(--footer-spin),
      transparent 0deg,
      transparent 42deg,
      rgba(39, 247, 255, 0.76) 62deg,
      rgba(255, 59, 212, 0.62) 82deg,
      transparent 112deg,
      transparent 222deg,
      rgba(42, 168, 255, 0.56) 242deg,
      rgba(143, 107, 255, 0.58) 262deg,
      transparent 292deg,
      transparent 360deg
    );
  filter: drop-shadow(0 0 10px rgba(39, 247, 255, 0.15)) drop-shadow(0 0 16px rgba(255, 59, 212, 0.1));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  animation: footerBorderPatrol 8.2s linear infinite;
}

.footer-identity {
  min-width: 0;
}

.site-footer p {
  margin: 6px 0 0;
  color: rgba(247, 248, 255, 0.56);
  font-size: 13px;
  font-weight: 700;
}

.site-footer a,
.footer-brand {
  color: var(--ink);
  font-weight: 800;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
}

.footer-brand img {
  width: clamp(132px, 12vw, 172px);
  height: 38px;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.footer-links a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(244, 241, 232, 0.12);
  border-radius: 999px;
  color: rgba(247, 248, 255, 0.72);
  background:
    linear-gradient(135deg, rgba(39, 247, 255, 0.035), rgba(255, 59, 212, 0.025)),
    rgba(255, 255, 255, 0.035);
  font-size: 13px;
  font-weight: 800;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.footer-links a:hover {
  color: var(--ink);
  border-color: rgba(39, 247, 255, 0.32);
  background:
    linear-gradient(135deg, rgba(39, 247, 255, 0.08), rgba(255, 59, 212, 0.055)),
    rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 20px rgba(39, 247, 255, 0.08);
  transform: translateY(-1px);
}

html.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 720ms ease, transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 12px rgba(39, 247, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(39, 247, 255, 0);
  }
}

@keyframes ctaHop {
  0%,
  72%,
  100% {
    transform: translateY(0) scale(1);
  }
  78% {
    transform: translateY(-4px) scale(1.035);
  }
  84% {
    transform: translateY(0) scale(0.99);
  }
  90% {
    transform: translateY(-2px) scale(1.018);
  }
}

@keyframes ctaShine {
  0%,
  58% {
    transform: translateX(-76%) skewX(-18deg);
  }
  86%,
  100% {
    transform: translateX(76%) skewX(-18deg);
  }
}

@keyframes cue {
  50% {
    transform: scaleX(1.55);
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes pillShineLeft {
  0%,
  55% {
    transform: translateX(62%) skewX(-18deg);
  }
  100% {
    transform: translateX(-62%) skewX(-18deg);
  }
}

@keyframes pillShineRight {
  0%,
  55% {
    transform: translateX(-62%) skewX(-18deg);
  }
  100% {
    transform: translateX(62%) skewX(-18deg);
  }
}

@keyframes float {
  50% {
    transform: translate3d(18px, -18px, 0) scale(1.08);
  }
}

@keyframes borderPatrol {
  to {
    --border-spin: 360deg;
  }
}

@keyframes headerBorderPatrol {
  to {
    --header-spin: 360deg;
  }
}

@keyframes skillBorderPatrol {
  to {
    --skill-spin: 360deg;
  }
}

@keyframes contactBorderPatrol {
  to {
    --contact-spin: 360deg;
  }
}

@keyframes footerBorderPatrol {
  to {
    --footer-spin: 360deg;
  }
}

@keyframes statusPulse {
  50% {
    opacity: 0.45;
    transform: translateY(-50%) scale(0.78);
  }
}

@keyframes solarDrift {
  50% {
    opacity: 0.72;
    transform: rotate(7deg) skewX(-7deg) translate3d(-18px, 12px, 0) scale(1.04);
  }
}

@keyframes titleRise {
  to {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes titleGlow {
  0%,
  100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 0 rgba(39, 247, 255, 0));
  }
  45%,
  55% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 18px rgba(39, 247, 255, 0.1)) drop-shadow(0 0 28px rgba(255, 59, 212, 0.08));
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav-links {
    display: none;
  }

  .hero,
  .intro-grid,
  .contact-inner,
  .section-heading {
    grid-template-columns: 1fr;
  }

  .experience-stage {
    grid-template-columns: 1fr;
  }

  .marquee-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stack-grid,
  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline-line {
    display: none;
  }
}

@media (min-width: 981px) {
  .contact-inner {
    grid-template-columns: minmax(320px, 0.86fr) minmax(520px, 1.14fr);
    align-items: stretch;
  }

  .contact-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 520px;
    min-height: 100%;
  }

  .contact-inner h2 {
    max-width: 520px;
  }

  .contact-form {
    align-self: stretch;
    align-content: start;
  }
}

@media (max-width: 680px) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }

  .site-header {
    inset: 10px 10px auto;
    padding: 10px;
  }

  .brand-logo {
    width: 112px;
    height: 38px;
  }

  .header-cta {
    min-height: 34px;
    padding-inline: 12px;
  }

  .hero {
    min-height: 100svh;
    align-items: center;
    padding-top: 70px;
    padding-bottom: 82px;
  }

  @supports (min-height: 100dvh) {
    .hero {
      min-height: 100dvh;
    }
  }

  .hero-title {
    font-size: clamp(31px, 9.6vw, 46px);
    line-height: 1.06;
  }

  .hero-copy {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.52;
  }

  .scroll-cue {
    left: 22px;
    bottom: 18px;
  }

  .hero-actions,
  .contact-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .hero-actions {
    margin-top: 40px;
  }

  .button {
    width: 100%;
  }

  .stack-grid,
  .timeline {
    grid-template-columns: 1fr;
  }

  .experience-card {
    min-height: 150px;
  }

  .experience-card:hover,
  .experience-card:focus-visible,
  .experience-card.is-active {
    min-height: 0;
  }

  .experience-summary {
    min-height: 150px;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
  }

  .experience-summary h3,
  .experience-card:not(:first-child) .experience-summary h3 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .experience-details {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-inline: 22px;
  }

  .section {
    padding-block: 70px;
  }

  .contact-form {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .contact-form .button {
    grid-column: 1;
    width: auto;
  }

  .form-status {
    grid-column: 1;
    max-width: none;
    margin-top: 0;
    text-align: left;
  }

  .marquee-section {
    padding-block: 18px 70px;
  }

  .marquee-shell {
    padding-block: 28px;
  }

  .marquee-heading {
    padding-bottom: 22px;
  }

  .marquee-track span {
    min-height: 44px;
    padding-inline: 16px;
  }

  .skill-tile,
  .timeline-item {
    min-height: 230px;
  }

  .skill-tile h3 {
    margin-top: 36px;
  }

  .work-rail {
    grid-auto-columns: minmax(282px, 86vw);
  }

  .project-panel.featured {
    min-width: 86vw;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

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