.home-services__body {
    overflow: hidden;
}

.home-feedback {
  position: relative;
  overflow: visible; 
  z-index: 1;
}

.home-feedback__blurs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.blur-circle {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(180px);
    opacity: 0.7;
    z-index: 0;
}

.blur-circle--left {
    background: linear-gradient(135deg, #7838F5 0%, #ff32d3 100%);
    top: 0rem;
    left: 2rem;
}

.blur-circle--right {
background: #b138f5;
    bottom: 20rem;
    right: -30rem;
}

.breadcrumbs__body {
margin-block: 0px
              clamp(0.75rem, 0.3088235294rem + 1.9607843137vw, 1.25rem);
}

/* ===== Grid размещение и липкость ===== */
.articles-detail__grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(2rem,1rem + 2vw,4rem);
  align-items:start;
}
.articles-detail__grid .articles-detail__content{ grid-column:1/2 !important; text-wrap:pretty; }
.articles-detail__grid .articles-detail__aside{
  grid-column:2/3;
  position: sticky;
  top: 8rem;              /* корректный старт — ниже JS ещё уточнит */
}

/* ===== TOC ===== */
.articles-detail__toc-title{
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  margin: 0 0 14px;
  color:#fff;
}
.articles-detail__toc-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.articles-detail__toc-list li{ position:relative; padding-left:18px; }
.articles-detail__toc-list li::before{
  content:""; position:absolute; left:0; top:0.7em;
  width:6px; height:6px; border-radius:50%;
  background:#fff; opacity:.9;
}
.articles-detail__toc-list a{
  display:inline-block;
  color:#E3E6EE; text-decoration:none;
  font-weight:600;
  font-size: 0.875rem;           /* ~14px */
  line-height:1.45;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: color .2s ease, opacity .2s ease;
}
.articles-detail__toc-list a:hover{ color:#fff; }

/* Плашка: полностью прозрачный фон, тонкий бордер,
   внутри рисуем два «глоу»-круга через псевдоэлементы */
.promo-card{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 1.5rem;
  color:#fff;
  background: transparent;                    /* <— ПРОЗРАЧНЫЙ ФОН */
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 60px rgba(24,30,50,.12);
  min-height: 162px;
  margin-top: 40px;
}

/* Левый фиолетовый глоу */
.promo-card::before{
    content: "";
    position: absolute;
    left: -5rem;
    top: -5rem;
    right: 19rem;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, #D94EBB, rgba(138, 93, 235, 0) 70%);
    filter: blur(45px);
    opacity: .85;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Правый сине-розовый глоу */
.promo-card::after{
  content:"";
  position:absolute;
    left: 2rem;
    top: -5rem;
    right: 19rem;
    width: 20rem;
    height: 20rem;
  border-radius:50%;
    background: radial-gradient(closest-side, #7838F5, rgba(138, 93, 235, 0) 70%);
  filter: blur(40px);
  opacity:.75;
  mix-blend-mode: screen;
  pointer-events:none;
}

/* Текст как в макете: h4, 24/120, weight 500, letter-spacing -2% */
.promo-card__text{
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;  /* -2% */
  margin-bottom: 16px;
}

/* Кнопка 173×40, радиус 10, бордер 1px white */
.promo-card__btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: 40px; padding: 0 25px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,1);
  color:#fff; text-decoration:none; font-weight:500; font-size:12px;
  transition: background-color .2s ease, transform .12s ease, border-color .2s ease;
}
.promo-card__btn:hover{ background: rgba(255,255,255,.18); }
.promo-card__btn:active{ transform: translateY(1px); }

/* Иконка: размер и поворот как в фигме */
.promo-card__icon{
    position: absolute;
    right: 4px;
    bottom: 1px;
    width: 160px;
    height: 160px;
    transform: rotate(10deg);
    pointer-events: none;
}

.articles-detail__grid{
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  column-gap: 90px;                  /* фиксированный зазор между колонками */
  align-items:start;
}
.articles-detail__grid .articles-detail__content{ grid-column:1/2 !important; text-wrap: pretty; }
.articles-detail__grid .articles-detail__aside{ grid-column:2/3; }

.articles-detail__aside{
  position: relative;                /* якорь для линии */
  /* УБРАТЬ вот это из старого CSS:
     position: sticky;
     margin-left: 3.125rem;
     top: 6rem;
  */
}


.articles-detail__aside-inner{
  position: sticky;
  top: 6rem;                         /* JS ниже подстроит под шапку */
  margin-left: 50px;                /* отступ от линии до контента */
  max-width: 415px;
}

.articles-detail__toc-title{
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em;
  margin: 0 0 15px; color:#fff;
}
.articles-detail__toc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px; }
.articles-detail__toc-list li{ position:relative; padding-left:18px; }
.articles-detail__toc-list li::before{
  content:""; position:absolute; left:0; top:calc(0.6em); width:6px; height:6px; border-radius:50%; background:#fff;
}
.articles-detail__toc-list a{
  display:inline-block; font: 500 14px/1.2 "Inter", system-ui, sans-serif;
  text-transform:uppercase; letter-spacing:0; color:rgba(255,255,255,.5); text-decoration:none; transition:color .2s;
}
.articles-detail__toc-list a:hover{ color:#fff; }

.articles-detail__grid::after {
  content: "";
  position: absolute;
  right: calc(33.333% + -31px); /* примерно выравнивает по линии */
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.08);
}

