/* =================================================================
   style.css — стили специфичные для index.html (лендинг)
   Подключается ТОЛЬКО на главной странице, после common.css
   ================================================================= */


/* ========== INTRO OVERLAY ========== */

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease;
}

.intro-overlay--hidden {
  opacity: 0;
  pointer-events: none;
}

.intro-overlay__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ========== HERO ========== */

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-height-mobile));
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

/* --- Canvas-фон (IT-network анимация) --- */
#it-network-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #ffffff;
  overflow: hidden;
}

#it-network-bg {
  display: block;
  width: 100%;
  height: 100%;
}

#it-network-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 52% 58% at 50% 35%, rgba(248,248,248,0.88) 0%, rgba(248,248,248,0) 68%),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, rgba(248,248,248,0.65) 92%, #F8F8F8 100%);
}

/* --- Контент поверх фона --- */
.hero__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 40px;
  padding-top: 60px;
  padding-bottom: 80px;
}

.hero__title {
  font-family: var(--font-montserrat);
  font-size: clamp(36px, 3.33vw, 48px); /* Figma: heading/pc/h_hero = 48px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-black);
}


/* SVG heading */
.hero__title-svg {
  display: block;
  width: 100%;
  max-width: 549px;
  height: auto;
}
.hero__title-accent {
  color: var(--color-orange);
}

.hero__title-accent--blue {
  color: var(--color-blue);
}

/* Принудительный перенос строки в заголовке — только на широком экране */
.hero__title-break {
  display: none;
}

.hero__description {
  font-family: var(--font-pt-sans);
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-black);
  max-width: 776px;
  margin-top: -20px;
}


/* ========== HERO — TABLET (>= 768px) ========== */

@media (min-width: 768px) {
  .hero {
    min-height: calc(100vh - var(--header-height-tablet));
  }

  .hero__content {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}


/* ========== HERO — DESKTOP (>= 1440px) ========== */

@media (min-width: 1440px) {
  .hero {
    min-height: calc(100vh - var(--header-height-desktop));
  }

  .hero__content {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-inline: 0;
  }

  .hero__title-break {
    display: inline;
  }
}



/* ========== HERO SVG HEADING + CLIENTS — MOBILE (< 768px) ========== */
@media (max-width: 767px) {
  .hero__title-svg {
    max-width: 240px;
  }
  .hero .clients {
    margin-top: -65px;
  }
}

/* ========== CLIENTS ========== */

.clients {
  background-color: var(--color-white);
  overflow: hidden;
}

/* Внутри hero — прозрачный фон (canvas виден сквозь) */
.hero .clients {
  background-color: transparent;
  position: relative;
  z-index: 1;
  padding-bottom: 20px;
}

.clients__marquee {
  overflow: hidden;
}

.clients__track {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  width: max-content;
  animation: clients-scroll 50s linear infinite;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.3s;
}

.clients__track.is-ready {
  opacity: 1;
}

/* margin-right = gap between items (включая последний перед дубликатом) */
.clients__item {
  flex-shrink: 0;
  width: 90px;
  height: 70px;
  margin-right: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clients__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.clients__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.clients__logo:hover {
  filter: grayscale(0);
  opacity: 1;
}

@keyframes clients-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Пауза при hover */
.clients__marquee:hover .clients__track {
  animation-play-state: paused;
}

/* Доступность */
@media (prefers-reduced-motion: reduce) {
  .clients__track {
    animation: none;
  }
}

/* ── МОБИЛЬНАЯ ВЕРСИЯ (≤767px): логотипы клиентов крупнее ── */
@media (max-width: 767px) {
  .clients__item {
    width: 120px;
    height: 90px;
    margin-right: 30px;
  }
}


/* ========== CLIENTS — TABLET (>= 768px) ========== */

@media (min-width: 768px) {
  .clients__item {
    width: 130px;
    height: 90px;
    margin-right: 60px;
  }
}


/* ========== CLIENTS — DESKTOP (>= 1440px) ========== */

@media (min-width: 1440px) {
  .clients__item {
    width: 160px;
    height: 120px;
    margin-right: 80px;
  }
}


/* ========== SERVICES ========== */

.services {
  margin-top: 80px;
}

.services__title {
  font-family: var(--font-montserrat);
  font-size: clamp(28px, 4vw, var(--fs-h1));
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin-bottom: var(--section-inner-gap);
}

.services__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.services__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
  border-top: var(--border-gray-light);
  transition: border-color var(--transition-fast);
}

.services__item:last-child {
  border-bottom: var(--border-gray-light);
}

.services__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.services__description {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-black);
  margin: 0;
}

