/* ============================================================================
   Fan Constructor page — Wave 7 (design source: package/fan-constructor.html
   + fan-constructor.css).

   Consumes theme.css (semantic tokens) and chrome.css (.container, .btn*)
   only. No :root block, no hex literals, no named CSS colours live here,
   with one narrow exception explicitly permitted by the build brief: the
   handful of --fc-* custom properties below, scoped under .fan-constructor-page
   (never :root), for brand hues this product page uses that theme.css has no
   token for at all (a blue accent family and a lime accent). Every rule past
   that declaration block consumes var(--fc-*) or a theme.css token — never a
   raw literal — see theme.css:6-16 for the fixed-surface token contract this
   follows.

   Four colour families are used, extending the convention in
   wwwroot/css/pages/home.css and software.css:
   - "Fixed dark" (--on-dark + --fc-blue/--fc-lime/--green-950): the hero, the
     Configuration deep-dive and the closing CTA card are always a saturated
     dark surface regardless of the site theme toggle — branded moments, not
     theme-reactive content, same contract as Home's hero / Software's hero.
   - "Fixed light" (raw --paper/--ink/--ink-soft/--line/--fc-blue-pale): the
     journey sub-nav, the sticky product-screenshot stage and the pale-blue
     journey/proof wash all read the same in both modes, exactly like
     Software's showcase mockup-window frames (documented in software.css) —
     this whole zone exists to host product screenshots in a light frame, so
     it must not invert to a dark frame around a light screenshot.
   - "Fixed brand accent" (--fc-lime): the lime CTA buttons and checkmarks-on-dark
     are a fixed product accent colour, used identically in both modes.
   - "Reactive" (--bg, --surface, --fg, --fg-muted, --border*, --accent*):
     every ordinary content section (overview, audience, the closing section's
     outer wrapper) so the page participates in the site-wide light/dark toggle.
   Raw Layer-1 usage (--green-950, --paper, --ink, --ink-soft, --line) is
   confined to fixed-surface construction, same exception documented in
   theme.css:6-16 and used by home.css/software.css.
   ========================================================================= */

.fan-constructor-page {
  /* Page-specific brand hues with no theme.css equivalent (permitted to stay
     scoped here per the build brief — theme.css intentionally only names a
     green palette). --fc-deep intentionally is NOT declared: it would be a
     near-duplicate of --green-950 (#102416 vs #14260f, imperceptibly
     different), so fixed-dark chrome below reuses --green-950 directly
     instead of manufacturing a redundant token. */
  --fc-lime: #bdf36b;
  --fc-blue: #0063b0;
  --fc-blue-bright: #49afff;
  --fc-blue-pale: #e5f3ff;

  overflow-x: hidden;
  background: var(--bg);
}

.fan-constructor-page header .nav-current {
  color: var(--fc-lime);
}

.fan-constructor-page header.is-scrolled .nav-current {
  color: var(--green-700);
}

/* ============================================================================
   Hero — fixed dark surface (design source: .fc-hero)
   ========================================================================= */
.fc-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 162px 0 112px;
  color: var(--on-dark);
  background:
    radial-gradient(circle at 83% 32%, color-mix(in srgb, var(--green-500) 27%, transparent), transparent 28%),
    radial-gradient(circle at 6% 90%, color-mix(in srgb, var(--fc-lime) 12%, transparent), transparent 27%),
    linear-gradient(132deg, var(--green-950) 0%, var(--fc-blue) 53%, var(--fc-blue) 100%);
}

.fc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image:
    linear-gradient(color-mix(in srgb, var(--on-dark) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--on-dark) 10%, transparent) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(90deg, var(--green-950), color-mix(in srgb, var(--green-950) 20%, transparent) 75%, transparent);
}

.fc-hero-glow {
  position: absolute;
  top: 17%;
  right: 10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fc-lime) 11%, transparent);
  filter: blur(90px);
  pointer-events: none;
}

