/* Контент-карточка: убираем возможные негативные отступы и накладки */
.service-hero__content{
  margin: 0 !important;                        
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #f7fbf8 0%, #f2fff6 100%);
  border-radius: 1.2rem;
  padding: clamp(1.6rem, 2.2vw, 2.4rem);
  box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,.12);
  min-width: 0;
  contain: layout paint;
}

/* Адаптив: одна колонка — сверху медиа, снизу контент */
@media (max-width: 81.25rem){
  .service-hero{ grid-template-columns: 1fr; }
}


/* ===================== KEY SECTION ===================== */
/* Фолбэки на случай отсутствия твоих переменных */
:root{
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.18 0.02 160);
  --muted: oklch(0.55 0.02 160);
  --surface: oklch(0.99 0.01 160 / .82);
  --rad: 1.2rem;
  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
  --shadow-2: 0 1.25rem 3rem oklch(0.20 0.02 160 / .10);
  --ring: oklch(0.77 0.15 160 / .55);
  --page-pad: clamp(1.2rem, 3vw, 2.4rem);
}

/* Секция и контейнер */
.key-section{
  padding-block: clamp(1rem, 3vw, 2rem);
  position: relative;
  isolation: isolate; /* свой контекст наложений */
}

.key-card{
  background: linear-gradient(180deg, oklch(0.98 0.01 160 / .85), oklch(0.97 0.01 160 / .70));
  border-radius: calc(var(--rad) * 1.4);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: visible;
}

/* Нежный «ореол» по краям контейнера */
.key-card::before{
  content:"";
  position: absolute;
  inset: -2rem -2rem -2.5rem;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 10% -10%, oklch(0.90 0.06 160 / .18), transparent 60%),
    radial-gradient(120% 60% at 90% 110%, oklch(0.90 0.06 160 / .14), transparent 60%);
  filter: blur(0.6rem);
  z-index: -1;
  pointer-events: none;
}

/* Заголовок секции */
.key-title{
  margin: 0 0 clamp(1.2rem, 2.5vw, 1.8rem) 0;
  color: var(--ink);
  text-wrap: balance;
}

/* Сетка карточек */
.key-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 1.6rem);
}

/* Карточка-принцип */
.key-item{
  background: color-mix(in oklab, var(--surface) 90%, white 10%);
  border: 1px solid oklch(0.85 0.02 160 / .25);
  border-radius: var(--rad);
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  box-shadow: var(--shadow-1);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: .6rem;
  contain: layout paint;
}

/* Заголовок карточки */
.key-item .h4{
  margin: 0;
  color: var(--ink);
}

/* Текст карточки */
.key-item p{
  margin: 0;
  color: oklch(0.40 0.02 160);
  line-height: 1.6;
}

/* Ховер/фокус: лёгкий подъём и кольцо */
.key-item:hover{
  transform: translateY(-.25rem);
  box-shadow: var(--shadow-2);
  border-color: oklch(0.80 0.04 160 / .45);
}
.key-item:focus-within{
  outline: none;
  box-shadow: var(--shadow-2), 0 0 0 .2rem var(--ring);
  transform: translateY(-.25rem);
}

/* Скрытый активный эффект для доступности при таб-навигации */
.key-item:focus-visible{
  outline: none;
}

/* Адаптивные колонки: 3 → 2 → 1 */
@media (max-width: 70rem){
  .key-grid
  {
      grid-template-columns: repeat(2, minmax(0, 1fr)); 
      gap: 4.5rem;
  }
}
@media (max-width: 44rem){
  .key-grid{ grid-template-columns: 1fr; }
}