/* Secondary button (blue) inside services */
.services__btn {
  color: var(--color-blue);
  padding: 5px 0;
  gap: 15px;
}

.services__btn .btn__text {
  font-family: var(--font-golos);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}


/* ========== SERVICES — TABLET (>= 768px) ========== */

@media (min-width: 768px) {
  .services {
    margin-top: 80px;
  }

  .services__item {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
    padding: 30px 0;
  }

  /* Service label text is always dark; only the star icon uses the color */
  .services__item .starlline__label {
    color: var(--color-black);
  }

  .services__item:hover {
    border-top-color: var(--color-blue);
  }

  .services__item:hover .starlline--orange {
    color: var(--color-blue);
  }

  /* Keep label dark on hover — only icon and border change color */
  .services__item:hover .starlline__label {
    color: var(--color-black);
  }

  .services__content {
    flex: 1;
  }

  .services__description {
    font-size: var(--fs-text);
  }
}


/* ========== SERVICES — DESKTOP (>= 1440px) ========== */

@media (min-width: 1440px) {
  .services {
    margin-top: 80px;
  }

  /* Row layout: "Услуги" title left (~205px), list right (900px), gap 95px */
  .services > .container {
    max-width: 1440px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 95px;
  }

  .services__title {
    flex: 1;
    margin-bottom: 0;
  }

  .services__list {
    width: 900px;
    flex-shrink: 0;
  }

  .services__item {
    gap: 95px;
    padding: 30px;
  }

  /* Левая колонка: starlline фиксированной ширины */
  .services__item > .starlline {
    flex-shrink: 0;
    width: 255px;
  }
}


/* ========== SERVICES — hover interaction (desktop, pointer devices) ========== */

@media (hover: hover) and (min-width: 1024px) {
  .services__content {
    gap: 30px;
  }

  .services__item .btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium);
  }

  .services__item:hover .btn {
    opacity: 1;
    pointer-events: auto;
  }
}


/* ========== INDUSTRIES ========== */

.industries {
  margin-top: 80px;
}

.industries__title {
  font-family: var(--font-montserrat);
  font-size: clamp(28px, 4vw, var(--fs-h1));
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin-bottom: var(--section-inner-gap);
}

.industries__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.industries__chart-wrap {
  width: 100%;
}

.industries__chart {
  width: 100%;
  height: auto;
  display: block;
}

.industries__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.industries__item {
  display: flex;
  align-items: baseline;
  gap: 15px;
  padding-bottom: 15px;
  border-bottom: var(--border-blue);
}

.industries__num {
  font-family: var(--font-golos);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-subheading);
  color: var(--color-blue);
  flex-shrink: 0;
}

.industries__label {
  font-family: var(--font-golos);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-subheading);
  color: var(--color-black);
}


/* ========== INDUSTRIES — TABLET (>= 768px) ========== */

@media (min-width: 768px) {
  .industries {
    margin-top: 120px;
  }
}


/* ========== INDUSTRIES — DESKTOP (>= 1024px) ========== */

@media (min-width: 1024px) {
  .industries__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
  }

  .industries__chart-wrap {
    flex-shrink: 0;
    width: 480px;
  }

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


/* ========== INDUSTRIES — DETAIL: уменьшаем нижний отступ ========== */

