:root {
  --ink: #1f2630;
  --muted: #647184;
  --paper: #fafcff;
  --mint: #c8f0e7;
  --sky: #cfe7ff;
  --peach: #ffdacc;
  --lilac: #ddd4ff;
  --rose: #f3b6cb;
  --lemon: #fff2b5;
  --line: rgba(31, 38, 48, 0.1);
  --shadow: 0 24px 64px rgba(31, 38, 48, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 10% 12%, rgba(200, 240, 231, 0.7), transparent 24rem),
    radial-gradient(circle at 88% 10%, rgba(221, 212, 255, 0.55), transparent 24rem),
    radial-gradient(circle at 78% 82%, rgba(255, 218, 204, 0.45), transparent 26rem),
    var(--paper);
  overflow-x: hidden;
}

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

main {
  perspective: 1400px;
}

.page-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.48;
  background-image:
    linear-gradient(rgba(31, 38, 48, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 38, 48, 0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 84%);
}

.cursor-light {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.22;
  background: radial-gradient(circle, rgba(200, 240, 231, 0.9), rgba(207, 231, 255, 0.32) 46%, transparent 74%);
  filter: blur(18px);
  transform: translate3d(-50%, -50%, 0);
}

.site-header,
.hero,
.section,
footer {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 46px rgba(31, 38, 48, 0.08);
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 22px 54px rgba(31, 38, 48, 0.12);
}

.site-header.is-scrolled .brand span {
  transform: scale(0.96);
}

.brand,
.nav-links,
.hero-actions,
.hero-tags,
.project-links,
.contact-row,
footer,
.dashboard-header {
  display: flex;
  align-items: center;
}

.brand { gap: 0.7rem; font-weight: 800; }

.brand span,
.icon-link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.brand span {
  background: linear-gradient(135deg, var(--mint), var(--sky), var(--lilac));
}

.nav-links {
  gap: 0.35rem;
  color: #475264;
  font-size: 0.92rem;
  font-weight: 700;
}

.nav-links a,
.secondary-button,
.project-links a {
  padding: 0.72rem 0.95rem;
  border-radius: 999px;
  transition: 180ms ease;
}

.nav-links a:hover,
.nav-links a.is-active,
.secondary-button:hover,
.project-links a:hover {
  background: rgba(255, 255, 255, 0.88);
  transform: translateY(-1px);
}

.icon-link {
  background: var(--ink);
  transition: 180ms ease;
}

.icon-link:hover { transform: translateY(-1px); }
.icon-link svg,
.primary-button svg {
  width: 20px;
  fill: currentColor;
}
.icon-link svg { fill: #fff; }

.hero {
  display: grid;
  grid-template-columns: 1fr 0.94fr;
  gap: clamp(2rem, 6vw, 4rem);
  padding: clamp(4rem, 8vw, 7rem) 0 2rem;
  align-items: center;
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1rem 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 38, 48, 0.12), transparent);
}

.eyebrow,
.section-kicker {
  margin: 0 0 1rem;
  color: #5e6a79;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 1rem;
  font-size: clamp(3.3rem, 8vw, 7.1rem);
  line-height: 0.92;
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}

h3 { margin-bottom: 0.45rem; font-size: 1.08rem; }

.lead,
.intro p,
.project-copy p,
.contact h2,
.recruiter-band p,
.operations-band p {
  color: #4c5868;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.68;
}

