:root {
  color-scheme: dark;
  --bg: #0a0d12;
  --surface: #10151d;
  --surface-2: #161d27;
  --text: #f2f5f9;
  --body: #bac4d1;
  --muted: #93a0b0;
  --accent: #2dd4bf;
  --accent-strong: #7df0dc;
  --accent-ink: #04231d;
  --accent-soft: rgba(45, 212, 191, 0.12);
  --accent-line: rgba(45, 212, 191, 0.35);
  --line: rgba(186, 196, 209, 0.14);
  --shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.45);
  --radius: 12px;
  --radius-s: 8px;
  --max: 1120px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.28);
  --font-body: "Inter", ui-sans-serif, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-body);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Lenis adds these classes when it takes over scrolling; native smooth
   scrolling would fight its programmatic scrolls. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

section[id] {
  scroll-margin-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Ambient glows drift slowly with scroll progress (--drift, 0..1 set in JS).
   The gradients stay static; only the layer transform changes, which keeps
   scrolling on the compositor instead of repainting the viewport. */
body::before {
  content: "";
  position: fixed;
  inset: -12vh -10vw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(52rem 30rem at 82% -6%, rgba(45, 212, 191, 0.07), transparent 68%),
    radial-gradient(40rem 26rem at -8% 40%, rgba(45, 212, 191, 0.04), transparent 70%),
    radial-gradient(48rem 30rem at 50% 112%, rgba(45, 212, 191, 0.045), transparent 72%),
    var(--bg);
  transform: translate3d(calc(var(--drift, 0) * -5vw), calc(var(--drift, 0) * 4vh), 0);
  will-change: transform;
  contain: paint;
}

/* Static film grain: keeps large dark surfaces from looking flat.
   feTurbulence data-URI, so no asset file and zero runtime cost. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
svg {
  display: block;
}

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

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: rgba(45, 212, 191, 0.32);
  color: var(--text);
}

.svg-sprite {
  display: none;
}

.container {
  width: min(var(--max), calc(100% - 2.5rem));
  margin: 0 auto;
}

.icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* ---------- Accessibility helpers ---------- */

.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-s);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  transition: top 160ms ease;
}

.skip-link:focus-visible {
  top: 1rem;
}

.button:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(45, 212, 191, 0.16);
  border-radius: var(--radius-s);
}

/* ---------- Typography ---------- */

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
}

h1 {
  max-width: 18ch;
  margin-bottom: 1.4rem;
  font-size: clamp(2.6rem, 1.1rem + 5.2vw, 5.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
}

.accent-text {
  color: var(--accent);
  background: linear-gradient(100deg, var(--accent), var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-heading h2,
.contact-copy h2 {
  margin-bottom: 0.9rem;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.2rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.1rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  flex: 0 0 auto;
}

/* ---------- Header ---------- */

.site-header {
  --progress-bottom: -1px;
  --progress-gutter: 0.9rem;
  --progress-height: 2px;
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 20;
  width: min(var(--max), calc(100% - 2rem));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.55rem 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(10, 13, 18, 0.78);
  backdrop-filter: blur(14px);
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease,
    width 450ms var(--ease-out), padding 350ms var(--ease-out);
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  left: var(--progress-gutter);
  right: var(--progress-gutter);
  bottom: var(--progress-bottom);
  height: var(--progress-height);
  pointer-events: none;
}

.site-header::before {
  background: linear-gradient(90deg, transparent, rgba(186, 196, 209, 0.14) 16%, rgba(186, 196, 209, 0.14) 84%, transparent);
}

.site-header::after {
  background: linear-gradient(90deg, transparent, #eafff9 14%, var(--accent-strong) 42%, var(--accent) 74%, rgba(226, 255, 249, 0.72));
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.24);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  transition: transform 120ms linear;
  will-change: transform;
}

/* Scrolling condenses the header into a tighter floating dock. */
.site-header.is-scrolled {
  width: min(980px, calc(100% - 2rem));
  padding: 0.45rem 0.45rem 0.45rem 0.7rem;
  border-color: var(--accent-line);
  background: rgba(10, 13, 18, 0.92);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}

.brand-mark {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-s);
  background: var(--accent-soft);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.brand-mark svg {
  width: 1.55rem;
  height: 1.55rem;
  filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0));
  transition: filter 300ms ease, transform 300ms var(--ease-spring);
}

/* Logo is three copies of one path: a faint ghost rail, the gradient ink
   that draws itself on load, and a light pass that patrols the monogram. */
.logo-track {
  stroke: rgba(45, 212, 191, 0.16);
}

.logo-ink {
  stroke-dasharray: 100;
  animation: brand-draw 1100ms var(--ease-out) 250ms backwards;
}

@keyframes brand-draw {
  from {
    stroke-dashoffset: 100;
  }
}

.logo-pulse {
  stroke: #eafff9;
  stroke-dasharray: 10 90;
  opacity: 0.85;
  filter: drop-shadow(0 0 3px var(--accent-strong));
  animation: logo-comet 5.5s linear 1600ms infinite backwards,
    logo-pulse-in 600ms ease 1600ms backwards;
}

@keyframes logo-comet {
  to {
    stroke-dashoffset: -100;
  }
}

@keyframes logo-pulse-in {
  from {
    opacity: 0;
  }
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark {
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.22);
}

.brand:hover .brand-mark svg,
.brand:focus-visible .brand-mark svg {
  filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.7));
  transform: scale(1.08);
}

