/* FROSTBITE TACKLE — PAGE 2: KITS & BUNDLES */

.fbt-body--kits {
  /* чуть более мягкое свечение, чтобы отличать страницу */
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(152, 255, 233, 0.18),
      transparent 55%
    ),
    radial-gradient(
      circle at 90% 100%,
      rgba(126, 211, 255, 0.18),
      transparent 55%
    ),
    #071421;
}

/* SECTION 1 — KIT SURFACE HERO */

.fk-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr);
  gap: 28px;
  align-items: center;
}

.fk-hero-header {
  max-width: 480px;
}

.fk-hero-title {
  font-family: "FrostBiteDisplay", system-ui, sans-serif;
  margin: 0 0 10px;
  font-size: clamp(30px, 3.4vw, 36px);
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fk-hero-text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fbt-text-soft);
}

.fk-hero-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.fk-hero-flag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(164, 210, 255, 0.7);
  background: rgba(5, 24, 41, 0.98);
}

/* grid of kits */

.fk-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 14px;
}

.fk-hero-card {
  border-radius: 22px;
  padding: 10px 10px 12px;
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.5);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 150ms ease, box-shadow 150ms ease,
    border-color 150ms ease;
}

.fk-hero-card--tall {
  grid-row: 1 / 3;
}

.fk-hero-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(1, 7, 14, 1);
  border-color: rgba(152, 255, 233, 0.9);
}

.fk-hero-figure {
  margin: 0;
}

.fk-hero-img {
  border-radius: 16px;
}

.fk-hero-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fk-kit-name {
  margin: 0;
  font-size: 15px;
}

.fk-kit-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-hero-note {
  position: absolute;
  right: 6px;
  bottom: -10px;
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(4, 21, 35, 0.98);
  border: 1px solid rgba(152, 255, 233, 0.6);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
  max-width: 220px;
}

.fk-hero-note-label {
  margin: 0 0 2px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(193, 225, 248, 0.96);
}

.fk-hero-note-text {
  margin: 0;
  font-size: 12px;
  color: var(--fbt-text-soft);
}

/* SECTION 2 — BUNDLE COMPARISON RAIL */

.fk-compare-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-compare-header {
  max-width: 560px;
}

.fk-compare-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-compare-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-compare-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.fk-compare-card {
  border-radius: 20px;
  padding: 10px 12px 12px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px solid rgba(164, 210, 255, 0.5);
  box-shadow: 0 16px 30px rgba(1, 8, 16, 0.96);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 150ms ease, box-shadow 150ms ease,
    border-color 150ms ease, background 150ms ease;
}

.fk-compare-card--highlight {
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.24),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.97);
}

.fk-compare-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(1, 7, 14, 1);
  border-color: rgba(152, 255, 233, 0.9);
}

.fk-compare-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.fk-compare-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(193, 225, 248, 0.96);
}

.fk-compare-weight {
  font-size: 11px;
  color: var(--fbt-text-soft);
}

.fk-compare-figure {
  margin: 0;
}

.fk-compare-img {
  border-radius: 14px;
}

.fk-compare-body-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-compare-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

/* SECTION 3 — PACKING MATRIX PANEL */

.fk-matrix-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-matrix-header {
  max-width: 580px;
}

.fk-matrix-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-matrix-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-matrix-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: center;
}

.fk-matrix-table {
  border-radius: 22px;
  padding: 10px 12px;
  background: rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.5);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
  display: grid;
  grid-auto-rows: minmax(0, auto);
  gap: 4px;
}

.fk-matrix-row {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 8px;
  padding: 6px 6px;
  border-radius: 12px;
}

.fk-matrix-row--head {
  background: rgba(3, 18, 32, 0.98);
  border-radius: 14px;
}

.fk-matrix-cell {
  font-size: 12px;
  color: var(--fbt-text-soft);
}

.fk-matrix-cell--head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(193, 225, 248, 0.98);
}

.fk-matrix-cell--label {
  font-weight: 500;
  color: var(--fbt-primary-strong);
}

