/* ==========================================================================
   v2 additions (2026-10-02) — Figma redesign components actually in use.
   Appended, not merged into style.css, so the base system stays diffable.
   Uses only tokens already defined in style.css — no new colors invented.

   🔴 2026-10-02: an earlier draft of this file also defined .infra-grid and
   .sourcing-card — both already exist in style.css (real, in production use
   by business.html / stock.html) with different rules. Loading after
   style.css meant this file silently overrode them. Removed. Before adding
   any new class here, grep style.css first — don't redefine an existing name.
   ========================================================================== */

/* ---------- Dark hero (Home / How It Works / About / Media / Contact / Stock) */
.hero-dark {
  background: var(--navy-950);
  padding-block: clamp(80px, 9vw, 140px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Optional photo background — free stock (Pexels, no attribution required),
   scrimmed with the brand navy so text stays AA-legible. Used sparingly:
   Home + How It Works only, so the site stays "global minimal" (디자인방향.md)
   rather than a stock-photo wall. */
.hero-dark--photo { background-size: cover; background-position: center; }
.hero-dark--photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,26,51,.88) 0%, rgba(8,26,51,.80) 45%, rgba(8,26,51,.94) 100%);
}
.hero-dark--photo .container { position: relative; z-index: 1; }
.hero-dark .container { display: flex; flex-direction: column; align-items: center; }
.hero-dark .overline--accent { color: var(--orange-500); }
.hero-dark h1 { color: #fff; max-width: 880px; margin-top: var(--sp-3); }
.hero-dark .hero-dark__sub {
  margin-top: var(--sp-5); max-width: 640px; color: var(--text-on-dark-sub);
  font-size: var(--fs-body-lg); line-height: 1.6;
}
.hero-dark .btn-row { justify-content: center; margin-top: var(--sp-7); }
.hero-dark .hero-dark__fine { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--text-on-dark-sub); }

/* ---------- Stat band (CRM trust numbers — index.html) ------------------- */
.stat-band { background: var(--navy-900); padding-block: var(--sp-8); }
.stat-band__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) { .stat-band__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.stat-band__item .num { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 800; color: var(--orange-500); line-height: 1; }
.stat-band__item p { margin-top: var(--sp-3); color: var(--text-on-dark-sub); font-size: var(--fs-body); line-height: 1.55; max-width: 320px; }

/* ---------- Process teaser row (index.html — full steps live in business.html .steps) */
.process-teaser { padding-block: var(--section-y); }
.process-teaser__grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
@media (min-width: 900px) { .process-teaser__grid { grid-template-columns: repeat(5, 1fr); } }
.process-step { background: var(--bg-alt); border-radius: 12px; padding: var(--sp-5) var(--sp-4); text-align: center; }
.process-step .n { font-size: 1.5rem; font-weight: 800; color: var(--orange-500); }
.process-step p { margin-top: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--text-primary); }