.brand:hover .logo-track,
.brand:focus-visible .logo-track {
  stroke: rgba(45, 212, 191, 0.3);
}

.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.site-nav a {
  position: relative;
  min-height: 2.3rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem;
  border-radius: var(--radius-s);
  color: var(--muted);
  font-size: 0.93rem;
  font-weight: 500;
  text-shadow: 0 0 0 rgba(125, 240, 220, 0);
  transition: color 420ms ease, text-shadow 420ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.is-active {
  color: var(--text);
  text-shadow: 0 0 14px rgba(125, 240, 220, 0.3);
}

.site-nav a.is-active {
  color: var(--accent-strong);
  font-weight: 600;
}


.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-toggle {
  position: relative;
  display: none;
  width: 2.3rem;
  height: 2.3rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: rgba(22, 29, 39, 0.7);
  color: var(--text);
}

.nav-toggle span {
  position: absolute;
  width: 1.05rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 180ms ease;
}

.nav-toggle span:first-child {
  transform: translateY(-4px);
}

.nav-toggle span:last-child {
  transform: translateY(4px);
}

.nav-open .nav-toggle span:first-child {
  transform: rotate(45deg);
}

.nav-open .nav-toggle span:last-child {
  transform: rotate(-45deg);
}

/* ---------- Buttons ---------- */

.button {
  position: relative;
  overflow: hidden;
  min-height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  padding: 0 1.15rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1;
  transition: transform 200ms var(--ease-out), border-color 200ms ease, background-color 200ms ease,
    box-shadow 200ms ease, color 200ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
  transition-duration: 80ms;
}

.button .icon {
  transition: transform 200ms var(--ease-out);
}

.button:hover .icon,
.button:focus-visible .icon {
  transform: translateX(2px);
}

.button-sm {
  min-height: 2.3rem;
  padding: 0 0.85rem;
  font-size: 0.9rem;
}

.button-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(45, 212, 191, 0.22);
}

.button-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
  transform: translateX(-130%);
  pointer-events: none;
}

.button-primary:hover::after,
.button-primary:focus-visible::after {
  transform: translateX(130%);
  transition: transform 650ms ease;
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--accent-strong);
  box-shadow: 0 12px 30px rgba(45, 212, 191, 0.3);
}

.button-secondary {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: var(--accent);
  background: rgba(45, 212, 191, 0.18);
  color: var(--accent-strong);
  box-shadow: var(--shadow-soft);
}

.button-ghost {
  padding: 0 0.7rem;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.button-ghost:hover,
.button-ghost:focus-visible {
  color: var(--text);
  background: rgba(186, 196, 209, 0.08);
  box-shadow: var(--shadow-soft);
}

.button.is-copied {
  border-color: var(--accent);
  color: var(--accent-strong);
  animation: copied-ring 700ms ease-out;
}

@keyframes copied-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.4);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(45, 212, 191, 0);
  }
}

.button.is-copied .icon {
  animation: icon-pop 420ms var(--ease-spring);
}

@keyframes icon-pop {
  0% {
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: 7rem 0 3.4rem;
  background:
    radial-gradient(42rem 28rem at 76% 30%, rgba(45, 212, 191, 0.055), transparent 72%),
    linear-gradient(180deg, rgba(10, 13, 18, 0.98), rgba(10, 13, 18, 0.9) 60%, var(--bg));
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(10, 13, 18, 0.98) 0%, rgba(10, 13, 18, 0.88) 42%, rgba(10, 13, 18, 0.34) 76%, rgba(10, 13, 18, 0.2) 100%),
    radial-gradient(42rem 30rem at 18% 42%, rgba(10, 13, 18, 0.78), transparent 72%);
}

.hero::after {
  top: auto;
  height: 13rem;
  background: linear-gradient(to bottom, rgba(10, 13, 18, 0), var(--bg) 78%);
}

