/* ==========================================================================
   Home page — public/css/pages/home.css
   Only rules that exist nowhere else. Shared class vocabulary (.card, .grid,
   .section, .faq, .stat, .logo-wall, .checklist, .btn, .reveal, ...) lives
   in public/css/global.css.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; min-height: min(88vh, 780px); display: grid; align-items: center; overflow: hidden; background: var(--navy-900); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(12,20,48,.94) 0%, rgba(12,20,48,.78) 45%, rgba(27,47,111,.55) 100%);
}
.hero .container { position: relative; z-index: 2; padding-block: clamp(80px, 10vw, 130px); }
.hero .eyebrow { color: var(--accent); }
.hero h1 { color: #fff; max-width: 15ch; }
.hero__lede { margin-top: 22px; max-width: 56ch; font-size: var(--step-2); color: rgba(255,255,255,.8); }
.hero__actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* --- Ecosystem cards -------------------------------------------------------- */
.eco-card { display: flex; flex-direction: column; }
.eco-card__logo { height: 46px; margin-bottom: 20px; }
.eco-card__logo img { height: 100%; width: auto; object-fit: contain; }
.eco-card__tag { font-size: var(--step--2); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); }
.eco-card h3 { margin: 8px 0 0; }
.eco-card__link { margin-top: auto; padding-top: 22px; font-weight: 700; color: var(--navy-600); font-size: var(--step--1); }
.eco-card--feature { border-color: var(--navy-500); box-shadow: var(--shadow); position: relative; }
.eco-card--feature::before {
  content: "Most Popular"; position: absolute; top: -13px; left: clamp(24px, 2.4vw, 34px);
  background: var(--accent); color: var(--navy-900); font-size: var(--step--2); font-weight: 800;
  padding: 5px 14px; border-radius: var(--radius-pill);
}

@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero h1 { max-width: none; }
}