/* ==========================================================================
   Токены
   Значения из макета Figma (десктоп 1440px). Размеры плавно
   уменьшаются до мобильных (375px) через clamp().
   ========================================================================== */

:root {
  --color-bg: #07080a;
  --color-text: #e6e6e6;
  --color-text-hover: #ffffff;
  --color-muted: #6a6b6c;
  --color-border: #262626;
  --color-button-bg: #e6e6e6;
  --color-button-bg-hover: #ffffff;
  --color-button-text: #07080a;
  --color-heading: #ffffff;
  --color-secondary: #a6abb5;
  --color-surface: #1e1e1e;
  --color-badge-border: rgba(255, 255, 255, 0.2);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* 118px на 1440 → 20px на 375 */
  --gutter: clamp(20px, 9.2vw - 14.5px, 118px);
  /* 120px на 1440 → 48px на 375 */
  --page-padding-block: clamp(48px, 6.76vw + 22.6px, 120px);
  /* 80px на 1440 → 56px на 375 */
  --section-gap: clamp(56px, 2.25vw + 47.5px, 80px);
  /* 40px на 1440 → 24px на 375 */
  --case-gap: clamp(24px, 1.5vw + 18.4px, 40px);

  --text-hero: clamp(28px, 1.6vw + 22px, 45px);
  --text-section: clamp(28px, 0.75vw + 25.2px, 36px);
  --text-case-title: clamp(22px, 0.94vw + 18.5px, 32px);
  --text-body: clamp(17px, 0.563vw + 14.9px, 23px);
  --text-archive: clamp(18px, 0.563vw + 15.9px, 24px);
  --text-stats: clamp(22px, 0.563vw + 19.9px, 28px);
  --text-quote: clamp(17px, 0.28vw + 16px, 20px);

  /* 40px на 1440 → 20px на 375 */
  --prose-padding: clamp(20px, 1.88vw + 13px, 40px);
  --prose-width: 797px;

  --radius-cover: clamp(12px, 0.375vw + 10.6px, 16px);
  --radius-card: clamp(16px, 0.75vw + 13.2px, 24px);
  --radius-button: 40px;

  --container: 1204px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ==========================================================================
   База
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ==========================================================================
   Раскладка
   ========================================================================== */

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--page-padding-block) var(--gutter);
}

/* ==========================================================================
   Фон: северное сияние
   Слой закреплён за контентом и не скроллится. Пятна двигаются только
   через transform и opacity, чтобы анимация не нагружала страницу.
   ========================================================================== */

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Сияние гуще вверху и сходит на нет к низу экрана */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 85%);
}

.aurora__glow {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: aurora-drift var(--duration) ease-in-out infinite alternate;
}

.aurora__glow--cyan {
  --duration: 38s;
  top: -22vmax;
  left: -12vmax;
  width: 80vmax;
  height: 42vmax;
  background: radial-gradient(closest-side, rgba(34, 211, 238, 0.34), rgba(34, 211, 238, 0.13) 55%, transparent);
  transform: rotate(-12deg);
}

.aurora__glow--green {
  --duration: 46s;
  top: -16vmax;
  right: -18vmax;
  width: 86vmax;
  height: 38vmax;
  background: radial-gradient(closest-side, rgba(52, 211, 153, 0.30), rgba(52, 211, 153, 0.11) 55%, transparent);
  transform: rotate(10deg);
  animation-name: aurora-drift-reverse;
  animation-delay: -12s;
}

.aurora__glow--blue {
  --duration: 54s;
  top: 4vmax;
  left: 18vmax;
  width: 70vmax;
  height: 30vmax;
  background: radial-gradient(closest-side, rgba(59, 130, 246, 0.26), rgba(59, 130, 246, 0.09) 55%, transparent);
  transform: rotate(-4deg);
  animation-delay: -24s;
}

@keyframes aurora-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(-12deg) scale(1, 1);
    opacity: 0.7;
  }
  50% {
    transform: translate3d(12vw, 4vh, 0) rotate(-4deg) scale(1.15, 0.85);
    opacity: 1;
  }
  100% {
    transform: translate3d(-6vw, 8vh, 0) rotate(-16deg) scale(0.95, 1.2);
    opacity: 0.8;
  }
}

@keyframes aurora-drift-reverse {
  0% {
    transform: translate3d(0, 0, 0) rotate(10deg) scale(1, 1);
    opacity: 0.8;
  }
  50% {
    transform: translate3d(-14vw, 6vh, 0) rotate(2deg) scale(1.2, 0.9);
    opacity: 1;
  }
  100% {
    transform: translate3d(4vw, -2vh, 0) rotate(14deg) scale(0.9, 1.15);
    opacity: 0.65;
  }
}

/* ==========================================================================
   Шапка
   ========================================================================== */

.logo {
  display: flex;
  width: fit-content;
}

.logo img {
  width: 200px;
  height: 200px;
  border: 1px solid var(--color-badge-border);
  border-radius: 50%;
  object-fit: cover;
}

/* ==========================================================================
   О себе
   ========================================================================== */

