/* =========================================================
   Section 4 — Three Simple Steps
   Figma node 2132:4249 (desktop 1512 × 1024)
   ========================================================= */

.steps {
  --steps-line: #30363d;
  --steps-card: #161b22;
  --steps-shadow:
    0 13.389px 20.083px -10.878px rgba(0, 0, 0, 0.5),
    0 1.799px 0.418px -1.674px rgba(0, 0, 0, 0.25),
    0 4.184px 1.255px -3.347px rgba(8, 8, 8, 0.2),
    0 5.021px 3.347px -3.347px rgba(8, 8, 8, 0.16),
    0 5.021px 10.878px 0 rgba(8, 8, 8, 0.12),
    0 20.083px 20.083px -13.389px rgba(8, 8, 8, 0.08);

  position: relative;
  padding-block: 96px;
  /* #0D1117, fading to #020D18 over the last 182px (Figma frame 2132:5568) */
  background: linear-gradient(180deg,
    var(--color-bg-fade) 0,
    var(--color-bg-fade) calc(100% - 182px),
    #020d18 100%);
}

/* ---------- Heading ---------- */
.steps__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.steps__title {
  font-size: 52px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.52px;
  color: var(--color-white);
}

.steps__title-accent { color: var(--color-amber); }

.steps__subtitle {
  max-width: 880px;
  font-size: 20px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* ---------- Cards row ---------- */
.steps__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 64px;
}

.step-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 18px;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(103.96deg, rgba(22, 27, 34, 0.2) 71.337%, rgba(255, 255, 255, 0.2) 110.66%),
    var(--steps-card);
  box-shadow: var(--steps-shadow);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}

/* stroke + inner highlight drawn on top, inside the card (like Figma) */
.step-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid var(--steps-line);
  border-radius: inherit;
  box-shadow: inset 1.674px 3.347px 13.389px 0 rgba(253, 253, 253, 0.05);
  pointer-events: none;
}

.step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--steps-shadow), 0 24px 48px -24px rgba(255, 179, 0, 0.18);
}

.step-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 0 8px 18px;
}

/* "✦ Step 1" pill */
.step-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 2px;           /* 3/8/3 incl. the 1px border */
  border: 1px solid var(--steps-line);
  border-radius: 999px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.26)),
    radial-gradient(50% 100% at 50% 0, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.01);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
}

.step-badge__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-amber) 0%, #996b00 100%);
}

.step-badge__icon img { width: 12px; height: 12px; }

.step-card__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.step-card__title {
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  color: var(--color-white);
}

.step-card__desc {
  font-size: 16px;
  line-height: 1.4;
  color: #adadad;
}

.step-card__desc--sm { font-size: 14px; }

/* ---------- Picture area (circuit bg + phone) ---------- */
.step-visual {
  position: relative;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: #1f2937;
}

.step-visual__bg {
  position: absolute;
  left: 0;
  top: 73.35px;
  width: 217px;
  height: 247px;
  max-width: none;
  pointer-events: none;
}

/* Phone = screen box; frame + mask are positioned around it in %.
   Same frame / mask as the hero (section 1). */
.step-phone {
  --w: 166.923px;                     /* screen width  */
  --t: 33.69px;                       /* screen top    */
  position: absolute;
  left: 50%;
  top: var(--t);
  width: var(--w);
  aspect-ratio: 247.61 / 534.017;
  transform: translateX(-50%);
  transition: transform 0.5s var(--ease-out);
}

.step-card:hover .step-phone {
  transform: translateX(-50%) translateY(-8px);
}

.step-phone--2 { --w: 171.792px; --t: 28px; }
.step-phone--3 { --w: 171.792px; --t: 31.47px; }

.step-phone__frame {
  position: absolute;
  left: -9.983%;
  top: -4.627%;
  width: 120.51%;
  height: 108.33%;
  max-width: none;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.45));
}

.step-phone__screen {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url("../../assets/images/screen-mask.png");
          mask-image: url("../../assets/images/screen-mask.png");
  -webkit-mask-size: 99.539% 99.893%;
          mask-size: 99.539% 99.893%;
  -webkit-mask-position: 50% 0;
          mask-position: 50% 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.step-phone__screen img {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ---------- Curved arrows between the cards ---------- */
.steps__arrow {
  position: absolute;
  z-index: 4;
  width: 120px;
  height: 56px;
  max-width: none;
  pointer-events: none;
}

.steps__arrow--1 {
  left: calc(30.84% - 60px);           /* centred between card 1 & 2 */
  top: -27px;
}

.steps__arrow--2 {
  left: calc(66.04% - 60px);           /* centred between card 2 & 3 */
  bottom: -17px;
  transform: rotate(-8.42deg) scaleY(-1);
}

/* ---------- Store badges ---------- */
.steps__stores {
  justify-content: center;
  margin-top: 48px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
  .steps__title { font-size: 44px; }
  .step-card { padding-inline: 18px; }
  .step-card__body { padding-inline: 4px; }
  .step-card__title { font-size: 21px; }
  .steps__arrow { display: none; }
}

/* Tablet — cards stack */
@media (max-width: 991px) {
  .steps__title    { font-size: 40px; }
  .steps__subtitle { font-size: 18px; }

  .steps__row {
    flex-direction: column;
    align-items: stretch;
    max-width: 560px;
    margin-inline: auto;
  }

  .step-card { flex: none; }
}

/* Mobile — matches section_4_mobile.png (430 wide) */
@media (max-width: 767px) {
  .steps {
    padding-top: 31px;
    padding-bottom: 52px;
    background: #020d18;
  }

  .steps__title {
    font-size: 26px;
    letter-spacing: -0.26px;
  }

  .steps__subtitle { font-size: 16px; }

  .steps__row {
    gap: 24px;
    margin-top: 24px;
  }

  .step-card {
    padding: 18px 18px 16px;
  }

  .step-card__body { padding: 0 8px 18px; }
  .step-card__title { font-size: 20px; }
  .step-card__desc  { font-size: 14px; }
  .step-card__desc--sm { font-size: 15px; line-height: 20px; }

  .step-visual { height: 262px; }

  .step-phone    { --w: 150.7px; --t: 21.7px; }
  .step-phone--2 { --w: 155.4px; --t: 24.4px; }
  .step-phone--3 { --w: 155.4px; --t: 25.4px; }

  .steps__stores { margin-top: 30px; }
}