.hero-backdrop {
  position: absolute;
  inset: 0 0 -9rem;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  background:
    radial-gradient(58rem 34rem at 78% 30%, rgba(45, 212, 191, 0.065), transparent 72%),
    radial-gradient(42rem 26rem at 72% 82%, rgba(91, 141, 166, 0.052), transparent 70%),
    linear-gradient(115deg, rgba(16, 29, 39, 0.34), rgba(10, 13, 18, 0));
}

.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42rem 24rem at 80% 45%, rgba(125, 240, 220, 0.04), transparent 72%),
    linear-gradient(to bottom, transparent 54%, rgba(10, 13, 18, 0.82));
}

.hero-grid {
  position: absolute;
  inset: -1px;
  opacity: 0.38;
  contain: paint;
  background-image:
    linear-gradient(rgba(125, 240, 220, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 240, 220, 0.065) 1px, transparent 1px),
    linear-gradient(rgba(186, 196, 209, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(186, 196, 209, 0.038) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 256px 256px, 256px 256px;
  background-position: center;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 70%, transparent 100%);
}

.hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.68;
  will-change: opacity;
  background-image:
    linear-gradient(rgba(125, 240, 220, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 240, 220, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(125, 240, 220, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 240, 220, 0.08) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 256px 256px, 256px 256px;
  background-position: center;
  mask-image: radial-gradient(38rem 24rem at center, #000 0%, rgba(0, 0, 0, 0.74) 34%, transparent 66%);
  mask-position: 78% 34%;
  mask-repeat: no-repeat;
  mask-size: 92% 92%;
  -webkit-mask-image: radial-gradient(38rem 24rem at center, #000 0%, rgba(0, 0, 0, 0.74) 34%, transparent 66%);
  -webkit-mask-position: 78% 34%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 92% 92%;
  animation: grid-light-pass 8s ease-in-out infinite;
}

.hero-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 13, 18, 0.94), rgba(10, 13, 18, 0.4) 48%, rgba(10, 13, 18, 0.08)),
    radial-gradient(34rem 22rem at 22% 44%, rgba(10, 13, 18, 0.66), transparent 72%);
}

.hero-light {
  position: absolute;
  width: min(60rem, 82vw);
  height: min(34rem, 58vh);
  border-radius: 999px;
  opacity: 0.42;
  background: radial-gradient(ellipse at center, rgba(45, 212, 191, 0.14), rgba(45, 212, 191, 0.052) 42%, transparent 72%);
  will-change: transform;
}

.hero-light-a {
  top: 4%;
  right: -12%;
  transform: rotate(-14deg);
  animation: hero-light-drift-a 20s ease-in-out infinite alternate;
}

.hero-light-b {
  right: 22%;
  bottom: 10%;
  width: min(44rem, 62vw);
  height: min(24rem, 42vh);
  opacity: 0.2;
  background: radial-gradient(ellipse at center, rgba(91, 141, 166, 0.2), rgba(45, 212, 191, 0.034) 48%, transparent 72%);
  animation: hero-light-drift-b 24s ease-in-out infinite alternate;
}

.hero-system-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.58;
  contain: paint;
  mask-image: linear-gradient(to bottom, transparent 6%, #000 18%, #000 72%, transparent 94%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 18%, #000 72%, transparent 94%);
}

.system-line {
  fill: none;
  stroke: rgba(125, 240, 220, 0.14);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: system-line-breathe 12s ease-in-out infinite;
}

.line-b {
  animation-delay: -6s;
}

.line-c {
  animation-delay: -11s;
}

.line-d {
  animation-delay: -16s;
}

.system-signal {
  fill: none;
  stroke: rgba(190, 255, 244, 0.64);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 8 116;
  stroke-dashoffset: 124;
  filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.28));
  animation: system-signal-flow 8s ease-in-out infinite;
}

.signal-b {
  animation-delay: -8s;
}

.system-node {
  --x: 50%;
  --y: 50%;
  --delay: 0s;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid rgba(190, 255, 244, 0.5);
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.52);
  box-shadow: 0 0 13px rgba(45, 212, 191, 0.28);
  opacity: 0.78;
  transform: translate(-50%, -50%);
}

.system-node::before {
  content: "";
  position: absolute;
  inset: -0.62rem;
  border: 1px solid rgba(125, 240, 220, 0.34);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.58);
  animation: system-node-pulse 9s ease-out infinite;
  animation-delay: var(--delay);
}

.node-a {
  --x: 54%;
  --y: 24%;
  --delay: -1s;
}

.node-b {
  --x: 74%;
  --y: 40%;
  --delay: -5s;
}

.node-c {
  --x: 88%;
  --y: 40%;
  --delay: -9s;
}