#industries:has(.industries__details:not([hidden])) {
  margin-bottom: -100px;
}

/* ========== INDUSTRIES — WIDE (>= 1440px) ========== */

@media (min-width: 1440px) {
  .industries {
    margin-top: var(--section-gap);
  }

  .industries__inner {
    gap: 80px;
  }

  .industries__list {
    gap: 40px;
  }

  .industries__item {
    gap: 30px;
    padding-bottom: 20px;
  }

  .industries__chart-wrap {
    width: 520px;
  }

  .industries__num,
  .industries__label {
    font-size: var(--fs-h5);
  }
}


/* ========== INDUSTRIES — hover interaction (desktop only) ========== */

/* Оверлеи (активный оранжевый цвет граней) скрыты по умолчанию на ЛЮБОЙ
   ширине экрана — иначе на мобильном/планшете (где нет @media выше) у SVG-path
   нет заданной прозрачности и все бары показываются постоянно оранжевыми. */
.industries__chart .bar-overlay {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .industries__chart g[id^="bar-"] * {
    transition: fill 0.3s ease;
  }

  /* CSS не умеет плавно анимировать смену fill между двумя разными
     градиентами (грани) — и цветовая интерполяция fill между двумя
     сплошными цветами (верх) визуально «спешит» иначе, чем анимация
     opacity, даже с одинаковым transition-time. Решение: все 3 грани
     каждого бара (2 градиентные + верхняя) устроены одинаково —
     точная копия с активным оранжевым цветом лежит поверх исходной,
     скрытая opacity:0, и все три проявляются синхронно одним приёмом. */
  .industries__chart .bar-overlay {
    transition: opacity 0.3s ease;
  }

  .industries__chart-wrap.has-hover g.bar-active .bar-overlay {
    opacity: 1;
  }

  .industries__chart g[id^="bar-"] {
    cursor: pointer;
  }

  .industries__num {
    transition: color var(--transition-fast);
  }

  .industries__item.is-active .industries__num {
    color: var(--color-orange);
  }

  .industries__item {
    cursor: pointer;
    transition: border-color var(--transition-fast);
  }

  .industries__item.is-active {
    border-bottom-color: var(--color-orange);
  }
}


/* ========== INDUSTRIES — item button reset ========== */

.industries__item-btn {
  display: flex;
  align-items: center;
  gap: inherit;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

/* ========== INDUSTRIES — DETAIL VIEW ========== */

.industries__details {
  width: 100%;
}

.industries__panel-head {
  border-bottom: 1px solid var(--color-orange);
  padding: 0 20px 30px;
  margin-bottom: 60px;
}

.industries__back {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-blue);
}

.industries__back-arrow {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  transform: scaleX(-1);
  display: block;
}

.industries__back-label {
  font-family: var(--font-golos);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-subheading);
  color: var(--color-blue);
}

.industries__panel-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.industries__panel-left {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.industries__panel-text {
  font-family: var(--font-golos);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h5);
  line-height: var(--lh-body);
  color: var(--color-black);
  margin: 0;
}

.industries__panel-right {
  flex-shrink: 0;
}

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

@media (min-width: 1024px) {
  .industries__panel-body {
    flex-direction: row;
    gap: 60px;
    align-items: flex-start;
  }

  .industries__panel-left {
    flex: 1;
  }

  .industries__panel-right,
  .industries__panel-media {
    width: 570px;
  }
}

/* ── Industries panel media ─────────────────────────── */

.industries__panel-media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-bg, #F8F8F8);
  flex-shrink: 0;
}

.industries__panel-video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.industries__panel-picture {
  display: block;
}

.industries__panel-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.industries__panel-placeholder {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 40px;
  border: 2px dashed var(--color-gray, #C4C4C4);
  border-radius: var(--radius-card);
}

.industries__panel-placeholder-text {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-caption);
  color: var(--color-gray-text, var(--color-gray));
  text-align: center;
}

