/* ================================================================== */
/* Why Five by Five — USP section (dark ink)                           */
/* ================================================================== */

.wf {
  background: var(--surface-ink, #0d0f0f); padding: 100px 80px 104px;
  position: relative; overflow: hidden;
}
.wf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(65% 60% at 0% 0%, rgba(255,166,62,0.24) 0%, transparent 62%);
}
.wf-inner {
  max-width: 1280px; margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: 430px 1fr; gap: 88px; align-items: start;
}

.wf-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fbf-green, #28dc9a); font-weight: 500;
}
.wf-title {
  margin: 18px 0 0; font-size: 46px; font-weight: 900; line-height: 1.06;
  letter-spacing: -0.025em; color: #fff; text-wrap: balance;
}
.wf-title mark {
  background: var(--gradient-signature);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.wf-lead {
  margin: 20px 0 0; font-size: 17px; line-height: 1.65; font-weight: 500;
  color: rgba(255,255,255,0.68);
}
.wf-ctas { display: flex; gap: 14px; margin-top: 36px; }
.wf-left { padding-top: 19px; }

/* USP rows ---------------------------------------------------------- */
.wf-list { list-style: none; margin: 0; padding: 0; }
.wf-list li { border-top: 1px solid rgba(255,255,255,0.12); }
.wf-list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.wf-row {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: baseline;
  padding: 19px 8px;
}
.wf-row i {
  font-family: var(--font-mono); font-style: normal; font-size: 12px;
  letter-spacing: 0.08em; color: var(--fbf-green, #28dc9a);
}
.wf-row b {
  display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
  color: #fff;
}

/* Hover accordion reveal ------------------------------------------- */
.wf-reveal {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows 280ms var(--ease-out, cubic-bezier(0.2,0,0,1));
}
.wf-row:hover .wf-reveal,
.wf-row:focus-within .wf-reveal { grid-template-rows: 1fr; }
.wf-reveal span {
  display: block; min-height: 0; margin: 0; max-width: 560px;
  font-size: 14.5px; line-height: 1.55; font-weight: 500;
  color: rgba(255,255,255,0.58);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 220ms var(--ease-out, ease) 60ms,
              transform 260ms var(--ease-out, ease) 60ms,
              padding-top 280ms var(--ease-out, cubic-bezier(0.2,0,0,1));
}
.wf-row:hover .wf-reveal span,
.wf-row:focus-within .wf-reveal span {
  opacity: 1; transform: translateY(0); padding-top: 8px;
}