/* ==========================================================================
   Fastkava — B8 quiz CTA / «Обери формат, який відповідає твоїм цілям»
   Centered glass panel with a gradient hairline border: 3-step strip,
   two-tone heading, lead paragraph and one orange CTA.
   ========================================================================== */

/*
 * No `overflow: hidden` here on purpose. The ambient glows below are placed
 * with negative offsets, so clipping them at the section box slices the blur
 * into a hard-edged rectangle — invisible back when every block painted its
 * own background, but obvious against the single continuous .fk-flow surface.
 * Letting them bleed into the neighbouring sections is the whole point of a
 * continuous background; .fk-flow clips the horizontal axis so nothing can
 * escape sideways and cause a scrollbar.
 */
.fk-quiz {
  position: relative;
  padding-block: clamp(64px, 9vw, 120px);
}

/* Ambient orange glows behind the glass panel */
/* Painted, not blurred — see the note on .fk-page__glow in pages.css. Two of
   these at blur(110px) were ~59MB of buffer between them at DPR 3. Boxes grown
   by 2x the old radius, offsets shifted by half of it. */
.fk-quiz__glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
/* Offsets pulled in from -230/-250 and -250/-230: with `closest-side` the
   gradient now fades out well inside its own box, so sitting that far off the
   corners left most of each glow outside the section doing nothing visible.
   Roughly halved, which brings the light back onto the panel's edges. */
.fk-quiz__glow--a {
  top: -120px; left: -130px;
  width: calc(clamp(300px, 40vw, 560px) + 220px);
  height: calc(clamp(230px, 28vw, 400px) + 220px);
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(251, 83, 0, .21) 0%,
    rgba(251, 83, 0, .192) 18%,
    rgba(251, 83, 0, .148) 34%,
    rgba(251, 83, 0, .093) 50%,
    rgba(251, 83, 0, .049) 64%,
    rgba(251, 83, 0, .022) 78%,
    rgba(251, 83, 0, .006) 90%,
    transparent 100%);
}
.fk-quiz__glow--b {
  bottom: -130px; right: -120px;
  width: calc(clamp(310px, 42vw, 600px) + 220px);
  height: calc(clamp(240px, 30vw, 420px) + 220px);
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(251, 83, 0, .152) 0%,
    rgba(251, 83, 0, .139) 18%,
    rgba(251, 83, 0, .107) 34%,
    rgba(251, 83, 0, .067) 50%,
    rgba(251, 83, 0, .036) 64%,
    rgba(251, 83, 0, .016) 78%,
    rgba(251, 83, 0, .004) 90%,
    transparent 100%);
}
:root[data-theme="light"] .fk-quiz__glow--a {
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(251, 83, 0, .152) 0%,
    rgba(251, 83, 0, .139) 18%,
    rgba(251, 83, 0, .107) 34%,
    rgba(251, 83, 0, .067) 50%,
    rgba(251, 83, 0, .036) 64%,
    rgba(251, 83, 0, .016) 78%,
    rgba(251, 83, 0, .004) 90%,
    transparent 100%);
}
:root[data-theme="light"] .fk-quiz__glow--b {
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(251, 83, 0, .115) 0%,
    rgba(251, 83, 0, .105) 18%,
    rgba(251, 83, 0, .081) 34%,
    rgba(251, 83, 0, .051) 50%,
    rgba(251, 83, 0, .027) 64%,
    rgba(251, 83, 0, .012) 78%,
    rgba(251, 83, 0, .003) 90%,
    transparent 100%);
}

.fk-quiz__inner { position: relative; z-index: 1; }

/* Glass panel */
.fk-quiz__panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(40px, 5.6vw, 72px) clamp(20px, 5.6vw, 80px);
  border-radius: var(--fk-radius);
  background: rgba(18, 15, 12, .28);
  -webkit-backdrop-filter: blur(34px) saturate(1.5);
  backdrop-filter: blur(34px) saturate(1.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}
:root[data-theme="light"] .fk-quiz__panel {
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 8px 32px rgba(26, 21, 18, .10);
}

/* Gradient hairline border (mask trick) */
.fk-quiz__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(150deg,
    rgba(251, 83, 0, .9),
    rgba(255, 255, 255, .3) 30%,
    rgba(251, 83, 0, .18) 55%,
    rgba(255, 160, 90, .85) 85%,
    rgba(255, 255, 255, .35));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  pointer-events: none;
}
/* The FINAL's white gradient stops vanish on the light background — swap them
   for warm dark tints so the hairline stays continuous in light mode. */
:root[data-theme="light"] .fk-quiz__panel::before {
  background: linear-gradient(150deg,
    rgba(251, 83, 0, .85),
    rgba(26, 21, 18, .16) 30%,
    rgba(251, 83, 0, .18) 55%,
    rgba(255, 122, 51, .75) 85%,
    rgba(26, 21, 18, .18));
}

/* Step strip */
.fk-quiz__steps {
  list-style: none;
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 28px);
}
.fk-quiz__step {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fk-quiz__step + .fk-quiz__step::before {
  content: "";
  flex: none;
  width: 34px;
  height: 1px;
  margin-right: clamp(8px, 1.4vw, 18px);
  background: var(--fk-border-strong);
}
.fk-quiz__step-num {
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 800;
  color: var(--fk-accent);
}
.fk-quiz__step-label {
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--fk-text-muted);
}

/* Heading + lead */
.fk-quiz__title {
  margin: 0 0 20px;
  max-width: 980px;
  font-size: clamp(24px, 4.2vw, 52px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: .5px;
  text-wrap: balance;
}
.fk-quiz__title span { color: var(--fk-heading); }
.fk-quiz__title span.fk-quiz__title-accent { color: var(--fk-accent); }

.fk-quiz__text {
  margin: 0 0 clamp(28px, 3.2vw, 40px);
  max-width: 720px;
  font-size: clamp(14.5px, 1.4vw, 18px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--fk-text);
}

/* CTA */
.fk-quiz__cta {
  display: inline-block;
  padding: clamp(15px, 1.5vw, 17px) clamp(34px, 3.4vw, 44px);
  border-radius: var(--fk-radius);
  background: var(--fk-accent);
  color: #fff;
  text-decoration: none;
  font-size: clamp(14px, 1.2vw, 15px);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 16px 36px rgba(251, 83, 0, .30);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fk-quiz__cta:hover,
.fk-quiz__cta:focus-visible {
  background: var(--fk-accent-strong);
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .fk-quiz__steps { flex-direction: column; gap: 10px; }
  .fk-quiz__step + .fk-quiz__step::before { display: none; }
  .fk-quiz__cta { align-self: stretch; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fk-quiz__cta { transition: none; }
  .fk-quiz__cta:hover,
  .fk-quiz__cta:focus-visible { transform: none; }
}