/* Перший екран: розкладка сітки (колонка тексту, макет чату, картки переваг) */
.hero__grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content" "visual" "cards";
}

.hero__content {
  grid-area: content;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "content visual" "content cards";
    gap: var(--ds-space-9) var(--ds-space-11);
  }
}

@media (min-width: 1280px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr);
    grid-template-areas: "content visual cards";
    gap: var(--ds-space-9);
  }
}

/* Макет чату з Марічкою на першому екрані */
.hero-chat {
  grid-area: visual;
  position: relative;
  min-width: 0;
}

.hero-chat__stage {
  padding: var(--ds-space-6);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-surface);
}

.hero-chat__window {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-bg);
}

.hero-chat__head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-5);
  padding: var(--ds-space-5) var(--ds-space-6);
  border-bottom: 1px solid var(--ds-border);
}

.hero-chat__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-heading);
  color: var(--ds-bg);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-text-h6-size);
}

.hero-chat__who {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  min-width: 0;
}

.hero-chat__status {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: var(--ds-text-muted);
}

.hero-chat__online {
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-success);
}

.hero-chat__channel {
  margin-left: auto;
}

.hero-chat__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  padding: var(--ds-space-7) var(--ds-space-6);
}

.hero-chat__day {
  align-self: center;
  padding: var(--ds-space-1) var(--ds-space-5);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-surface);
  color: var(--ds-text-muted);
}

.hero-chat__bubble {
  max-width: 86%;
  padding: var(--ds-space-4) var(--ds-space-6);
  border-radius: var(--ds-radius-xl);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-caption-line);
  letter-spacing: var(--ds-text-body-sm-tracking);
}

.hero-chat__bubble--client {
  align-self: flex-start;
  border: 1px solid var(--ds-border);
  border-bottom-left-radius: var(--ds-radius-sm);
  background-color: var(--ds-surface);
  color: var(--ds-heading);
}

.hero-chat__bubble--bot {
  align-self: flex-end;
  border-bottom-right-radius: var(--ds-radius-sm);
  background-color: var(--ds-heading);
  color: var(--ds-bg);
}

.hero-chat__price {
  color: var(--ds-primary-400);
  font-weight: var(--ds-text-h4-weight);
}

.hero-chat__meta {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: var(--ds-space-2);
  margin-top: calc(-1 * var(--ds-space-1));
  color: var(--ds-text-muted);
  font-weight: var(--ds-text-overline-weight);
}

.hero-chat__meta svg {
  color: var(--ds-primary);
}

.hero-chat__input {
  display: flex;
  align-items: center;
  gap: var(--ds-space-5);
  padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-4) var(--ds-space-6);
  border-top: 1px solid var(--ds-border);
}

.hero-chat__placeholder {
  flex: 1;
  color: var(--ds-text-muted);
}

.hero-chat__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-heading);
  color: var(--ds-bg);
}

.hero-chat__deal {
  display: flex;
  align-items: center;
  gap: var(--ds-space-6);
  margin-top: var(--ds-space-5);
  padding: var(--ds-space-6);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-bg);
}

.hero-chat__deal-info {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  min-width: 0;
}

.hero-chat__deal-label {
  color: var(--ds-text-muted);
  font-weight: var(--ds-text-overline-weight);
  letter-spacing: var(--ds-text-overline-tracking);
  text-transform: uppercase;
}

.hero-chat__deal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}

.hero-chat__deal-sum {
  color: var(--ds-heading);
  font-weight: var(--ds-text-h4-weight);
}

.hero-chat__deal-status {
  padding: 0 var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-surface);
}

/* Картки переваг на першому екрані (праворуч від чату) */
.hero-cards {
  grid-area: cards;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: var(--ds-space-5);
  min-width: 0;
}

.hero-cards__item {
  flex-direction: row;
  align-items: flex-start;
  padding: var(--ds-space-7);
  transition: border-color var(--ds-duration-normal) var(--ds-ease-standard);
}

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

.hero-cards__icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ds-border);
}

.hero-cards__icon svg {
  width: 20px;
  height: 20px;
}

.hero-cards__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  min-width: 0;
}

