/* ==========================================================================
   Стили блоков лендинга (18 блоков)
   Концепция: «Маршрут подключения»
   ========================================================================== */


/* ============================ 1. HERO ============================ */

.section--hero {
  padding-block: var(--space-12) var(--space-16);
  background:
    radial-gradient(ellipse 80% 60% at top right, var(--color-turquoise-50), transparent 70%),
    var(--color-bg);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero__title {
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: var(--space-3) 0 0;
}

.hero__title-num {
  display: block;
  font-size: clamp(2.75rem, 8vw, 4.5rem); /* ~44 → 72px: «15 кВт» — главный акцент */
  line-height: 1.1;
}

.hero__title-accent {
  color: var(--color-accent);
  display: block;
  /* «законно и без бюрократии» — всегда одной строкой,
     чтобы заголовок читался в 2 строки: «15 кВт» + «законно и без бюрократии» */
  white-space: nowrap;
  font-size: clamp(1.4rem, 4.5vw, 2.5rem);
}

.hero__subtitle {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: 560px;
  margin: var(--space-2) 0 0;
}

.hero__subtitle strong {
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
}

.hero__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.hero__benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: var(--lh-base);
}

.hero__benefits .icon {
  color: var(--color-accent);
  margin-top: 2px;
  flex-shrink: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hero__meta-item strong {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}

.hero__meta-item span {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.hero__meta-divider {
  width: 1px;
  height: 36px;
  background-color: var(--color-border);
}

.hero__form-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.hero__form-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-accent), var(--color-turquoise-500));
  z-index: -1;
  opacity: 0.15;
}

.hero__form-header {
  margin-bottom: var(--space-5);
}

.hero__form-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-2);
  line-height: var(--lh-snug);
}

.hero__form-subtitle {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
}


/* ============================ 2. TRUST-STRIP ============================ */

.trust-strip {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-8);
}

.trust-strip__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.trust-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
}

.trust-strip__num {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

.trust-strip__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}


/* ============================ 3. EXPLAINER ============================ */

.explainer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.explainer-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.explainer-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* «Пружинящая» иконка: поворачивается и слегка увеличивается при наведении на карточку */
.explainer-card:hover .explainer-card__icon {
  transform: rotate(-10deg) scale(1.08);
}

.explainer-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  transform-origin: center;
  will-change: transform;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.explainer-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: var(--lh-snug);
}

.explainer-card__text {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--lh-relaxed);
}


/* ============================ 4. PROBLEMS ============================ */

.problems__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 880px;
  margin-inline: auto;
}

.problem-item {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.problem-item:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.problem-item:hover .problem-item__num {
  transform: rotate(-10deg) scale(1.1);
}

.problem-item__num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  transform-origin: center;
  will-change: transform;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.problem-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.problem-item__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: var(--lh-snug);
}

.problem-item__text {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--lh-relaxed);
}


/* ============================ 5. SOLUTION ============================ */

.solution__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.solution-card {
  /* Адаптивный фон: в light — белая карточка на светлом фоне секции,
     в dark — тёмно-синяя карточка (как --tg-bg-bubble) на тёмном фоне секции.
     Раньше был привязан к --color-graphite-700/500 (бренд-нейтральные),
     из-за чего в light теме карточки выглядели темнее основного фона страницы. */
  background-color: var(--tg-bg-inverse-card);
  border: 1px solid var(--tg-border-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.solution-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* «Пружинящая» иконка при наведении на карточку */
.solution-card:hover .solution-card__icon {
  transform: rotate(-10deg) scale(1.08);
}

.solution-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: rgba(var(--tg-accent-rgb), 0.18);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  transform-origin: center;
  will-change: transform;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.solution-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0;
  color: var(--color-white);
  line-height: var(--lh-snug);
}

.solution-card__text {
  font-size: var(--fs-base);
  /* Адаптивный приглушённый текст: корректный контраст в обеих темах.
     Раньше --color-graphite-300 в light = #D1D5DB (светло-серый, не читается на белой карточке). */
  color: var(--tg-text-inverse-muted);
  margin: 0;
  line-height: var(--lh-relaxed);
}




.solution__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-6);
  /* Адаптивный фон и граница (как у .solution-card) — раньше были rgba(255,255,255,...)
     рассчитанные на тёмный фон и невидимые в светлой теме. */
  background-color: var(--tg-bg-inverse-card);
  border: 1px solid var(--tg-border-inverse);
  border-radius: var(--radius-lg);
}

