/* ==========================================
   COMPASSCAST JOURNAL — GEAR LAB (PAGE 3)
   ========================================== */

/* Общий отступ под фиксированный хедер */

.ccg-main {
  padding-top: 88px;
}

@media (max-width: 768px) {
  .ccg-main {
    padding-top: 72px;
  }
}

.ccg-section {
  padding-top: 64px;
}

/* ===============================
   ХЕДЕР НА 3 СТРАНИЦЕ
   =============================== */

body[data-page="gear-lab"] .ccj-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
}

body[data-page="gear-lab"] .ccj-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

body[data-page="gear-lab"] .ccj-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(243, 235, 222, 0.96);
}

body[data-page="gear-lab"] .ccj-logo__text {
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
}

/* Навигация */

body[data-page="gear-lab"] .ccj-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

body[data-page="gear-lab"] .ccj-nav__link {
  text-decoration: none;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 14px;
  color: rgba(243, 235, 222, 0.8);
  position: relative;
  padding-bottom: 2px;
  transition:
    color 0.2s ease-out,
    opacity 0.2s ease-out;
}

body[data-page="gear-lab"] .ccj-nav__link:hover {
  color: rgba(243, 235, 222, 1);
}

body[data-page="gear-lab"] .ccj-nav__link--active {
  color: var(--ccj-accent-main, #f3833f);
}

/* Бургер-кнопка */

body[data-page="gear-lab"] .ccj-nav__toggle {
  display: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

body[data-page="gear-lab"] .ccj-nav__line {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.92);
}

/* Мобильная навигация */

@media (max-width: 768px) {
  body[data-page="gear-lab"] .ccj-header__inner {
    height: 64px;
  }

  body[data-page="gear-lab"] .ccj-nav__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  body[data-page="gear-lab"] .ccj-nav__list {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 72px;
    padding: 12px 14px;
    border-radius: 16px;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(7, 8, 12, 0.96);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.95);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 0.2s ease-out,
      transform 0.2s ease-out;
  }

  body[data-page="gear-lab"] .ccj-header.ccj-header--nav-open .ccj-nav__list {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* ===============================
   ОБЩИЕ ЭЛЕМЕНТЫ 3 СТРАНИЦЫ
   =============================== */

.ccg-hero__eyebrow,
.ccg-lines__eyebrow,
.ccg-lures__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-hero__eyebrow::before,
.ccg-lines__eyebrow::before,
.ccg-lures__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

/* ===============================
   1 СЕКЦИЯ — РАБОЧИЙ СТОЛ
   =============================== */

.ccg-hero-section {
  padding-top: 40px;
}

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

.ccg-hero__intro {
  padding-right: 8px;
}

.ccg-hero__title {
  margin: 0 0 10px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}

.ccg-hero__text,
.ccg-hero__note {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* чипы-режимы лаборатории */

.ccg-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.ccg-chip {
  border-radius: 999px;
  border: 1px solid rgba(243, 235, 222, 0.26);
  padding: 6px 12px;
  background: rgba(12, 13, 19, 0.96);
  color: rgba(243, 235, 222, 0.9);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 12px;
  cursor: default;
  transition:
    background 0.2s ease-out,
    border-color 0.2s ease-out,
    transform 0.2s ease-out,
    box-shadow 0.2s ease-out;
}

.ccg-chip--lines {
  border-color: rgba(75, 184, 154, 0.8);
}

.ccg-chip--lures {
  border-color: rgba(243, 131, 63, 0.8);
}

.ccg-chip--camp {
  border-color: rgba(111, 143, 219, 0.8);
}

.ccg-chip:hover {
  background: rgba(243, 235, 222, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.9);
}

/* сцена рабочего стола */

.ccg-hero__stage {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 12px;
  justify-items: center;
}

.ccg-hero__photo {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 22px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.98);
  transform-origin: center;
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-hero__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-hero__photo--desk {
  transform: translateY(4px) rotate(-3deg);
}

.ccg-hero__photo--tray {
  transform: translateY(-2px) rotate(2deg);
}

.ccg-hero__photo--page {
  position: absolute;
  bottom: -8px;
  right: -8px;
  max-width: 180px;
  border-radius: 18px;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
}

.ccg-hero__caption {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(7, 8, 12, 0.92);
  border: 1px solid rgba(243, 235, 222, 0.3);
  font-size: 11px;
  font-family: "Urbanist", system-ui, sans-serif;
}

/* hover-эффект */

.ccg-hero__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* ===============================
   2 СЕКЦИЯ — ЛИНЕЙКА ШНУРОВ
   =============================== */

.ccg-lines-section {
  padding-top: 64px;
}

.ccg-lines {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 32px;
  align-items: center;
}

.ccg-lines__column--scale {
  padding-right: 8px;
}

.ccg-lines__title {
  margin: 0 0 10px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-lines__text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* шкала маршрутов с шнурами */

.ccg-lines__scale {
  position: relative;
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 20px;
}

.ccg-lines__scale::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background-image: linear-gradient(
    to bottom,
    rgba(75, 184, 154, 0.9),
    rgba(243, 131, 63, 0.9)
  );
  box-shadow: 0 0 22px rgba(243, 131, 63, 0.8);
}

.ccg-lines__step {
  position: relative;
  padding: 8px 0 8px 6px;
}

.ccg-lines__step::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(243, 235, 222, 1);
  background: #07080c;
  box-shadow: 0 0 14px rgba(243, 235, 222, 0.9);
}

.ccg-lines__route {
  display: block;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(243, 235, 222, 0.96);
}

.ccg-lines__meta {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(243, 235, 222, 0.86);
}

/* колонка с фотографиями шнуров */

.ccg-lines__column--photos {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  justify-items: center;
}

.ccg-lines__photo {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-lines__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-lines__photo--spool {
  transform: translateY(4px) rotate(-2deg);
}

.ccg-lines__photo--detail {
  transform: translateY(-4px) rotate(3deg);
}

.ccg-lines__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* ===============================
   3 СЕКЦИЯ — ПОЛКА ПРИМАНОК
   =============================== */

.ccg-lures-section {
  padding-top: 64px;
}

.ccg-lures {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 32px;
  align-items: center;
}

/* текстовая полка */

.ccg-lures__shelf {
  padding: 18px 20px 18px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, #262a3a 0, #151722 55%, #101019 100%);
  border: 1px solid rgba(243, 235, 222, 0.14);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.96);
}

.ccg-lures__title {
  margin: 6px 0 10px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-lures__text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* слоты приманок */

.ccg-lures__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.ccg-lures__slot {
  position: relative;
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(12, 13, 19, 0.96);
  border: 1px solid rgba(243, 235, 222, 0.2);
  overflow: hidden;
}

.ccg-lures__slot::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(75, 184, 154, 0.9),
    rgba(243, 131, 63, 0.9)
  );
  opacity: 0.9;
}

.ccg-lures__slot--bright::before {
  background: linear-gradient(
    to bottom,
    rgba(243, 235, 222, 0.9),
    rgba(243, 131, 63, 0.9)
  );
}

.ccg-lures__slot--deep::before {
  background: linear-gradient(
    to bottom,
    rgba(111, 143, 219, 0.9),
    rgba(75, 184, 154, 0.9)
  );
}

.ccg-lures__slot--night::before {
  background: linear-gradient(
    to bottom,
    rgba(243, 131, 63, 0.9),
    rgba(111, 143, 219, 0.9)
  );
}

.ccg-lures__name {
  margin: 0 0 2px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(243, 235, 222, 0.96);
}

.ccg-lures__meta {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(243, 235, 222, 0.86);
}

/* фотографии приманок */

.ccg-lures__photos {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  justify-items: center;
}

.ccg-lures__photo {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-lures__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-lures__photo--tray {
  transform: translateY(4px) rotate(-2deg);
}

.ccg-lures__photo--box {
  transform: translateY(-4px) rotate(3deg);
}

.ccg-lures__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* ===============================
   АДАПТИВ ДЛЯ СЕКЦИЙ 1–3
   =============================== */

@media (max-width: 960px) {
  .ccg-hero,
  .ccg-lines,
  .ccg-lures {
    grid-template-columns: minmax(0, 1fr);
  }

  .ccg-hero__stage,
  .ccg-lines__column--photos,
  .ccg-lures__photos,
  .ccg-lures__shelf {
    max-width: 360px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .ccg-hero__intro,
  .ccg-lines__column--scale {
    padding-right: 0;
  }

  .ccg-hero__photo--desk,
  .ccg-hero__photo--tray,
  .ccg-lines__photo--spool,
  .ccg-lines__photo--detail,
  .ccg-lures__photo--tray,
  .ccg-lures__photo--box {
    transform: none;
  }

  .ccg-hero__photo--page {
    position: static;
    max-width: 220px;
    margin-top: 8px;
  }

  .ccg-lures__shelf {
    padding: 18px 16px 16px;
  }
}
/* ===============================
   4 СЕКЦИЯ — КОЛЬЦО УЗЛОВ
   =============================== */

.ccg-knots-section {
  padding-top: 64px;
}

.ccg-knots {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 32px;
  align-items: center;
}

.ccg-knots__intro {
  padding-right: 8px;
}

.ccg-knots__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-knots__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-knots__title {
  margin: 0 0 10px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-knots__text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* теги-ситуации */

.ccg-knots__tags {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ccg-knots__tag {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(243, 235, 222, 0.24);
  font-size: 11px;
  font-family: "Urbanist", system-ui, sans-serif;
  background: rgba(12, 13, 19, 0.96);
}

/* кольцо с фото узлов */

.ccg-knots__ring {
  position: relative;
  width: 100%;
  max-width: 330px;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
}

.ccg-knots__ring::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed rgba(243, 235, 222, 0.32);
  opacity: 0.9;
}

.ccg-knots__photo {
  position: absolute;
  width: 44%;
  max-width: 150px;
  border-radius: 50%;
  overflow: hidden;
  background: #171b23;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-knots__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  height: 100%;
  object-fit: cover;
}

.ccg-knots__photo--board {
  top: 4%;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
}

.ccg-knots__photo--sketch {
  left: -4%;
  bottom: 8%;
  transform: rotate(4deg);
}

.ccg-knots__photo--rig {
  right: -4%;
  bottom: 16%;
  transform: rotate(-2deg);
}

.ccg-knots__photo:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 1);
  filter: saturate(1.08);
}

/* ===============================
   5 СЕКЦИЯ — ПАНЕЛЬ МОНТАЖЕЙ
   =============================== */

.ccg-rigs-section {
  padding-top: 64px;
}

.ccg-rigs {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px;
  align-items: center;
}

/* карточка с короткими описаниями */

.ccg-rigs__card {
  padding: 18px 20px 16px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, #262a3a 0, #151722 55%, #101019 100%);
  border: 1px solid rgba(243, 235, 222, 0.14);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.96);
}

.ccg-rigs__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-rigs__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-rigs__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-rigs__text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(243, 235, 222, 0.86);
}