.fc-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.fc-orbit-one {
  right: -250px;
  bottom: -390px;
  width: 900px;
  height: 900px;
  box-shadow:
    0 0 0 110px color-mix(in srgb, var(--on-dark) 1.8%, transparent),
    0 0 0 220px color-mix(in srgb, var(--on-dark) 1.2%, transparent);
}

.fc-orbit-two {
  top: -430px;
  left: 38%;
  width: 610px;
  height: 610px;
}

.fc-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(470px, 0.85fr);
  gap: clamp(58px, 7vw, 118px);
  
  min-height: calc(100svh - 236px);
}

.fc-hero-copy {
  max-width: 780px;
}

.fc-eyebrow,
.fc-section-index {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--on-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-left: 4px;
}

.fc-section-index {
  display: none;
}

.fc-hero h1 {
  max-width: 820px;
  margin: 0;
    font-family: var(--font-display);
    font-size: clamp(54px, 6.2vw, 92px);
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--on-dark);
    text-wrap: balance;
}

.fc-hero h1 em {
  color: var(--fc-lime);
  font-style: normal;
}

.fc-hero-lead {
  max-width: 690px;
  margin-top: 31px;
  color: color-mix(in srgb, var(--on-dark) 73%, transparent);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.72;
}

.fc-hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 38px;
}

.fc-btn-light {
  min-width: 156px;
  color: var(--green-950);
  background: var(--fc-lime);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--green-950) 25%, transparent);
}

.fc-btn-light:hover {
  color: var(--green-950);
  background: color-mix(in srgb, var(--fc-lime) 84%, var(--paper));
}

.fc-btn-light span,
.fc-btn-dark span {
  transition: transform 0.25s ease;
}

.fc-btn-light:hover span,
.fc-btn-dark:hover span {
  transform: translateX(4px);
}

.fc-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 28%, transparent);
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 750;
  transition:
    gap 0.25s ease,
    border-color 0.25s ease;
}

.fc-text-link:hover {
  gap: 15px;
  border-color: var(--fc-lime);
}

.fc-proof-line {
  display: flex;
  max-width: 630px;
  align-items: flex-start;
  gap: 12px;
  margin-top: 39px;
  color: var(--on-dark);
  font-size: 16px;
  line-height: 1.65;
}

.fc-proof-line i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--fc-lime);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fc-lime) 10%, transparent);
}

.fc-hero-visual {
  position: relative;
  padding: 24px 7px 42px;
  transform: translateY(var(--fc-hero-shift, 0));
}

.fc-window,
.fc-stage-frame {
  overflow: hidden;
  /* border: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
  border-radius: 21px;
  background: var(--green-950);
  box-shadow: 0 42px 100px color-mix(in srgb, var(--green-950) 50%, transparent); */
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--green-300) 20%, transparent);
  border-radius: 30px;
  background: color-mix(in srgb, var(--on-dark) 5.5%, transparent);
  box-shadow: var(--shadow-lg);
}

.fc-window {
  /* transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
  transform-origin: center center; */
}

.fc-window-bar {
  /* display: flex; */
  display: none;
  height: 36px;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 8%, transparent);
  background: color-mix(in srgb, var(--green-950) 94%, transparent);
}

.fc-window-bar > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--on-dark) 24%, transparent);
}

.fc-window-bar small {
  margin-left: auto;
  color: color-mix(in srgb, var(--on-dark) 47%, transparent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.fc-window > img {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  object-fit: cover;
  border-radius: 22px;
}

.fc-float-card {
  position: absolute;
  z-index: 2;
  display: grid;
  min-width: 184px;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 15%, transparent);
  border-radius: 13px;
  color: var(--on-dark);
  background: color-mix(in srgb, var(--green-950) 82%, transparent);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--green-950) 30%, transparent);
  backdrop-filter: blur(13px);
  animation: fc-float 5s ease-in-out infinite;
}

.fc-float-card span {
  color: color-mix(in srgb, var(--on-dark) 48%, transparent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fc-float-card strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 12px;
}

.fc-float-card strong i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fc-lime);
}