.hero-cards__label {
  color: var(--ds-text-muted);
  font-size: var(--ds-text-caption-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;
}

.hero-cards__text {
  margin-top: var(--ds-space-1);
  line-height: var(--ds-text-caption-line);
}

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

@media (min-width: 1280px) {
  .hero-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Інтеграції: стрічка каналів і систем на всю ширину екрана */
.integrations {
  overflow: hidden;
}

.integrations__strip {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--ds-color-black) 10%, var(--ds-color-black) 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, var(--ds-color-black) 10%, var(--ds-color-black) 90%, transparent 100%);
}

.integrations__strip::-webkit-scrollbar {
  display: none;
}

.integrations__track {
  display: flex;
  gap: var(--ds-space-6);
  width: max-content;
  padding: var(--ds-space-5) var(--ds-space-13);
}

.integrations__tile {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
  width: 152px;
  height: 104px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-bg);
  color: var(--ds-color-gray-400);
  scroll-snap-align: center;
  transition: color var(--ds-duration-normal) var(--ds-ease-standard),
    border-color var(--ds-duration-normal) var(--ds-ease-standard);
}

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

.integrations__tile--active,
.integrations__tile--active:hover {
  border-color: var(--ds-primary);
  color: var(--ds-text);
}

.integrations__name {
  color: var(--ds-text-muted);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-text-h6-size);
  font-weight: var(--ds-text-label-weight);
  line-height: var(--ds-text-h6-line);
  letter-spacing: var(--ds-text-h2-tracking);
  transition: color var(--ds-duration-normal) var(--ds-ease-standard);
}

.integrations__tile:hover .integrations__name,
.integrations__name--active {
  color: var(--ds-heading);
}

.integrations__status {
  position: absolute;
  top: calc(-1 * var(--ds-space-5));
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: calc(var(--ds-space-1) / 2) var(--ds-space-4);
  border: 1px solid var(--ds-primary-200);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-bg);
  color: var(--ds-primary-700);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-label-weight);
  line-height: var(--ds-text-caption-line);
  white-space: nowrap;
  transform: translateX(-50%);
}

.integrations__status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-primary);
}

.integrations__note {
  max-width: 60ch;
  margin: var(--ds-space-10) auto 0;
  text-align: center;
}

.integrations__link {
  text-decoration: underline;
  text-decoration-color: var(--ds-border-strong);
}

@media (min-width: 800px) {
  .integrations__tile {
    width: 160px;
    height: 112px;
  }
}

/* Трансформація: фраза менеджера → наслідок → рішення Марічки (темна секція) */
.transformation {
  --transformation-rule: color-mix(in oklab, var(--ds-color-gray-100) 12%, transparent);
}

.transformation__labels {
  display: none;
}

.transformation__list {
  border-bottom: 1px solid var(--transformation-rule);
}

.transformation__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-6);
  padding: var(--ds-space-9) 0;
  border-top: 1px solid var(--transformation-rule);
}

.transformation__quote {
  color: var(--ds-heading);
  font-family: var(--ds-font-heading);
  font-size: clamp(1.375rem, 1vw + 1rem, var(--ds-text-h2-size));
  font-weight: var(--ds-text-h2-weight);
  line-height: var(--ds-text-h2-line);
  letter-spacing: var(--ds-text-h2-tracking);
  text-transform: uppercase;
}

.transformation__effect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-5);
}

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

.transformation__number {
  color: var(--ds-primary);
  font-weight: var(--ds-text-h4-weight);
}

.transformation__arrow {
  display: inline-flex;
  color: var(--ds-primary);
  transform: rotate(90deg);
  transition: transform var(--ds-duration-normal) var(--ds-ease-standard);
}

.transformation__card {
  flex-direction: row;
  align-items: center;
  padding: var(--ds-space-7) var(--ds-space-8);
  border-color: color-mix(in oklab, var(--ds-color-gray-100) 8%, transparent);
  transition: border-color var(--ds-duration-normal) var(--ds-ease-standard);
}

.transformation__row:hover .transformation__card {
  border-color: color-mix(in oklab, var(--ds-primary) 50%, transparent);
}

.transformation__icon {
  background-color: color-mix(in oklab, var(--ds-primary) 16%, transparent);
  color: var(--ds-primary);
}

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

