/* ==========================================================================
   Home hero (premium light lavender / white)

   Structure — the section is only a positioning context and a background:
     .hero        page band, height driven by its content
     .hero-bg     decorative layer (grid, glow, motes) — absolute, clipped
     .hero-inner  the two-column grid: copy + module slide deck

   No fixed height, no max-height and no vertical clipping anywhere: the
   content always determines the final height, and every decorative element
   is absolute + pointer-events:none inside .hero-bg.
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  isolation: isolate;
  /* `clip` contains the decorative orbs horizontally without creating a
     scroll container and without ever clipping content vertically. */
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
  background:
    radial-gradient(circle at 50% 20%, rgba(108, 53, 255, 0.12), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(109, 190, 69, 0.1), transparent 38%),
    linear-gradient(180deg, #F7F4FF 0%, #FFFFFF 100%);
  background-color: #ffffff;
  /* Flexible height: fills the first screen on tall displays, grows with the
     content on short ones. Never pinned, never clipped. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* soft luminous centre behind the copy, kept very low contrast on white */
.hero::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 22%;
  z-index: 0;
  width: 1100px;
  height: 760px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(108, 53, 255, 0.1) 0%,
    rgba(108, 53, 255, 0.04) 44%,
    rgba(108, 53, 255, 0) 72%
  );
  pointer-events: none;
}

/* whisper-thin frame vignette for depth (no dark corners on a light hero) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 96% at 50% 40%, rgba(17, 24, 39, 0) 58%, rgba(17, 24, 39, 0.045) 100%);
  pointer-events: none;
}

/* ---- Hero inner layout ---------------------------------------------------
   Two columns: copy on the left, module slide deck on the right. Both columns
   are minmax(0, …) so long words and the deck can never force the grid wider
   than the viewport, and the whole block sits in normal document flow. */
.hero-inner,
.hero-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  gap: 48px;
  align-items: center;
  text-align: left;
}

/* Left column — capped so the headline never runs the full width, with its
   own vertical padding so the badge and CTAs are never flush against the
   section edges. */
.hero-content {
  min-width: 0;
  max-width: 650px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(108, 53, 255, 0.22);
  box-shadow: 0 6px 20px rgba(75, 32, 200, 0.08);
  backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 700;
  color: var(--in4-purple-dark);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.hero-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--in4-green);
  box-shadow: 0 0 0 4px rgba(109, 190, 69, 0.18);
}

/* Headline scales with the viewport and always wraps naturally — no fixed
   pixel size, no negative letter-spacing that can clip the last glyph. */
.hero-title {
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--in4-navy);
  overflow-wrap: break-word;
}

.hero-title .grad {
  background: linear-gradient(96deg, var(--in4-purple) 0%, #8B5CF6 46%, var(--in4-green-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin-top: 22px;
  font-size: clamp(16.5px, 0.4vw + 15px, 19px);
  line-height: 1.65;
  color: var(--in4-text-muted);
  max-width: 52ch;
}

/* CTAs stay in normal flow — never absolute, never offset by `bottom`. */
.cta-group,
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-bottom: 8px;
}

/* ---- Headline typewriter ("Growing Enterprises") ----
   The full phrase stays in the DOM, so the h1 is always readable by
   assistive tech. JS only splits it into per-character spans and reveals
   them; with JS off, or reduced motion, nothing is hidden. */
.hero-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero-typed .tk-c {
  display: none;
  white-space: pre;
}

.hero-typed .tk-c.is-in {
  display: inline;
}

.hero-caret {
  display: none;
  width: 3px;
  height: 0.92em;
  margin-left: 3px;
  vertical-align: -0.1em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--in4-purple), var(--in4-green-dark));
  box-shadow: 0 0 10px rgba(108, 53, 255, 0.35);
}

.hero-caret.is-on {
  display: inline-block;
  animation: heroCaretBlink 0.85s steps(1) infinite;
}