.solution__cta p {
  margin: 0;
  /* Адаптивный цвет (как у .solution-card__text) — был захардкожен var(--color-white). */
  color: var(--tg-text-inverse);
  font-size: var(--fs-lg);
}


/* ============================ 6. SERVICES ============================ */

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.service-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.service-card__num {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  opacity: 0.25;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.service-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0;
  padding-right: var(--space-12);
  line-height: var(--lh-snug);
}

.service-card__text {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--lh-relaxed);
}

.service-card__result {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.service-card__result strong { color: var(--color-accent-text); }


/* ============================ 7. STAGES ============================ */

.stages__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 880px;
  margin-inline: auto;
  margin: 0 auto;
  position: relative;
}

.stage-item {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1;
  transition: border-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.stage-item:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Номер этапа мягко «оживает» при наведении на карточку */
.stage-item:hover .stage-item__num {
  transform: rotate(6deg) scale(1.06);
}

.stage-item__num {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  /* Кольцо вокруг бейджа совпадает с поверхностью карточки в обеих темах
     (создаёт эффект «прорези»). Визуально невидимо, но даёт бейджу
     воздушный зазор от края карточки. */
  box-shadow: 0 0 0 4px var(--color-surface, var(--color-white));
  transform-origin: center;
  will-change: transform;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stage-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stage-item__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: var(--lh-snug);
}

.stage-item__text {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--lh-relaxed);
}

.stage-item__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-accent-text);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-full);
}


/* Наглядная схема монтажа под этапами (рисунок-пример от автора) */
.stages__scheme {
  max-width: 880px;
  margin: var(--space-8) auto 0;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.stages__scheme img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.stages__scheme figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}


/* ============================ 8. PACKAGES ============================ */

.packages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 980px;
  margin: 0 auto;
}

.package-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

.package-card--featured {
  border-color: var(--color-accent);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}

.package-card__chip {
  position: absolute;
  top: -14px;
  left: var(--space-6);
  z-index: 1; /* чип поверх рамки карточки — рамка не проходит сквозь него */
  /* Сплошной непрозрачный фон акцентного цвета (а не полупрозрачная подложка):
     в тёмной теме --color-accent-soft полупрозрачный, и рамка карточки
     просвечивала сквозь чип, перечеркивая надпись «Рекомендую». */
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

/* Secondary-кнопка в карточке тарифа всегда должна считываться как кнопка:
   постоянная акцентная обводка (а не только при наведении). */
.package-card .btn--secondary {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.package-card__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: var(--lh-snug);
}

.package-card__price {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.package-card__price span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  letter-spacing: 0;
  line-height: var(--lh-base);
}

.package-card__lead {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--lh-relaxed);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.package-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.package-card__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: var(--lh-base);
}

.package-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}


/* ============================ 9. PRICE ============================ */

.price__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.price__main,
.price__side {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.price__headline {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.price__amount {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.price__caption {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin: 0;
}

.price__footnote {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
  padding: var(--space-4);
  background-color: var(--color-graphite-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
}

.price__sub {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
  color: var(--color-text);
}

.price__includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.price__includes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: var(--lh-base);
}

.price__includes .icon {
  color: var(--color-accent);
  margin-top: 2px;
  flex-shrink: 0;
}

.price__side .table {
  font-size: var(--fs-sm);
}

.price__side .table td:last-child {
  text-align: right;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.price__side .table tr:last-child td {
  border-bottom: 1px solid var(--color-border);
}


/* ============================ 11. CASES ============================ */

.cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.case-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.case-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.case-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: var(--lh-snug);
}

.case-card__problem,
.case-card__solution,
.case-card__result {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.case-card__problem strong,
.case-card__solution strong { color: var(--color-text); }

.case-card__result {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-weight: var(--fw-medium);
  color: var(--color-accent-text);
}

.cases__cta {
  text-align: center;
  margin-top: var(--space-8);
}

.cases__cta a { color: var(--color-accent); text-decoration: underline; }

/* ============================ 10.5 CALCULATOR ============================ */

.calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.calc__form,
.calc__results {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.calc__form-title,
.calc__results-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: var(--lh-snug);
}

.calc__legend {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ===== Регионы ===== */
.calc__region-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.calc__region-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.calc__region-option:hover { border-color: var(--color-accent); }

.calc__region-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-surface);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--transition-base);
}

.calc__region-option input[type="radio"]::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-color: var(--color-accent);
  transform: scale(0);
  transition: transform var(--transition-base);
}

.calc__region-option input[type="radio"]:checked { border-color: var(--color-accent); }
.calc__region-option input[type="radio"]:checked::after { transform: scale(1); }

.calc__region-option:has(input[type="radio"]:checked) {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

.calc__region-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.calc__region-note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--color-text);
  line-height: var(--lh-relaxed);
}