.about__text {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.111;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

/* ==========================================================================
   Список «подпись — значение» (опыт и контакты)
   ========================================================================== */

.facts__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.facts__row {
  display: flex;
  align-items: baseline;
  gap: 24px;
}

.facts__label {
  flex: 0 0 160px;
  color: var(--color-muted);
}

.facts__value {
  flex: 1 1 0;
  min-width: 0;
}

/* ==========================================================================
   Ссылки и кнопки
   ========================================================================== */

.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: none;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}

a.link:hover {
  color: var(--color-text-hover);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 16px 40px;
  border-radius: var(--radius-button);
  background: var(--color-button-bg);
  color: var(--color-button-text);
  font-size: var(--text-body);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

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

.button:active {
  transform: scale(0.98);
}

/* ==========================================================================
   Заголовки секций
   ========================================================================== */

.section-title {
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.111;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Кейсы
   ========================================================================== */

.cases {
  display: flex;
  flex-direction: column;
  gap: var(--case-gap);
}

.case {
  display: flex;
  flex-direction: column;
  gap: var(--case-gap);
  padding-block: 32px;
  border-top: 1px solid var(--color-border);
}

.case__title {
  font-size: var(--text-case-title);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.case__title a {
  transition: color 0.2s var(--ease);
}

.case__title a:hover {
  color: var(--color-text-hover);
}

.case__cover {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-cover);
  background: var(--cover-bg, #1e1e1e);
  aspect-ratio: 1204 / 640;
  /* Safari: скругление не обрезает масштабируемую картинку без этого */
  isolation: isolate;
}

.case__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.case__cover:hover img {
  transform: scale(1.02);
}

.case__footer {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

.case__desc {
  flex: 1 1 0;
  min-width: 0;
  text-wrap: pretty;
}

.case__footer .button {
  margin-left: auto;
}

.archive {
  font-size: var(--text-archive);
  line-height: 1.167;
  letter-spacing: -0.02em;
  color: var(--color-muted);
}

.archive .link:hover {
  color: var(--color-text);
}

/* ==========================================================================
   Контакты
   ========================================================================== */

.contacts {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ==========================================================================
   Страница кейса
   ========================================================================== */

.study {
  display: flex;
  flex-direction: column;
  gap: var(--case-gap);
}

.study__intro {
  display: flex;
  flex-direction: column;
  gap: var(--case-gap);
  padding-bottom: var(--case-gap);
}

.study__title {
  color: var(--color-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.111;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.study__meta {
  display: flex;
  flex-direction: column;
  gap: var(--case-gap);
}

.study__facts {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.study__facts > div:first-child {
  grid-column: 1 / span 5;
}

.study__facts > div:last-child {
  grid-column: 7 / span 5;
}

.study__facts dt {
  font-weight: 700;
}

.study__next {
  display: flex;
  justify-content: center;
}

.button--wrap {
  flex-shrink: 1;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
}

/* Текстовая колонка: 8 из 12 колонок сетки макета, по центру */
.prose {
  width: 100%;
  max-width: var(--prose-width);
  margin-inline: auto;
  padding-block: var(--prose-padding);
}

.prose h2 {
  margin-bottom: 16px;
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.111;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.prose p {
  text-wrap: pretty;
}

.prose p + p {
  margin-top: 1.2em;
}

/* Картинка на всю ширину контейнера */
.media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-cover);
  background: var(--color-surface);
  aspect-ratio: var(--media-ratio, 1204 / 640);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Составные обложки: несколько карточек в сетке макета.
   Высоту задаёт сетка, карточки растягиваются по ней. */
.media-grid {
  display: grid;
  gap: 16px;
  aspect-ratio: var(--grid-ratio);
}

.media-grid .media {
  aspect-ratio: auto;
  height: 100%;
}

.media-grid--pair {
  --grid-ratio: 1204 / 760;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.media-grid--stack-left {
  --grid-ratio: 1204 / 760;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.media-grid__tall {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.media-grid__tall img {
  object-position: top;
}

.media-grid--narrow-wide {
  --grid-ratio: 1204 / 428;
  grid-template-columns: minmax(0, 390.67fr) minmax(0, 797.33fr);
}

.media-grid--tree-cjm {
  --grid-ratio: 1204 / 570;
  grid-template-columns: minmax(0, 320fr) minmax(0, 876fr);
  gap: 8px;
}

.media-group--tight {
  gap: 8px;
}

/* Инфографика «в цифрах» (RetailCRM).
   Координаты из макета заданы в единицах --u = высота плитки / 201.71,
   поэтому на десктопе плитки масштабируются как в макете. Цифры — SVG
   с фирменным шрифтом, подписи — текст, иконки прижаты к правому краю. */
.stats-figure {
  container-type: inline-size;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-cover);
  background: var(--color-surface);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: calc(11.73 * 100cqw / 1204);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat {
  --u: calc(100cqh / 201.71);
  position: relative;
  flex: 0 0 calc(var(--w) * 100cqw / 1204);
  height: calc(201.71 * 100cqw / 1204);
  container-type: size;
  overflow: hidden;
  border-radius: calc(18.76 * 100cqw / 1204);
  background: rgba(255, 255, 255, 0.1);
}

.stat__value {
  position: absolute;
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(var(--vw) * var(--u));
  height: auto;
}

.stat__label {
  position: absolute;
  top: calc(151.5 * var(--u));
  left: calc(var(--x) * var(--u));
  color: #ffffff;
  font-size: calc(24 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.stat__label small {
  font-size: 0.72em;
}

.stat__icon {
  position: absolute;
  top: calc(var(--iy) * var(--u));
  right: calc(var(--ir, 0) * var(--u));
  width: calc(var(--iw) * var(--u));
  height: calc(var(--ih) * var(--u));
  overflow: hidden;
}

.stat__icon-art {
  position: absolute;
  inset: 0;
}

.stat__icon-art img {
  width: 100%;
  max-width: none;
  height: 100%;
}

/* Плашка поверх такой же, нарисованной в экспорте из Figma.
   Привязана к углу в процентах, как в макете: на десктопе совпадает
   с нарисованной, на узких экранах остаётся читаемой и закрывает её. */
.badge.badge--overlay {
  right: var(--bx, 16px);
  bottom: var(--by, 16px);
}

.prose__list {
  margin: 1.2em 0;
  padding-left: 1.5em;
}

/* «Было / Стало» */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.compare__card {
  position: relative;
  margin: 0;
  /* Отступы в процентах от ширины карточки: 40 и 63 px при ширине 594 */
  padding: 6.73% 6.73% 10.6%;
  border-radius: var(--radius-cover);
  background: var(--color-surface);
}

.compare__screens {
  display: grid;
  grid-template-columns: 237fr 236fr;
  column-gap: 8%;
}

.compare__screens img {
  width: 100%;
  border-radius: clamp(12px, 1.7vw, 24px);
}

.badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  /* 27 px по высоте, как в макете: 1 + 3 + 19 + 3 + 1 */
  padding: 3px 15px;
  border: 1px solid var(--color-badge-border);
  border-radius: 24px;
  background: var(--color-bg);
  font-size: 16px;
  line-height: 19px;
  font-feature-settings: "salt" 1;
  white-space: nowrap;
}

/* Исследование */
.research {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.research h2 {
  margin-bottom: 0;
}

.research p + p {
  margin-top: 0;
}

.research__stats {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.6em;
  font-size: var(--text-stats);
  font-weight: 700;
  line-height: 1.214;
  letter-spacing: -0.01em;
}

.research__stats span + span::before {
  content: "·";
  margin-right: 0.6em;
}

.research__label {
  color: var(--color-secondary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.375;
}

.research__list {
  margin: 0;
  padding-left: 1.5em;
  line-height: 1.304;
}

.research__list li + li {
  margin-top: 24px;
}

/* Отзывы врачей */
.voices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 2.25vw + 15.6px, 48px) clamp(16px, 0.75vw + 13.2px, 24px);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.voices__intro {
  max-width: 798px;
  padding-bottom: 24px;
  text-align: center;
  text-wrap: balance;
}

.voices__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.voice {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--color-bg);
}

.voice__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice__author img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.voice__name {
  display: block;
  font-size: 20px;
  line-height: 1.5;
}

.voice__role {
  display: block;
  color: var(--color-secondary);
  font-size: 16px;
  line-height: 1.375;
}

.voice__quote {
  margin: 0;
  font-size: var(--text-quote);
  line-height: 1.5;
  text-wrap: pretty;
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 900px) {
  .case__footer {
    flex-direction: column;
    gap: 24px;
  }

  .case__footer .button {
    margin-left: 0;
  }

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

  .media-grid--narrow-wide {
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: auto;
  }

  .media-grid--narrow-wide .media {
    aspect-ratio: var(--media-ratio);
    height: auto;
  }
}

@media (max-width: 600px) {
  .facts__list {
    gap: 14px;
  }

  .facts__row {
    flex-direction: column;
    gap: 2px;
  }

  .facts__label {
    flex-basis: auto;
    font-size: 15px;
  }

  .case {
    padding-block: 24px;
  }

  .button {
    padding: 14px 28px;
  }

  .study__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .study__facts > div:first-child,
  .study__facts > div:last-child {
    grid-column: auto;
  }

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

  .media-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    aspect-ratio: auto;
  }

  .media-grid .media {
    aspect-ratio: var(--media-ratio);
    height: auto;
  }

  .media-grid__tall {
    grid-column: auto;
    grid-row: auto;
  }

  .research__stats {
    flex-direction: column;
  }

  .research__stats span + span::before {
    content: none;
  }

  .research__list li + li {
    margin-top: 16px;
  }

  .stats {
    gap: 8px;
  }

  .stat {
    flex-basis: 100%;
    height: 140px;
    border-radius: var(--radius-cover);
  }

  /* На узком экране цифры не помещаются рядом с иконкой —
     иконка уходит под текст фоновым узором */
  .stat__icon {
    opacity: 0.35;
  }

  .stat__value,
  .stat__label {
    z-index: 1;
  }

  .voice {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  /* Сияние остаётся, но не двигается */
  .aurora__glow {
    animation: none;
  }
}