:root{ --kp-speed: .28s; }
html{ scroll-behavior: smooth !important; }
/*ТЕМА ЗИМА/ЛЕТО*/
:root {
  /* ===== БАЗА (фон + текст) ===== */
  --surface:        color-mix(in oklch, #ffb428 4%,  white 96%);   /* общий фон */
  --surface-strong: color-mix(in oklch, #ffb428 8%,  white 92%);   /* плотнее фон */
  --surface-border: color-mix(in oklch, var(--ink) 12%, var(--surface) 88%); /* границы */
  --ink:            #1a1200;                     /* основной текст */
  --ink-inverse:    #fff;                        /* светлый текст на тёмных фонах */
  --muted-ink:      color-mix(in oklch, var(--ink) 70%, white 30%); /* второстепенный текст */

  /* ===== ССЫЛКИ / АКЦЕНТ ===== */
  --link:           #ffb428;
  --link-hover:     #ffcc33;
  --brand:          var(--link); /* общий акцент */

  /* ===== GLASS (прозрачные блоки) ===== */
  --glass-filter:   blur(12px) saturate(150%);
  --glass-bg:       rgba(255,180,40,.15);
  --glass-border:   rgba(255,180,40,.30);
  --glass-ink:      var(--ink);

  /* ===== ШАПКА ===== */
  --nav-bg:         var(--glass-bg);
  --nav-border:     var(--glass-border);
  --nav-ink:        var(--ink);

  /* ===== КНОПКИ ===== */
  --btn-bg:         #ffb428;
  --btn-bg-hover:   #ffcc33;
  --btn-text:       var(--ink);   /* текст на кнопках (чёрный) */
  --btn-stroke:     #ffb428;
  --btn-border:     #ffcc33;
  --btn-glow-a:     var(--btn-bg);
  --btn-highlight:  #fff;

  /* ===== ТОС ===== */
  --toc-bg:         var(--glass-bg);
  --toc-border:     var(--glass-border);
  --toc-ink:        var(--ink);

  /* ===== КАРТОЧКИ / ТАБЛИЦЫ ===== */
  --card-bg:        var(--glass-bg);
  --card-border:    var(--glass-border);
  --card-ink:       var(--ink);

  --table-bg:       var(--glass-bg);
  --table-border:   var(--glass-border);
  --table-ink:      var(--ink);

  /* ===== ФУТЕР ===== */
  --foot-bg:         color-mix(in oklch, #ffb428 6%,  white 94%);
  --foot-bg-strong:  color-mix(in oklch, #ffb428 10%, white 90%);
  --foot-border:     rgba(255,180,40,.30);

  --foot-ink:        color-mix(in oklch, var(--ink) 85%, black 15%);  /* основной текст */
  --foot-text:       color-mix(in oklch, var(--ink) 70%, white 30%);  /* второстепенный текст */
  --foot-sub:        color-mix(in oklch, var(--ink) 55%, var(--surface) 45%); /* нижняя плашка */

  --foot-link:       #000;
  --foot-link-hover: #ffcc33;
  
   /* ===== ЛОГО ===== */
  --hero-ink: color-mix(in oklch, white 92%, #ffb428 8%);
  --hero-sub: color-mix(in oklch, white 80%, #ffb428 20%);
}

/* ===== меню (белый текст на фоне) ===== */
.kp-menu {
  --btn-text: var(--ink-inverse);
}

/* ===== hero (белый текст на фоне) ===== */
.kp-hero_links {
  --btn-text: var(--ink-inverse);
}

/* ===== ЛОГОТИП ===== */
:root {
  --logo-ink:   #000;
  --ui-btn-ink: var(--btn-stroke); /* legacy алиас */
}

html[data-theme="cold"]{
  /* базовый холодный акцент */
  --ink:          #0f1a2c;

  /* стекло переезжает в синий */
  --glass-bg:     rgba(40,85,161,.12);
  --glass-border: rgba(40,85,161,.25);
  --glass-ink:    var(--ink);

  /* ссылки можно сделать холодными (опционально) */
  --link:         #2855a1;
  --link-hover:   #3b6ee0;

  /* производные подхватят новые glass-переменные автоматически */
  --nav-bg:       var(--glass-bg);
  --nav-border:   var(--glass-border);

  --toc-bg:       var(--glass-bg);
  --toc-border:   var(--glass-border);

  --card-bg:      var(--glass-bg);
  --card-border:  var(--glass-border);

  --table-bg:     var(--glass-bg);
  --table-border: var(--glass-border);

  --foot-ink:     #0f1a2c;
  --foot-text:    color-mix(in oklch, var(--foot-ink) 80%, white 20%);
  --foot-link:    #2855a1;
  --foot-link-hover:#3b6ee0;
}

  /* ===== Логотип ===== */
  --logo-ink:         var(--nav-ink);  /* в cold логотип в цвет текста шапки */
}
/* Активна по умолчанию — Warm */
html[data-theme="warm"]{
  color-scheme: light;
}
/* Можно явно задать Cold */
html[data-theme="cold"]{
  color-scheme: light;
}
/*ТЕМА ЗИМА/ЛЕТО*/

/* ШРИФТ И ТИПОГРАФИКА */
html {
  -webkit-text-size-adjust: 100%;
  /*text-size-adjust: 100%;*/
  touch-action: manipulation; /* убираем double-tap zoom */
}

@supports (-webkit-touch-callout: none) {
  html { -webkit-text-size-adjust: none; } /* iOS — отключаем авто-масштаб */
}

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.6em;
  line-height: 1.3;
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }

p {
  margin-bottom: 1em;
}

strong {
  font-weight: 700;
}

input, select, textarea {
  font-size: 16px; /* iOS — чтобы фокус не вызывал зум */
}
/* ШРИФТ И ТИПОГРАФИКА */

/*HERO ТЕКСТ + ФОН*/
.kp-hero {
  position: relative;
  padding: 0;
  height: 80vh;

  --hero-bg: var(--hero-desktop);
  --hero-y: 40%; /* по умолчанию центр */

  background:
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 40%),
    var(--hero-bg) center var(--hero-y)/cover no-repeat;
}

/* Контейнер для текста и кнопок */
.kp-hero__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  gap: 20px;
}

.kp-hero__content,
.kp-hero_links {
  width: 100%;
}

/* Текст */
.kp-hero__title {
  color: var(--hero-ink);
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.2;
  font-size: 42px; /* базовый размер — ПК */
  text-shadow: 0 3px 6px rgba(0,0,0,.7);
}
.kp-hero__subtitle {
  color: var(--hero-sub);
  margin: 0 0 20px;
  font-size: 20px; /* базовый размер — ПК */
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}

/* ПК: внизу слева */
@media (min-width: 768px) {
  .kp-hero__inner {
    align-items: flex-start;
    text-align: left;
    padding: 0 0 40px 40px;
  }
  .kp-hero_links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .kp-hero__title {
    font-size: 42px; /* ПК размер */
  }
  .kp-hero__subtitle {
    font-size: 22px; /* ПК размер */
  }
  .kp-hero__title,
  .kp-hero__subtitle {
    max-width: 800px; /* ограничение ширины */
  }
}

/* Мобильный: центр низ + меньший текст */
@media (max-width: 767px) {
  .kp-hero {
    --hero-bg: var(--hero-mobile);
  }

  .kp-hero__title {
    font-size: 28px;
  }
  .kp-hero__subtitle {
    font-size: 18px;
  }

  .kp-hero__inner {
    align-items: center;
    text-align: center;
    padding: 0 15px 30px;
    width: 100%;
    box-sizing: border-box;
  }

  .kp-hero_links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
    width: 100%;
    box-sizing: border-box;
  }

  .kp-hero_links a {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .kp-hero_links a:first-child {
    grid-column: span 2;
  }
}
/*ХЕРО ТЕКСТ + ФОН*/

/*СТИЛИ ДЛЯ КАРТИНОК*/
/* Ресет figure + оформление */
.kp-figure {
  display: block;
  margin: 20px 0 0;
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.kp-figure > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
/*СТИЛИ ДЛЯ КАРТИНОК*/

/*КНОПКИ ДЛЯ ХЕРО, МЕНЮ, ТОС*/ /*ПРОВЕРИТЬ ПЕРЕМЕННЫЕ, НУЖНЫ ПРАВКИ*/
:root{
  --kp-btn-border-w: 1px;
  --kp-container-w: 1160px;
  --kp-container-pad: 16px;

  /* безопасно */
  --kp-btn-glow-a: currentColor;
  --kp-btn-glow-b: rgba(255,255,255,.7);

  --kp-btn-glow-outer: .26;
  --kp-btn-glow-inner: .08;
  --kp-btn-glow-blur: 28px;
}

.kp-btn--glow{
  position: relative;
  border-color: transparent;
  background: transparent;
  isolation: isolate;
}

.kp-btn--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--kp-btn-border-w);
  
  /* градиент с бликами по диагонали */
  background: linear-gradient(135deg,
    rgba(255,200,120,0.9),
    rgba(255,150,40,0.7)
  );

  -webkit-mask: linear-gradient(#000 0 0) content-box, 
                linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

.kp-btn--glow::after{
  content:"";
  position:absolute; display:none;
  inset:var(--kp-btn-border-w);
  border-radius: calc(var(--kp-radius-pill, 999px) - var(--kp-btn-border-w));
  opacity:.95; pointer-events:none;
}

.kp-btn--glow:hover{ transform: translateY(-1px); }
.kp-btn--glow:hover::after{
  display:block;
  background: color-mix(in srgb, var(--btn-highlight, #fff) var(--btn-glow-hover-pct, 10%), transparent);
  box-shadow:
    inset 0 1px 10px color-mix(in srgb, var(--btn-highlight, #fff) var(--btn-glow-hover-pct, 10%), transparent),
    0 0 calc(var(--btn-glow-blur) + 8px) color-mix(in srgb, var(--btn-glow-a, currentColor) 70%, transparent);
}

.kp-btn--glow.is-active,
.kp-btn--glow:active{
  background: var(--btn-bg-active, transparent);
  transform:none;
}

@keyframes kp-ripple{ 0%{opacity:.28;transform:scale(.2);} 100%{opacity:0;transform:scale(1);} }

.kp-btn--glow.anim-ripple{ overflow:hidden; }
.kp-btn--glow.anim-ripple:active::after{
  background:
    radial-gradient(circle at center,
      color-mix(in srgb, var(--btn-glow-a, currentColor) 35%, transparent) 0,
      transparent 55%),
    color-mix(in srgb, var(--btn-highlight, #fff) var(--btn-glow-inner-pct, 8%), transparent);
  animation: kp-ripple 420ms ease-out 1;
}
/* Все кнопки: меню, hero, toc */
.kp-menu a,
.kp-hero_links .kp-btn,
.kp-toc a {
  color: var(--btn-text) !important;             /* цвет текста */
  border: 1px solid var(--btn-stroke) !important;/* обводка */
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* Hover для всех кнопок */
.kp-menu a:hover,
.kp-hero_links .kp-btn:hover,
.kp-toc a:hover {
  background: color-mix(in srgb, var(--btn-stroke) 12%, transparent);
}
/*КНОПКИ ДЛЯ ХЕРО, МЕНЮ, ТОС*/ /*ПРОВЕРИТЬ ПЕРЕМЕННЫЕ, НУЖНЫ ПРАВКИ*/

/*КНОПКИ TG/WA ВНУТРИ СТАТЬИ*/
.kp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  line-height: 1;
  transition: all 0.25s ease;
  background: transparent;
  border: 2px solid currentColor; /* цвет рамки = цвет текста */
}

/* Telegram */
.kp-btn-telegram {
  color: #229ED9 !important; /* фирменный цвет Telegram */
  border-color: #229ED9 !important;
}
.kp-btn-telegram:hover {
  background-color: rgba(34,158,217,0.1) !important;
}

/* WhatsApp */
.kp-btn-whatsapp {
  color: #25D366 !important; /* фирменный цвет WhatsApp */
  border-color: #25D366 !important;
}
.kp-btn-whatsapp:hover {
  background-color: rgba(37,211,102,0.1) !important;
}

/* Иконки */
.kp-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor !important; /* иконка наследует цвет текста */
}
/*КНОПКИ TG/WA ВНУТРИ СТАТЬИ*/

/* СЕРАЯ ПОЛОСКА С ССЫЛКОЙ В ТГ */
.kp-tg-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(to right, #ffffff, #f7f7f7); /* градиент справа */
  padding: 10px 16px;
  border-radius: 10px; /* скруглённые углы */
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  width: 100%; /* на всю ширину экрана */
  box-sizing: border-box;
  margin-bottom: -30px;
}

.kp-tg-strip svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  fill: #229ED9; /* брендовый цвет Telegram */
  display: inline-block;
  vertical-align: middle;
}

.kp-tg-strip a {
  color: #229ED9 !important; /* цвет ссылки */
  text-decoration: none;
  font-weight: 500;
}

.kp-tg-strip a:hover {
  text-decoration: underline;
}
/* СЕРАЯ ПОЛОСКА С ССЫЛКОЙ В ТГ */

/*ТАБЛИЦЫ*/
.kp-table{
  width:100%;
  min-width:600px;
  border-collapse:separate;
  border-spacing:0;

  font:500 15px/1.45 'Montserrat', sans-serif;
  color: var(--ink);
}

/* 2) ОБОЛОЧКА — делает «карточку» и держит скролл на мобиле */
.kp-table-wrapper{
  background: color-mix(in oklch, var(--surface) 96%, var(--link) 4%);  /* ▲ новый */
  border: 1px solid color-mix(in oklch, var(--link) 35%, white 65%);    /* ▲ новый */
  border-radius:14px;                                                    /* ▲ новый */
  box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.06);  /* ▲ новый */
  overflow:hidden;                                                       /* ▲ чтобы радиус был виден */
}

/* Шапка/ячейки — как было */
.kp-table thead th{
  text-align:left;
  font-weight:700;
  padding:12px 14px;
  background: transparent;
  color: var(--ink);
  white-space:nowrap;
  border-bottom:1px solid color-mix(in oklch, var(--link) 40%, white 60%);
}
.kp-table td{
  padding:12px 14px;
  background: transparent;
  color: var(--ink);
  border-top:1px solid color-mix(in oklch, var(--link) 40%, white 60%);
}
.kp-table tbody tr:nth-child(2n) td{ background: transparent; }
.kp-table th, .kp-table td{ transition:none !important; }

/* 4) Скрываем полосу прокрутки на десктопе — оставляем как было */
@media (min-width: 641px){
  .kp-table-wrapper{
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .kp-table-wrapper::-webkit-scrollbar{ display:none; }
}

/* 5) Мобильный скролл — как было, но он теперь на wrapper (там же радиус/тень) */
@media (max-width: 640px) {
  .kp-table-wrapper {
    overflow-x: auto;                 /* ▲ скролл по X на оболочке */
    -webkit-overflow-scrolling: touch;
    contain: paint;
  }
}
/*ТАБЛИЦЫ*/

/*КАРТОЧКИ НА САЙТЕ */
.kp-info-card{
  background: color-mix(in oklch, var(--surface) 96%, var(--link) 4%); /* мягко в тему */
  border: 1px solid color-mix(in oklch, var(--link) 35%, white 65%);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.10),
              0 10px 22px rgba(0,0,0,.08);
  padding:16px 18px;
  color: var(--card-ink); /* обычно var(--ink) */
  font: 500 15px/1.5 'Montserrat', sans-serif;
  transition: none;
}

/* Внутри карточки */
.kp-info-row{
  display:flex; flex-wrap:wrap;
  padding:10px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--link) 30%, white 70%);
}
.kp-info-row:last-child{ border-bottom:none; }
.kp-info-term{ flex:0 0 180px; min-width:160px; font-weight:700; color: var(--ink); }
.kp-info-def{ flex:1 1 auto; color: var(--muted-ink); }

/* Термин/значение — без дублей */
.kp-info-term{
  flex:0 0 180px; min-width:160px;
  font-weight:700; color: var(--ink);
}
.kp-info-def{
  flex:1 1 auto;
  color: var(--muted-ink);
}

/* Сетка карточек (как было) */
.kp-cards{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap:16px;
}
.kp-cards > .kp-info-card{ grid-column: span 4; }   /* 3 колонки */
@media (max-width:992px){ .kp-cards > .kp-info-card{ grid-column: span 6; } } /* 2 */
@media (max-width:640px){ .kp-cards > .kp-info-card{ grid-column: 1 / -1; } }  /* 1 */

/* По желанию — уважать reduce-motion */
@media (prefers-reduced-motion: reduce){
  .kp-info-card{ transition: none; }
}
/*КАРТОЧКИ НА САЙТЕ */ /* Пара моментов на заметку:

/* МЕНЮ + БУРГЕР */ /*Используются var(--nav-bg), --nav-border, --glass-filter, --nav-ink, --kp-panel, --kp-text.*/
:root{
  --kp-glass: rgba(255,255,255,.08);
  --kp-ring: rgba(255,255,255,.22);
  --kp-shadow: 0 20px 50px rgba(0,0,0,.45);
  --kp-blur: 16px;
  --kp-radius-xl: 999px;
  --kp-radius-lg: 24px;
  --kp-gap: 14px;
  --kp-speed: .28s;
  --glass-filter: blur(12px) saturate(150%);
}

/* Шапка */
.kp-nav{
  position:absolute; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 10px;

  box-sizing:border-box; width:100%;
  padding-left:max(var(--kp-container-pad,16px), calc(50vw - var(--kp-container-w,1160px)/2));
  padding-right:max(var(--kp-container-pad,16px), calc(50vw - var(--kp-container-w,1160px)/2));

  background: var(--nav-bg);  
  border: 1px solid var(--nav-border);  
  backdrop-filter: var(--glass-filter);  
  -webkit-backdrop-filter: var(--glass-filter);  
  color: var(--nav-ink);
}

.kp-logo {
    font-size: 26px;      /* размер текста логотипа */
    font-weight: 700;     /* жирность */
    line-height: 1.2;     /* чтобы вертикально выглядело аккуратно */
    letter-spacing: 0.5px;/* чуть-чуть расстояние между буквами */
    text-transform: uppercase; /* если нужен капс */
    color: var(--logo-text) !important;
}

@media (max-width: 959.98px){
  .kp-nav{
    padding-left: 14px;
    padding-right: 14px;
  }
}

.kp-menu { 
  display: flex; 
  gap: 10px; 
}

@media (min-width:960px){
  .kp-menu {
    padding: 0; 
    border-radius: 0;
    background: none; 
    border: 0; 
    box-shadow: none;
    backdrop-filter: none; 
    -webkit-backdrop-filter: none;
  }
}

/* Бургер-кнопка (без визуального оформления кнопки) */
.kp-burger{
  appearance:none; border:0; background:transparent;
  padding:10px; cursor:pointer;
  flex-direction:column; gap:5px;
  display:none; /* скрыт по умолчанию */
}
.kp-burger span{ width:26px; height:2px; background: currentColor; border-radius:2px; }

.kp-drawer{ position:fixed; inset:0; z-index:9999; display:none; }
.kp-drawer[open], .kp-drawer:not([hidden]){ display:block; }

.kp-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  opacity:0; transition: opacity var(--kp-speed) ease;
}
.kp-drawer[open] .kp-backdrop{ opacity:1; }

.kp-drawer-panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(88vw, 420px);

  background: var(--kp-panel);
  backdrop-filter: blur(var(--kp-blur));
  -webkit-backdrop-filter: blur(var(--kp-blur));
  box-shadow: var(--kp-shadow);

  padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0)) 16px;
  padding-inline-end: calc(16px + env(safe-area-inset-right, 0));

  display: flex;
  flex-direction: column;
  gap: var(--kp-gap);

  border-top-left-radius: var(--kp-radius-lg);
  border-bottom-left-radius: var(--kp-radius-lg);

  transform: translateX(105%);
  transition: transform var(--kp-speed) cubic-bezier(.22,.61,.36,1);

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  outline: none;
}
.kp-drawer[open] .kp-drawer-panel{ transform:translateX(0); }

