/* ============================================================
   respeed.css — кастомные стили поверх Framer SSR-экспорта.
   Структура по секциям страницы (сверху вниз).
   Framer-классы расшифрованы в framer-classes.md.
   Брейкпоинты: Wide ≥1400 | Tablet 810–1399 | Mobile ≤809
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   0. БАЗИС
   ───────────────────────────────────────────────────────────── */

/* Брендовое выделение текста */
::selection { background: #FCD000; color: #0c0c12; }
::-moz-selection { background: #FCD000; color: #0c0c12; }

/* Плавный скролл + отступ под прилипшей шапкой для всех якорных секций */
html { scroll-behavior: smooth; }
#hero, #howitworks, #services, #works, #price, #faq, #recommend, #why {
  scroll-margin-top: calc(var(--rs-header-h, 80px) + 32px);
}

/* Анти-FOUC: шапка скрыта Framer (opacity:0 + translateY) — показываем
   сразу из <head> до первой отрисовки, не дожидаясь JS */
.rs-header-container { opacity: 1 !important; transform: none !important; }

/* Шапка: начальное состояние (прозрачная) задаётся через CSS до JS.
   При скролле JS добавляет класс .rs-scrolled → тёмное стекло.
   Класс специфичнее базового правила, поэтому побеждает — без !important на JS. */
.rs-header {
  background-color: rgba(12, 12, 18, 0) !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0) !important;
}
.rs-header.rs-scrolled {
  background-color: rgba(8, 8, 14, 0.78) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Inline-дубль шапки внутри Hero скрываем через CSS, а не JS —
   чтобы браузер не считал его layout до DOMContentLoaded. */
.rs-header-inline { display: none !important; }


/* ─────────────────────────────────────────────────────────────
   1. ШАПКА  [.rs-header]
   ───────────────────────────────────────────────────────────── */

/* При <1260px nav-блок (1240px) вылезает за край */
@media (max-width: 1260px) {
  .rs-header.rs-header-wide { width: 100% !important; padding: 32px 40px !important; box-sizing: border-box !important; }
  .rs-header-nav { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 600px) {
  .rs-header.rs-header-wide { padding: 32px 20px !important; }
}

/* Бургер: появляется когда nav-ссылки перестают влезать */
@media (max-width: 960px) {
  .rs-nav-links { display: none !important; }
  #rs-burger { display: flex !important; }
}

/* Кнопка бургер (наш элемент из JS) */
#rs-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  margin-left: 16px;
}
#rs-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
#rs-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#rs-burger.open span:nth-child(2) { opacity: 0; }
#rs-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* CTA-кнопка шапки: на мобильном превращается в иконку телефона */
@media (max-width: 960px) {
  #rs-burger { border: 1.5px solid #fff !important; border-radius: 8px !important; width: 44px !important; height: 44px !important; }
  .rs-header-cta a .rs-phone-icon { display: block !important; }
  .rs-header-cta a > *:not(.rs-phone-icon) { display: none !important; }
  .rs-header-cta a::after { border: none !important; }
  .rs-header-cta a { background: transparent !important; padding: 10px !important; width: 44px !important; min-width: unset !important; box-sizing: border-box !important; color: #fff !important; }
}
.rs-header-cta a .rs-phone-icon { display: none; width: 20px; height: 20px; flex-shrink: 0; }

/* Мобильное меню overlay (наш элемент из JS) */
#rs-mobile-nav {
  display: none;
  position: fixed;
  top: var(--rs-header-h, 108px);
  left: 0; right: 0; bottom: 0;
  background: rgba(12, 12, 18, 0.99);
  z-index: 98;
  padding: 32px 40px;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}
#rs-mobile-nav.open { display: flex; }
#rs-mobile-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  font-weight: 500;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s;
}
#rs-mobile-nav a:hover { color: #FCD000; }
#rs-mobile-nav .rs-cta {
  margin-top: 32px;
  padding: 16px 24px;
  background: #FCD000;
  color: #0c0c12;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  text-align: center;
  border-bottom: none;
}
#rs-mobile-nav .rs-cta:hover { color: #0c0c12; opacity: 0.85; }

