/* Landing page — brand blue from logo, cool neutrals (not indigo/violet gradients). */

.landing-page {
  --landing-ink: #0b1220;
  --landing-ink-soft: #1a2438;
  --landing-paper: #f4f6f9;
  --landing-mute: #5b677a;
  --landing-line: #d8dee8;
  --landing-brand: #3b4bff;
  --landing-brand-deep: #2a36d9;
  --landing-brand-soft: #e8ebff;
  --landing-ok: #0f7a4f;

  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  color: var(--landing-ink);
  background: var(--landing-paper);
}

.landing-page .font-display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
}

/* Hero entrance */
.landing-hero [data-landing-hero-target] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-hero.is-ready [data-landing-hero-target="brand"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s;
}

.landing-hero.is-ready [data-landing-hero-target="copy"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.18s;
}

.landing-hero.is-ready [data-landing-hero-target="actions"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.32s;
}

.landing-hero.is-ready [data-landing-hero-target="visual"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.22s;
}

/* Scroll reveal */
.landing-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.landing-reveal[data-delay="1"] { transition-delay: 0.08s; }
.landing-reveal[data-delay="2"] { transition-delay: 0.16s; }
.landing-reveal[data-delay="3"] { transition-delay: 0.24s; }

/* Workflow steps */
.landing-flow-step {
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.landing-flow-step.is-active {
  opacity: 1;
  transform: translateX(2px);
}

.landing-flow-step .landing-flow-index {
  transition: background-color 0.35s ease, color 0.35s ease;
}

.landing-flow-step.is-active .landing-flow-index {
  background: var(--landing-brand);
  color: #fff;
}

.landing-flow-progress {
  height: 2px;
  background: var(--landing-brand);
  width: 25%;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero [data-landing-hero-target],
  .landing-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .landing-flow-progress {
    transition: none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */