/* === HERO Services === */
.services-hero {
  background-color: var(--color-background);
  padding: 100px 20px 100px;
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}

.hero-left {
  flex: 1 1 55%;
}

.hero-title {
  font-family: 'Roboto Thin', sans-serif;
  font-size: 2.6rem;
  color: var(--color-foreground);
  margin-bottom: 20px;
  animation: fadeInUp 1s ease-out forwards;
}

.hero-subtext {
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-foreground);
  opacity: 0.9;
  animation: fadeInUp 1.4s ease-out forwards;
}

.hero-subtext .highlight {
  color: var(--color-primary) !important;
}

.hero-subtext .highlight:hover {
  color: var(--color-accent);
  transition: color 0.3s ease;
}

.hero-right {
  flex: 1 1 35%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Shared scenario/chapter control pattern for Services + Front Page + Why: Services keeps the hero controls in a vertical stack on desktop. */
.services-hero .scenario-buttons-base {
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

/* === Decorations === */
.services-decor-scope {
  /* Added a Services page wrapper to position and clip the SVG decoration layer before the footer. */
  position: relative;
  overflow: hidden;
  overflow: clip;
}

.svg-decor-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* Let the decoration layer size be driven by the Services scope height for JS recalculation. */
  pointer-events: none;
  overflow: visible; /* Keep SVG decorations visible inside the clipped scope. */
  z-index: 0;
}

.decor {
  position: absolute;
  opacity: 0.08;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.decor:hover {
  opacity: 0.25;
  transform: scale(1.3);
}

/* === Animations === */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Adaptive === */
@media (max-width: 768px) {
  .hero-grid {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-title {
    font-size: 2.1rem;
  }

  .hero-subtext {
    font-size: 1rem;
  }

  /* Shared scenario/chapter control pattern for Services + Front Page + Why: mobile Services switches scenario controls to wrapped row for compact screens. */
  .services-hero .scenario-buttons-base {
    flex-direction: row;
    gap: 10px;
  }

  /* Shared scenario/chapter control pattern for Services + Front Page + Why: Services keeps two-column scenario choices on mobile hero row. */
  .services-hero .scenario-button-base {
    flex: 1 1 calc(50% - 10px);
    text-align: center;
  }
}
/* === SCENARIO SECTION === */
.scenario-section {
  padding: 100px 20px;
  background-color: var(--color-background);
}

.scenario-title {
  font-family: 'Roboto Thin', sans-serif;
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 60px;
  color: var(--color-foreground);
}

.scenario-grid {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 900px;
  margin: 0 auto;
}

/* Added a single dynamic scenario window that mirrors the card styling for the Services page. */
.scenario-window {
  display: none;
  max-width: 900px;
  /* Adjusted bottom spacing so the new return button sits closer to the scenario text. */
  margin: 0 auto 30px;
  background-color: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  padding: 30px 25px;
  color: var(--color-foreground);
  font-family: 'Raleway Regular', sans-serif;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Added a visible state for the dynamic scenario window when JS is active. */
.scenario-section.is-dynamic .scenario-window {
  display: block;
}

/* Added a hidden state for the static scenario grid when JS is active. */
.scenario-section.is-dynamic .scenario-grid {
  display: none;
}

/* Added a subtle transition class for scenario swaps, respecting reduced motion settings. */
.scenario-window.is-transitioning {
  opacity: 0;
  transform: translateY(10px);
}

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

/* Added a centered wrapper for the scenario return button below the dynamic scenario text. */
.scenario-return {
  display: flex;
  justify-content: center;
  margin: 0 auto 60px;
}

/* Ensured the return button keeps its natural width even when scenario buttons stack on mobile. */
.scenario-return .scenario-button-base {
  flex: 0 0 auto;
}

.scenario-card {
  background-color: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  padding: 30px 25px;
  color: var(--color-foreground);
  font-family: 'Raleway Regular', sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scenario-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.scenario-card h3 {
  font-family: 'Roboto Regular', sans-serif;
  font-size: 1.4rem;
  color: var(--color-primary);
  margin-bottom: 15px;
}

/* Added matching typography for the dynamic scenario window headings. */
.scenario-window h3 {
  font-family: 'Roboto Regular', sans-serif;
  font-size: 1.4rem;
  color: var(--color-primary);
  margin-bottom: 15px;
}

/* Added a tab row under the lead-gen title to keep the variant controls on a separate line. */
.scenario-variant-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}

/* Added muted, clickable styling for lead-gen variant tabs in the scenario window. */
.scenario-variant-tab {
  background: none;
  border: none;
  padding: 0;
  font-family: 'Roboto Regular', sans-serif;
  font-size: 1rem;
  color: var(--color-foreground);
  opacity: 0.6;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
  border-bottom: 2px solid transparent;
}

/* Added a visible separator between variant tabs that stays non-interactive. */
.scenario-variant-separator {
  color: var(--color-foreground);
  opacity: 0.35;
  pointer-events: none;
}

/* Added an active tab state with subtle underline to confirm the selected lead-gen variant. */
.scenario-variant-tab.is-active {
  color: var(--color-primary);
  opacity: 1;
  border-bottom-color: var(--color-primary);
}

/* Added a hover state that reuses the primary accent color without being overly flashy. */
.scenario-variant-tab:hover,
.scenario-variant-tab:focus-visible {
  color: var(--color-primary);
  opacity: 0.85;
}

/* Added variant body state hooks to toggle lead-gen content without removing it from the DOM. */
.scenario-variant-body.is-hidden {
  display: none;
}

/* Added a soft fade-in animation for variant swaps while respecting reduced motion preferences. */
.scenario-variant-body.is-active {
  animation: scenarioVariantFade 0.3s ease;
}

@keyframes scenarioVariantFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scenario-variant-body.is-active {
    animation: none;
  }
}

.scenario-card p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Added matching paragraph spacing for the dynamic scenario window body. */
.scenario-window p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* === HOW WE WORK DST === */
.how-we-work-dst {
  background-color: var(--color-background);
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

.how-title {
  font-family: 'Roboto Thin', sans-serif;
  font-size: 2.4rem;
  color: var(--color-foreground);
  margin-bottom: 60px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.how-title .highlight {
  color: var(--color-primary);
}

.how-title .how-decor-icon {
  width: 32px;
  height: 32px;
  opacity: 0.6;
  transform: translateY(-2px);
}

.how-block {
  max-width: 900px;
  margin: 0 auto 60px;
  color: var(--color-foreground);
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.015);
  border-radius: 12px;
  padding: 40px 30px;
  overflow: hidden;
}

.how-block h3 {
  font-family: 'Roboto Regular', sans-serif;
  font-size: 1.4rem;
  color: var(--color-primary);
  margin-bottom: 20px;
}

/* === Анимация появления === */
.how-block.animated-block {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.how-block.animated-block.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Framework cards (раскрывающиеся плитки) === */
.framework-cards {
  display: flex; /* Services frameworks block: переключаем контейнер на flex, чтобы карточки не растягивали высоту ряда как в grid. */
  flex-wrap: wrap; /* Services frameworks block: разрешаем перенос карточек, чтобы сохранить адаптивный переход 3→2→1 колонка. */
  gap: 12px; /* Reduce spacing between framework cards to tighten vertical gaps in the Services section. */
  margin-top: 30px;
}

.framework-card {
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 30px 25px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 0 transparent;
  flex: 1 1 calc(33.333% - 12px); /* Services frameworks block: задаём базу 3 колонки и компенсируем gap, чтобы убрать растяжение ряда. */
  min-width: 280px; /* Services frameworks block: фиксируем минимальную ширину карточки для корректного перехода к 2/1 колонке. */
}

.framework-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.framework-toggle {
  display: none;
}

.framework-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-family: 'Roboto Regular', sans-serif;
  font-size: 1.2rem;
  color: var(--color-primary);
  position: relative;
  line-height: 1.4;
  flex-wrap: nowrap;
}

.framework-header .framework-title {
  flex: 1;
  word-break: break-word;
  white-space: normal;
}

@media (max-width: 768px) {
  .services-page .framework-cards .framework-card {
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
}


/* ▼ стрелка */
.framework-header::after {
  content: "▼";
  font-size: 0.8rem;
  color: var(--color-accent);
  margin-left: auto;
  transition: transform 0.3s ease;
}

.framework-toggle:checked + .framework-header::after {
  transform: rotate(180deg);
}

/* Иконка фреймворка слева */
.framework-icon {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  flex-shrink: 0;
}

.framework-content {
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1rem;
  color: var(--color-foreground);
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
}

.framework-toggle:checked ~ .framework-content {
  max-height: 500px;
  opacity: 1;
  margin-top: 12px;
  width: 100%; /* Services frameworks block: контент раскрытой карточки растягиваем на всю доступную ширину внутри полноширинной плитки. */
}

.framework-card:has(.framework-toggle:checked) {
  flex-basis: 100%; /* Services frameworks block: раскрытая карточка занимает всю строку, чтобы контент не сжимался рядом с соседями. */
  width: 100%; /* Services frameworks block: принудительно фиксируем полноширинное состояние раскрытой карточки. */
}

/* === Tools Grid and Visuals === */
.tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
  margin-top: 30px;
}

.tools-list {
  flex: 1 1 60%;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.tools-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
}

.tools-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: bold;
}

.tools-visual {
  flex: 1 1 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tools-decor {
  width: 100px;
  opacity: 0.1;
}

/* === Adaptive n3 === */
@media (max-width: 768px) {
  .how-title {
    font-size: 2rem;
    text-align: center;
  }

  .tools-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .tool-tile {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px;
    background: var(--color-background-alt, #f9f9f9);
    border-radius: 8px;
    text-align: center;
  }

  .tool-tile img {
    display: block;
    margin: 0 auto 10px;
    max-width: 60px;
  }

  .tools-visual {
    justify-content: center;
    flex-wrap: wrap;
  }

  html, body {
    overflow-x: hidden;
  }
}

/* === HADI-Cycle Block (circle layout with directional text) === */
.hadi-cycle-block {
  padding: 20px 20px 40px; /* ← Уменьшили верхний padding с 80px до 20px */
  background-color: rgba(255, 255, 255, 0.015); /* легкая прозрачность */
  backdrop-filter: blur(2px); /* размытие фона */
  border-radius: 16px; /* скругление углов */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03); /* мягкий контур */
  color: var(--color-foreground);
  text-align: center;
  position: relative;
}

.hadi-title {
  font-family: 'Roboto Thin', sans-serif;
  font-size: 2.2rem;
  color: var(--color-primary);
  margin-bottom: 50px;
}

/* === Grid (круговая схема) === */
.hadi-grid {
  position: relative;
  width: 360px;
  height: 360px;
  /* Фиксируем десктопный эталон 360x360 для HADI, чтобы мобильный responsive.css масштабировал блок от одной базовой геометрии. */
  margin: 0 auto;
}

/* 1. ▼ маленькие треугольники-подсказки */
.hadi-pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #ffffff; /* Белый DST по умолчанию */
  transition: border-bottom-color 0.3s ease;
  z-index: 1;
}

/* 2. Активный кружок — треугольник становится розовым */
.hadi-circle.active .hadi-pointer,
.hadi-leads.active .hadi-pointer {
  border-bottom-color: #ffb4b0; /* Розовый DST при активации */
}


/* Позиции кругов */
.hadi-node {
  position: absolute;
  width: 120px;
  z-index: 2;
}

/* Центрируем каждый узел по позиции */
.hadi-node.h { top: 0; left: 50%; transform: translateX(-50%); }
.hadi-node.a { top: 50%; right: 0; transform: translateY(-50%); text-align: left; }
.hadi-node.i { top: 50%; left: 0; transform: translateY(-50%); text-align: right; }
.hadi-node.d { bottom: 0; left: 50%; transform: translateX(-50%); }

/* В секции HADI на Services фиксируем центр как компактную точку привязки, чтобы чип Leads не влиял на геометрию круга H/A/D/I. */
.hadi-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: max-content;
  max-width: 100%;
}

/* В секции HADI на Services делаем ссылку inline-flex, чтобы зона клика занимала только размер чипа Leads и не растягивала центр. */
.hadi-leads-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* В секции HADI на Services оформляем Leads как компактный сценарный чип: убираем треугольную геометрию и фиксируем аккуратные размеры под слово Leads. */
.hadi-leads {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  line-height: 1.1;
  padding: 6px 12px;
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--color-primary);
  font-family: 'Raleway Regular', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Убираем принудительный uppercase у центрального CTA-чипа Leads в hero Services, чтобы подпись оставалась в sentence case. */
  text-transform: none;
  white-space: nowrap;
  border-radius: 6px;
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  cursor: pointer;
  position: relative;
  clip-path: none;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* В секции HADI на Services повторяем hover-паттерн scenario-кнопки, чтобы Leads выглядел частью hero-нарратива действий. */
.hadi-leads:hover {
  transform: scale(1.05);
  background-color: var(--color-primary);
  color: var(--color-background);
  box-shadow: 0 4px 12px rgba(255, 72, 0, 0.4);
}

/* В секции HADI на Services добавляем мягкий pressed-эффект, чтобы активное нажатие чипа читалось как у кнопок scenario. */
.hadi-leads:active {
  transform: scale(0.98);
}

/* В секции HADI на Services синхронизируем active-состояние с hover-сценарием, чтобы кликовый статус был контрастным и стабильным. */
.hadi-leads.active {
  background-color: var(--color-primary);
  color: var(--color-background);
  box-shadow: 0 4px 12px rgba(255, 72, 0, 0.4);
}

/* В секции HADI на Services скрываем служебный `.hadi-pointer` внутри `.hadi-leads`, чтобы JS-инъекция не возвращала треугольную форму у mini-button центра. */
.hadi-leads .hadi-pointer {
  display: none;
}
/* Removed unused legacy `.hadi-triangle*` rules because the current markup uses `.hadi-leads`, and isolating one implementation avoids cascade conflicts. */
/* Кружки */
.hadi-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.4rem;
  cursor: pointer;
  margin: 0 auto 8px;
  transition: transform 0.3s ease;
}

.hadi-circle:hover {
  transform: scale(1.05);
}

.hadi-toggle {
  display: none;
}

/* === Всплывающие тексты === */
.hadi-text {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
  font-family: 'Raleway Regular', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.025); /* плотнее фон */
  border-radius: 12px; /* как у framework-card */
  padding: 16px 20px;
  position: absolute;
  top: 70px;
  width: 220px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02); /* тонкая граница */
  backdrop-filter: blur(2px); /* мягкость заднего фона */
}

