* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif; overflow-x: hidden; background: #fff; color: #262633; }
#root { min-height: 100vh; }
input, button { font-family: inherit; }

.block6-root,
.block-steps-root {
  overflow-x: clip;
}

.sticky-cta-button {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.sticky-cta-button:active {
  transform: scale(0.97);
}
input::placeholder { color: var(--ph-color, rgba(38,38,51,0.1)); transition: color .25s ease; font-weight: 510; }
input::-webkit-input-placeholder { color: var(--ph-color, rgba(38,38,51,0.1)); }

/* ============================================================ */
/* INTRO ANIMATION — появление при загрузке страницы */
/* ============================================================ */
@keyframes intro-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes intro-fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes intro-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes intro-dog-rise {
  from { opacity: 0; transform: translateX(-50%) translateY(40px) scale(0.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.intro-nav    { animation: intro-fade-down .9s cubic-bezier(.16,1,.3,1) both; animation-delay: .05s; }
.intro-h1     { animation: intro-fade-up  1.1s cubic-bezier(.16,1,.3,1) both; animation-delay: .15s; }
.intro-sub    { animation: intro-fade-up  1.1s cubic-bezier(.16,1,.3,1) both; animation-delay: .35s; }
.intro-input  { animation: intro-fade-up  1.1s cubic-bezier(.16,1,.3,1) both; animation-delay: .55s; }
.intro-dog    { animation: intro-dog-rise 1.1s cubic-bezier(.16,1,.3,1) both; }
/* Волна собак слева направо: каждая с задержкой */
.intro-dog-0  { animation-delay: .70s; }
.intro-dog-1  { animation-delay: .78s; }
.intro-dog-2  { animation-delay: .86s; }
.intro-dog-3  { animation-delay: .94s; }
.intro-dog-4  { animation-delay: 1.02s; } /* mary по центру */
.intro-dog-5  { animation-delay: .94s; }
.intro-dog-6  { animation-delay: .86s; }
.intro-dog-7  { animation-delay: .78s; }
.intro-dog-8  { animation-delay: .70s; }

/* Адаптивность тарифных карточек */
.pricing-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: center;
  padding-bottom: 16px;
}
.pricing-cards {
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
  align-items: flex-start;
  flex-shrink: 0;
  width: 100%;
}

/* ============================================================ */
/* АДАПТИВНОСТЬ ПО БРЕЙКПОИНТАМ                                 */
/* ============================================================ */

/* ≥1441px — десктоп (никаких правил не нужно) */

/* 1280–1440px — ноутбук, почти десктоп */
@media (max-width: 1440px) {
  .pricing-wrap { min-height: 520px; }
}

/* 1024–1280px — маленький ноутбук */
@media (max-width: 1280px) {
  .pricing-wrap { min-height: 480px; }
}

/* 768–1024px — планшет альбомный */
@media (max-width: 1024px) {
  .pricing-wrap { min-height: 400px; }

  .block6-title {
    padding-top: clamp(86px, 12svh, 118px) !important;
  }
  .block6-viewport {
    padding-top: clamp(34px, 5.6svh, 56px) !important;
    padding-bottom: clamp(64px, 9svh, 96px) !important;
  }
  .block6-track {
    gap: 22px !important;
  }
  .block6-card {
    width: clamp(390px, 46vw, 460px) !important;
    height: min(clamp(330px, 39vw, 370px), calc(100svh - 285px)) !important;
    min-height: 320px !important;
    border-radius: 34px !important;
  }
  .block6-card-copy {
    padding: clamp(26px, 3vw, 34px) clamp(28px, 3.6vw, 38px) 0 !important;
  }
  .block6-card-title {
    font-size: clamp(24px, 3.6vw, 30px) !important;
  }
  .block6-card-desc {
    font-size: clamp(16px, 2.4vw, 20px) !important;
    line-height: 1.2 !important;
  }
  .block6-card-image {
    width: 82% !important;
    flex: 1 1 auto !important;
    min-height: clamp(128px, 20vw, 166px) !important;
    margin-top: clamp(18px, 3vw, 28px) !important;
    border-radius: 24px 24px 0 0 !important;
  }
}

@media (min-width: 769px) and (max-height: 620px) {
  .block6-title {
    padding-top: clamp(86px, 18svh, 112px) !important;
  }
  .block6-viewport {
    padding-top: clamp(34px, 7svh, 48px) !important;
    padding-bottom: clamp(28px, 6svh, 46px) !important;
  }
  .block6-card {
    height: min(clamp(298px, 60svh, 370px), calc(100svh - 132px)) !important;
    min-height: 280px !important;
  }
  .block6-card-copy {
    padding-top: clamp(24px, 5svh, 30px) !important;
  }
  .block6-card-image {
    min-height: clamp(110px, 22svh, 140px) !important;
    margin-top: clamp(14px, 3.6svh, 22px) !important;
  }

  .block-steps-sticky {
    overflow: hidden !important;
  }
  .block-steps-sticky > div:first-child {
    margin-bottom: clamp(18px, 4.8svh, 30px) !important;
  }
  .block-steps-sticky h2 {
    font-size: clamp(34px, 8.5svh, 46px) !important;
    letter-spacing: 0 !important;
    line-height: 1.06 !important;
  }
  .block-steps-track {
    gap: clamp(32px, 4.6vw, 56px) !important;
  }
  .block-steps-item {
    flex-basis: clamp(310px, 25vw, 370px) !important;
    gap: clamp(16px, 4svh, 24px) !important;
  }
  .block-steps-item > div:first-child {
    width: clamp(46px, 9svh, 54px) !important;
    height: clamp(46px, 9svh, 54px) !important;
    border-radius: 17px !important;
  }
  .block-steps-item > div:first-child span {
    font-size: clamp(24px, 5.6svh, 28px) !important;
  }
  .block-steps-title {
    font-size: clamp(24px, 6svh, 32px) !important;
  }
  .block-steps-title + div {
    font-size: clamp(14px, 3.4svh, 18px) !important;
    line-height: 1.18 !important;
    max-width: 280px !important;
  }
  .block-steps-dog {
    margin-top: clamp(38px, 8svh, 58px) !important;
    height: clamp(74px, 17svh, 92px) !important;
  }
  .block-steps-dog video {
    height: clamp(58px, 13svh, 76px) !important;
  }
}

@media (max-width: 1100px) {
  .pricing-cards {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .pricing-card {
    width: 100% !important;
    max-width: 383px;
    margin-top: 0 !important;
  }
}

/* 768px — планшет портрет */
@media (max-width: 900px) {
  /* Hero input — полная ширина */
  /* Подписи над собаками скрываем, кроме mary */
}

/* <768px — мобилка (всё в один брейкпоинт, как в макете iPhone 390px) */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }

  /* Hero */
  .hero-section {
    padding-top: 60px !important;
    padding-bottom: 56px !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative;
    z-index: 2;
  }
  .intro-h1 br {
    display: none;
  }
  .intro-sub {
    white-space: normal !important;
  }

  /* Block2 (интеграции) — обычный блок, не sticky */
  .block2-root {
    height: auto !important;
  }
  .block2-sticky {
    position: static !important;
    height: auto !important;
    padding: 58px 24px 54px !important;
    overflow: visible !important;
  }
  .block2-sticky > div {
    max-width: 330px !important;
    width: 100% !important;
  }
  .block2-text {
    font-size: 0 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
  }
  .block2-text span {
    display: none !important;
  }
  .block2-text::before {
    content: "Подключится к вашим инструментам";
    display: block;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.08;
    color: #262633;
  }
  .block2-icons {
    display: grid !important;
    grid-template-columns: repeat(3, 76px);
    justify-content: center;
    gap: 14px 24px !important;
    margin-top: 40px !important;
  }
  .block2-row {
    display: contents !important;
  }
  .block2-tile {
    width: 76px !important;
    height: 76px !important;
    border-radius: 18px !important;
    background: rgba(38,38,51,0.04) !important;
  }
  .block2-tile img {
    width: 42px !important;
    height: 42px !important;
  }
  .block2-row:nth-child(2) .block2-tile:nth-child(5) {
    grid-column: 2;
  }

  /* Block3 — оставляем sticky-анимацию как на десктопе, подгоняем размеры под мобилу */
  .block3-sticky {
    padding: 60px 16px 40px !important;
  }
  .block3-title-area {
    margin-bottom: 16px !important;
    min-height: 64px !important;
  }
  .block3-title-area h2 {
    font-size: 28px !important;
  }
  .block3-cards {
    max-width: 100% !important;
  }

  /* Block4: сохраняем sticky-эффект, только ужимаем размеры */
  .block4-root {
    height: 300vh !important;
  }
  .block4-root > div {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    padding: 48px 20px 40px !important;
  }
  .block4-root h2 {
    font-size: 28px !important;
    margin-bottom: 24px !important;
  }

  /* Собаки: стая полукругом в 4 уровня, Mary впереди */
  .intro-dogs-row {
    height: 210px !important;
    margin-top: 36px !important;
    overflow: visible !important;
  }
  .intro-dog > div:first-child {
    display: none !important;
  }
  .intro-dog-4 > div:first-child {
    display: flex !important;
    bottom: 40px !important;
  }
  .intro-dog img {
    height: 80px !important;
    width: auto !important;
  }
  .intro-dog-4 img {
    height: 130px !important;
    width: auto !important;
  }
  .intro-dog { bottom: auto !important; top: 0 !important; z-index: 1 !important; }
  /* Ряд 1 — задний */
  .intro-dog-2 { left: 50% !important; margin-left: -80px !important; top: 0 !important; z-index: 1 !important; }
  .intro-dog-1 { left: 50% !important; margin-left: -20px !important; top: 4px !important; z-index: 1 !important; }
  .intro-dog-7 { left: 50% !important; margin-left: 50px !important; top: 0 !important; z-index: 1 !important; }
  .intro-dog-8 { left: 50% !important; margin-left: 110px !important; top: 6px !important; z-index: 1 !important; }
  /* Ряд 2 — передний */
  .intro-dog-0 { left: 50% !important; margin-left: -95px !important; top: 30px !important; z-index: 2 !important; }
  .intro-dog-3 { left: 50% !important; margin-left: -35px !important; top: 36px !important; z-index: 2 !important; }
  .intro-dog-5 { left: 50% !important; margin-left: 30px !important; top: 32px !important; z-index: 2 !important; }
  .intro-dog-6 { left: 50% !important; margin-left: 90px !important; top: 38px !important; z-index: 2 !important; }
  /* Mary — впереди всех, внизу по центру */
  .intro-dog-4 {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    bottom: -45px !important;
    z-index: 5 !important;
  }

  /* Навбар: кнопка Войти поменьше */
  nav button {
    width: auto !important;
    padding: 0 18px !important;
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }

  /* Pricing: вертикально */
  .pricing-cards {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .pricing-card {
    width: 100% !important;
    max-width: 383px;
    margin-top: 0 !important;
    border-radius: 28px !important;
  }
  .pricing-wrap {
    min-height: auto !important;
    padding: 0 16px 16px;
    justify-content: flex-start;
  }

  .mobile-hide { display: none !important; }
  .mobile-full { width: 100% !important; }

}

/* Телефон: вместо горизонтального scroll-driven Block6 показываем вертикальный список */
@media (max-width: 600px) {
  .block6-root {
    height: auto !important;
  }
  .block6-sticky {
    position: static !important;
    height: auto !important;
    padding: clamp(54px, 11svh, 68px) 20px clamp(52px, 10svh, 64px) !important;
    overflow: visible !important;
    display: block !important;
  }
  .block6-title {
    padding: 0 0 clamp(24px, 5.5svh, 32px) !important;
  }
  .block6-title h2 {
    max-width: 340px !important;
    margin: 0 auto !important;
    font-size: clamp(23px, 6.2vw, 26px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    text-wrap: balance;
    opacity: 1 !important;
    transform: none !important;
  }
  .block6-viewport {
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .block6-viewport::-webkit-scrollbar { display: none; }
  .block6-track {
    flex-direction: column !important;
    padding: 0 !important;
    gap: 16px !important;
    transform: none !important;
    will-change: auto !important;
  }
  .block6-card {
    width: calc(100vw - 40px) !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: clamp(156px, 43vw, 178px) !important;
    border-radius: 12px !important;
    flex-shrink: 1 !important;
  }
  .block6-card-reveal {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    transform-origin: center top;
    transition:
      opacity 480ms cubic-bezier(.23,1,.32,1) var(--block6-reveal-delay, 0ms),
      transform 480ms cubic-bezier(.23,1,.32,1) var(--block6-reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .block6-card-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    will-change: auto;
  }
  .block6-card-copy {
    width: 100% !important;
    padding: clamp(17px, 4.8vw, 22px) clamp(17px, 4.8vw, 22px) 0 !important;
    min-width: 0 !important;
  }
  .block6-card-title {
    font-size: clamp(18px, 5vw, 22px) !important;
    white-space: normal !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
  .block6-card-desc {
    font-size: clamp(12px, 3.4vw, 14px) !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
  .block6-card-image {
    width: calc(100% - clamp(34px, 9vw, 44px)) !important;
    min-height: clamp(100px, 27vw, 124px) !important;
    height: clamp(100px, 27vw, 124px) !important;
    flex: 1 1 auto !important;
    margin: 16px auto 0 !important;
    border-radius: 10px 10px 0 0 !important;
  }
}

@media (max-width: 360px) {
  .block6-sticky {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .block6-track {
    gap: 14px !important;
  }
  .block6-card {
    width: calc(100vw - 32px) !important;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .block6-card-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 180ms ease;
    will-change: auto;
  }
}

/* Анимация hover для кнопок тарифов */
.pricing-btn {
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.pricing-btn:hover {
  transform: translateY(-2px);
}
.pricing-btn:active {
  transform: translateY(0);
}

/* Подчёркивание ссылок футера при наведении */
.footer-link {
  text-decoration: none;
  transition: opacity .2s ease;
}
.footer-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================================================ */
/* АДАПТИВ — точечные фиксы по блокам                           */
/* ============================================================ */

/* Block4 "Это не очередная нейронка" — таблетка 3 колонки ломается на узких */
@media (max-width: 900px) {
  .block4-item {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 120px;
    padding: 18px 22px !important;
    gap: 14px !important;
  }
  .block4-item > div:nth-child(1) {
    font-size: 20px !important;
    grid-column: 1;
    grid-row: 1;
  }
  .block4-item > div:nth-child(2) {
    width: 90px !important;
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0 !important;
  }
  .block4-item > div:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    font-size: 14px !important;
  }
}
@media (max-width: 560px) {
  .block4-item > div:nth-child(2) {
    width: 70px !important;
    margin-top: 0 !important;
  }
  .block4-item > div:nth-child(1) {
    font-size: 17px !important;
  }
  .block4-item > div:nth-child(3) {
    font-size: 13px !important;
  }
}

/* Contact modal */
:root {
  --cm-ink: #262633;
  --cm-bg: #ffffff;
  --cm-field-bg: rgba(38, 38, 51, 0.03);
  --cm-error: #e5484d;
  --cm-radius-lg: 28px;
  --cm-radius-md: 16px;
  --cm-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
}

.cm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 20, 28, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-family: var(--cm-font);
}

.cm-backdrop[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.cm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: min(720px, calc(100vh - 40px));
  overflow: hidden;
  padding: 42px 40px 32px;
  background: var(--cm-bg);
  border-radius: var(--cm-radius-lg);
  box-shadow: 0 30px 80px rgba(20, 20, 28, 0.25);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.cm-backdrop[data-open="true"] .cm-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.cm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(38, 38, 51, 0.05);
  color: var(--cm-ink);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.cm-title {
  margin: 0 0 8px;
  color: var(--cm-ink);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
}

.cm-sub {
  margin: 0 36px 24px 0;
  color: rgba(38, 38, 51, 0.5);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.cm-form-body {
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  margin-right: -8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(38, 38, 51, 0.25) transparent;
}

.cm-form-body::-webkit-scrollbar {
  width: 8px;
}

.cm-form-body::-webkit-scrollbar-track {
  background: transparent;
}

.cm-form-body::-webkit-scrollbar-thumb {
  background: rgba(38, 38, 51, 0.18);
  border-radius: 999px;
}

.cm-field {
  margin-bottom: 14px;
}

.cm-field-last {
  margin-bottom: 0;
}

.cm-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(38, 38, 51, 0.5);
  font-size: 13px;
  font-weight: 500;
}

.cm-input-wrap {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 18px;
  background: var(--cm-field-bg);
  border-radius: var(--cm-radius-md);
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.cm-input-wrap-error {
  box-shadow: inset 0 0 0 1.5px var(--cm-error);
}

.cm-input {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  color: var(--cm-ink);
  font-family: var(--cm-font);
  font-size: 16px;
  font-weight: 500;
}

.cm-input::placeholder {
  color: rgba(38, 38, 51, 0.35);
}

.cm-error {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  color: var(--cm-error);
  font-size: 12px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s, max-height 0.2s, margin-top 0.2s;
}

.cm-error-visible {
  max-height: 40px;
  margin-top: 6px;
  opacity: 1;
}

.cm-btn {
  border: none;
  cursor: pointer;
  font-family: var(--cm-font);
}

.cm-btn-primary {
  background: var(--cm-ink);
  color: #fff;
  border-radius: var(--cm-radius-md);
  font-weight: 500;
}

.cm-btn-primary:disabled {
  background: rgba(38, 38, 51, 0.6);
  cursor: wait;
}

.cm-btn-submit {
  width: 100%;
  height: 56px;
  font-size: 16px;
}

.cm-actions {
  flex-shrink: 0;
  padding-top: 24px;
  background: var(--cm-bg);
}

.cm-submit-error {
  margin: 12px 0 0;
  color: var(--cm-error);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.cm-consent {
  margin: 16px 0 0;
  color: rgba(38, 38, 51, 0.4);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.cm-thanks {
  padding: 20px 0 8px;
  text-align: center;
}

.cm-thanks-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: rgba(38, 38, 51, 0.05);
  color: var(--cm-ink);
  font-size: 32px;
}

.cm-sub-thanks {
  max-width: 360px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 28px;
}

.cm-btn-thanks {
  height: 52px;
  padding: 0 32px;
  font-size: 15px;
}

@media (max-width: 480px) {
  .cm-card {
    max-height: calc(100vh - 24px);
    padding: 34px 22px 24px;
    border-radius: 24px;
  }

  .cm-title {
    font-size: 24px;
  }

  .cm-input-wrap,
  .cm-btn-submit {
    height: 52px;
  }

  .cm-sub {
    margin-right: 28px;
    margin-bottom: 20px;
  }

  .cm-actions {
    padding-top: 20px;
  }
}
@media (max-width: 768px) {
  .block4-item {
    border-radius: 20px;
  }
}

/* Block5 (ChatGPT comparison) — table grid squished on mobile */
@media (max-width: 768px) {
  .block5-table > div {
    grid-template-columns: 90px 1fr 1fr !important;
  }
  .block5-table > div > div {
    font-size: 13px !important;
  }
}
@media (max-width: 480px) {
  .block5-table {
    padding: 20px 16px !important;
  }
  .block5-table > div {
    grid-template-columns: 1fr 1fr !important;
    padding: 12px 0 !important;
    position: relative;
  }
  /* Label row — отдельный ряд сверху */
  .block5-table > div > div:first-child {
    grid-column: 1 / -1;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px !important;
  }
  /* Скрываем иконку Mary в шапке — оставляем только текст */
  .block5-table > div:first-child > div:first-child {
    display: none !important;
  }
}

/* BlockTelegram — 240px фикс-высота + absolute позиции ломаются на мобиле */
@media (max-width: 768px) {
  .block-tg {
    padding: 60px 20px !important;
  }
  .block-tg-card {
    height: auto !important;
    min-height: 280px;
    padding: 28px 24px 24px !important;
    border-radius: 28px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
    gap: 20px !important;
  }
  .block-tg-content {
    align-items: center !important;
    gap: 20px !important;
    width: 100%;
  }
  .block-tg-text {
    position: static !important;
    text-align: center;
  }
  .block-tg-text p {
    margin-bottom: 0 !important;
    font-size: 20px !important;
  }
  .block-tg-btn {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
  }
  .block-tg-icon {
    position: static !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: rotate(-7deg) !important;
    margin: 0 auto -8px !important;
  }
  .block-tg-icon-img {
    width: 130px !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* BlockSteps — scroll-driven на mobile, но шаги остаются колонкой */
@media (max-width: 560px) {
  .block-steps-root {
    height: 290vh !important;
  }
  .block-steps-sticky {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    padding: clamp(34px, 6svh, 48px) 16px clamp(10px, 2svh, 18px) !important;
    overflow: hidden !important;
  }
  .block-steps-sticky > div:first-child {
    margin-bottom: 0 !important;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
  }
  .block-steps-sticky h2 {
    font-size: 19px !important;
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
  }
  .block-steps-track {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(72px, 11svh, 110px) !important;
    max-width: 320px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-top: clamp(42px, 8svh, 68px) !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 1;
  }
  .block-steps-item {
    flex: 0 0 auto !important;
    gap: 10px !important;
    min-width: 0 !important;
    will-change: transform, opacity;
  }
  .block-steps-item > div:first-child {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
  }
  .block-steps-item > div:first-child span {
    font-size: 20px !important;
  }
  .block-steps-item > div:nth-child(2) {
    gap: 8px !important;
  }
  .block-steps-title {
    white-space: normal !important;
    font-size: 14px !important;
  }
  .block-steps-title + div {
    font-size: 10px !important;
    line-height: 1.12 !important;
    max-width: 205px !important;
  }
  .block-steps-dog {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 320px !important;
    height: clamp(88px, 12svh, 104px) !important;
    flex: 0 0 clamp(88px, 12svh, 104px) !important;
    margin: 0 auto !important;
    pointer-events: none;
    z-index: 2;
    overflow: visible !important;
  }
  .block-steps-dog-wrap {
    padding: 4px 0 16px !important;
  }
  .block-steps-dog video {
    height: 64px !important;
  }
}

@media (min-width: 561px) and (max-width: 980px) {
  .block-steps-sticky {
    padding-left: clamp(18px, 4vw, 42px) !important;
    padding-right: clamp(18px, 4vw, 42px) !important;
  }
  .block-steps-sticky h2 {
    font-size: clamp(26px, 4.2vw, 36px) !important;
    letter-spacing: 0 !important;
  }
  .block-steps-track {
    gap: clamp(10px, 2.4vw, 18px) !important;
  }
  .block-steps-item {
    gap: clamp(22px, 4vh, 30px) !important;
  }
  .block-steps-item > div:first-child {
    width: clamp(46px, 8vw, 56px) !important;
    height: clamp(46px, 8vw, 56px) !important;
    border-radius: 18px !important;
  }
  .block-steps-item > div:first-child span {
    font-size: clamp(24px, 4vw, 30px) !important;
  }
  .block-steps-title {
    white-space: normal !important;
    font-size: clamp(22px, 3.4vw, 28px) !important;
  }
  .block-steps-title + div {
    font-size: clamp(14px, 2.2vw, 18px) !important;
    line-height: 1.18 !important;
    max-width: 230px !important;
  }
  .block-steps-dog {
    height: clamp(86px, 15vh, 112px) !important;
    margin-top: clamp(8px, 2vh, 18px) !important;
  }
  .block-steps-dog video {
    height: clamp(62px, 11vh, 82px) !important;
  }
}

@media (max-width: 420px) and (max-height: 560px) {
  .block-steps-root {
    height: 340vh !important;
  }
  .block-steps-sticky {
    padding: 78px 12px 8px !important;
  }
  .block-steps-sticky h2 {
    font-size: 17px !important;
  }
  .block-steps-track {
    max-width: 280px !important;
    gap: clamp(36px, 8svh, 46px) !important;
    padding-top: clamp(16px, 4svh, 24px) !important;
  }
  .block-steps-item {
    gap: 6px !important;
  }
  .block-steps-item > div:first-child {
    width: 30px !important;
    height: 30px !important;
    border-radius: 12px !important;
  }
  .block-steps-item > div:first-child span {
    font-size: 18px !important;
  }
  .block-steps-item > div:nth-child(2) {
    gap: 4px !important;
  }
  .block-steps-title {
    font-size: 13px !important;
  }
  .block-steps-title + div {
    font-size: 9px !important;
    line-height: 1.08 !important;
    max-width: 188px !important;
  }
  .block-steps-dog {
    max-width: 280px !important;
    height: 58px !important;
    flex-basis: 58px !important;
  }
  .block-steps-dog-wrap {
    padding: 2px 0 8px !important;
  }
  .block-steps-dog video {
    height: 48px !important;
  }
}

/* Footer — 4 колонки + лого справа/слева не помещаются ниже 768px */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 40px !important;
  }
  .footer-cols {
    width: 100%;
    gap: 28px 24px !important;
  }
  .footer-cols > div {
    min-width: 0 !important;
    flex: 1 1 140px !important;
  }
}
@media (max-width: 420px) {
  .footer-cols > div {
    flex: 1 1 100% !important;
  }
  .footer-main {
    font-size: 14px;
  }
}


/* Pricing — на очень узких экранах (<400px) карточки вылезают */
@media (max-width: 400px) {
  .pricing-wrap {
    padding: 0 0 16px !important;
  }
  .pricing-card {
    border-radius: 28px !important;
  }
}