/* ERGOK — home layer. See public/css/theme.css for the token contract.
   Loads after styles.css / app.css / theme.css / motion.css / chrome.css, so
   equal specificity already wins — no `!important` anywhere in this file.

   Contents
     1. Shared helpers
     2. Hero
     3. Stat band
     4. Editorial intro
     5. Paths
     6. Spotlight
     7. Reference marquee
     8. CTA finale
     9. Responsive
    10. Reduced motion
   ------------------------------------------------------------------------ */

/* ------------------------------------------------------------
   1. SHARED HELPERS
   ------------------------------------------------------------ */

/* Decorative full-bleed texture plate. Pair with .u-grid-bg / .u-grain. */
.band-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* ------------------------------------------------------------
   2. HERO
   ------------------------------------------------------------ */
.home-hero {
  /* Local, hero-only values: this surface is dark in both themes. */
  --hh-ink: #f3f8fb;
  --hh-muted: rgba(236, 244, 249, 0.82);
  --hh-accent: #74e2ff;
  --hh-accent-grad: linear-gradient(104deg, #c4f4ff 0%, #56dcff 42%, #00bff2 100%);
  --hh-hairline: rgba(255, 255, 255, 0.16);
  --hh-interval: 6500ms;
  position: relative;
  isolation: isolate;
  background: #0b1220;
  min-height: clamp(560px, calc(100vh - var(--chrome-h)), 880px);
  min-height: clamp(560px, calc(100svh - var(--chrome-h)), 880px);
}

.home-hero .hero-slider-viewport {
  min-height: clamp(560px, calc(100vh - var(--chrome-h)), 880px);
  min-height: clamp(560px, calc(100svh - var(--chrome-h)), 880px);
}

/* --- composed photography ------------------------------------------------ */
.home-hero .hero-media {
  overflow: hidden;
}

/* Bleeds past the frame so the parallax translate never exposes an edge. */
.home-hero .hero-media-inner {
  position: absolute;
  inset: -7% -3%;
}

.home-hero .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
  transform: scale(1.06);
  transition: none;
  filter: saturate(1.02) contrast(1.07);
}

/* Ken Burns: slow drift, restarted every time the slide becomes active. */
.home-hero .hero-slide.is-active .hero-media img {
  animation: hh-kenburns 12s var(--ease-out-soft) both;
}

@keyframes hh-kenburns {
  from {
    transform: scale(1.06) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.14) translate3d(-1.4%, -1.1%, 0);
  }
}

/* Second scrim layer — shapes the frame instead of flatly darkening it. */
.home-hero .hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 52% at 86% 6%, rgba(64, 210, 255, 0.16), transparent 62%),
    linear-gradient(
      92deg,
      rgba(9, 14, 26, 0.88) 0%,
      rgba(9, 14, 26, 0.64) 34%,
      rgba(9, 14, 26, 0.16) 62%,
      rgba(9, 14, 26, 0.52) 100%
    ),
    linear-gradient(0deg, rgba(9, 14, 26, 0.92) 0%, rgba(9, 14, 26, 0.22) 42%, transparent 66%);
}

.home-hero .hero-texture::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 52px 52px;
  -webkit-mask-image: linear-gradient(100deg, #000 4%, rgba(0, 0, 0, 0.25) 46%, transparent 72%);
  mask-image: linear-gradient(100deg, #000 4%, rgba(0, 0, 0, 0.25) 46%, transparent 72%);
}

/* Inset engineering frame with corner ticks. */
.home-hero .hero-frame {
  position: absolute;
  inset: clamp(12px, 2vw, 28px);
  display: block;
  pointer-events: none;
  border: 1px solid var(--hh-hairline);
}

.home-hero .hero-frame::before,
.home-hero .hero-frame::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--hh-accent);
}

.home-hero .hero-frame::before {
  top: -1px;
  left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.home-hero .hero-frame::after {
  right: -1px;
  bottom: -1px;
  border-right-width: 2px;
  border-bottom-width: 2px;
}

/* --- hero copy ----------------------------------------------------------- */
.home-hero .hero-content {
  max-width: none;
  padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(2.25rem, 4vw, 3.5rem);
}

@media (min-width: 641px) {
  .home-hero .hero-content {
    padding-inline: clamp(0px, calc(3.5rem - (100vw - var(--container)) / 2), 3.5rem);
  }
}

.home-hero .hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin: 0;
}

.home-hero .hero-brand {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.44rem 0.72rem 0.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--hh-ink);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.home-hero .hero-kicker {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--track-wider);
  color: var(--hh-accent);
}