.fc-float-card-top {
  top: -5px;
  right: -17px;
}

.fc-float-card-bottom {
  right: 38px;
  bottom: 0;
  animation-delay: -2.2s;
}

@keyframes fc-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

.fc-scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: 29px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 13px;
  color: color-mix(in srgb, var(--on-dark) 48%, transparent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.fc-scroll-cue i {
  position: relative;
  width: 1px;
  height: 31px;
  overflow: hidden;
  background: color-mix(in srgb, var(--on-dark) 18%, transparent);
}

.fc-scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fc-lime);
  animation: fc-scroll 1.9s ease-in-out infinite;
}

@keyframes fc-scroll {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(100%);
  }
}

/* ============================================================================
   Overview — reactive content section (design source: .fc-overview)
   ========================================================================= */
.fc-overview {
  padding: 134px 0 142px;
  background: var(--bg);
}

.fc-section-heading {
  display: grid;
  gap: clamp(44px, 8vw, 130px);
  align-items: start;
}

.fc-section-heading .fc-section-index,
.fc-audience .fc-section-index {
  color: var(--accent);
}

.fc-section-heading h2 {
  max-width: 1040px;
  color: var(--fg);
  font-size: clamp(42px, 5.1vw, 73px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.056em;
  text-wrap: balance;
}

.fc-overview-grid {
  display: grid;
  grid-template-columns: auto;
  gap: clamp(65px, 11vw, 170px);
  align-items: start;
  margin-top: 90px;
}

.fc-overview-copy p {
  margin-top: 25px;
  color: var(--fg-muted);
  font-size: 17px;
  line-height: 1.88;
}

.fc-overview-copy p:first-child {
  margin-top: 0;
  color: var(--fg);
  font-size: 19px;
}

/* ============================================================================
   Journey — fixed light "screenshot chrome" zone (design source:
   .fc-journey-shell / .fc-journey-nav / .fc-journey / .fc-stage / .fc-steps).
   Reads the same in both theme modes: it exists to host product screenshots
   in a light frame, same rationale as Software's showcase mockup windows.
   ========================================================================= */
.fc-journey-nav {
  position: sticky;
  z-index: 35;
  top: 82px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(15px);
}

.fc-journey-shell {
  background: var(--green-050);
}

.fc-journey-nav .container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  min-width: 790px;
}

.fc-journey-nav a {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 15px;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color 0.25s ease,
    background 0.25s ease;
}

.fc-journey-nav a:first-child {
  border-left: 1px solid var(--line);
}

.fc-journey-nav a:hover {
  color: var(--fc-blue);
}

.fc-journey-nav a span {
  color: color-mix(in srgb, var(--ink-soft) 60%, var(--paper));
  font-size: 8px;
}

.fc-journey-nav a.is-active {
  color: var(--fc-blue);
  background: var(--fc-blue-pale);
}

.fc-journey-nav a.is-active span {
  color: var(--fc-blue);
}

.fc-journey {
  padding: 126px 0 80px;
  scroll-margin-top: 142px;
  background: var(--fc-blue-pale);
}

.fc-journey-intro {
  display: grid;
  grid-template-columns: auto;
  gap: clamp(45px, 8vw, 120px);
  align-items: start;
  margin-bottom: 58px;
}

.fc-journey-intro .fc-section-index {
  color: var(--fc-blue);
}

.fc-journey-intro h2 {
  max-width: 940px;
  color: var(--ink);
  font-size: clamp(43px, 5vw, 70px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.fc-journey-grid {
  display: grid;
  grid-template-columns: minmax(410px, 0.82fr) minmax(0, 0.78fr);
  gap: clamp(70px, 10vw, 155px);
  align-items: start;
}

.fc-mobile-journey-images {
  display: none;
}

.fc-stage {
  position: sticky;
  top: 177px;
  min-width: 0;
}

.fc-stage-frame {
  border-color: color-mix(in srgb, var(--green-950) 13%, transparent);
  background: var(--paper);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--green-950) 15%, transparent);
}

