.process {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 145px 56px 140px;
  overflow: visible;
  background: #000;
  color: #fff;
  font-family: "Satoshi", sans-serif;
}

.process__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 112px;
  width: 100%;
}

.process__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid #d3d8ed;
}

.process__heading,
.process__summary {
  margin: 0;
  font-size: var(--font-size-large);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.9;
}

.process__heading { color: #d3d8ed; }
.process__summary { color: #e4e6f3; }
.process__source { display: none; }

.process__scroll {
  position: relative;
  width: 100%;
  height: 400vh;
  background: #000;
}

.process__sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.process__tabs {
  position: relative;
  z-index: 5;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 96px;
  padding: 0 32px;
  background: #444754;
}

.process__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: 500 1.425rem/1.2 "Satoshi", sans-serif;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 300ms ease;
}

.process__tab:hover,
.process__tab.is-active { opacity: 1; }

.process__tab:focus-visible {
  outline-color: #e4e6f3;
}

.process__progress-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}

.process__progress-bar {
  width: 100%;
  height: 100%;
  background: #2692ff;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.process__main {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 647px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 4.4vw, 85px);
  width: min(100%, 1674px);
  margin: 0 auto;
  padding: 32px 0;
}

.process__side { min-width: 0; }

.process__title,
.process__step-description {
  margin: 0;
  white-space: pre-line;
}

.process__title {
  color: #e4e6f3;
  font-size: clamp(2.25rem, 2.5vw, 3rem);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -0.02em;
}

.process__step-description {
  color: #9ea2b4;
  font-size: clamp(1.5rem, 1.67vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.process__line {
  display: block;
  margin-bottom: -0.14em;
  padding-bottom: 0.14em;
  overflow: hidden;
}

.process__line-inner {
  display: block;
  will-change: transform, opacity;
}

.process__graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 640px;
  aspect-ratio: 647 / 640;
  border-radius: 24px;
  background: #000;
}

.process__image-frame {
  position: relative;
  width: calc(100% - 52px);
  height: calc(100% - 52px);
  margin: 26px;
  overflow: hidden;
  border-radius: 8px;
  background: #191919;
}

.process__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: clip-path;
}

@media (min-width: 1440px) {
  .process__step-description {
    font-size: 1.4375rem;
  }
}

@media (max-width: 1439px) {
  .process { padding: 56px 40px; }
  .process__container { gap: 56px; }
  .process__heading,
  .process__summary { font-size: var(--font-size-medium); }
  .process__main { gap: 32px; }
}

@media (max-width: 1100px) {
  .process__main {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    align-content: center;
  }
  .process__side--right { grid-column: 1; }
  .process__graphic { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 809px) {
  .process { padding: 145px 20px 56px; }
  .process__header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .process__heading { font-size: var(--font-size-ui); }
  .process__summary { display: none; }
  .process__tabs { height: 80px; padding: 0 12px; }
  .process__tab { flex-direction: column; gap: 3px; font-size: 0.75rem; }
  .process__main { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }
  .process__graphic { grid-column: 1; grid-row: auto; width: min(100%, 520px); margin: 0 auto; }
  .process__title { font-size: 2rem; }
  .process__step-description { font-size: 1.25rem; }
}

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