.home-hero .hero-kicker::before {
  width: 1.75rem;
  height: 2px;
  background: var(--hh-accent-grad);
}

.home-hero .hero-title {
  margin: clamp(1.4rem, 2.4vw, 2rem) 0 0;
  max-width: 19ch;
  font-family: var(--font-display);
  font-size: min(var(--fs-display), 3.9rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: var(--track-display);
  text-transform: none;
  text-wrap: balance;
  color: var(--hh-ink);
}

/* Two authored lines, not one wrapped paragraph. */
.home-hero .hero-title-line,
.home-hero .hero-title-accent {
  display: block;
}

.home-hero .hero-title-accent {
  margin-top: 0.12em;
}

.home-hero .hero-title-accent {
  color: transparent;
  background-image: var(--hh-accent-grad);
}

html[data-theme="dark"] .home-hero .hero-title-accent {
  color: transparent;
}

/* Per-word entrance once the motion runtime splits the line.
   Keyed on `.is-active` rather than on [data-anim] because the headline
   belongs to a slider: every slide change has to replay it, which a
   one-shot IntersectionObserver entrance cannot do. `--i` is the unit
   index the runtime stamps onto each span; the accent line starts a
   beat later so the two lines read as one sentence, not one block. */
.home-hero .hero-title .split-unit {
  display: inline-block;
}

/* The media crossfades for 850ms; the copy must not, or the outgoing
   slide's headline stays on screen on top of the incoming one. */
.home-hero .hero-slide:not(.is-active) .hero-content {
  opacity: 0;
  transition: none;
}

/* `u-grad-text` clips the gradient to the text of the whole accent line, but
   the motion runtime transforms each word inside it. The browser paints the
   clipped gradient at the pre-split positions and the animated words on top,
   which reads as doubled, ghosted text. Clipping per word leaves one copy. */
.home-hero .hero-title-accent:has(.split-unit) {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.home-hero .hero-title-accent .split-unit {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-hero .hero-slide.is-active .hero-title .split-unit {
  animation: hh-word-in var(--dur-4) var(--ease-emphasis) both;
  animation-delay: calc(var(--hh-word-base, 300ms) + var(--i, 0) * 55ms);
}

.home-hero .hero-slide.is-active .hero-title-accent .split-unit {
  --hh-word-base: 440ms;
}

@keyframes hh-word-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.52em, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.home-hero .hero-lead {
  margin: clamp(1.5rem, 2.6vw, 2.1rem) 0 0;
  max-width: 44ch;
  font-size: var(--fs-lead);
  line-height: 1.72;
  font-weight: 500;
  color: var(--hh-muted);
}

.home-hero .hero-cta {
  margin-top: clamp(2rem, 3.4vw, 2.9rem);
  gap: 0.85rem;
}

.home-hero .hero-cta .btn {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--steel-900);
  box-shadow: var(--shadow-brand);
}

.home-hero .hero-cta .btn:hover,
.home-hero .hero-cta .btn:focus-visible {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--steel-900);
  box-shadow: var(--shadow-brand);
}

.home-hero .hero-cta .hero-btn-ghost {
  background: transparent;
  color: var(--hh-ink);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: none;
}

.home-hero .hero-cta .hero-btn-ghost:hover,
.home-hero .hero-cta .hero-btn-ghost:focus-visible {
  background: transparent;
  color: var(--steel-900);
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}

/* --- slide UI ------------------------------------------------------------
   Edge arrows, vertically centred on the hero, and nothing else: the
   numbered dot rail that used to sit under the copy is gone. One shared
   control bar now serves every slide (it used to be re-rendered per slide
   so each copy could mark its own dot current — with no dots there is no
   per-slide state left to mark). site.js delegates clicks from the section
   root, so it routes these unchanged.
   ------------------------------------------------------------------------ */
.home-hero .hero-ui {
  position: absolute;
  inset: 0 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  opacity: 0;
  animation: hero-copy-in 0.6s var(--ease-out) 0.55s both;
}

.home-hero .hero-nav {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  pointer-events: auto;
  color: var(--hh-ink);
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  cursor: pointer;
  transition:
    background var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out);
}

.home-hero .hero-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-hero .hero-nav:hover,
.home-hero .hero-nav:focus-visible {
  color: var(--steel-900);
  background: var(--hh-accent);
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}

.home-hero .hero-nav--prev:hover,
.home-hero .hero-nav--prev:focus-visible {
  transform: translateX(-3px);
}

