/* ==========================================================================
   FLEXIONEX — HOME
   Home-only styling. The hero runs taller and carries a technical line
   diagram behind the gradient; the rest tunes spacing for the landing rhythm.
   ========================================================================== */

/* ── HERO ────────────────────────────────────────────────────────────── */

.fx-hero--home {
  min-height: 90vh;
  align-items: center;
}

@media (max-width: 767px) {
  .fx-hero--home { min-height: 84vh; }
}

/* The engineering diagram sits behind the gradient, low contrast, as texture
   rather than illustration. It never competes with the headline. */
.fx-hero--home .fx-hero__diagram {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.fx-hero--home .fx-hero__diagram svg {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(58%, 780px);
  height: auto;
  opacity: .16;
  color: var(--fx-steel-300);
}

@media (max-width: 900px) {
  .fx-hero--home .fx-hero__diagram svg {
    right: 50%;
    transform: translate(50%, -50%);
    width: 120%;
    opacity: .08;
  }
}

.fx-hero--home .fx-display {
  max-width: 16ch;
}

.fx-hero--home .fx-hero__lead {
  max-width: 52ch;
}

/* Animated stroke draw on the diagram, once, on load. Respects reduced motion
   through the global no-motion class. */
.fx-hero--home .fx-hero__diagram path {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  animation: fx-draw 2.4s var(--fx-ease) forwards;
}

@keyframes fx-draw {
  to { stroke-dashoffset: 0; }
}

.no-js .fx-hero--home .fx-hero__diagram path {
  stroke-dashoffset: 0;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx-hero--home .fx-hero__diagram path {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* ── SECTION RHYTHM ──────────────────────────────────────────────────── */

/* The overview sits immediately under the hero and introduces the company
   stance, so it gets a little more breathing room above. */
.fx-context-home .fx-section--overview {
  padding-block-start: var(--fx-s9);
}

/* Home's solution grid is the split variant: four cards plus a list. On the
   landing page it carries the "start from the problem" message, so the dark
   band gives it weight. */
.fx-context-home .fx-section--solution-grid .fx-section__head {
  max-width: 44ch;
}

/* Capability grid on home uses the 4-8 asymmetric layout; tighten the gap so
   the four capability items read as one block beside the heading. */
.fx-context-home .fx-section--capability-grid .fx-capability {
  gap: var(--fx-s5) var(--fx-s6);
}

/* Metrics strip on home is light (kept in the 25-35% dark band). Give it a
   subtle top and bottom rule so it reads as a distinct beat. */
.fx-context-home .fx-section--metrics-strip {
  border-block: 1px solid var(--fx-border);
  background: var(--fx-bg-subtle);
}

/* The closing CTA band is the conversion anchor; a touch more vertical
   presence than a mid-page band. */
.fx-context-home .fx-section--cta-band {
  padding-block: var(--fx-s9);
}

/* ── INTRO ANIMATION SEQUENCING ──────────────────────────────────────── */

/* Hero content rises in on load, staggered, so the page assembles rather than
   snapping in. Guarded by the no-js and reduced-motion classes. */
.fx-hero--home .fx-eyebrow,
.fx-hero--home .fx-hero__title,
.fx-hero--home .fx-hero__lead,
.fx-hero--home .fx-hero__actions {
  opacity: 0;
  transform: translateY(16px);
  animation: fx-hero-rise .7s var(--fx-ease) forwards;
}

.fx-hero--home .fx-hero__title    { animation-delay: .08s; }
.fx-hero--home .fx-hero__lead     { animation-delay: .16s; }
.fx-hero--home .fx-hero__actions  { animation-delay: .24s; }

@keyframes fx-hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

.no-js .fx-hero--home [class*="fx-hero__"],
.no-js .fx-hero--home .fx-eyebrow {
  opacity: 1;
  transform: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx-hero--home [class*="fx-hero__"],
  .fx-hero--home .fx-eyebrow {
    opacity: 1;
    transform: none;
    animation: none;
  }
}