/* Перший екран: дві колонки на десктопі (текст ліворуч, плитки можливостей праворуч), 3D-нахил плиток не виходить за край */
.hero {
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ds-space-13);
  }
}

/* Плитки можливостей платформи в першому екрані (з легким 3D-нахилом, що вирівнюється при наведенні) */
.hero-features {
  display: grid;
  gap: var(--ds-space-7);
  padding: var(--ds-space-3);
}

.hero-features__item {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-8);
  border: var(--ds-border-width) solid transparent;
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-surface);
  transform: perspective(1100px) rotateX(7deg) rotateY(-9deg);
  transform-origin: 100% 100%;
  backface-visibility: hidden;
  transition: transform var(--ds-duration-slow) var(--ds-ease-standard),
    border-color var(--ds-duration-normal) var(--ds-ease-standard),
    background-color var(--ds-duration-normal) var(--ds-ease-standard);
}

.hero-features__item:hover {
  border-color: var(--ds-border);
  background-color: var(--ds-bg);
  transform: perspective(1100px) rotateX(3deg) rotateY(-4deg);
}

.hero-features__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--ds-space-8);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-color-gray-100);
  color: var(--ds-text-muted);
  transition: background-color var(--ds-duration-normal) var(--ds-ease-standard),
    color var(--ds-duration-normal) var(--ds-ease-standard);
}

.hero-features__icon svg {
  width: 32px;
  height: 32px;
}

.hero-features__item:hover .hero-features__icon {
  background-color: var(--ds-border);
  color: var(--ds-text);
}

.hero-features__label {
  font-size: var(--ds-text-overline-size);
  font-weight: var(--ds-text-overline-weight);
  line-height: var(--ds-text-overline-line);
  letter-spacing: var(--ds-text-overline-tracking);
  text-transform: uppercase;
  color: var(--ds-primary);
}

@media (min-width: 576px) {
  .hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .hero-features__item {
    padding: var(--ds-space-9);
  }
}

/* Виклики: шапка з цитатою, вкладки-проблеми (radio всередині вкладки + :has) з панелями і підсумок із кнопкою */
.challenges__top {
  display: grid;
  gap: var(--ds-space-11);
  align-items: end;
  margin-bottom: var(--section-head-space);
}

.challenges__head {
  margin-bottom: 0;
}

.challenges__quote {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
  padding-left: var(--ds-space-8);
  border-left: var(--ds-border-width) solid var(--ds-primary);
}

.challenges__quote-text {
  font-family: var(--ds-font-heading);
  font-size: var(--ds-text-h3-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: var(--ds-text-h3-line);
  letter-spacing: var(--ds-text-h3-tracking);
  color: var(--ds-heading);
}

.challenges__tab-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--ds-gutter);
  padding-bottom: var(--ds-space-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.challenges__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ds-space-6);
  padding: var(--ds-space-6) var(--ds-space-6) var(--ds-space-6) var(--ds-space-8);
  overflow: hidden;
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color var(--ds-duration-normal) var(--ds-ease-standard),
    border-color var(--ds-duration-normal) var(--ds-ease-standard);
}

.challenges__tab::after {
  content: "";
  position: absolute;
  right: var(--ds-space-8);
  bottom: 0;
  left: var(--ds-space-8);
  height: 2px;
  background-color: var(--ds-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ds-duration-slow) var(--ds-ease-standard);
}

.challenges__tab:hover {
  border-color: var(--ds-border-strong);
}

.challenges__tab:has(.challenges__input:checked) {
  border-color: transparent;
  background-color: var(--ds-surface);
}

.challenges__tab:has(.challenges__input:checked)::after {
  transform: scaleX(1);
}

.challenges__tab:has(.challenges__input:focus-visible) {
  outline: 2px solid var(--ds-primary);
  outline-offset: 3px;
}