.home-hero .hero-nav--next:hover,
.home-hero .hero-nav--next:focus-visible {
  transform: translateX(3px);
}

.home-hero .hero-nav:focus-visible {
  outline: 2px solid var(--hh-ink);
  outline-offset: 3px;
}

.home-hero .hero-aside {
  position: absolute;
  right: clamp(20px, 2.6vw, 38px);
  bottom: 44px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  pointer-events: none;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.home-hero .hero-aside::after {
  content: "";
  width: 1px;
  height: 66px;
  background: linear-gradient(rgba(255, 255, 255, 0.55), transparent);
}

/* ------------------------------------------------------------
   3. STAT BAND
   ------------------------------------------------------------ */
.stat-band {
  position: relative;
  overflow: hidden;
  background: var(--surface-raised);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.stat-band .trust-bar-inner {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: clamp(2.5rem, 4.6vw, 4.25rem) 0;
}

.stat-band .trust-item {
  position: relative;
  overflow: hidden;
  padding: 0 0 0 clamp(1rem, 2vw, 2rem);
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid var(--line-soft);
  text-align: left;
}

.stat-band .trust-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 2.75rem;
  background: var(--grad-brand);
}

.stat-band .stat-ghost {
  position: absolute;
  top: -0.7rem;
  right: 0.1rem;
  display: block;
  margin: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: clamp(3.75rem, 7vw, 6.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  opacity: 0.55;
}

.stat-band .stat-figure {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 5.4vw, 4.9rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.stat-band .stat-label {
  position: relative;
  display: block;
  margin-top: 0.85rem;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--muted);
}

/* ------------------------------------------------------------
   4. EDITORIAL INTRO
   ------------------------------------------------------------ */
.home-intro {
  position: relative;
  overflow: hidden;
}

.home-intro-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2.25rem, 5vw, 5rem);
  align-items: center;
}

/* --- the section's photograph -------------------------------------------
   "Neden ERGÖK" was the one band on the page carrying no image at all,
   which is why it read as a wall of type. */
.home-intro-media {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.home-intro-media-frame {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  background: var(--steel-900);
  box-shadow: var(--shadow-lg);
}

.home-intro-media-frame img {
  display: block;
  width: 100%;
  height: clamp(360px, 42vw, 600px);
  object-fit: cover;
  /* facility-line.jpg is a wide corridor strip; anchor the crop on the
     foreground door rather than on the empty middle of the frame. */
  object-position: 26% center;
  transform: scale(1.04);
  filter: saturate(1.03) contrast(1.05);
  transition: transform var(--dur-6) var(--ease-out-soft);
}

.home-intro-media:hover .home-intro-media-frame img {
  transform: scale(1.09);
}

/* Inset hairline + corner ticks, same engineering frame as the hero. */
.home-intro-media-frame::after {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.home-intro-media-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0.55rem 0.95rem;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  line-height: 1;
  color: var(--steel-900);
  background: var(--grad-brand);
}

.home-intro-media-caption {
  margin: 1rem 0 0;
  max-width: 44ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
}

.home-intro-title {
  margin: 0 0 1.15rem;
  font-size: clamp(2.1rem, 1.05rem + 3.4vw, 3.85rem);
  line-height: 0.98;
}

.home-intro-body {
  margin: 1.2rem 0 0;
  max-width: 56ch;
  color: var(--muted);
  line-height: 1.78;
}

.home-intro-badge {
  position: absolute;
  z-index: 2;
  right: clamp(-0.5rem, -1vw, 0rem);
  bottom: clamp(3.25rem, 6vw, 4.5rem);
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.6rem 1.1rem 1.9rem;
  background: var(--grad-ice);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-3) var(--ease-out);
}

.home-intro-media:hover .home-intro-badge {
  transform: translateY(-5px);
}

.home-intro-badge::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--grad-brand);
}

.home-intro-badge-figure {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--track-display);
  color: var(--text);
}

.home-intro-badge-label {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--muted);
}

.cap-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(2.75rem, 5.5vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.cap-item {
  position: relative;
  display: block;
  padding: clamp(1.5rem, 2.4vw, 2.1rem) clamp(1.1rem, 2vw, 1.75rem) clamp(1.5rem, 2.4vw, 2.1rem) 0;
  border-top: 0;
  transition: transform var(--dur-3) var(--ease-out);
}

.cap-item + .cap-item {
  padding-left: clamp(1.1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--line-soft);
}

.cap-item:hover {
  transform: translateY(-4px);
}

.cap-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--grad-brand);
  transition: width var(--dur-3) var(--ease-out);
}