.transformation__tag {
  color: var(--ds-primary);
  font-size: var(--ds-text-caption-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;
}

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

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

@media (min-width: 800px) {
  .transformation__labels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-space-9);
    padding-bottom: var(--ds-space-5);
    color: var(--ds-text-muted);
    text-transform: uppercase;
  }
  .transformation__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: var(--ds-space-9);
    padding: var(--ds-space-8) 0;
  }
  .transformation__effect {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-8);
  }
  .transformation__arrow {
    transform: none;
  }
  .transformation__row:hover .transformation__arrow {
    transform: translateX(4px);
  }
}

/* Можливості: перелік переваг ліворуч, картка економіки праворуч */
.capabilities {
  --capabilities-gap: var(--ds-space-11);
}

.capabilities__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--capabilities-gap);
}

.capabilities__main {
  display: flex;
  flex-direction: column;
  gap: var(--capabilities-gap);
  min-width: 0;
}

.capabilities__head {
  margin-bottom: 0;
}

.capabilities__list {
  gap: var(--ds-space-9);
}

.capabilities__item {
  gap: var(--ds-space-7);
}

.capabilities__check {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 0;
  border-radius: var(--ds-radius-full);
  background-color: color-mix(in oklab, var(--ds-primary) 12%, transparent);
  color: var(--ds-primary-600);
}

.capabilities__item-text {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding-top: var(--ds-space-2);
}

.capabilities__item-desc {
  max-width: 58ch;
}

.capabilities__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--capabilities-gap);
}

@media (min-width: 800px) {
  .capabilities__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--ds-space-10);
  }
}

@media (min-width: 1280px) {
  .capabilities__grid {
    gap: var(--ds-space-13);
  }
}

/* Панель бази знань: джерела, на яких навчено Марічку */
.knowledge-base {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-bg);
}

.knowledge-base__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-5);
  padding: var(--ds-space-5) var(--ds-space-7);
  border-bottom: 1px solid var(--ds-border);
  background-color: var(--ds-surface);
}

.knowledge-base__dots {
  display: flex;
  gap: var(--ds-space-2);
}

.knowledge-base__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-neutral-300);
}

.knowledge-base__name {
  color: var(--ds-heading);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-overline-weight);
}

.knowledge-base__sync {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-caption-size);
}

.knowledge-base__pulse {
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ds-primary) 18%, transparent);
}

.knowledge-base__rows {
  padding: 0 var(--ds-space-7);
}

.knowledge-base__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: var(--ds-space-6);
  padding: var(--ds-space-6) 0;
  border-bottom: 1px solid var(--ds-border);
}

.knowledge-base__row:last-child {
  border-bottom: 0;
}

.knowledge-base__icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
}

.knowledge-base__icon svg {
  width: 20px;
  height: 20px;
}

.knowledge-base__file {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ds-space-1) / 2);
  min-width: 0;
}

.knowledge-base__file-name {
  overflow: hidden;
  color: var(--ds-heading);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-caption-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-base__status {
  display: inline-flex;
  grid-column: 2;
  justify-self: start;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-1) var(--ds-space-5);
  border-radius: var(--ds-radius-full);
  background-color: color-mix(in oklab, var(--ds-primary) 10%, transparent);
  color: var(--ds-primary-700);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-overline-weight);
  white-space: nowrap;
}

.knowledge-base__status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-primary);
}

@media (min-width: 576px) {
  .knowledge-base__sync {
    margin-left: auto;
  }
  .knowledge-base__row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }
  .knowledge-base__status {
    grid-column: auto;
    justify-self: auto;
  }
}

/* Картка «Економіка та ROI» */
.economics {
  gap: var(--ds-space-10);
  padding: var(--ds-space-9);
  transition: border-color var(--ds-duration-normal) var(--ds-ease-standard);
}

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

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

.economics__list {
  border-top: 1px solid var(--ds-border);
}

.economics__item {
  display: grid;
  grid-template-columns: var(--ds-space-12) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--ds-space-5);
  padding: var(--ds-space-8) 0;
  border-bottom: 1px solid var(--ds-border);
}

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

.economics__stat {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  margin-top: auto;
}

.economics__value {
  color: var(--ds-primary);
  font-family: var(--ds-font-heading);
  font-size: clamp(5rem, 9vw, calc(var(--ds-text-display-size) * 1.6));
  font-weight: var(--ds-text-display-weight);
  line-height: 0.9;
  letter-spacing: var(--ds-text-display-tracking);
}

.economics__caption {
  color: var(--ds-heading);
  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;
}

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