/* Лево: H и I */
.hadi-node.h .hadi-text,
.hadi-node.i .hadi-text {
  top: 50%;
  right: 95px;
  transform: translateY(-50%);
  text-align: right;
}

/* Право: A и D */
.hadi-node.a .hadi-text,
.hadi-node.d .hadi-text {
  top: 50%;
  left: 95px;
  transform: translateY(-50%);
  text-align: left;
}

/* При активации */
.hadi-toggle:checked ~ .hadi-text {
  max-height: 300px;
  opacity: 1;
  pointer-events: auto;
}

/* Адаптивность HADI для <=480px перенесена в responsive.css, чтобы мобильная геометрия Services управлялась из одного файла. */
/* === Static explanation block under HADI === */
.hadi-info-text {
  margin: 20px auto 20px;
  max-width: 720px;
  padding: 4px 22px;
  border-radius: 12px;
  background-color: #0e140e; /* Цвет как фон сайта */
  color: #ffffff; /* Белый текст */
  text-align: center;
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  border: 2px solid #ff4800;
  box-shadow: 0 0 0 2px rgba(255, 72, 0, 0.1);
  transition: opacity 0.3s ease;
}

/* Добавляем краткое fade/slide-состояние для HADI-инфоблока, чтобы переключение H/A/D/I визуально читалось как обновление контента. */
.hadi-info-text.is-transitioning {
  opacity: 0.62;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.hadi-info-text.hidden {
  opacity: 0.3;
}

/* Для пользователей с reduce-motion отключаем transition у HADI, чтобы обновление текста происходило без анимации. */
@media (prefers-reduced-motion: reduce) {
  .hadi-info-text.is-transitioning {
    transition: none;
    transform: none;
  }
}


/* === INSTRUMENTS DST BLOCK === */
.tools-section {
  margin-top: 60px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.tool-tile {
  position: relative;
  background-color: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  padding: 20px 24px;
  font-family: 'Raleway Regular', sans-serif;
  color: var(--color-foreground);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-size: 1.05rem;
}

.tool-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.tool-tile .tool-title {
  font-family: 'Roboto Regular', sans-serif;
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--color-primary);
  padding-right: 20px; /* место под плюс */
}

.tool-tile::after {
  content: "+";
  font-size: 2.2rem;
  color: var(--color-accent);
  opacity: 0.7;
  position: absolute;
  top: 16px;
  right: 18px;
  line-height: 1;
  pointer-events: none;
}

/* Раскрытые блоки */
.tools-expanded-zone {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.tool-expanded {
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--color-accent);
  border-radius: 12px;
  padding: 25px 30px;
  font-family: 'Raleway Regular', sans-serif;
  color: var(--color-foreground);
  position: relative;
}

.tool-expanded .tool-title {
  font-family: 'Roboto Regular', sans-serif;
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.tool-expanded .tool-description {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-foreground);
  opacity: 0.95;
}

.tool-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.3rem;
  color: var(--color-accent);
  cursor: pointer;
  transition: color 0.2s ease;
}