.cap-item:hover::before {
  width: 100%;
}

.cap-index {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--accent-ink);
}

.cap-title {
  margin: 0 0 0.5rem;
  font-size: var(--fs-h4);
  letter-spacing: var(--track-tight);
  text-transform: none;
}

.cap-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* ------------------------------------------------------------
   5. PATHS
   ------------------------------------------------------------ */
.home-paths .path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
  background: transparent;
  border: 0;
}

/* Equal columns, equal heights: the cards used to step down the page on a
   diagonal and each one ended wherever its copy ran out. */
.home-paths .path-cell {
  position: relative;
  display: flex;
  filter: drop-shadow(0 6px 14px rgba(14, 21, 28, 0.07)) drop-shadow(0 24px 44px rgba(14, 21, 28, 0.1));
}

html[data-theme="dark"] .home-paths .path-cell {
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5)) drop-shadow(0 26px 48px rgba(0, 0, 0, 0.42));
}

.home-paths .path-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  min-height: clamp(300px, 26vw, 370px);
  padding: clamp(1.8rem, 3vw, 2.75rem) clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.6rem, 2.6vw, 2.25rem);
  background: var(--surface-raised);
  border: 0;
  color: var(--text);
  transition:
    transform var(--dur-3) var(--ease-out),
    background var(--dur-3) var(--ease-out);
}

.home-paths .path-card::before {
  width: 3px;
  background: var(--grad-brand);
}

/* Brand wash that blooms from the top-right corner on hover. */
.home-paths .path-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(125% 95% at 100% 0%, var(--edge-glow), transparent 62%);
  transition: opacity var(--dur-3) var(--ease-out);
}

.home-paths .path-card:hover,
.home-paths .path-card:focus-visible {
  background: var(--surface-raised);
  transform: translateY(-5px);
}

.home-paths .path-card:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -5px;
}

.home-paths .path-card:hover::after,
.home-paths .path-card:focus-visible::after {
  opacity: 0.55;
}

.home-paths .path-index {
  position: absolute;
  top: clamp(0.3rem, 1vw, 0.9rem);
  right: clamp(0.5rem, 1.4vw, 1.1rem);
  z-index: -1;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: clamp(4.25rem, 7.5vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  opacity: 0.85;
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
}

.home-paths .path-card:hover .path-index,
.home-paths .path-card:focus-visible .path-index {
  opacity: 1;
  transform: translateY(-5px);
  -webkit-text-stroke-color: var(--brand-400);
}

/* `data-pointer-track` writes --pointer-x / --pointer-y (0→1) onto the
   card. The ghost numeral reads them as a shallow counter-drift, so the
   card gains depth without a tilt that would fight its entrance
   transform. Same specificity as the :hover rule above, placed after it
   so the pointer state wins while the cursor is inside. */
.home-paths .path-card.is-pointing .path-index {
  transform: translate3d(
    calc((var(--pointer-x, 0.5) - 0.5) * -16px),
    calc(-5px + (var(--pointer-y, 0.5) - 0.5) * -10px),
    0
  );
}

.home-paths .path-rule {
  display: block;
  width: 2.6rem;
  height: var(--rule-w);
  background: var(--grad-brand);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}

.home-paths .path-card:hover .path-rule,
.home-paths .path-card:focus-visible .path-rule {
  transform: scaleX(1.85);
}

.home-paths .path-card h3 {
  margin: 0.35rem 0 0;
  font-size: var(--fs-h3);
  letter-spacing: 0.01em;
}

.home-paths .path-card p {
  margin: 0;
  max-width: 38ch;
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--muted);
}

.home-paths .path-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-wide);
}

.home-paths .path-sheen {
  position: absolute;
  inset: -1px;
  z-index: -1;
  display: block;
  pointer-events: none;
  opacity: 0.4;
  background: var(--grad-sheen);
  transform: translateX(-125%) skewX(-16deg);
  transition: transform var(--dur-6) var(--ease-out);
}

.home-paths .path-card:hover .path-sheen,
.home-paths .path-card:focus-visible .path-sheen {
  transform: translateX(125%) skewX(-16deg);
}

/* ------------------------------------------------------------
   6. SPOTLIGHT
   ------------------------------------------------------------ */
.home-spotlight .spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: center;
  min-height: 0;
}

.home-spotlight .spotlight-media {
  position: relative;
  background: transparent;
  clip-path: none;
}

.home-spotlight .spotlight-media::after {
  content: none;
}

.home-spotlight .spotlight-frame {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}