.node-d {
  --x: 66%;
  --y: 72%;
  --delay: -13s;
}

.node-e {
  --x: 42%;
  --y: 64%;
  --delay: -15s;
}

.hero-content {
  position: relative;
  z-index: 2;
}

@keyframes hero-light-drift-a {
  from {
    transform: translate3d(0, 0, 0) rotate(-14deg);
  }
  to {
    transform: translate3d(-8vw, 5vh, 0) rotate(-14deg);
  }
}

@keyframes hero-light-drift-b {
  from {
    transform: translate3d(-3vw, 2vh, 0);
  }
  to {
    transform: translate3d(6vw, -4vh, 0);
  }
}

@keyframes grid-light-pass {
  0%,
  100% {
    opacity: 0.52;
  }
  50% {
    opacity: 0.74;
  }
}

@keyframes system-line-breathe {
  0%,
  100% {
    stroke-opacity: 0.5;
  }
  45% {
    stroke-opacity: 1;
  }
}

@keyframes system-signal-flow {
  0%,
  56%,
  100% {
    stroke-dashoffset: 124;
    opacity: 0;
  }
  8% {
    opacity: 0.42;
  }
  30% {
    stroke-dashoffset: 0;
    opacity: 0.38;
  }
  42% {
    opacity: 0;
  }
}

@keyframes system-node-pulse {
  0%,
  68%,
  100% {
    opacity: 0;
    transform: scale(0.58);
  }
  10% {
    opacity: 0.48;
  }
  34% {
    opacity: 0;
    transform: scale(1.58);
  }
}

.hero-copy {
  max-width: 58ch;
  margin-bottom: 2rem;
  color: var(--body);
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem);
}

.hero-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* ---------- Hero entrance ---------- */

.supports-reveal .hero-enter {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out);
}

.supports-reveal .is-loaded .hero-enter {
  opacity: 1;
  transform: none;
  filter: none;
}

.hero-content > .hero-enter:nth-child(2) {
  transition-delay: 100ms;
}

.hero-content > .hero-enter:nth-child(3) {
  transition-delay: 200ms;
}

.hero-content > .hero-enter:nth-child(4) {
  transition-delay: 300ms;
}

.hero-content > .hero-enter:nth-child(5) {
  transition-delay: 400ms;
}

/* ---------- Scroll cue ---------- */

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.3rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  pointer-events: none;
}

.scroll-cue-track {
  position: relative;
  width: 1px;
  height: 2.6rem;
  overflow: hidden;
  background: rgba(186, 196, 209, 0.18);
}

.scroll-cue-dot {
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  height: 0.9rem;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: cue-fall 2.2s var(--ease-out) infinite;
}

@keyframes cue-fall {
  0% {
    transform: translateY(-100%);
  }
  65%,
  100% {
    transform: translateY(2.6rem);
  }
}

/* Entrance is a one-shot animation (not a transition) so the GSAP scroll
   fade can own inline opacity afterwards without a cascade fight. */
.supports-reveal .scroll-cue {
  opacity: 0;
}

.supports-reveal .is-loaded .scroll-cue {
  opacity: 1;
  animation: cue-in 900ms ease 1200ms backwards;
}

@keyframes cue-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Proof strip ---------- */

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 920px;
  margin: 2.45rem 0 0;
  padding: 1.05rem 0 0;
  border-top: 1px solid rgba(186, 196, 209, 0.14);
  list-style: none;
}

.proof-strip li {
  min-height: 5.6rem;
  padding: 0.25rem 1.25rem 0.25rem 0;
  border-right: 1px solid rgba(186, 196, 209, 0.1);
  transition: border-color 240ms ease, transform 240ms var(--ease-out);
}

.proof-strip li + li {
  padding-left: 1.25rem;
}

.proof-strip li:last-child {
  border-right: 0;
}

.proof-strip li:hover {
  border-color: rgba(45, 212, 191, 0.24);
  transform: translateY(-2px);
}

.proof-strip li:hover strong {
  color: var(--accent-strong);
}

.proof-strip strong {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text);
  transition: color 240ms ease;
}

.proof-strip .stat-value {
  font-variant-numeric: tabular-nums;
}

.proof-strip .unit {
  color: var(--accent);
  font-size: 0.62em;
  font-weight: 700;
}

.proof-strip li > span:last-child {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
  display: block;
}

/* ---------- Sections ---------- */

.section {
  padding: 5.5rem 0;
  /* Contain the ghost section numbers' negative z-index within the section. */
  isolation: isolate;
}

@supports (content-visibility: auto) {
  .section {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
  }

  .contact-section {
    contain-intrinsic-size: auto 560px;
  }
}

.section-alt {
  background: linear-gradient(to bottom, transparent, rgba(22, 29, 39, 0.4), transparent);
}

.section-heading {
  position: relative;
  max-width: 720px;
  margin-bottom: 2.6rem;
}

/* Ghost section numbers: oversized outlined figures floating behind each
   heading; GSAP adds a scroll parallax drift when available. */
.section-num {
  position: absolute;
  top: -2.4rem;
  right: -0.5rem;
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 9vw, 10rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(45, 212, 191, 0.11);
  pointer-events: none;
  user-select: none;
}

.section-heading p,
.contact-copy p {
  color: var(--muted);
  font-size: 1.03rem;
  max-width: 58ch;
}

/* ---------- Experience timeline ---------- */

.timeline {
  position: relative;
  display: grid;
  gap: 1.1rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 1rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--accent), rgba(45, 212, 191, 0.2), transparent);
}

.supports-reveal .timeline::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1100ms var(--ease-out) 150ms;
}

.supports-reveal .timeline.is-visible::before {
  transform: scaleY(1);
}

.experience-card {
  position: relative;
  margin-left: 2.5rem;
  padding: 1.6rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  /* Gradient border: surface fill clipped to padding-box, teal fade on border-box. */
  background:
    linear-gradient(rgba(16, 21, 29, 0.78), rgba(16, 21, 29, 0.78)) padding-box,
    linear-gradient(160deg, rgba(45, 212, 191, 0.3), rgba(186, 196, 209, 0.08) 45%, rgba(45, 212, 191, 0.13)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 240ms var(--ease-out), box-shadow 240ms ease;
}

.experience-card:hover {
  background:
    linear-gradient(rgba(18, 24, 33, 0.85), rgba(18, 24, 33, 0.85)) padding-box,
    linear-gradient(160deg, rgba(45, 212, 191, 0.52), rgba(45, 212, 191, 0.15) 45%, rgba(45, 212, 191, 0.32)) border-box;
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-hover);
}

.experience-marker {
  position: absolute;
  top: 1.9rem;
  left: -2rem;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 5px rgba(45, 212, 191, 0.1);
  transition: box-shadow 240ms ease;
}

.supports-reveal .experience-card .experience-marker {
  transform: scale(0);
  transition: transform 500ms var(--ease-spring) 300ms, box-shadow 240ms ease;
}

.supports-reveal .experience-card.is-visible .experience-marker {
  transform: scale(1);
  animation: marker-pulse 1.1s ease-out 500ms 1;
}

@keyframes marker-pulse {
  0% {
    box-shadow: 0 0 0 5px rgba(45, 212, 191, 0.28);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(45, 212, 191, 0);
  }
}

.experience-card:hover .experience-marker {
  box-shadow: 0 0 0 7px rgba(45, 212, 191, 0.16);
}

.experience-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.experience-head h3 {
  margin-bottom: 0.25rem;
  font-size: 1.3rem;
  letter-spacing: 0;
}

.company {
  color: var(--accent);
  font-size: 0.94rem;
  font-weight: 700;
}

.experience-head time {
  flex: 0 0 auto;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.experience-card ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--body);
}

.experience-card li + li {
  margin-top: 0.55rem;
}

.experience-card li::marker {
  color: rgba(45, 212, 191, 0.7);
}

.experience-card li strong {
  color: var(--text);
  font-weight: 700;
}

/* ---------- Skills ---------- */

.skills-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.skills-row {
  position: relative; /* anchors the pointer-tracking glow */
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 0.9rem;
  min-height: 100%;
  padding: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background:
    linear-gradient(180deg, rgba(16, 21, 29, 0.9), rgba(16, 21, 29, 0.72)) padding-box,
    linear-gradient(160deg, rgba(45, 212, 191, 0.3), rgba(186, 196, 209, 0.08) 45%, rgba(45, 212, 191, 0.13)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 36px rgba(0, 0, 0, 0.28);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}

.skills-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(to right, rgba(45, 212, 191, 0.6), rgba(45, 212, 191, 0.05));
  z-index: 0;
}

.skills-row:hover {
  transform: translateY(-4px);
  background:
    linear-gradient(180deg, rgba(18, 24, 33, 0.92), rgba(18, 24, 33, 0.78)) padding-box,
    linear-gradient(160deg, rgba(45, 212, 191, 0.52), rgba(45, 212, 191, 0.15) 45%, rgba(45, 212, 191, 0.32)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-hover);
}

/* Same label voice as the About panel: quiet uppercase teal, content leads. */
.skills-row dt {
  position: relative;
  z-index: 2;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.skills-row dd {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.45rem;
  color: var(--body);
}

.chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.34rem 0.72rem;
  border: 1px solid rgba(186, 196, 209, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #d8e1ec;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease,
    transform 200ms var(--ease-out);
}

.chip:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-strong);
  transform: translateY(-2px);
}

