/* Макет «Быстрый ответ»: один экран, без прокрутки.

   Для рекламы и ссылок в чатах. Человек кликнул мимоходом, у нас три
   секунды — значит вопрос, ответ и кнопка, и ничего больше. Ни меню,
   ни подвала со ссылками, ни второго призыва: каждый лишний элемент
   здесь уводит от единственного действия.

   Палитру задают темы, как во всех макетах. */

:root{
  --bg:#0a0f1e;
  --card:rgba(255,255,255,.05);
  --line:rgba(130,160,255,.16);
  --text:#eef2fb;
  --muted:#9aa6c4;
  --accent:#3b82f6;
  --accent2:#8ab4ff;
  --accent-hover:#2f6fe0;
  --green:#34d399;
  --radius:18px;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ background:var(--bg); }
body{
  background:transparent;
  color:var(--text);
  line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
a{ color:inherit; text-decoration:none; }

/* Экран целиком: содержимое по центру и по вертикали тоже. Используем
   динамическую высоту — на телефонах адресная строка съедает часть окна,
   и с обычными 100vh кнопка уезжала под сгиб. */
.screen{ min-height:100vh; min-height:100dvh; display:grid; place-items:center;
         padding:28px 0; }
.one-screen .wrap{ width:100%; max-width:620px; margin:0 auto; padding:0 22px;
                   text-align:center; }

/* Знак — отдельной строкой над надписью: рядом они читаются как одно
   слово и путают, где название сервиса, а где подзаголовок */
.brand{ display:flex; align-items:center; justify-content:center; gap:9px;
        font-weight:850; font-size:16px; color:var(--muted); margin-bottom:22px; }
.brand-mark{ width:26px; height:26px; }

.eyebrow{ display:inline-block; font-size:12.5px; font-weight:700; color:var(--accent2);
          background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.28);
          border-radius:999px; padding:5px 13px; margin-bottom:16px; }

/* Вопрос — крупно, но не во весь экран: он должен читаться одним взглядом
   и не переноситься на пять строк на телефоне */
h1{ font-size:clamp(26px,5.4vw,40px); line-height:1.18; font-weight:850;
    letter-spacing:-.02em; }
/* Ответ — одна фраза. Если её хочется удлинить, значит это уже не тот макет */
.answer{ margin-top:16px; color:var(--muted); font-size:clamp(15px,2.2vw,18px);
         max-width:520px; margin-inline:auto; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
      border:0; border-radius:14px; padding:15px 32px; font-size:16px; font-weight:700;
      cursor:pointer; font-family:inherit; transition:background .15s, transform .1s;
      margin-top:28px; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-hover); }
.cta-note{ margin-top:12px; color:var(--muted); font-size:13px; }

/* Три коротких факта в строку: доверие без отдельного блока */
.facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
        margin-top:30px; }
.fact{ background:var(--card); border:1px solid var(--line); border-radius:999px;
       padding:7px 14px; font-size:13px; color:var(--muted); }

.tiny{ margin-top:30px; color:var(--muted); font-size:11.5px; opacity:.75; }

/* Совсем маленькие экраны: сжимаем отступы, но экран остаётся один */
@media (max-height:640px){
  .screen{ padding:18px 0; }
  .brand{ margin-bottom:16px; }
  .facts{ margin-top:20px; }
  .tiny{ margin-top:18px; }
  .btn{ margin-top:20px; }
}

/* Экономный режим — как в остальных макетах. Признак ставит landing.js. */
html[data-lite] *,
html[data-lite] *::before,
html[data-lite] *::after{
  animation:none !important;
  transition:none !important;
}
html[data-lite] *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-lite]{ --rk-cursor:0; }

/* ─── перелинковка ────────────────────────────────────────────────────── */
/* Страница одноэкранная, поэтому ссылки идут строкой и мельче обычного:
   они не должны спорить с единственной кнопкой. */
.links{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
        margin:22px 0 4px; }
.links a{ font-size:12.5px; color:var(--muted); border:1px solid var(--line);
          border-radius:999px; padding:6px 12px; transition:color .15s; }
.links a:hover{ color:var(--text, #eef2ff); }