.tool-close:hover {
  color: var(--color-primary);
}

/* ===== Scroll button for selected tools ===== */
.tools-scroll-button {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-background);
  color: var(--color-accent, #ff4800);
  border: 1px solid var(--color-accent, #ff4800);
  padding: 12px 16px;
  font-family: 'Roboto Regular', sans-serif;
  font-size: 1rem;
  border-radius: 10px;
  width: fit-content;
  margin: 10px auto;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.tools-scroll-button:hover {
  background-color: var(--color-accent, #ff4800);
  color: #fff;
}

/* === Адаптив плашки под мобайл n1 === */
@media screen and (max-width: 768px) {
  .tools-scroll-button {
    font-size: 0.95rem;
    padding: 10px 12px;
    width: 90%;
    border-radius: 8px;
    position: sticky;
    top: var(--header-height, 80px); /* чтобы не залипло под шапкой */
    margin: 8px auto;
  }
}


/* === Фиксация мышления в Notion === */
.fixation-block {
  background-color: rgba(255, 255, 255, 0.015);
  border-radius: 12px;
  padding: 40px 30px 20px; /* ← было 40px снизу, теперь 20px */
  font-family: 'Raleway Regular', sans-serif;
  color: var(--color-foreground);
  line-height: 1.7;
  font-size: 1.05rem;
}

.fixation-title {
  font-family: 'Roboto Thin', sans-serif;
  font-size: 1.8rem;
  margin-bottom: 25px;
  color: var(--color-foreground);
}

/* Tighten title-to-image spacing in the Services "media-only" Notion block after text removal so no excessive gap remains. */
.fixation-block--media-only .fixation-title {
  margin-bottom: 14px;
}

.fixation-title .highlight {
  color: var(--color-primary);
}

.insight-list {
  margin: 20px 0;
  padding-left: 20px;
  list-style: none;
}

.insight-list li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 24px;
  color: var(--color-foreground);
}

.insight-list li::before {
  content: "•";
  color: var(--color-accent);
  position: absolute;
  left: 0;
  top: 0;
}
/* Layout rules for the Services roadmap section: these selectors control only local vertical rhythm, while screenshot/card visuals come from the shared global component styles. */
.roadmap-example-segment {
  margin-bottom: 20px;
}

/* Keep local heading spacing inside the Services section without redefining the shared screenshot/card appearance. */
.roadmap-example-title {
  font-family: 'Roboto Thin', sans-serif;
  /* Reduced subsection title size with clamp() so the H3 stays visually below the parent H2 on desktop and mobile. */
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);
  color: var(--color-foreground);
  margin: 0 0 14px;
}

/* Keep paragraph flow spacing in the Services layout; visual figure/caption styling stays in the global component. */
.roadmap-example-segment p {
  margin: 0 0 14px;
}

/* Keep only Services section flow spacing for roadmap figures; shared card frame and caption visuals are provided by global `.media-card`. */
.roadmap-example-figure {
  margin: 0 0 16px;
}

/* Keep list spacing as a local Services layout rule without overriding component-level visuals. */
.roadmap-example-list {
  margin: 0;
  padding-left: 20px;
}

/* Keep item spacing for this Services section layout only; do not redefine global screenshot/card styles. */
.roadmap-example-list li {
  margin-bottom: 8px;
}

/* Keep the profitability screenshots in a segment-scoped single-column grid by default so mobile view stacks cards predictably inside the Services section only. */
.how-we-work-dst .profitability-snapshots-segment .profitability-snapshots-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 16px;
}