/* A long pause between passes: instrumentation, not shimmer. */
.home-spotlight .spotlight-frame {
  --scan-duration: 9s;
  transform-origin: center;
}

.home-spotlight .spotlight-frame::after {
  z-index: 2;
}

.home-spotlight .spotlight-frame picture {
  display: block;
  height: 100%;
}

.home-spotlight .spotlight-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(300px, 38vw, 580px);
  object-fit: cover;
  transition: transform var(--dur-6) var(--ease-out);
}

.home-spotlight .spotlight:hover .spotlight-media img {
  transform: scale(1.045);
}

.home-spotlight .spotlight-panel {
  position: absolute;
  left: clamp(1rem, 2.4vw, 2.1rem);
  bottom: clamp(1rem, 2.4vw, 2.1rem);
  z-index: 2;
  max-width: min(22rem, calc(100% - 2rem));
  padding: 1.1rem 1.4rem;
}

.home-spotlight .spotlight-panel-model {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.home-spotlight .spotlight-panel-text {
  margin: 0.35rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
}

.home-spotlight .spotlight-copy {
  padding: 0;
}

.home-spotlight .spotlight-copy h2 {
  margin: 0.2rem 0 0;
  font-size: clamp(1.85rem, 1rem + 2.4vw, 2.9rem);
  line-height: 1;
}

.home-spotlight .spec-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  margin: clamp(1.4rem, 2.6vw, 2.1rem) 0 0;
  border-top: 1px solid var(--line-soft);
}

.home-spotlight .spec-item {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.home-spotlight .spec-item--wide {
  grid-column: 1 / -1;
}

.home-spotlight .spec-item dt {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--muted);
}

.home-spotlight .spec-item dd {
  margin: 0.3rem 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
}

/* ------------------------------------------------------------
   7. REFERENCE MARQUEE
   ------------------------------------------------------------ */
.home-refs {
  position: relative;
}

.home-refs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(1.4rem, 2.8vw, 2.25rem);
}

.home-refs-title {
  margin: 0;
  max-width: 30ch;
  font-size: var(--fs-h3);
}

.home-refs-link {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.ref-marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.6rem) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ref-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  width: max-content;
  max-width: none;
  padding-inline: clamp(1.5rem, 3vw, 3rem);
}

.ref-marquee-item {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-soft);
}

.ref-marquee-item img {
  display: block;
  width: auto;
  height: clamp(30px, 3.6vw, 46px);
  max-width: 132px;
  object-fit: contain;
  filter: grayscale(1) contrast(0.92);
  opacity: 0.62;
  transition:
    filter var(--dur-3) var(--ease-out),
    opacity var(--dur-3) var(--ease-out);
}

.ref-marquee-item:hover img,
.ref-marquee-item:focus-within img {
  filter: none;
  opacity: 1;
}

html[data-theme="dark"] .ref-marquee-item {
  background: rgba(236, 244, 249, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------
   8. CTA FINALE
   ------------------------------------------------------------ */
.cta-finale {
  --cf-accent: #7fe3ff;
  position: relative;
  overflow: hidden;
  padding: clamp(4.25rem, 7.5vw, 7rem) 0;
  background: var(--grad-steel);
  border-block: 0;
  color: var(--cta-band-text);
}

.cta-finale::before {
  background: radial-gradient(ellipse 70% 95% at 80% 45%, rgba(26, 212, 255, 0.13), transparent 58%);
}

.cta-finale .cta-aurora {
  position: absolute;
  top: -34%;
  right: -8%;
  z-index: 0;
  display: block;
  width: min(760px, 88%);
  aspect-ratio: 1.35;
  pointer-events: none;
  opacity: 0.9;
  background: radial-gradient(
    closest-side,
    rgba(64, 216, 255, 0.24),
    rgba(0, 144, 201, 0.11) 55%,
    transparent 78%
  );
}

.cta-finale .band-texture::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px;
}

.cta-finale .cta-band-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.cta-finale h2 {
  max-width: 17ch;
  font-size: clamp(1.95rem, 1rem + 2.9vw, 3.1rem);
  line-height: 1.12;
  color: var(--cta-band-text);
}

.cta-finale p {
  margin: 1rem 0 0;
  max-width: 50ch;
  font-size: var(--fs-lead);
  line-height: 1.72;
  color: rgba(233, 242, 248, 0.76);
}

.cta-finale .cta-band-eyebrow {
  margin: 0 0 1rem;
  color: var(--cf-accent);
}

.cta-finale .cta-band-eyebrow::before {
  background: var(--cf-accent);
}

/* --- the process, stated -------------------------------------------------
   The band used to be a headline and two buttons floating on a gradient.
   Naming the three steps is what makes it read as a business page rather
   than a poster: it answers "and then what happens" before it asks. */
.cta-finale .cta-steps {
  counter-reset: none;
  display: grid;
  gap: 0;
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cta-finale .cta-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  padding: clamp(1rem, 1.8vw, 1.35rem) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.cta-finale .cta-step-index {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  line-height: 1.5;
  color: var(--cf-accent);
  font-variant-numeric: tabular-nums;
}

.cta-finale .cta-step-body {
  display: block;
}

.cta-finale .cta-step-title {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 650;
  letter-spacing: var(--track-tight);
  line-height: 1.4;
  color: var(--cta-band-text);
}

.cta-finale .cta-step-text {
  display: block;
  margin-top: 0.3rem;
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: rgba(233, 242, 248, 0.68);
}

/* --- the action panel ---------------------------------------------------- */
.cta-finale .cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  clip-path: polygon(
    var(--chamfer) 0,
    100% 0,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0 100%,
    0 var(--chamfer)
  );
}

/* `data-pointer-track` writes --pointer-x / --pointer-y (0→1); the sheen
   follows the cursor across the panel instead of sitting in one corner. */
.cta-finale .cta-panel-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    46% 46% at calc(var(--pointer-x, 0.5) * 100%) calc(var(--pointer-y, 0.5) * 100%),
    rgba(127, 227, 255, 0.28),
    transparent 70%
  );
  transition: opacity var(--dur-3) var(--ease-out);
}