.fc-stage-frame .fc-window-bar {
  background: var(--green-950);
}

.fc-stage-images {
  position: relative;
  aspect-ratio: 1.62 / 1;
  overflow: hidden;
  background: var(--green-050);
}

.fc-stage-deck {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.025) translateY(9px);
  transition:
    opacity 0.55s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.fc-stage-deck.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* JS sets stageCopy's title via textContent from plain-cased content (e.g. "Selection"); the
   uppercase treatment here is presentational so authored content never has to be shouty. */
[data-stage-title] {
  text-transform: uppercase;
}

.fc-slider,
.fc-slider-viewport,
.fc-slider-track,
.fc-slider-slide {
  height: 100%;
}

.fc-slider {
  position: relative;
  overflow: hidden;
  background: var(--green-050);
}

.fc-slider-viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.fc-slider-viewport:focus-visible {
  outline: 3px solid var(--fc-lime);
  outline-offset: -3px;
}

.fc-slider-track {
  display: flex;
  transform: translate3d(calc(var(--fc-slide, 0) * -100%), 0, 0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.fc-slider-slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  background: var(--paper);
}

.fc-slider-slide img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22px;
}

.fc-slider-controls {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
  border-radius: 999px;
  color: var(--on-dark);
  background: color-mix(in srgb, var(--green-950) 90%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--green-950) 20%, transparent);
  backdrop-filter: blur(8px);
}

.fc-slider-controls button {
  display: grid;
  width: 31px;
  height: 31px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--on-dark);
  background: color-mix(in srgb, var(--on-dark) 10%, transparent);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.fc-slider-controls button:hover,
.fc-slider-controls button:focus-visible {
  color: var(--green-950);
  background: var(--fc-blue-bright);
  outline: none;
}

.fc-slider-controls > span {
  min-width: 52px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
}

.fc-slider-controls b {
  color: var(--fc-blue-bright);
  font-size: 11px;
}

.fc-stage-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 25px;
  align-items: start;
  margin-top: 24px;
}

.fc-stage-meta > span {
  color: color-mix(in srgb, var(--ink-soft) 70%, var(--paper));
  font-size: 10px;
  font-weight: 800;
}

.fc-stage-meta b {
  color: var(--fc-blue);
  font-family: var(--font-display);
  font-size: 18px;
}

.fc-stage-meta p {
  max-width: 530px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.65;
}

.fc-stage-progress {
  height: 2px;
  overflow: hidden;
  margin-top: 20px;
  background: var(--line);
}

.fc-stage-progress i {
  display: block;
  width: var(--fc-progress, 20%);
  height: 100%;
  background: var(--fc-blue);
  transition: width 0.45s ease;
}

.fc-erp-visual {
  display: grid;
  grid-template-columns: auto 1fr minmax(190px, 1.2fr) 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 42px;
  color: var(--on-dark);
  background: var(--green-950);
}

.fc-erp-source,
.fc-erp-target {
  display: grid;
  width: 105px;
  height: 105px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
  border-radius: 50%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
}

.fc-erp-target {
  color: var(--green-950);
  background: var(--fc-lime);
}

.fc-erp-visual > i {
  height: 1px;
  background: color-mix(in srgb, var(--on-dark) 22%, transparent);
}

.fc-erp-visual > div {
  display: grid;
  gap: 7px;
}

.fc-erp-visual > div span {
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
  border-radius: 7px;
  color: color-mix(in srgb, var(--on-dark) 76%, transparent);
  background: color-mix(in srgb, var(--on-dark) 5.5%, transparent);
  font-size: 9px;
  text-align: center;
}

.fc-steps {
  min-width: 0;
}

.fc-step {
  min-height: 105vh;
  min-height: 105svh;
  padding: 57px 0 150px;
  scroll-margin-top: 172px;
  opacity: 0.44;
  transition: opacity 0.4s ease;
}

.fc-step.is-active {
  opacity: 1;
}

