/* landing-steps.css — блок «Три шага до старта подготовки».

   Номер в светящемся круге, рядом иконка, между шагами линия со стрелкой.
   Под иконками — только название шага, без описаний. */

.sf { position: relative; padding: clamp(60px, 7.2vw, 118px) 0; color: #eef2f8; }

.sf-eyebrow {
  display: inline-block; margin-bottom: 20px; padding: 8px 18px; border-radius: 999px;
  font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: #8fc2ff; background: rgba(47, 127, 224, .16); border: 1px solid rgba(88, 150, 240, .45);
}
.sf-title {
  margin: 0 0 12px; padding: 0;
  font-size: clamp(28px, 3.3vw, 48px); font-weight: 800; line-height: 1.08;
  letter-spacing: -.04em; color: #fff;
}
.sf-title::before { content: none; }
.sf-lead { margin: 0 0 clamp(38px, 4vw, 66px); font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.6; color: #9fb0c6; }

.sf-steps {
  list-style: none; margin: 0 0 clamp(36px, 3.8vw, 60px); padding: 0;
  /* у последнего шага нет линии, поэтому его колонка — по содержимому:
     иначе справа остаётся пустое поле и ряд выглядит сдвинутым влево */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: clamp(20px, 2.4vw, 40px);
}
.sf-step { --sc: #3a97f2; display: flex; flex-direction: column; gap: 18px; }
.sf-head { display: flex; align-items: center; gap: 14px; }

.sf-n {
  display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%;
  font: 800 21px/1 var(--sans); color: #fff;
  border: 1px solid color-mix(in srgb, var(--sc) 60%, transparent);
  background: radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--sc) 42%, transparent), rgba(8, 12, 20, .9) 70%);
  box-shadow: 0 0 26px -4px color-mix(in srgb, var(--sc) 75%, transparent),
              inset 0 0 18px -6px color-mix(in srgb, var(--sc) 80%, transparent);
}
.sf-ic {
  display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 16px;
  color: color-mix(in srgb, var(--sc) 85%, #fff);
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  box-shadow: 0 0 22px -10px color-mix(in srgb, var(--sc) 80%, transparent);
}
.sf-ic svg { width: 26px; height: 26px; }

/* линия до следующего шага */
.sf-line { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.sf-line i { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); }

.sf-step b { font-size: clamp(17px, 1.4vw, 21px); font-weight: 800; letter-spacing: -.02em; color: #fff; }

.sf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2vw, 30px); }
.sf-btn {
  display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 30px;
  border-radius: 999px; font: 700 16.5px/1 var(--sans); text-decoration: none; color: #fff;
  background: linear-gradient(160deg, #3a97f2 0%, #1e6ed2 100%);
  box-shadow: 0 0 30px -8px rgba(45, 140, 240, .8), 0 16px 34px -20px rgba(0, 0, 0, .9);
  transition: filter .15s ease, transform .13s ease;
}
.sf-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.sf-btn svg { width: 18px; height: 18px; }
.sf-note {
  padding-left: clamp(16px, 2vw, 30px); border-left: 1px solid rgba(255, 255, 255, .1);
  font-size: 14px; line-height: 1.5; color: #8b9bb0;
}

@media (max-width: 900px) {
  .sf-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sf-line { display: none; }
  .sf-note { padding-left: 0; border-left: none; }
}
@media (prefers-reduced-motion: reduce) { .sf-btn { transition: none; } }