/* ==========================================================================
   Fastkava — B4 benefits / «З FASTKAVA ти отримаєш»
   Kicker + two-tone heading (+ optional CTA), then a 4-col grid of tiles.
   ========================================================================== */

.fk-benefits {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 120px);
}

/*
 * Ambient circle behind the header — static and cheap by construction.
 *
 * A multi-stop radial gradient, not a blurred shape: no filter means no layer
 * and no backing buffer, which is the whole reason the background orbs were
 * removed. `closest-side` so it reaches full transparency exactly at its own box
 * edge — .fk-benefits has `overflow: hidden`, and a gradient that still had
 * alpha at the edge would be sliced into a hard rectangle by that clip.
 *
 * Kept fully inside the section for the same reason: an overhang at a negative
 * offset would be cut, and the cut would land where the gradient is still
 * faintly visible.
 */
.fk-benefits__glow {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: clamp(300px, 34vw, 520px);
  height: clamp(300px, 34vw, 520px);
  pointer-events: none;
  background: radial-gradient(circle closest-side at 50% 50%,
    rgba(251, 83, 0, .16) 0%,
    rgba(251, 83, 0, .128) 18%,
    rgba(251, 83, 0, .092) 34%,
    rgba(251, 83, 0, .056) 50%,
    rgba(251, 83, 0, .028) 64%,
    rgba(251, 83, 0, .012) 78%,
    rgba(251, 83, 0, .003) 90%,
    transparent 100%);
}
:root[data-theme="light"] .fk-benefits__glow {
  background: radial-gradient(circle closest-side at 50% 50%,
    rgba(251, 83, 0, .10) 0%,
    rgba(251, 83, 0, .08) 18%,
    rgba(251, 83, 0, .058) 34%,
    rgba(251, 83, 0, .035) 50%,
    rgba(251, 83, 0, .018) 64%,
    rgba(251, 83, 0, .008) 78%,
    rgba(251, 83, 0, .002) 90%,
    transparent 100%);
}

/* Sits above the glow: both are positioned, and this one comes later in the DOM. */
.fk-benefits__inner { position: relative; }

/* Header row: heading (left) + optional CTA (right) */
.fk-benefits__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.fk-benefits__kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--fk-text-muted);
}
.fk-benefits__kicker-line { flex: none; width: 34px; height: 2px; background: var(--fk-accent); }
.fk-benefits__title { margin: 0; font-size: clamp(30px, 5vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: .3px; }
.fk-benefits__title span { color: var(--fk-heading); }
.fk-benefits__title span.fk-benefits__title-accent { color: var(--fk-accent); }

/* CTA pill */
.fk-benefits__cta {
  flex: none; display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 34px; border-radius: 999px;
  background: var(--fk-accent); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 16px 36px rgba(251,83,0,.35);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fk-benefits__cta:hover { background: var(--fk-accent-2); color: #fff; transform: translateY(-2px); }
.fk-benefits__cta-arrow { font-size: 18px; line-height: 1; }

/* Tile grid */
.fk-benefits__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.fk-benefits__item {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 16px 8px; text-align: center;
  transition: transform .25s var(--fk-ease);
}
.fk-benefits__item:hover { transform: translateY(-6px); }
.fk-benefits__icon {
  width: clamp(86px, 9vw, 124px); height: clamp(86px, 9vw, 124px);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.4));
}
:root[data-theme="light"] .fk-benefits__icon { filter: drop-shadow(0 12px 22px rgba(26,21,18,.18)); }
.fk-benefits__item-title {
  font-size: clamp(14px, 1.4vw, 19px); font-weight: 700; line-height: 1.25;
  letter-spacing: .6px; text-transform: uppercase; text-wrap: balance;
  color: var(--fk-heading);
}

@media (max-width: 900px) {
  .fk-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  .fk-benefits__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .fk-benefits__cta { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fk-benefits__item { transition: none; }
}