.calc__region-note a {
  color: var(--color-accent-text);
  font-weight: var(--fw-medium);
  text-decoration: underline;
}

.calc__region-note a:hover {
  color: var(--color-accent-hover);
}

/* ===== Поля ввода ===== */
.calc__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.calc__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-2) 0 0;
}

/* ===== Особая льготная категория (радио) ===== */
.calc__category-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.calc__category-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.calc__category-option:hover { border-color: var(--color-accent); }

.calc__category-option input[type="radio"] {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  flex-shrink: 0;
  cursor: pointer;
}

.calc__category-option:has(input[type="radio"]:checked) {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-weight: var(--fw-medium);
}

/* ===== Чекбокс услуг ===== */
.calc__services {
  padding: var(--space-4);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.calc__services strong { color: var(--color-text); }

/* ===== Карточки результатов ===== */
.calc__results { position: sticky; top: 88px; }

.calc__result-card {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--transition-base);
}

.calc__result-card:hover { border-color: var(--color-accent); }

.calc__result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.calc__result-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.calc__result-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

.calc__result-tag--accent {
  background-color: var(--color-white);
  color: var(--color-accent-text);
  border-color: transparent;
}

.calc__result-value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--space-1) 0 0;
  font-variant-numeric: tabular-nums;
}

.calc__result-formula {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-1) 0 0;
}

.calc__result-card--accent {
  background: linear-gradient(135deg, var(--color-accent), var(--color-turquoise-600));
  border-color: transparent;
  color: var(--color-white);
}

.calc__result-card--accent .calc__result-label { color: var(--color-white); }
.calc__result-card--accent .calc__result-value { color: var(--color-white); }
.calc__result-card--accent .calc__result-formula { color: rgba(255, 255, 255, 0.85); }

/* Карточка для особых льготных категорий — выделена фоном/рамкой */
.calc__result-card--special {
  background-color: var(--color-success-bg);
  border: 1px dashed var(--color-success-border, var(--color-accent));
  position: relative;
}

.calc__result-card--special .calc__result-label { color: var(--color-success-text, #065F46); }
.calc__result-card--special .calc__result-tag {
  background-color: var(--color-white);
  color: var(--color-accent-text);
  border-color: transparent;
}
.calc__result-card--special .calc__result-value { color: var(--color-success-text, #065F46); }

/* ===== Итого к оплате: три варианта сумм ===== */
.calc__total-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.calc__total-row + .calc__total-row {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.calc__total-row-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.calc__total-row-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: var(--space-1) 0 0;
  font-variant-numeric: tabular-nums;
}

.calc__total-row-formula {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
  line-height: var(--lh-relaxed);
  margin: var(--space-1) 0 0;
}

/* Notice + CTA */
.calc__notice { margin: 0; }
.calc__cta { margin-top: var(--space-2); }

/* ===== Пояснение к ставкам ===== */
.calc__note {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.calc__note-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-2);
  line-height: var(--lh-snug);
}

.calc__note-intro {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-5);
  max-width: var(--prose-max);
}

.calc__note-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.calc__note-card {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calc__note-card--special {
  background-color: var(--color-success-bg);
  border: 1px dashed var(--color-success-border, var(--color-accent));
}

.calc__note-card--commercial {
  background-color: var(--color-warning-bg, var(--color-surface-alt));
  border-color: var(--color-border-strong, var(--color-border));
}

.calc__note-badge {
  align-self: flex-start;
  padding: 2px var(--space-2);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--color-surface);
  color: var(--color-accent-text);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

.calc__note-card--special .calc__note-badge {
  background-color: var(--color-white);
  color: var(--color-success-text, #065F46);
  border-color: transparent;
}

.calc__note-card--commercial .calc__note-badge {
  color: var(--color-warning-text, #92400E);
}

.calc__note-card-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: var(--lh-snug);
}

.calc__note-card-text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.calc__note-outro {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin: var(--space-5) 0 0;
}

.calc__note-outro strong { color: var(--color-text); }

.calc__note-cta {
  margin-top: var(--space-4);
  max-width: 420px;
}


/* ============================ 12. RESULT ============================ */

.result__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.result-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.result-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.result-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.result-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: var(--lh-snug);
}

.result-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--lh-relaxed);
}

/* ============================ 13. DOCUMENTS ============================ */

.documents__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.documents-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-base);
}