/* Тёмная тема (если у тебя есть data-theme="dark" или .theme-dark) */
[data-theme="dark"] .key-card,
.theme-dark .key-card{
  background: linear-gradient(180deg, oklch(0.22 0.02 160 / .85), oklch(0.18 0.02 160 / .85));
}
[data-theme="dark"] .key-item,
.theme-dark .key-item{
  background: oklch(0.26 0.02 160 / .6);
  border-color: oklch(0.40 0.02 160 / .35);
  box-shadow: 0 .6rem 1.6rem oklch(0.08 0.02 160 / .45);
}
[data-theme="dark"] .key-item p,
.theme-dark .key-item p{
  color: oklch(0.78 0.02 160);
}

/* Уважение к «уменьшить анимацию» */
@media (prefers-reduced-motion: reduce){
  .key-item{ transition: none; transform: none !important; }
}


/* ===================== STEPS / ЭТАПЫ РАБОТЫ ===================== */
:root{
  /* фолбэки (подхватятся твои, если уже есть) */
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.18 0.02 160);
  --muted: oklch(0.45 0.02 160);
  --surface: oklch(0.99 0.01 160 / .90);
  --rad: 1.2rem;
  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
  --shadow-2: 0 1.25rem 3rem oklch(0.20 0.02 160 / .10);
  --ring: oklch(0.77 0.15 160 / .55);
}

/* список в сетку, без маркеров, с авто-нумерацией */
.steps-line{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 1.6rem);
  counter-reset: step;
  align-items: stretch;
}

/* карточка этапа */
.key-step{
  position: relative;
  min-width: 0;
  min-height: 100%;
  background: color-mix(in oklab, var(--surface) 92%, white 8%);
  border: 1px solid oklch(0.86 0.02 160 / .28);
  border-radius: var(--rad);
  box-shadow: var(--shadow-1);
  padding: clamp(1.2rem, 2.4vw, 1.6rem)
           clamp(1.2rem, 2.4vw, 1.6rem)
           clamp(1.2rem, 2.4vw, 1.6rem)
           calc(1.2rem + 3.2rem);               /* место под бейдж */
  display: grid;
  align-content: start;
  gap: .5rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

/* бейдж с номером (из counter) */
.key-step::before{
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: clamp(1rem, 2.2vw, 1.2rem);
  top: clamp(1rem, 2.2vw, 1.2rem);
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 999rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: oklch(0.20 0.02 160);
  font-weight: 800;
  font-size: 1rem;
  display: grid;
  place-items: center;
  border: .14rem solid oklch(0.98 0.01 160 / .90);
  box-shadow: 0 .4rem 1rem oklch(0.20 0.02 160 / .10);
}

/* заголовок + подпись */
.key-step > strong{
  color: var(--ink);
  font-weight: 800;
}
.key-step > span{
  color: var(--muted);
  line-height: 1.6;
}

/* ховер/фокус и а11y-кольцо */
.key-step:hover{
  transform: translateY(-.25rem);
  box-shadow: var(--shadow-2);
  border-color: oklch(0.80 0.04 160 / .45);
}
.key-step:focus-within{
  outline: none;
  transform: translateY(-.25rem);
  box-shadow: var(--shadow-2), 0 0 0 .2rem var(--ring);
}

/* адаптив: 4 → 2 → 1 */
@media (max-width: 70rem){
  .steps-line{ 
      grid-template-columns: repeat(2, minmax(0, 1fr)); 
      gap: 4.5rem;
  }
}
@media (max-width: 44rem){
  .steps-line{ grid-template-columns: 1fr; }
}

/* тёмная тема (если используется) */
[data-theme="dark"] .key-step,
.theme-dark .key-step{
  background: oklch(0.26 0.02 160 / .6);
  border-color: oklch(0.40 0.02 160 / .35);
  box-shadow: 0 .6rem 1.6rem oklch(0.08 0.02 160 / .45);
}
[data-theme="dark"] .key-step > span,
.theme-dark .key-step > span{
  color: oklch(0.78 0.02 160);
}

/* уважаем reduce-motion */
@media (prefers-reduced-motion: reduce){
  .key-step{ transition: none; transform: none !important; }
}


/* =============== SERVICE BODY: "Что входит в услугу" =============== */
:root{
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.18 0.02 160);
  --muted: oklch(0.45 0.02 160);
  --surface: oklch(0.99 0.01 160 / .92);
  --rad: 1.2rem;
  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
  --shadow-2: 0 1.25rem 3rem oklch(0.20 0.02 160 / .10);
  --ring: oklch(0.77 0.15 160 / .55);

  /* управление расстояниями/подъёмом */
  --pill-lift: .28rem;
  --pill-gap: clamp(1.2rem, 2.6vw, 1.6rem);
}