.articles-detail__grid {
  position: relative;
}

@media (max-width: 1470px) {
.promo-card__btn {
    padding: 0 10px;
}
}
/* ≤1470px: скрываем правый блок и линию, контент на всю ширину */
@media (max-width: 1365px) {
  .articles-detail__grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
  .articles-detail__grid .articles-detail__content {
    grid-column: 1 / -1 !important;
  }
  .articles-detail__aside {
    display: none !important;
  }
  /* убираем декоративную линию между колонками */
  .articles-detail__grid::after {
    content: none !important;
  }
}


.articles-detail__header {
    margin-bottom: 0px;
}

.typo h2 {
    margin-top: 3.75rem;
    margin-bottom: 2.5rem;
    font-size: clamp(1.375rem, 1.0441176471rem + 1.4705882353vw, 1.75rem);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.02em;
}

.typo h3 {
    margin-top: 3.75rem;
    margin-bottom: 2.5rem;
    font-size: clamp(1.25rem, 0.94rem + 1.32vw, 1.6rem);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.02em;
}

.typo p{
  opacity: 0.6;          
  color: #fff; 
  font-size: clamp(0.9375rem, 0.7720588235rem + 0.7352941176vw, 1.125rem);
}

.typo ul li, .typo ol li {
  font-size: clamp(0.9375rem, 0.7720588235rem + 0.7352941176vw, 1.125rem);
}

/* выделение внутри абзацев — полностью белое */
.typo p b,
.typo p strong{
  color: #fff;
}


/* ===== Блок “внимание” внутри статьи ===== */
.attention-single-article {
  display: flex;
  gap: 10px;
  align-items: stretch;  

  padding: 20px;
  border: 1px solid #C9A6FF;
  border-radius: 10px;
  background: transparent;

  color: rgba(255,255,255,0.8);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  text-wrap: pretty;
  margin-top: 2.5rem;
}

.attention-single-article__icon {
  margin-block: auto;   
  display:flex;
  align-items:center;
  justify-content:center;

  height: auto;
  min-height: 4.375rem;         
  font-size: 4.375rem;
  line-height: 1;
  color:#C9A6FF;
}

.attention-single-article__content {
    display: flex;
    align-items: center;
}

.attention-single-article__content p {
  margin: 0;
}


.attention-single-article__content b {
  color: #fff;
  font-weight: 700;
}

@media (max-width: 768px) {

.attention-single-article__icon{display: none;}

}