.fc-step-number {
  color: var(--fc-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fc-step h2 {
  max-width: 670px;
  margin-top: 20px;
  color: var(--ink);
  font-size: clamp(40px, 4.25vw, 63px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.056em;
  text-wrap: balance;
}

.fc-step p {
  max-width: 690px;
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.83;
}

.fc-step .fc-step-lead {
  margin-top: 30px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.72;
}

.fc-step blockquote {
  position: relative;
  max-width: 660px;
  margin: 30px 0 0;
  padding: 24px 27px 24px 51px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 75%, transparent);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
}

.fc-step blockquote::before {
  content: "";
  position: absolute;
  top: 27px;
  bottom: 27px;
  left: 25px;
  width: 3px;
  border-radius: 3px;
  background: var(--fc-blue);
}

.fc-feature-list {
  display: grid;
  gap: 0;
  max-width: 690px;
  margin: 31px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.fc-feature-list li {
  position: relative;
  padding: 15px 10px 15px 31px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.fc-feature-list li::before {
  content: "\2713";
  position: absolute;
  top: 15px;
  left: 4px;
  color: var(--green-600);
  font-weight: 800;
}

.fc-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 31px;
  padding-bottom: 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 70%, var(--paper));
  color: var(--fc-blue);
  font-size: 13px;
  font-weight: 800;
  transition: gap 0.25s ease;
}

.fc-inline-link:hover {
  gap: 15px;
}

/* ============================================================================
   Configuration deep-dive — fixed dark surface (design source: .fc-config)
   ========================================================================= */
.fc-config {
  position: relative;
  overflow: hidden;
  padding: 135px 0 145px;
  color: var(--on-dark);
  background: radial-gradient(circle at 89% 5%, color-mix(in srgb, var(--green-500) 23%, transparent), transparent 26%), var(--fc-blue);
}

.fc-config::after {
  content: "";
  position: absolute;
  right: -290px;
  bottom: -480px;
  width: 820px;
  height: 820px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 7%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 95px color-mix(in srgb, var(--on-dark) 1.2%, transparent),
    0 0 0 190px color-mix(in srgb, var(--on-dark) 0.8%, transparent);
}

.fc-config .container {
  position: relative;
  z-index: 1;
}

.fc-config .fc-section-index {
  color: var(--fc-lime);
}

.fc-config-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.42fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: end;
}

.fc-config-heading h2 {
  max-width: 900px;
  margin-top: 22px;
  font-size: clamp(43px, 5.25vw, 75px);
  font-weight: 600;
  line-height: 0.99;
  letter-spacing: -0.058em;
}

.fc-config-heading > p {
  padding-bottom: 8px;
  color: color-mix(in srgb, var(--on-dark) 57%, transparent);
  font-size: 16px;
  line-height: 1.72;
}

.fc-config-tabs {
  display: grid;
  grid-template-columns: minmax(230px, 0.27fr) minmax(0, 1fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: start;
  margin-top: 84px;
}

.fc-tab-list {
  display: grid;
}

.fc-tab-list button {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 61px;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  color: color-mix(in srgb, var(--on-dark) 48%, transparent);
  background: transparent;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition:
    color 0.25s ease,
    padding 0.25s ease;
}

.fc-tab-list button span {
  color: color-mix(in srgb, var(--on-dark) 24%, transparent);
  font-size: 9px;
}

.fc-tab-list button:hover,
.fc-tab-list button[aria-selected="true"] {
  padding-left: 16px;
  color: var(--on-dark);
}

.fc-tab-list button[aria-selected="true"] span {
  color: var(--fc-blue-bright);
}

.fc-tab-list button:focus-visible {
  outline: 2px solid var(--fc-lime);
  outline-offset: 3px;
}

.fc-tab-panels {
  min-width: 0;
}

.fc-tab-panels > article {
  animation: fc-panel-in 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fc-panel-in {
  from {
    opacity: 0;
    transform: translateY(17px);
  }
}

.fc-config-copy {
  margin-bottom: 35px;
}

.fc-config-copy > span {
  color: var(--fc-lime);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fc-config-copy h3 {
  max-width: 670px;
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.06;
}

.fc-config-copy p {
  color: color-mix(in srgb, var(--on-dark) 58%, transparent);
  font-size: 14px;
  line-height: 1.75;
}

.fc-tab-panels figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--on-dark) 15%, transparent);
  border-radius: 21px;
  /* background: var(--green-950); */
  box-shadow: 0 35px 80px color-mix(in srgb, var(--green-950) 25%, transparent);
}

.fc-tab-panels figure img {
  width: 100%;
  aspect-ratio: 1.85 / 1;
  object-fit: cover;
}

.fc-tab-panels figcaption {
  padding: 17px 20px;
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
  color: color-mix(in srgb, var(--on-dark) 50%, transparent);
  font-size: 11px;
  line-height: 1.5;
}

/* ============================================================================
   Audience — reactive content section (design source: .fc-audience)
   ========================================================================= */
.fc-audience {
  padding: 136px 0 145px;
  background: var(--bg);
}

.fc-audience .fc-section-heading {
  grid-template-columns: auto;
  gap: clamp(35px, 6vw, 90px);
}

.fc-audience .fc-section-heading h2 {
  font-size: clamp(42px, 4.5vw, 65px);
}

.fc-audience .fc-section-heading > p {
  padding-top: 8px;
  color: var(--fg-muted);
  font-size: 16px;
  line-height: 1.75;
}

.fc-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 78px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.fc-audience-card {
  position: relative;
  min-height: 345px;
  padding: 31px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition:
    color 0.35s ease,
    background 0.35s ease,
    transform 0.35s ease;
}

.fc-audience-card:hover {
  z-index: 2;
  color: var(--on-dark);
  background: var(--fc-blue);
  transform: translateY(-8px);
}

.fc-audience-card > span {
  color: var(--green-600);
  font-size: 10px;
  font-weight: 800;
}

.fc-audience-card:hover > span {
  color: var(--fc-lime);
}

.fc-audience-card h3 {
  margin-top: 10px;
  color: var(--fg);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 650;
  line-height: 1.08;
}

.fc-audience-card:hover h3 {
  color: var(--on-dark);
}

.fc-audience-card p {
  margin-top: 18px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.7;
}

.fc-audience-card:hover p {
  color: color-mix(in srgb, var(--on-dark) 61%, transparent);
}

/* ============================================================================
   Proof — fixed light accent wash, same pale-blue motif as the journey
   section (design source: .fc-proof)
   ========================================================================= */
.fc-proof {
  padding: 122px 0;
  background: var(--fc-blue-pale);
}

.fc-proof .fc-section-index {
  color: var(--fc-blue);
}

.fc-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}