.service-body{
  padding-block: clamp(2rem, 6vw, 4rem);
}

/* Заголовок секции */
.service-body > .h3{
  margin: 0 0 clamp(1rem, 2.4vw, 1.4rem);
  color: var(--ink);
}

/* Список как адаптивная сетка 3→2→1, c анти-слипанием по вертикали */
.service-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); /* меняй 26rem при желании */
  column-gap: var(--pill-gap);
  row-gap: calc(var(--pill-gap) + var(--pill-lift) + .6rem);   /* запас от подъёма+тени */
  isolation: isolate;
}

/* Пилюлька */
.service-list > li{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .9rem;
  min-height: 4rem;
  padding: clamp(1rem, 2.2vw, 1.2rem) clamp(1.2rem, 2.6vw, 1.6rem);
  border-radius: calc(var(--rad) * 1.2);
  background: color-mix(in oklab, var(--surface) 92%, white 8%);
  border: 1px solid oklch(0.86 0.02 160 / .28);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  will-change: transform;
  z-index: 0;
}

.service-list li::before {
    background: none;
}

/* Абзац "Результат на выходе" — аккуратный callout */
.service-body > p{
  margin: clamp(1.2rem, 2.8vw, 1.6rem) 0 0;
  padding: clamp(1rem, 2.2vw, 1.2rem) clamp(1.2rem, 2.6vw, 1.6rem);
  background: linear-gradient(180deg, oklch(0.98 0.01 160 / .85), oklch(0.97 0.01 160 / .70));
  border: 1px solid oklch(0.86 0.02 160 / .28);
  border-radius: var(--rad);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}

/* Тёмная тема (если есть) */
[data-theme="dark"] .service-list > li,
.theme-dark .service-list > li{
  background: oklch(0.26 0.02 160 / .6);
  border-color: oklch(0.40 0.02 160 / .35);
  box-shadow: 0 .6rem 1.6rem oklch(0.08 0.02 160 / .45);
}
[data-theme="dark"] .service-body > p,
.theme-dark .service-body > p{
  background: oklch(0.22 0.02 160 / .7);
  border-color: oklch(0.38 0.02 160 / .35);
  color: oklch(0.92 0.02 160);
}

/* Respect reduce-motion */
@media (prefers-reduced-motion: reduce){
  .service-list > li{ transition: none; transform: none !important; }
}

/* Фолбэк-переменные (если уже есть — не конфликтуют) */
:root{
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.18 0.02 160);
  --surface: oklch(0.99 0.01 160 / .92);
  --muted: oklch(0.45 0.02 160);
  --rad: 1.2rem;
  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
  --shadow-2: 0 1.25rem 3rem oklch(0.20 0.02 160 / .10);

  --pill-lift: .28rem;
  --pill-gap: clamp(1.2rem, 2.6vw, 1.6rem);
}

.service-body{ 
    padding-block: clamp(2rem, 6vw, 4rem); 
}
.service-body > .h3{ margin: 0 0 clamp(1rem, 2.4vw, 1.4rem); color: var(--ink); }

/* Сетка 3→2→1 с анти-слипанием при ховере */
.service-list{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  column-gap: var(--pill-gap);
  row-gap: calc(var(--pill-gap) + var(--pill-lift) + .6rem);
  isolation: isolate;
  margin-bottom: 2rem;
}

