/* ============================================================
   v3 SHARED — modern SaaS / wellness palette + tokens
   Warm peach-cream + brand gradient orange→pink→purple
   ============================================================ */

:root {
  --paper:      #fdf2e8;
  --paper-warm: #fae6d3;
  --paper-cool: #f5ecf1;
  --ink:        #1c2236;
  --ink-soft:   #4a4f63;
  --ink-mute:   #8e92a3;

  --g1: #ff7a45;
  --g2: #e94aa1;
  --g3: #9b5fdf;
  --grad: linear-gradient(135deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
  --grad-soft: linear-gradient(135deg, rgba(255,122,69,0.10), rgba(233,74,161,0.10), rgba(155,95,223,0.10));

  --card:        #ffffff;
  --card-tint:   rgba(255,255,255,0.72);
  --card-shadow: 0 15px 34px -19px rgba(28,34,54,0.22), 0 3px 9px -3px rgba(28,34,54,0.06);
  --hairline:    rgba(28,34,54,0.08);
  --hairline-2:  rgba(28,34,54,0.04);

  --radius-sm: 12px;
  --radius:    17px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* HTML-атрибут [hidden] должен прятать элемент несмотря на любой
   display: flex/grid/inline-flex в локальных стилях. Без этого правила
   class-селекторы с display перебивают спецификацию hidden. */
[hidden] { display: none !important; }
html {
  min-height: 100%;
  scroll-behavior: smooth;
  /* Декоративные absolute-элементы (hero-фото, бейджи) могут немного
     выходить за .section max-width — клипим горизонтально, чтобы
     не появлялся ненужный horizontal scrollbar. */
  overflow-x: clip;
}

body {
  overflow-x: clip;
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--ink);
  /* Базовый peach-paper — резерв на случай если::before не рендерится */
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

/* Background blob-картинки (PNG) расставляются как декоративные элементы
   по углам через .bg-stage > .bg-blob img. Подключаются после генерации
   ассетов нейронкой. Контейнер fixed по viewport, не скроллится. */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg-stage img {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* -------- Универсальные паттерны -------- */

/* Chip-tag: pill с gradient-border и gradient-fill текстом.
   Текст рисуется через background-clip: text (поэтому color прозрачный,
   а фактическое заполнение даёт background). Иконки внутри получают
   solid-цвет через CSS-переменную --chip-icon-color — её можно менять
   модификаторами .chip--purple/--pink, не трогая текст. */
.chip {
  --chip-icon-color: var(--g1);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  /* gradient-fill для текста */
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.chip::before {
  content: '';
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--grad);
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
          mask-composite: exclude;
  pointer-events: none;
}
.chip > svg,
.chip > img {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--chip-icon-color);  /* для иконок с currentColor stroke */
}

/* Цветовые акценты — меняют только цвет иконки (текст всегда gradient) */
.chip--purple { --chip-icon-color: var(--g3); }
.chip--pink   { --chip-icon-color: var(--g2); }

/* Сезонный chip — лавандовая подложка + иконка вместо точки.
   Используется в hero для маркера активного сезона клуба.
   Здесь текст — solid лавандовый, не gradient — поэтому сбрасываем
   background-clip: text, который наследуется от .chip. */
.chip--season {
  background: rgba(155, 95, 223, 0.10);
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: var(--g3);
  border-color: transparent;
  color: var(--g3);
  font-weight: 600;
  font-size: 12px;
  padding: 9px 15px 9px 12px;
  gap: 9px;
  box-shadow: none;
}
.chip--season::before { display: none; }    /* убираем точку-bullet */
.chip--season .chip__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--g3);
}

/* CTA — primary gradient pill */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 27px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn--primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 12px 31px -14px rgba(233,74,161,0.55);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 17px 37px -14px rgba(233,74,161,0.65); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  padding-left: 7px;
}
.btn__arrow {
  width: 15px; height: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  font-size: 12px;
  line-height: 1;
}

/* Card */
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  box-shadow: var(--card-shadow);
}

/* Большой headline с gradient-italic accent */
.h-display {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 5.6vw, 71px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.h-display em {
  font-family: 'Playfair Display', 'Inter', serif;
  font-style: italic;
  font-weight: 600;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lead {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 459px;
}

/* Утилитный eyebrow для секций */
.eyebrow-2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow-2::before {
  content: ''; width: 20px; height: 1px; background: var(--ink-soft); opacity: .4;
}

/* Section base — узкая центральная полоса для собранного layout */
.section {
  padding: clamp(61px, 9vh, 111px) clamp(20px, 4vw, 48px);
  max-width: 1054px;
  margin: 0 auto;
  position: relative;
}

/* Per-section blob-фоны выключены: секции по умолчанию прозрачные на body.
   Исключение — «зебра» (см. ниже): about, values, prog2, experts, testify,
   pricing имеют тёплую paper-tinted подложку через свой ::before.
   Все остальные псевдо-блобы (radial-gradient и т.п.) — заглушены. */
.hero::before, .hero::after,
.about::after,
.founder::before, .founder::after,
.journey::before, .journey::after,
.values::after,
.seasons::before, .seasons::after,
.program::before, .program::after,
.prog2::after,
.personal::before, .personal::after,
.experts::after,
.audience::before, .audience::after,
.testify::after,
.community::before, .community::after,
.pricing::after,
.payment::before, .payment::after {
  display: none !important;
}

/* Zebra-эффект: каждая вторая секция имеет тёплую подложку во всю
   ширину viewport. .about::before определена в content.css.
   Порядок секций (12 шт.): hero · about(T) · founder · values(T) · seasons ·
   prog2(T) · personal · experts(T) · audience · testify(T) · community · pricing(T) · payment. */
.values::before,
.prog2::before,
.experts::before,
.testify::before,
.pricing::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  background: #fbe9d6;
  pointer-events: none;
}

/* ============================================================
   CAROUSEL CONTROLS — единый визуал стрелок и dot-пагинации.
   Применяется в seasons, testify (и любых будущих слайдерах).
   Размещение остаётся локальным (по бокам/снизу — диктует контекст),
   но визуал кнопок/точек, размеры и hover-поведение — одинаковые.
   ============================================================ */
.slider-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--grad);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 12px 26px -10px rgba(233, 74, 161, 0.55);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.slider-arrow:hover  { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(233,74,161,.65); }
.slider-arrow:active { transform: scale(.95); }
.slider-arrow:disabled,
.slider-arrow[aria-disabled="true"] { opacity: 0.32; cursor: default; }
.slider-arrow:disabled:hover,
.slider-arrow[aria-disabled="true"]:hover { transform: none; box-shadow: 0 8px 18px -10px rgba(233,74,161,.4); }
.slider-arrow svg { width: 20px; height: 20px; }

.slider-dots {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(28, 34, 54, 0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: width .25s ease, background .25s ease;
}
.slider-dot:hover { background: rgba(28, 34, 54, 0.40); }
.slider-dot.is-on,
.slider-dot.is-active {
  width: 24px;
  background: var(--grad);
}

@media (max-width: 880px) {
  .slider-arrow { width: 44px; height: 44px; }
  .slider-arrow svg { width: 18px; height: 18px; }
}