.fc-proof-copy h2 {
  max-width: 900px;
  margin-top: 22px;
  color: var(--ink);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.056em;
}

.fc-proof-copy p {
  max-width: 780px;
  margin-top: 31px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.82;
}

/* ============================================================================
   Closing — reactive outer section wrapping a fixed dark CTA card (design
   source: .fc-closing)
   ========================================================================= */
.fc-closing {
  padding: 96px 0 110px;
  background: var(--bg);
}

.fc-closing-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 70px;
  align-items: end;
  overflow: hidden;
  padding: clamp(43px, 6.5vw, 92px);
  border-radius: 34px;
  color: var(--on-dark);
  background: radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--fc-blue-bright) 20%, transparent), transparent 28%), var(--fc-blue);
  box-shadow: 0 30px 75px color-mix(in srgb, var(--green-950) 19%, transparent);
}

.fc-closing-card::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -260px;
  width: 470px;
  height: 470px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 75px color-mix(in srgb, var(--on-dark) 1.8%, transparent);
}

.fc-closing-card > * {
  position: relative;
  z-index: 1;
}

.fc-closing-card > div > span {
  display: block;
  color: var(--fc-blue-pale);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fc-closing-card h2 {
  max-width: 920px;
  margin-top: 19px;
  font-size: clamp(40px, 5vw, 71px);
  font-weight: 600;
  line-height: 0.99;
  letter-spacing: -0.058em;
}

.fc-closing-card p {
  max-width: 700px;
  margin-top: 25px;
  color: color-mix(in srgb, var(--on-dark) 58%, transparent);
  font-size: 15px;
  line-height: 1.72;
}

.fc-closing-actions {
  display: grid;
  min-width: 180px;
  gap: 17px;
  justify-items: center;
}

.fc-btn-dark {
  width: 100%;
  color: var(--green-950);
  background: var(--fc-lime);
}

.fc-btn-dark:hover {
  color: var(--green-950);
  background: color-mix(in srgb, var(--fc-lime) 84%, var(--paper));
}

.fc-closing-link {
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 30%, transparent);
  color: color-mix(in srgb, var(--on-dark) 74%, transparent);
  font-size: 12px;
  font-weight: 750;
}