@keyframes heroCaretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ==========================================================================
   Hero scene - dark premium environment
   L0 glow field + the one animated micro-grid ("mgrid")
   L1 soft orbs / L2 floating module pills / L3 copy
   ========================================================================== */

/* ---------------- L0/L1: background decor ---------------- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* soft floor sheen (light) */
.hero-bg-sheen {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(108, 53, 255, 0.06), rgba(109, 190, 69, 0.035) 46%, transparent 78%);
}

/* ---- mgrid: the single, signature animated grid ------------------------
   Every background line in the hero lives here: one fine square lattice
   that drifts slowly, one vertical light beam that rakes across it and one
   horizontal scan line that sweeps top-to-bottom. Lines are kept very low
   contrast and radially masked so they never compete with the copy. */
.hero-mgrid {
  position: absolute;
  left: -12%;
  right: -12%;
  top: -18%;
  bottom: -18%;
  background-image:
    linear-gradient(90deg, rgba(108, 53, 255, 0.075) 1px, transparent 1px),
    linear-gradient(180deg, rgba(108, 53, 255, 0.075) 1px, transparent 1px);
  background-size: 76px 76px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(78% 74% at 50% 46%, #000 0%, rgba(0, 0, 0, 0.6) 44%, rgba(0, 0, 0, 0.12) 74%, transparent 100%);
  mask-image: radial-gradient(78% 74% at 50% 46%, #000 0%, rgba(0, 0, 0, 0.6) 44%, rgba(0, 0, 0, 0.12) 74%, transparent 100%);
  animation: mgridDrift 34s linear infinite;
  will-change: background-position;
}

@keyframes mgridDrift {
  from { background-position: 0 0; }
  to   { background-position: 76px 76px; }
}

/* raking vertical beam - the spotlight that makes the grid feel alive */
.hero-mgrid-beam {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -24%;
  width: 260px;
  transform: skewX(-10deg);
  background:
    linear-gradient(90deg, transparent 0%, rgba(108, 53, 255, 0.01) 32%, rgba(108, 53, 255, 0.07) 50%, rgba(109, 190, 69, 0.015) 68%, transparent 100%);
  mix-blend-mode: multiply;
  animation: mgridSweep 15s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  will-change: transform;
}

@keyframes mgridSweep {
  0%   { transform: translate3d(0, 0, 0) skewX(-10deg); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate3d(70vw, 0, 0) skewX(-10deg); opacity: 0.9; }
  92%  { opacity: 1; }
  100% { transform: translate3d(140vw, 0, 0) skewX(-10deg); opacity: 0; }
}

/* horizontal scan line travelling down the grid */
.hero-mgrid-scan {
  position: absolute;
  left: -10%;
  right: -10%;
  top: -6%;
  height: 180px;
  background: linear-gradient(180deg, transparent 0%, rgba(108, 53, 255, 0.018) 28%, rgba(108, 53, 255, 0.05) 50%, rgba(108, 53, 255, 0.018) 72%, transparent 100%);
  animation: mgridScan 11s ease-in-out infinite;
  will-change: transform;
}

@keyframes mgridScan {
  0%   { transform: translate3d(0, -22vh, 0); opacity: 0; }
  14%  { opacity: 1; }
  50%  { transform: translate3d(0, 40vh, 0); opacity: 0.8; }
  86%  { opacity: 1; }
  100% { transform: translate3d(0, 104vh, 0); opacity: 0; }
}

/* drifting glow motes - depth without any extra lines */
.hero-mote {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  animation: heroMoteDrift 18s ease-in-out infinite alternate;
}

.hero-mote--a {
  top: 16%; left: 12%;
  width: 6px; height: 6px;
  background: #a78bfa;
  box-shadow: 0 0 14px 3px rgba(167, 139, 250, 0.5);
}

.hero-mote--b {
  top: 62%; right: 16%;
  width: 5px; height: 5px;
  background: #22c7d6;
  box-shadow: 0 0 14px 3px rgba(34, 199, 214, 0.42);
  animation-duration: 21s;
  animation-delay: -6s;
}

.hero-mote--c {
  top: 84%; left: 26%;
  width: 4px; height: 4px;
  background: #6dbe45;
  box-shadow: 0 0 12px 3px rgba(109, 190, 69, 0.4);
  animation-duration: 24s;
  animation-delay: -11s;
}

@keyframes heroMoteDrift {
  from { transform: translate3d(0, 0, 0); opacity: 0.35; }
  to   { transform: translate3d(26px, -34px, 0); opacity: 1; }
}

/* large blurred decorative spheres (light, low opacity) */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.5;
}

.hero-orb--tr {
  top: -140px;
  right: -110px;
  width: 460px;
  height: 460px;
  background: radial-gradient(closest-side, rgba(108, 53, 255, 0.28), transparent 72%);
}

.hero-orb--bl {
  bottom: -180px;
  left: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.22), transparent 72%);
}