/* Ссылки внутри дровера — просто текстовые */
.kp-link{
  display:block;
  padding:5px 0 5px 4px;
  text-decoration:none;
  color: var(--kp-text);
  font-weight:600;
  letter-spacing:.2px;
  outline-offset:2px;
  text-align:left;
}
.kp-link:focus-visible{ outline:2px solid var(--kp-ring); }

/* соц-кнопки в дровере */
.kp-drawer-social{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  margin-top:20px;
}
.kp-drawer-social .kp-btn{
  min-width:140px;
  height:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0 12px;
  line-height:1;
  gap:6px;
  box-sizing:border-box;
}
/* Кнопка закрытия (икс) */
.kp-close{
  position:absolute; top:12px; right:12px;
  width:38px; height:38px;
  border:0; border-radius:12px;
  background: var(--kp-glass);
  box-shadow: inset 0 0 0 1px var(--kp-ring);
  backdrop-filter: blur(var(--kp-blur)); -webkit-backdrop-filter: blur(var(--kp-blur));
  cursor:pointer; z-index:3;
}
.kp-close span{
  position:absolute; left:50%; top:50%;
  width:20px; height:2px; background: currentColor; border-radius:2px;
}
.kp-close span:first-child{
  transform: translate(-50%,-50%) rotate(45deg);
}
.kp-close span:last-child{
  transform: translate(-50%,-50%) rotate(-45deg);
}
/* Показ/скрытие меню и бургера */
@media (max-width: 959.98px){
  .kp-menu  { display:none; }     /* скрыть десктоп-меню на мобиле */
  .kp-burger{ display:inline-flex; } /* показать бургер на мобиле */
}
@media (min-width: 960px){
  .kp-burger{ display:none; }     /* скрыть бургер на десктопе */
}
/* МЕНЮ + БУРГЕР */ /*Используются var(--nav-bg), --nav-border, --glass-filter, --nav-ink, --kp-panel, --kp-text.*/