.fk-matrix-figure {
  margin: 0;
  border-radius: 22px;
  padding: 10px;
  background: radial-gradient(
      circle at 100% 0,
      rgba(152, 255, 233, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
}

.fk-matrix-img {
  border-radius: 16px;
}

.fk-matrix-caption {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--fbt-text-soft);
}

/* RESPONSIVE — PAGE 2 SECTIONS 1–3 */

@media (max-width: 1024px) {
  .fk-hero-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  }

  .fk-hero-note {
    position: static;
    margin-top: 4px;
    max-width: 100%;
  }

  .fk-matrix-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-matrix-figure {
    max-width: 360px;
  }
}

@media (max-width: 880px) {
  .fk-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-hero-header {
    max-width: none;
  }

  .fk-hero-grid {
    margin-top: 6px;
  }

  .fk-compare-rail {
    grid-template-columns: repeat(3, minmax(0, 230px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .fk-compare-card {
    min-width: 230px;
    scroll-snap-align: start;
  }

  .fk-matrix-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto;
  }

  .fk-matrix-row .fk-matrix-cell:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .fk-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-hero-card--tall {
    grid-row: auto;
  }

  .fk-hero-note {
    margin-top: 6px;
  }

  .fk-matrix-table {
    padding-inline: 8px;
  }
}
/* SECTION 4 — SOLO STARTER ANATOMY */

.fk-anatomy-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-anatomy-header {
  max-width: 560px;
}

.fk-anatomy-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-anatomy-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-anatomy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr);
  gap: 22px;
  align-items: center;
}

.fk-anatomy-figure {
  margin: 0;
  border-radius: 24px;
  padding: 10px;
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
}

.fk-anatomy-img {
  border-radius: 18px;
}

.fk-anatomy-caption {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--fbt-text-soft);
}

.fk-anatomy-ribbons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.fk-anatomy-ribbon {
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(5, 26, 44, 0.96);
  border: 1px dashed rgba(164, 210, 255, 0.6);
}

.fk-anatomy-ribbon-title {
  margin: 0 0 4px;
  font-size: 15px;
}

.fk-anatomy-ribbon-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-anatomy-secondary {
  margin: 2px 0 0;
  border-radius: 16px;
  padding: 6px;
  background: radial-gradient(
      circle at 100% 0,
      rgba(152, 255, 233, 0.22),
      transparent 55%
    ),
    rgba(3, 18, 32, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  justify-self: flex-start;
}

.fk-anatomy-secondary-img {
  border-radius: 12px;
}

/* SECTION 5 — WEATHER-LANE KIT BANDS */

.fk-weather-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-weather-header {
  max-width: 580px;
}

.fk-weather-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-weather-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-weather-bands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.fk-weather-band {
  border-radius: 20px;
  padding: 10px 12px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px solid rgba(164, 210, 255, 0.5);
  box-shadow: 0 16px 30px rgba(1, 8, 16, 0.96);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
}

.fk-weather-band--middle {
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.25),
      transparent 60%
    ),
    rgba(5, 26, 44, 0.97);
}

.fk-weather-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.fk-weather-temp {
  font-size: 12px;
  font-weight: 500;
  color: var(--fbt-primary-strong);
}

.fk-weather-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(193, 225, 248, 0.96);
}

.fk-weather-body {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-weather-figure {
  margin: 0;
}

.fk-weather-img {
  border-radius: 14px;
}

/* SECTION 6 — AUGER & POWER LINK STRIP */

.fk-power-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-power-header {
  max-width: 580px;
}

.fk-power-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-power-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-power-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.fk-power-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 14px;
  align-items: center;
  border-radius: 20px;
  padding: 10px 12px;
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.2),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.55);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
}

.fk-power-row--reverse {
  grid-template-columns: auto minmax(0, 1.4fr);
}

.fk-power-copy {
  max-width: 420px;
}

.fk-power-row-title {
  margin: 0 0 4px;
  font-size: 15px;
}

.fk-power-row-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-power-figure {
  margin: 0;
}

.fk-power-img {
  border-radius: 16px;
}

/* RESPONSIVE — SECTIONS 4–6 */

