/* 12 — Improving. База = фрейм 1600 (панель 1600×940, горизонтальный коллаж),
   ≤1200 — вертикальная раскладка из фреймов 1200/1024/768/430/375/320. */

.imp {
  padding: 0 24px; /* поля страницы на 1600 — решение Alexa (в макете 30) */
  font-family: "Inter", sans-serif;
  color: #eaeaea;
}
.imp img { display: block; }
.imp h2, .imp h3, .imp p { margin: 0; font-weight: 400; }

.imp-panel {
  position: relative;
  height: 940px;
  background: #232325;
  border-radius: 32px;
  overflow: hidden;
}

/* ── фоновые свечения ───────────────────────────────────────── */
.imp-colors { position: absolute; inset: 0; overflow: hidden; }
.imp-blob { position: absolute; }
.imp-blob img { position: absolute; }
/* размытый круг #8421B2, канвас 1877×1877 (677 × 277.26%) */
.imp-blob--a { left: -176px; bottom: -219px; width: 677px; height: 677px; }
.imp-blob--a img { left: -88.63%; top: -88.63%; width: 277.26%; height: 277.26%; }
.imp-blob--b { display: none; left: -176px; bottom: 562px; width: 677px; height: 677px; }
.imp-blob--b img { left: -88.63%; top: -88.63%; width: 277.26%; height: 277.26%; }
/* верхне-правый, r 318.5, канвас 1837 (637 × 288.38%) */
.imp-blob--c { right: -170px; top: -299px; width: 637px; height: 637px; }
.imp-blob--c img { left: -94.19%; top: -94.19%; width: 288.38%; height: 288.38%; }

/* ── декор 1600 ─────────────────────────────────────────────── */
.imp-eye { position: absolute; left: -715px; top: -631px; width: 2658.114px; height: 2221.447px; }
.imp-eye img { width: 100%; height: 100%; }
.imp-arc { position: absolute; width: 664px; height: 300px; }  /* натуральный размер SVG: контур 656×292 внутри поля 4px — масштаб 1:1, форма не деформируется */
.imp-arc img { position: absolute; inset: 0; width: 100%; height: 100%; }
.imp-arc--bl { left: 17px; top: 627px; }   /* контур встаёт в фигмовские 21/627 */
.imp-arc--tr { right: 17px; top: 13px; transform: rotate(180deg); }

/* ── линии ≤1200 (по умолчанию скрыты) ──────────────────────── */
.imp-lines { display: none; position: absolute; }
.imp-lines--ellipse {
  left: -859px; top: 60px; width: 2227px; height: 865px;
  border: 1px solid #eaeaea; border-radius: 50%; opacity: 0.48;
}
.imp-lines--img { left: calc(50% - 884px); top: 53px; width: 1563px; height: 865px; }
.imp-lines--img375 { left: -803px; top: 53px; width: 1563px; height: 932px; }
.imp-lines img { width: 100%; height: 100%; }

/* ── стеклянная плашка за +44% (1600) ───────────────────────── */
.imp-glass {
  position: absolute; right: 21px; bottom: 21px; width: 314px; height: 158px;
  background: rgba(245, 245, 245, 0.04);
  border: 1px solid #eaeaea;
  border-radius: 22px;
  opacity: 0.72;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(31.1px);
  backdrop-filter: blur(31.1px);
}

/* ── заголовок ──────────────────────────────────────────────── */
.imp-head {
  position: absolute; left: 30px; top: 30px;
  display: flex; flex-direction: column; gap: 32px;
}
.imp-title {
  width: 560px;
  font-size: 36px; line-height: 40px; letter-spacing: 0.72px;
  text-transform: uppercase;
}
.imp-sub {
  width: 485px;
  font-size: 20px; line-height: 28px; letter-spacing: -0.168px;
}
.imp-sub-b { display: none; }

/* ── path-линии ≤1200 ───────────────────────────────────────── */
.imp-path { display: none; position: absolute; }
.imp-path img { position: absolute; bottom: 0; }
.imp-path-d { left: -68.37%; top: -12.91%; width: 230.36%; height: 112.91%; }
.imp-path-t { display: none; left: -61.78%; top: -7.45%; width: 223.77%; height: 107.45%; }
.imp-path-m { display: none; left: -0.16%; top: 0; width: 100.34%; height: 100%; }