.hero-actions,
.hero-tags,
.project-links,
.contact-row {
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-actions { margin-top: 2rem; }

.primary-button,
.secondary-button {
  min-height: 50px;
  font-weight: 800;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.92rem 1.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 16px 36px rgba(31, 38, 48, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(31, 38, 48, 0.22);
}

.secondary-button,
.hero-tags span,
.tool-cloud span,
.contact-row a,
.contact-row span {
  border: 1px solid rgba(31, 38, 48, 0.08);
  background: rgba(255, 255, 255, 0.7);
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.92rem 1.1rem;
}

.hero-tags { margin-top: 1.35rem; }

.hero-tags span,
.tool-cloud span {
  padding: 0.58rem 0.8rem;
  border-radius: 999px;
  color: #3f4b59;
  font-size: 0.84rem;
  font-weight: 800;
}

.float-chip,
.orbit-node {
  will-change: transform;
}

.float-chip {
  animation: floatChip 7s ease-in-out infinite;
  transform: translate3d(var(--float-x, 0), var(--float-y, 0), 0);
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.float-chip:nth-child(2) { animation-delay: -1.2s; }
.float-chip:nth-child(3) { animation-delay: -2.4s; }
.float-chip:nth-child(4) { animation-delay: -3.4s; }

.hero-stage,
.metric-row article,
.impact-grid article,
.recruiter-grid article,
.timeline-item,
.case-flow article,
.dashboard-shell,
.ops-flow article,
.skill-columns article,
.credential-grid article {
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.tilt-card,
.hero-stage {
  transform-style: preserve-3d;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.tilt-card:hover,
.hero-stage:hover {
  border-color: rgba(31, 38, 48, 0.16);
  box-shadow: 0 24px 60px rgba(31, 38, 48, 0.14);
}

.hero-stage {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  padding: 1rem;
  isolation: isolate;
}

.stage-backdrop {
  position: absolute;
  inset: -10% -8% auto auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(243, 182, 203, 0.24);
  filter: blur(16px);
  animation: auraDrift 9s ease-in-out infinite;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: -20% auto auto -18%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(200, 240, 231, 0.32);
  filter: blur(18px);
  animation: auraDrift 11s ease-in-out infinite reverse;
}

.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 12%, rgba(255, 255, 255, 0.3) 22%, transparent 34%);
  transform: translateX(-130%);
  animation: sheen 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 4;
}

.orbit-ring {
  position: absolute;
  border: 1px dashed rgba(31, 38, 48, 0.12);
  border-radius: 50%;
  animation: orbitSpin 18s linear infinite;
}

.orbit-one {
  inset: 12% 13% 16% 12%;
}

.orbit-two {
  inset: 22% 20% 24% 18%;
  animation-direction: reverse;
  animation-duration: 14s;
}

.orbit-node {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  min-width: 74px;
  height: 34px;
  padding: 0 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 36px rgba(31, 38, 48, 0.1);
  color: #445162;
  font-size: 0.74rem;
  font-weight: 800;
  animation: floatSoft 5.8s ease-in-out infinite;
  transform: translate3d(var(--float-x, 0), var(--float-y, 0), 0);
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.node-a { left: 11%; top: 22%; }
.node-b { right: 14%; top: 25%; animation-delay: -1.4s; }
.node-c { left: 18%; bottom: 18%; animation-delay: -2.4s; }
.node-d { right: 18%; bottom: 15%; animation-delay: -3.1s; }

.orbit-node.is-reactive,
.float-chip.is-reactive {
  box-shadow: 0 18px 44px rgba(31, 38, 48, 0.12);
}

.dashboard-stage {
  position: absolute;
  inset: 18% 8% 10% 8%;
  border-radius: 24px;
  background:
    linear-gradient(rgba(31, 38, 48, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 38, 48, 0.06) 1px, transparent 1px),
    linear-gradient(160deg, rgba(255, 255, 255, 0.84), rgba(207, 231, 255, 0.42));
  background-size: 34px 34px, 34px 34px, auto;
  overflow: hidden;
  transition: transform 260ms ease;
}

.bars {
  position: absolute;
  inset: auto 10% 12% 10%;
  display: flex;
  align-items: end;
  gap: 0.8rem;
  height: 58%;
}

.bars span {
  flex: 1;
  height: var(--bar);
  min-height: 26px;
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, var(--lilac), var(--sky));
  animation: barRise 3s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

.bars span:nth-child(2n) {
  background: linear-gradient(180deg, var(--peach), var(--mint));
  animation-delay: -0.9s;
}

.trend-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trend-line path,
.trend-card path {
  fill: none;
  stroke: #2e3944;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: drawLine 4s ease-in-out infinite;
}

.insight,
.dashboard-note {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 64px rgba(31, 38, 48, 0.14);
}

.insight {
  display: grid;
  gap: 0.25rem;
  border-radius: 20px;
  animation: floatSoft 6s ease-in-out infinite;
  z-index: 5;
}

.insight span,
.impact-grid span,
.recruiter-grid strong,
.case-flow span,
.ops-flow span,
.score-card span,
.credential-grid span,
.dashboard-note span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.insight strong {
  font-size: 2rem;
}

.insight small,
.case-flow small,
.score-card small,
.credential-grid p,
.timeline-item p,
.skill-columns p,
.impact-grid p,
.recruiter-grid p,
.ops-flow p,
.dashboard-note p {
  color: var(--muted);
  line-height: 1.58;
}

.insight-main {
  left: 1rem;
  top: 1rem;
  width: 190px;
  padding: 1.1rem;
}

.insight-top,
.insight-bottom {
  width: 176px;
  padding: 0.95rem;
}

.insight-top { right: 1rem; top: 1.4rem; }
.insight-bottom { right: 1rem; bottom: 1.4rem; }
.insight-top { animation-delay: -1.6s; }
.insight-bottom { animation-delay: -3.1s; }

.signal-route {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(31, 38, 48, 0.42), transparent);
  animation: routePulse 3.8s ease-in-out infinite;
}

.route-a {
  left: 10rem;
  top: 6.4rem;
  width: 170px;
  transform: rotate(24deg);
}

.route-b {
  right: 9rem;
  top: 9.8rem;
  width: 150px;
  transform: rotate(132deg);
  animation-delay: -1.1s;
}

.route-c {
  right: 9rem;
  bottom: 8rem;
  width: 160px;
  transform: rotate(210deg);
  animation-delay: -2.2s;
}

.metric-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.ticker-band {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--shadow);
}

.ticker-track {
  display: flex;
  width: max-content;
}

.ticker-move {
  display: flex;
  gap: 0.8rem;
  padding: 0.8rem;
  animation: tickerRun 28s linear infinite;
}

.ticker-move span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(31, 38, 48, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #445162;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.metric-row article,
.impact-grid article,
.recruiter-grid article,
.timeline-item,
.case-flow article,
.ops-flow article,
.skill-columns article,
.credential-grid article {
  padding: 1.15rem;
}

.metric-row strong {
  display: block;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
}

.metric-row span { color: var(--muted); font-weight: 700; }

.section { padding: clamp(4rem, 8vw, 7rem) 0; }

.section {
  position: relative;
}

.section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 38, 48, 0.08), transparent);
  opacity: 0.65;
}