.industries__panel-media.no-media .industries__panel-video,
.industries__panel-media.no-media .industries__panel-picture {
  display: none;
}

.industries__panel-media.no-media .industries__panel-placeholder {
  display: flex;
}


/* ========== SOLUTIONS ========== */

.solutions {
  margin-top: 80px;
}

.solutions__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: var(--section-inner-gap);
}

.solutions__title {
  font-family: var(--font-montserrat);
  font-size: clamp(28px, 4vw, var(--fs-h1));
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-black);
}

/* Slide track */
.solutions__track {
  list-style: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.solutions__track.is-ready {
  opacity: 1;
}

.solutions__slide {
  display: none;
}

.solutions__slide--active {
  display: block;
}

.solutions__slide--active .solutions__card {
  animation: solutionsFadeIn 0.3s ease both;
}

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

@media (prefers-reduced-motion: reduce) {
  .solutions__slide--active .solutions__card {
    animation: none;
  }
}

/* Card */
.solutions__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0;
  border-top: 2px solid var(--color-gray);
}

/* Info (category + tags) */
.solutions__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Tags */
.solutions__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.solutions__tag {
  font-family: var(--font-golos);
  font-size: var(--fs-mini);
  font-weight: var(--fw-regular);
  line-height: var(--lh-caption);
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: 30px;
  padding: 8px 20px;
}

/* About (heading + description + button) */
.solutions__about {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.solutions__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.solutions__heading {
  font-family: var(--font-golos);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-subheading);
  color: var(--color-black);
  margin: 0;
}

.solutions__description {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-black);
  margin: 0;
}

/* Controls (prev / counter / next) */
.solutions__controls {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0 15px;
  border-top: 2px solid var(--color-gray);
}

.solutions__counter-text {
  display: inline-block; /* span был inline — min-width на нём браузер
    игнорирует, из-за чего блок цифр не резервировал ширину и "гулял"
    между стрелками вместо центрирования */
  font-family: var(--font-golos);
  font-size: var(--fs-h5);
  font-weight: var(--fw-regular);
  line-height: var(--lh-subheading);
  color: var(--color-gray);
  min-width: 56px;
  text-align: center;
  transition: color var(--transition-fast);
}

.solutions__controls:hover .solutions__counter-text {
  color: var(--color-blue);
}

.solutions__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.solutions__nav-btn img {
  filter: grayscale(1) brightness(0.65);
  transition: filter var(--transition-fast);
}

.solutions__controls:hover .solutions__nav-btn img {
  filter: none;
}

.solutions__nav-btn--prev img {
  transform: scaleX(-1);
}

/* Кнопки "Узнать больше" и "Все новости" — без растяжки, линия по ширине текста */
.solutions__card-btn,
.news__btn {
  align-self: flex-start;
  min-width: 0;
}

.news__btn {
  margin-top: 20px;
}

/* Линия (border-bottom) не меняется — gap зафиксирован */
.solutions__card-btn:hover,
.news__btn:hover {
  gap: 35px;
}

/* Стрелка приближается к тексту через transform, без изменения ширины кнопки */
.solutions__card-btn .btn__icon,
.news__btn .btn__icon {
  transition: transform 0.25s ease;
}
.solutions__card-btn:hover .btn__icon,
.news__btn:hover .btn__icon {
  transform: translateX(-15px);
}


/* "Все решения" — серая по умолч., синяя при ховере */
.solutions__all-btn .btn__icon {
  filter: grayscale(1) brightness(0.65);
  transition: filter var(--transition-fast);
}

.solutions__all-btn:hover {
  color: var(--color-blue);
  opacity: 1;
}

.solutions__all-btn:hover .btn__icon {
  filter: none;
  transform: none;
}


/* ========== SOLUTIONS — TABLET (>= 768px) ========== */

@media (min-width: 768px) {
  .solutions {
    margin-top: 120px;
  }

  .solutions__card {
    padding: 50px 0;
  }

  .solutions__description {
    font-size: var(--fs-text);
  }

  .solutions__tags {
    gap: 15px;
  }
}