/* Сценарій: діалог клієнта і технічна схема оформлення замовлення за 60 секунд */
.scenario {
  --scenario-step-size: 40px;
  --scenario-node-size: 44px;
}

.scenario__badge {
  padding: var(--ds-space-3) var(--ds-space-6);
  font-size: var(--ds-text-label-size);
  font-weight: var(--ds-text-label-weight);
  line-height: var(--ds-text-label-line);
}

.scenario__badge svg {
  width: 18px;
  height: 18px;
}

.scenario__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-6);
}

.scenario__card {
  gap: var(--ds-space-8);
  transition: border-color var(--ds-duration-normal) var(--ds-ease-standard);
}

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

.scenario__card-head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-5);
  padding-bottom: var(--ds-space-7);
  border-bottom: 1px solid var(--ds-border);
}

.scenario__card-heading {
  flex: 1;
  min-width: 0;
}

.scenario__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-primary-50);
  color: var(--ds-primary);
}

.scenario__icon svg {
  width: 20px;
  height: 20px;
}

.scenario__live {
  display: none;
  align-items: center;
  gap: var(--ds-space-2);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  white-space: nowrap;
}

.scenario__live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-success);
}

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

.scenario__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--scenario-step-size) minmax(0, 1fr);
  gap: var(--ds-space-6);
}

.scenario__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--scenario-step-size) + var(--ds-space-1));
  bottom: calc(-1 * var(--ds-space-7) + var(--ds-space-1));
  left: calc(var(--scenario-step-size) / 2 - 0.5px);
  width: 1px;
  background-color: var(--ds-border);
}

.scenario__step-number {
  display: grid;
  place-items: center;
  width: var(--scenario-step-size);
  height: var(--scenario-step-size);
  border: 1px solid var(--ds-primary-200);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-primary-50);
  color: var(--ds-primary);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-overline-weight);
  line-height: 1;
}

.scenario__step-body {
  display: grid;
  align-items: start;
  gap: var(--ds-space-5);
}

.scenario__step-text {
  max-width: 60ch;
  margin-top: var(--ds-space-1);
  line-height: var(--ds-text-caption-line);
}

.scenario__bubble {
  justify-self: start;
  max-width: 100%;
  padding: var(--ds-space-4) var(--ds-space-5);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-heading);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.scenario__bubble--client {
  border: 1px solid var(--ds-border);
  border-bottom-left-radius: var(--ds-radius-sm);
  background-color: var(--ds-surface);
}

.scenario__bubble--bot {
  border: 1px solid var(--ds-primary-100);
  border-bottom-right-radius: var(--ds-radius-sm);
  background-color: var(--ds-primary-50);
}

.scenario__bubble-meta {
  display: block;
  margin-bottom: var(--ds-space-1);
  color: var(--ds-text-muted);
  font-weight: var(--ds-text-label-weight);
}

.scenario__bubble-meta--bot {
  color: var(--ds-primary-700);
}

.scenario__price {
  color: var(--ds-primary-700);
  font-weight: var(--ds-text-overline-weight);
}

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

.scenario__flow::before {
  content: "";
  position: absolute;
  top: calc(var(--scenario-node-size) / 2);
  bottom: calc(var(--scenario-node-size) / 2);
  left: calc(var(--scenario-node-size) / 2 - 1px);
  width: 2px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-primary);
}

.scenario__node {
  position: relative;
  display: grid;
  grid-template-columns: var(--scenario-node-size) minmax(0, 1fr);
  align-items: start;
  gap: var(--ds-space-6);
}

.scenario__node-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--scenario-node-size);
  height: var(--scenario-node-size);
  border: 2px solid var(--ds-primary);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-bg);
  color: var(--ds-primary);
}

.scenario__node-icon svg {
  width: 20px;
  height: 20px;
}

.scenario__node-icon--accent {
  background-color: var(--ds-primary);
  color: var(--ds-on-primary);
}

.scenario__node-body {
  padding-top: var(--ds-space-2);
}

.scenario__node-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
}

.scenario__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--ds-space-1) var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-surface);
  color: var(--ds-text);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  letter-spacing: var(--ds-text-caption-tracking);
}

.scenario__tag--accent {
  border-color: var(--ds-primary-200);
  background-color: var(--ds-primary-50);
  color: var(--ds-primary-700);
}