.documents-card:hover { border-color: var(--color-border-strong); }

.documents-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: var(--lh-snug);
}

.documents-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.documents-card__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

.documents-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
}

.documents-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--lh-relaxed);
}

.documents-card--cta {
  /* Фон как у остальных карточек блока — var(--color-surface), чтобы карточка
     не «выпадала» из визуального ряда (раньше здесь был бирюзовый градиент
     с var(--color-white), который в тёмной теме выглядел странно).
     Акцент сохранён через рамку и цвет заголовка. */
  background-color: var(--color-surface);
  border-color: var(--color-accent);
}

.documents-card--cta .documents-card__title { color: var(--color-accent-text); }


/* ============================ 14. FAQ ============================ */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 880px;
  margin-inline: auto;
}

.faq-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item[open] {
  border-color: var(--color-accent);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--transition-fast);
}

.faq-item__question::-webkit-details-marker { display: none; }

.faq-item__question:hover { background-color: var(--color-graphite-50); }

.faq-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform var(--transition-base);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: var(--color-accent);
  border-radius: 1px;
  transition: transform var(--transition-base);
}

.faq-item__icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq-item__icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item__answer {
  padding: 0 var(--space-5) var(--space-5);
}

.faq-item__answer-inner p {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}


/* ============================ 15. REVIEWS ============================ */

.reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.review-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.review-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Аватар «оживает» при наведении на карточку */
.review-card:hover .review-card__avatar {
  transform: scale(1.06);
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-accent), var(--color-turquoise-600));
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  transform-origin: center;
  will-change: transform;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.review-card__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.review-card__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.review-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
}

.reviews__cta {
  text-align: center;
  margin-top: var(--space-8);
}


/* ============================ 16. ABOUT ============================ */

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

.about__photo-wrap {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.about__photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--color-accent-soft), var(--color-turquoise-100));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-text);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.about__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 2;
  display: block;
}

.about__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--tg-accent-rgb), 0.2), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(var(--tg-accent-rgb), 0.15), transparent 50%);
  z-index: 1;
  pointer-events: none;
}

.about__photo--has-image::before {
  display: none;
}

.about__photo span {
  position: relative;
  z-index: 1;
}

.about__photo-caption {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
  margin: 0;
  padding: var(--space-3);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about__body p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.about__sub {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: var(--space-3) 0 0;
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.about__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.about__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

.about__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
}

.about__list a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================ 17. CONTACTS ============================ */

.contacts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

.contacts__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contacts__title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  /* Адаптивный цвет: в light — тёмный (#0F1419), в dark — белый.
     Раньше был захардкожен var(--color-white) — в светлой теме становился невидимым. */
  color: var(--tg-text-inverse);
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.contacts__lead {
  font-size: var(--fs-lg);
  /* Адаптивный приглушённый цвет (в light #707579, в dark #708499).
     Раньше --color-graphite-300 в light = #D1D5DB (светло-серый, плохо читается). */
  color: var(--tg-text-inverse-muted);
  margin: 0;
  line-height: var(--lh-relaxed);
}

.contacts__channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.contacts__channels li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-base);
  /* Адаптивный цвет (как у .contacts__title) — был захардкожен var(--color-white). */
  color: var(--tg-text-inverse);
}