.service-item{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .9rem;
  min-height: 4rem;
  padding: clamp(1rem, 2.2vw, 1.2rem) clamp(1.2rem, 2.6vw, 1.6rem);
  background: color-mix(in oklab, var(--surface) 92%, white 8%);
  border: 1px solid oklch(0.86 0.02 160 / .28);
  border-radius: calc(var(--rad) * 1.2);
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  will-change: transform;
  z-index: 0;
}

.service-item:hover,
.service-item:focus-within{
  transform: translateY(calc(-1 * var(--pill-lift)));
  box-shadow: var(--shadow-2);
  border-color: oklch(0.80 0.04 160 / .45);
  outline: none;
  z-index: 3;
}

/* Бейдж и иконка */
.service-badge{
  inline-size: 2rem; block-size: 2rem;
  display: grid; place-items: center;
  border-radius: .8rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; /* цвет иконки */
}

/* stroke-иконки: подчиняются текущему цвету */
.service-icon{
  width: 1.25rem; height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-text{ color: var(--ink); line-height: 1.5; }

/* Тёмная тема (опционально) */
[data-theme="dark"] .service-item,
.theme-dark .service-item{
  background: oklch(0.26 0.02 160 / .6);
  border-color: oklch(0.40 0.02 160 / .35);
  box-shadow: 0 .6rem 1.6rem oklch(0.08 0.02 160 / .45);
}
[data-theme="dark"] .service-text,
.theme-dark .service-text{ color: oklch(0.92 0.02 160); }



/* ===================== VALUE / «Что отличает нас» ===================== */
/* Фолбэки на случай отсутствия переменных */
:root{
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.18 0.02 160);
  --muted: oklch(0.45 0.02 160);
  --surface: oklch(0.99 0.01 160 / .90);
  --rad: 1.2rem;
  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
  --shadow-2: 0 1.25rem 3rem oklch(0.20 0.02 160 / .10);
  --ring: oklch(0.77 0.15 160 / .55);

  --val-lift: .28rem;                               /* подъём карточки на hover */
  --val-gap: clamp(1.2rem, 2.6vw, 1.6rem);         /* базовый зазор */
}

.value-section{ padding-block: clamp(2rem, 6vw, 4rem); }

.value-card{
  background: linear-gradient(180deg, oklch(0.98 0.01 160 / .85), oklch(0.97 0.01 160 / .70));
  border-radius: calc(var(--rad) * 1.4);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-1);
  position: relative;
  isolation: isolate;
}

/* нежный «ореол» вокруг секции */
.value-card::before{
  content:"";
  position:absolute; inset:-2rem -2rem -2.5rem;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 10% -10%, oklch(0.90 0.06 160 / .18), transparent 60%),
    radial-gradient(120% 60% at 90% 110%, oklch(0.90 0.06 160 / .14), transparent 60%);
  filter: blur(0.6rem);
  z-index:-1; pointer-events:none;
}

.value-card > .h2{
  margin: 0 0 clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--ink);
  text-wrap: balance;
}

/* Сетка 3 → 2 → 1, анти-слипание с учётом подъёма */
.value-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: var(--val-gap);
  row-gap: calc(var(--val-gap) + var(--val-lift) + .6rem);
  isolation:isolate;
  gap: 4.5rem;
}

/* Карточка-фича */
.value-item{
  background: color-mix(in oklab, var(--surface) 92%, white 8%);
  border: 1px solid oklch(0.86 0.02 160 / .28);
  border-radius: var(--rad);
  box-shadow: var(--shadow-1);
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  display:grid;
  align-content:start;
  gap:.6rem;
  min-height:100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  will-change: transform;
  z-index:0;
}

.value-item .h4{ margin:0; color:var(--ink); }
.value-item p{ margin:0; color:var(--muted); line-height:1.6; }