/* Chips cascade in when their row reveals; per-chip delay set in JS. */
.supports-reveal .skills-row .chip {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-spring),
    border-color 200ms ease, background-color 200ms ease, color 200ms ease;
  transition-delay: var(--chip-delay, 0ms);
}

.supports-reveal .skills-row.is-visible .chip {
  opacity: 1;
  transform: none;
}

.supports-reveal .skills-row.is-visible .chip:hover {
  transform: translateY(-2px);
  transition-delay: 0ms;
}

/* ---------- About ---------- */

.about-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.4rem;
  align-items: start;
}

.about-layout .section-heading {
  margin-bottom: 0;
}

.about-panel {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(16, 21, 29, 0.78), rgba(16, 21, 29, 0.78)) padding-box,
    linear-gradient(200deg, rgba(45, 212, 191, 0.3), rgba(186, 196, 209, 0.08) 45%, rgba(45, 212, 191, 0.13)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.about-panel div {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.about-panel div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Inner items stagger in after the panel itself reveals. */
.supports-reveal .about-panel > div {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.supports-reveal .about-panel.is-visible > div {
  opacity: 1;
  transform: none;
}

.supports-reveal .about-panel > div:nth-child(1) {
  transition-delay: 150ms;
}

.supports-reveal .about-panel > div:nth-child(2) {
  transition-delay: 260ms;
}

.supports-reveal .about-panel > div:nth-child(3) {
  transition-delay: 370ms;
}

.about-panel span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-panel strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.16rem;
  letter-spacing: 0;
}

.about-panel p {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- Contact ---------- */

.contact-section {
  position: relative;
  padding-bottom: 5.5rem;
}

/* Wide ambient glow behind the contact panel so the closing CTA feels lit. */
.contact-section::before {
  content: "";
  position: absolute;
  inset: -3rem 0 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(44rem 24rem at 50% 58%, rgba(45, 212, 191, 0.06), transparent 72%);
}

.contact-panel {
  position: relative;
  z-index: 0; /* traps the ghost number's negative z-index above the panel background */
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.6rem;
  padding: clamp(1.6rem, 1rem + 2.5vw, 3rem);
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  background:
    radial-gradient(34rem 18rem at 88% 0%, rgba(45, 212, 191, 0.1), transparent 70%),
    var(--surface);
}

.contact-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong), transparent, var(--accent));
  background-size: 250% 100%;
  animation: border-shimmer 7s linear infinite;
}

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

.contact-copy {
  position: relative; /* anchors the ghost section number */
}

.contact-actions {
  margin: 1.6rem 0 0.4rem;
}

.copy-status {
  min-height: 1.5rem;
  margin: 0.6rem 0 0.6rem;
  color: var(--accent-strong);
  font-size: 0.92rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 250ms ease, transform 250ms var(--ease-out);
}

.copy-status.is-shown {
  opacity: 1;
  transform: none;
}

.contact-links {
  display: grid;
  gap: 0.7rem;
  color: var(--muted);
}

.contact-links a,
.contact-links span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
}

.contact-links a {
  background-image: linear-gradient(90deg, var(--accent), var(--accent-strong));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color 200ms ease, transform 200ms var(--ease-out), background-size 320ms var(--ease-out);
}

.contact-links a:hover,
.contact-links a:focus-visible {
  background-size: 100% 1px;
}

.contact-links a .icon {
  transition: color 200ms ease;
}

.contact-links a:hover,
.contact-links a:focus-visible {
  color: var(--text);
  transform: translateX(2px);
}

.contact-links a:hover .icon,
.contact-links a:focus-visible .icon {
  color: var(--accent);
}

.fit-card {
  position: relative;
  align-self: start;
  padding: 1.4rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(10, 13, 18, 0.72), rgba(10, 13, 18, 0.72)) padding-box,
    linear-gradient(160deg, rgba(45, 212, 191, 0.3), rgba(186, 196, 209, 0.08) 45%, rgba(45, 212, 191, 0.13)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 240ms var(--ease-out), box-shadow 240ms ease;
}

.fit-card:hover {
  transform: translateY(-3px);
  background:
    linear-gradient(rgba(12, 16, 22, 0.8), rgba(12, 16, 22, 0.8)) padding-box,
    linear-gradient(160deg, rgba(45, 212, 191, 0.52), rgba(45, 212, 191, 0.15) 45%, rgba(45, 212, 191, 0.32)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-soft);
}

.fit-card h3 {
  margin-bottom: 0.9rem;
  font-size: 1.2rem;
  letter-spacing: 0;
}

