/* Модалка с контактами: открывается по кнопке «Увеличить выручку с вашей базы клиентов» вместо прямого перехода
   в Телеграм (логика — contact-modal.js). Общая для статичных страниц (home-v4.html, кейсы) и Next (app/layout.tsx).
   Стиль главной: кремовый фон, скругления, лаймовый акцент; на мобиле — нижний лист во всю ширину. */
.ctm { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: inherit; }
.ctm[hidden] { display: none; }
.ctm__backdrop { position: absolute; inset: 0; background: #24242366; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ctm-fade .2s ease-out; }
.ctm__sheet { position: relative; width: min(520px, 100%); max-height: calc(100svh - 48px); overflow: auto; background: #f7f4ea; color: #242423; border-radius: 28px; padding: 30px 32px 28px; box-shadow: 0 30px 80px -30px #24242380; animation: ctm-up .28s cubic-bezier(.2, .8, .2, 1); }
.ctm__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #e8e5dc; color: #242423; cursor: pointer; display: grid; place-items: center; padding: 0; }
.ctm__close:hover { background: #dcd8cc; }
.ctm__close:focus-visible, .ctm__row:focus-visible, .ctm__copy:focus-visible { outline: 3px solid #7854ca; outline-offset: 3px; }
.ctm__host { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding-right: 56px; font-size: 14px; line-height: 1.3; color: #75756b; }
.ctm__host img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.ctm__title { margin: 0 0 10px; font-size: clamp(24px, 3vw, 30px); font-weight: 600; letter-spacing: -.045em; line-height: 1.15; color: #242423; }
.ctm__lead { margin: 0 0 22px; font-size: 16px; line-height: 1.5; color: #45453c; }
.ctm__list { display: grid; gap: 10px; }
.ctm__row { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 14px 18px; border-radius: 18px; background: #fffdf7; border: 1px solid #24242320; color: #242423; text-decoration: none; font-size: 17px; line-height: 1.25; text-align: left; }
.ctm__row:hover { border-color: #242423; }
.ctm__row--tg { background: #d4ef78; border-color: #242423; }
.ctm__row--tg:hover { background: #c8e76a; }
.ctm__icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #ffffffb0; border: 1px solid #24242330; color: #242423; }
.ctm__row--tg .ctm__icon { background: #fffdf7; }
.ctm__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ctm__text b { font-weight: 600; }
.ctm__text small { font-size: 14px; color: #75756b; overflow-wrap: anywhere; }
.ctm__arrow { margin-left: auto; font-style: normal; font-size: 18px; color: #242423; }
.ctm__mail { display: flex; gap: 10px; align-items: stretch; }
.ctm__mail .ctm__row { flex: 1; min-width: 0; }
.ctm__copy { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 18px; border: 1px solid #24242320; background: #fffdf7; color: #242423; font: inherit; font-size: 15px; cursor: pointer; }
.ctm__copy:hover { border-color: #242423; }
.ctm__copy.is-done { background: #d4ef78; border-color: #242423; }
html.ctm-open { overflow: hidden; }
@keyframes ctm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ctm-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .ctm { align-items: flex-end; padding: 0; }
  .ctm__sheet { width: 100%; max-height: 92svh; border-radius: 24px 24px 0 0; padding: 24px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px -30px #24242380; }
  .ctm__sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: #24242330; margin: -8px auto 18px; }
  .ctm__close { top: 14px; right: 14px; width: 40px; height: 40px; }
  .ctm__title { font-size: 24px; }
  .ctm__mail { flex-direction: column; }
  .ctm__copy { justify-content: center; padding: 14px 18px; }
  @keyframes ctm-up { from { transform: translateY(100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .ctm__backdrop, .ctm__sheet { animation: none; } }