.scenario__card-foot {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin-top: auto;
  padding-top: var(--ds-space-7);
  border-top: 1px solid var(--ds-border);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-caption-line);
  letter-spacing: var(--ds-text-body-sm-tracking);
}

.scenario__card-foot svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ds-primary);
}

.scenario__card-foot--success svg {
  color: var(--ds-success);
}

.scenario__time {
  margin-left: auto;
  color: var(--ds-primary);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-caption-size);
}

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

@media (min-width: 800px) {
  .scenario__live {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  .scenario__aside {
    justify-self: end;
  }
  .scenario__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-8);
  }
}

@media (min-width: 1280px) {
  .scenario__step-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
    gap: var(--ds-space-6);
  }
  .scenario__bubble {
    justify-self: stretch;
  }
}

/* Технології: вкладки категорій і картки стеку */
.tech {
  --tech-card-border: var(--ds-border);
}

.tech__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-9);
  padding-bottom: var(--ds-space-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.tech__tabs::-webkit-scrollbar {
  display: none;
}

.tech__tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: var(--ds-space-4) var(--ds-space-7);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-bg);
  color: var(--ds-text-muted);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-caption-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;
  cursor: pointer;
  scroll-snap-align: start;
  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);
}

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

.tech__tab--active,
.tech__tab--active:hover {
  border-color: var(--ds-heading);
  background-color: var(--ds-heading);
  color: var(--ds-on-primary);
}

.tech__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-6);
}

.tech__card {
  position: relative;
  justify-content: space-between;
  gap: var(--ds-space-11);
  min-height: 260px;
  padding: var(--ds-space-9) var(--ds-space-8);
  overflow: hidden;
  border-color: var(--tech-card-border);
  transition: border-color var(--ds-duration-normal) var(--ds-ease-standard),
    transform var(--ds-duration-normal) var(--ds-ease-standard);
}

.tech__card::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--ds-space-8);
  left: var(--ds-space-8);
  height: 2px;
  border-radius: 0 0 var(--ds-radius-sm) var(--ds-radius-sm);
  background-color: var(--ds-primary);
  opacity: 0.9;
}

.tech__card:hover {
  border-color: color-mix(in oklab, var(--ds-primary) 45%, transparent);
  transform: translateY(-4px);
}

.tech__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--tech-card-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-bg);
  color: var(--ds-color-gray-400);
  transition: border-color var(--ds-duration-normal) var(--ds-ease-standard);
}

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

.tech__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

.tech__desc {
  color: var(--ds-color-black);
  line-height: var(--ds-text-caption-line);
}

.tech__index {
  position: absolute;
  top: var(--ds-space-9);
  right: var(--ds-space-8);
  color: var(--ds-primary);
  font-weight: var(--ds-text-overline-weight);
  letter-spacing: var(--ds-text-overline-tracking);
}

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

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

@media (min-width: 800px) {
  .tech__tabs {
    flex-wrap: wrap;
    overflow: visible;
  }
  .tech__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .tech__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Впровадження: шапка з кнопкою та етапи на CSS-вкладках без JS (приховані radio + :checked керують вкладками, панелями, прогресом і пейджером) */
.implementation {
  --implementation-step-size: 28px;
}

.implementation__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-space-8);
  margin-bottom: var(--section-head-space);
}

.implementation__intro {
  margin-bottom: 0;
}

.implementation__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-5);
}

.implementation__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-6);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-surface);
}

.implementation__meta svg {
  width: 18px;
  height: 18px;
  color: var(--ds-text-muted);
}

.implementation__meta-value {
  color: var(--ds-heading);
  font-weight: var(--ds-text-overline-weight);
}

.implementation__stages {
  position: relative;
}

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

.implementation__tabs {
  margin-inline: calc(-1 * var(--container-gutter));
  padding-inline: var(--container-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.implementation__tabs::-webkit-scrollbar {
  display: none;
}

.implementation__tabs-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(168px, 1fr));
  min-width: 860px;
}

.implementation__track {
  position: absolute;
  top: calc(var(--ds-space-6) + var(--implementation-step-size) / 2 - 1px);
  right: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-border);
}

.implementation__track-fill {
  display: block;
  width: calc(var(--ds-space-7) + var(--implementation-step-size) / 2);
  height: 100%;
  background-color: var(--ds-primary);
  transition: width var(--ds-duration-slow) var(--ds-ease-standard);
}

