/* ============================================================
   06 — Stages. Значения сняты из Figma-фреймов Stages
   (1600 / 1200 / 1024 / 768 / 430 / 375), fileKey oFtdKnfuDczuCj4v7e0emt.
   База = фрейм 1600 (боковые поля страницы 24 — решение Alexa,
   поверх макетных 30). Остальные поля — из макета.
   ============================================================ */

.stg { padding: 0 24px; font-family: 'Inter', sans-serif; }
.stg, .stg * { box-sizing: border-box; }

/* Подложка блока */
.stg-block {
  position: relative;
  overflow: hidden;               /* фрейм клипает «атом» по прямоугольнику */
  background: #EAEAEA;
  border-radius: 32px;     /* = радиус карточки 24 + отступ 8: зазор одинаков по всему периметру */
  padding: 32px 8px 8px;   /* правка Alexa: карточки в 8 от левой/правой/нижней кромки */
}

/* Заголовок */
.stg-heading {
  margin: 0 24px 92px;     /* заголовок держит прежний внутренний отступ */
  max-width: 1113px;
  font-weight: 700;
  font-size: 64px;
  line-height: 69px;
  letter-spacing: -0.64px;
  color: #171719;
}
.stg-heading-muted { color: rgba(23, 23, 25, 0.48); }
.stg-heading-dark { color: #171719; }

/* Переключаемые куски текста (различия между фреймами макета) */
.stg-ds768,      /* двойной пробел «and  the» — только на 768 */
.stg-hbr-a,      /* ручные переносы заголовка — только на 430 */
.stg-hbr-b,
.stg-hbr-sm,     /* перенос перед «I/We divide…» — мобильные */
.stg-br-768,     /* перенос в тайтле «Wireframe / and prototype» — 768 */
.stg-br-375,     /* перенос в карточке 4 — 375 */
.stg-only-m { display: none; }

/* Атом (линия-декор в правом верхнем углу) */
.stg-atom {
  position: absolute;
  top: -178.37px;
  right: -188.35px;
  width: 527.516px;
  height: 531.312px;
  pointer-events: none;
}

/* Сетка карточек */
.stg-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 8px;   /* фреймер: зазор карточек 8 (замер живого сайта) */
  row-gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Карточка */
.stg-card {
  position: relative;
  height: 272px;
  overflow: hidden;
  background: #F7F7F7;
  border-radius: 24px;
}
.stg-card--dark { background: #171719; }

/* Кружок с номером */
.stg-card__num { position: absolute; top: 0; left: 0; width: 48px; height: 48px; }  /* фигма: round x=0 y=0 — заподлицо с углом карточки */
.stg-card--dark .stg-card__num { left: 0; }
.stg-card__num img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stg-card__num span {
  position: absolute;
  top: calc(50% - 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  text-align: center;
  font-weight: 500;       /* схема Alexa: medium вместо bold */
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.36px;
  color: #EAEAEA;
}
.stg-card--dark .stg-card__num span { color: #171719; }

/* Тайтл карточки */
.stg-card__title {
  position: absolute;
  top: 68px;          /* фигма: заголовок y=68 (= 20 от низа кружка 0..48) */
  left: 24px;
  margin: 0;
  font-weight: 400;
  font-size: 26px;        /* схема Alexa: 26 */
  line-height: 34px;
  letter-spacing: -0.52px;
  white-space: nowrap;
  color: #333333;
}
.stg-card--4 .stg-card__title,
.stg-card--5 .stg-card__title { color: #171719; }
.stg-card--6 .stg-card__title { color: #EAEAEA; }

/* Текст карточки — прижат к низу */
.stg-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 24px 24px 24px;   /* мера как в макете: 24 слева и справа */
  font-size: 18px;        /* схема Alexa: 18 */
  line-height: 26px;
  letter-spacing: -0.168px;
  color: #333333;
}
.stg-card--4 .stg-card__body,
.stg-card--5 .stg-card__body { color: #171719; }
.stg-card--6 .stg-card__body { color: #EAEAEA; }

/* ---------- 1200: фрейм 1160, поля страницы 20 ---------- */
@media (max-width: 1200px) {
  .stg { padding: 0 20px; }
  .stg-block { padding: 40px 32px 32px; }
  .stg-heading { max-width: 840px; margin: 0 8px 72px; }
  .stg-atom { right: -345.99px; }
  .stg-grid { column-gap: 12px; row-gap: 32px; }
  .stg-card { height: 316px; }
}

/* ---------- 1024: фрейм 992, поля страницы 16, 2 колонки ---------- */
@media (max-width: 1024px) {
  .stg { padding: 0 16px; }
  .stg-grid { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  .stg-atom { right: -284.52px; }
}

/* ---------- 768: фрейм 744, поля страницы 12 ---------- */
@media (max-width: 1023px) {
  .stg { padding: 0 12px; }
  .stg-block { padding: 40px 16px 16px; }
  .stg-heading {
    max-width: 508px;
    margin: 0 24px 48px;
    font-size: 44px;
    line-height: 46px;
    letter-spacing: -0.44px;
  }
  .stg-ds768 { display: inline; }
  .stg-br-768 { display: inline; }
  .stg-atom { top: -139px; right: -160.22px; width: 416.245px; height: 419.24px; }
  .stg-card { height: 316px; }
  .stg-card--1, .stg-card--2 { height: 362px; }
}

/* ---------- 430: фрейм 414, поля страницы 8, 1 колонка, мобильные карточки ---------- */
@media (max-width: 719px) {
  .stg { padding: 0 8px; }
  .stg-block { border-radius: 38px; padding: 16px 12px 12px; }  /* = 26 + 12 */
  .stg-heading {
    max-width: 345px;
    margin: 0 4px 48px;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.32px;
  }
  .stg-ds768 { display: none; }
  .stg-hbr-a, .stg-hbr-b, .stg-hbr-sm { display: inline; }
  .stg-br-768 { display: none; }
  .stg-only-d { display: none; }
  .stg-only-m { display: inline; }
  .stg-br-d { display: none; }
  .stg-atom { top: -84px; right: -193.75px; width: 274.152px; height: 276.125px; }
  .stg-grid { grid-template-columns: 1fr; row-gap: 16px; }
  .stg-card { height: 210px; border-radius: 26px; }
  .stg-card--1, .stg-card--2 { height: 210px; }
  .stg-card--dark { background: #232325; }
  .stg-card__num { top: 2px; left: 2px; }
  .stg-card--dark .stg-card__num { left: 2px; }
  .stg-card--dark .stg-card__num span { color: #232325; }
  .stg-card__title {
    top: 64px;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.168px;
    color: #171719;
  }
  .stg-card--6 .stg-card__title { color: #EAEAEA; }
  .stg-card__body {
    padding: 0 24px 24px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #171719;
  }
  .stg-card--5 .stg-card__body { padding-right: 41px; }
  .stg-card--6 .stg-card__body { padding-right: 48px; color: #EAEAEA; }
}

/* ---------- 375: фрейм 359, поля страницы 8 ---------- */
@media (max-width: 375px) {
  .stg-heading { max-width: 288px; }
  .stg-hbr-a, .stg-hbr-b { display: none; }
  .stg-br-375 { display: inline; }
  .stg-atom { top: -74px; right: -119.44px; width: 238.435px; height: 240.151px; }
  .stg-card--1, .stg-card--2, .stg-card--3, .stg-card--6 { height: 240px; }
  .stg-card--4 { height: 216px; }
  .stg-card--5 { height: 214px; }
}



/* Мера текста подбирается ПОД КАЖДУЮ карточку: три строки, первая не короче
   второй, без вдов и без висячих служебных слов в концах строк. */
@media (min-width: 1201px) {
  .stg-card--1 .stg-card__body { padding-right: 52px; }
  .stg-card--2 .stg-card__body { padding-right: 24px; }   /* «product,» в первой строке */
  .stg-card--3 .stg-card__body { padding-right: 70px; }
  .stg-card--4 .stg-card__body { padding-right: 108px; }  /* три строки: «…visual style» / «with…create the» / «finished design.» */
  .stg-card--5 .stg-card__body { padding-right: 34px; }
  .stg-card--6 .stg-card__body { padding-right: 82px; }
}

/* ============================================================
   ОДНА КОЛОНКА (≤1023.98) — единый блок.
   Собран из замеров живого Framer и прямых указаний Alexa.
   Десктоп ≥1024 не тронут: ниже нет ни одного правила без медиазапроса.

   Кадры Framer и что в них меняется:
     ≤374.98    поля панели 4,  карточка +4, текст слева 20, дуга 296x222 / свес 164 / верх 70
     375…413.98 поля панели 6,  карточка +4, текст слева 20, дуга 347x260 / свес 188 / верх 85
     414…519.98 поля панели 6,  карточка +4, текст слева 24, дуга 410x307 / свес 235 / верх 110
     520…539.98 поля панели 8,  карточка +4, текст слева 24, дуга 455x341 / свес 225 / верх 110
     540…719.98 поля панели 8,  карточка +4, текст слева 24, дуга 455x341 / свес 215 / верх 110
     720…1023.98 поля панели 12, карточка +4, текст слева 24, дуга 455x341 / свес 215 / верх 110

   Постоянно на всей полосе: заголовок карточки 28/36, текст 20/28,
   радиус 26, кружок 48x48 со смещением 2, заголовок на y=64,
   трекинг normal, вертикальный зазор карточек 6.

   Отличия от эталона — по прямым указаниям Alexa:
     высота карточки по контенту, а не 280/396 с текстом у нижней кромки;
     заголовок карточки без меры 303, поэтому в одну строку.
   ============================================================ */

/* — сетка и панель — */
@media (max-width: 1023.98px) {
  .stg { padding: 0; overflow-x: clip; }
  .stg-block {
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 4px;      /* было 12/16 — низ не совпадал с боками */
    border-radius: 32px 32px 29px 29px;   /* из проекта Framer, вариант 375/414 */
    overflow: visible;
  }
  .stg-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 6px;
  }
}
@media (min-width: 720px) and (max-width: 1023.98px) { .stg { padding-left: 12px; padding-right: 12px; } }
@media (min-width: 520px) and (max-width: 719.98px)  { .stg { padding-left: 8px;  padding-right: 8px;  } }
@media (min-width: 375px) and (max-width: 519.98px)  { .stg { padding-left: 6px;  padding-right: 6px;  } }
@media (max-width: 374.98px)                          { .stg { padding-left: 4px;  padding-right: 4px;  } }

/* — карточка: высота по контенту — */
@media (max-width: 1023.98px) {
  .stg-card,
  .stg-card--1, .stg-card--2, .stg-card--3,
  .stg-card--4, .stg-card--5, .stg-card--6 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    gap: 48px;                 /* заголовок → текст, +24 по указанию Alexa */
    padding: 64px 24px 20px;   /* низ меньше, чтобы текст не висел над скруглением */
    border-radius: 26px;
    overflow: visible;
  }

  .stg-card__num { top: 2px; left: 2px; }
  .stg-card--dark .stg-card__num { left: 2px; }

  .stg-card__title {
    position: static;
    max-width: none;
    white-space: normal;
    margin: 0;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: normal;
    flex: 0 0 auto;
  }

  .stg-card__body {
    position: static;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: normal;
    /* ровный правый край: без него одна строка вылезала на 60-70px дальше
       соседних и абзац читался рваным */
    text-wrap: balance;
  }

  /* правые инсеты текста — эталонные, они держат место под дугу */
  .stg-card--1 .stg-card__body { margin-right: 28px; }
  .stg-card--2 .stg-card__body { margin-right: 4px;  }
  .stg-card--3 .stg-card__body { margin-right: 24px; }
  .stg-card--4 .stg-card__body { margin-right: 2px;  }
  .stg-card--5 .stg-card__body { margin-right: 0;    }
  .stg-card--6 .stg-card__body { margin-right: 2px;  }

  /* ручных переносов в описаниях нет */
  .stg-br-768, .stg-br-375, .stg-br-d { display: none; }
}

/* — узкие кадры: текст слева 20, свои инсеты, ниже нижний отступ — */
@media (max-width: 413.98px) {
  .stg-card,
  .stg-card--1, .stg-card--2, .stg-card--3,
  .stg-card--4, .stg-card--5, .stg-card--6 {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 16px;
  }
  .stg-card--1 .stg-card__body { margin-right: 10px; }
  .stg-card--2 .stg-card__body { margin-right: 18px; }
  .stg-card--3 .stg-card__body { margin-right: 9px;  }
  .stg-card--4 .stg-card__body { margin-right: 4px;  }
  .stg-card--5 .stg-card__body { margin-right: 16px; }
  .stg-card--6 .stg-card__body { margin-right: 4px;  }
}

/* — заголовок блока: мера эталона оставляет угол под дугу — */
@media (max-width: 1023.98px) {
  .stg-heading {
    margin-left: 16px;
    margin-right: 16px;
    letter-spacing: normal;
    position: relative;
    z-index: 1;
  }
  .stg-grid { position: relative; z-index: 1; }
}
/* Кегль заголовка секции — три ступени из проекта Framer, не двенадцать:
   ≤374 → 25/28, 375…1023 → 32/36, ≥1024 → 64/69.
   Отступ заголовка: 16 до 519, 24 от 520 (в проекте так же). */
@media (min-width: 520px) and (max-width: 1023.98px) {
  .stg-heading { margin-left: 24px; margin-right: 24px; }
  .stg-block { border-radius: 40px 40px 29px 29px; }
}
@media (max-width: 374.98px) {
  .stg-heading { font-size: 25px; line-height: 28px; }
}
@media (min-width: 375px) and (max-width: 1023.98px) {
  /* в старом блоке ≤1023 стояло 44/46 — в проекте вся полоса 375…1023 идёт 32/36 */
  .stg-heading { font-size: 32px; line-height: 36px; }
}
@media (max-width: 719.98px)  { .stg-heading { max-width: 345px; } }
@media (max-width: 413.98px)  { .stg-heading { max-width: 288px; } }

/* — дуга: геометрия эталона, слой под текстом — */
@media (max-width: 1023.98px) {
  .stg-atom {
    display: block;
    z-index: 0;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
  }
}
@media (min-width: 540px) and (max-width: 1023.98px) { .stg-atom { width: 455px; height: 341px; right: -215px; top: -110px; } }
@media (min-width: 520px) and (max-width: 539.98px)  { .stg-atom { width: 455px; height: 341px; right: -225px; top: -110px; } }
@media (min-width: 414px) and (max-width: 519.98px)  { .stg-atom { width: 410px; height: 307px; right: -235px; top: -110px; } }
@media (min-width: 375px) and (max-width: 413.98px)  { .stg-atom { width: 347px; height: 260px; right: -188px; top:  -85px; } }
@media (max-width: 374.98px)                          { .stg-atom { width: 296px; height: 222px; right: -164px; top:  -70px; } }