.fan-constructor-page footer {
  background: var(--bg);
}

/* ============================================================================
   Reveal-on-scroll utility + responsive + reduced motion
   ========================================================================= */
.fc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.fc-hero .fc-reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.fc-hero .fc-reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.fc-hero .fc-reveal:nth-child(4) {
  transition-delay: 0.24s;
}

.fc-audience-card:nth-child(2) {
  transition-delay: 0.08s;
}

.fc-audience-card:nth-child(3) {
  transition-delay: 0.16s;
}

.fc-audience-card:nth-child(4) {
  transition-delay: 0.24s;
}

@media (max-width: 1180px) {
  .fc-hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.82fr);
    gap: 55px;
  }

  .fc-overview-copy {
    padding-left: 0;
  }

  .fc-journey-grid {
    grid-template-columns: minmax(370px, 0.76fr) minmax(0, 0.8fr);
    gap: 72px;
  }

  .fc-audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .fan-constructor-page header nav.open .nav-current {
    color: var(--green-700);
  }

  .fc-hero {
    min-height: auto;
    padding-top: 136px;
    padding-bottom: 115px;
  }

  .fc-hero-grid,
  .fc-overview-grid,
  .fc-journey-grid,
  .fc-config-heading,
  .fc-config-tabs,
  .fc-proof-grid,
  .fc-closing-card {
    grid-template-columns: 1fr;
  }

  .fc-hero-grid {
    min-height: auto;
  }

  .fc-hero-copy {
    max-width: 860px;
  }

  .fc-hero-visual {
    width: min(780px, 94%);
    margin: 30px auto 0;
  }

  .fc-scroll-cue {
    display: none;
  }

  .fc-section-heading,
  .fc-journey-intro,
  .fc-audience .fc-section-heading {
    grid-template-columns: 1fr;
    gap: 27px;
  }

  .fc-overview-grid {
    gap: 58px;
    margin-top: 58px;
  }

  .fc-overview-copy {
    max-width: 850px;
  }

  .fc-journey-nav {
    top: 72px;
  }

  .fc-stage {
    top: 145px;
    z-index: 3;
    width: min(760px, 100%);
    margin: 0 auto;
    padding-bottom: 28px;
    background: linear-gradient(var(--green-050) 84%, transparent);
  }

  .fc-stage-frame {
    max-height: 49vh;
  }

  .fc-stage-images {
    max-height: calc(49vh - 36px);
  }

  .fc-stage-meta {
    margin-top: 14px;
  }

  .fc-step {
    min-height: auto;
    padding: 95px 0 110px;
    opacity: 1;
  }

  .fc-config-heading > p {
    max-width: 680px;
  }

  .fc-config-tabs {
    gap: 42px;
  }

  .fc-tab-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .fc-tab-list button {
    border-right: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  }

  .fc-audience .fc-section-heading > p {
    max-width: 700px;
    padding-top: 0;
  }

  .fc-closing-card {
    align-items: start;
  }

  .fc-closing-actions {
    width: 200px;
    justify-items: center;
  }

  .fc-mobile-journey-images {
    display: block;
  }

  .fc-stage {
    display: none;
  }
}