.implementation__tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-2);
  padding: var(--ds-space-6) var(--ds-space-7) var(--ds-space-7);
  border-radius: var(--ds-radius-lg);
  cursor: pointer;
  scroll-snap-align: start;
}

.implementation__tab-number {
  display: grid;
  place-items: center;
  width: var(--implementation-step-size);
  height: var(--implementation-step-size);
  margin-bottom: var(--ds-space-5);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-full);
  outline: 6px solid var(--ds-bg);
  background-color: var(--ds-bg);
  color: var(--ds-text-muted);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-overline-weight);
  line-height: 1;
  transition: background-color var(--ds-duration-normal) var(--ds-ease-standard),
    border-color var(--ds-duration-normal) var(--ds-ease-standard),
    color var(--ds-duration-normal) var(--ds-ease-standard);
}

.implementation__tab-name {
  color: var(--ds-text-muted);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-text-h5-size);
  font-weight: var(--ds-text-h5-weight);
  line-height: var(--ds-text-h5-line);
  letter-spacing: var(--ds-text-h2-tracking);
  transition: color var(--ds-duration-fast) var(--ds-ease-standard);
}

.implementation__tab-phase {
  color: var(--ds-text-muted);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-overline-weight);
  line-height: var(--ds-text-caption-line);
  letter-spacing: var(--ds-text-overline-tracking);
  text-transform: uppercase;
}

.implementation__tab:hover .implementation__tab-name {
  color: var(--ds-heading);
}

.implementation__tab:hover .implementation__tab-number {
  border-color: var(--ds-heading);
}

.implementation__input--1:checked ~ .implementation__tabs .implementation__tab--1 .implementation__tab-name,
.implementation__input--2:checked ~ .implementation__tabs .implementation__tab--2 .implementation__tab-name,
.implementation__input--3:checked ~ .implementation__tabs .implementation__tab--3 .implementation__tab-name,
.implementation__input--4:checked ~ .implementation__tabs .implementation__tab--4 .implementation__tab-name,
.implementation__input--5:checked ~ .implementation__tabs .implementation__tab--5 .implementation__tab-name {
  color: var(--ds-heading);
}

.implementation__input--1:checked ~ .implementation__tabs .implementation__tab--1 .implementation__tab-number,
.implementation__input--2:checked ~ .implementation__tabs .implementation__tab--2 .implementation__tab-number,
.implementation__input--3:checked ~ .implementation__tabs .implementation__tab--3 .implementation__tab-number,
.implementation__input--4:checked ~ .implementation__tabs .implementation__tab--4 .implementation__tab-number,
.implementation__input--5:checked ~ .implementation__tabs .implementation__tab--5 .implementation__tab-number {
  border-color: var(--ds-primary);
  outline-color: color-mix(in oklab, var(--ds-primary) 14%, var(--ds-bg));
  background-color: var(--ds-primary);
  color: var(--ds-on-primary);
}

.implementation__input--2:checked ~ .implementation__tabs .implementation__tab--1 .implementation__tab-number,
.implementation__input--3:checked ~ .implementation__tabs :is(.implementation__tab--1, .implementation__tab--2) .implementation__tab-number,
.implementation__input--4:checked ~ .implementation__tabs :is(.implementation__tab--1, .implementation__tab--2, .implementation__tab--3) .implementation__tab-number,
.implementation__input--5:checked ~ .implementation__tabs :is(.implementation__tab--1, .implementation__tab--2, .implementation__tab--3, .implementation__tab--4) .implementation__tab-number {
  border-color: var(--ds-heading);
  background-color: var(--ds-heading);
  color: var(--ds-bg);
}

.implementation__input--2:checked ~ .implementation__tabs .implementation__track-fill {
  width: calc(20% + var(--ds-space-7) + var(--implementation-step-size) / 2);
}

.implementation__input--3:checked ~ .implementation__tabs .implementation__track-fill {
  width: calc(40% + var(--ds-space-7) + var(--implementation-step-size) / 2);
}

.implementation__input--4:checked ~ .implementation__tabs .implementation__track-fill {
  width: calc(60% + var(--ds-space-7) + var(--implementation-step-size) / 2);
}

.implementation__input--5:checked ~ .implementation__tabs .implementation__track-fill {
  width: calc(80% + var(--ds-space-7) + var(--implementation-step-size) / 2);
}

