/* ==========================================================================
   Fastkava — B5 business / «Готовий бізнес під ключ»
   Design variant 2b: typography only — no cards, no photos, no icons. Two
   two-column pairs (copy | numbered list), the second mirrored, over soft
   radial glows and oversized PRO / START watermarks.
   ========================================================================== */

/*
 * No `overflow: hidden` here on purpose — same reason as .fk-quiz. The glows
 * sit at negative offsets, so clipping them at the section box slices each soft
 * radial into a hard-edged rectangle, which reads as a band across the junction
 * with the neighbouring block on the continuous .fk-flow surface. Letting them
 * bleed vertically into the neighbours is the point of a continuous background;
 * `.fk-flow { overflow-x: clip }` still catches the horizontal axis, so the
 * watermarks are trimmed at the viewport edge exactly as the design trims them
 * at its panel edge, and nothing can escape sideways into a scrollbar.
 */
.fk-biz {
  position: relative;
  padding-block: clamp(64px, 9vw, 120px);

  /* Palette lifted from the design canvas; no token equivalents exist for the
     hairline rules or the two muted body greys. */
  --biz-rule: rgba(255, 255, 255, .09);
  --biz-desc: rgba(224, 214, 203, .66);
  --biz-intro: rgba(230, 220, 208, .78);
  --biz-mark: rgba(245, 239, 232, .05);
}
:root[data-theme="light"] .fk-biz {
  --biz-rule: rgba(26, 21, 18, .10);
  --biz-desc: rgba(74, 68, 60, .72);
  --biz-intro: rgba(58, 52, 45, .82);
  --biz-mark: rgba(26, 21, 18, .05);
}

/* ---- Decor --------------------------------------------------------------- */
.fk-biz__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.fk-biz__glow { position: absolute; border-radius: 50%; }
.fk-biz__glow--a {
  top: clamp(-160px, -11vw, -70px); right: clamp(-120px, -8.3vw, -60px);
  width: clamp(280px, 44.4vw, 640px); height: clamp(280px, 44.4vw, 640px);
  background: radial-gradient(circle, rgba(255, 122, 26, .09), rgba(255, 122, 26, 0) 65%);
}
.fk-biz__glow--b {
  bottom: clamp(-140px, -9.7vw, -60px); left: clamp(-140px, -9.7vw, -60px);
  width: clamp(240px, 38.9vw, 560px); height: clamp(240px, 38.9vw, 560px);
  background: radial-gradient(circle, rgba(255, 122, 26, .06), rgba(255, 122, 26, 0) 65%);
}

.fk-biz__watermark {
  position: absolute;
  font-size: clamp(76px, 14.6vw, 210px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: clamp(2px, .28vw, 4px);
  white-space: nowrap;
  user-select: none;
}
.fk-biz__watermark--pro   { top: clamp(10px, 2.1vw, 30px); right: clamp(-40px, -2.8vw, -14px); color: rgba(255, 122, 26, .07); }
.fk-biz__watermark--start { bottom: clamp(6px, .7vw, 10px); left: clamp(-30px, -2.1vw, -10px); color: var(--biz-mark); }

/* ---- Pairs --------------------------------------------------------------- */
.fk-biz__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 6.3vw, 90px);
}

.fk-biz__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5.6vw, 80px);
  align-items: start;
}
/* Every other pair mirrors: the copy moves to the right-hand column. */
.fk-biz__pair:nth-child(even) .fk-biz__copy { order: 2; }

/* ---- Copy column --------------------------------------------------------- */
.fk-biz__kicker {
  display: flex; align-items: center; gap: clamp(10px, .85vw, 12px);
  margin-bottom: clamp(10px, 1.25vw, 18px);
  font-size: clamp(10.5px, .9vw, 13px);
  font-weight: 700;
  letter-spacing: clamp(1.8px, .21vw, 3px);
  text-transform: uppercase;
  color: var(--fk-text-muted);
}
.fk-biz__kicker-line { flex: none; width: clamp(26px, 2.4vw, 34px); height: 2px; background: var(--fk-accent); }

.fk-biz__title {
  margin: 0 0 clamp(10px, 1.4vw, 20px);
  font-size: clamp(23px, 3.2vw, 46px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: .3px;
  text-wrap: balance;
  color: var(--fk-heading);
}
/* A bare `.fk-biz__title span` would out-specify the accent class on its own. */
.fk-biz__title span.fk-biz__title-accent { color: var(--fk-accent); }

.fk-biz__intro {
  margin: 0;
  max-width: 440px;
  font-size: clamp(12.5px, 1.15vw, 16.5px);
  line-height: 1.6;
  font-weight: 500;
  text-wrap: pretty;
  color: var(--biz-intro);
}

/* ---- Numbered list ------------------------------------------------------- */
.fk-biz__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fk-biz__point {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.5vw, 22px);
  /* The canvas uses 22px on the 3-item pair and 18px on the 4-item one, purely
     to balance two fixed columns. One value here — the item count is authored. */
  padding-block: clamp(11px, 1.4vw, 20px);
  border-top: 1px solid var(--biz-rule);
}
.fk-biz__point:last-child { border-bottom: 1px solid var(--biz-rule); }

.fk-biz__num {
  flex: none;
  padding-top: 2px;
  font-size: clamp(11px, 1.04vw, 15px);
  font-weight: 800;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--fk-accent);
}
.fk-biz__point-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: clamp(2px, .35vw, 5px); }
.fk-biz__point-title {
  font-size: clamp(11.5px, 1.18vw, 17px);
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--fk-heading);
}
.fk-biz__point-desc {
  font-size: clamp(11px, 1.01vw, 14.5px);
  line-height: 1.5;
  color: var(--biz-desc);
}

/* ---- Stacked layout ------------------------------------------------------ */
@media (max-width: 700px) {
  .fk-biz__pair { grid-template-columns: 1fr; gap: 18px; }
  /* Copy always leads once stacked — the mirror only makes sense side by side. */
  .fk-biz__pair:nth-child(even) .fk-biz__copy { order: 0; }
  .fk-biz__intro { max-width: none; }
}