@media (max-width: 720px) {
  .fc-hero {
    padding-top: 122px;
    padding-bottom: 80px;
  }

  .fc-hero h1 {
    font-size: 50px;
  }

  .fc-hero-lead {
    font-size: 16px;
  }

  .fc-hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .fc-float-card-top {
    top: 2px;
    right: -10px;
  }

  .fc-float-card-bottom {
    right: 14px;
  }

  .fc-overview,
  .fc-audience {
    padding-top: 85px;
    padding-bottom: 90px;
  }

  .fc-section-heading h2,
  .fc-journey-intro h2,
  .fc-config-heading h2,
  .fc-proof-copy h2,
  .fc-closing-card h2 {
    font-size: 40px;
  }

  .fc-overview-copy p,
  .fc-overview-copy p:first-child {
    font-size: 16px;
  }

  .fc-journey-nav .container {
    width: max-content;
    min-width: 745px;
    padding: 0 20px;
  }

  .fc-journey {
    padding-top: 82px;
  }

  .fc-stage {
    position: relative;
    top: auto;
    padding-bottom: 0;
  }

  .fc-stage-frame {
    max-height: none;
  }

  .fc-stage-images {
    max-height: none;
  }

  .fc-stage-meta {
    margin-bottom: 28px;
  }

  .fc-step {
    padding: 67px 0 75px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 141px;
  }

  .fc-step h2 {
    font-size: 39px;
  }

  .fc-step .fc-step-lead {
    font-size: 17px;
  }

  .fc-config {
    padding-top: 87px;
    padding-bottom: 92px;
  }

  .fc-tab-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .fc-tab-list button {
    flex: 0 0 185px;
    scroll-snap-align: start;
  }

  .fc-config-copy {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .fc-config-copy p {
    grid-column: auto;
  }

  .fc-tab-panels figure img {
    aspect-ratio: 1.55 / 1;
  }

  .fc-audience-grid {
    grid-template-columns: 1fr;
    margin-top: 52px;
  }

  .fc-audience-card {
    min-height: 285px;
  }

  .fc-audience-card h3 {
    margin-top: 61px;
  }

  .fc-proof {
    padding: 85px 0;
  }

  .fc-closing {
    padding: 68px 0 76px;
  }

  .fc-closing-card {
    gap: 42px;
    border-radius: 24px;
  }
}

@media (max-width: 480px) {
  .fc-hero h1 {
    font-size: 43px;
  }

  .fc-hero-visual {
    width: 100%;
    padding-top: 12px;
  }

  .fc-window {
    transform: none;
  }

  .fc-float-card {
    display: none;
  }

  .fc-stage-meta {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .fc-erp-visual {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding: 25px;
  }

  .fc-erp-source,
  .fc-erp-target {
    width: 72px;
    height: 72px;
  }

  .fc-erp-visual > i {
    width: 1px;
    height: 12px;
  }

  .fc-erp-visual > div {
    grid-template-columns: repeat(2, 1fr);
  }

  .fc-step h2 {
    font-size: 36px;
  }

  .fc-audience-card {
    padding: 26px;
  }

  .fc-closing-card {
    padding: 34px 27px;
  }
}

/* prefers-reduced-motion: motion is reduced, never removed — the scroll-spy
   (setActiveStage in wwwroot/js/pages/fan-constructor.js) still runs and still
   updates every data-stage/-image/-link element and the stageCopy text; only
   the animated transitions/animations below are turned off, and nothing here
   substitutes a scrollbar or hides content that would otherwise be reachable. */
@media (prefers-reduced-motion: reduce) {
  .fc-float-card,
  .fc-scroll-cue i::after {
    animation: none;
  }

  .fc-reveal,
  .fc-stage-deck,
  .fc-tab-panels > article {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .fc-slider-track {
    transition: none;
  }

  .fc-audience-card,
  .fc-btn-light span,
  .fc-btn-dark span {
    transition: none;
  }
}