/* Cleancraft — homepage components (Variant B: warm / grounded).
   Phase 2 direction candidate. All values reference design-system tokens. */

/* warm section helpers */
.band { padding-block: var(--section-y); }
.band--alt { background: var(--bg-alt); }
.band--warm { background: color-mix(in oklch, var(--c-taupe) 22%, var(--bg)); }
.band--ink { background: var(--c-ink); color: var(--c-ivory); }
.band__head { max-width: 56ch; margin-bottom: var(--s-12); }
.band__head .lede { margin-top: var(--s-3); }

/* ---- hero ---- */
.hero { padding-block: clamp(var(--s-16), 7vw, var(--s-32)) var(--section-y); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(var(--s-8), 5vw, var(--s-24));
  align-items: center;
}
.hero h1 { margin-top: var(--s-3); font-size: var(--t-2xl); }
.hero .lede { margin-top: var(--s-6); max-width: 46ch; }
.hero__actions { display: flex; gap: var(--s-3); margin-top: var(--s-8); flex-wrap: wrap; }
.hero__trust {
  display: flex; gap: var(--s-6); margin-top: var(--s-12); flex-wrap: wrap;
  padding-top: var(--s-6); border-top: 1px solid var(--border);
}
.hero__trust li { list-style: none; font-size: var(--t-sm); color: var(--text-soft); font-weight: 500; }
.hero__trust b { color: var(--text); font-weight: 600; }
.hero__media {
  aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  background:
    radial-gradient(120% 80% at 70% 20%, color-mix(in oklch, var(--c-taupe) 55%, var(--bg)), transparent 60%),
    linear-gradient(150deg, var(--c-ivory-deep), color-mix(in oklch, var(--c-taupe) 60%, var(--bg)));
  border: 1px solid var(--border); display: grid; place-items: end start; padding: var(--s-6);
}
.hero__media span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-ink-soft); }

/* ---- trust strip ---- */
.proof-strip {
  display: flex; gap: var(--s-8); flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding-block: var(--s-8); border-block: 1px solid var(--border);
}
.proof-strip span { font-size: var(--t-sm); font-weight: 600; color: var(--text-soft); letter-spacing: 0.01em; }

/* ---- service grid (two-tier) ---- */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.svc {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.svc:hover { transform: translateY(-3px); border-color: color-mix(in oklch, var(--c-taupe) 70%, var(--border)); }
.svc__media {
  aspect-ratio: 16 / 10; border-radius: var(--r-md); margin-bottom: var(--s-2);
  background: linear-gradient(135deg, var(--c-ivory-deep), var(--c-taupe));
  display: grid; place-items: center; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--c-ink-soft);
}
.svc h3 { font-size: var(--t-lg); }
.svc p { font-size: var(--t-sm); color: var(--text-soft); }
.svc__more { margin-top: auto; font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.svc-secondary {
  margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--border);
  display: flex; gap: var(--s-3) var(--s-6); flex-wrap: wrap; align-items: baseline;
}
.svc-secondary > span { font-size: var(--t-sm); color: var(--text-mute); }
.svc-secondary a { font-size: var(--t-sm); font-weight: 500; color: var(--text-soft); }
.svc-secondary a:hover { color: var(--text); }

/* ---- how it works (numbered mechanism) ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--s-6), 4vw, var(--s-16)); }
.step { display: flex; flex-direction: column; gap: var(--s-3); }
.step__num {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 1.5rem + 4vw, 4rem);
  line-height: 1; color: color-mix(in oklch, var(--c-taupe) 85%, var(--c-ink)); letter-spacing: -0.03em;
}
.step h3 { font-size: var(--t-lg); }
.step p { font-size: var(--t-sm); color: var(--text-soft); }

/* ---- proof stats ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }

/* ---- who it's for ---- */
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-8), 5vw, var(--s-24)); align-items: center; }
.audience__media {
  aspect-ratio: 5 / 4; border-radius: var(--r-lg); border: 1px solid var(--border);
  background: linear-gradient(150deg, color-mix(in oklch, var(--c-taupe) 50%, var(--bg)), var(--c-ivory-deep));
  display: grid; place-items: center; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--c-ink-soft);
}
.audience ul { margin-top: var(--s-4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.audience li { padding-left: var(--s-6); position: relative; color: var(--text-soft); }
.audience li::before { content: ""; position: absolute; left: 0; top: .65em; width: 10px; height: 10px; border-radius: 50%; background: var(--c-taupe); }

/* ---- final CTA ---- */
.cta-final { text-align: center; }
.cta-final h2 { max-width: 18ch; margin-inline: auto; }
.cta-final .lede { color: color-mix(in oklch, var(--c-ivory) 75%, transparent); margin: var(--s-4) auto 0; max-width: 48ch; }
.cta-final .hero__actions { justify-content: center; }
.band--ink .btn--ghost { color: var(--c-ivory); border-color: color-mix(in oklch, var(--c-ivory) 35%, transparent); }
.band--ink .btn--ghost:hover { border-color: var(--c-ivory); }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .hero__grid, .audience { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 16 / 11; order: -1; }
  .svc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--s-8); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; }
  .proof-strip { gap: var(--s-3); }
}