.challenges__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.challenges__tab-num {
  font-family: var(--ds-font-heading);
  font-size: var(--ds-text-h3-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: 1;
  letter-spacing: var(--ds-text-h3-tracking);
  color: var(--ds-text-muted);
  transition: color var(--ds-duration-normal) var(--ds-ease-standard);
}

.challenges__tab:has(.challenges__input:checked) .challenges__tab-num {
  color: var(--ds-primary);
}

.challenges__tab-label {
  flex: 1 1 auto;
  font-size: var(--ds-text-label-size);
  font-weight: var(--ds-text-label-weight);
  line-height: var(--ds-text-label-line);
  color: var(--ds-text);
}

.challenges__tab:has(.challenges__input:checked) .challenges__tab-label {
  color: var(--ds-heading);
}

.challenges__tab-icon {
  color: var(--ds-text-muted);
  transition: background-color var(--ds-duration-normal) var(--ds-ease-standard);
}

.challenges__tab:has(.challenges__input:checked) .challenges__tab-icon {
  background-color: var(--ds-bg);
}

.challenges__panel {
  display: none;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-10);
  align-items: center;
  margin-top: var(--ds-gutter);
  padding: var(--ds-space-9) var(--ds-space-8);
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-surface);
}

.challenges:has(.challenges__input--1:checked) .challenges__panel--1,
.challenges:has(.challenges__input--2:checked) .challenges__panel--2,
.challenges:has(.challenges__input--3:checked) .challenges__panel--3 {
  display: grid;
}

.challenges__panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
  max-width: 34rem;
}

.challenges__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-space-3);
}

.challenges__panel-num {
  font-family: var(--ds-font-heading);
  font-size: var(--h2-size);
  font-weight: var(--ds-text-h1-weight);
  line-height: 1;
  letter-spacing: var(--ds-text-h1-tracking);
  color: var(--ds-primary);
}

.challenges__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.challenges__question {
  font-style: italic;
  color: var(--ds-heading);
}

.challenges__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-6);
  margin-top: var(--ds-space-9);
  padding-top: var(--ds-space-9);
  border-top: var(--ds-border-width) solid var(--ds-border);
}

.challenges__foot-text {
  max-width: 60ch;
}

@media (min-width: 800px) {
  .challenges__top {
    grid-template-columns: 7fr 5fr;
    gap: var(--ds-space-13);
  }

  .challenges__tab-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 0;
    overflow: visible;
  }

  .challenges__panel {
    grid-template-columns: 6fr 5fr;
    gap: var(--ds-space-13);
    padding: var(--ds-space-10) var(--ds-space-11);
  }
}

/* Ілюстрації до викликів у панелях: пошук серед версій файлів, форма з помилкою, дві редакції бланку */
.challenge-mock {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  min-width: 0;
  padding: var(--ds-space-8);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-bg);
}

.challenge-mock__bar {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-3) var(--ds-space-5);
  border: var(--ds-border-width) solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-muted);
}

.challenge-mock__query {
  color: var(--ds-heading);
}

.challenge-mock__count {
  margin-left: auto;
  white-space: nowrap;
}

.challenge-mock__list {
  display: flex;
  flex-direction: column;
}

.challenge-mock__file {
  display: flex;
  align-items: center;
  gap: var(--ds-space-5);
  padding: var(--ds-space-5) 0;
  border-top: var(--ds-border-width) solid var(--ds-border);
  color: var(--ds-text-muted);
}

.challenge-mock__file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-heading);
}

.challenge-mock__file-date {
  flex: none;
}

.challenge-mock__note {
  font-weight: var(--ds-text-label-weight);
  color: var(--ds-primary);
}

.challenge-mock__progress {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding-bottom: var(--ds-space-3);
}

.challenge-mock__progress-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ds-space-3);
}

.challenge-mock__progress-label {
  font-weight: var(--ds-text-label-weight);
  color: var(--ds-heading);
}

.challenge-mock__progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-border);
}

.challenge-mock__progress-fill {
  display: block;
  width: 26%;
  height: 100%;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-primary);
}

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

.challenge-mock__field-box {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--ds-space-5);
  border: var(--ds-border-width) solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  color: var(--ds-heading);
}

.challenge-mock__field-box--empty {
  border-style: dashed;
  background-color: var(--ds-surface);
}

.challenge-mock__field-box--error {
  border-color: var(--ds-danger);
  background-color: color-mix(in oklab, var(--ds-danger) 6%, transparent);
}

.challenge-mock__field-error {
  color: var(--ds-primary-700);
}

.challenge-mock__versions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-5);
}

.challenge-mock__version {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-6);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-surface);
}

.challenge-mock__version-badge {
  position: absolute;
  top: var(--ds-space-4);
  right: var(--ds-space-4);
}

.challenge-mock__version-title {
  padding-right: var(--ds-space-9);
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-text-label-weight);
  line-height: var(--ds-text-body-sm-line);
  color: var(--ds-heading);
}