/* ====== TOC: стеклянная панель-пилюли ====== */
.kp-toc{
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-bottom: -30px;
}

.kp-toc-boundary {
  position: relative;  /* задаёт "контейнер" для sticky */
}

/* сама подложка/лента */
.kp-toc-list{
  position: relative;
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  /* 1) База — цвет стекла из переменной */
  background-color: var(--toc-bg);              /* ← ВАЖНО: сначала base-color */

  /* 2) Лёгкий «мёд» сверху (можно оставить как есть, если brand не задан) */
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--brand, transparent) 12%, transparent),
    transparent 60%
  );

  /* 3) Стеклянные эффекты и контур */
  border: 1px solid var(--toc-border);
  border-radius: 14px;
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);

  /* 4) Цвет текста внутри подложки */
  color: var(--toc-ink);

  isolation: isolate;
}

/* Элементы списка */
.kp-toc-list li {
  flex: 0 0 auto;
}

/* Отступ для якорей */
[id^="kp-"] { scroll-margin-top: 60px; }

@media (max-width: 960px) {
  .kp-toc { top: 0; }
  [id^="kp-"] { scroll-margin-top: 100px; }

  /* Перенос кнопок вместо скролла */
  .kp-toc-list {
    flex-wrap: wrap;
    overflow-x: visible; /* убираем горизонтальный скролл */
  }
}
/* ====== TOC: стеклянная панель-пилюли ====== */