/* ========== SOLUTIONS — WIDE (>= 1440px) ========== */

@media (min-width: 1440px) {
  .solutions {
    margin-top: var(--section-gap);
  }

  .solutions__card {
    flex-direction: row;
    gap: 80px;
    padding: 70px 0;
    min-height: 380px;
  }

  .solutions__info {
    flex-shrink: 0;
    width: 450px;
    gap: 30px;
    justify-content: flex-start;
  }

  .solutions__info .starlline__label {
    font-size: 20px;
  }

  .solutions__info .starlline__icon {
    width: 24px;
    height: 24px;
  }

  .solutions__heading {
    font-size: var(--fs-h2);
    line-height: 1.2;
  }

  .solutions__about {
    flex: 1;
    justify-content: flex-start;
    gap: 40px;
  }

  .solutions__tag {
    padding: 10px 25px;
  }

  .solutions__counter {
    justify-content: flex-end;
  }

  .solutions__counter-num {
    font-size: var(--fs-h5);
  }

  /* Переключатель 1/7 — справа, линия на всю ширину */
  .solutions__controls {
    justify-content: flex-end;
  }
}


/* ========== VALUES ========== */

.values {
  margin-top: 80px;
}

.values__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.values__left {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.values__title {
  font-family: var(--font-montserrat);
  font-size: clamp(22px, 3.5vw, var(--fs-h2));
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin: 0;
}

/* Cards: 2×2 flex grid */
.values__cards {
  display: flex;
  flex-wrap: wrap;
}

.values__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 15px;
  padding: 20px;
  width: 50%;
  min-height: 180px;
  border-bottom: var(--border-gray-light);
}

/* Odd cards (1, 3) get a right border — creates the column divider */
.values__card:nth-child(odd) {
  border-right: var(--border-gray-light);
}

.values__num {
  display: block;
  font-family: var(--font-pt-sans);
  font-size: 40px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--color-blue);
}

.values__heading {
  font-family: var(--font-golos);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-subheading);
  color: var(--color-black);
  margin: 0;
}

.values__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.values__text {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-gray);
  margin: 0;
}


/* ========== VALUES — TABLET (>= 768px) ========== */

@media (min-width: 768px) {
  .values {
    margin-top: 120px;
  }

  .values__card {
    padding: 25px 30px;
    min-height: 220px;
  }

  .values__num {
    font-size: 52px;
  }

  .values__heading {
    font-size: 20px;
  }
}


/* ========== VALUES — WIDE (>= 1440px) ========== */

@media (min-width: 1440px) {
  .values {
    margin-top: var(--section-gap);
  }

  .values__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }

  .values__left {
    width: 425px;
    flex-shrink: 0;
  }

  .values__cards {
    width: 680px;
    flex-shrink: 0;
  }

  .values__card {
    width: 340px;
    height: 276px;
    min-height: unset;
    padding: 30px;
  }

  .values__num {
    font-size: var(--fs-h-accent); /* 64px */
  }

  .values__heading {
    font-size: var(--fs-h5); /* 24px */
  }
}


/* ========== VALUES — hover interaction (desktop, pointer devices) ========== */

@media (hover: hover) and (min-width: 1024px) {
  /* Расположение — как в исходном дизайне: число вверху, заголовок с текстом
     внизу (space-between), при ховере поднимаются к числу (flex-start).
     justify-content нельзя анимировать через CSS — плавность подъёма
     добавлена в JS (см. common.js, FLIP-анимация для .values__body).
     Схлопывание текста — через max-height с ТОЧНЫМ значением, замеренным
     JS через scrollHeight (--reveal-h, см. common.js): в отличие от
     произвольного "с запасом" числа, точное значение анимируется браузером
     без искажения скорости, без резкой обрезки текста. */
  .values__card {
    justify-content: space-between !important;
    gap: 0;
    cursor: default;
  }

  .values__num {
    display: block;
    transition: font-size 0.3s ease;
  }

  .values__text {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    min-height: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }

  .values__card:hover {
    justify-content: flex-start;
    gap: 20px;
  }

  .values__card:hover .values__num {
    font-size: var(--fs-h5);
  }

  .values__card:hover .values__heading {
    font-weight: var(--fw-medium);
  }

  .values__card:hover .values__text {
    max-height: var(--reveal-h, 150px);
    opacity: 1;
  }
}


