/* Секция «Услуги»: плитки-иконки и выравнивание карточек по высоте */

.svc-card {
  height: 100%;
}

/* фон секции услуг в тёмной теме — background-6, поэтому карточки уводим на 7,
   иначе они сливаются с фоном */
.dark .svc-card {
  background-color: var(--color-background-7);
}

.svc-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-inline: auto;
  border-radius: 18px;
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.dark .svc-icon {
  background: rgba(133, 78, 254, 0.18);
  color: var(--color-primary-300);
}

.svc-icon svg {
  display: block;
  width: 30px;
  height: 30px;
}

/* ---- страница отдельной услуги: обычная информационная страница ---- */

.svc-page h1 {
  margin-top: 14px;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
}

.svc-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.875rem;
  color: rgba(26, 26, 28, 0.55);
}

.dark .svc-crumbs {
  color: rgba(252, 252, 252, 0.55);
}

.svc-crumbs a {
  color: inherit;
  text-decoration: none;
}

.svc-crumbs a:hover {
  color: var(--color-primary-500);
}

.svc-intro {
  margin-top: 18px;
  max-width: 700px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(26, 26, 28, 0.7);
}

.dark .svc-intro {
  color: rgba(252, 252, 252, 0.7);
}

.services-details-content h1,
.services-details-content h2 {
  margin-top: 26px;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--color-secondary);
}

/* заголовок страницы — первый элемент, лишний отступ сверху не нужен */
.services-details-content h1 {
  margin-top: 0;
}

.dark .services-details-content h1,
.dark .services-details-content h2 {
  color: var(--color-accent);
}

.services-details-content p,
.services-details-content li {
  color: rgba(26, 26, 28, 0.75);
}

.dark .services-details-content p,
.dark .services-details-content li {
  color: rgba(252, 252, 252, 0.75);
}

.services-details-content figure {
  margin-top: 8px;
}

/* карточка-мокап в статье: широкая, поэтому кегль мельче, чем в hero */
.svc-mock {
  max-width: 767px;
}

.svc-mock .mk {
  font-size: 2.4cqw;
}

.svc-mock .mk__chips {
  justify-content: flex-start;
  gap: 0.5em;
}

.services-details-content p {
  padding-bottom: 8px;
}

.svc-steps {
  display: grid;
  gap: 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: svc-step;
}

.svc-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  counter-increment: svc-step;
}

.svc-steps li::before {
  content: counter(svc-step);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  font-size: 0.8125rem;
  font-weight: 700;
}

.dark .svc-steps li::before {
  background: rgba(133, 78, 254, 0.18);
  color: var(--color-primary-300);
}

.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
}

.svc-list {
  display: grid;
  gap: 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.svc-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.svc-list svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--color-primary-500);
}

.svc-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
  padding: 22px;
  border-radius: 18px;
  background: var(--color-background-3);
}

.dark .svc-terms {
  background: var(--color-background-7);
}

.svc-terms__label {
  font-size: 0.875rem;
  color: rgba(26, 26, 28, 0.6);
}

.dark .svc-terms__label {
  color: rgba(252, 252, 252, 0.6);
}

.svc-terms__value {
  margin-top: 6px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-secondary);
}

.dark .svc-terms__value {
  color: var(--color-accent);
}

/* карточка-мокап в секции «Почему мы» */
.why-mock {
  width: 100%;
  max-width: 470px;
}

.why-mock .mk {
  font-size: 3.2cqw;
}

.why-mock .mk__chips {
  justify-content: flex-start;
  gap: 0.4em;
}

/* ---------- цены: пункты, которых нет в тарифе ----------
   Раньше «лишние» строки отличались только прозрачностью, и галка всё равно
   читалась как «входит в план» — из-за этого любой тариф выглядел как полный
   пакет. Теперь иконка и текст размыты, и сразу видно, что пункт не входит. */

#pricing li.opacity-45 > svg {
  filter: blur(2.2px) grayscale(1);
  opacity: 0.35;
}

#pricing li.opacity-45 > span {
  filter: blur(1px);
  opacity: 0.55;
}