@media (max-width: 980px) {
  .fk-anatomy-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-weather-bands {
    grid-template-columns: repeat(3, minmax(0, 230px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .fk-weather-band {
    min-width: 230px;
    scroll-snap-align: start;
  }

  .fk-power-row,
  .fk-power-row--reverse {
    grid-template-columns: minmax(0, 1.2fr) auto;
  }
}

@media (max-width: 640px) {
  .fk-weather-bands {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
  }

  .fk-weather-band {
    min-width: 0;
  }

  .fk-power-row,
  .fk-power-row--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-power-figure {
    max-width: 260px;
  }
}
/* SECTION 7 — RIGGED RODS DECK */

.fk-rigs-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-rigs-header {
  max-width: 580px;
}

.fk-rigs-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-rigs-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-rigs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
  gap: 22px;
  align-items: center;
}

.fk-rigs-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.fk-rigs-item {
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px dashed rgba(164, 210, 255, 0.6);
}

.fk-rigs-item-title {
  margin: 0 0 4px;
  font-size: 15px;
}

.fk-rigs-item-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-rigs-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
}

.fk-rigs-figure {
  margin: 0;
  border-radius: 22px;
  padding: 10px;
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
}

.fk-rigs-figure--offset {
  background: radial-gradient(
      circle at 100% 0,
      rgba(152, 255, 233, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
}

.fk-rigs-img {
  border-radius: 16px;
}

.fk-rigs-caption {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--fbt-text-soft);
}

/* SECTION 8 — FAMILY MODES PANE */

.fk-family-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: center;
}

.fk-family-figure {
  margin: 0;
  border-radius: 24px;
  padding: 10px;
  background: radial-gradient(
      circle at 0 0,
      rgba(152, 255, 233, 0.24),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.65);
  box-shadow: 0 20px 38px rgba(1, 7, 14, 0.98);
}

.fk-family-img {
  border-radius: 18px;
}

.fk-family-caption {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--fbt-text-soft);
}

.fk-family-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fk-family-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-family-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-family-modes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.fk-family-mode {
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px solid rgba(164, 210, 255, 0.5);
}

.fk-family-mode-title {
  margin: 0 0 4px;
  font-size: 15px;
}

.fk-family-mode-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-family-secondary {
  margin: 0 0 0 auto;
  border-radius: 18px;
  padding: 6px;
  background: radial-gradient(
      circle at 100% 0,
      rgba(126, 211, 255, 0.24),
      transparent 55%
    ),
    rgba(3, 18, 32, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  max-width: 230px;
}

.fk-family-secondary-img {
  border-radius: 14px;
}

/* SECTION 9 — ADD-ONS BELT */

.fk-addons-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-addons-header {
  max-width: 580px;
}

.fk-addons-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-addons-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-addons-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 10px 10px 12px;
  border-radius: 24px;
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.22),
      transparent 55%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(152, 255, 233, 0.18),
      transparent 55%
    ),
    rgba(3, 18, 32, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 20px 40px rgba(1, 7, 14, 0.98);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.fk-addon-chip {
  flex: 0 0 240px;
  scroll-snap-align: start;
  border-radius: 18px;
  padding: 8px 9px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px solid rgba(164, 210, 255, 0.5);
  box-shadow: 0 16px 30px rgba(1, 8, 16, 0.96);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.fk-addon-chip--plain {
  background: rgba(4, 21, 35, 0.98);
}

.fk-addon-figure {
  margin: 0;
}

.fk-addon-img {
  border-radius: 14px;
}

.fk-addon-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fk-addon-title {
  margin: 0;
  font-size: 14px;
}

.fk-addon-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

/* RESPONSIVE — SECTIONS 7–9 */

@media (max-width: 980px) {
  .fk-rigs-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-family-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-family-secondary {
    margin: 6px 0 0;
  }
}

@media (max-width: 640px) {
  .fk-addons-strip {
    padding-inline: 8px;
  }

  .fk-addon-chip {
    flex: 0 0 220px;
  }
}
/* SECTION 10 — COLOR CODES STRIP */

.fk-labels-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-labels-header {
  max-width: 580px;
}

.fk-labels-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-labels-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-labels-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr);
  gap: 22px;
  align-items: center;
}