/* ========== NEWS ========== */

.news {
  margin-top: 80px;
}

.news__title {
  font-family: var(--font-montserrat);
  font-size: clamp(28px, 4vw, var(--fs-h1));
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin: 0 0 var(--section-inner-gap);
}

.news__content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.news__content.is-ready {
  opacity: 1;
}

.news__aside {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.news__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}


/* ========== NEWS — TABLET (>= 768px) ========== */

@media (min-width: 768px) {
  .news {
    margin-top: 120px;
  }
}


/* ========== NEWS — DESKTOP (>= 1024px) ========== */

@media (min-width: 1024px) {
  .news__content {
    flex-direction: row;
    align-items: stretch;
    gap: 30px;
  }

  .newscard--card {
    flex-shrink: 0;
    width: 490px;
  }

  .news__aside {
    flex: 1;
    justify-content: space-between;
    gap: 0;
  }

  /* Убираем gap, заменяем на padding-top чтобы border-left был непрерывным */
  .news__list {
    gap: 0;
  }

  .news__list .newscard--line + .newscard--line {
    padding-top: 30px;
  }
}


/* ========== NEWS — WIDE (>= 1440px) ========== */

@media (min-width: 1440px) {
  .news {
    margin-top: var(--section-gap);
  }
}


/* ========== CALLBACK ========== */

.callback {
  margin-top: 80px;
  padding-bottom: 60px;
}

.callback__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.callback__title {
  font-family: var(--font-montserrat);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin: 0;
  line-height: var(--lh-heading);
}

.callback__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.callback__footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-top: 30px;
}

.callback__success {
  font-family: var(--font-golos);
  font-size: var(--fs-h5);
  color: var(--color-orange);
  display: none;
  padding: 20px 0;
}

.callback__success--visible {
  display: block;
}

/* ── tablet ── */
@media (min-width: 768px) {
  .callback {
    margin-top: 120px;
    padding-bottom: 80px;
  }
}

/* ── desktop ── */
@media (min-width: 1024px) {
  .callback__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
  }

  .callback__title {
    flex: 1;
  }

  .callback__form {
    width: 490px;
    flex-shrink: 0;
  }
}

/* ── wide ── */
@media (min-width: 1440px) {
  .callback {
    margin-top: var(--section-gap);
    padding-bottom: 120px;
  }

  .callback__form {
    width: 680px;
  }
}


/* ========== SOLUTIONS SLIDER — MEDIA BLOCK ========== */