/*ОТЗЫВЫ МЕНЮ*/
.kp-reviews{
  --pill-bg: #eef1f5;
  --pill-border: rgba(0,0,0,.08);
  --pill-active: #ffd54f;
  --pill-active-text: #1f1f1f;

  --card-bg:#fff;
  --card-radius: 26px;
  --card-shadow: 0 16px 42px rgba(0,0,0,.12);

  --stars:#ffb400;
  --meta:#6b6f76;
  --meta-accent:#6f42c1;
  --link-accent:#ffb400;
}

/* Заголовок */
.kp-reviews .kp-revs-head h2{
  margin:0 0 16px 0;
  font-size:clamp(30px,7vw,54px);
  line-height:1.04;
  font-weight:800;
  text-align:center;
}

/* Капсула фильтров */
.kp-reviews .kp-revs-filters{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:999px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.85)),
    var(--pill-bg);
  border:1px solid var(--pill-border);
  box-shadow:0 8px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(8px) saturate(150%);
}
.kp-reviews .kp-revs-filters button{
  appearance:none;
  border:1px solid var(--pill-border);
  background:#fff;
  color:#222;
  font-weight:800;
  font-size:15px;
  line-height:1;
  padding:12px 18px;
  border-radius:999px;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  transition: background .18s, transform .18s, box-shadow .18s, color .18s, border-color .18s;
}
.kp-reviews .kp-revs-filters .btn-icon{
  width:44px; height:44px; padding:0; display:grid; place-items:center; border-radius:999px;
}
.kp-reviews .kp-revs-filters button:hover{ transform:translateY(-1px); }
.kp-reviews .kp-revs-filters .is-active{
  background:var(--pill-active);
  color:var(--pill-active-text);
  border-color: color-mix(in srgb, var(--pill-active) 48%, #000);
  box-shadow:0 10px 22px rgba(255,213,79,.35), inset 0 1px 0 rgba(255,255,255,.85);
}

.kp-reviews .kp-revs-list{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:14px 4px 18px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent);
  scrollbar-width:thin;
}
.kp-reviews .kp-revs-list::-webkit-scrollbar{ height:6px; }
.kp-reviews .kp-revs-list::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:3px; }