.hero-orb--br {
  bottom: -120px;
  right: -80px;
  width: 380px;
  height: 380px;
  background: radial-gradient(closest-side, rgba(109, 190, 69, 0.26), transparent 72%);
}

/* ==========================================================================
   Hero module slide deck (right column)
   --------------------------------------------------------------------------
   A single product frame that cross-fades between module illustrations. One
   frame, one illustration at a time.

   Sizing rules that keep it from ever being cropped:
     · the wrapper is width-driven and capped, pushed right with margin-left
       (no translateX, no negative `right`)
     · the frame has NO aspect-ratio and NO fixed height — every slide is
       stacked in the same grid cell, so the frame is as tall as its tallest
       illustration and shrinks with `min-height` on short screens
     · images keep their intrinsic ratio (max-height + object-fit: contain)
   ========================================================================== */
.hero-stage,
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Neutralise the legacy `.hero-visual` helper in responsive.css (written for
   the old hero visual: `order:-1`, a fixed min-height and a bottom offset).
   Re-declared here at higher specificity so the deck keeps its place in the
   grid, after the copy, and its height is driven by the slide content. */
.hero .hero-visual {
  order: 0;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.hero-slides {
  position: relative;
  width: 100%;
  min-height: clamp(320px, 30vw, 440px);
  border-radius: 26px;
  background: linear-gradient(155deg, #ffffff 0%, #f7f4ff 100%);
  border: 1px solid var(--in4-border);
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.04), 0 30px 70px rgba(75, 32, 200, 0.12);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* pointer parallax (JS writes --tx / --ty) */
  transform: perspective(1500px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 0.45s var(--ease);
}

/* ==========================================================================
   Hero slide deck — motion
   --------------------------------------------------------------------------
   Every slide shares one grid cell. An inactive slide rests "parked" off-axis
   (blur + shift + shrink); the active one plays a keyframe that lands it on
   the cell, then its label, art and accent glow follow with a small stagger.
   `data-dir` on the deck flips the travel direction, so stepping backwards
   mirrors the animation instead of rewinding it.
   ========================================================================== */
.hero-slides {
  --enter-y: 54px;
  --exit-y: -46px;
  --hero-dur: 4.2s;
}

.hero-slides[data-dir="back"] {
  --enter-y: -54px;
  --exit-y: 46px;
}

.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  padding: clamp(1.1rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 1.4vw, 1.05rem);
  min-width: 0;
  /* resting (inactive) state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--exit-y)) scale(0.9);
  filter: blur(8px);
  transition: opacity 0.55s var(--ease), transform 0.65s var(--ease),
    filter 0.55s var(--ease), visibility 0s linear 0.65s;
}

/* per-slide accent bloom, tinted with that slide's --acc */
.hero-slide::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -46%;
  width: 130%;
  height: 78%;
  transform: translateX(-50%) scale(0.85);
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--acc, #6C35FF) 40%, transparent),
    transparent 72%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  z-index: 2;
  animation: heroSlideIn 0.78s var(--ease) both;
  transition: opacity 0.55s var(--ease), transform 0.65s var(--ease),
    filter 0.55s var(--ease), visibility 0s linear 0s;
}

.hero-slide.is-active::after {
  opacity: 0.6;
  transform: translateX(-50%) scale(1);
  animation: heroGlow 6s ease-in-out 0.5s infinite;
}

@keyframes heroSlideIn {
  from {
    opacity: 0;
    transform: translateY(var(--enter-y)) scale(0.9) rotateX(-10deg);
    filter: blur(12px);
  }
  60% { filter: blur(0); }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes heroGlow {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.75; }
}

/* slow push-in on the artwork plus a gentle float on the inner image:
   two stacked transform layers read as depth instead of one flat zoom */
.hero-slide-art {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  animation: heroKen 9s ease-out both;
  will-change: transform;
}

@keyframes heroKen {
  from { transform: scale(0.96) translateY(10px); }
  to { transform: scale(1.04) translateY(-6px); }
}

.hero-slide.is-active .hero-slide-art img {
  animation: heroFloat 6.5s ease-in-out 0.8s infinite;
}

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

/* the illustration sits on its own white "screen" so it reads as product UI */
.hero-slide-art img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  padding: clamp(0.6rem, 1.2vw, 1rem);
  background: #ffffff;
  border: 1px solid var(--in4-border);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.08);
  will-change: transform;
}