.challenge-mock__version-meta {
  margin-bottom: var(--ds-space-3);
}

.challenge-mock__line {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-border);
}

.challenge-mock__line--mid {
  width: 78%;
}

.challenge-mock__line--short {
  width: 55%;
}

.challenge-mock__stat {
  display: flex;
  align-items: center;
  gap: var(--ds-space-6);
  padding-top: var(--ds-space-6);
  border-top: var(--ds-border-width) solid var(--ds-border);
}

.challenge-mock__stat-num {
  font-family: var(--ds-font-heading);
  font-size: var(--ds-text-h2-size);
  font-weight: var(--ds-text-h2-weight);
  line-height: 1;
  letter-spacing: var(--ds-text-h2-tracking);
  color: var(--ds-primary);
}

.challenge-mock__stat-text {
  max-width: 32ch;
  color: var(--ds-text);
}

/* Як це працює: два показники, чотири кроки шляху заяви з лінією-таймлайном і кнопки */
.how-it-works__lead {
  color: var(--ds-heading);
}

.how-it-works__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-gutter);
  max-width: 56rem;
  margin-inline: auto;
}

.how-it-works__stat {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-8);
  transition: border-color var(--ds-duration-normal) var(--ds-ease-standard);
}

.how-it-works__stat:hover {
  border-color: color-mix(in oklab, var(--ds-primary) 45%, transparent);
}

.how-it-works__stat-value {
  font-family: var(--ds-font-heading);
  font-size: var(--h2-size);
  font-weight: var(--ds-text-h1-weight);
  line-height: 1;
  letter-spacing: var(--ds-text-h1-tracking);
  white-space: nowrap;
  color: var(--ds-primary);
}

.how-it-works__stat-body {
  display: flex;
  flex: 1 1 10rem;
  flex-direction: column;
  gap: var(--ds-space-2);
  min-width: 0;
  padding-left: var(--ds-space-8);
  border-left: var(--ds-border-width) solid var(--ds-border-strong);
  color: var(--ds-heading);
}

.how-it-works__stat-label {
  font-size: var(--ds-text-overline-size);
  font-weight: var(--ds-text-overline-weight);
  line-height: var(--ds-text-overline-line);
  letter-spacing: var(--ds-text-overline-tracking);
  text-transform: uppercase;
}

.how-it-works__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-11) var(--ds-gutter);
  margin-top: var(--ds-space-13);
}

.how-it-works__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.how-it-works__step-icon {
  display: inline-flex;
  color: var(--ds-text-muted);
  transition: color var(--ds-duration-normal) var(--ds-ease-standard);
}

.how-it-works__step:hover .how-it-works__step-icon {
  color: var(--ds-heading);
}

.how-it-works__step-marker {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  height: var(--ds-space-11);
  margin-top: var(--ds-space-6);
}

.how-it-works__step-marker::before,
.how-it-works__step-marker::after {
  content: "";
  position: absolute;
  top: 50%;
  display: none;
  height: 1px;
  background-color: var(--ds-border);
}

.how-it-works__step-marker::before {
  right: calc(50% + var(--ds-space-9));
  left: 0;
}

.how-it-works__step-marker::after {
  right: 0;
  left: calc(50% + var(--ds-space-9));
}

.how-it-works__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-11);
  height: var(--ds-space-11);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-heading);
  color: var(--ds-bg);
  font-size: var(--ds-text-label-size);
  font-weight: var(--ds-text-label-weight);
  line-height: 1;
}

.how-it-works__step-title {
  margin-top: var(--ds-space-8);
}

.how-it-works__step-text {
  max-width: 28ch;
  margin-top: var(--ds-space-3);
}

.how-it-works__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-6);
  margin-top: var(--ds-space-13);
}

@media (min-width: 800px) {
  .how-it-works__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-it-works__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .how-it-works__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
  }

  .how-it-works__step {
    padding: 0 var(--ds-space-6);
  }

  .how-it-works__step-marker {
    margin-inline: calc(-1 * var(--ds-space-6));
  }

  .how-it-works__step-marker::before,
  .how-it-works__step-marker::after {
    display: block;
  }

  .how-it-works__step:first-child .how-it-works__step-marker::before,
  .how-it-works__step:last-child .how-it-works__step-marker::after {
    display: none;
  }
}

/* Адмін-панель: три картки можливостей (іконка, номер, назва, опис) і кнопка демо */
.admin-panel__features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-6);
}