.fk-labels-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.fk-labels-pill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border-radius: 18px;
  padding: 8px 10px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px solid rgba(164, 210, 255, 0.55);
}

.fk-labels-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(126, 211, 255, 0.8);
}

.fk-labels-dot--solo {
  background: linear-gradient(135deg, #7ed3ff, #e9f8ff);
}

.fk-labels-dot--weekend {
  background: linear-gradient(135deg, #7fffe7, #e8fff8);
}

.fk-labels-dot--family {
  background: linear-gradient(135deg, #ffe48f, #fff9e3);
}

.fk-labels-pill-title {
  margin: 0 0 2px;
  font-size: 14px;
}

.fk-labels-pill-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-labels-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
}

.fk-labels-figure {
  margin: 0;
  border-radius: 22px;
  padding: 10px;
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
}

.fk-labels-figure--small {
  max-width: 230px;
  justify-self: flex-end;
}

.fk-labels-img {
  border-radius: 16px;
}

/* SECTION 11 — MAINTENANCE RIBBON */

.fk-maintain-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-maintain-header {
  max-width: 560px;
}

.fk-maintain-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-maintain-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-maintain-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: center;
}

.fk-maintain-steps {
  border-radius: 22px;
  padding: 10px 12px;
  background: linear-gradient(
    135deg,
    rgba(126, 211, 255, 0.22),
    rgba(5, 26, 44, 0.98)
  );
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.fk-maintain-step {
  border-radius: 16px;
  padding: 8px 9px;
  background: rgba(3, 18, 32, 0.98);
}

.fk-maintain-step-title {
  margin: 0 0 3px;
  font-size: 14px;
}

.fk-maintain-step-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-maintain-figure {
  margin: 0;
  border-radius: 22px;
  padding: 10px;
  background: radial-gradient(
      circle at 100% 0,
      rgba(152, 255, 233, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.65);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
}

.fk-maintain-img {
  border-radius: 16px;
}

.fk-maintain-caption {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--fbt-text-soft);
}

/* SECTION 12 — CHECKLIST CARDS PANEL */

.fk-checklists-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-checklists-header {
  max-width: 560px;
}

.fk-checklists-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-checklists-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-checklists-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.fk-checklists-card {
  margin: 0;
  border-radius: 20px;
  padding: 10px 10px 9px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px solid rgba(164, 210, 255, 0.55);
  box-shadow: 0 16px 30px rgba(1, 8, 16, 0.96);
}

.fk-checklists-card--note {
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.97);
}

.fk-checklists-img {
  border-radius: 16px;
}

.fk-checklists-caption {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--fbt-text-soft);
}

/* RESPONSIVE — SECTIONS 10–12 */