/* Hover/focus: аккуратный подъём */
.value-item:hover{
  transform: translateY(calc(-1 * var(--val-lift)));
  box-shadow: var(--shadow-2);
  border-color: oklch(0.80 0.04 160 / .45);
  z-index:3;
}
.value-item:focus-within{
  outline:none;
  transform: translateY(calc(-1 * var(--val-lift)));
  box-shadow: var(--shadow-2), 0 0 0 .2rem var(--ring);
  z-index:3;
}

/* Адаптив */
@media (max-width: 70rem){
  .value-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 44rem){
  .value-grid{ grid-template-columns: 1fr; }
}

/* Тёмная тема (если используешь) */
[data-theme="dark"] .value-card,
.theme-dark .value-card{
  background: linear-gradient(180deg, oklch(0.22 0.02 160 / .85), oklch(0.18 0.02 160 / .85));
}
[data-theme="dark"] .value-item,
.theme-dark .value-item{
  background: oklch(0.26 0.02 160 / .6);
  border-color: oklch(0.40 0.02 160 / .35);
  box-shadow: 0 .6rem 1.6rem oklch(0.08 0.02 160 / .45);
}
[data-theme="dark"] .value-item p,
.theme-dark .value-item p{ color: oklch(0.78 0.02 160); }

/* Уважение к Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .value-item{ transition:none; transform:none !important; }
}



/* ===================== DELIVERABLES ===================== */
:root{
  /* фолбэки (подхватятся твои, если уже есть) */
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.18 0.02 160);
  --surface: oklch(0.99 0.01 160 / .92);
  --rad: 1.2rem;
  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
  --shadow-2: 0 1.25rem 3rem oklch(0.20 0.02 160 / .10);

  /* управление интервалами / подъёмом */
  --pill-gap: clamp(1.2rem, 2.6vw, 1.6rem);
  --pill-lift: .26rem;
}

.deliverables{
  padding-block: clamp(2rem, 6vw, 4rem);
}
.deliverables > .h3{
  margin: 0 0 clamp(1rem, 2.4vw, 1.4rem);
  color: var(--ink);
}

/* Сетка 3→2→1 с «анти-слипанием» по рядам */
.deliverables-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  column-gap: var(--pill-gap);
  row-gap: calc(var(--pill-gap) + var(--pill-lift) + .6rem);
  isolation: isolate;
}

/* «Пилюлька» с чек-иконкой слева */
.deliverable{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .9rem;
  min-height: 3.25rem;
  padding: clamp(.9rem, 2.2vw, 1.1rem) clamp(1.2rem, 2.6vw, 1.4rem);
  background: color-mix(in oklab, var(--surface) 92%, white 8%);
  border: 1px solid oklch(0.86 0.02 160 / .28);
  border-radius: calc(var(--rad) * 1.2);
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  will-change: transform;
  z-index: 0;
}
.deliverable::before{
  content: "";
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: .65rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  /* чек как маска — без правок HTML */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 7l-9 9-4-4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 70% 70% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 7l-9 9-4-4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 70% 70% no-repeat;
}

/* Акцент на первом слове — мягкий цветной хайлайт */
.deliverable strong{
  color: var(--ink);
  font-weight: 800;
  position: relative;
  display: inline-block;
  padding-inline: .02em;
}
.deliverable strong::after{
  content: "";
  position: absolute;
  left: -.04em; right: -.04em; bottom: .06em;
  height: .35em;
  border-radius: .35em;
  background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 45%, white 55%), transparent 85%);
  z-index: -1;
}

/* Hover/focus: лёгкий подъём, тень, без наложений */
.deliverable:hover,
.deliverable:focus-within{
  transform: translateY(calc(-1 * var(--pill-lift)));
  box-shadow: var(--shadow-2);
  border-color: oklch(0.80 0.04 160 / .45);
  outline: none;
  z-index: 3;
}

/* Тёмная тема (если используется) */
[data-theme="dark"] .deliverable,
.theme-dark .deliverable{
  background: oklch(0.26 0.02 160 / .6);
  border-color: oklch(0.40 0.02 160 / .35);
  box-shadow: 0 .6rem 1.6rem oklch(0.08 0.02 160 / .45);
}
[data-theme="dark"] .deliverable strong::after{
  background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 60%, black 40%), transparent 85%);
}