.fit-card ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--body);
}

.fit-card li + li {
  margin-top: 0.6rem;
}

.fit-card li::marker {
  color: rgba(45, 212, 191, 0.7);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0;
  color: var(--muted);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-inner p {
  margin: 0;
}

/* ---------- Reveal ---------- */

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

.supports-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), filter 600ms var(--ease-out);
}

.supports-reveal .reveal[data-reveal="left"] {
  transform: translateX(-28px);
}

.supports-reveal .reveal[data-reveal="right"] {
  transform: translateX(28px);
}

.supports-reveal .reveal[data-reveal="scale"] {
  transform: scale(0.94);
}

.supports-reveal .section-heading.reveal {
  filter: blur(6px);
}

.supports-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Eyebrow accent line draws in once its heading reveals. */
.supports-reveal .section-heading.reveal .eyebrow::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-out) 250ms;
}

.supports-reveal .section-heading.reveal.is-visible .eyebrow::before {
  transform: scaleX(1);
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .about-layout,
  .contact-panel {
    grid-template-columns: 1fr;
  }

  .about-layout .section-heading {
    margin-bottom: 0.6rem;
  }

  .proof-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem 0;
  }

  .proof-strip li:nth-child(2n) {
    border-right: 0;
  }

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

@media (max-width: 760px) {
  .scroll-cue {
    display: none;
  }

  .hero-backdrop {
    bottom: -5rem;
  }

  .hero-grid {
    opacity: 0.34;
  }

  .hero-system-map {
    opacity: 0.46;
  }

  .site-header {
    top: 0.75rem;
    width: calc(100% - 1rem);
    padding: 0.5rem 0.5rem 0.5rem 0.65rem;
  }

  .brand-text {
    display: none;
  }

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

  .site-nav {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    right: 0;
    display: grid;
    gap: 0.2rem;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(10, 13, 18, 0.96);
    box-shadow: var(--shadow-hover);
    backdrop-filter: blur(12px);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }

  .nav-open .site-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 200ms ease, transform 340ms var(--ease-spring);
  }

  /* Links stagger in as the dropdown opens. */
  .site-nav a {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 220ms ease, transform 220ms var(--ease-out), color 200ms ease,
      text-shadow 220ms ease, background 200ms ease;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible {
    background: rgba(186, 196, 209, 0.09);
  }

  .nav-open .site-nav a {
    opacity: 1;
    transform: none;
  }

  .nav-open .site-nav a:nth-of-type(1) {
    transition-delay: 40ms;
  }

  .nav-open .site-nav a:nth-of-type(2) {
    transition-delay: 90ms;
  }

  .nav-open .site-nav a:nth-of-type(3) {
    transition-delay: 140ms;
  }

  .nav-open .site-nav a:nth-of-type(4) {
    transition-delay: 190ms;
  }

  .hero {
    min-height: 86svh;
    padding: 6rem 0 3rem;
  }

  .section {
    padding: 4.2rem 0;
  }

  .experience-card {
    margin-left: 1.5rem;
    padding: 1.2rem;
  }

  .timeline::before {
    left: 0.5rem;
  }

  .experience-marker {
    left: -1.5rem;
  }

  .experience-head {
    display: grid;
    justify-items: start;
  }

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

  .skills-row {
    gap: 0.85rem;
  }

  .supports-reveal .reveal[data-reveal="left"],
  .supports-reveal .reveal[data-reveal="right"] {
    transform: translateY(20px);
  }

  .footer-inner {
    display: grid;
  }
}