/* ---------- средняя карточка тарифа («Полный пакет») ----------
   Так же, как в оригинале: фиолетовую рамку рисует внешний слой с p-2.5, из-за
   него карточка на 20px выше соседних и рамка выступает сверху и снизу — тариф
   выглядит отдельно. Вертикальные отступы оставляем 32px, чтобы этот выступ
   сохранился, а по горизонтали сжимаем до 22px: 10 (внешний слой) + 22 = 32px,
   поэтому текст и списки стоят на одной линии с крайними карточками. */

#pricing .plan-featured-inner {
  padding: 32px 22px;
}

/* ---------- примечание под тарифами ---------- */

#pricing .plans-note {
  margin: 2.5rem auto 0;
  max-width: 780px;
  text-align: center;
}

#pricing .plans-note a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- FAQ: компактная типографика ----------
   Шаблонные размеры (вопрос 20px, паддинги 32px) в аккордеоне смотрятся
   крупно, особенно на странице, где собраны все вопросы. Уменьшаем
   заголовок, вопросы и ответы и поджимаем отступы. */

.faq-stack {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* список стоит во flex-колонке с margin-inline:auto — без явной ширины
     флекс-элемент сжимается по содержимому, и когда все ответы закрыты,
     блок «худел» (786 → 393px), отчего вопросы уезжали в центр. */
  width: 100%;
}