/* Уважение к reduce-motion */
@media (prefers-reduced-motion: reduce){
  .deliverable{ transition: none; transform: none !important; }
}


/* ===================== PACKAGES / Комплекты работ ===================== */
:root{
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.18 0.02 160);
  --muted: oklch(0.45 0.02 160);
  --surface: oklch(0.99 0.01 160 / .92);
  --rad: 1.2rem;
  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
  --shadow-2: 0 1.25rem 3rem oklch(0.20 0.02 160 / .10);

  --pkg-gap: clamp(1.2rem, 2.6vw, 1.6rem);
  --pkg-lift: .32rem; /* подъём на hover/focus */
}

#packages{ padding-block: clamp(2rem, 6vw, 4rem); }
#packages > .h3{ margin: 0 0 clamp(1rem, 2.4vw, 1.4rem); color: var(--ink); }

/* Сетка 3 → 2 → 1, с безопасным row-gap от подъёма */
.packages-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: var(--pkg-gap);
  row-gap: calc(var(--pkg-gap) + var(--pkg-lift) + .6rem);
  isolation:isolate;
}

@media (max-width: 70rem){
  .packages-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 44rem){
  .packages-grid{ grid-template-columns: 1fr; }
}

/* Карточка тарифа */
.pkg{
  position:relative;
  background: var(--surface);
  border: 1px solid oklch(0.86 0.02 160 / .28);
  border-radius: calc(var(--rad) * 1.2);
  box-shadow: var(--shadow-1);
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  display:grid;
  grid-template-rows: auto 1fr auto; /* цена всегда снизу */
  gap: .8rem;
  min-height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  will-change: transform;
  z-index:0;
}
.pkg:hover,
.pkg:focus-within{
  transform: translateY(calc(-1 * var(--pkg-lift)));
  box-shadow: var(--shadow-2);
  border-color: oklch(0.80 0.04 160 / .45);
  outline:none;
  z-index:3;
}

.pkg-title{ margin:0; color:var(--ink); }
.pkg-list{
  margin: .2rem 0 0;
  padding-left: 1.1rem;
  list-style: disc;
}
.pkg-list li{ color: var(--muted); line-height: 1.6; }
.pkg-list li::marker{ color: var(--brand); }
.pkg-price{
  margin-top: .4rem;
  font-weight: 800;
  color: var(--ink);
}

/* Выделение «Стандарт» без изменения HTML */
.pkg--hit{
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--brand), var(--brand-2)) border-box;
  box-shadow:
    0 0 0 .05rem oklch(0.95 0.02 160 / .8) inset,
    var(--shadow-1);
}
.pkg--hit::after{
  content: "рекомендуем";
  position:absolute; top:.8rem; right:.8rem;
  padding:.25rem .6rem;
  font-size:.75rem; font-weight:700; letter-spacing:.02em;
  color: oklch(0.20 0.02 160);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: 999px;
}

/* Подпись под сеткой */
.packages-note{
  margin: clamp(1rem, 2.8vw, 1.4rem) 0 0;
  color: var(--muted);
}

/* Тёмная тема (если есть) */
[data-theme="dark"] .pkg,
.theme-dark .pkg{
  background: oklch(0.26 0.02 160 / .6);
  border-color: oklch(0.40 0.02 160 / .35);
  box-shadow: 0 .6rem 1.6rem oklch(0.08 0.02 160 / .45);
}
[data-theme="dark"] .pkg--hit{
  background:
    linear-gradient(oklch(0.26 0.02 160 / .6), oklch(0.26 0.02 160 / .6)) padding-box,
    linear-gradient(135deg, var(--brand), var(--brand-2)) border-box;
}

/* Respect reduce-motion */
@media (prefers-reduced-motion: reduce){
  .pkg{ transition:none; transform:none !important; }
}