@media (max-width: 460px) {
  .container {
    width: min(var(--max), calc(100% - 1.25rem));
  }

  .hero {
    padding: 5.4rem 0 2.4rem;
  }

  .header-cta {
    display: none;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-actions .button-primary,
  .hero-actions .button-secondary {
    grid-column: 1 / -1;
  }

  .hero-actions .button {
    width: 100%;
    min-width: 0;
    padding: 0 0.75rem;
    font-size: 0.94rem;
  }

  .proof-strip {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .proof-strip li,
  .proof-strip li + li {
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }

  .skills-row {
    padding: 1rem;
  }

  .contact-actions {
    display: grid;
  }

  .contact-actions .button {
    width: 100%;
  }
}

/* ---------- Motion enhancement (GSAP) ----------
   .gsap-enhanced is added to <html> only when the GSAP CDN scripts loaded
   and motion isn't reduced. Rules here hand ownership of an animation to
   GSAP by switching off its CSS fallback, so the two never fight over the
   same properties. */

html.gsap-enhanced .hero-enter,
html.gsap-enhanced .section-heading.reveal,
html.gsap-enhanced .about-panel.reveal {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

html.gsap-enhanced .section {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

/* GSAP scrubs the timeline draw with scroll position via --line-scale. */
html.gsap-enhanced.supports-reveal .timeline::before {
  transform: scaleY(var(--line-scale, 0));
  transform-origin: top;
  transition: none;
}

/* GSAP cascades the chips per row; restore the plain hover transition. */
html.gsap-enhanced.supports-reveal .skills-row .chip {
  opacity: 1;
  transform: none;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease,
    transform 200ms var(--ease-out);
}

/* Masked split text clips to the line box; tight display line-heights would
   shear off descenders, so the masks get breathing room that negative
   margins cancel out of the layout. */
html.gsap-enhanced #hero-title > div,
html.gsap-enhanced .section-heading h2 > div,
html.gsap-enhanced .contact-copy h2 > div,
.split-mask {
  padding: 0.1em 0.06em 0.16em;
  margin: -0.1em -0.06em -0.16em;
}

/* Split-text wrappers (SplitText or the hand-rolled fallback). */
.split-mask {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
}

.split-word {
  display: inline-block;
}

/* background-clip: text can't paint across split word wrappers, so each
   word carries the gradient instead (it restarts per word, which reads
   fine over a short phrase). */
html.gsap-enhanced .accent-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
}

html.gsap-enhanced .accent-text .split-word {
  background: linear-gradient(100deg, var(--accent), var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* text-wrap: balance re-flows once words become spans; keep wrapping
   identical before and after the split so nothing shifts. */
html.gsap-enhanced h1,
html.gsap-enhanced .section-heading h2,
html.gsap-enhanced .contact-copy h2 {
  text-wrap: initial;
}

/* Magnetic buttons: GSAP owns their transform (lift baked into the magnet),
   so the CSS hover lift is retired to avoid tug-of-war. */
.button.is-magnetic:hover,
.button.is-magnetic:focus-visible {
  transform: none;
}

/* Pointer-tracking glow: a soft radial highlight follows the cursor across
   cards. Coordinates come from JS as --mx/--my. */
@media (hover: hover) and (pointer: fine) {
  html.gsap-enhanced .experience-card::after,
  html.gsap-enhanced .about-panel::after,
  html.gsap-enhanced .fit-card::after,
  html.gsap-enhanced .skills-row::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: radial-gradient(
      320px circle at var(--mx, 50%) var(--my, 50%),
      rgba(45, 212, 191, 0.08),
      transparent 65%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
  }

  html.gsap-enhanced .experience-card:hover::after,
  html.gsap-enhanced .about-panel:hover::after,
  html.gsap-enhanced .fit-card:hover::after,
  html.gsap-enhanced .skills-row:hover::after {
    opacity: 1;
  }
}

/* ---------- Reduced motion ---------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  /* Frozen comet reads as a broken stroke; the static monogram stands alone. */
  .logo-pulse {
    display: none;
  }

  .contact-panel::before {
    animation: none;
  }

  .hero-grid::before,
  .hero-light,
  .system-line,
  .system-signal,
  .system-node::before {
    animation: none;
  }

  .reveal,
  .supports-reveal .reveal,
  .hero-enter,
  .supports-reveal .hero-enter,
  .supports-reveal .skills-row .chip,
  .supports-reveal .about-panel > div,
  .supports-reveal .experience-card .experience-marker,
  .supports-reveal .section-heading.reveal .eyebrow::before,
  .supports-reveal .timeline::before {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* ---------- Print ---------- */

@media print {
  .site-header,
  .hero-backdrop,
  .scroll-cue,
  .hero-actions,
  .contact-actions,
  .skip-link {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #111827;
  }

  body::before,
  body::after {
    display: none;
  }

  .hero,
  .section {
    min-height: auto;
    padding: 1.2rem 0;
  }

  .accent-text,
  .eyebrow,
  .company,
  .skills-row dt,
  .about-panel span {
    color: #0f766e;
  }

  .accent-text {
    background: none;
    -webkit-text-fill-color: initial;
    filter: none;
  }

  .chip {
    border-color: #d1d5db;
    background: #ffffff;
    color: #374151;
  }

  .hero-copy,
  .section-heading p,
  .contact-copy p,
  .about-panel p,
  .experience-card ul,
  .fit-card ul,
  .skills-row dd,
  .proof-strip li > span:last-child,
  .contact-links {
    color: #374151;
  }

  .proof-strip strong,
  .experience-card li strong {
    color: #111827;
  }

  .experience-card,
  .about-panel,
  .contact-panel,
  .fit-card,
  .skills-row {
    box-shadow: none;
    background: #ffffff;
    border-color: #d1d5db;
  }

  .skills-row::before {
    display: none;
  }
}