.admin-panel__feature {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon num"
    "title title"
    "text text";
  align-items: center;
  gap: var(--ds-space-5);
  padding: var(--ds-space-9);
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-surface);
  transition: background-color var(--ds-duration-normal) var(--ds-ease-standard);
}

.admin-panel__feature:hover {
  background-color: var(--ds-neutral-100);
}

.admin-panel__icon {
  grid-area: icon;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-neutral-200);
  color: var(--ds-neutral-600);
  transition: transform var(--ds-duration-normal) var(--ds-ease-standard);
}

.admin-panel__icon svg {
  width: 22px;
  height: 22px;
}

.admin-panel__feature:hover .admin-panel__icon {
  transform: translateY(-2px);
}

.admin-panel__num {
  grid-area: num;
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

.admin-panel__feature-title {
  grid-area: title;
  margin-top: var(--ds-space-6);
}

.admin-panel__feature-text {
  grid-area: text;
  max-width: 34ch;
}

.admin-panel__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--ds-space-11);
}

@media (min-width: 800px) {
  .admin-panel__features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-space-8);
  }

  .admin-panel__actions {
    margin-top: var(--ds-space-13);
  }
}

/* Сфери застосування: слайдер галузей на radio + :has() — лічильник, стрілки, стрічка карток, вкладки, прогрес */
.industries__radio {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.industries__aside {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--ds-space-8);
}

.industries__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-8);
  padding-top: var(--ds-space-6);
  border-top: var(--ds-border-width) solid var(--ds-border);
}

.industries__counter {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ds-space-3);
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-muted);
}

.industries__counter-current {
  display: none;
  font-family: var(--ds-font-heading);
  font-size: var(--ds-text-h3-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: var(--ds-text-h3-line);
  letter-spacing: var(--ds-text-h3-tracking);
  color: var(--ds-heading);
}

.industries:has(.industries__radio--1:checked) .industries__counter-current--1,
.industries:has(.industries__radio--2:checked) .industries__counter-current--2,
.industries:has(.industries__radio--3:checked) .industries__counter-current--3 {
  display: inline;
}

.industries__arrows {
  display: flex;
  gap: var(--ds-space-3);
}

.industries__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-12);
  height: var(--ds-space-12);
  border: var(--ds-border-width) solid var(--ds-border-strong);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-bg);
  color: var(--ds-heading);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease-standard),
    color var(--ds-duration-fast) var(--ds-ease-standard),
    border-color var(--ds-duration-fast) var(--ds-ease-standard);
}

.industries__arrow svg {
  width: 20px;
  height: 20px;
  transition: transform var(--ds-duration-normal) var(--ds-ease-standard);
}

.industries__arrow--prev:hover,
.industries__arrow--next:hover {
  border-color: var(--ds-primary);
  background-color: var(--ds-primary);
  color: var(--ds-on-primary);
}

.industries__arrow--prev:hover svg {
  transform: translateX(-2px);
}

.industries__arrow--next:hover svg {
  transform: translateX(2px);
}

.industries__arrow--disabled {
  border-color: var(--ds-border);
  color: var(--ds-border-strong);
  cursor: not-allowed;
}

.industries:has(.industries__radio--1:checked) .industries__arrow--slide-1,
.industries:has(.industries__radio--2:checked) .industries__arrow--slide-2,
.industries:has(.industries__radio--3:checked) .industries__arrow--slide-3 {
  display: inline-flex;
}

.industries__slider {
  --industries-card-width: 86cqi;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

.industries__track {
  --industries-shift: 0px;
  display: flex;
  gap: var(--ds-gutter);
  transform: translateX(calc(-1 * var(--industries-shift)));
  transition: transform var(--ds-duration-slow) var(--ds-ease-standard);
}

.industries:has(.industries__radio--2:checked) .industries__track {
  --industries-shift: min(calc(var(--industries-card-width) + var(--ds-gutter)), calc(3 * var(--industries-card-width) + 2 * var(--ds-gutter) - 100cqi));
}

.industries:has(.industries__radio--3:checked) .industries__track {
  --industries-shift: calc(3 * var(--industries-card-width) + 2 * var(--ds-gutter) - 100cqi);
}

.industries__card {
  display: flex;
  flex: 0 0 var(--industries-card-width);
  flex-direction: column;
  gap: var(--ds-space-8);
  min-width: 0;
  padding: var(--ds-space-8);
  border: var(--ds-border-width) solid transparent;
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-surface);
  transition: border-color var(--ds-duration-normal) var(--ds-ease-standard);
}