/* Normalize figure margins inside the profitability grid so spacing is controlled by grid gap and does not leak from generic figure defaults. */
.how-we-work-dst .profitability-snapshots-segment .profitability-snapshot-figure {
  margin: 0;
}

/* Keep Prime Garage CTA block left-aligned by default so mobile/tablet behavior stays unchanged in this profitability segment. */
.how-we-work-dst .profitability-snapshots-segment .profitability-cta {
  text-align: left;
}

/* Keep CTA heading left-aligned on mobile/tablet so this specific heading matches the requested small-screen layout without affecting global Services headings. */
.how-we-work-dst .profitability-snapshots-segment .profitability-cta .profitability-cta-heading {
  margin: 0 0 10px;
  text-align: left;
}

/* Promote profitability screenshots to a two-column layout on desktop widths while keeping the scope limited to this Services segment. */
@media (min-width: 992px) {
  .how-we-work-dst .profitability-snapshots-segment .profitability-snapshots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Stretch grid items so both cards share equal height and caption baselines in the desktop two-column layout. */
    align-items: stretch;
  }

  /* Option A normalization: force a shared desktop media box ratio for profitability screenshots in this segment only. */
  .profitability-snapshots-segment .profitability-snapshot-figure img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    object-position: center;
  }

  /* Keep each profitability card as a vertical flex container so image and caption spacing stays consistent between both cards. */
  .profitability-snapshots-segment .profitability-snapshot-figure {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Preserve center alignment from `.media-card--center-caption figcaption` while normalizing equal top spacing in both cards. */
  .profitability-snapshots-segment .media-card--center-caption figcaption {
    margin-top: 12px;
  }
}