.implementation__input--1:focus-visible ~ .implementation__tabs .implementation__tab--1,
.implementation__input--2:focus-visible ~ .implementation__tabs .implementation__tab--2,
.implementation__input--3:focus-visible ~ .implementation__tabs .implementation__tab--3,
.implementation__input--4:focus-visible ~ .implementation__tabs .implementation__tab--4,
.implementation__input--5:focus-visible ~ .implementation__tabs .implementation__tab--5 {
  outline: 2px solid var(--ds-heading);
  outline-offset: -2px;
}

.implementation__panels {
  margin-top: var(--ds-space-8);
}

.implementation__panel {
  display: none;
  gap: var(--ds-space-9);
  padding: var(--ds-space-8);
}

.implementation__input--1:checked ~ .implementation__panels .implementation__panel--1,
.implementation__input--2:checked ~ .implementation__panels .implementation__panel--2,
.implementation__input--3:checked ~ .implementation__panels .implementation__panel--3,
.implementation__input--4:checked ~ .implementation__panels .implementation__panel--4,
.implementation__input--5:checked ~ .implementation__panels .implementation__panel--5 {
  display: grid;
}

.implementation__panel-main {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-7);
}

.implementation__panel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-5);
}

.implementation__icon {
  border: 1px solid var(--ds-border);
}

.implementation__badge {
  background-color: var(--ds-bg);
  color: var(--ds-text-muted);
  letter-spacing: var(--ds-text-overline-tracking);
  text-transform: uppercase;
}

.implementation__panel-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-6);
}

.implementation__number {
  color: var(--ds-border-strong);
  font-family: var(--ds-font-heading);
  font-size: clamp(2.5rem, 2vw + 1.5rem, var(--ds-text-h1-size));
  font-weight: var(--ds-text-h1-weight);
  line-height: 1;
  letter-spacing: var(--ds-text-display-tracking);
}

.implementation__desc {
  max-width: 52ch;
}

.implementation__next {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--ds-space-3);
  margin-top: auto;
  padding-block: var(--ds-space-2);
  border-bottom: 1px solid var(--ds-border-strong);
  color: var(--ds-heading);
  font-size: var(--ds-text-label-size);
  font-weight: var(--ds-text-label-weight);
  line-height: var(--ds-text-label-line);
  cursor: pointer;
  transition: border-color var(--ds-duration-fast) var(--ds-ease-standard);
}

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

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

.implementation__next:hover svg {
  transform: translateX(4px);
}

.implementation__result {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
  padding: var(--ds-space-8);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-bg);
}

.implementation__result-title {
  color: var(--ds-text-muted);
  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;
}

.implementation__checks {
  gap: 0;
}

.implementation__check-item {
  gap: var(--ds-space-5);
  padding-block: var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-caption-line);
  letter-spacing: var(--ds-text-body-sm-tracking);
}

.implementation__check-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.implementation__check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-surface);
  color: var(--ds-heading);
}

.implementation__check svg {
  width: 13px;
  height: 13px;
}

.implementation__result-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-3);
  margin-top: auto;
  padding-top: var(--ds-space-6);
  border-top: 1px solid var(--ds-border);
}

.implementation__duration {
  color: var(--ds-heading);
  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-h2-tracking);
}

.implementation__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-5);
  margin-top: var(--ds-space-9);
}

.implementation__pager-side {
  display: inline-flex;
}

.implementation__pager-list {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-surface);
}

.implementation__pager-item {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--ds-space-4);
  border-radius: var(--ds-radius-full);
  color: var(--ds-text-muted);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-overline-weight);
  line-height: 1;
  letter-spacing: var(--ds-text-caption-tracking);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease-standard),
    color var(--ds-duration-fast) var(--ds-ease-standard);
}

.implementation__pager-item:hover {
  background-color: var(--ds-bg);
  color: var(--ds-heading);
}

.implementation__input--1:checked ~ .implementation__pager .implementation__pager-item--1,
.implementation__input--2:checked ~ .implementation__pager .implementation__pager-item--2,
.implementation__input--3:checked ~ .implementation__pager .implementation__pager-item--3,
.implementation__input--4:checked ~ .implementation__pager .implementation__pager-item--4,
.implementation__input--5:checked ~ .implementation__pager .implementation__pager-item--5 {
  background-color: var(--ds-primary);
  color: var(--ds-on-primary);
}