.industries__card:hover {
  border-color: var(--ds-border);
}

.industries__card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-border);
}

.industries__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ds-radius-xl);
  transition: transform var(--ds-duration-slow) var(--ds-ease-standard);
}

.industries__card:hover .industries__card-img {
  transform: scale(1.03);
}

.industries__card-index {
  position: absolute;
  top: var(--ds-space-5);
  left: var(--ds-space-5);
  padding: var(--ds-space-1) var(--ds-space-4);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-bg);
  font-weight: var(--ds-text-label-weight);
  color: var(--ds-heading);
}

.industries__card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ds-space-8);
}

.industries__card-heading {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
}

.industries__card-label {
  font-size: var(--ds-text-overline-size);
  font-weight: var(--ds-text-overline-weight);
  line-height: var(--ds-text-overline-line);
  letter-spacing: var(--ds-text-overline-tracking);
  text-transform: uppercase;
  color: var(--ds-primary);
}

.industries__card-text {
  max-width: 36ch;
}

.industries__list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  margin-top: auto;
  padding-top: var(--ds-space-8);
  border-top: var(--ds-border-width) solid var(--ds-border);
}

.industries__list-item {
  position: relative;
  padding-left: var(--ds-space-8);
  color: var(--ds-text);
}

.industries__list-item::before {
  content: "—";
  position: absolute;
  top: 0;
  left: 0;
  font-weight: var(--ds-text-label-weight);
  color: var(--ds-primary);
}

.industries__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-6) var(--ds-space-9);
  margin-top: var(--ds-space-9);
}

.industries__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
}

.industries__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  min-height: 44px;
  padding: var(--ds-space-3) var(--ds-space-6);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-bg);
  color: var(--ds-text);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease-standard),
    color var(--ds-duration-fast) var(--ds-ease-standard),
    border-color var(--ds-duration-fast) var(--ds-ease-standard);
}

.industries__tab:hover {
  border-color: var(--ds-border-strong);
  color: var(--ds-heading);
}

.industries__tab-num {
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-variant-numeric: tabular-nums;
  color: var(--ds-primary);
}

.industries:has(.industries__radio--1:checked) .industries__tab--1,
.industries:has(.industries__radio--2:checked) .industries__tab--2,
.industries:has(.industries__radio--3:checked) .industries__tab--3 {
  border-color: var(--ds-heading);
  background-color: var(--ds-heading);
  color: var(--ds-bg);
}

.industries:has(.industries__radio--1:checked) .industries__tab--1 .industries__tab-num,
.industries:has(.industries__radio--2:checked) .industries__tab--2 .industries__tab-num,
.industries:has(.industries__radio--3:checked) .industries__tab--3 .industries__tab-num {
  color: var(--ds-primary-400);
}

.industries:has(.industries__radio--1:focus-visible) .industries__tab--1,
.industries:has(.industries__radio--2:focus-visible) .industries__tab--2,
.industries:has(.industries__radio--3:focus-visible) .industries__tab--3 {
  outline: 2px solid var(--ds-primary);
  outline-offset: 3px;
}

.industries__progress {
  position: relative;
  flex: 1 1 160px;
  height: 2px;
  overflow: hidden;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-border);
}

.industries__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 33.333%;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-primary);
  transition: width var(--ds-duration-slow) var(--ds-ease-standard);
}

.industries:has(.industries__radio--2:checked) .industries__progress-bar {
  width: 66.666%;
}

.industries:has(.industries__radio--3:checked) .industries__progress-bar {
  width: 100%;
}

@media (min-width: 800px) {
  .industries__slider {
    --industries-card-width: 58cqi;
  }

  .industries__card {
    padding: var(--ds-space-9);
  }
}

@media (min-width: 1024px) {
  .industries__slider {
    --industries-card-width: 46cqi;
  }

  .industries:has(.industries__radio--2:checked) .industries__track {
    --industries-shift: calc((3 * var(--industries-card-width) + 2 * var(--ds-gutter) - 100cqi) / 2);
  }

  .industries__card-media {
    aspect-ratio: 16 / 10;
  }
}

/* Безпека (темна секція): перелік гарантій з іконками ліворуч, картка термінів і обсягу поставки праворуч */
.security__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-11);
  align-items: start;
}