.intro-grid,
.split,
.project-band,
.recruiter-band,
.operations-band {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

.intro-grid { gap: 2rem; }
.intro-top {
  display: grid;
  grid-template-columns: 1.08fr minmax(250px, 320px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.split { grid-template-columns: 0.82fr 1.18fr; align-items: start; }
.project-band { grid-template-columns: 1fr 0.95fr; align-items: center; }
.recruiter-band,
.operations-band { grid-template-columns: 0.82fr 1.18fr; align-items: start; }

.impact-grid,
.case-flow,
.skill-columns,
.credential-grid,
.dashboard-grid,
.recruiter-grid,
.ops-flow {
  display: grid;
  gap: 1rem;
}

.impact-grid,
.recruiter-grid,
.skill-columns,
.credential-grid { grid-template-columns: repeat(3, 1fr); }

.case-flow,
.ops-flow { grid-template-columns: repeat(3, 1fr); }

.case-flow { margin-top: 1.5rem; }
.skill-columns,
.credential-grid { margin-top: 2rem; }

.education-spotlight {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: 2rem;
  padding: 1.2rem;
}

.education-logo-wrap {
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 1px solid rgba(31, 38, 48, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  padding: 1.25rem;
}

.education-logo-wrap img {
  display: block;
  width: min(100%, 220px);
  max-height: 180px;
  object-fit: contain;
  filter: saturate(1.04) contrast(1.02);
}

.education-copy span {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.education-copy strong {
  display: block;
  margin-bottom: 0.7rem;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.05;
}

.education-copy p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.impact-grid strong,
.ops-flow strong,
.recruiter-grid strong {
  display: block;
  margin: 0.35rem 0 0.45rem;
  font-size: 1.12rem;
}

.profile-portrait {
  margin: 0;
  padding: 0.7rem;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}

.profile-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  object-fit: cover;
  object-position: 50% 20%;
  transform: scale(1.01);
  transition: transform 500ms ease, filter 500ms ease;
}

.profile-portrait:hover img {
  transform: scale(1.04);
  filter: saturate(1.04) contrast(1.03);
}

.profile-portrait figcaption {
  display: grid;
  gap: 0.18rem;
  padding: 0.8rem 0.4rem 0.2rem;
}

.profile-portrait span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-portrait strong {
  font-size: 1rem;
}

.muted { color: var(--muted); line-height: 1.6; }
.timeline { display: grid; gap: 1rem; }

.timeline-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}

.timeline-item > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  font-weight: 800;
}

.dashboard-shell {
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.dashboard-shell::before {
  content: "";
  position: absolute;
  inset: -70px auto auto -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(200, 240, 231, 0.3);
  filter: blur(16px);
  animation: auraDrift 10s ease-in-out infinite;
}

.dashboard-header { gap: 0.45rem; margin-bottom: 1rem; }

.dashboard-header span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--rose);
}

.dashboard-header span:nth-child(2) { background: var(--lemon); }
.dashboard-header span:nth-child(3) { background: var(--mint); }

.dashboard-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(2, 1fr);
}