.contacts__channels .icon {
  /* Telegram-blue акцент (единый стиль с остальным сайтом).
     Раньше был var(--color-turquoise-500) — не вписывался в Telegram-палитру. */
  color: var(--color-accent);
  flex-shrink: 0;
}

.contacts__channels a {
  /* Адаптивный цвет (как у .contacts__title) — был захардкожен var(--color-white). */
  color: var(--tg-text-inverse);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contacts__channels a:hover {
  /* Telegram-blue акцент (как у .icon выше) — был var(--color-turquoise-500). */
  color: var(--color-accent);
}

.contacts__hours {
  font-size: var(--fs-sm);
  /* Адаптивный приглушённый цвет + граница.
     Раньше --color-graphite-300 в light = #D1D5DB и rgba(255,255,255,0.1) —
     обе были не видны в светлой теме. */
  color: var(--tg-text-inverse-muted);
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--tg-border-inverse);
  line-height: var(--lh-relaxed);
}

.contacts__form-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--shadow-xl);
}

.contacts__form-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: var(--lh-snug);
}

.contacts__form-subtitle {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
  margin-top: calc(var(--space-2) * -1);
}


/* ============================ 18. SITE-FOOTER ============================ */

.site-footer {
  /* Адаптивный фон: в light — светлый (#F4F4F5, как --tg-bg-inverse), в dark — самый тёмный (#111827).
     Отдельный --tg-footer-bg, но в светлой теме он повторяет инверсную секцию (светлый фон + тёмный текст). */
  background-color: var(--tg-footer-bg);
  color: var(--tg-text-inverse-muted);
  padding-block: var(--space-16) var(--space-8);
  font-size: var(--fs-sm);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-10);
  /* Тонкий разделитель через rgb-каналы --tg-text-inverse — корректный контраст в обеих темах.
     Раньше был rgba(255,255,255,0.08) — не виден в светлой теме. */
  border-bottom: 1px solid rgba(var(--tg-text-inverse-rgb), 0.08);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__col--brand .header__logo {
  /* Адаптивный цвет (как у .site-footer__title) — был захардкожен var(--color-white). */
  color: var(--tg-text-inverse);
}

.site-footer__about {
  font-size: var(--fs-sm);
  /* Адаптивный приглушённый цвет — был var(--color-graphite-300) (бренд-нейтральный). */
  color: var(--tg-text-inverse-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
  max-width: 320px;
}

.site-footer__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  /* Адаптивный цвет (как у .contacts__title) — был захардкожен var(--color-white). */
  color: var(--tg-text-inverse);
  margin: 0 0 var(--space-2);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__list a {
  /* Адаптивный приглушённый цвет — был var(--color-graphite-300) (бренд-нейтральный). */
  color: var(--tg-text-inverse-muted);
  font-size: var(--fs-sm);
  transition: color var(--transition-fast);
}

.site-footer__list a:hover {
  /* Telegram-blue акцент (единый стиль) — был var(--color-turquoise-500). */
  color: var(--color-accent);
}

.site-footer__contacts a {
  font-weight: var(--fw-medium);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-8);
}

.site-footer__requisites {
  font-size: var(--fs-xs);
  /* Адаптивный приглушённый цвет — был var(--color-graphite-500) (бренд-нейтральный). */
  color: var(--tg-text-inverse-muted);
  line-height: var(--lh-relaxed);
}

.site-footer__requisites strong {
  /* Адаптивный основной цвет (выделяется на фоне приглушённого текста).
     Раньше был var(--color-graphite-300) — в light был светло-серый (#D1D5DB),
     плохо читался на тёмном футере. */
  color: var(--tg-text-inverse);
  font-weight: var(--fw-semibold);
}

.site-footer__requisites a {
  /* Telegram-blue акцент (как у остальных ссылок) — был var(--color-turquoise-500). */
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-xs);
}

