/* CoreFi homepage — redesign on the CoreFi Web design system.
   One bold element: the hero "control plane trace" (an agent request passing
   permission, policy, human approval and audit before it reaches the ledger).
   Everything else is quiet: hairline rules instead of boxed cards. */

.cf-home { --cf-rule: var(--cf-border); }

/* ---------- Hero ---------- */
.cf-home .cf-hero { padding: 118px 0 96px; }
.cf-home .cf-hero::after { display: none; }
.cf-home .cf-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.cf-home .cf-hero h1 { margin-bottom: 24px; }
.cf-home .cf-hero-copy { max-width: 560px; }
.cf-home .cf-hero-actions { margin: 32px 0 40px; }

.cf-pillars { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.16); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; max-width: 560px; }
.cf-pillars li { display: flex; align-items: center; gap: 10px; color: var(--cf-band-text-soft); font-size: .92rem; }
.cf-pillars li::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--cf-leaf); flex: none; }

/* The trace panel */
.cf-trace { position: relative; border-radius: 28px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px); padding: 26px 26px 22px; box-shadow: 0 40px 100px rgba(8, 9, 30, .35); }
.cf-trace__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.cf-trace__title { color: #fff; font-weight: 600; font-size: .95rem; }
.cf-trace__live { display: inline-flex; align-items: center; gap: 8px; color: var(--cf-band-text-soft); font-size: .8rem; }
.cf-trace__live::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--cf-leaf); box-shadow: 0 0 0 4px rgba(97,182,108,.22); }
.cf-trace__request { margin: 18px 0 6px; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.94); color: var(--cf-ink); }
.cf-trace__request small { display: block; color: var(--cf-ink-soft); font-size: .78rem; margin-bottom: 4px; }
.cf-trace__request strong { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.cf-trace__steps { list-style: none; margin: 0; padding: 0; position: relative; }
.cf-trace__steps::before { content: ""; position: absolute; left: 15px; top: 22px; bottom: 22px; width: 2px; background: rgba(255,255,255,.14); }
.cf-trace__step { position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; }
.cf-trace__dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: var(--cf-band-mid); border: 2px solid rgba(255,255,255,.22); color: transparent; }
.cf-trace__dot svg { width: 16px; height: 16px; }
.cf-trace__step b { display: block; color: #fff; font-weight: 600; font-size: .95rem; }
.cf-trace__step span { display: block; color: var(--cf-band-text-soft); font-size: .82rem; line-height: 1.45; }
.cf-trace__state { font-size: .75rem; font-weight: 700; color: var(--cf-leaf); white-space: nowrap; }
.cf-trace__step--human .cf-trace__state { color: #fff; }
.cf-trace__step.is-done .cf-trace__dot { background: var(--cf-leaf); border-color: var(--cf-leaf); color: var(--cf-ink); }
.cf-trace__step--ledger .cf-trace__dot { border-radius: 10px; }
.cf-trace__foot { margin: 14px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; }
.cf-trace__foot span { color: var(--cf-leaf); }

/* One orchestrated moment: checks light up in order on load. */
@media (prefers-reduced-motion: no-preference) {
  .cf-trace__step { animation: cf-step-in .5s ease both; }
  .cf-trace__step .cf-trace__dot { animation: cf-dot-on .35s ease both; }
  .cf-trace__step:nth-child(1), .cf-trace__step:nth-child(1) .cf-trace__dot { animation-delay: .35s; }
  .cf-trace__step:nth-child(2), .cf-trace__step:nth-child(2) .cf-trace__dot { animation-delay: .75s; }
  .cf-trace__step:nth-child(3), .cf-trace__step:nth-child(3) .cf-trace__dot { animation-delay: 1.15s; }
  .cf-trace__step:nth-child(4), .cf-trace__step:nth-child(4) .cf-trace__dot { animation-delay: 1.55s; }
  .cf-trace__step:nth-child(5), .cf-trace__step:nth-child(5) .cf-trace__dot { animation-delay: 1.95s; }
}
@keyframes cf-step-in { from { opacity: .45; } to { opacity: 1; } }
@keyframes cf-dot-on { from { background: var(--cf-band-mid); border-color: rgba(255,255,255,.22); color: transparent; } }

/* ---------- Section heads: title left, lede right ---------- */
.cf-home .cf-split-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 64px; align-items: end; }
.cf-home .cf-split-head h2 { margin: 0; }
.cf-home .cf-split-head .cf-lede { margin: 0; }

/* ---------- Proof: figures on a ruled line, no boxes ---------- */
.cf-figures { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--cf-border-strong); }
.cf-figures li { padding: 24px 22px 0 0; }
.cf-figures li + li { padding-left: 22px; border-left: 1px solid var(--cf-rule); }
.cf-figures strong { display: block; font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1.05; font-weight: 500; letter-spacing: -.03em; color: var(--cf-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-figures span { display: block; margin-top: 12px; color: var(--cf-ink-soft); font-size: .86rem; line-height: 1.5; }

/* ---------- Products: the core, and what runs on it ---------- */
.cf-modules { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 22px; margin-top: 48px; }
.cf-module-core { position: relative; overflow: hidden; border-radius: 28px; background: var(--cf-band); color: #fff; padding: 36px; display: flex; flex-direction: column; min-height: 100%; }
.cf-module-core .cf-tag { align-self: flex-start; font-size: .78rem; font-weight: 700; color: var(--cf-ink); background: var(--cf-leaf); border-radius: 999px; padding: 6px 12px; margin-bottom: auto; }
.cf-module-core h3 { color: #fff; font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.022em; line-height: 1.15; margin: 64px 0 14px; }
.cf-module-core p { color: var(--cf-band-text-soft); margin: 0 0 24px; max-width: 380px; }
.cf-module-core a { color: #fff; font-weight: 800; font-size: .9rem; text-decoration: none; }
.cf-module-core a:hover { color: var(--cf-leaf); }
.cf-module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--cf-border); border-radius: 28px; background: #fff; overflow: hidden; }
.cf-module { padding: 30px 30px 28px; display: flex; flex-direction: column; }
.cf-module:nth-child(odd) { border-right: 1px solid var(--cf-rule); }
.cf-module:nth-child(-n+2) { border-bottom: 1px solid var(--cf-rule); }
.cf-module h3 { margin: 0 0 10px; font-size: 1.125rem; font-weight: 500; letter-spacing: -.012em; color: var(--cf-ink); }
.cf-module p { margin: 0 0 18px; color: var(--cf-ink-soft); font-size: .94rem; line-height: 1.6; }
.cf-module a { margin-top: auto; color: var(--cf-ink); font-weight: 800; font-size: .82rem; text-decoration: none; }
.cf-module a:hover, .cf-module-core a:focus-visible { color: var(--cf-leaf-deep); }

/* ---------- Lifecycle: six moments over one control plane ---------- */
.cf-flow { margin-top: 56px; }
.cf-flow__stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; counter-reset: stage; }
.cf-flow__stages::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: var(--cf-border-strong); }
.cf-flow__stage { position: relative; padding-right: 18px; counter-increment: stage; }
.cf-flow__stage::before { content: counter(stage); position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #fff; border: 2px solid var(--cf-ink); color: var(--cf-ink); font-size: .8rem; font-weight: 800; margin-bottom: 18px; }
.cf-flow__stage b { display: block; color: var(--cf-ink); font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; }
.cf-flow__stage span { display: block; color: var(--cf-ink-soft); font-size: .86rem; line-height: 1.5; }
.cf-flow__stage em { display: block; margin-top: 10px; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--cf-leaf-deep); }
.cf-flow__layers { margin-top: 36px; display: grid; gap: 10px; }
.cf-layer-band { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; border-radius: 20px; padding: 18px 24px; }
.cf-layer-band b { font-weight: 700; font-size: .95rem; }
.cf-layer-band ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cf-layer-band li { font-size: .84rem; border-radius: 999px; padding: 6px 12px; }
.cf-layer-band--control { background: var(--cf-leaf-tint); border: 1px solid rgba(47,125,58,.35); color: var(--cf-ink); }
.cf-layer-band--control li { background: #fff; color: var(--cf-ink); border: 1px solid rgba(47,125,58,.3); }
.cf-layer-band--core { background: var(--cf-band); color: #fff; }
.cf-layer-band--core li { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.cf-layer-band--eco { background: #fff; border: 1px dashed var(--cf-border-strong); color: var(--cf-ink); }
.cf-layer-band--eco li { background: var(--cf-cloud); color: var(--cf-ink-soft); }

/* ---------- Partners: a quiet logo grid ---------- */
.cf-home .cf-partner-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 48px 0 0; border-top: 1px solid var(--cf-rule); border-left: 1px solid var(--cf-rule); }
.cf-home .cf-partner-strip-item { min-height: 112px; padding: 20px; border-right: 1px solid var(--cf-rule); border-bottom: 1px solid var(--cf-rule); transform: none !important; }
.cf-home .cf-partner-strip-item img { max-height: 40px; }
.cf-home .cf-partner-strip-cta { text-align: left; margin-top: 24px; }
.cf-home .cf-partner-strip-cta a { color: var(--cf-ink); }
.cf-home .cf-partner-strip-cta a:hover { color: var(--cf-leaf-deep); }

/* ---------- Customer proof: outcomes drawn to scale ---------- */
.cf-outcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.cf-outcome .cf-lede { margin-bottom: 28px; }
.cf-meters { list-style: none; margin: 0; padding: 32px; border-radius: 28px; background: #fff; border: 1px solid var(--cf-border); display: grid; gap: 26px; }
.cf-meter__top { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.cf-meter__top strong { font-size: 2rem; font-weight: 500; letter-spacing: -.03em; color: var(--cf-ink); min-width: 3.2em; font-variant-numeric: tabular-nums; }
.cf-meter__top span { color: var(--cf-ink-soft); font-size: .9rem; line-height: 1.45; }
.cf-meter__track { height: 10px; border-radius: 999px; background: var(--cf-cloud); overflow: hidden; }
.cf-meter__fill { height: 100%; border-radius: 999px; background: var(--cf-leaf); }

/* ---------- Trust: a ruled list of controls ---------- */
.cf-controls { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.cf-controls li { padding: 24px 0; border-top: 1px solid var(--cf-border-strong); display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
.cf-controls svg { width: 22px; height: 22px; color: var(--cf-leaf-deep); margin-top: 1px; }
.cf-controls b { display: block; color: var(--cf-ink); font-weight: 600; margin-bottom: 6px; }
.cf-controls span { color: var(--cf-ink-soft); font-size: .92rem; line-height: 1.55; }
.cf-home .cf-row-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- Final CTA ---------- */
.cf-home .cf-final { padding: 90px 0; text-align: left; }
.cf-home .cf-final .cf-lede { max-width: 620px; }
.cf-final-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 32px 64px; align-items: end; }
.cf-final-grid h2 { color: #fff; margin: 0 0 14px; }
.cf-final-grid .cf-lede { color: var(--cf-band-text-soft); margin: 0; }
.cf-final-grid .cf-hero-actions { margin: 0; justify-content: flex-end; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cf-home .cf-hero-grid, .cf-outcome, .cf-modules { grid-template-columns: 1fr; }
  .cf-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cf-figures li:nth-child(4) { border-left: 0; padding-left: 0; }
  .cf-figures li:nth-child(n+4) { margin-top: 28px; }
  .cf-flow__stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .cf-flow__stages::before { display: none; }
  .cf-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-final-grid { grid-template-columns: 1fr; }
  .cf-final-grid .cf-hero-actions { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .cf-home .cf-hero { padding: 96px 0 72px; }
  .cf-home .cf-split-head { grid-template-columns: 1fr; }
  .cf-pillars { grid-template-columns: 1fr; }
  .cf-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-figures li, .cf-figures li + li { padding-left: 0; border-left: 0; padding-right: 12px; }
  .cf-figures li:nth-child(n+3) { margin-top: 24px; }
  .cf-module-list { grid-template-columns: 1fr; }
  .cf-module:nth-child(odd) { border-right: 0; }
  .cf-module:not(:last-child) { border-bottom: 1px solid var(--cf-rule); }
  .cf-flow__stages { grid-template-columns: 1fr 1fr; }
  .cf-layer-band { grid-template-columns: 1fr; gap: 12px; }
  .cf-home .cf-partner-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-controls { grid-template-columns: 1fr; }
  .cf-trace { padding: 20px 18px; }
  .cf-trace__step { grid-template-columns: 32px 1fr; }
  .cf-trace__state { grid-column: 2; }
}