@media (max-width: 980px) {
  .fk-labels-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-labels-figure--small {
    justify-self: flex-start;
  }

  .fk-maintain-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-checklists-layout {
    grid-template-columns: repeat(3, minmax(0, 220px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .fk-checklists-card {
    min-width: 220px;
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  .fk-checklists-layout {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
  }

  .fk-checklists-card {
    min-width: 0;
  }
}
/* SECTION 13 — UPGRADE PATHS TRACK */

.fk-paths-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-paths-header {
  max-width: 580px;
}

.fk-paths-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-paths-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-paths-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: center;
}

.fk-paths-track {
  border-radius: 24px;
  padding: 12px 12px 10px;
  background: linear-gradient(
    135deg,
    rgba(126, 211, 255, 0.24),
    rgba(5, 26, 44, 0.98)
  );
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 20px 40px rgba(1, 7, 14, 0.98);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.fk-path-step {
  border-radius: 16px;
  padding: 8px 10px;
  background: rgba(3, 18, 32, 0.98);
}

.fk-path-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.fk-path-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(164, 210, 255, 0.7);
}

.fk-path-step-title {
  margin: 0;
  font-size: 14px;
}

.fk-path-step-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-paths-scenes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.fk-paths-figure {
  margin: 0;
  border-radius: 22px;
  padding: 8px 9px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px solid rgba(164, 210, 255, 0.55);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
}

.fk-paths-figure--wide {
  background: radial-gradient(
      circle at 0 0,
      rgba(152, 255, 233, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.97);
}

.fk-paths-img {
  border-radius: 16px;
}

/* SECTION 14 — PACKAGING & SHIPPING PANEL */

.fk-packaging-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-packaging-header {
  max-width: 580px;
}

.fk-packaging-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-packaging-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-packaging-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: center;
}

.fk-packaging-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.fk-packaging-point {
  border-radius: 18px;
  padding: 9px 11px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px dashed rgba(164, 210, 255, 0.6);
}

.fk-packaging-point-title {
  margin: 0 0 3px;
  font-size: 14px;
}

.fk-packaging-point-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-packaging-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.fk-packaging-figure {
  margin: 0;
  border-radius: 22px;
  padding: 8px 9px;
  background: rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
}

.fk-packaging-figure--main {
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
}

.fk-packaging-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.fk-packaging-figure--small {
  max-width: 220px;
  justify-self: flex-end;
}

.fk-packaging-img {
  border-radius: 16px;
}

/* SECTION 15 — DAY LAYOUT PRESETS */

.fk-presets-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-presets-header {
  max-width: 560px;
}

.fk-presets-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-presets-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-presets-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.fk-preset {
  border-radius: 20px;
  padding: 10px 11px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px solid rgba(164, 210, 255, 0.55);
  box-shadow: 0 16px 30px rgba(1, 8, 16, 0.96);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 6px;
}

.fk-preset--wide {
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.97);
}

.fk-preset-title {
  margin: 0 0 3px;
  font-size: 14px;
}

.fk-preset-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-preset-figure {
  margin: 0;
}

.fk-preset-img {
  border-radius: 16px;
}

/* SECTION 16 — SUPPORT CHANNELS BAR */

.fk-support-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-support-header {
  max-width: 580px;
}

.fk-support-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-support-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: center;
}

.fk-support-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.fk-support-option {
  border-radius: 18px;
  padding: 9px 11px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px dashed rgba(164, 210, 255, 0.6);
}

.fk-support-option-title {
  margin: 0 0 3px;
  font-size: 14px;
}

.fk-support-option-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-support-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
}