#faq .accordion-action,
.page-faq .accordion-action {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

#faq .accordion-action span,
.page-faq .accordion-action span {
  font-size: 1.0625rem;
  line-height: 1.45;
}

#faq .accordion-content p,
.page-faq .accordion-content p {
  font-size: 0.9375rem;
  line-height: 1.6;
}

#faq .accordion-content > div,
.page-faq .accordion-content > div {
  padding-top: 1rem;
}

/* ---------- FAQ: вкладки не меняют высоту блока ----------
   Панели вкладок лежат в одной ячейке грида: показывается только активная,
   но место занимает самая высокая. Иначе при переключении вкладки блок
   скакал по высоте (681 → 539 → 616px) и всё под ним дёргалось. */

.page-faq .faq-panels {
  display: grid;
}

.page-faq .faq-panels > [data-tab-content] {
  grid-area: 1 / 1;
}

.page-faq .faq-panels > [data-tab-content][aria-hidden="true"] {
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- отзывы: читаемость карточек в двух темах ----------
   Активная карточка в обеих темах затемнена (тёмная подложка + светлый текст),
   боковые — наоборот: светлая подложка с тёмным текстом. Шаблонный стиль
   красил только .review-text, поэтому имя, специальность и балл на активной
   карточке в светлой теме пропадали. Ниже задаём цвета для обоих состояний. */

.reviews-swiper .swiper-slide:not(.swiper-slide-active) .review-text {
  color: var(--color-secondary);
}

.dark .reviews-swiper .swiper-slide:not(.swiper-slide-active) .review-text {
  color: var(--color-accent);
  opacity: 0.88;
}

.reviews-swiper .swiper-slide:not(.swiper-slide-active) .review-score,
.reviews-swiper .swiper-slide:not(.swiper-slide-active) .review-spec {
  color: var(--color-secondary);
  opacity: 0.7;
}

.dark .reviews-swiper .swiper-slide:not(.swiper-slide-active) .review-score,
.dark .reviews-swiper .swiper-slide:not(.swiper-slide-active) .review-spec {
  color: var(--color-accent);
  opacity: 0.65;
}

/* активная карточка затемнена в обеих темах — подписи делаем светлыми */
.reviews-swiper .swiper-slide-active .review-score,
.reviews-swiper .swiper-slide-active .review-spec {
  color: rgba(252, 252, 252, 0.72);
  opacity: 1;
}

/* ---------- единый вертикальный ритм секций лендинга ----------
   Секции шаблона шли с разными отступами (100 / 180 / 200 / 112), из-за чего
   расстояние между ними «плясало». Выравниваем: снизу у всех 100px, сверху
   100px у всех кроме первой (первой нужен запас под фиксированную шапку). */

.page-home > section {
  padding-bottom: 100px !important;
}

.page-home > section:not(:first-child) {
  padding-top: 100px !important;
}

@media (max-width: 1023px) {
  .page-home > section {
    padding-bottom: 64px !important;
  }

  .page-home > section:not(:first-child) {
    padding-top: 64px !important;
  }
}

/* ---------- бейджи секций: читаются на любом фоне ----------
   В светлой теме подложка бейджа (background-4, #f0f2f6) совпадала с фоном
   секции «Отзывы» — плашка сливалась и выглядела просто текстом. Даём бейджам
   лёгкую фиолетовую подложку в тон акценту, тогда они видны везде. */

.badge-primary {
  background-color: rgba(134, 79, 254, 0.1);
}

.dark .badge-primary {
  /* в тёмной теме бейджи были зелёными — оставляем тот же фиолетовый акцент,
     что и в светлой, только светлее: на тёмном фоне #864FFE читается хуже. */
  color: #a585ff;
  background-color: rgba(165, 133, 255, 0.14);
}

/* ---------- состав тарифа под селектом формы заявки ---------- */

[data-plan-includes] ul {
  list-style: none;
  padding-left: 0;
}

[data-plan-includes] li::before {
  content: "✓";
  display: inline-block;
  width: 1.15em;
  opacity: 0.75;
}

/* ---------- модальное окно заявки ---------- */

/* ---------- шапка ----------
   В тёмной теме фон шапки совпадал с фоном секций (#0f1217) и её не было видно
   при прокрутке. Фон сделали чуть светлее (background-7), добавили рамку и
   вот эту тень — «пилюля» читается на любом фоне. */

.header-one {
  box-shadow: 0 10px 30px rgba(15, 18, 23, 0.12);
}

.dark .header-one {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}

/* Список услуг короткий — широкая панель 1290px выглядела пустой. */
.header-one .dropdown-menu,
.header-one .dropdown-menu-bridge {
  width: 620px;
  max-width: calc(100vw - 3rem);
}

.order-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.order-modal[hidden] {
  display: none;
}

.order-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(9, 11, 16, 0.72);
}

.order-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 24px;
  padding: 2.25rem;
  background-color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.dark .order-modal__dialog {
  background-color: var(--color-background-6, #0f1217);
}

.order-modal__head {
  margin-bottom: 1.75rem;
  text-align: center;
}

.order-modal__title {
  margin-top: 0.75rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

.order-modal__lead {
  margin-top: 0.5rem;
  color: rgba(26, 26, 28, 0.65);
}

.dark .order-modal__lead {
  color: rgba(252, 252, 252, 0.6);
}

.order-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--color-secondary);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.dark .order-modal__close {
  color: var(--color-accent);
}

.order-modal__close:hover {
  opacity: 1;
}

body.order-modal-open {
  overflow: hidden;
}

/* на телефоне окно раскрывается на весь экран */
@media (max-width: 767px) {
  .order-modal {
    padding: 0;
  }

  .order-modal__dialog {
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    padding: 1.25rem;
  }

  .order-modal__title {
    font-size: 1.35rem;
  }

  .order-modal__head {
    margin-bottom: 1.25rem;
  }
}

.page-faq .faq-hero {
  padding-top: 9rem;
  padding-bottom: 2.5rem;
}

.page-faq .faq-hero h1 {
  font-size: 2.25rem;
  line-height: 1.2;
}

@media (max-width: 1023px) {
  .page-faq .faq-hero {
    padding-top: 7rem;
    padding-bottom: 2rem;
  }

  .page-faq .faq-hero h1 {
    font-size: 1.75rem;
  }
}


/* ---------- бегущая рамка у тарифа «Полный пакет» ----------
   Анимируем только transform: слой уходит на композитор GPU, браузер не
   перерисовывает градиент каждый кадр — движение идёт без лагов.
   Квадрат в 1.7 ширины карточки крутится под белой подложкой, поэтому
   видимым остаётся только кольцо в 10px. */

#pricing .plan-featured {
  position: relative;
  overflow: hidden;
}

#pricing .plan-featured::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170%;
  aspect-ratio: 1 / 1;
  margin: -85% 0 0 -85%;
  background-image: url("../images/ns-img-25.webp");
  background-size: 100% 100%;
  background-position: center;
  filter: saturate(1.9);
  transform-origin: 50% 50%;
  animation: plans-ring 8s linear infinite;
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}

#pricing .plan-featured > * {
  position: relative;
  z-index: 1;
}

@keyframes plans-ring {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #pricing .plan-featured::before {
    animation: none;
  }
}