.implementation__pager-arrow {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-bg);
  color: var(--ds-heading);
  cursor: pointer;
  transition: border-color var(--ds-duration-fast) var(--ds-ease-standard),
    background-color var(--ds-duration-fast) var(--ds-ease-standard);
}

.implementation__pager-arrow svg {
  width: 18px;
  height: 18px;
}

.implementation__pager-arrow:hover {
  border-color: var(--ds-heading);
  background-color: var(--ds-surface);
}

.implementation__pager-arrow--disabled,
.implementation__pager-arrow--disabled:hover {
  border-color: var(--ds-border);
  background-color: var(--ds-bg);
  color: var(--ds-border-strong);
  cursor: default;
}

.implementation__input--1:checked ~ .implementation__pager .implementation__pager-arrow--stage-1,
.implementation__input--2:checked ~ .implementation__pager .implementation__pager-arrow--stage-2,
.implementation__input--3:checked ~ .implementation__pager .implementation__pager-arrow--stage-3,
.implementation__input--4:checked ~ .implementation__pager .implementation__pager-arrow--stage-4,
.implementation__input--5:checked ~ .implementation__pager .implementation__pager-arrow--stage-5 {
  display: grid;
}

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

@media (min-width: 1024px) {
  .implementation__tabs {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .implementation__tabs-inner {
    min-width: 0;
  }
  .implementation__panel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--ds-space-10);
  }
}

/* Про компанію: цифри, картка IT Artel Group і сітка переваг */
.about-company {
  --about-company-padding: var(--ds-space-9);
}

.about-company__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--ds-space-11);
}

.about-company__intro {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-10);
  min-width: 0;
}

.about-company__head {
  margin-bottom: 0;
}

.about-company__lead {
  max-width: 48ch;
}

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

.about-company__stat {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--ds-space-4);
  min-width: 0;
}

.about-company__stat:not(:first-child) {
  padding-left: var(--ds-space-9);
  border-left: 1px solid var(--ds-border);
}

.about-company__stat-value {
  color: var(--ds-heading);
  font-family: var(--ds-font-heading);
  font-size: clamp(3.5rem, 4vw + 1.5rem, var(--ds-text-display-size));
  font-weight: var(--ds-text-h1-weight);
  line-height: var(--ds-text-display-line);
  letter-spacing: var(--ds-text-display-tracking);
}

.about-company__card {
  position: relative;
  align-items: flex-start;
  padding: var(--about-company-padding);
  overflow: hidden;
}

.about-company__badge {
  position: relative;
  z-index: 1;
  gap: var(--ds-space-2);
}

.about-company__card-text {
  position: relative;
  z-index: 1;
  max-width: 32ch;
}

.about-company__rhombus {
  position: absolute;
  right: -36px;
  bottom: -44px;
  width: 170px;
  height: 170px;
  fill: color-mix(in oklab, var(--ds-primary) 16%, transparent);
  pointer-events: none;
  transition: transform var(--ds-duration-slow) var(--ds-ease-standard);
}

.about-company__card:hover .about-company__rhombus {
  transform: rotate(12deg) scale(1.05);
}

.about-company__cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-border);
}

.about-company__cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ds-space-10);
  padding: var(--about-company-padding);
  background-color: var(--ds-bg);
  transition: background-color var(--ds-duration-normal) var(--ds-ease-standard);
}

.about-company__cell:hover {
  background-color: color-mix(in oklab, var(--ds-primary) 4%, var(--ds-bg));
}

.about-company__cell-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-6);
}

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

.about-company__arrow {
  color: var(--ds-neutral-400);
  transition: color var(--ds-duration-fast) var(--ds-ease-standard),
    transform var(--ds-duration-normal) var(--ds-ease-standard);
}

.about-company__cell:hover .about-company__arrow {
  color: var(--ds-primary);
  transform: translate(2px, -2px);
}

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

.about-company__cell-text {
  max-width: 36ch;
  line-height: var(--ds-text-body-line);
}

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

@media (min-width: 800px) {
  .about-company {
    --about-company-padding: var(--ds-space-10);
  }
  .about-company__cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-company__cell {
    min-height: 260px;
  }
}

@media (min-width: 1024px) {
  .about-company__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ds-space-13);
  }
  .about-company__intro {
    justify-content: space-between;
  }
  .about-company__cell {
    min-height: 0;
  }
}