/* 1) Безопасный отступ под сеткой */
.packages-grid{
  row-gap: calc(var(--pkg-gap) + var(--pkg-lift) + 2.8rem); /* запас по ряду */
  margin-bottom: calc(var(--pkg-lift) + 5.2rem);           /* запас под сеткой */
}

/* 2) Подпись ниже и поверх любых теней */
.packages-note{
  position: relative;
  margin-top: clamp(1.2rem, 3vw, 2rem);
  z-index: 5;   /* чтобы тени/hover не перекрывали текст */
}

/* 3) На уже/мобильных — чуть меньше подъём карточек */
@media (max-width: 70rem){
  .packages-grid{ --pkg-lift: 0.24rem; }
}
@media (max-width: 44rem){
  .packages-grid{ --pkg-lift: 0.18rem; }
}

/* 4) (Опционально) сделать карточки компактнее */
.pkg{
  padding: clamp(1rem, 2vw, 1.3rem);
}
.pkg-list{ line-height: 1.5; }


/* ===================== CASE / КЕЙС ===================== */
:root{
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.18 0.02 160);
  --muted: oklch(0.45 0.02 160);
  --surface: oklch(0.99 0.01 160 / .92);
  --rad: 1.2rem;
  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
  --shadow-2: 0 1.25rem 3rem oklch(0.20 0.02 160 / .10);

  --case-gap: clamp(1rem, 2.4vw, 1.4rem);
  --case-pill-gap: clamp(.6rem, 2vw, .9rem);
  --case-lift: .22rem; /* подъём метрик на hover */
}

#case{ padding-block: clamp(2rem, 6vw, 4rem); }

.case-card{
  position: relative;
  background: linear-gradient(180deg, oklch(0.98 0.01 160 / .85), oklch(0.97 0.01 160 / .70));
  border: 1px solid oklch(0.86 0.02 160 / .28);
  border-radius: calc(var(--rad) * 1.6);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-1);
  isolation: isolate;
}

/* мягкий «ореол» */
.case-card::before{
  content:"";
  position:absolute; inset:-1.6rem -1.6rem -2rem;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 8% -10%, oklch(0.90 0.06 160 / .18), transparent 60%),
    radial-gradient(120% 60% at 92% 110%, oklch(0.90 0.06 160 / .14), transparent 60%);
  filter: blur(.6rem);
  z-index:-1;
}

.case-card > .h3{
  margin: 0 0 var(--case-gap);
  color: var(--ink);
  text-wrap: balance;
}

/* Метрики: адаптивная сетка 3→2→1 */
.case-metrics{
  list-style: none;
  margin: 0 0 var(--case-gap);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--case-pill-gap);
  isolation: isolate;
}

/* Пилюлька-метрика */
.case-metrics li{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content 1fr;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 95%, white 5%);
  border: 1px solid oklch(0.88 0.02 160 / .32);
  box-shadow: var(--shadow-1);
  color: var(--muted);
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  will-change: transform;
  z-index: 0;
}
.case-metrics li:hover{
  transform: translateY(calc(-1 * var(--case-lift)));
  box-shadow: var(--shadow-2);
  border-color: oklch(0.80 0.04 160 / .45);
  z-index: 2;
}

/* Значение метрики — жирнее и темнее */
.case-metrics li > strong{
  color: var(--ink);
  font-weight: 800;
}

/* Описание кейса */
.case-card > p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

/* Тёмная тема (опционально) */
[data-theme="dark"] .case-card,
.theme-dark .case-card{
  background: linear-gradient(180deg, oklch(0.22 0.02 160 / .85), oklch(0.18 0.02 160 / .85));
  border-color: oklch(0.40 0.02 160 / .35);
  box-shadow: 0 .6rem 1.6rem oklch(0.08 0.02 160 / .45);
}
[data-theme="dark"] .case-metrics li{
  background: oklch(0.26 0.02 160 / .6);
  border-color: oklch(0.40 0.02 160 / .35);
  color: oklch(0.78 0.02 160);
}