.cta-finale .cta-panel.is-pointing .cta-panel-glow {
  opacity: 1;
}

.cta-finale .cta-panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  line-height: 1;
  color: var(--cf-accent);
}

.cta-finale .cta-panel-note {
  margin: 0.9rem 0 0;
  max-width: none;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(233, 242, 248, 0.72);
}

.cta-finale .cta-band-actions {
  display: grid;
  gap: 0.7rem;
  margin-top: clamp(1.4rem, 2.4vw, 1.9rem);
}

.cta-finale .cta-band-actions .btn {
  width: 100%;
  justify-content: center;
}

.cta-finale .cta-direct {
  display: grid;
  gap: 0.3rem;
  margin: clamp(1.4rem, 2.4vw, 1.9rem) 0 0;
  padding-top: clamp(1.2rem, 2vw, 1.6rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cta-finale .cta-direct dt {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: rgba(233, 242, 248, 0.58);
}

.cta-finale .cta-direct dd {
  margin: 0;
}

.cta-finale .cta-direct a {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cta-band-text);
  text-decoration: none;
  background-image: linear-gradient(var(--cf-accent), var(--cf-accent));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition:
    background-size var(--dur-3) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

.cta-finale .cta-direct a:hover,
.cta-finale .cta-direct a:focus-visible {
  color: var(--cf-accent);
  background-size: 100% 1px;
}

.cta-finale .btn {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--steel-900);
}

.cta-finale .btn-outline {
  background: transparent;
  color: var(--cta-band-text);
  border-color: rgba(255, 255, 255, 0.42);
}

.cta-finale .btn-outline:hover,
.cta-finale .btn-outline:focus-visible {
  color: var(--steel-900);
  border-color: transparent;
}

html[data-theme="dark"] .cta-finale .btn-outline {
  color: var(--cta-band-text);
  border-color: rgba(255, 255, 255, 0.34);
}

html[data-theme="dark"] .cta-finale .btn-outline:hover,
html[data-theme="dark"] .cta-finale .btn-outline:focus-visible {
  color: var(--steel-900);
  border-color: transparent;
}

/* ------------------------------------------------------------
   9. RESPONSIVE — breakpoints follow styles.css (980px / 640px)
   ------------------------------------------------------------ */
@media (min-width: 981px) {
  /* Precision notch at the foot of the hero. */
  .home-hero {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 68px), calc(100% - 68px) 100%, 0 100%);
  }
}

@media (max-width: 1180px) {
  .home-hero .hero-title {
    font-size: min(var(--fs-display), 3.9rem);
  }

  .home-intro-grid {
    gap: clamp(2rem, 4vw, 3.25rem);
  }
}

