/* Телефонная версия сайта (m.html). Не подстройка компьютерной: своя раскладка «один экран — одна мысль».
   Стиль тот же, что у index.html: белый фон, один синий акцент, шрифт Manrope (assets/fonts.css).
   Скругления: большие блоки 24, вложенное 14–18, кнопки и плашки — полностью круглые.
   Слои: нижняя панель — 20, окно связи — поверх всего (top layer). */

:root {
  color-scheme: light;
  --page: #ffffff;
  --soft: #f5f8fd;
  --ink: #0e1730;
  --ink-2: #3c465e;
  --muted: #5d6a84;
  --line: #e3e9f3;
  --blue: #1f6feb;
  --blue-50: #eef4ff;
  --navy: #0b1530;
  --shadow-sm: 0 1px 2px rgb(15 30 66 / 5%), 0 10px 26px -14px rgb(15 30 66 / 18%);
  --shadow-md: 0 18px 40px -18px rgb(15 30 66 / 32%);
  --g: 20px; /* поля по краям */
  --bar: 72px; /* высота нижней панели без «чёлки» снизу */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0 auto; max-width: 480px; overflow-x: clip; /* отступ под нижнюю панель не нужен: внизу страницы она прячется */
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--page);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid rgb(31 111 235 / 45%); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.accent { color: var(--blue); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.btn .icon { font-size: 19px; }
.btn-dark { background: var(--navy); color: #fff; box-shadow: 0 14px 28px -14px rgb(11 21 48 / 70%); }
.btn:active { transform: scale(0.98); }

.brand { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
.brand-mark { width: 22px; height: 22px; color: var(--ink); }

/* =========================================================
   1. Первый экран: заголовок, живые приложения, категории — ровно в экран
   ========================================================= */
.hero {
  display: flex; flex-direction: column; text-align: center;
  min-height: calc(100vh - var(--bar) - env(safe-area-inset-bottom));
  min-height: calc(100svh - var(--bar) - env(safe-area-inset-bottom));
  padding: 10px 0 14px;
  background:
    radial-gradient(70% 38% at 50% 62%, rgb(31 111 235 / 13%), transparent 72%),
    radial-gradient(40% 30% at 0% 60%, rgb(31 111 235 / 7%), transparent 70%),
    radial-gradient(40% 30% at 100% 60%, rgb(31 111 235 / 7%), transparent 70%);
}
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-bottom: 8px; padding: 0 var(--g); }
.call-top {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 19px; box-shadow: 0 10px 20px -10px rgb(31 111 235 / 80%);
}
.hero h1 {
  margin: 8px var(--g) 0; font-size: clamp(27px, 7.8vw, 33px); font-weight: 800; line-height: 1.07; letter-spacing: -0.04em;
}
.hero-sub { margin: 8px auto 0; max-width: 23em; padding: 0 var(--g); font-size: 14.5px; line-height: 1.42; color: var(--muted); }
.hero-sub b { display: block; color: var(--ink); font-weight: 700; }
/* Телефон растёт по высоте до своего предела, остаток делится поровну над заголовком и под категориями */
.hero h1 { margin-top: auto; }
.hero .cats { margin-bottom: auto; }
.try-hint {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 var(--g);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.try-hint .icon { font-size: 18px; color: var(--blue); transform-origin: 50% 85%; }
@media (prefers-reduced-motion: no-preference) {
  .try-hint .icon { animation: tap 1.8s ease-in-out 1.2s 3; }
}
@keyframes tap {
  0%, 55%, 100% { transform: none; }
  25% { transform: translateY(2px) scale(0.84); }
}

/* Карусель (логика — assets/site.js). Телефон собран в логических пикселях и масштабируется целиком;
   в телефонной версии его размер подбирается по свободной высоте (data-fit на .stage). */
.stage {
  position: relative; flex: 1 0 290px; margin: 10px 0 6px;
  max-height: calc(min(43vw, 230px) * 2.016 + 12px); /* не выше самого крупного телефона (43% ширины, как в site.js) */
  touch-action: pan-y; -webkit-user-select: none; user-select: none; outline: none; overflow-x: clip;
}
.stage:focus-visible::after { content: ""; position: absolute; inset: 4px; border-radius: 28px; pointer-events: none; outline: 3px solid rgb(31 111 235 / 45%); }
.ring { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.phone {
  position: absolute; left: 50%; top: 50%; width: 397px; height: 800px; margin: -400px 0 0 -198.5px;
  transform-style: preserve-3d; visibility: hidden; pointer-events: auto; text-align: left;
}
.phone-face {
  position: absolute; inset: 0; padding: 11px; border-radius: 62px;
  background: linear-gradient(150deg, #1d2333, #07090e 58%);
  box-shadow: 0 0 0 2px #d3d8e0, 0 0 0 3.5px #a4acb8, 0 52px 90px -40px rgb(16 32 72 / 55%), 0 26px 50px -32px rgb(16 32 72 / 45%);
}
.screen { position: relative; height: 100%; border-radius: 51px; overflow: hidden; background: var(--top, #fff); isolation: isolate; }
.statusbar {
  position: relative; height: 38px; display: flex; align-items: center; justify-content: space-between;
  padding: 3px 28px 0 36px; color: var(--top-ink, #0d1424); font-size: 15px; font-weight: 700;
}
.island { position: absolute; top: 7px; left: 50%; width: 106px; height: 29px; margin-left: -53px; border-radius: 20px; background: #000; }
.sb-icons { display: flex; align-items: center; gap: 5px; font-size: 16px; }
.viewport { position: relative; height: 740px; overflow: hidden; background: var(--top, #fff); }
.viewport iframe {
  position: absolute; top: 0; left: 0; width: calc(375px + var(--sbw, 0px)); height: 740px;
  border: 0; display: block; background: transparent; opacity: 0; transition: opacity 0.35s ease;
}
.phone[data-state="ready"] .viewport iframe { opacity: 1; }
/* Картинка стартового экрана: видна, пока приложение не загрузилось; приложение проявляется поверх неё. */
.preview { position: absolute; top: 0; left: 0; width: 375px; height: 740px; display: block; }
.phone[data-state="loading"] .preview { cursor: progress; }
.phone[data-state="ready"] .preview { visibility: hidden; transition: visibility 0s 0.35s; }
.fail {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 28px; text-align: center; font-size: 17px; font-weight: 600; color: var(--top-ink, #0d1424);
}
.phone[data-state="error"] .fail { display: flex; }
.phone[data-state="error"] .preview { display: none; }
.btn-retry { min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer; background: var(--blue); color: #fff; font-size: 16px; font-weight: 700; }
.veil { position: absolute; inset: -4px; margin: 0; padding: 0; border: 0; border-radius: 66px; background: #f4f7fc; opacity: 0; cursor: pointer; }
.phone.is-active .veil { pointer-events: none; cursor: default; }
.edge {
  position: absolute; top: 72px; bottom: 72px; width: 13px; border-radius: 7px;
  background: linear-gradient(90deg, #8f97a3, #edf0f4 46%, #bcc3cd); backface-visibility: hidden;
}
.edge-l { left: 0; transform-origin: 0 50%; transform: translateZ(-13px) rotateY(-90deg); }
.edge-r { right: 0; transform-origin: 100% 50%; transform: translateZ(-13px) rotateY(90deg); }

/* Категории — плашки со значком, листаются вбок */
.cats {
  position: relative; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  margin-top: 10px; padding: 2px var(--g) 4px; scroll-padding-inline: var(--g); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; scroll-snap-align: center;
  font-size: 14px; font-weight: 600; color: var(--ink-2); box-shadow: 0 1px 2px rgb(15 30 66 / 4%);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.cat-ico { display: grid; place-items: center; font-size: 19px; color: var(--blue); transition: color 0.25s ease; }
.cat[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 8px 18px -10px rgb(31 111 235 / 90%); }
.cat[aria-selected="true"] .cat-ico { color: #fff; }

/* =========================================================
   Общее для разделов
   ========================================================= */
.sec { padding-top: 60px; }
.sec-head { padding: 0 var(--g); margin-bottom: 20px; }
.sec-head h2 { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; }
.sec-head p { margin-top: 8px; font-size: 15.5px; line-height: 1.45; color: var(--muted); }

/* =========================================================
   2. Что умеет приложение: карточки-сторис
   ========================================================= */
.story-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; padding: 0 var(--g); margin-bottom: 4px; }
.story-bars button { position: relative; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.story-bars button::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 4px; background: #dbe4f3; transition: background-color 0.3s ease; }
.story-bars button.is-on::before { background: var(--blue); }

.stories {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 22px); gap: 12px; align-items: start;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 8px var(--g) 16px; scroll-padding-inline: var(--g);
}
.stories::-webkit-scrollbar { display: none; }
.story {
  scroll-snap-align: start; overflow: hidden; border-radius: 24px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.story-vis {
  height: 368px; display: grid; place-items: center; padding: 14px 16px; overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 100%, rgb(31 111 235 / 14%), transparent 70%),
    linear-gradient(180deg, #f2f6ff, #e8f0ff);
}
.story-vis.is-lock { background: radial-gradient(90% 70% at 50% 100%, rgb(140 110 200 / 22%), transparent 70%), linear-gradient(180deg, #f3f2ff, #e9e9fb); }
.story-vis .mock { width: 100%; max-width: 300px; }
/* Картинка-карточка владельца: квадрат целиком (ничего не обрезается), сверху и снизу его продолжает фон того же цвета */
.story-vis.is-img { display: block; padding: 0; background: linear-gradient(180deg, #f3f8fe, #ebf3fd); }
.story-vis.is-img img { width: 100%; height: 100%; object-fit: contain; }
.story-body { padding: 16px 18px 14px; }
.story-kicker { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--blue); }
.story-kicker .icon { font-size: 17px; }
.story h3 { margin-top: 6px; font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
.more summary {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 0; list-style: none; cursor: pointer;
  font-size: 14.5px; font-weight: 700; color: var(--ink-2);
}
.more summary::-webkit-details-marker { display: none; }
.more summary .icon { font-size: 13px; color: var(--blue); transform: rotate(90deg); transition: transform 0.25s ease; }
.more[open] summary .icon { transform: rotate(-90deg); }
.checks { display: grid; gap: 8px; padding: 4px 0 6px; }
.checks li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.checks .icon { margin-top: 2px; font-size: 18px; color: var(--blue); }

/* Карточки интерфейсов (как на компьютерной версии) */
.mock {
  border-radius: 20px; padding: 15px; font-size: 12px; line-height: 1.3; color: var(--ink); text-align: left;
  background: rgb(255 255 255 / 94%); border: 1px solid #fff;
  box-shadow: 0 30px 50px -28px rgb(16 32 72 / 45%), 0 0 0 1px rgb(31 111 235 / 6%);
}
.mock small { display: block; font-size: 10.5px; color: var(--muted); }
.mock img { display: block; width: 100%; height: auto; object-fit: cover; }
.m-title { margin-bottom: 9px; font-size: 13px; font-weight: 700; }
.m-days, .m-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.m-times { grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
.m-days span, .m-times span { display: grid; place-items: center; padding: 6px 0; border-radius: 11px; background: #f1f5fc; font-weight: 600; text-align: center; }
.m-days span.on, .m-times span.on { background: var(--blue); color: #fff; box-shadow: 0 8px 16px -8px rgb(31 111 235 / 80%); }
.m-days span.on small { color: rgb(255 255 255 / 82%); }
.m-masters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.m-masters img { aspect-ratio: 1; border-radius: 14px; margin-bottom: 5px; }
.m-masters .on img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }
.m-masters .on b { color: var(--blue); }
.m-masters b { font-size: 12px; }
.m-search { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; background: #f1f5fc; color: var(--muted); font-size: 11px; }
.m-search .icon { font-size: 14px; }
.m-tabs { display: flex; gap: 12px; margin: 11px 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.m-tabs .on { color: var(--blue); font-weight: 700; box-shadow: 0 2px 0 var(--blue); }
.m-goods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-goods img { aspect-ratio: 300 / 380; border-radius: 14px; margin-bottom: 6px; }
.m-goods b { display: block; font-size: 11px; font-weight: 600; }
.m-goods small { margin-top: 2px; color: var(--ink); font-size: 11.5px; font-weight: 700; }
.mock-lock { color: #fff; border-color: rgb(255 255 255 / 25%); background: linear-gradient(165deg, rgb(52 66 112 / 96%), rgb(93 84 150 / 94%) 60%, rgb(150 120 190 / 92%)); }
.m-clock { font-size: 46px; font-weight: 300; line-height: 1; text-align: center; letter-spacing: -0.02em; margin-top: 4px; }
.m-date { margin: 4px 0 12px; text-align: center; font-size: 12px; opacity: 0.85; }
.m-note { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; margin-top: 7px; padding: 9px 10px; border-radius: 14px; background: rgb(255 255 255 / 94%); color: var(--ink); }
.m-note b { display: block; font-size: 11.5px; }
.m-note time { align-self: start; font-size: 9.5px; color: var(--muted); }
.m-app { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #229ed9; color: #fff; font-size: 17px; }
.m-h { font-size: 15px; font-weight: 700; }
.m-list li { display: grid; grid-template-columns: 46px 32px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px 0; border-top: 1px solid #edf1f8; }
.m-list time { font-size: 11px; font-weight: 700; line-height: 1.25; }
.m-list img, .m-ava { width: 32px; height: 32px; border-radius: 50%; }
.m-ava { display: grid; place-items: center; background: var(--blue-50); color: var(--blue); font-size: 11px; font-weight: 700; }
.m-list b { display: block; font-size: 12px; }

/* =========================================================
   3. Как мы работаем: переписка
   ========================================================= */
.chat { margin: 0 var(--g); overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: #edf2f9; box-shadow: var(--shadow-md); }
.chat-head { display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.chat-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-head b { display: block; font-size: 15.5px; line-height: 1.25; }
.chat-head small { display: block; font-size: 13px; color: var(--blue); font-weight: 600; }
.chat-body {
  display: flex; flex-direction: column; gap: 7px; padding: 12px 12px 16px;
  background:
    radial-gradient(60% 40% at 100% 0%, rgb(31 111 235 / 8%), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgb(31 111 235 / 7%), transparent 70%);
}
.day {
  align-self: center; margin: 6px 0 2px; padding: 3px 11px; border-radius: 999px;
  background: rgb(255 255 255 / 80%); font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.msg { max-width: 84%; padding: 8px 13px 9px; border-radius: 18px; font-size: 15px; line-height: 1.4; box-shadow: 0 1px 1px rgb(15 30 66 / 7%); }
.msg.in { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; }
.msg.out { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.step { display: block; margin-bottom: 1px; font-size: 13px; font-weight: 800; color: var(--blue); }
.msg.pic { padding: 4px; }
.msg.pic img { width: 176px; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: top; border-radius: 15px; }
.msg.pic p { padding: 6px 9px 4px; max-width: 176px; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 18px; border-bottom-left-radius: 6px; background: #fff; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9fb0cc; }
/* Сообщения появляются по очереди, когда переписка показалась на экране (класс .is-play ставит m.js) */
@media (prefers-reduced-motion: no-preference) {
  .js .chat-body > * { opacity: 0; transform: translateY(10px) scale(0.98); }
  .js .chat.is-play .chat-body > * {
    opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 420ms);
  }
  .js .chat.is-play .typing i { animation: dot 1.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 420ms + var(--j, 0s)); }
  .typing i:nth-child(2) { --j: 0.15s; }
  .typing i:nth-child(3) { --j: 0.3s; }
}
@keyframes dot {
  0%, 60%, 100% { transform: none; opacity: 0.55; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* =========================================================
   4. Стоимость: корзина с переключателями
   ========================================================= */
.cart { margin: 0 var(--g); overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.cart-title { padding: 16px 16px 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.opt { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; cursor: pointer; }
.opt + .opt { border-top: 1px solid #eef2f8; }
.opt-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue-50); color: var(--blue); font-size: 21px; transition: background-color 0.25s ease, color 0.25s ease; }
.opt:has(:checked) .opt-ico { background: var(--blue); color: #fff; }
.opt b { display: block; font-size: 15.5px; line-height: 1.3; }
.opt small { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
/* Переключатель как в телефоне */
.opt input {
  appearance: none; -webkit-appearance: none; position: relative; width: 48px; height: 28px; margin: 0; border-radius: 999px;
  background: #d9e1ee; cursor: pointer; transition: background-color 0.25s ease;
}
.opt input::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgb(15 30 66 / 25%); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.opt input:checked { background: var(--blue); }
.opt input:checked::before { transform: translateX(20px); }
.cart-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 14px; padding: 14px 16px; background: var(--soft); border-top: 1px solid var(--line); }
.cart-total small { display: block; font-size: 13px; color: var(--muted); }
.cart-total b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.picked { padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.cart .btn { width: calc(100% - 32px); margin: 0 16px 16px; }
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px var(--g) 0; }
.terms li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.terms b { display: block; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
.terms small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }

/* =========================================================
   5. Обо мне: фото во всю ширину, потом коротко
   ========================================================= */
.about-photo { width: 100%; height: auto; margin-bottom: 18px; }
.about-name { font-size: 15px; font-weight: 700; color: var(--blue); }
.about .sec-head h2 { margin-top: 4px; }
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 var(--g); }
.points li { display: grid; gap: 10px; align-content: start; padding: 14px 14px 16px; border-radius: 18px; background: var(--soft); }
.points .icon { font-size: 24px; color: var(--blue); }
.points b { font-size: 14.5px; line-height: 1.3; }

/* =========================================================
   6. Вопросы: выпадающим текстом
   ========================================================= */
.faq-list { margin: 0 var(--g); border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 14px; align-items: center; padding: 15px 0;
  list-style: none; cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1.35;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-caret { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--blue); font-size: 14px; transition: background-color 0.25s ease, color 0.25s ease; }
.faq-caret .icon { transform: rotate(90deg); transition: transform 0.3s ease; }
.faq-list details[open] .faq-caret { background: var(--blue); color: #fff; }
.faq-list details[open] .faq-caret .icon { transform: rotate(-90deg); }
.faq-list p { padding: 0 46px 16px 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
/* Плавное раскрытие там, где браузер умеет (Chrome); в остальных — сразу */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    details::details-content { height: 0; overflow: clip; transition: height 0.3s ease, content-visibility 0.3s allow-discrete; }
    details[open]::details-content { height: auto; }
  }
}

/* =========================================================
   7. Связь
   ========================================================= */
.contact {
  margin-top: 60px; padding: 34px var(--g) 30px; border-radius: 32px 32px 0 0;
  background: radial-gradient(70% 50% at 100% 0%, rgb(31 111 235 / 14%), transparent 70%), linear-gradient(180deg, #eef4ff, #f8fbff 70%, #fff);
}
.contact h2 { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; }
.contact > p { margin-top: 10px; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.call-row {
  display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 0 20px; min-height: 56px; border-radius: 999px;
  background: var(--blue); color: #fff; font-weight: 700; text-decoration: none;
}
.call-row .icon { font-size: 22px; }
.call-row small { font-weight: 500; opacity: 0.85; }
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.apps a {
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 6px 14px; border-radius: 22px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none;
  font-size: 14.5px; font-weight: 700; transition: transform 0.15s ease;
}
.apps a:active { transform: scale(0.97); }
.app-ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: var(--blue-50); font-size: 30px; }
.app-ico.tg { background: #229ed9; color: #fff; }
.app-ico.form { color: var(--blue); }
.app-ico img { width: 36px; height: 36px; }
.apps-note { margin-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-align: center; }

/* ---------- Подвал ---------- */
.site-footer { display: grid; gap: 6px; justify-items: start; padding: 24px var(--g) 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-footer .brand { color: var(--ink); }
.faq-more { display: inline-block; margin: 16px var(--g) 0; color: var(--blue); font-size: 15px; font-weight: 700; text-decoration: none; }
.to-answers, .to-desktop { margin-top: 6px; color: var(--blue); font-weight: 600; text-decoration: none; }

/* ---------- Нижняя панель ---------- */
.bar {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; gap: 10px;
  max-width: 480px; margin: 0 auto; padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 88%); border-top: 1px solid rgb(227 233 243 / 85%);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.bar.is-off { transform: translateY(110%); }
.bar .btn { flex: 1; }
.bar-call { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 22px; }

/* ---------- Окно «как связаться» ---------- */
.contact-dialog { width: min(100% - 32px, 440px); padding: 26px 22px 22px; border: 0; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px -20px rgb(10 20 50 / 45%); }
.contact-dialog::backdrop { background: rgb(13 20 36 / 42%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.contact-dialog h2 { margin: 0 44px 6px 0; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.dlg-text { margin: 0 0 16px; font-size: 15px; color: var(--muted); }
.dlg-pick { margin: -4px 0 16px; padding: 10px 12px; border-radius: 14px; background: var(--blue-50); font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.dlg-pick b { color: var(--ink); }
.dlg-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--soft); cursor: pointer; font-size: 18px; }
.dlg-list { display: grid; gap: 10px; }
.dlg-list a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; font-weight: 700; }
.dlg-list a:active { background: var(--blue-50); }
.dlg-list .icon { font-size: 28px; }
.dlg-list img { width: 28px; height: 28px; flex: none; }
.dlg-list small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.ic-telegram { color: #229ed9; }
.ic-phone { color: var(--blue); }

/* Мягкое появление разделов при прокрутке (без него всё видно сразу) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}