/* Respect reduce-motion */
@media (prefers-reduced-motion: reduce){
  .case-metrics li{ transition: none; transform: none !important; }
}



/* ===================== BRIEF ===================== */
:root{
  /* фолбэки (подхватятся твои, если уже есть) */
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.18 0.02 160);
  --muted: oklch(0.45 0.02 160);
  --surface: oklch(0.99 0.01 160 / .92);
  --rad: 1.2rem;
  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
  --shadow-2: 0 1.25rem 3rem oklch(0.20 0.02 160 / .10);
  --ring: oklch(0.77 0.15 160 / .55);

  --brief-gap: clamp(1rem, 2.4vw, 1.4rem);
  --brief-lift: .22rem; /* подъём элемента на hover/focus */
}

#brief{ padding-block: clamp(2rem, 6vw, 4rem); }
#brief > .h3{ margin: 0 0 var(--brief-gap); color: var(--ink); }

/* Сетка 2 → 1, анти-слипание с учётом подъёма */
.brief-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(20rem, 1fr));
  column-gap: var(--brief-gap);
  row-gap: calc(var(--brief-gap) + var(--brief-lift) + .6rem);
  counter-reset: brief;
  isolation: isolate;
}

.brief-list > li{
  position: relative;
  counter-increment: brief;
  min-height: 3.25rem;
  padding: .9rem 1.2rem .9rem 3.8rem;  /* место под номер */
  background: color-mix(in oklab, var(--surface) 92%, white 8%);
  border: 1px solid oklch(0.86 0.02 160 / .28);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  color: var(--ink);
  line-height: 1.55;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  will-change: transform;
  z-index: 0;
}

/* Нумерация в зелёном бейдже */
.brief-list > li::before{
  content: counter(brief);
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 999px;
  display: grid; place-items: center;
  font: 800 1rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: oklch(0.20 0.02 160);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: .14rem solid oklch(0.98 0.01 160 / .95);
  box-shadow: 0 .4rem 1rem oklch(0.20 0.02 160 / .10);
}

/* Hover/focus */
.brief-list > li:hover{
  transform: translateY(calc(-1 * var(--brief-lift)));
  box-shadow: var(--shadow-2);
  border-color: oklch(0.80 0.04 160 / .45);
  z-index: 3;
}
.brief-list > li:focus-within{
  outline: none;
  transform: translateY(calc(-1 * var(--brief-lift)));
  box-shadow: var(--shadow-2), 0 0 0 .18rem var(--ring);
  z-index: 3;
}

/* Адаптив: на узких — по одной колонке и чуть меньше подъём */
@media (max-width: 64rem){
  .brief-list{ grid-template-columns: 1fr; }
  .brief-list{ --brief-lift: .18rem; }
}

/* Тёмная тема (если используется) */
[data-theme="dark"] .brief-list > li,
.theme-dark .brief-list > li{
  background: oklch(0.26 0.02 160 / .6);
  border-color: oklch(0.40 0.02 160 / .35);
  box-shadow: 0 .6rem 1.6rem oklch(0.08 0.02 160 / .45);
  color: oklch(0.92 0.02 160);
}

/* Respect reduce-motion */
@media (prefers-reduced-motion: reduce){
  .brief-list > li{ transition: none; transform: none !important; }
}

/* Центруем текст и номер в каждой плашке брифа */
.brief-list > li{
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* по центру по горизонтали */
  gap: .75rem;
  text-align: center;
  padding: .9rem 1.2rem;     /* убираем левый отступ под номер */
}

/* Номер делаем частью потока, а не абсолютным */
.brief-list > li::before{
  position: static;
  transform: none;
  margin: 0;                 /* номер вплотную, отступ задаёт gap */
  inline-size: 2rem;
  block-size: 2rem;
  flex: 0 0 auto;            /* фиксированный размер бейджа */
}