.fk-support-figure {
  margin: 0;
  border-radius: 22px;
  padding: 8px 9px;
  background: radial-gradient(
      circle at 0 0,
      rgba(152, 255, 233, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
}

.fk-support-figure--small {
  max-width: 220px;
  justify-self: flex-end;
}

.fk-support-img {
  border-radius: 16px;
}

/* SECTION 17 — CUSTOM KIT CTA BELT */

.fk-custom-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: center;
}

.fk-custom-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fk-custom-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-custom-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

.fk-custom-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.fk-custom-step {
  border-radius: 18px;
  padding: 8px 10px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px solid rgba(164, 210, 255, 0.55);
}

.fk-custom-step-title {
  margin: 0 0 3px;
  font-size: 14px;
}

.fk-custom-step-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

.fk-custom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.fk-custom-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.fk-custom-figure {
  margin: 0;
  border-radius: 22px;
  padding: 8px 9px;
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
}

.fk-custom-figure--wide {
  background: radial-gradient(
      circle at 100% 0,
      rgba(152, 255, 233, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
}

.fk-custom-img {
  border-radius: 16px;
}

/* RESPONSIVE — SECTIONS 13–17 */

@media (max-width: 980px) {
  .fk-paths-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-packaging-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-packaging-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-packaging-figure--small {
    justify-self: flex-start;
  }

  .fk-presets-layout {
    grid-template-columns: repeat(3, minmax(0, 220px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .fk-preset {
    min-width: 220px;
    scroll-snap-align: start;
  }

  .fk-support-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-custom-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .fk-presets-layout {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
  }

  .fk-preset {
    min-width: 0;
  }

  .fk-custom-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
/* === KITS HERO IMAGE LAYOUT FIX === */

.fk-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 32px;
  align-items: center;
}

/* сетка карточек без наложения */
.fk-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* сбрасываем позиционирование/трансформы, если были */
.fk-hero-card {
  position: relative;
  transform: none;
  margin: 0;
  border-radius: 22px;
  padding: 8px 8px 10px;
  background: rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 16px 30px rgba(1, 7, 14, 0.96);
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.fk-hero-figure {
  margin: 0;
}

/* ограничения для картинок */
.fk-hero-img {
  display: block;
  width: 100%;
  max-width: 350px;
  height: auto;
  border-radius: 18px;
  margin: 0 auto;
}

/* текст внутри карточки */
.fk-hero-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fk-kit-name {
  margin: 0;
  font-size: 16px;
}

.fk-kit-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

/* блок с примечанием под карточками на всю ширину */
.fk-hero-note {
  grid-column: 1 / -1;
  align-self: flex-start;
  border-radius: 18px;
  padding: 8px 11px;
  background: rgba(3, 18, 32, 0.98);
  border: 1px dashed rgba(164, 210, 255, 0.6);
}

/* адаптив — планшет/мобилка: всё в одну колонку */

@media (max-width: 960px) {
  .fk-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .fk-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-hero-card {
    max-width: 360px;
    margin-inline: auto;
  }

  .fk-hero-note {
    max-width: 360px;
    margin-inline: auto;
  }
}
/* === KITS FAMILY IMAGES FIX === */

.fk-family-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: center;
}

/* левый большой кадр */
.fk-family-figure {
  margin: 0;
  max-width: 350px;
}

.fk-family-img {
  display: block;
  width: 100%;
  max-width: 350px;
  height: auto;
  border-radius: 20px;
}

/* текстовый блок + второй кадр */
.fk-family-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fk-family-header {
  max-width: 520px;
}

.fk-family-title {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-family-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

/* три режима в аккуратную сетку */
.fk-family-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fk-family-mode {
  border-radius: 18px;
  padding: 8px 10px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px solid rgba(164, 210, 255, 0.55);
}

.fk-family-mode-title {
  margin: 0 0 3px;
  font-size: 14px;
}

.fk-family-mode-text {
  margin: 0;
  font-size: 13px;
  color: var(--fbt-text-soft);
}

/* правый маленький кадр */
.fk-family-secondary {
  margin: 8px 0 0;
  max-width: 350px;
}

.fk-family-secondary-img {
  display: block;
  width: 100%;
  max-width: 350px;
  height: auto;
  border-radius: 18px;
}

/* АДАПТИВ */

@media (max-width: 960px) {
  .fk-family-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-family-figure,
  .fk-family-secondary {
    margin-left: auto;
    margin-right: auto;
  }

  .fk-family-modes {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* === KITS COLOR CODES IMAGES FIX === */

.fk-labels-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fk-labels-header {
  max-width: 520px;
}

.fk-labels-title {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fk-labels-text {
  margin: 0;
  font-size: 14px;
  color: var(--fbt-text-soft);
}

/* текст слева, картинки справа — без наложения */
.fk-labels-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: center;
}

.fk-labels-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.fk-labels-pill {
  border-radius: 18px;
  padding: 8px 10px;
  background: rgba(5, 26, 44, 0.97);
  border: 1px solid rgba(164, 210, 255, 0.55);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* галерея с двумя кадрами */
.fk-labels-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
}

.fk-labels-figure {
  margin: 0;
  border-radius: 20px;
  padding: 8px;
  background: radial-gradient(
      circle at 0 0,
      rgba(126, 211, 255, 0.22),
      transparent 55%
    ),
    rgba(5, 26, 44, 0.98);
  border: 1px solid rgba(164, 210, 255, 0.6);
  box-shadow: 0 18px 34px rgba(1, 7, 14, 0.98);
}

.fk-labels-figure--small {
  max-width: 260px;
  justify-self: flex-end;
}

/* ограничение ширины картинок */
.fk-labels-img {
  display: block;
  width: 100%;
  max-width: 350px;
  height: auto;
  border-radius: 16px;
}

/* адаптив: всё в одну колонку, картинки по центру */

@media (max-width: 960px) {
  .fk-labels-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-labels-gallery {
    justify-items: center;
  }

  .fk-labels-figure,
  .fk-labels-figure--small {
    justify-self: center;
  }
}