.mini-card {
  min-height: 160px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
}

.map-card {
  position: relative;
  background:
    radial-gradient(circle at 24% 32%, rgba(200, 240, 231, 0.95), transparent 5rem),
    radial-gradient(circle at 70% 48%, rgba(207, 231, 255, 0.95), transparent 5rem),
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(221,212,255,0.38));
}

.pulse {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid #fff;
  box-shadow: 0 0 0 8px rgba(31, 38, 48, 0.08);
  animation: ping 2.8s ease-in-out infinite;
}

.pulse.a { left: 22%; top: 30%; }
.pulse.b { left: 58%; top: 42%; animation-delay: -0.8s; }
.pulse.c { left: 74%; top: 28%; animation-delay: -1.6s; }

.scatter-card {
  position: relative;
  overflow: hidden;
}

.scatter-card i {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--peach), var(--lilac));
  animation: scatterFloat 4.2s ease-in-out infinite;
}

.scatter-card i:nth-child(1) { left: 18%; top: 62%; }
.scatter-card i:nth-child(2) { left: 34%; top: 42%; animation-delay: -0.7s; }
.scatter-card i:nth-child(3) { left: 48%; top: 54%; animation-delay: -1.2s; }
.scatter-card i:nth-child(4) { left: 66%; top: 32%; animation-delay: -1.8s; }
.scatter-card i:nth-child(5) { left: 78%; top: 18%; animation-delay: -2.4s; }

.trend-card {
  display: grid;
  place-items: center;
  padding: 0.8rem;
  position: relative;
  overflow: hidden;
}

.trend-card svg { width: 100%; height: 100%; }

.scan-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(200, 240, 231, 0.28), transparent);
  transform: translateY(-120%);
  animation: scanMove 4.8s ease-in-out infinite;
}

.score-card {
  display: grid;
  align-content: center;
  padding: 1.1rem;
}

.score-card strong {
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  line-height: 1;
}