@media (max-width: 980px) {
  .home-hero,
  .home-hero .hero-slider-viewport {
    min-height: clamp(520px, calc(100vh - var(--chrome-h)), 720px);
    min-height: clamp(520px, calc(100svh - var(--chrome-h)), 720px);
  }

  .home-hero .hero-title {
    max-width: 18ch;
    font-size: min(var(--fs-display), 3.2rem);
  }

  .home-hero .hero-aside {
    display: none;
  }

  .stat-band .trust-bar-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  .home-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cap-list {
    margin-top: 0;
  }

  .home-paths .path-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-paths .path-card {
    min-height: 0;
  }

  .home-spotlight .spotlight {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-spotlight .spotlight-media img {
    min-height: clamp(260px, 46vw, 380px);
  }

  .cta-finale .cta-band-inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .home-intro-grid {
    align-items: start;
  }

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

  .cap-item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .cap-item:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }
}

@media (max-width: 640px) {
  /* Room at the foot of the slide for the control row, which moves down
     there at this width instead of hugging the side edges. */
  .home-hero .hero-content {
    padding: 3rem 0 5.25rem;
  }

  .home-hero .hero-title {
    max-width: none;
    font-size: min(var(--fs-display), 2.65rem);
  }

  .home-hero .hero-ui {
    inset: auto 16px 20px;
    justify-content: flex-start;
    gap: 0.6rem;
  }

  .home-hero .hero-nav {
    width: 42px;
    height: 42px;
  }

  .home-hero .hero-frame {
    inset: 10px;
  }

  .stat-band .trust-bar-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat-band .trust-item {
    padding-left: 1rem;
  }

  .home-spotlight .spotlight-panel {
    position: static;
    max-width: none;
    margin-top: 0.85rem;
  }

  .home-spotlight .spec-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-refs-head {
    align-items: flex-start;
  }
}

@media (max-width: 430px) {
  .home-hero .hero-eyebrow {
    gap: 0.6rem;
  }
}

/* ------------------------------------------------------------
   9b. SECTION CONTINUITY

   The homepage used to read as a stack of separate pages: each band
   announced itself with a flat fill and a hard 1px border, so the seams
   were the loudest lines on the screen. Everything below trades those
   edges for transitions — gradients that fade into the page background,
   hairlines that are only lit in the middle, and one engineering grid
   that runs across the whole column so the eye reads continuity.
   ------------------------------------------------------------ */

/* The notch at the foot of the hero is a detail, not a gap. */
@media (min-width: 981px) {
  .home-hero {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), calc(100% - 42px) 100%, 0 100%);
  }
}

/* Brand seam under the hero, brightest where the copy sits. */
.home-hero::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--brand-500), rgba(0, 174, 239, 0) 46%);
}

/* Stat band: no borders. It sits on a wash that dissolves into the page
   above and below it, so it belongs to the hero rather than interrupting it. */
.stat-band {
  background:
    linear-gradient(180deg, var(--surface-raised) 0%, var(--surface-raised) 62%, transparent 100%),
    transparent;
  border-top: 0;
  border-bottom: 0;
}

html[data-theme="dark"] .stat-band {
  background:
    linear-gradient(180deg, rgba(19, 28, 37, 0.85) 0%, rgba(19, 28, 37, 0.5) 62%, transparent 100%),
    transparent;
}

.stat-band .trust-item {
  border-left: 0;
  transition: transform var(--dur-3) var(--ease-out);
}

/* The left rule is the divider now — it grows on hover instead of a border. */
.stat-band .trust-item::before {
  top: 0;
  left: 0;
  width: 2px;
  height: 2.75rem;
  transition:
    height var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out);
}

.stat-band .trust-item:hover {
  transform: translateY(-4px);
}

.stat-band .trust-item:hover::before {
  height: 100%;
  box-shadow: 0 0 18px var(--edge-glow);
}

.stat-band .stat-figure,
.stat-band .stat-ghost {
  transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out);
}

.stat-band .trust-item:hover .stat-ghost {
  opacity: 0.9;
  transform: translateY(-6px);
}

/* Intro and paths share one continuous surface instead of two flat fills. */
.home-intro {
  background: linear-gradient(180deg, transparent 0%, var(--surface-sunken) 55%, transparent 100%);
}

html[data-theme="dark"] .home-intro {
  background: linear-gradient(180deg, transparent 0%, rgba(13, 21, 28, 0.6) 55%, transparent 100%);
}

.home-paths.section--alt {
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(180deg, transparent 0%, var(--surface-2) 18%, var(--surface-2) 82%, transparent 100%);
}

/* A lit hairline instead of a ruled edge, between every pair of bands. */
.home-paths::before,
.home-spotlight::before,
.home-refs::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: var(--grad-hairline);
  opacity: 0.55;
}