.solutions__media {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.solutions__media-video,
.solutions__media-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (min-width: 1440px) {
  .solutions__media {
    width: 340px;
    height: 240px;
  }

  .solutions__media-video,
  .solutions__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (≤767px) — иерархия заголовков/текста из Figma
   Только мобилка; десктоп/планшет (≥768px) не затрагиваются.
   ============================================================ */
@media (max-width: 767px) {
  /* body-текст: 18 → 16 (Figma text/mob) */
  :root {
    --fs-text: 16px;
  }

  /* h_hero / h1 → мобайл: уменьшаем бренд-заголовок */
  .hero__title {
    font-size: 32px;
  }

  /* hero CTA — на всю ширину контента (Figma mob: 265px / 290px) */
  .hero .btn--primary {
    width: 100%;
    justify-content: space-between;
    margin-top: 24px;
  }

  /* h2 — заголовки секций → 24px (мобайл, увеличено по треккеру стр.164).
     Прямое значение, т.к. clamp(28px,…) не даёт опуститься ниже 28. */
  .services__title,
  .industries__title,
  .solutions__title,
  .values__title,
  .news__title,
  .callback__title {
    font-size: 24px;
  }

  /* стр.166/190/192: единообразие внутренних отступов секций (50px → 20px) */
  .services__title,
  .industries__title,
  .solutions__top,
  .news__title {
    margin-bottom: 20px;
  }

  /* стр.173: уменьшить отступы внутри панели Индустрии */
  /* стр.367: padding-left:0 → кнопка ← совпадает с началом оранжевой линии;
              padding-bottom:12px → заголовок ближе к линии подчёркивания */
  .industries__panel-head {
    margin-bottom: 20px;
    padding-left: 0;
    padding-bottom: 12px;
  }
  .industries__panel-body {
    gap: 20px;
  }
  .industries__panel-left {
    gap: 20px;
  }

  /* h4 → 16px (Figma mob/h4): заголовок индустрии в панели */
  .industries__back-label {
    font-size: 16px;
  }

  /* body-текст панели индустрии → 16px (= --fs-text на мобайле) */
  .industries__panel-text {
    font-size: 16px;
  }
}

/* ── МОБ (≤767px): блок «Решения» на главной ── */
@media (max-width: 767px) {
  /* стр.187: увеличить отступ между «Индустрии» и «Решения» */
  .solutions {
    margin-top: 120px;
  }

  /* стр.193: «Все решения» — под заголовок, пагинация по правому краю */
  .solutions__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .solutions__controls {
    align-self: flex-end;
  }

  /* убрать линии сверху и снизу блока */
  .solutions__card,
  .solutions__controls {
    border-top: none;
  }

  /* стр.369: уменьшить верхний отступ карточки (40px→20px), как gap внутри info */
  .solutions__card {
    padding-top: 20px;
  }

  /* скрыть чёрные теги */
  .solutions__tags {
    display: none;
  }

  /* кнопка «Узнать больше» — на всю ширину экрана */
  .solutions__card-btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* ── МОБ (≤767px): «Наши ценности» — горизонтальный скролл-ряд ── */
@media (max-width: 767px) {
  .values__cards {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: stretch;            /* все карточки одной высоты = по самой длинной */
  }
  .values__cards::-webkit-scrollbar {
    display: none;
  }

  .values__card,
  .values__card:nth-child(odd) {
    flex: 0 0 80%;                   /* одна карточка видна, следующая выглядывает справа */
    width: auto;
    min-height: 0;
    scroll-snap-align: start;
    border-bottom: none;
    border-right: var(--border-gray-light);   /* вертикальный разделитель между карточками */
  }
  .values__card:last-child {
    border-right: none;
  }

  /* стр.204/345/347: фиксированный одинаковый gap цифра→заголовок;
                    padding карточки чтобы текст не прилипал к border */
  .values__card {
    gap: 8px;
    padding: 16px;
  }
  .values__num {
    margin-bottom: 0;
  }
}

/* ── МОБ (≤767px): «Новости» на главной ── */
@media (max-width: 767px) {
  /* не выводить фото в новостях (только на главной) */
  .news .newscard__pic {
    display: none;
  }

  /* кнопка «Все новости» — на всю ширину экрана */
  .news__btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* ── МОБ (≤767px): форма обратной связи на главной ── */
@media (max-width: 767px) {
  .callback__footer {
    flex-direction: column;
    align-items: stretch;
  }
  /* кнопка «Оставить заявку» — на всю ширину экрана */
  .callback__footer .btn--primary {
    width: 100%;
    justify-content: space-between;
  }
}

/* ── Буллиты и списки внутри статьи новости ── */
.news-article__block ul,
.news-article__block ol {
  padding-left: 24px;
  margin: 8px 0;
}
.news-article__block ul { list-style: disc; }
.news-article__block ol { list-style: decimal; }
.news-article__block li { margin-bottom: 4px; }