.site-footer__legal a {
  /* Адаптивный приглушённый цвет — был var(--color-graphite-300) (бренд-нейтральный). */
  color: var(--tg-text-inverse-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__legal a:hover { color: var(--color-accent); /* Telegram-blue акцент — был var(--color-turquoise-500). */ }

.site-footer__copy {
  font-size: var(--fs-xs);
  /* Адаптивный приглушённый цвет + тонкий разделитель.
     Раньше --color-graphite-500 (бренд-нейтральный) и rgba(255,255,255,0.05) —
     не адаптировались к теме. */
  color: var(--tg-text-inverse-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(var(--tg-text-inverse-rgb), 0.05);
}



/* ============================ 6.5. OBJECT SWITCHER ============================ */

.object-switch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.object-switch__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
  text-align: center;
  min-height: 88px;
}

.object-switch__btn:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.object-switch__btn:active { transform: translateY(1px); }

.object-switch__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.object-switch__btn.is-active {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.object-switch__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.object-switch__icon svg { width: 100%; height: 100%; }

.object-switch__panels {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-fast);
}

.object-switch__panel {
  display: none;
  animation: object-panel-in 220ms ease-out;
}
.object-switch__panel.is-active { display: block; }
.object-switch__panel[hidden] { display: none; }

@keyframes object-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .object-switch__panel { animation: none; }
}

.object-switch__panel-title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.object-switch__panel-text {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.object-switch__panel-list {
  margin: var(--space-3) 0 0;
  padding: 0 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}
.object-switch__panel-list li {
  position: relative;
  list-style: none;
}
.object-switch__panel-list li::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}
.object-switch__panel-list strong {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}


/* Карточки этапа: лёгкое появление, выделение текущего. */
.stage-item {
  transition: border-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.stage-item.is-current {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-md);
  transform: translateY(-1px);
}

.stage-item.is-passed .stage-item__num {
  background-color: var(--color-success);
  box-shadow: 0 0 0 4px var(--color-surface, var(--color-white));
}

.stage-item.is-future {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .stage-item { transition: none; }
}


/* ============================ 6.1. SERVICE CARD — EXPANDABLE ============================ */

.service-card__details {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 320ms ease-in-out,
              opacity 220ms ease-in-out,
              margin-top 220ms ease-in-out;
}

.service-card__details[hidden] { display: none; }

.service-card.is-expanded .service-card__details {
  max-height: 600px;
  opacity: 1;
  margin-top: var(--space-3);
}

.service-card__details-list {
  margin: 0;
  padding: var(--space-3) 0 0 var(--space-4);
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.service-card__details-list li {
  position: relative;
  list-style: none;
}
.service-card__details-list li::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.service-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0;
  background: transparent;
  border: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-text);
  cursor: pointer;
  align-self: flex-start;
  transition: color var(--transition-fast);
}

.service-card__toggle:hover { color: var(--color-accent); }
.service-card__toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.service-card__toggle-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.service-card.is-expanded .service-card__toggle-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .service-card__details,
  .service-card__toggle-icon { transition: none; }
}


/* ============================ 12.1. QUIZ — VISUAL POLISH ============================ */

.quiz-option {
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.quiz-option.is-selected {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.quiz-option.is-selected .quiz-option__check { opacity: 1; }
.quiz-option.is-selected .quiz-option__shape {
  border-color: var(--color-white);
  background-color: var(--color-white);
}
.quiz-option.is-selected .quiz-option__shape::after {
  background-color: var(--color-accent);
  transform: scale(1);
}

.quiz-option.is-selected:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-white);
  border-color: var(--color-accent-hover);
}

.quiz__step {
  transition: opacity 220ms ease, transform 220ms ease;
}

.quiz__hint {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  border-left: 3px solid var(--color-accent);
}

.quiz-result__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.quiz-result__row {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}
.quiz-result__row strong {
  flex: 0 0 auto;
  min-width: 140px;
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .quiz__step { transition: none; }
  .quiz-option { transition: none; }
}

/* Дополнительно: при запросе «меньше анимаций» отключаем все новые повороты/масштабы иконок */
@media (prefers-reduced-motion: reduce) {
  .explainer-card__icon,
  .solution-card__icon,
  .problem-item__num,
  .stage-item__num,
  .review-card__avatar { transition: none; }
}