/* отдельная карточка в ленте */
.kp-reviews .kp-review{
  flex:0 0 auto;
  width: clamp(280px, 70vw, 520px);   /* мобайл ближе к ширине экрана */
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

/* На десктопах карточку делаем покомпактнее, но остаётся каруселью */
@media (min-width: 1024px){
  .kp-reviews .kp-review{ width: clamp(360px, 40vw, 520px); }
}

/* ===== Вид карточки ===== */
.kp-reviews .kp-card{
  position:relative;
  background:var(--card-bg);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  padding:22px 22px 18px;
  text-align:center;
}

/* «свёрнутые» уголки справа */
.kp-reviews .kp-card::before,
.kp-reviews .kp-card::after{
  content:""; position:absolute; width:40px; height:40px; pointer-events:none; opacity:.6;
}
.kp-reviews .kp-card::before{
  right:-1px; top:-1px; border-top-right-radius:inherit;
  background: radial-gradient(26px 26px at 100% 0%, rgba(0,0,0,.08), transparent 60%);
}
.kp-reviews .kp-card::after{
  right:-1px; bottom:-1px; border-bottom-right-radius:inherit;
  background: radial-gradient(26px 26px at 100% 100%, rgba(0,0,0,.06), transparent 60%);
}

/* звёзды, текст, мета, ссылка */
.kp-reviews .kp-stars{ color:var(--stars); font-size:18px; letter-spacing:2px; margin-bottom:12px; }
.kp-reviews .kp-text{ margin:0 0 14px 0; font-size:16px; line-height:1.45; color:#111; }
.kp-reviews .kp-meta{ color:var(--meta); font-size:15px; margin-bottom:10px; }
.kp-reviews .kp-meta b{ color:#111; font-weight:800; }
.kp-reviews .kp-meta time, .kp-reviews .kp-meta .date{ color:var(--meta-accent); font-weight:700; }
.kp-reviews .kp-link{
  display:inline-block; font-weight:800; color:#111; text-decoration:none;
  border-bottom:3px solid var(--link-accent); line-height:1.1; padding-bottom:2px;
  transition: color .18s, border-color .18s;
}
.kp-reviews .kp-link:hover{ color:var(--link-accent); border-color: color-mix(in srgb, var(--link-accent) 80%, #000); }

/* Пагинация-точки (если добавишь в HTML .kp-revs-dots) */
.kp-reviews .kp-revs-dots{
  display:flex; gap:8px; justify-content:center; margin-top:12px;
}
.kp-reviews .kp-revs-dots i{
  width:8px; height:8px; border-radius:50%; background:#cfd6df; display:inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.kp-reviews .kp-revs-dots i.is-active{ background:#8894a6; }
/*ОТЗЫВЫ МЕНЮ*/

/* ПОДВАЛ */
.kp-footer{
  position: relative;
  margin-top: clamp(32px, 6vw, 80px);
  isolation: isolate;

  /* берём из темы, иначе — из базовых surface */
  background: var(--foot-bg, var(--surface));
  border: 1px solid var(--foot-border, var(--surface-border));
  color: var(--foot-ink);
  /* ↓ локально подменяем базовые токены для всего содержимого футера */
  --link:        var(--foot-link);
  --link-hover:  var(--foot-link-hover);
  --muted-ink:   var(--foot-text);
}

/* мягкий верхний разделитель */
.kp-footer::before{
  content:"";
  position:absolute; inset:-1px 0 auto 0; height:28px;
  background: linear-gradient(to bottom, rgba(0,0,0,.05), transparent);
  pointer-events:none;
}

.kp-footer > .kp-footer__inner{
  position: relative;
  background: none;
  padding: clamp(20px, 4vw, 36px) clamp(16px, 5vw, 44px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

/* колонки */
.kp-footer .kp-foot-col{ grid-column: span 4; min-width:0; }
.kp-footer .kp-foot-col:first-child{ grid-column: span 5; }
.kp-footer .kp-foot-col:last-child{ grid-column: span 3; }

/* заголовки / логотип */
.kp-footer h4{ margin:0 0 10px; font-size:16px; font-weight:800; letter-spacing:.2px; }
.kp-foot__logo{
  display:inline-block; font-weight:900; letter-spacing:.3px; font-size:20px;
  text-decoration:none; color: var(--logo-ink) !important;
}

/* текст/описание */
.kp-foot__tag{ margin: 8px 0 14px; color: var(--foot-text, var(--muted-ink)); line-height: 1.4; }

/* ссылки */
.kp-foot__links{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.kp-foot__links a{
  color: var(--link) !important;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.kp-foot__links a:hover{
  color: var(--link-hover);
  border-color: var(--link-hover);
  transform: translateX(2px);
}

/* соц-кнопки */
.kp-foot__socials{ display:flex; gap:10px; }
.kp-foot__socials a{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  background: var(--foot-bg-strong, var(--surface-strong));
  border:1px solid var(--foot-border, var(--surface-border));
  color: var(--foot-link, var(--link)) !important;
  font-weight:800; font-size:12px; text-decoration:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .15s, background .15s, border-color .15s;
}
.kp-foot__socials a:hover{
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand, var(--link)) 50%, transparent), transparent 60%),
    var(--foot-bg-strong, var(--surface-strong));
  border-color: color-mix(in srgb, var(--brand, var(--link)) 70%, #fff 30%);
  color: var(--foot-link-hover, var(--link-hover));
}

/* рейтинг/бейдж */
.kp-foot__rating{ margin-top:12px; font-weight:800; color: var(--foot-ink, var(--ink)); }
.kp-foot__rating span{ color: color-mix(in srgb, var(--brand, var(--link)) 70%, transparent); }

/* нижняя плашка */
.kp-foot__bottom{
  background: var(--foot-bg, var(--surface));
  border-top:1px solid var(--foot-border, var(--surface-border));
  padding:12px clamp(16px, 5vw, 44px);
  color: var(--foot-sub, color-mix(in oklch, var(--foot-ink, var(--ink)) 55%, var(--surface) 45%));
  font-size:13px;
}

/* адаптив — без изменений */
@media (max-width:992px){
  .kp-footer .kp-foot-col{ grid-column: span 6; }
  .kp-footer .kp-foot-col:last-child{ grid-column: span 6; }
}
@media (max-width:640px){
  .kp-footer .kp-footer__inner{ grid-template-columns:1fr; }
  .kp-footer .kp-foot-col{ grid-column:1 / -1; }
  .kp-footer .kp-foot__socials{ margin-bottom:6px; }
  .kp-footer .kp-foot__bottom{ text-align:center; }
}
/* ПОДВАЛ */