.home-refs {
  position: relative;
}

/* ------------------------------------------------------------
   9c. MOTION ACCENTS
   Hover states, not entrances — the page felt static once it had
   finished loading.
   ------------------------------------------------------------ */
.home-paths .path-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.home-paths .path-link::after {
  content: "→";
  transition: transform var(--dur-2) var(--ease-out);
}

.home-paths .path-card:hover .path-link,
.home-paths .path-card:focus-visible .path-link {
  gap: 0.85rem;
  color: var(--accent-ink);
}

.home-paths .path-card:hover .path-link::after,
.home-paths .path-card:focus-visible .path-link::after {
  transform: translateX(3px);
}

.home-paths .path-card:hover,
.home-paths .path-card:focus-visible {
  transform: translateY(-8px);
}

.home-intro-badge-figure {
  font-variant-numeric: tabular-nums;
}

.home-spotlight .spotlight-frame {
  transition: box-shadow var(--dur-4) var(--ease-out);
}

.home-spotlight .spotlight-frame:hover {
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--edge-glow);
}

/* Logos lift out of greyscale one at a time as the cursor passes. */
.ref-marquee-item img {
  transition:
    filter var(--dur-3) var(--ease-out),
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
}

.ref-marquee-item:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

/* The reference wall never stops: the shared marquee primitive pauses on
   hover, which is the right default for a nav strip but reads as a broken
   animation on a logo wall that exists purely to keep moving. */
.home-refs [data-marquee]:hover .marquee-track,
.home-refs [data-marquee]:focus-within .marquee-track {
  animation-play-state: running;
}

.home-refs .ref-marquee {
  --marquee-gap: clamp(2.5rem, 4vw, 4.5rem);
  position: relative;
}

/* Fade the strip into the page at both ends so it reads as endless
   rather than as a band that starts and stops at the viewport edge. */
.home-refs .ref-marquee::before,
.home-refs .ref-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(48px, 9vw, 140px);
  pointer-events: none;
}

.home-refs .ref-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}

.home-refs .ref-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
}

/* ------------------------------------------------------------
   9d. RESPONSIVE — new intro + CTA compositions
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  .home-intro-media-frame img {
    height: clamp(300px, 52vw, 460px);
  }

  .home-intro-badge {
    right: 0;
    bottom: clamp(3rem, 7vw, 4rem);
  }
}

@media (max-width: 640px) {
  .cap-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .cap-item {
    padding-right: 0;
  }

  .cap-item + .cap-item {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .home-intro-badge {
    position: static;
    margin-top: 1rem;
    box-shadow: none;
  }

  .home-intro-media-frame::after {
    inset: 9px;
  }

  .cta-finale .cta-step {
    gap: 0.85rem;
  }
}

/* ------------------------------------------------------------
   10. REDUCED MOTION
   Nothing below may leave content hidden or unreadable.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-media img,
  .home-hero .hero-slide.is-active .hero-media img {
    animation: none;
    transform: none;
    transition: none;
  }

  .home-hero .hero-media-inner {
    transform: none;
  }

  .home-hero .hero-ui {
    opacity: 1;
    animation: none;
  }

  .home-hero .hero-slide.is-active .hero-title .split-unit {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .home-paths .path-sheen {
    display: none;
  }

  .home-paths .path-card.is-pointing .path-index {
    transform: none;
  }

  .home-paths .path-card,
  .home-paths .path-index,
  .home-paths .path-rule,
  .cap-item::before {
    transition: none;
  }

  .home-paths .path-card:hover,
  .home-paths .path-card:focus-visible {
    transform: none;
  }

  .home-paths .path-card:hover .path-index,
  .home-paths .path-card:focus-visible .path-index {
    transform: none;
  }

  .home-paths .path-card:hover .path-rule,
  .home-paths .path-card:focus-visible .path-rule {
    transform: none;
  }

  .home-spotlight .spotlight-media img,
  .home-spotlight .spotlight:hover .spotlight-media img {
    transform: none;
    transition: none;
  }

  .cta-finale .cta-aurora,
  .ref-marquee-track {
    animation: none;
  }

  .home-intro-media:hover .home-intro-media-frame img,
  .home-intro-media:hover .home-intro-badge,
  .stat-band .trust-item:hover,
  .stat-band .trust-item:hover .stat-ghost,
  .home-paths .path-card:hover,
  .home-paths .path-card:focus-visible,
  .cap-item:hover,
  .ref-marquee-item:hover img {
    transform: none;
  }
}