.dashboard-note {
  position: relative;
  z-index: 1;
  margin-top: 0.85rem;
  border-radius: 18px;
  padding: 1rem;
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.dashboard-note p {
  margin: 0.35rem 0 0;
}

.tool-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}

.tool-cloud span:nth-child(3n + 1) { background: rgba(200, 240, 231, 0.78); }
.tool-cloud span:nth-child(3n + 2) { background: rgba(207, 231, 255, 0.78); }
.tool-cloud span:nth-child(3n) { background: rgba(255, 218, 204, 0.78); }

.contact-row a,
.contact-row span {
  padding: 0.8rem 1rem;
  border-radius: 999px;
  color: #3d4856;
  font-weight: 800;
}

footer {
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 0 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-weight: 800;
}

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

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

[data-reveal].delay-1 { transition-delay: 80ms; }
[data-reveal].delay-2 { transition-delay: 160ms; }
[data-reveal].delay-3 { transition-delay: 240ms; }
[data-reveal].delay-4 { transition-delay: 320ms; }

.parallax-layer {
  will-change: transform;
}

@keyframes barRise {
  from { transform: scaleY(0.72); }
  to { transform: scaleY(1); }
}

@keyframes drawLine {
  0% { stroke-dashoffset: 520; }
  42%, 76% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -520; }
}

@keyframes ping {
  0%, 100% { transform: scale(0.92); box-shadow: 0 0 0 6px rgba(31, 38, 48, 0.08); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(31, 38, 48, 0.02); }
}

@keyframes routePulse {
  0%, 100% { opacity: 0.24; filter: blur(0); }
  50% { opacity: 0.92; filter: blur(1px); }
}

@keyframes scatterFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes floatSoft {
  0%, 100% { transform: translate3d(var(--float-x, 0), var(--float-y, 0), 0); }
  50% { transform: translate3d(var(--float-x, 0), calc(var(--float-y, 0) - 12px), 0); }
}

@keyframes floatChip {
  0%, 100% { transform: translate3d(var(--float-x, 0), var(--float-y, 0), 0) rotate(0deg); }
  25% { transform: translate3d(var(--float-x, 0), calc(var(--float-y, 0) - 4px), 0) rotate(-1deg); }
  50% { transform: translate3d(var(--float-x, 0), calc(var(--float-y, 0) - 8px), 0) rotate(0.5deg); }
  75% { transform: translate3d(var(--float-x, 0), calc(var(--float-y, 0) - 3px), 0) rotate(1deg); }
}

@keyframes sheen {
  0%, 100% { transform: translateX(-130%); }
  46%, 62% { transform: translateX(135%); }
}

@keyframes auraDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(20px, -16px, 0) scale(1.08); }
}

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes tickerRun {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes scanMove {
  0%, 100% { transform: translateY(-120%); }
  50% { transform: translateY(120%); }
}

@media (max-width: 980px) {
  .nav-links { display: none; }

  .hero,
  .intro-grid,
  .intro-top,
  .split,
  .project-band,
  .metric-row,
  .impact-grid,
  .case-flow,
  .recruiter-band,
  .recruiter-grid,
  .operations-band,
  .ops-flow,
  .education-spotlight,
  .skill-columns,
  .credential-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .hero-stage { min-height: 460px; }

  .ticker-band {
    width: calc(100% - 32px);
  }
}

@media (max-width: 640px) {
  .site-header,
  .hero,
  .section,
  footer,
  .ticker-band {
    width: calc(100% - 24px);
  }

  h1 { font-size: clamp(3rem, 16vw, 4.9rem); }

  .hero-actions,
  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .primary-button,
  .secondary-button {
    justify-content: center;
  }

  .brand strong { display: none; }
  .insight-top,
  .insight-bottom { width: 150px; }
  .orbit-node {
    min-width: 64px;
    font-size: 0.68rem;
  }
  footer { flex-direction: column; align-items: flex-start; }
}

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