/* Center only the Prime Garage CTA wrapper on desktop screens while preserving the existing mobile alignment. */
@media (min-width: 1024px) {
  .how-we-work-dst .profitability-snapshots-segment .profitability-cta {
    text-align: center;
  }

  /* Restore centered heading alignment on desktop so only mobile/tablet uses the new left alignment for this Notion CTA title. */
  .how-we-work-dst .profitability-snapshots-segment .profitability-cta .profitability-cta-heading {
    text-align: center;
  }

  /* Explicitly keep CTA button auto-sized on desktop so it does not stretch across the container. */
  .how-we-work-dst .profitability-snapshots-segment .profitability-cta .cta-button {
    width: auto;
    max-width: none;
  }
}

/* Mobile-only Services positioning rule: adjust local offset without redefining the base screenshot/card look. */
@media (max-width: 430px) {
  .media-card--services-mobile-tight {
    margin-top: 8px;
  }
}

/* === А результат? (ветки и flip-карточки) === */
.result-section {
  margin-top: 40px;
  margin-bottom: 80px; /* ← добавляем! чтобы футер не "прилипал" */
  padding: 0 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* === Отступ на мобайл у заголовка === */
@media (max-width: 768px) {
  .result-section {
    margin-top: 10px; /* Было 40px, теперь ближе к карточке */
  }

  .result-title {
    font-size: 1.8rem; /* можно чуть уменьшить размер, если крупный на мобилке */
    margin-bottom: 8px;
  }
	.flip-card:last-child {
    margin-bottom: 30px; /* добавили отступ после последней карточки */
  }
}


/* === Fixation block: отступ снизу, не 1px :) === */
.fixation-block {
  margin-bottom: 50px;
}


/* Анимация заголовка "А результат?" */
.result-title {
  font-family: 'Roboto Thin', sans-serif;
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 10px;
  animation: fadeInUp 0.6s ease-out forwards, pulseGlow 3s infinite ease-in-out;
  opacity: 0;
  transform: translateY(20px);
}

/* Анимация для smooth appearance */
@keyframes pulseGlow {
  0%, 100% {
    text-shadow: 0 0 4px rgba(255, 72, 0, 0.4);
    opacity: 1;
  }
  50% {
    text-shadow: 0 0 12px rgba(255, 72, 0, 0.8);
    opacity: 0.85;
  }
}

.result-subtext {
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1.1rem;
  color: var(--color-foreground);
  margin-bottom: 40px;
}

.result-chart {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  position: relative;
}

.result-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.result-line {
  width: 2px;
  height: 40px;
  background-color: var(--color-primary);
  margin-bottom: 20px;
}

.flip-card {
  width: 220px;
  height: 160px;
  perspective: 1000px;
  cursor: pointer;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  padding: 20px;
  box-sizing: border-box;
  font-family: 'Raleway Regular', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-foreground);
  text-align: center;
}