.security__intro {
  min-width: 0;
}

.security__list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
}

.security__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-7);
}

.security__icon {
  width: var(--ds-space-12);
  height: var(--ds-space-12);
  border: var(--ds-border-width) solid var(--ds-color-gray-800);
  color: var(--ds-color-gray-400);
  transition: border-color var(--ds-duration-normal) var(--ds-ease-standard),
    color var(--ds-duration-normal) var(--ds-ease-standard);
}

.security__item:hover .security__icon {
  border-color: color-mix(in oklab, var(--ds-primary) 45%, transparent);
  color: var(--ds-color-gray-100);
}

.security__icon-accent {
  stroke: var(--ds-primary);
}

.security__item-text {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  max-width: 48ch;
  padding-top: var(--ds-space-1);
}

.security__card {
  gap: var(--ds-space-8);
  border-top: calc(var(--ds-border-width) * 2) solid var(--ds-primary);
}

.security__card-label {
  font-size: var(--ds-text-overline-size);
  font-weight: var(--ds-text-overline-weight);
  line-height: var(--ds-text-overline-line);
  letter-spacing: var(--ds-text-overline-tracking);
  text-transform: uppercase;
  color: var(--ds-primary);
}

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

.security__metric {
  font-family: var(--ds-font-heading);
  font-size: var(--h2-size);
  font-weight: var(--ds-text-h1-weight);
  line-height: var(--ds-text-h1-line);
  letter-spacing: var(--ds-text-h1-tracking);
  color: var(--ds-primary);
}

@media (min-width: 800px) {
  .security__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--ds-space-13);
  }
}

@media (min-width: 1024px) {
  .security__card {
    padding: var(--ds-space-10);
  }
}

/* Про компанію: вступ із великими цифрами й карткою IT Artel Group, чотири переваги в сітці з розділювачами */
.about-company__grid {
  display: grid;
  gap: var(--ds-space-13);
}

.about-company__intro {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.about-company__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-10) var(--ds-space-13);
  padding-top: var(--ds-space-9);
  border-top: var(--ds-border-width) solid var(--ds-border);
}

.about-company__stat {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
}

.about-company__num {
  font-family: var(--ds-font-heading);
  font-size: calc(var(--h1-size) * 1.45);
  font-weight: var(--ds-text-h1-weight);
  line-height: var(--ds-text-display-line);
  letter-spacing: var(--ds-text-display-tracking);
  color: var(--ds-heading);
}

.about-company__card {
  position: relative;
  align-items: flex-start;
  margin-top: var(--ds-space-9);
  overflow: hidden;
}

.about-company__sparkle {
  position: absolute;
  right: -28px;
  bottom: -44px;
  width: 170px;
  height: 170px;
  color: color-mix(in oklab, var(--ds-primary) 16%, transparent);
  pointer-events: none;
}

.about-company__badge {
  position: relative;
  background-color: var(--ds-primary-600);
  color: var(--ds-on-primary);
}

.about-company__card-text {
  position: relative;
  max-width: 42ch;
}

.about-company__benefits {
  display: grid;
  align-self: start;
  border-top: var(--ds-border-width) solid var(--ds-border);
}

.about-company__benefit {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  padding: var(--ds-space-10) 0;
  border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.about-company__index {
  font-size: var(--ds-text-overline-size);
  font-weight: var(--ds-text-overline-weight);
  line-height: var(--ds-text-overline-line);
  letter-spacing: var(--ds-text-overline-tracking);
  text-transform: uppercase;
  color: var(--ds-primary-600);
}

.about-company__benefit-title {
  transition: color var(--ds-duration-normal) var(--ds-ease-standard);
}

.about-company__benefit:hover .about-company__benefit-title {
  color: var(--ds-primary-600);
}

.about-company__benefit-text {
  max-width: 34ch;
}

@media (min-width: 800px) {
  .about-company__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-company__benefit {
    min-height: 100%;
    padding: var(--ds-space-11) var(--ds-space-9);
  }

  .about-company__benefit:nth-child(odd) {
    padding-left: 0;
    border-right: var(--ds-border-width) solid var(--ds-border);
  }

  .about-company__benefit:nth-child(even) {
    padding-right: 0;
  }
}

@media (min-width: 1024px) {
  .about-company__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .about-company__benefits {
    margin-top: var(--ds-space-11);
  }

  .about-company__benefit {
    padding-block: var(--ds-space-12);
  }
}