/* ── круглая CTA ≤1200 ──────────────────────────────────────── */
.imp-cta {
  display: none; position: absolute;
  width: 208px; height: 208px;
  align-items: center; justify-content: center; text-align: center;
  background: #eaeaea; border-radius: 900px;
  color: #2c2c2c; font-size: 16px; line-height: 20px; font-weight: 600;
  text-transform: uppercase;
}

/* ── перк-карточки ──────────────────────────────────────────── */
/* база: якоря внутри контентной области (панель минус 30px) */
.imp-cards { position: absolute; inset: 30px; }
.imp-card {
  position: absolute; width: 315px; height: 133px;
  border-radius: 20px; overflow: hidden;
  background: rgba(164, 164, 164, 0.28);
  -webkit-backdrop-filter: blur(6.55px);
  backdrop-filter: blur(6.55px);
}
.imp-card--light { background: #eaeaea; color: #171719; }
.imp-card--1 { right: 323px; top: 0; }
.imp-card--2 { right: 0; top: 0; }
.imp-card--3 { right: 0; top: 141px; }
.imp-card--4 { left: 0; top: 606px; }
.imp-card--5 { left: 0; top: 747px; }
.imp-card--6 { left: 323px; top: 747px; }

.imp-cardTitle {
  position: absolute; left: 16px; top: 16px; width: 233px;
  font-size: 20px; line-height: 28px; letter-spacing: -0.168px;
}
.imp-cardBody {
  position: absolute; left: 16px; bottom: 16px;
  width: 260px; max-width: calc(100% - 32px);
  font-size: 16px; line-height: 24px;
}
.imp-cardBody--lh20 { line-height: 20px; }
.imp-badge {
  position: absolute; right: 4px; top: 4px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #eaeaea; color: #171719;
  font-size: 16px; line-height: 24px;
}
.imp-card--light .imp-badge { background: #171719; color: #eaeaea; }
.imp-cursor { position: absolute; left: 240px; top: 18px; width: 18px; height: 27px; }

/* ── рамка вокруг сетки карточек ≤1200 ──────────────────────── */
.imp-cardsFrame {
  display: none; position: absolute; pointer-events: none;
  border: 1px solid #eaeaea; border-radius: 26px; opacity: 0.72;
}

/* ── карточка +44% customer loyalty (1600) ──────────────────── */
.imp-loyal {
  position: absolute; right: 30px; bottom: 30px; width: 296px; height: 140px;
  background: rgba(164, 164, 164, 0.28);
  border: 1px solid #eaeaea; border-radius: 16px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.imp-loyalVal { position: absolute; left: 16px; top: 16px; font-size: 44px; line-height: 48px; }
.imp-loyalGraph { position: absolute; top: 0; bottom: 0; left: 42.91%; right: 0.34%; overflow: hidden; }
.imp-graphFill { position: absolute; left: -7%; right: -10.67%; top: 5.15%; bottom: 12.5%; }
.imp-graphLine { position: absolute; left: -7%; right: -8%; top: 6.25%; bottom: 12.5%; }
.imp-graphFill img, .imp-graphLine img { width: 100%; height: 100%; }
.imp-loyalChip {
  position: absolute; left: 8px; top: 96px;
  padding: 8px; border-radius: 10px;
  background: #eaeaea; color: #232325;
  font-size: 16px; line-height: 20px; text-transform: uppercase; white-space: nowrap;
}

/* ── центральная карточка-донат ─────────────────────────────── */
.imp-donut {
  position: absolute; left: 50%; top: 50%;
  width: 328px; height: 428px;
  transform: translate(-50%, -50%);
  background: rgba(224, 211, 228, 0.28);
  border-radius: 16px;
  box-shadow: -9px -5px 23.4px 0 #2a232f, 5px 13px 26.9px 0 rgba(31, 31, 31, 0.78);
  -webkit-backdrop-filter: blur(15.05px);
  backdrop-filter: blur(15.05px);
}
.imp-donutStack {
  position: absolute; left: 50%; top: 35px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.imp-ring { position: relative; width: 258px; height: 258px; overflow: hidden; }
.imp-ringImg { position: absolute; inset: 0; width: 100%; height: 100%; }
.imp-donutVal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.imp-val { white-space: nowrap; }
.imp-val-a { font-size: 50px; line-height: 52px; font-weight: 400; }
.imp-val-b { display: none; font-size: 44px; line-height: 1.4; font-weight: 500; }
.imp-donutLabel {
  width: 150px; font-size: 14px; line-height: 18px; font-weight: 500;
  letter-spacing: -0.14px; text-align: center;
}
.imp-donutCaption {
  width: 292px; max-width: 100%;
  font-size: 15px; line-height: 20px; font-weight: 600; text-align: center;
}
.imp-ringNum {
  position: absolute; width: 39px; height: 39px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #eaeaea; color: #232325;
  font-size: 18px; line-height: 36px; font-weight: 500;
}
.imp-ringNum--1 { right: 110px; top: 0; }
.imp-ringNum--2 { right: 71px; top: 7px; }
.imp-ringNum--3 { right: 37.5px; top: 27px; }
.imp-ringNum--4 { right: 12.5px; top: 58px; }
.imp-ringNum--5 { right: 0.5px; top: 96px; }
.imp-ringNum--6 { right: 3px; top: 135px; }

/* ═══ 1200: вертикальная раскладка (фрейм 1160×1524) ═════════ */
@media (max-width: 1200px) {
  .imp { padding: 0 20px; }
  .imp-panel { height: 1524px; border-radius: 36px 36px 46px 46px; }

  /* фон: COLORS фиксированной высоты 1996, средний глоу включается */
  .imp-colors { inset: auto; top: 0; left: 0; right: 0; height: 1996px; }
  .imp-blob--b { display: block; }

  /* декор 1600 гаснет */
  .imp-eye, .imp-arc, .imp-glass, .imp-loyal { display: none; }
  .imp-lines--ellipse { display: block; }

  .imp-head { left: 20px; top: 20px; }
  .imp-title { width: 558px; }
  .imp-sub { width: 529px; }
  .imp-sub-a { display: none; }
  .imp-sub-b { display: inline; }

  .imp-path {
    display: block;
    left: calc(50% + 1px); top: 481px; width: 266px; height: 661px;
    transform: translateX(-50%);
  }
  .imp-cta { display: flex; left: 96px; top: 288px; }

  .imp-cards {
    inset: auto; left: 28px; right: 28px; top: 1084px;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .imp-card { position: static; width: calc(50% - 4px); height: 132px; }
  .imp-cardsFrame { display: block; left: 20px; right: 20px; top: 1076px; height: 428px; }

  .imp-donut {
    width: 492px; height: 438px;
    left: calc(50% + 10px); top: 556px; transform: translateX(-50%);
    background: rgba(131, 131, 131, 0.28);
    box-shadow: -9px -5px 23.4px 0 #2a232f, 5px 13px 26.9px 0 rgba(26, 26, 26, 0.38);
  }
  .imp-donutStack { top: 50%; transform: translate(-50%, -50%); gap: 32px; }
  .imp-donutVal {
    left: 54px; top: 70px; transform: none; gap: 0; min-width: 150px;
  }
  .imp-val-a { display: none; }
  .imp-val-b { display: block; }
  .imp-donutLabel { font-weight: 400; line-height: 1.14; }
  .imp-donutCaption { width: 312px; font-weight: 500; }
}

/* ═══ 1024 (фрейм 992×1524): те же построения, поля 16 ═══════ */
@media (max-width: 1024px) {
  .imp { padding: 0 16px; }
  .imp-lines--ellipse { display: none; }
  .imp-lines--img { display: block; }
}

/* ═══ 768 (фрейм 744×1520) ══════════════════════════════════ */
@media (max-width: 768px) {
  .imp { padding: 0 12px; }
  .imp-panel { height: 1520px; border-radius: 36px; }

  .imp-path { left: calc(50% - 9px); top: 485px; }
  .imp-path-d { display: none; }
  .imp-path-t { display: block; }

  .imp-cta { left: 106px; top: 292px; }
  .imp-donut { left: 50%; top: 560px; }

  .imp-cards { left: 20px; right: 20px; top: 1088px; }
  .imp-cardsFrame { left: 12px; right: 12px; top: 1080px; }
}

/* ═══ 430 (фрейм 414×1960): одна колонка ════════════════════ */
@media (max-width: 430px) {
  .imp { padding: 0 8px; }
  .imp-panel { height: 1960px; border-radius: 28px; }

  .imp-head { left: 16px; top: 16px; }
  .imp-title { width: 354px; }
  .imp-sub { width: 354px; }

  .imp-cta { left: 28px; top: 358px; }

  .imp-path {
    left: 54px; top: 485px; width: 266px; height: 625.5px; transform: none;
  }
  .imp-path-t { display: none; }
  .imp-path-m { display: block; }

  .imp-donut { width: 390px; max-width: calc(100% - 24px); top: 626px; left: 50%; transform: translateX(-50%); }

  .imp-cards { left: 12px; right: 12px; top: 1116px; }
  .imp-card { width: 100%; }
  .imp-cardsFrame { left: 6px; right: 6px; top: 1110px; height: 844px; border-radius: 24px; }
}

/* ═══ 375 (фрейм 363×1990) ══════════════════════════════════ */
@media (max-width: 375px) {
  .imp { padding: 0 6px; }
  .imp-panel { height: 1990px; }

  .imp-lines--img { display: none; }
  .imp-lines--img375 { display: block; }

  .imp-title { width: 291px; }
  .imp-sub { width: 291px; }

  .imp-cta { left: 24px; top: 389px; }

  .imp-path { left: calc(50% - 1px); top: 509px; width: 269px; height: 632px; transform: translateX(-50%); }

  .imp-donut { width: 347px; max-width: calc(100% - 16px); top: 657px; }

  .imp-cards { top: 1146px; }
  .imp-cardsFrame { top: 1140px; }
}

/* ═══ 320 (фрейм 308×1990) ══════════════════════════════════ */
@media (max-width: 320px) {
  .imp-panel { height: 2060px; }   /* карточки доходили до 2012 при панели 1990 */
  .imp-head { left: 12px; top: 20px; }
  .imp-cta { top: 404px; }
  .imp-path { left: 21px; top: 517.5px; width: 266px; height: 625.5px; transform: none; }
  .imp-donut { width: 300px; max-width: calc(100% - 8px); top: 672px; }
  .imp-cards { left: 10px; right: 10px; top: 1148px; }
  .imp-cardsFrame { left: 4px; right: 4px; top: 1142px; }
}

/* ═══ Одна колонка до 719.98 — единый блок ═══════════════════
   Что было сломано на 475 (замер):
     заголовок 558px в секции 451 — резался справа на 83px;
     подзаголовок так же;
     карточки стояли на координатах ДВУХколоночной раскладки
     (--1 right:323 / --2 right:0, оба top:0) и при width:100%
     ложились друг на друга — 9 наложений текста;
     в полосе 431…767 вообще не было мобильного кадра: работал 768.
   Стало: карточки — обычная колонка, их содержимое в потоке,
   заголовок и подзаголовок по ширине секции.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 719.98px) {
  .imp-title,
  .imp-sub,
  .imp-sub-a,
  .imp-sub-b { width: auto; max-width: 100%; }

  /* блок карточек остаётся на своём месте в панели, но внутри —
     обычная колонка вместо абсолютных координат двух колонок */
  .imp-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto;
    bottom: auto;
  }

  .imp-card {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }

  .imp-cardTitle,
  .imp-cardBody {
    position: static;
    left: auto; top: auto; bottom: auto;
    width: auto;
    margin: 0;
  }

  /* декоративная рамка под карточками считала их абсолютную высоту */
  .imp-cardsFrame { display: none; }
}

/* 431…719.98: во Framer это кадры 414/520/640 — все одноколоночные.
   В коде этой полосы не было, действовал кадр 768. */
@media (min-width: 431px) and (max-width: 719.98px) {
  .imp { padding: 0 8px; }
  /* одна колонка выше, чем кадр 768: карточки заканчивались на 1840,
     а панель держала 1520 — низ вылезал на 320px */
  .imp-panel { height: 1960px; border-radius: 28px; }
  .imp-head { left: 16px; top: 16px; }
  .imp-cta { left: 28px; top: 358px; }
  .imp-path { left: 54px; top: 485px; width: 266px; height: 625.5px; transform: none; }
  .imp-path-t { display: none; }
  .imp-path-m { display: block; }
  .imp-donut { width: 390px; max-width: calc(100% - 24px); top: 626px; left: 50%; transform: translateX(-50%); }
}