.ccg-rigs__rows {
  margin-top: 4px;
  border-top: 1px solid rgba(243, 235, 222, 0.18);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ccg-rigs__row {
  padding: 4px 0;
}

.ccg-rigs__label {
  display: block;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(243, 235, 222, 0.96);
}

.ccg-rigs__meta {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(243, 235, 222, 0.86);
}

/* фотографии монтажей */

.ccg-rigs__photos {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  justify-items: center;
}

.ccg-rigs__photo {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-rigs__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-rigs__photo--mat {
  transform: translateY(4px) rotate(-2deg);
}

.ccg-rigs__photo--close {
  transform: translateY(-4px) rotate(3deg);
}

.ccg-rigs__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* ===============================
   6 СЕКЦИЯ — ЛАГЕРНЫЙ ЯЩИК
   =============================== */

.ccg-campbox-section {
  padding-top: 64px;
}

.ccg-campbox {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px;
  align-items: center;
}

.ccg-campbox__text {
  padding-right: 8px;
}

.ccg-campbox__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-campbox__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-campbox__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-campbox__text-main {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* фотографии лагерного ящика */

.ccg-campbox__photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.ccg-campbox__photo {
  position: relative;
  width: 100%;
  max-width: 260px;
  border-radius: 999px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-campbox__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: 100%;
  object-fit: cover;
}

.ccg-campbox__photo--box {
  transform: translateX(-6px);
}

.ccg-campbox__photo--tools {
  transform: translateX(6px);
}

.ccg-campbox__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* ===============================
   АДАПТИВ ДЛЯ СЕКЦИЙ 4–6
   =============================== */

@media (max-width: 960px) {
  .ccg-knots,
  .ccg-rigs,
  .ccg-campbox {
    grid-template-columns: minmax(0, 1fr);
  }

  .ccg-knots__ring,
  .ccg-rigs__photos,
  .ccg-campbox__photos,
  .ccg-rigs__card {
    max-width: 360px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .ccg-knots__intro,
  .ccg-campbox__text {
    padding-right: 0;
  }

  .ccg-knots__photo--board,
  .ccg-knots__photo--sketch,
  .ccg-knots__photo--rig,
  .ccg-rigs__photo--mat,
  .ccg-rigs__photo--close,
  .ccg-campbox__photo--box,
  .ccg-campbox__photo--tools {
    transform: none;
  }

  .ccg-campbox__photos {
    flex-direction: row;
    justify-content: center;
  }

  .ccg-campbox__photo {
    max-width: 180px;
  }
}
/* ===============================
   7 СЕКЦИЯ — ЖУРНАЛ ТЕСТОВ
   =============================== */

.ccg-tests-section {
  padding-top: 64px;
}

.ccg-tests {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 32px;
  align-items: center;
}

.ccg-tests__panel {
  padding-right: 8px;
}

.ccg-tests__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-tests__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-tests__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-tests__text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

.ccg-tests__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ccg-tests__item {
  padding: 6px 9px;
  border-radius: 14px;
  background: rgba(12, 13, 19, 0.96);
  border: 1px solid rgba(243, 235, 222, 0.18);
}

.ccg-tests__label {
  display: block;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(243, 235, 222, 0.96);
}

.ccg-tests__meta {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(243, 235, 222, 0.86);
}

/* галерея с тройкой фото */

.ccg-tests__gallery {
  position: relative;
  width: 100%;
  max-width: 330px;
  margin-inline: auto;
  min-height: 260px;
}

.ccg-tests__photo {
  position: absolute;
  border-radius: 18px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-tests__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-tests__photo--spread {
  width: 70%;
  left: 15%;
  top: 0;
  transform: rotate(-3deg);
}

.ccg-tests__photo--mat {
  width: 58%;
  left: 0;
  bottom: 4%;
  transform: rotate(3deg);
}

.ccg-tests__photo--stickies {
  width: 58%;
  right: 0;
  bottom: 12%;
  transform: rotate(-1deg);
}

.ccg-tests__photo:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 1);
  filter: saturate(1.08);
}

/* ===============================
   8 СЕКЦИЯ — КРЮЧКИ ДЛЯ ОСОБЫХ СЛУЧАЕВ
   =============================== */

.ccg-hooks-section {
  padding-top: 64px;
}

.ccg-hooks {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
}

.ccg-hooks__board {
  padding: 18px 20px 16px;
  border-radius: 22px;
  background: radial-gradient(circle at top left, #262a3a 0, #151722 55%, #101019 100%);
  border: 1px solid rgba(243, 235, 222, 0.14);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.96);
}

.ccg-hooks__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.ccg-hooks__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-hooks__title {
  margin: 0 0 10px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-hooks__rows {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ccg-hooks__row {
  padding: 6px 9px;
  border-radius: 16px;
  background: rgba(12, 13, 19, 0.96);
  border: 1px solid rgba(243, 235, 222, 0.18);
}

.ccg-hooks__name {
  display: block;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(243, 235, 222, 0.96);
}

.ccg-hooks__meta {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(243, 235, 222, 0.86);
}

/* фото крючков */

.ccg-hooks__photos {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  justify-items: center;
}

.ccg-hooks__photo {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-hooks__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-hooks__photo--tray {
  transform: translateY(4px) rotate(-2deg);
}

.ccg-hooks__photo--macro {
  transform: translateY(-4px) rotate(3deg);
}

.ccg-hooks__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* ===============================
   9 СЕКЦИЯ — КАРМАННЫЕ НАБОРЫ
   =============================== */

.ccg-kits-section {
  padding-top: 64px;
}

.ccg-kits {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
}

.ccg-kits__text {
  padding-right: 8px;
}

.ccg-kits__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-kits__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-kits__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-kits__text-main {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* фото карманных наборов */

.ccg-kits__photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.ccg-kits__photo {
  position: relative;
  width: 100%;
  max-width: 260px;
  border-radius: 999px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-kits__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: 100%;
  object-fit: cover;
}

.ccg-kits__photo--pouch {
  transform: translateX(-6px);
}

.ccg-kits__photo--layout {
  transform: translateX(6px);
}

.ccg-kits__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* ===============================
   АДАПТИВ ДЛЯ СЕКЦИЙ 7–9
   =============================== */

@media (max-width: 960px) {
  .ccg-tests,
  .ccg-hooks,
  .ccg-kits {
    grid-template-columns: minmax(0, 1fr);
  }

  .ccg-tests__gallery,
  .ccg-hooks__photos,
  .ccg-kits__photos,
  .ccg-hooks__board {
    max-width: 360px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .ccg-tests__panel,
  .ccg-kits__text {
    padding-right: 0;
  }

  .ccg-tests__photo--spread,
  .ccg-tests__photo--mat,
  .ccg-tests__photo--stickies,
  .ccg-hooks__photo--tray,
  .ccg-hooks__photo--macro,
  .ccg-kits__photo--pouch,
  .ccg-kits__photo--layout {
    transform: none;
  }

  .ccg-kits__photos {
    flex-direction: row;
    justify-content: center;
  }

  .ccg-kits__photo {
    max-width: 180px;
  }
}
/* ===============================
   10 СЕКЦИЯ — ШКАЛА ГРУЗОВ
   =============================== */

.ccg-weights-section {
  padding-top: 64px;
}

.ccg-weights {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 32px;
  align-items: center;
}

/* левая часть — рельс с фото */

.ccg-weights__rail-shell {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  min-height: 260px;
}

.ccg-weights__rail {
  position: absolute;
  inset-inline: 8px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background-image: linear-gradient(
    to right,
    rgba(75, 184, 154, 0.95),
    rgba(243, 131, 63, 0.95)
  );
  box-shadow: 0 0 22px rgba(243, 131, 63, 0.8);
  transform: translateY(-50%);
}

/* три фотографии вдоль рельса */

.ccg-weights__photo {
  position: absolute;
  border-radius: 18px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-weights__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

/* немного разные размеры/позиции */

.ccg-weights__photo--scale {
  width: 52%;
  left: 2%;
  top: 10%;
  transform: rotate(-4deg);
}

.ccg-weights__photo--jigs {
  width: 48%;
  right: 4%;
  top: 52%;
  transform: translateY(-50%) rotate(3deg);
}

.ccg-weights__photo--notes {
  width: 44%;
  left: 26%;
  bottom: 0;
  transform: rotate(-1deg);
}

.ccg-weights__photo:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 1);
  filter: saturate(1.08);
}

/* правая часть — подписи к весам */

.ccg-weights__text {
  padding-right: 8px;
}

.ccg-weights__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-weights__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-weights__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-weights__text-main {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* список уровней веса */

.ccg-weights__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ccg-weights__item {
  padding: 6px 9px;
  border-radius: 14px;
  background: rgba(12, 13, 19, 0.96);
  border: 1px solid rgba(243, 235, 222, 0.18);
}

.ccg-weights__label {
  display: block;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(243, 235, 222, 0.96);
}

.ccg-weights__meta {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(243, 235, 222, 0.86);
}

/* ===============================
   11 СЕКЦИЯ — СТЕНА КОРОБОК
   =============================== */

.ccg-storage-section {
  padding-top: 64px;
}

.ccg-storage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px;
  align-items: center;
}

.ccg-storage__card {
  padding: 18px 20px 16px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, #262a3a 0, #151722 55%, #101019 100%);
  border: 1px solid rgba(243, 235, 222, 0.14);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.96);
}

.ccg-storage__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-storage__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-storage__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-storage__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* две фото коробок сбоку */

.ccg-storage__grid {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  justify-items: center;
}

.ccg-storage__photo {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-storage__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-storage__photo--shelves {
  transform: translateY(4px) rotate(-2deg);
}

.ccg-storage__photo--drawer {
  transform: translateY(-4px) rotate(3deg);
}

.ccg-storage__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* ===============================
   12 СЕКЦИЯ — ЗОНА ЧИСТКИ
   =============================== */

.ccg-clean-section {
  padding-top: 64px;
}

.ccg-clean__frame {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: 26px;
  background: radial-gradient(circle at top left, #262a3a 0, #151722 55%, #101019 100%);
  border: 1px solid rgba(243, 235, 222, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 1);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

/* круглые бейджи с фото слева и справа */

.ccg-clean__badge {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
}

.ccg-clean__badge img {
  display: block;
  width: 100%;
  max-width: 350px;
  height: 100%;
  object-fit: cover;
}

/* центральный текст */

.ccg-clean__text {
  text-align: left;
}

.ccg-clean__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-clean__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-clean__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-clean__text-main {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* ===============================
   АДАПТИВ ДЛЯ СЕКЦИЙ 10–12
   =============================== */

@media (max-width: 960px) {
  .ccg-weights,
  .ccg-storage {
    grid-template-columns: minmax(0, 1fr);
  }

  .ccg-weights__rail-shell,
  .ccg-storage__grid {
    max-width: 360px;
    margin-inline: auto;
  }

  .ccg-weights__text {
    padding-right: 0;
  }

  .ccg-storage__card {
    margin-bottom: 10px;
  }

  .ccg-clean__frame {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
}

@media (max-width: 640px) {
  .ccg-weights__photo--scale,
  .ccg-weights__photo--jigs,
  .ccg-weights__photo--notes,
  .ccg-storage__photo--shelves,
  .ccg-storage__photo--drawer {
    transform: none;
  }

  .ccg-weights__rail {
    inset-inline: 12px;
  }

  .ccg-clean__frame {
    padding: 20px 16px 18px;
    gap: 10px;
  }

  .ccg-clean__badge {
    width: 78px;
    height: 78px;
  }

  .ccg-clean__text {
    text-align: center;
  }
}
/* ===============================
   13 СЕКЦИЯ — НОЧНАЯ ПОЛКА
   =============================== */

.ccg-night-section {
  padding-top: 64px;
}

.ccg-night {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
}

.ccg-night__text {
  padding-right: 8px;
}

.ccg-night__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-night__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-night__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-night__text-main {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* ночная галерея */

.ccg-night__gallery {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  min-height: 260px;
}

.ccg-night__photo {
  position: absolute;
  border-radius: 20px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-night__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-night__photo--headlamp {
  width: 68%;
  left: 16%;
  top: 0;
  transform: rotate(-3deg);
}

.ccg-night__photo--glow {
  width: 54%;
  left: 0;
  bottom: 4%;
  transform: rotate(3deg);
}

.ccg-night__photo--journal {
  width: 54%;
  right: 0;
  bottom: 10%;
  transform: rotate(-2deg);
}

.ccg-night__photo:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 1);
  filter: saturate(1.08);
}

/* ===============================
   14 СЕКЦИЯ — ЗАПАСНЫЕ ДЕТАЛИ
   =============================== */

.ccg-spares-section {
  padding-top: 64px;
}

.ccg-spares {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
}

.ccg-spares__card {
  padding: 18px 20px 16px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, #262a3a 0, #151722 55%, #101019 100%);
  border: 1px solid rgba(243, 235, 222, 0.14);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.96);
}

.ccg-spares__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-spares__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-spares__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-spares__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* мозаика из фото */

.ccg-spares__mosaic {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  max-width: 360px;
  margin-inline: auto;
}

.ccg-spares__photo {
  position: relative;
  border-radius: 20px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-spares__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-spares__photo--envelopes {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.ccg-spares__photo--box {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.ccg-spares__photo--labels {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.ccg-spares__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* ===============================
   15 СЕКЦИЯ — СБОР РЮКЗАКА
   =============================== */

.ccg-pack-section {
  padding-top: 64px;
  padding-bottom: 72px;
}

.ccg-pack {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
}

/* левая часть — широкая и круглая фото */

.ccg-pack__layout {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

.ccg-pack__photo {
  position: relative;
  overflow: hidden;
  background: #171b23;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-pack__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-pack__photo--wide {
  border-radius: 20px;
}

.ccg-pack__photo--circle {
  position: absolute;
  right: 6%;
  bottom: -10%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.ccg-pack__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* правая часть — текст */

.ccg-pack__text {
  padding-right: 8px;
}

.ccg-pack__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-pack__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-pack__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-pack__text-main {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* ===============================
   АДАПТИВ ДЛЯ СЕКЦИЙ 13–15
   =============================== */

@media (max-width: 960px) {
  .ccg-night,
  .ccg-spares,
  .ccg-pack {
    grid-template-columns: minmax(0, 1fr);
  }

  .ccg-night__gallery,
  .ccg-spares__mosaic,
  .ccg-pack__layout {
    max-width: 360px;
    margin-inline: auto;
  }

  .ccg-pack__text {
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  .ccg-night__text {
    padding-right: 0;
  }

  .ccg-night__photo--headlamp,
  .ccg-night__photo--glow,
  .ccg-night__photo--journal {
    transform: none;
  }

  .ccg-spares__mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .ccg-spares__photo--envelopes,
  .ccg-spares__photo--box,
  .ccg-spares__photo--labels {
    grid-column: auto;
    grid-row: auto;
  }

  .ccg-pack__photo--circle {
    position: static;
    width: 120px;
    height: 120px;
    margin: 8px auto 0;
  }

  .ccg-pack__layout {
    text-align: center;
  }
}
/* ===============================
   16 СЕКЦИЯ — ПРАВКИ В ЛАБОРАТОРИИ
   =============================== */

.ccg-fixes-section {
  padding-top: 64px;
}

.ccg-fixes {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 0.85fr);
  gap: 20px;
  align-items: center;
}

.ccg-fixes__photo {
  position: relative;
  width: 100%;
  max-width: 220px;
  margin-inline: auto;
  border-radius: 20px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-fixes__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-fixes__photo--left {
  transform: translateY(4px) rotate(-2deg);
}

.ccg-fixes__photo--right {
  transform: translateY(-4px) rotate(3deg);
}

.ccg-fixes__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

.ccg-fixes__text {
  text-align: left;
}

.ccg-fixes__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-fixes__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-fixes__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-fixes__text-main,
.ccg-fixes__note {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* ===============================
   17 СЕКЦИЯ — ПАРА СЕССИЙ ДО И ПОСЛЕ
   =============================== */

.ccg-sessions-section {
  padding-top: 64px;
}

.ccg-sessions {
  display: flex;
  justify-content: center;
}

.ccg-sessions__card {
  width: 100%;
  max-width: 720px;
  padding: 18px 20px 18px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, #262a3a 0, #151722 55%, #101019 100%);
  border: 1px solid rgba(243, 235, 222, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 1);
}

.ccg-sessions__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-sessions__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-sessions__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-sessions__text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* две фото внутри карточки */

.ccg-sessions__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.ccg-sessions__photo {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 260px;
  border-radius: 18px;
  overflow: hidden;
  background: #171b23;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-sessions__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-sessions__photo--before {
  transform: translateY(4px) rotate(-2deg);
}

.ccg-sessions__photo--after {
  transform: translateY(-4px) rotate(3deg);
}

.ccg-sessions__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* ===============================
   18 СЕКЦИЯ — ЗАКРЫТИЕ ЛАБОРАТОРИИ
   =============================== */

.ccg-laboutro-section {
  padding-top: 64px;
  padding-bottom: 88px;
}

.ccg-laboutro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px;
  align-items: center;
}

.ccg-laboutro__text {
  padding-right: 8px;
}

.ccg-laboutro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 235, 222, 0.06);
  color: rgba(243, 235, 222, 0.86);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ccg-laboutro__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ccj-accent-main, #f3833f);
}

.ccg-laboutro__title {
  margin: 0 0 8px;
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ccg-laboutro__text-main {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 235, 222, 0.86);
}

/* фото финального состояния лаборатории */

.ccg-laboutro__photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.ccg-laboutro__photo {
  position: relative;
  width: 100%;
  max-width: 260px;
  border-radius: 20px;
  background: #171b23;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 1);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    filter 0.22s ease-out;
}

.ccg-laboutro__photo img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
}

.ccg-laboutro__photo--shelf {
  transform: translateX(-6px);
}

.ccg-laboutro__photo--desk {
  transform: translateX(6px);
}

.ccg-laboutro__photo:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 1);
  filter: saturate(1.06);
}

/* ===============================
   АДАПТИВ ДЛЯ СЕКЦИЙ 16–18
   =============================== */

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

  .ccg-fixes__text {
    text-align: center;
  }

  .ccg-sessions__photos {
    justify-content: center;
  }

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

  .ccg-fixes__photo,
  .ccg-laboutro__photos,
  .ccg-sessions__card {
    max-width: 360px;
    margin-inline: auto;
  }

  .ccg-laboutro__text {
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  .ccg-fixes__photo--left,
  .ccg-fixes__photo--right,
  .ccg-sessions__photo--before,
  .ccg-sessions__photo--after,
  .ccg-laboutro__photo--shelf,
  .ccg-laboutro__photo--desk {
    transform: none;
  }

  .ccg-sessions__card {
    padding: 18px 16px 16px;
  }

  .ccg-fixes__text {
    text-align: center;
  }

  .ccg-laboutro__photos {
    flex-direction: row;
    justify-content: center;
  }

  .ccg-laboutro__photo {
    max-width: 180px;
  }
}