.hero-slide-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--acc, #6C35FF) 10%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--acc, #6C35FF) 26%, transparent);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--acc, #6C35FF);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* label + caption rise in once the slide has landed */
.hero-slide.is-active .hero-slide-tag {
  animation: heroPop 0.6s var(--ease) 0.16s both;
}

.hero-slide-note {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 38ch;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6B628F;
}

.hero-slide.is-active .hero-slide-note {
  animation: heroPop 0.6s var(--ease) 0.26s both;
}

@keyframes heroPop {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.hero-slide-tag .ico { font-size: 13px; width: 1em; height: 1em; }

.hero-slide-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
}

.hero-slide-dot {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--in4-border);
  cursor: pointer;
  transition: width 0.35s var(--ease), background-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.hero-slide-dot::before {
  /* autoplay progress wipe */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #8B5CF6, #4B20C8);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero-slide-dot:hover { background: #cbb8ff; transform: scale(1.25); }

.hero-slide-dot:focus-visible {
  outline: 2px solid #6C35FF;
  outline-offset: 4px;
}

.hero-slide-dot.active {
  width: 30px;
  background: #e7dffd;
}

.hero-slide-dot.active::before {
  animation: heroDotFill var(--hero-dur, 4.2s) linear both;
}

.hero-slide-dot.active:hover { background: #ddd0fb; }

.hero-slide-dots.is-paused .hero-slide-dot.active::before {
  animation-play-state: paused;
}

@keyframes heroDotFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* module name tooltip on dot hover / keyboard focus */
.hero-slide-dot::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding: 6px 11px;
  border-radius: 9px;
  background: #241B3F;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.hero-slide-dot:hover::after,
.hero-slide-dot:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Responsive ladder
   --------------------------------------------------------------------------
   Large desktop  full 2 columns, 1280 max, generous gaps
   Laptop 1440    smaller headline + deck
   Laptop 1366    explicit step-down, keeps both CTAs on screen
   Laptop 1024    1.05fr / 0.95fr, tighter padding, deck still visible
   <= 992         single column: copy first, deck underneath
   <= 768         mobile sizing, stacked CTAs, full-width deck
   Short screens  drops the 100vh fill so nothing is pushed below the fold
   ========================================================================== */

/* Large desktop — a little more air between the two columns */
@media (min-width: 1441px) {
  .hero-inner,
  .hero-grid { gap: 64px; }

  .hero-stage,
  .hero-visual { max-width: 580px; }
}

@media (max-width: 1440px) {
  .hero-inner,
  .hero-grid {
    gap: 36px;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.88fr);
  }

  .hero-stage,
  .hero-visual { max-width: 500px; }
}

@media (max-width: 1366px) {
  .hero-title { font-size: clamp(38px, 4vw, 54px); }
  .hero-content { max-width: 600px; }
  .hero-slides { min-height: clamp(300px, 28vw, 400px); }
}

/* Small laptop — never hide the right visual, only shrink it */
@media (max-width: 1199px) {
  .hero-inner,
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 28px;
    padding-left: 28px;
    padding-right: 28px;
  }

  .hero-title { font-size: clamp(36px, 3.6vw, 46px); }
  .hero-sub { font-size: 16.5px; }
  .hero-stage,
  .hero-visual { max-width: 440px; }
  .hero-slides { min-height: 300px; padding: 0; }
  .hero-slide { padding: 1rem; }
}