/* Hover: лого */
.rs-logo { transition: opacity 0.22s ease; }
.rs-logo:hover { opacity: 0.65; }

/* Hover: nav-ссылки шапки */
.rs-header .rs-nav-links a { transition: color 0.22s ease; }
.rs-header .rs-nav-links a:hover .framer-text { color: #FCD000 !important; }

/* Hover: CTA-кнопка шапки (outlined → fill белый, только десктоп) */
@media (min-width: 961px) {
  .rs-header-cta a { transition: background-color 0.22s ease; }
  .rs-header-cta a:hover { background-color: #ffffff !important; }
  .rs-header-cta a:hover .framer-text { color: #0c0c12 !important; }
}


/* ─────────────────────────────────────────────────────────────
   2. HERO  [#hero]
   ───────────────────────────────────────────────────────────── */

/* Верхний градиент — затемнение под шапкой (в экспорте отсутствовал) */
.rs-root .rs-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(rgb(12, 12, 18) 0%, rgba(1, 1, 17, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Отступ от шапки до заголовка (×1.5 от оригинала 200px) */
.rs-root .rs-hero-content { padding-top: 300px !important; }
@media (max-width: 1399px) {
  .rs-root .rs-hero-content { padding-top: 220px !important; }
}
@media (max-width: 809px) {
  .rs-root .rs-hero-content { padding-top: 180px !important; }
}

/* Низ Hero до маркизы: на узком десктопе/планшете −40px (240 → 200) */
@media (min-width: 810px) and (max-width: 1399px) {
  .rs-root .rs-hero-content { padding-bottom: 200px !important; }
}

/* На мобильном: Wide-контент hero скрыт, оставляем только нативный mobile-layout */
@media (max-width: 809px) {
  .rs-hero .hidden-1c2h4zm { display: none !important; }
  .rs-hero .rs-hero-inner .hidden-1c2h4zm { display: contents !important; }
  .rs-hero .rs-hero-heading .hidden-1c2h4zm { display: contents !important; }
}

/* CTA-кнопки: на мобильном в столбик, на всю ширину */
@media (max-width: 809px) {
  .rs-hero-cta-group { flex-direction: column !important; width: 100% !important; }
  .rs-btn-primary,
  .rs-btn-secondary { width: 100% !important; }
  .rs-btn-primary a,
  .rs-btn-secondary a { width: 100% !important; justify-content: center !important; }
}

/* overflow: visible на родителях кнопок — иначе тень/лифт обрезается */
.rs-hero-cta-group,
.rs-hero-inner { overflow: visible !important; }

/* Hover: жёлтая кнопка */
.rs-btn-primary a {
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}
.rs-btn-primary a:hover {
  transform: translateY(-2px);
  background-color: #FFD740 !important;
  box-shadow: 0 8px 28px rgba(252, 208, 0, 0.3);
}

/* Hover: тёмная кнопка «Написать нам» */
.rs-btn-secondary a {
  transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}
.rs-btn-secondary a:hover {
  transform: translateY(-2px);
  background-color: rgba(50, 50, 65, 0.98) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.4);
}


/* ─────────────────────────────────────────────────────────────
   3. МАРКИЗЫ ЛОГОТИПОВ  [.rs-marquee-1, .rs-marquee-2]
   ───────────────────────────────────────────────────────────── */

@keyframes rs-left  { from { transform: translateX(0); } to { transform: translateX(calc(var(--rs-shift, 50%) * -1)); } }
@keyframes rs-right { from { transform: translateX(calc(var(--rs-shift, 50%) * -1)); } to { transform: translateX(0); } }

/* Пауза при наведении */
.rs-marquee-1:hover ul,
.rs-marquee-2:hover ul,
.rs-marquee-tools:hover ul { animation-play-state: paused !important; }

/* Плавное увеличение карточек при ховере — только десктоп и узкий десктоп */
@media (min-width: 1024px) {
  /* Снимаем обрезку с обоих контейнеров — wrap и родительской секции.
     overflow:clip+margin даёт 56px запаса для scale и тени без скролла;
     горизонтально секция full-width, выход за экран не виден. */
  /* Карточка 280px заполняет строку впритык → scale режется секцией.
     Поднимаем высоту строк до 300px: карточка центрируется (place-items:center
     на section и ul), появляется по 10px запаса сверху/снизу — scale 1.05
     вписывается БЕЗ снятия overflow, без clip-path и без артефактов. */
  .rs-marquee-1,
  .rs-marquee-2 { height: 300px !important; }
  .rs-marquee-1 li > *,
  .rs-marquee-2 li > * {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .rs-marquee-1 li:hover > *,
  .rs-marquee-2 li:hover > * {
    transform: scale(1.05);
    z-index: 2;
  }
}

/* Планшет: карточки логотипов меньше */
@media (max-width: 1023px) {
  .rs-marquee-1 li > *,
  .rs-marquee-2 li > * { width: 260px !important; height: 195px !important; }
  .rs-marquee-1,
  .rs-marquee-2 { height: 195px !important; }
}

/* Мобильный: ещё меньше + меньше зазор */
@media (max-width: 599px) {
  .rs-marquee-1 li > *,
  .rs-marquee-2 li > * { width: 211px !important; height: 160px !important; }
  .rs-marquee-1,
  .rs-marquee-2 { height: 160px !important; }
  .rs-marquee-1 ul,
  .rs-marquee-2 ul { gap: 10px !important; }
  .rs-marquee-wrap { gap: 10px !important; }
}


/* ─────────────────────────────────────────────────────────────
   4. МАРКИЗА ИНСТРУМЕНТОВ  [.rs-marquee-tools]
   Скорость 50px/с (быстрее остальных 35px/с — задаётся в JS)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1023px) { .rs-marquee-tools ul { gap: 16px !important; } }
@media (max-width: 599px)  { .rs-marquee-tools ul { gap: 10px !important; } }


/* ─────────────────────────────────────────────────────────────
   5. УСЛУГИ — мобильный фикс  [#services]
   Framer SSR задал карточкам position:sticky со скролл-анимацией,
   которая без рантайма ломает верстку на 390px.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 809px) {
  /* «Дизайн интерфейсов»: картинка 131×296px повёрнута -90deg → визуально 296×131px.
     bottom:-83px = (131/2 - 296/2) компенсирует сдвиг центра, прижимает к нижнему краю.
     padding-bottom:180px = 131px (визуальная высота) + 49px отступ от текста */
  .rs-root .framer-1jfusar {
    overflow: hidden !important;
    height: auto !important;
    padding-bottom: 180px !important;
  }
  .rs-root .framer-189i4uj {
    left: 50% !important;
    top: auto !important;
    bottom: -83px !important;
    transform: translateX(-50%) rotate(-90deg) !important;
  }

  /* «Дизайн приложений»: уменьшаем отступ до иллюстрации */
  .rs-root .framer-1olms14 { z-index: 0 !important; top: 130px !important; }

  /* «Дизайн сайтов»: уменьшаем отступ до иллюстрации (было 360px) */
  .rs-root .framer-1mm7ktl { height: 300px !important; }
}


/* ─────────────────────────────────────────────────────────────
   6. КАК ЭТО РАБОТАЕТ + УСЛУГИ  [#howitworks, #services]
   Shimmer-анимация (бегущий блик по верхней кромке карточек).
   Framer-рантайм анимировал translateX; без него бликовые линии
   застыли. Воспроизводим через translateX от базовой позиции.
   ───────────────────────────────────────────────────────────── */

@keyframes rs-comet-x {
  0%   { transform: translateX(0);                  opacity: 0; }
  4%   { opacity: 1; }
  33%  { transform: translateX(var(--rs-travel));   opacity: 0; }
  100% { transform: translateX(var(--rs-travel));   opacity: 0; }
}
/* Вертикальная комета (левая граница «Дизайн приложений») */
@keyframes rs-comet-y {
  0%   { transform: translateY(0)     rotate(180deg); opacity: 0; }
  4%   { opacity: 1; }
  33%  { transform: translateY(100px) rotate(180deg); opacity: 0; }
  100% { transform: translateY(100px) rotate(180deg); opacity: 0; }
}

.rs-comet-ds,
.rs-comet-ui,
.rs-comet-how,
.rs-comet-web,
.rs-comet-extra {
  --rs-travel: 110px;
  animation: rs-comet-x 7s cubic-bezier(.06, .8, .12, 1) infinite backwards;
}
.rs-comet-apps-v {
  animation: rs-comet-y 7s cubic-bezier(.06, .8, .12, 1) infinite backwards;
}

/* Задержки — кометы появляются по очереди */
.rs-comet-how { animation-delay: 0s;   }
.rs-comet-apps-v  { animation-delay: 0.7s; }
.rs-comet-ui { animation-delay: 1.3s; }
.rs-comet-web  { animation-delay: 2.6s; }
.rs-comet-ds  { animation-delay: 3.9s; }
.rs-comet-extra { animation-delay: 5.2s; }

/* Планшет: карточки уже → короче пробег; howitworks и вертикальная — скрываем */
@media (max-width: 1199px) {
  .rs-comet-ui,
  .rs-comet-how,
  .rs-comet-web,
  .rs-comet-extra { --rs-travel: 70px; }
  .rs-comet-ds,
  .rs-comet-apps-v  { display: none !important; }
}


/* ─────────────────────────────────────────────────────────────
   6. ИЗБРАННЫЕ РАБОТЫ  [#works]
   ───────────────────────────────────────────────────────────── */

/* Hover: тёмный оверлей на весь блок + масштаб изображения.
   ::before — чтобы не затирать Framer ::after-обводку карточки */
.rs-work-1,
.rs-work-2,
.rs-work-3 {
  cursor: default;
  position: relative;
}
.rs-work-1::before,
.rs-work-2::before,
.rs-work-3::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: rgba(23, 23, 29, 0.65);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.rs-work-1:hover::before,
.rs-work-2:hover::before,
.rs-work-3:hover::before { opacity: 1; }

.rs-work-1 img,
.rs-work-2 img,
.rs-work-3 img { transition: transform 0.4s ease; }
.rs-work-1:hover img,
.rs-work-2:hover img,
.rs-work-3:hover img { transform: scale(1.04); }

/* «Многие проекты защищены NDA» — центрирование на планшете и мобильном */
@media (max-width: 1399px) {
  .rs-nda-text p { --framer-text-alignment: center !important; text-align: center !important; }
}

/* Hover: текстовая ссылка «Свяжитесь с нами» внутри NDA-абзаца */
.rs-nda-text a { transition: opacity 0.22s ease; }
.rs-nda-text a:hover { opacity: 0.75; text-decoration: underline; }


/* ─────────────────────────────────────────────────────────────
   7. ЦЕНА  [#price]
   ───────────────────────────────────────────────────────────── */

/* Прайс-карточка: на широком мобильном (481–809px) убираем лишний воздух.
   Framer задал height:638px под 390px-телефон; на 481–809 это даёт пустой блок. */
@media (min-width: 481px) and (max-width: 809px) {
  .rs-price-card { height: 504px !important; }
  .rs-price-inner  { width: 746px !important; }
  .rs-price-content { left: 17px !important; right: 17px !important; width: unset !important; }
}


/* ─────────────────────────────────────────────────────────────
   8. BOTTOM CTA  [«Усильте вашу дизайн-команду»]
   ───────────────────────────────────────────────────────────── */

/* Кнопки: на мобильном на всю ширину */
@media (max-width: 809px) {
  .rs-cta-btn-primary,
  .rs-cta-btn-secondary { width: 100% !important; }
  .rs-cta-btn-primary a,
  .rs-cta-btn-secondary a { width: 100% !important; justify-content: center !important; }
}

/* overflow: visible по всей цепочке родителей — иначе тень/лифт обрезается */
.rs-cta-buttons,
.rs-cta-wrap-1,
.rs-cta-wrap-2 { overflow: visible !important; }

/* Hover: жёлтая кнопка */
.rs-cta-btn-primary a {
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}
.rs-cta-btn-primary a:hover {
  transform: translateY(-2px);
  background-color: #FFD740 !important;
  box-shadow: 0 8px 28px rgba(252, 208, 0, 0.3);
}

/* Hover: жёлтая кнопка в блоке «Наши услуги» */
.framer-l664iz-container { overflow: visible !important; }
.framer-l664iz-container a {
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}
.framer-l664iz-container a:hover {
  transform: translateY(-2px);
  background-color: #FFD740 !important;
  box-shadow: 0 8px 28px rgba(252, 208, 0, 0.3);
}

/* Hover: тёмная кнопка */
.rs-cta-btn-secondary a {
  transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}
.rs-cta-btn-secondary a:hover {
  transform: translateY(-2px);
  background-color: rgba(50, 50, 65, 0.98) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Баннер «Платим за рекомендации»: white-space:pre + width:auto → не переносится */
@media (max-width: 1100px) {
  .rs-referral-banner { width: auto !important; max-width: calc(100% - 48px) !important; }
  .rs-referral-text { white-space: normal !important; width: 100% !important; }
  .rs-referral-text p.framer-text { --framer-text-alignment: center !important; text-align: center !important; }
}


/* ─────────────────────────────────────────────────────────────
   9. FAQ  [#faq]
   Framer SSR рендерит только «Closed»-вариант; ответы вставляет JS.
   ───────────────────────────────────────────────────────────── */

/* Обёртка ответа — скрыта, раскрывается через max-height */
.rs-faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
.rs-faq-answer.rs-open { max-height: 600px; }

/* Вертикальная палочка «+» → при открытии скрывается (становится «−») */
.rs-faq-item .rs-faq-icon { transition: opacity 0.25s ease, transform 0.25s ease; }
.rs-faq-item.rs-faq-open .rs-faq-icon { opacity: 0; transform: rotate(90deg); }

/* Hover: строки FAQ — фон через ::before (элемент не смещается, плюсики не уходят) */
.rs-faq-item .rs-faq-row { cursor: pointer; position: relative; }
.rs-faq-item .rs-faq-row::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -20px; right: -20px;
  border-radius: 8px;
  background: transparent;
  transition: background 0.22s ease;
  z-index: -1;
  pointer-events: none;
}
.rs-faq-item .rs-faq-row:hover::before { background: rgba(255, 255, 255, 0.05); }

/* Hover: «Часто задаваемые вопросы →» */
a.rs-faq-title-link { transition: opacity 0.22s ease; }
a.rs-faq-title-link:hover { opacity: 0.75; }


/* ─────────────────────────────────────────────────────────────
   10. ФУТЕР  [.rs-footer]
   ───────────────────────────────────────────────────────────── */

/* >1260px: повторяем сетку шапки — контент max 1400px по центру, мин. отступ 80px.
   1400 контент + 80×2 padding = 1560px бокса. box-sizing:border-box => padding внутри. */
@media (min-width: 1261px) {
  .rs-footer {
    width: 100% !important;
    max-width: 1560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 64px 80px !important;
    box-sizing: border-box !important;
  }
}

/* Широкий планшет (≤1260px): убираем фикс. ширину */
@media (max-width: 1260px) {
  .rs-footer { width: 100% !important; padding: 48px 40px !important; box-sizing: border-box !important; }
  .rs-footer-copy p.framer-text  { --framer-text-alignment: center !important; text-align: center !important; }
  .rs-footer-tagline p.framer-text { --framer-text-alignment: center !important; text-align: center !important; }
}

/* Узкий планшет + мобилка (≤1023px): всё в колонку */
@media (max-width: 1023px) {
  .rs-footer { width: 100% !important; padding: 40px 24px !important; box-sizing: border-box !important; }
  .rs-cta-buttons { flex-direction: column !important; align-items: center !important; gap: 24px !important; }
  .rs-tags { flex-wrap: wrap !important; justify-content: center !important; padding: 12px 20px !important; gap: 12px 24px !important; flex: none !important; }
  /* Обёртки тегов скроллятся горизонтально на мобилке — скрываем полосу,
     тач-скролл при этом остаётся */
  .framer-1vmf2sm, .framer-1a6lyby { scrollbar-width: none; -ms-overflow-style: none; }
  .framer-1vmf2sm::-webkit-scrollbar, .framer-1a6lyby::-webkit-scrollbar { display: none; }
  .rs-footer-title p.framer-text  { --framer-text-alignment: center !important; text-align: center !important; }
  .rs-footer-copy p.framer-text  { --framer-text-alignment: center !important; text-align: center !important; }
  .rs-footer-tagline p.framer-text { --framer-text-alignment: center !important; text-align: center !important; }
  .rs-footer-social { justify-content: center !important; }
}
@media (max-width: 809px) {
  .rs-footer { padding: 40px 20px !important; }
}

/* Hover: nav-ссылки футера */
.rs-footer-link-how a,
.rs-footer-link-services a,
.rs-footer-link-works a,
.rs-footer-link-price a,
.rs-footer-link-faq a { transition: color 0.22s ease; }
.rs-footer-link-how a:hover .framer-text,
.rs-footer-link-services a:hover .framer-text,
.rs-footer-link-works a:hover .framer-text,
.rs-footer-link-price a:hover .framer-text,
.rs-footer-link-faq a:hover .framer-text { color: #FCD000 !important; }

/* Hover: Wide-вариант шапки на мобильном */
@media (max-width: 809px) {
  .rs-header-container > .ssr-variant { display: contents !important; }
  .rs-header-container .rs-nav-links { display: none !important; }
}

/* line-height текста «250 000 ₽ в месяц» на мобиле */
@media (max-width: 809px) {
  .framer-i45pg6 h3 { --framer-line-height: 1.1em !important; }
}

/* ── Cookie-баннер ── */
.rs-cookie {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1000;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(20, 20, 26, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* стартовое состояние — спрятан снизу */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  will-change: opacity, transform;
}

.rs-cookie.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.rs-cookie__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.rs-cookie__link {
  color: #FCD000;
  text-decoration: none;
  border-bottom: 1px solid rgba(252, 208, 0, 0.35);
  transition: border-color 0.18s ease;
}

.rs-cookie__link:hover { border-bottom-color: #FCD000; }

.rs-cookie__btn {
  align-self: flex-start;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  background: #FCD000;
  color: #0c0c12;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.rs-cookie__btn:hover {
  background: #FFD740;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(252, 208, 0, 0.28);
}

.rs-cookie__btn:active { transform: translateY(0); }

.rs-cookie__btn:focus-visible {
  outline: 2px solid #FCD000;
  outline-offset: 2px;
}

/* Затемняющая подложка снизу — только мобайл */
.rs-cookie-scrim { display: none; }

@media (max-width: 600px) {
  .rs-cookie {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    padding: 16px 18px;
    border-radius: 16px;
  }
  .rs-cookie__btn {
    align-self: stretch;
    text-align: center;
    padding: 13px 22px;
  }

  .rs-cookie-scrim {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 280px;
    z-index: 999; /* под баннером (1000) */
    pointer-events: none;
    background: linear-gradient(to top,
      rgba(8, 8, 14, 0.92) 0%,
      rgba(8, 8, 14, 0.72) 38%,
      rgba(8, 8, 14, 0) 100%);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    /* блюр плавно сходит на нет вверху — без резкой кромки */
    -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 100%);
    mask-image: linear-gradient(to top, #000 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .rs-cookie-scrim.is-visible { opacity: 1; }
}