.flip-front {
  font-family: 'Roboto Regular', sans-serif;
  font-weight: bold;
  color: var(--color-primary);
  font-size: 1.2rem;
}

.flip-back {
  transform: rotateY(180deg);
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.9;
}

/* === Сколько стоит работать с нами === */
.pricing-section {
  padding: 80px 20px;
  background-color: rgba(255, 255, 255, 0.015);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Заголовок секции */
.pricing-title {
  font-family: 'Roboto Thin', sans-serif;
  font-size: 2.2rem;
  color: var(--color-primary);
  margin-bottom: 30px;
  animation: fadeInUp 0.6s ease both;
}

/* Подзаголовок / пояснение */
.pricing-subtitle {
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1.1rem;
  color: var(--color-foreground);
  margin-bottom: 30px;
  line-height: 1.6;
  animation: fadeInUp 0.7s ease both;
  animation-delay: 0.15s;
}

/* === Ценовые карточки в стиле DST === */
.price-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 30px;
  /* Добавляем нижний отступ под карточками цены в секции Services, чтобы value-строка не прилипала визуально к карточкам. */
  margin-bottom: 28px;
}

.price-card {
  background-color: rgba(255, 255, 255, 0.025);
  border-radius: 12px;
  padding: 28px 26px;
  width: 280px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: default;
  animation: fadeInUp 0.7s ease both;
}