/* Tablet — single column, content order preserved (copy, then visual) */
@media (max-width: 992px) {
  .hero {
    height: auto;
    min-height: 0;
    padding-top: 96px;
    padding-bottom: 64px;
  }

  .hero-inner,
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .hero-content {
    max-width: 720px;
    margin-inline: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero-sub { margin-inline: auto; }
  .hero-ctas,
  .cta-group { justify-content: center; }

  .hero-stage,
  .hero-visual { max-width: 620px; }

  /* higher-specificity reset so the legacy responsive.css margin/order cannot win */
  .hero .hero-visual { margin: 30px auto 0; }
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    padding-top: 64px;
    padding-bottom: 56px;
  }

  .hero-inner,
  .hero-grid {
    gap: 26px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-title { font-size: clamp(36px, 10vw, 48px); line-height: 1.08; }
  .hero-sub { font-size: 16.5px; max-width: 100%; }
  .hero-eyebrow { font-size: 12.5px; }

  .hero-ctas,
  .cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 28px;
    padding-bottom: 8px;
  }

  .hero-ctas .btn,
  .cta-group .btn { width: 100%; }

  .hero-stage,
  .hero-visual { max-width: 420px; }
  .hero-slides { min-height: 260px; border-radius: 20px; }
  .hero-slide { padding: 0.9rem; }
}

@media (max-width: 420px) {
  .hero { padding-top: 48px; padding-bottom: 44px; }
  .hero-title { font-size: clamp(32px, 9.4vw, 40px); }
  .hero-stage,
  .hero-visual { max-width: 100%; }
  .hero-slides { min-height: 230px; }
}

/* Short screens (1366x768, 1280x720, laptops with browser chrome) —
   give up the first-screen fill so nothing is pushed below the fold. */
@media (max-height: 750px) and (min-width: 993px) {
  .hero {
    min-height: auto;
    padding-top: 60px;
    padding-bottom: 50px;
  }

  .hero-content h1,
  .hero-title { font-size: clamp(38px, 4vw, 50px); }

  .hero-sub { font-size: 16.5px; margin-top: 18px; }
  .hero-eyebrow { margin-bottom: 14px; }

  .hero-stage,
  .hero-visual { max-width: 460px; }

  .hero-slides { min-height: 290px; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-mgrid,
  .hero-mgrid-beam,
  .hero-mgrid-scan,
  .hero-mote {
    animation: none !important;
  }

  .hero-mgrid-beam,
  .hero-mgrid-scan { opacity: 0; }

  .hero-slide,
  .hero-slide-dot,
  .hero-slides,
  .hero-slide-art,
  .hero-slide-tag,
  .hero-slide-note,
  .hero-slide-art img,
  .hero-slide::after,
  .hero-slide-dot::before { transition: none !important; }

  .hero-slide,
  .hero-slide-art,
  .hero-slide-art img,
  .hero-slide-tag,
  .hero-slide-note,
  .hero-slide::after,
  .hero-slide-dot::before { animation: none !important; }

  .hero-slides { transform: none !important; }
  .hero-slide-dot.active::before { transform: scaleX(1); }

}