.list-with-figures {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-with-figures li {
  position: relative;
  padding-left: 28px;   
  margin-bottom: 16px;
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.list-with-figures li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;                  
  width: 16px;
  height: 16px;
  background: #C9A6FF;
  transform: rotate(45deg);
  border-radius: 1px;
}

.list-with-figures b {
  color: #fff;
  font-weight: 700;
}

.typo ol.list-with-figures {
  padding-inline-start: 0 !important;
}

ol li::marker {
  font-weight: 700;
}

.articles-detail__button {
    margin-top: 2.5rem;
}

.articles-detail .btn_hero {
    margin-bottom: 0px;
}

.articles-detail_img_350 {
    padding-bottom: 37%;
}

.media-table{
  position:relative;
  background:#0F1117;
  color:#E7E9F2;
  border-radius:8px 8px 0px 0px;
  overflow:hidden;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin-top: 40px;
}

/* === ИКОНКИ ЧЕРЕЗ CSS (никаких <svg> в HTML) ========================= */
:root{
  /* chevron-down (залитая для mask) */
  --ico-chevron: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='white' d='M7.293 9.293a1 1 0 0 1 1.414 0L12 12.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z'/>\
</svg>");

  /* простая “cube”-пиктограмма (заливка под mask) */
  --ico-cube: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>\
<path d='M14.5 11.2021L11 13.5351V17.1311L17.197 13.0001L14.5 11.2021ZM12.697 10.0001L10 8.20215L7.303 10.0001L10 11.7982L12.697 10.0001ZM18 8.86915L16.303 10.0001L18 11.1311V8.87015V8.86915ZM17.197 7.00015L11 2.86915V6.46515L14.5 8.79815L17.197 7.00015ZM5.5 8.79815L9 6.46515V2.86915L2.803 7.00015L5.5 8.79815ZM2.803 13.0001L9 17.1311V13.5351L5.5 11.2021L2.803 13.0001ZM2 11.1311L3.697 10.0001L2 8.86915V11.1311ZM1.11994e-08 7.00015C-2.46193e-05 6.83556 0.0405779 6.6735 0.118205 6.52837C0.195832 6.38323 0.308084 6.2595 0.445 6.16815L9.445 0.16815C9.60933 0.0585106 9.80245 0 10 0C10.1975 0 10.3907 0.0585106 10.555 0.16815L19.555 6.16815C19.6919 6.2595 19.8042 6.38323 19.8818 6.52837C19.9594 6.6735 20 6.83556 20 7.00015V13.0001C20 13.1647 19.9594 13.3268 19.8818 13.4719C19.8042 13.6171 19.6919 13.7408 19.555 13.8321L10.555 19.8321C10.3907 19.9418 10.1975 20.0003 10 20.0003C9.80245 20.0003 9.60933 19.9418 9.445 19.8321L0.445 13.8321C0.308084 13.7408 0.195832 13.6171 0.118205 13.4719C0.0405779 13.3268 -2.46193e-05 13.1647 1.11994e-08 13.0001V7.00015Z' fill='white' fill-opacity='0.3'/>\
</svg>");

  --ico-eye: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'>\
<path d='M6.66667 9.33389C5.57325 9.34751 4.49113 9.11152 3.50267 8.64389C2.73646 8.27004 2.04844 7.75374 1.47533 7.12256C0.868288 6.46997 0.390312 5.70833 0.0666667 4.87789L0 4.66722L0.07 4.45656C0.393877 3.62684 0.870824 2.8654 1.476 2.21189C2.04889 1.58076 2.73669 1.06446 3.50267 0.690556C4.49114 0.222948 5.57325 -0.0130371 6.66667 0.000555581C7.76008 -0.0130136 8.84218 0.22297 9.83067 0.690556C10.5969 1.06438 11.2849 1.58068 11.858 2.21189C12.4662 2.86359 12.9443 3.62547 13.2667 4.45656L13.3333 4.66722L13.2633 4.87789C12.2175 7.60041 9.5828 9.38012 6.66667 9.33389ZM6.66667 1.33389C4.39725 1.26278 2.31428 2.58395 1.41133 4.66722C2.31413 6.75062 4.3972 8.07186 6.66667 8.00056C8.93604 8.07148 11.0189 6.75037 11.922 4.66722C11.0202 2.58294 8.9365 1.26127 6.66667 1.33389ZM6.66667 6.66722C5.70488 6.67359 4.87291 5.9988 4.68064 5.05641C4.48838 4.11401 4.98951 3.16724 5.87692 2.79633C6.76433 2.42542 7.79016 2.73398 8.3257 3.53289C8.86124 4.33181 8.75692 5.39794 8.07667 6.07789C7.70421 6.45473 7.1965 6.66693 6.66667 6.66722Z' fill='white'/>\
</svg>");
}


/* Универсальный “носитель” для иконок */
.ico{
  display:inline-block; flex:none;
  background-color: currentColor;
  mask-repeat:no-repeat; mask-position:center; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:100% 100%;
}
.ico-cube{ width:24px; height:24px; mask-image:var(--ico-cube); -webkit-mask-image:var(--ico-cube); }
.ico-eye { width:16px; height:16px; mask-image:var(--ico-eye); -webkit-mask-image:var(--ico-eye); }

/* === СПЛОШНЫЕ ВЕРТИКАЛЬНЫЕ ЛИНИИ ПО ВСЕЙ ВЫСОТЕ ===================== */
.media-table::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(#232838,#232838) 330px 0/1px 100% no-repeat,
    linear-gradient(#232838,#232838) 480px 0/1px 100% no-repeat,
    linear-gradient(#232838,#232838) 660px 0/1px 100% no-repeat,
    linear-gradient(#232838,#232838) 810px 0/1px 100% no-repeat;
}

/* === сетка =========================================================== */
.media-table__head,
.media-table__row{
  display:grid;
  grid-template-columns: 330px 150px 180px 150px 130px;
  align-items:center;
  gap:0;
  position:relative; z-index:1;
}

/* === шапка =========================================================== */
.media-table__head{ background:#1d1b2b; }
.media-table__head > div{ padding:12px 24px; display:flex; align-items:center; }

.th__inner{
  height:24px; width:100%;
  display:flex; align-items:center; gap:8px;
  font-weight:500; font-size:14px; line-height:24px;
  letter-spacing:.02em; text-transform:uppercase; color:#fff;
}

.th__cntr{justify-content: center;}

.th__check-wrap{ width:24px; height:24px; display:grid; place-items:center; flex:0 0 24px; display: none; }

/* Кнопка сортировки без <svg> — иконка через ::before */
.th__sort{
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:#fff; cursor:pointer; border-radius:6px; padding:0;
  position:relative; display: none;
}
.th__sort::before{
  content:""; width:24px; height:24px;
  background-color: currentColor;
  mask-image: var(--ico-chevron); -webkit-mask-image: var(--ico-chevron);
  mask-size: 100% 100%; -webkit-mask-size:100% 100%;
  mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
}
.th__sort:hover{ background:rgba(255,255,255,.06); }

/* === строки ========================================================== */
.media-table__row{
  min-height:72px;
  background:#141421;
  box-shadow: inset 0 -1px 0 #232838; /* сплошная горизонтальная */
}
.media-table__row:nth-child(even){ background:#141421; }

.td{
  padding:12px 24px;
  display:flex; align-items:center; gap:12px; font-size: 16px;
}
.td--center{ justify-content:center }

/* === чекбокс: контейнер 24, input 14 ================================= */
.chk-wrap{ width:24px; height:24px; display:grid; place-items:center; flex:0 0 24px; display: none; }
.chk{
  width:14px; height:14px; border:2px solid #6D7388; border-radius:4px;
  position:relative; display:inline-block; flex:none;
}
.chk input{ appearance:none; -webkit-appearance:none; width:100%; height:100%; margin:0; cursor:pointer }
.chk input:checked::after{
  content:""; position:absolute; inset:-2px; background:#2C9C6A; border-radius:4px;
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='white' d='M20.285 6.708a1 1 0 0 1 0 1.414l-9.192 9.192a1 1 0 0 1-1.414 0L3.715 11.54a1 1 0 1 1 1.414-1.414l5.26 5.26 8.485-8.485a1 1 0 0 1 1.414 0z'/>\
</svg>") center/20px 20px no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='white' d='M20.285 6.708a1 1 0 0 1 0 1.414l-9.192 9.192a1 1 0 0 1-1.414 0L3.715 11.54a1 1 0 1 1 1.414-1.414l5.26 5.26 8.485-8.485a1 1 0 0 1 1.414 0z'/>\
</svg>") center/20px 20px no-repeat;
}

/* === Title =========================================================== */

.td-title__avatar{
  width:48px; height:48px; border-radius:50%;
  background:#222 url('/wp-content/uploads/2025/11/articles-user-table.png') center/cover no-repeat;
}
.td-title__text{
  font:400 16px/1.4 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#E7E9F2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-wrap: pretty;
  margin-left:16px;
}

/* === бейдж/иконки в ячейках ========================================== */
.pill{ background: rgba(255,255,255,.15); color:#fff; padding:8px 16px; font-weight:600; font-size:16px; line-height:1; border-radius:999px; }
.with-icon{ display:flex; align-items:center; gap:10px; font-weight:600; color:#fff; }
.muted{ opacity:.9 }

/* === дата ============================================================ */
.datet{ display:flex; align-items:center; justify-content:center; width:100%; color:#fff; gap:10px; }
.date__d{ text-align:right; font-weight:600; white-space:nowrap; }

/* ===== КНОПКА ПОД ТАБЛИЦЕЙ ===== */
.table-toggle{
  margin-top:2.5rem;
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
  border-radius:10px;
  padding:12px 25px;
  font:500 12px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform:uppercase;
  cursor:pointer;
}
.table-toggle:hover{ border-color:rgba(255,255,255,.5) }

/* скругление, когда только шапка */
.media-table.is-collapsed{ border-radius:8px }

/* Контейнер с рядами, который будем сворачивать */
.media-table__body{
  overflow: hidden;           /* чтобы содержимое не выпирало при высоте 0 */
  height: auto;               /* в раскрытом состоянии */
}

/* когда идёт анимация — подсказываем браузеру оптимизацию */
.media-table.is-animating .media-table__body{ will-change: height }

/* длительность/кривая — через инлайн-стиль в JS; запасной вариант здесь: */
.media-table__body{ transition: height .3s ease }

/* accessibility: убираем анимацию для тех, кому нельзя/неприятно */
@media (prefers-reduced-motion: reduce){
  .media-table__body{ transition: none !important }
}

/* ===== 0) Фиксы: дата и текст тайтла ===== */
.media-table .date__d{
  all: unset;
  display:inline-block;
  font:600 16px/24px Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
  white-space:nowrap;         /* не переносим */
}
.td:last-child{ justify-content:flex-end } /* дата прижата вправо */

.td-title{
  display:grid; grid-template-columns: 48px 1fr; align-items:center; gap:8px;
}
.td-title > *{ min-width:0 }          /* разрешаем 1fr ужиматься */
.td-title__text{
  min-width:0; overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  text-overflow:ellipsis;
}

/* === базовые анти-переливы === */
.td{ min-width:0; min-height: 72px; }                       /* ячейки можно сжимать */
.td-title > *{ min-width:0 }             /* 1fr внутри title реально ужимается */
.with-icon, .pill, .datet { white-space:nowrap }
.media-table .date__d{
  all:unset; display:inline-block; white-space:nowrap;
  font:600 16px/24px Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#fff;
}
.td:last-child{ justify-content:flex-end } /* дата вправо */

/* ===== DESKTOP как в макете (жёстко) ===== */
@media (min-width:1600px){
  .media-table__head,
  .media-table__row{
    grid-template-columns: 330px 150px 180px 150px 130px;
  }
  .media-table::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
    background:
      linear-gradient(#232838,#232838) 330px 0/1px 100% no-repeat,
      linear-gradient(#232838,#232838) 480px 0/1px 100% no-repeat,
      linear-gradient(#232838,#232838) 660px 0/1px 100% no-repeat,
      linear-gradient(#232838,#232838) 810px 0/1px 100% no-repeat;
  }
}

/* ===== 1280–1599: тайтл тянется, у остальных фикс; корректные минимумы ===== */
@media (max-width:1599px) and (min-width:1280px){
  .media-table__head,
  .media-table__row{
    grid-template-columns:
      minmax(240px, 1fr)   /* TITLE – единственный гибкий */
      150px                /* СТАТУС */
      180px                /* КАТЕГОРИЯ */
      150px                /* СМОТРЕЛИ */
      130px;               /* ДАТА */
  }
  /* бордеры вместо фоновых линий — не съезжают при сжатии */
  .media-table::after{ content:none }
  .media-table__head{ box-shadow: inset 0 -1px 0 #232838 }
  .media-table__row{  box-shadow: inset 0 -1px 0 #232838 }
  .media-table__head > div:not(:first-child),
  .media-table__row  > .td:not(:first-child){ border-left:1px solid #232838 }
  .td{ padding:10px 18px }                /* суммарная минимальная ширина уменьшается */
  .media-table .date__d{ font-size:15px; line-height:22px }
}

/* ===== 901–1279: ещё компактней мин/паддинги → дата не отвалится ===== */
@media (max-width:1279px) and (min-width:901px){
  .media-table__head,
  .media-table__row{
    grid-template-columns:
      minmax(180px, 1fr)   /* TITLE — можно сильнее сжать */
      120px                /* СТАТУС (минимум меньше) */
      150px                /* КАТЕГОРИЯ */
      120px                /* СМОТРЕЛИ */
      120px;               /* ДАТА (гарантированный минимум) */
  }
  .media-table::after{ content:none }
  .media-table__head{ box-shadow: inset 0 -1px 0 #232838 }
  .media-table__row{  box-shadow: inset 0 -1px 0 #232838 }
  .media-table__head > div:not(:first-child),
  .media-table__row  > .td:not(:first-child){ border-left:1px solid #232838 }

  .td{ padding:8px 16px }               /* меньше горизонтальных паддингов */
  .td-title__avatar{ width:40px; height:40px }
  .td-title__text{ font-size:14.5px; margin-left:12px }
  .media-table .date__d{ font-size:14px; line-height:20px }
}


/* анти-переливы */
.td{ min-width:0 }
.td-title > *{ min-width:0 }
.with-icon, .pill, .datet { white-space:nowrap }

.media-table .date__d{
  all:unset; display:inline-block; white-space:nowrap;
  font:600 16px/24px Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#fff;
}
.td:last-child{ justify-content:flex-end } /* дата вправо */

/* ====== ЕДИНАЯ СЕТКА ДЛЯ ≥901PX (без прыжков) ======
   TITLE — единственный гибкий столбец;
   Остальные имеют clamp-ширины, чтобы и не распухать, и не сжиматься меньше читабельного минимума.
*/
@media (min-width:901px){
  .media-table__head,
  .media-table__row{
    grid-template-columns:
      minmax(220px, 1fr)           /* TITLE: сжимается/растёт первым */
      clamp(120px, 8vw, 140px)     /* СТАТУС */
      clamp(150px, 12vw, 180px)    /* КАТЕГОРИЯ */
      clamp(150px, 10vw, 150px)    /* СМОТРЕЛИ */
      clamp(13ch, 15ch, 17ch);     /* ДАТА: по символам → всегда влезает */
  }

  /* вертикальные разделители — бордерами, чтобы не «прыгали» при сжатии */
  .media-table::after{ content:none }
  .media-table__head{ box-shadow: inset 0 -1px 0 #232838 }
  .media-table__row{  box-shadow: inset 0 -1px 0 #232838 }
  .media-table__head > div:not(:first-child),
  .media-table__row  > .td:not(:first-child){
    border-left:1px solid #232838;
  }

  /* лёгкая компактность по ширине контейнера */
  @media (max-width:1400px){
    .td{ padding:10px 18px }
    .td-title__text{ font-size:15px }
    .media-table .date__d{ font-size:15px; line-height:22px }
  }
  @media (max-width:1200px){
    .td{ padding:8px 16px }
    .td-title__avatar{ width:40px; height:40px }
    .td-title__text{ font-size:14.5px; margin-left:12px }
    .media-table .date__d{ font-size:14px; line-height:20px }
  }
}



/* ===== MOBILE 0–900: горизонтальный скролл без ломания страницы ===== */
@media (max-width: 900px){

  .media-table__row {
    min-height: 64px;
}

  /* сам контейнер таблицы скроллится по горизонтали */
  .media-table{
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain; /* не дёргаем всю страницу при свайпе */
  }

  /* отключаем фоновые вертикальные линии-псевдоэлемент (они «привязаны» к фикс. координатам) */
  .media-table::after{ content: none; }

  /* рисуем разделители бордерами, как на планшете */
  .media-table__head{ box-shadow: inset 0 -1px 0 #232838; }
  .media-table__row { box-shadow: inset 0 -1px 0 #232838; }
  .media-table__head > div:not(:first-child),
  .media-table__row  > .td:not(:first-child){
    border-left: 1px solid #232838;
  }

  /* фиксируем «внутреннюю» ширину ряда/шапки > 100vw → появится горизонтальный скролл,
     сетка — как на планшете, только площе: */
  .media-table__head,
  .media-table__row{
    width: 980px; /* можно подстроить под твой макет: 900–1100px */
    grid-template-columns:
      minmax(180px, 1fr)  /* TITLE — гибкий */
      120px               /* СТАТУС */
      200px               /* КАТЕГОРИЯ (чуть шире для длинных) */
      150px               /* СМОТРЕЛИ */
      150px;              /* ДАТА (влезает «31 July 2022» и подобные) */
  }

  /* немного уплотняем, как в твоих tablet-правилах */
  .td{ padding: 8px 12px; min-height: 64px; }
  .td--center{ justify-content: center; }

  /* аватар оставляем (как на планшете), но уменьшаем */
  .td-title{ grid-template-columns: 36px 1fr; gap: 8px; }
  .td-title__avatar{ width:36px; height:36px; }
  .td-title__text{
    font-size: 14px;
    -webkit-line-clamp: 2;
    text-wrap: pretty;
  }

  /* бейджи/иконки/дата компактнее */
  .pill{ font-size: 14px; padding: 6px 12px; }
  .with-icon{ gap: 8px; font-weight: 600; }
  .ico-cube{ width:22px; height:22px; }
  .ico-eye { width:16px; height:16px; }

  .datet{ justify-content: flex-end; }
  .media-table .date__d{ font-size: 14px; line-height: 20px; white-space: nowrap; }

  /* чтобы любые вложенные блоки не «рвали» ширину */
  .td, .td-title > *{ min-width: 0; }
  .with-icon, .pill, .datet { white-space: nowrap; }
}


/* ==== ОБЁРТКА: сужается вместе со страницей, скролл только внутри ==== */
.media-table-wrap{
  max-width: 100%;
  overflow-x: auto;                 /* горизонтальный скролл здесь */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  contain: inline-size;             /* не позволяет растягивать родителя */
}

/* Не даём таблице «пихать» страницу шире */
@media (max-width: 900px){

  /* таблица внутри шире контейнера → появится горизонтальный скролл */
  .media-table{
    width: max-content;
    min-width: 980px;               /* можно подогнать: 900–1100px */
    border-radius: 8px;
    overflow: hidden;               /* чтобы ничего не выпирало */
    box-sizing: border-box;
  }

  /* убираем псевдополосы, которые ломают ширину */
  .media-table::after{ content: none !important; }

  /* делаем разделители бордерами (стабильно при любой ширине) */
  .media-table__head{ box-shadow: inset 0 -1px 0 #232838; background:#1d1b2b; }
  .media-table__row { box-shadow: inset 0 -1px 0 #232838; background:#141421; }
  .media-table__head > div:not(:first-child),
  .media-table__row  > .td:not(:first-child){
    border-left: 1px solid #232838;
  }

  /* сетка как на планшете, только компактнее — ничего не схлопнется */
  .media-table__head,
  .media-table__row{
    grid-template-columns:
      minmax(180px, 1fr)  /* TITLE */
      120px               /* СТАТУС */
      200px               /* КАТЕГОРИЯ */
      150px               /* СМОТРЕЛИ */
      150px;              /* ДАТА */
  }

  /* лёгкая компактность */
  .td{ padding:8px 12px; min-height:64px; }
  .td--center{ justify-content:center; }
  .td-title{ grid-template-columns:36px 1fr; gap:8px; }
  .td-title__avatar{ width:36px; height:36px; }
  .td-title__text{ font-size:14px; -webkit-line-clamp:2; text-wrap:pretty; }

  .pill{ font-size:14px; padding:6px 12px; }
  .with-icon{ gap:8px; }
  .ico-cube{ width:22px; height:22px; }
  .ico-eye { width:16px; height:16px; }

  .datet{ justify-content:flex-end; }
  .media-table .date__d{ font-size:14px; line-height:20px; white-space:nowrap; }

  /* страховки от переливов */
  .td, .td-title > *{ min-width:0; }
  .with-icon, .pill, .datet{ white-space:nowrap; }
}

/* Если где-то глобально включён горизонтальный скролл у body — подстрахуемся */
html, body{ max-width:100%; }


.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
  color: #C9A6FF;
  text-decoration: none;
  transition: color 0.3s ease;
  margin-top: 40px;
}
.back-link:hover {
  color: #d9b9ff;
}
.back-link__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transform: rotate(0deg);
}
@media (max-width: 768px) {
  .back-link {
    font-size: 13px;
    gap: 8px;
  }
  .back-link__icon {
    width: 10px;
    height: 10px;
  }

  .articles-detail {
    padding-top: clamp(5.625rem, 3.1433823529rem + 11.0294117647vw, 5.7375rem);
}

}

  /* нужно для анимации высоты тела таблицы */
  .media-table__body{
    overflow: hidden;
    transition: height .28s ease;
  }

  /* обязательно для плавной анимации */
  .media-table__body{
    overflow:hidden;
    transition: height .28s ease;
  }

/* Коробка */
.inner-slider{position:relative;padding-top:60px;;overflow:hidden; padding-bottom: 40px;}
/* Вьюпорт/трек */
.inner-slider__viewport{overflow:hidden;border-radius:12px;position:relative;z-index:1}
.inner-slider__track{display:flex;gap:20px;transition:transform .6s cubic-bezier(.4,.2,.2,1);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.inner-slide{flex:0 0 50%;border-radius:12px;overflow:hidden}
.inner-slide img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px;pointer-events:none;-webkit-user-drag:none}

/* Навигация (как в макете) */
.inner-slider__nav{position:absolute;top:0px;display:flex;gap:10px;z-index:3;pointer-events:auto}
.inner-slider__btn{width:40px;height:40px;border-radius:10px;background:transparent;border:0.0625rem solid #fff;position:relative;transition:.15s}
.inner-slider__btn::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:16px;
  height:14px;
  background:#fff;
  mask:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 15'>\
<path d='M0.5 7.5L16.5 7.5M16.5 7.5L9.83333 14.5M16.5 7.5L9.83333 0.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 15'>\
<path d='M0.5 7.5L16.5 7.5M16.5 7.5L9.83333 14.5M16.5 7.5L9.83333 0.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>") center/contain no-repeat;
}
.inner-slider__btn.is-prev{ rotate:180deg; }

.inner-slider__btn:hover{background:rgba(255,255,255,.08);border-color:#6a6a76}

/* Адаптив */
@media (max-width:1024px){ .inner-slide{flex-basis:100%} }
@media (max-width:768px){
  .inner-slider{padding-top:64px}
  .inner-slider__btn::before{width:16px;height:16px}
}


@media (max-width: 767px) {

  .breadcrumbs__body {
    display: flex;
    flex-wrap: wrap; /* позволяем переносы */
    row-gap: 4px;        /* чтобы слэш не наезжал */
  }

  /* ВСЕ, кроме последнего — не переносятся */
  .breadcrumbs__block:not(:last-child) {
    white-space: nowrap;
  }

  /* ПОСЛЕДНИЙ — естественные переносы */
  .breadcrumbs__block:last-child {
    white-space: normal;
    flex: 1 1 100%;  /* разрешаем занять всю строку */
  }
}


/* базовый цвет стрелки через переменную */
.inner-slider__btn{ --arrow:#fff; }
.inner-slider__btn::before{ background:var(--arrow); }

/* hover только если не disabled: белая заливка, чёрная стрелка */
.inner-slider__btn:not(.is-disabled):hover{
  background:#fff;
  border-color:#fff;
}
.inner-slider__btn:not(.is-disabled):hover::before{ --arrow:#000; }

/* disabled-состояние */
.inner-slider__btn.is-disabled{
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none; /* клики и hover не срабатывают */
}

/* курсор как у <a> */
.inner-slider__btn {
  cursor: pointer;
  touch-action: manipulation;
}

.article-img-brd{border-radius: 0.625rem;}

  /* Управляем скроллом сами — без глобального smooth, чтобы не было двойной анимации */
  html{ scroll-behavior:auto; }

  .articles-detail__toc-list{list-style:none;margin:0;padding:0}
  .articles-detail__toc-list li+li{margin-top:8px}
  .articles-detail__toc-list a{
    text-decoration:none;opacity:.8;transition:opacity .2s;text-wrap:pretty
  }
  .articles-detail__toc-list a:hover{opacity:1}
  .articles-detail__toc-list a.is-active{opacity:1;font-weight:600}

  /* На всякий случай убираем влияние scroll-margin-top у заголовков */
  .articles-detail__content h3[id]{scroll-margin-top:0}


/* ===== изолированный Swiper (hs-*) ===== */
.js-hs-swiper{ width:100%; overflow:visible; }
.js-hs-swiper .hs-wrapper{ display:flex; will-change:transform; }
.js-hs-swiper .hs-slide{ flex:0 0 auto; width:auto; }

/* 3/2/1 карточка, gap = 30px */
@media (min-width:1280px){ .js-hs-swiper .hs-slide{ width:calc((100% - 60px)/3) !important; } }
@media (min-width:820px) and (max-width:1279.98px){ .js-hs-swiper .hs-slide{ width:calc((100% - 30px)/2) !important; } }
@media (max-width:819.98px){ .js-hs-swiper .hs-slide{ width:100% !important; } }

/* ===== карточка ===== */
.service-card{
  display:grid;
  grid-template-rows:auto auto auto auto;
  gap:10px;
  padding:0px;
  border-radius:10px;
  border:0px solid rgba(255,255,255,.12);
  background:transparent;
}
.service-card__title{
  margin:0;
  padding-bottom:0px;
  border-bottom:0px solid rgba(255,255,255,.12);
  font:500 24px/1.1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:-0.02em;
  color:#fff;
  text-wrap:pretty;
}

/* медиа-область 480x300, радиус 10 */
.service-card__media{
  position:relative;
  display:block;
  margin-top:20px;
  height:300px;
  border-radius:10px;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* сетка из точек */
.media-dots{
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.18) 1px, transparent 2px);
  background-size: 28px 28px;          /* шаг точек */
  background-position: center;
  opacity:.35;
  pointer-events:none;
  z-index:0;
}

/* боковые «кружки» (размытия) */
.media-glow{
  position:absolute; top:50%; width:45%; height:70%;
  transform:translateY(-50%);
  filter: blur(28px);
  opacity:.85;
  pointer-events:none;
  z-index:0;
}
.media-glow--left{
  left: -8rem;
  top: 1rem;
  background: radial-gradient(closest-side, rgb(255 34 245 / 45%), rgba(90, 34, 255, 0) 70%);
}
.media-glow--right{
  right:0px;
  left: 25rem;
  top: 17rem;
  background: radial-gradient(closest-side, rgb(255 34 245 / 45%), rgba(90, 34, 255, 0) 70%);
}

/* картинка поверх фона */
.service-card__img{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}

/* описание: максимум 2 строки */
.service-card__descr{
  margin:20px 0 0;
  color:#A79FAE;
  font:400 16px/1.4 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(1.4em * 2);
  text-wrap:pretty;
}

/* кнопки по макету */
.service-card__actions{
  margin-top:10px;
  display:grid;
  grid-template-columns:235px 1fr;
  gap:10px;
}
.service-card .btn{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 10px;
  padding: 0 25px;
  width: 100%;
  font: 500 14px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-align: center;
  text-wrap: pretty;
}

@media (max-width:1024px){
  .service-card__actions{ grid-template-columns:1fr; }
}

/* нижняя панель */
.home-services__slider-bar{
  margin-top:30px; padding-top:30px;
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.home-services__slider-buttons{ display:flex; gap:8px; }
.home-services__slider-fraction{
  justify-self:end;
  font:400 16px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#A79FAE;
}
.home-services__slider-fraction b{ color:#fff; font-weight:600; }

@media (max-width:1365px){
  ol {
    padding-top: 1rem;
}

.list-with-figures {
    padding-top: 1rem;
}

}

.articles-detail__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.articles-detail__tag{
    padding: 8px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 14px;
    line-height: 100%;
    white-space: nowrap;
    min-width: 80px;
    font-weight: 400;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0);
    transition: background 0.3s ease, color 0.3s ease, border-color .3s ease;
}

.articles-detail__tag:hover{
    background: rgba(255, 255, 255, 0.05);
}

.articles-detail__meta{
  display: flex;
  align-items: center;
  gap: 20px;
}

.articles-detail__time{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #C9A6FF;
  font-weight: 400;
}

.articles-detail__time-icon svg{
  display: block;
  width: 24px;
  height: 24px;
}

.articles-detail__date {
    margin-bottom: 0px;
}

.articles-detail__meta {
    margin-bottom: clamp(1.875rem, 0.7720588235rem + 4.9019607843vw, 3.125rem);
}