.price-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 10px 20px rgba(255, 72, 0, 0.25);
}

.price-card h4 {
  font-family: 'Roboto Regular', sans-serif;
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.price-card .amount {
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1.4rem;
  color: var(--color-foreground);
}

/* Адаптивность */
@media (max-width: 768px) {
  .price-card {
    width: 100%;
    max-width: 300px;
  }
.pricing-section {
    padding-top: 40px; /* было 80px → уменьшили верхний отступ */
  }

   .cta-center {
    flex-direction: column;
    gap: 14px;
    align-items: center;
    padding-bottom: 40px; /* ← вот этот ключевой отступ вниз! */
  }

  .pricing-section .cta-button {
    width: 90%;              /* Ограничиваем ширину CTA только в блоке услуг, чтобы не затрагивать кнопки в других шаблонах (например, front-page). */
    max-width: 320px;
    box-sizing: border-box;  /* Включаем padding и border в расчёт ширины CTA в мобильном брейкпоинте, чтобы убрать переполнение на узких экранах. */
    margin-left: auto;       /* Фиксируем центрирование CTA в блоке .cta-center для стабильного поведения в Android-браузерах. */
    margin-right: auto;      /* Явно дублируем центрирование справа, чтобы обе кнопки имели одинаковые боковые отступы. */
  }
}

/* Унифицируем текстовые блоки pricing на Services с front-page: value-строка и process-строка используют общий визуальный паттерн. */
.pricing-cta,
.pricing-footnote {
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1.1rem;
  color: var(--color-foreground);
  max-width: 800px;
  margin: 0 auto 25px;
  line-height: 1.7;
  animation: fadeInUp 0.85s ease both;
}

/* Оставляем отдельную задержку анимации для value-строки pricing на Services, чтобы порядок появления соответствовал логике "цена -> ценность -> процесс". */
.pricing-cta {
  animation-delay: 0.4s;
}

/* Оставляем отдельную задержку анимации для process-строки pricing на Services, чтобы текст о сроке ответа появлялся после value-строки. */
.pricing-footnote {
  margin-bottom: 40px;
  animation-delay: 0.5s;
}

/* Внутри текста — ссылка */
.inline-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.inline-link:hover {
  color: var(--color-accent);
}

/* Локальный контейнер CTA в Services: центрируем и раскладываем две кнопки в pricing-секции; это не global-правило, потому что на других шаблонах CTA-группы имеют иной ритм и выравнивание. */
.cta-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

/* Кнопки CTA внутри pricing-блока Services */
.pricing-section .cta-center .cta-button {
  /* Ограничиваем локальную анимацию только pricing-контекстом Services и оставляем без transform, чтобы не переопределять глобальный hover-transform CTA из global.css. */
  animation: ctaFadeIn 0.9s ease both;
  animation-delay: 0.6s;
}

/* Альтернативная CTA — например, «написать напрямую» */
.pricing-section .cta-center .cta-button.alt {
  /* Для вторичной CTA в Services оставляем только локальный сдвиг по времени, чтобы она появлялась после primary-кнопки; внешний вид и hover остаются глобальными. */
  animation-delay: 0.8s;
}

/* Локальная анимация появления CTA для pricing-секции Services: управляем только прозрачностью, чтобы transform оставался единым из global.css для hover-состояния. */
@keyframes ctaFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* === Как проходит работа (пошагово) === */
.how-it-works-section {
  background-color: rgba(255, 255, 255, 0.015);
  border-radius: 16px;
  padding: 30px 30px;
  max-width: 900px;
  margin: 40px auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03);
  position: relative;
  z-index: 1;
}

.how-container {
  position: relative;
  z-index: 2;
}

.how-title {
  font-family: 'Roboto Thin', sans-serif;
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 40px;
  text-align: center;
  position: relative;
  z-index: 3;
}

.how-steps-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

/* Скрытые по умолчанию */
.work-step {
  opacity: 0;
  /* В секции шагов page-services.php держим закрытое состояние через max-height: 0, чтобы аккордеон плавно раскрывался без обрезки контента. */
  max-height: 0;
  transform: translateY(20px);
  overflow: hidden;
  transition: all 0.4s ease;
}

/* Активный шаг */
.work-step.active {
  opacity: 1;
  /* Для активного шага в #workSteps задаём большой лимит высоты, чтобы длинный текст (включая первый шаг) не обрезался на Galaxy S8+. */
  max-height: 1000px;
  transform: translateY(0);
}

@media (max-width: 768px) {
  /* На мобильных увеличиваем потолок раскрытия шага, чтобы нижняя/правая граница .step-tile и длинные описания оставались полностью видимыми. */
  .work-step.active {
    max-height: 1400px;
  }
}

/* Плитка шага */
.step-tile {
  position: relative;
  z-index: 5;
  background-color: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Внутренний слой — двигается */
.step-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 48px 20px 24px; /* справа добавили место под треугольник */
  font-family: 'Raleway Regular', sans-serif;
  font-size: 1.05rem;
  color: var(--color-foreground);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
  position: relative;
  z-index: 10;
}

/* Мобайл: увеличили нижний паддинг у .step-tile, чтобы кнопка "Ну так что?" не прилипала к краю */
@media (max-width: 768px) {
  #finalCta {
    padding-bottom: 40px !important;
    text-align: center;
  }

  #finalCta .cta-button {
    display: block;
    margin: 0 auto 16px; /* Добавляем нижний отступ у CTA на мобильных, чтобы кнопка не упиралась в границу блока #finalCta на странице Services. */
    max-width: 320px;
  }
}

.step-tile:hover .step-inner {
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  border-color: var(--color-accent);
}

/* Плюсик у активного шага */
.work-step.active .step-tile::after {
  content: "▼"; /* ▼ или ⏷ тоже подойдут */
  font-size: 1.5rem;
  color: var(--color-accent);
  opacity: 0.8;
  position: absolute;
  top: 16px;
  right: 18px;
  line-height: 1;
  pointer-events: none;
  z-index: 15;
}

/* Иконка */
.step-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-top: 2px;
  flex-shrink: 0;
  animation: fadeInBullet 0.6s ease forwards;
}

/* Текст */
.step-text {
  flex: 1;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--color-foreground);
}

@keyframes fadeInBullet {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Мобайл: добавили отступ снизу у блока #finalCta, чтобы кнопка не прилипала к краю */
@media (max-width: 768px) {
  #finalCta {
    margin-bottom: 40px; !important; /* добавили дыхание под кнопкой "Ну так что?" */
  }
}

/* === Секция "Почему мы" === */
.why-block {
  margin: 80px 0;
  text-align: center;
  font-family: 'Raleway Regular', sans-serif;
  color: var(--color-foreground);
  position: relative;
  z-index: 10;
}

/* Контейнер над текстом и кнопкой */
.why-content {
  position: relative;
  z-index: 10;
}

/* Обёртка, в которой двигается кнопка */
.why-animated-button-wrapper {
  position: relative;
  width: 300px;
  height: 180px;
  margin: 40px auto 0;
  overflow: visible;
  z-index: 20; /* ещё выше */
	transform: translateX(60px);
}

/* Кнопка */
.why-button {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 22px;
  background-color: var(--color-primary);
  color: var(--color-background);
  border-radius: 6px;
  text-decoration: none;
  font-size: 1rem;
  font-family: 'Raleway Regular', sans-serif;
  animation: floatOrbit 6s ease-in-out infinite;
  white-space: nowrap;
  /* Keep hover color transition on parent so visual state change stays on the orbiting button shell. */
  transition: background-color 0.3s ease;
  z-index: 30; /* всё. Выше уже только header :) */
}

/* Added a child label layer so hover scaling does not conflict with the parent orbit transform animation. */
.why-button__label {
  display: inline-block;
  /* Synced label transform timing with global CTA variables for consistent duration/easing across theme buttons. */
  transition: transform var(--cta-transition-duration) var(--cta-transition-ease);
}

.why-button:hover {
  background-color: var(--color-accent);
  color: var(--color-background);
}

/* Apply hover scale to the child label only, preserving the floatOrbit trajectory on the parent .why-button. */
.why-button:hover .why-button__label {
  transform: scale(var(--cta-hover-scale));
}

/* Анимация */
@keyframes floatOrbit {
  0%   { transform: translate(0%, 0%); }
  25%  { transform: translate(25%, 10%); }
  50%  { transform: translate(40%, 0%); }
  75%  { transform: translate(25%, -10%); }
  100% { transform: translate(0%, 0%); }
}

/* MOBILE OVERRIDE: HADI-grid перенесён в responsive.css как единый источник мобильной геометрии HADI для Services. */