/* Locator — стили лендинга. Цвета, радиусы и тени — токены в :root; в правилах ниже только var(). */

/* Nunito (variable, 400–800), SIL OFL 1.1 — свой хостинг, без CDN. Подмножества: latin, latin-ext, cyrillic. */
@font-face { font-family: Nunito; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/nunito-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Nunito; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/nunito-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Nunito; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/nunito-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ink: #24243a;
  --text-soft: #54566b;
  --muted: #5c5f76;
  --indigo: #5b5cf0;
  --indigo-ink: #4748d6;
  --indigo-soft: #ececff;
  --coral: #f05d5e;
  --line: #d9def2;
  --line-soft: #e5e8f5;
  --sky: #eef5ff;
  --white: #fff;
  --night: #202137;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --shadow-card: 0 16px 35px #6673a522;
  --shadow-pop: 0 18px 34px #32345e32;

  --ease: 180ms ease;
  /* Всё, что открывается и закрывается (меню, список языков, FAQ, сообщения), анимируется этими двумя значениями */
  --t-open: 320ms cubic-bezier(.2, .8, .2, 1);
  --t-close: 220ms ease;
  --font: Nunito, "Avenir Next Rounded", ui-rounded, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-gutter: stable; }
body { margin: 0; color: var(--ink); background: var(--white); font: 500 16px/1.55 var(--font); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

/* Видимый фокус с клавиатуры на всех элементах */
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; border-radius: 6px; }
footer :focus-visible { outline-color: #b7b8ff; }

.shell { width: min(1280px, calc(100% - 48px)); margin: auto; }

/* ---------- Первый экран ---------- */
.hero {
  overflow: hidden; position: relative; min-height: 790px; padding: 78px 0 0;
  background:
    radial-gradient(circle at 11% 82%, #b7b6ff 0 5%, transparent 5.2%),
    radial-gradient(circle at 62% 96%, #d4dcff 0 10%, transparent 10.2%),
    linear-gradient(115deg, #edf4ff 0%, #e4edff 48%, #f3f6ff 100%);
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; }
.hero::before { width: 640px; height: 640px; left: -90px; top: 180px; background: radial-gradient(circle at 46% 40%, #d0ceff 0%, #e9efff 60%, transparent 71%); opacity: .94; }
.hero::after { width: 320px; height: 560px; right: -165px; top: -95px; background: linear-gradient(155deg, #aeb0ff 0%, #cfd4ff 64%, #b9bcff 100%); border-radius: 42% 0 0 52%; transform: rotate(-5deg); opacity: .9; }

/* ---------- Шапка ---------- */
header { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; padding: 12px 0; background: transparent; transition: background var(--ease), box-shadow var(--ease); }
header.is-scrolled, header.menu-open { background: #fffffff0; box-shadow: 0 7px 22px #2b315018; backdrop-filter: blur(14px); }
.header-inner { position: relative; width: min(1280px, calc(100% - 48px)); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 27px; font-weight: 700; letter-spacing: -.04em; }
.pin-logo { width: 31px; height: 37px; filter: drop-shadow(0 4px 5px #5b5cf044); }
nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-weight: 700; }
nav > a { padding: 8px 0; transition: color var(--ease); }
nav > a:hover { color: var(--indigo-ink); }

/* Кнопка мобильного меню: две иконки, видна одна */
.menu { position: relative; display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); }
.menu:hover { background: var(--indigo-soft); }
.menu .ui-icon { position: absolute; width: 26px; height: 26px; transition: opacity var(--t-close), rotate var(--t-open), scale var(--t-open); }
.menu .icon-close { opacity: 0; rotate: -90deg; scale: .6; }
header.menu-open .menu .icon-open { opacity: 0; rotate: 90deg; scale: .6; }
header.menu-open .menu .icon-close { opacity: 1; rotate: 0deg; scale: 1; }

/* Переключатель языков */
.language-menu { margin-left: 28px; }
.lang { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; transition: border-color var(--ease), color var(--ease), background var(--ease); }
.lang:hover, .lang:focus, .lang.show { border-color: #aaaaff; background: #fafaff; color: var(--indigo-ink); box-shadow: none; }
.lang::after { margin-left: 0; vertical-align: 0; }
.language-list { display: block; right: 0; left: auto; min-width: 188px; margin-top: 6px !important; padding: 6px; border: 1px solid #e4e6f4; border-radius: 14px; box-shadow: 0 12px 26px #25274b1c; visibility: hidden; opacity: 0; translate: 0 -.6em; scale: .96; transform-origin: top right; pointer-events: none; transition: opacity var(--t-close), translate var(--t-close), scale var(--t-close), visibility 0s .22s; }
.language-list.show { visibility: visible; opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; transition: opacity var(--t-open), translate var(--t-open), scale var(--t-open), visibility 0s; }
.language-list .dropdown-item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: 9px; color: var(--ink); font-size: 14px; font-weight: 600; }
.language-list .dropdown-item:hover, .language-list .dropdown-item:focus { background: var(--indigo-soft); color: var(--indigo-ink); }
.language-list .current { background: #f3f3ff; color: var(--indigo-ink); }
.language-flag { width: 18px; text-align: center; font-size: 15px; }
.language-code { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.dropdown-item.current .language-code { color: var(--indigo-ink); }

/* ---------- Первый экран: текст и форма ---------- */
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 685px; }
.hero-copy { position: relative; z-index: 1; padding-right: 28px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--indigo-ink); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); box-shadow: 0 0 0 5px #5b5cf020; }
h1 { max-width: 640px; margin: 0; font-size: clamp(38px, 4.5vw, 66px); line-height: 1.08; letter-spacing: -.045em; font-weight: 700; overflow-wrap: break-word; }
.lead { max-width: 570px; font-weight: 500; margin: 22px 0 26px; color: var(--text-soft); font-size: 19px; }

.request-form { width: 100%; max-width: 620px; padding: 9px; background: var(--white); border: 1px solid var(--line-soft); border-radius: 20px; box-shadow: var(--shadow-card); }
.form-top { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Поле телефона: выбор страны + номер ---------- */
.phone { position: relative; min-width: 0; flex: 1 1 230px; }
.phone-field { display: flex; align-items: center; gap: 6px; padding: 0 12px 0 4px; border: 1px solid transparent; border-radius: var(--radius-sm); transition: border-color var(--ease), background var(--ease), box-shadow var(--ease); }
.phone-field:focus-within { border-color: var(--indigo); background: #fbfbff; box-shadow: 0 0 0 3px #5b5cf033; }
.phone-field.invalid { border-color: #d6393a; background: #fff8f8; box-shadow: 0 0 0 3px #d6393a22; }
.phone-input { min-width: 0; flex: 1; height: 52px; }
.cc-btn { display: flex; flex: none; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-weight: 800; white-space: nowrap; transition: background var(--ease); }
.cc-btn::after { content: ""; width: 1px; height: 24px; margin-left: 4px; background: var(--line); }
.cc-btn:hover, .cc-btn[aria-expanded="true"] { background: var(--indigo-soft); }
.cc-flag { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #e9ecf8; object-fit: cover; }
.cc-chevron { width: 16px; height: 16px; color: var(--muted); transition: rotate var(--t-open); }
.cc-btn[aria-expanded="true"] .cc-chevron { rotate: 180deg; }
.phone-error { max-height: 0; margin: 0; padding: 0 14px; overflow: hidden; opacity: 0; color: #c0292a; font-size: 13px; font-weight: 700; transition: max-height var(--t-open), opacity var(--t-close), padding var(--t-open); }
.phone-error.show { max-height: 3em; padding: 6px 14px 2px; opacity: 1; }

/* Список стран: окно под полем (на телефоне — шторка снизу) */
.cc-backdrop { position: fixed; inset: 0; z-index: 60; visibility: hidden; opacity: 0; background: transparent; transition: opacity var(--t-close), visibility 0s .22s; }
.cc-panel { position: fixed; z-index: 61; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e4e6f4; border-radius: 16px; background: var(--white); box-shadow: 0 18px 40px #25274b30; visibility: hidden; opacity: 0; translate: 0 -.6em; scale: .98; transform-origin: top left; pointer-events: none; transition: opacity var(--t-close), translate var(--t-close), scale var(--t-close), visibility 0s .22s; }
.cc-panel.above { transform-origin: bottom left; translate: 0 .6em; }
.cc-panel.open { visibility: visible; opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; transition: opacity var(--t-open), translate var(--t-open), scale var(--t-open), visibility 0s; }
.cc-search { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #eceef8; }
.cc-search .ui-icon { flex: none; width: 18px; height: 18px; color: var(--muted); }
.cc-search input { height: 40px; }
/* Рамка фокуса рисуется вокруг всего поля, а не внутри самого input */
.phone-input:focus-visible, .cc-search input:focus-visible { outline: none; }
.cc-search:focus-within { box-shadow: inset 0 -2px 0 var(--indigo); }
.cc-list { max-height: min(320px, 48vh); margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.cc-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px; font-weight: 600; cursor: pointer; }
.cc-item:hover, .cc-item.active { background: var(--indigo-soft); }
.cc-item.selected { background: #f3f3ff; color: var(--indigo-ink); box-shadow: inset 3px 0 0 var(--indigo); }
.cc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-code { flex: none; color: var(--muted); font-size: 14px; font-weight: 800; }
.cc-item.selected .cc-code { color: var(--indigo-ink); }
.cc-empty { margin: 0; padding: 22px 14px; text-align: center; color: var(--muted); font-weight: 700; }
html.cc-lock { overflow: hidden; }
input, textarea { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
input { font-size: 16px; }
::placeholder { color: #70738a; opacity: 1; }

.locate { flex: 1 1 auto; min-height: 52px; border: 0; border-radius: var(--radius-sm); padding: 0 22px; background: var(--indigo); color: var(--white); font-weight: 800; white-space: nowrap; transition: background var(--ease), box-shadow var(--ease); }
.locate:hover { background: var(--indigo-ink); box-shadow: 0 8px 18px #5b5cf05b; }
.locate:active { background: #3b3cbf; box-shadow: none; }


.notice { display: flex; gap: 10px; max-width: 580px; margin: 16px 0 0; color: var(--text-soft); font-size: 14px; line-height: 1.45; }
.notice svg { flex: none; margin-top: 2px; color: var(--indigo-ink); }

/* ---------- Иллюстрация: мультфильм «как работает Locator» ---------- */
/* Одна сцена из двух смартфонов, цикл 12 с, без шагов и подписей:
   ввод номера → письмо летит к получателю → он жмёт «Поделиться» → метка летит обратно и падает на карту.
   Всё считается в em от ширины сцены (1em = 1/62 ширины), поэтому рисунок масштабируется целиком.
   Базовые стили = ПОСЛЕДНИЙ кадр (метка на карте): его видят при prefers-reduced-motion. */
.visual {
  --loop: 12s;
  /* Траектории полёта (центры, в em сцены): письмо — от заказчика к получателю, метка — обратно на карту */
  --f1x: 31em; --f1y: 19em; --f2x: 15em; --f2y: 30em; --fpk: 8em;
  --r1x: 15em; --r1y: 30em; --r2x: 46em; --r2y: 43em; --rpk: 16em;
  position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 62 / 68;
  container-type: inline-size;
}
.visual > * { font-size: 1.6129cqw; }
.visual::before, .visual::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.visual::before { width: 210px; height: 210px; left: 0; bottom: 36px; background: radial-gradient(circle, #d7dcff 0 44%, #e5edff 45% 66%, transparent 67%); }
.visual::after { width: 130px; height: 130px; right: 20px; top: 36px; background: #dfe5ff; opacity: .7; }
.dot { position: absolute; z-index: 1; width: 15px; height: 15px; border-radius: 50%; background: var(--indigo); box-shadow: 0 5px 14px #5b5cf077; }
.dot.one { top: 65px; left: 12%; }
.dot.two { bottom: 56px; right: 4%; width: 11px; height: 11px; }
.dot.three { top: 40%; right: 8%; width: 20px; height: 20px; background: #9698ff; }
.dot.four { bottom: 23%; left: 16%; width: 9px; height: 9px; background: #7c7ef7; }

/* Корпус смартфона: титановая рамка, чёрный борт, экран со скруглением, кнопки сбоку */
.device { position: absolute; z-index: 2; width: var(--w); height: calc(var(--w) * 2.05); padding: calc(var(--w) * .028); border-radius: calc(var(--w) * .165); background: linear-gradient(150deg, #9a9da9 0%, #3b3d47 10%, #17181e 40%, #17181e 62%, #3d3f4a 90%, #a2a5b0 100%); box-shadow: 0 2.2em 3.6em #2427484d, 0 .4em 1em #24274833, inset 0 0 0 .07em #ffffff40; }
.device::before { content: ""; position: absolute; left: -.2em; top: 13%; width: .2em; height: 17%; border-radius: .12em 0 0 .12em; background: linear-gradient(to bottom, #565965 0 18%, transparent 18% 32%, #565965 32% 62%, transparent 62% 70%, #565965 70% 100%); }
.device::after { content: ""; position: absolute; right: -.2em; top: 24%; width: .2em; height: 10%; border-radius: 0 .12em .12em 0; background: #565965; }
.bezel { width: 100%; height: 100%; padding: calc(var(--w) * .013); border-radius: calc(var(--w) * .137); background: #000; }
.screen { position: relative; overflow: hidden; width: 100%; height: 100%; border-radius: calc(var(--w) * .124); background: #f4f6ff; container-type: size; }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(118deg, #ffffff2e 0%, transparent 28%); }
.screen > * { font-size: 5cqw; }
.phone1 { --w: 30em; right: 1em; top: 1em; }
.phone2 { --w: 19em; left: .5em; bottom: 3em; }
.island { position: absolute; z-index: 7; top: 2.3%; left: 50%; width: 29%; height: 3.4%; translate: -50% 0; border-radius: 99px; background: #000; }
.home-bar { position: absolute; z-index: 5; bottom: 1.4%; left: 50%; width: 34%; height: .45em; translate: -50% 0; border-radius: 99px; background: #17181e; opacity: .85; }
.status { position: absolute; z-index: 4; top: 2.3%; left: 0; right: 0; height: 3.4%; display: flex; align-items: center; justify-content: space-between; padding: 0 8%; color: var(--ink); font-size: 4cqw; font-weight: 800; }
.status-icons { display: flex; align-items: center; gap: .35em; }
.status-icons svg { height: .85em; width: auto; }
.status-light { color: var(--white); }

/* Телефон заказчика */
.app { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 9.5%; background: linear-gradient(180deg, #fff 0%, #f1f4ff 100%); }
.app-head { display: flex; align-items: center; gap: .4em; padding: .5em 1.1em; font-size: 1.2em; font-weight: 800; letter-spacing: -.03em; }
.app-head .ui-icon { width: 1.3em; height: 1.3em; color: var(--indigo); }
.form-card { display: flex; flex-direction: column; gap: .6em; margin: .3em 1em 0; padding: 1em; border-radius: 1.2em; background: var(--white); box-shadow: 0 .5em 1.4em #6673a52b; }
.field-label { font-size: .78em; font-weight: 700; color: var(--muted); }
.field { display: flex; align-items: center; gap: .5em; height: 3em; padding: 0 .8em; border: 2px solid var(--indigo); border-radius: .9em; background: var(--white); box-shadow: 0 0 0 .25em #5b5cf022; font-size: 1.02em; font-weight: 800; }
.f-flag { font-size: 1.1em; }
.f-code { padding-right: .5em; border-right: 1px solid var(--line); }
.f-typed { white-space: nowrap; animation: typing var(--loop) steps(12, end) infinite; }
.field-btn { display: grid; place-items: center; min-height: 3em; padding: 0 .6em; border-radius: .9em; background: var(--indigo); color: var(--white); font-size: .92em; font-weight: 800; line-height: 1.15; text-align: center; animation: press var(--loop) ease infinite; }
.field-note { display: flex; align-items: center; gap: .4em; font-size: .72em; font-weight: 700; line-height: 1.3; color: var(--text-soft); }
.field-note .ui-icon { flex: none; width: 1.5em; height: 1.5em; color: var(--indigo-ink); }

/* Карта в приложении и метка на ней (точка отсчёта — остриё пина) */
.map-area { position: relative; flex: 1; margin-top: 1em; overflow: hidden; border-radius: 1.6em 1.6em 0 0; background: #dce8ed; }
.map-area::before { content: ""; position: absolute; inset: 0; background: linear-gradient(31deg, transparent 48%, #fff 49% 51%, transparent 52%), linear-gradient(-37deg, transparent 46%, #fff 47% 49%, transparent 50%), linear-gradient(10deg, transparent 51%, #fff 52% 54%, transparent 55%); opacity: .85; background-size: 11em 7em, 10em 8.6em, 14em 6em; }
.chips { position: absolute; z-index: 2; top: .9em; left: 0; right: 0; display: grid; justify-items: center; }
.chip { grid-area: 1 / 1; display: flex; align-items: center; gap: .6em; padding: .5em 1em; border-radius: 99px; background: var(--white); box-shadow: 0 .4em 1em #32345e26; font-size: .8em; font-weight: 800; white-space: nowrap; }
.chip-wait { opacity: 0; animation: chip-wait var(--loop) ease infinite; }
.chip-done { animation: chip-done var(--loop) ease infinite; }
.chip-done i { width: .75em; height: .75em; border-radius: 50%; background: #22b573; box-shadow: 0 0 0 .25em #22b57333; }
.wait-dots { display: flex; gap: .3em; }
.wait-dots i { width: .5em; height: .5em; border-radius: 50%; background: var(--indigo); animation: wait-dot 1.2s ease-in-out infinite; }
.wait-dots i:nth-child(2) { animation-delay: .2s; }
.wait-dots i:nth-child(3) { animation-delay: .4s; }
.pin-anchor { position: absolute; z-index: 1; left: 50%; top: 60%; width: 0; height: 0; }
.accuracy { position: absolute; left: -5em; top: -5em; width: 10em; height: 10em; border-radius: 50%; background: #5b5cf01f; border: 1px solid #5b5cf055; animation: accuracy var(--loop) ease-out infinite; }
.ring { position: absolute; left: -2.2em; top: -2.2em; width: 4.4em; height: 4.4em; border-radius: 50%; border: 2px solid var(--indigo); opacity: 0; animation: ring var(--loop) ease-out infinite; }
.map-pin { position: absolute; left: -1.6em; top: -3.86em; width: 3.2em; height: 3.2em; background: var(--coral); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 .6em .9em #c9333970; animation: pin-drop var(--loop) ease-out infinite; }
.map-pin::after { content: ""; position: absolute; left: 31%; top: 31%; width: 38%; height: 38%; border-radius: 50%; background: var(--white); }

/* Телефон получателя: экран выключен → просыпается → просьба снизу → «Поделиться» */
.lock { position: absolute; inset: 0; display: flex; justify-content: center; padding-top: 22%; background: radial-gradient(circle at 25% 15%, #8b8dff 0 22%, transparent 45%), radial-gradient(circle at 85% 80%, #f58fa0 0 20%, transparent 50%), linear-gradient(165deg, #4b4dd8 0%, #6a58e6 55%, #8e63e0 100%); }
.lock-time { color: var(--white); font-size: 3.4em; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.screen-off { position: absolute; inset: 0; z-index: 6; background: #000; opacity: .78; animation: screen-wake var(--loop) ease infinite; }
.phone2 { animation: buzz var(--loop) linear infinite; }
.sheet { position: absolute; z-index: 3; left: 4%; right: 4%; bottom: 4%; padding: .9em; border-radius: 1.3em; background: var(--white); box-shadow: 0 .6em 2em #1d1f4a55; color: var(--ink); font-size: max(5.2cqw, 9px); translate: 0 115%; animation: sheet var(--loop) ease-in-out infinite; }
.sheet-who { display: flex; align-items: center; gap: .5em; }
.sheet-who .ui-icon { margin-left: auto; width: 1.5em; height: 1.5em; color: var(--coral); }
.avatar { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--indigo-soft); color: var(--indigo-ink); font-weight: 800; }
.sheet p { margin: .6em 0 .8em; font-size: .95em; font-weight: 700; line-height: 1.3; }
.sheet-actions { display: flex; gap: .5em; }
.sheet-actions span { position: relative; flex: 1; display: grid; place-items: center; height: 2.6em; border-radius: .8em; font-size: .92em; font-weight: 800; }
.sheet-decline { background: #f0f1f8; color: var(--text-soft); }
.sheet-share { background: var(--indigo); color: var(--white); animation: share-press var(--loop) ease infinite; }
.tap { position: absolute; left: 50%; top: 50%; width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; border-radius: 50%; background: var(--white); opacity: 0; animation: tap var(--loop) ease-out infinite; }

/* Летающие письмо и метка: внешний элемент двигается по горизонтали, внутренний — по дуге вверх-вниз */
.flyer { position: absolute; z-index: 9; width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; opacity: 0; pointer-events: none; }
.flyer i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--indigo); color: var(--white); box-shadow: 0 .6em 1.2em #5b5cf066, 0 0 0 .5em #5b5cf025; }
.flyer .ui-icon { width: 55%; height: 55%; }
.flyer-go { left: var(--f1x); top: var(--f1y); animation: go-x var(--loop) ease-in-out infinite; }
.flyer-go i { animation: go-y var(--loop) linear infinite; }
.flyer-back { left: var(--r1x); top: var(--r1y); animation: back-x var(--loop) ease-in-out infinite; }
.flyer-back i { background: var(--coral); box-shadow: 0 .6em 1.2em #f05d5e66, 0 0 0 .5em #f05d5e25; animation: back-y var(--loop) linear infinite; }

.location-card { position: absolute; z-index: 6; right: -1em; bottom: 8em; width: max(23em, 185px); padding: 1.5em 1.7em; border-radius: 1.6em; background: var(--white); box-shadow: var(--shadow-pop); transform: rotate(-4deg); animation: card-in var(--loop) ease infinite; }
.location-card strong { display: flex; align-items: center; gap: .5em; font-size: max(1.4em, 13px); }
.location-card strong .ui-icon { width: 1.3em; height: 1.3em; color: var(--coral); }
.location-card p { margin: .4em 0 0; color: var(--muted); font-size: max(1.15em, 11px); line-height: 1.4; }

/* Таймлайн цикла (% от --loop): 4–20 ввод · 22–25 нажатие · 26–38 письмо летит · 38–45 телефон просыпается
   · 45–60 просьба и «Поделиться» · 62–73 метка летит обратно · 72–78 метка падает на карту · 95–100 сброс */
@keyframes typing { 0%, 4% { clip-path: inset(0 100% 0 0); } 20%, 96% { clip-path: inset(0 0 0 0); } 96.5%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes press { 0%, 21% { scale: 1; background-color: var(--indigo); } 23% { scale: .95; background-color: var(--indigo-ink); } 26%, 100% { scale: 1; background-color: var(--indigo); } }
@keyframes chip-wait { 0%, 26% { opacity: 0; translate: 0 -.6em; } 29%, 70% { opacity: 1; translate: 0 0; } 73%, 100% { opacity: 0; translate: 0 -.6em; } }
@keyframes chip-done { 0%, 74% { opacity: 0; translate: 0 -.6em; } 77%, 94% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 -.6em; } }
@keyframes wait-dot { 0%, 80%, 100% { opacity: .25; scale: .8; } 40% { opacity: 1; scale: 1; } }

@keyframes go-x { 0%, 26% { opacity: 0; translate: 0 0; } 27% { opacity: 1; translate: 0 0; } 38% { opacity: 1; translate: calc(var(--f2x) - var(--f1x)) 0; } 38.6%, 100% { opacity: 0; translate: calc(var(--f2x) - var(--f1x)) 0; } }
@keyframes go-y { 0%, 26% { translate: 0 0; animation-timing-function: ease-out; } 32% { translate: 0 calc(var(--fpk) - var(--f1y)); animation-timing-function: ease-in; } 38% { translate: 0 calc(var(--f2y) - var(--f1y)); } 38.6%, 100% { translate: 0 0; } }
@keyframes back-x { 0%, 62% { opacity: 0; translate: 0 0; } 63% { opacity: 1; translate: 0 0; } 73% { opacity: 1; translate: calc(var(--r2x) - var(--r1x)) 0; } 73.6%, 100% { opacity: 0; translate: calc(var(--r2x) - var(--r1x)) 0; } }
@keyframes back-y { 0%, 62% { translate: 0 0; animation-timing-function: ease-out; } 67.5% { translate: 0 calc(var(--rpk) - var(--r1y)); animation-timing-function: ease-in; } 73% { translate: 0 calc(var(--r2y) - var(--r1y)); } 73.6%, 100% { translate: 0 0; } }

@keyframes screen-wake { 0%, 37% { opacity: .78; } 41%, 63% { opacity: 0; } 67%, 100% { opacity: .78; } }
@keyframes buzz { 0%, 38% { translate: 0 0; } 39% { translate: -.3em 0; } 40% { translate: .3em 0; } 41% { translate: -.25em 0; } 42% { translate: .25em 0; } 43%, 100% { translate: 0 0; } }
@keyframes sheet { 0%, 41% { translate: 0 115%; } 46%, 59% { translate: 0 0; } 64%, 100% { translate: 0 115%; } }
@keyframes share-press { 0%, 55% { scale: 1; background-color: var(--indigo); } 57% { scale: .93; background-color: var(--indigo-ink); } 59.5%, 100% { scale: 1; background-color: var(--indigo); } }
@keyframes tap { 0%, 54% { opacity: 0; scale: .4; } 55% { opacity: .55; scale: .6; } 60%, 100% { opacity: 0; scale: 1.6; } }

@keyframes pin-drop { 0%, 72% { opacity: 0; translate: 0 -9em; } 73% { opacity: 1; translate: 0 -9em; } 76% { translate: 0 0; } 77.5% { translate: 0 -1.2em; } 79%, 95% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; translate: 0 0; } }
@keyframes accuracy { 0%, 75% { opacity: 0; scale: .4; } 82%, 95% { opacity: 1; scale: 1; } 98%, 100% { opacity: 0; scale: 1; } }
@keyframes ring { 0%, 77% { opacity: 0; scale: .3; } 78% { opacity: .6; scale: .3; } 85% { opacity: 0; scale: 2.4; } 86% { opacity: .6; scale: .3; } 93%, 100% { opacity: 0; scale: 2.4; } }
@keyframes card-in { 0%, 78% { opacity: 0; translate: 0 1em; } 82%, 94% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }

/* ---------- Секции ---------- */
main > section:not(.hero) { padding: 104px 0; scroll-margin-top: 20px; }
.section-title { margin: 0 auto 14px; max-width: 670px; text-align: center; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -.04em; font-weight: 700; text-wrap: balance; }
.section-sub { max-width: 640px; margin: 0 auto 52px; text-align: center; color: var(--muted); font-size: 17px; text-wrap: balance; }

.icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 15px; background: var(--indigo-soft); color: var(--indigo-ink); }
.icon .ui-icon { width: 26px; height: 26px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { position: relative; padding: 31px 27px 28px; border: 1px solid #d5daee; border-radius: var(--radius-lg); background: var(--white); }
.step-num { position: absolute; right: 25px; top: 18px; color: #d8dbff; font-size: 45px; font-weight: 800; line-height: 1; }
.step h3, .benefit h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; font-weight: 700; }
.step p, .benefit p { margin: 0; color: var(--muted); font-size: 15px; }

.why { background: linear-gradient(180deg, #f6f8ff 0%, #edf4ff 100%); }
.benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.benefit { padding: 28px; border-radius: var(--radius-lg); background: var(--white); border: 1px solid #dfe3f3; }
.benefit .icon { margin-bottom: 17px; }

/* FAQ */
.faq-wrap { width: 100%; margin: auto; }
.faq { border-bottom: 1px solid #d9dded; }
.faq button { display: flex; width: 100%; min-height: 64px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 4px; border: 0; background: var(--white); color: var(--ink); text-align: left; font-size: 17px; font-weight: 700; }
.faq button:hover { color: var(--indigo-ink); }
.faq button .ui-icon { flex: none; width: 24px; height: 24px; color: var(--indigo-ink); transition: transform var(--t-open); }
.answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t-open), opacity var(--t-close); }
.faq.open .answer { grid-template-rows: 1fr; opacity: 1; }
.answer-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .32s; }
.faq.open .answer-inner { visibility: visible; transition: visibility 0s; }
.answer-inner p { max-width: 720px; margin: 0; padding: 0 4px 20px; color: var(--muted); font-size: 16px; }
.faq.open button .ui-icon { transform: rotate(45deg); }

/* ---------- Подвал ---------- */
footer { padding: 65px 0 25px; background: var(--night); color: #f8f8ff; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 32px; padding-bottom: 45px; border-bottom: 1px solid #4a4c66; }
.footer-brand p { max-width: 330px; margin: 17px 0 0; color: #c1c3d3; font-size: 15px; }
.footer-links h4 { margin: 5px 0 16px; font-size: 15px; font-weight: 700; }
.footer-links a { display: block; margin: 4px 0; padding: 5px 0; color: #c1c3d3; font-size: 15px; }
.footer-links a:hover { color: var(--white); }
.attribution { margin-left: 8px; text-decoration: underline; text-underline-offset: 2px; }
.attribution:hover { color: var(--white); }
.legal { display: flex; justify-content: space-between; gap: 15px; padding-top: 21px; color: #b8bace; font-size: 13px; }
.legal div { display: flex; gap: 18px; flex-wrap: wrap; }
.legal a:hover { color: var(--white); }

/* ---------- Модальное окно запроса: радар → пример результата → оплата ---------- */
.rq { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; visibility: hidden; pointer-events: none; transition: visibility 0s .3s; }
.rq.open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.rq-backdrop { position: absolute; inset: 0; background: #16173380; opacity: 0; backdrop-filter: blur(3px); transition: opacity var(--t-close); }
.rq.open .rq-backdrop { opacity: 1; transition: opacity var(--t-open); }
.rq-card { position: relative; display: grid; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; border-radius: 26px; background: var(--white); box-shadow: 0 30px 80px #16173366; opacity: 0; translate: 0 1.5em; scale: .96; transition: opacity var(--t-close), translate var(--t-close), scale var(--t-close), height var(--t-open); }
.rq.open .rq-card { opacity: 1; translate: 0 0; scale: 1; transition: opacity var(--t-open), translate var(--t-open), scale var(--t-open), height var(--t-open); }
.rq-close { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffffcc; color: var(--ink); transition: background var(--ease); }
.rq-close:hover { background: var(--indigo-soft); }
.rq-close .ui-icon { width: 22px; height: 22px; }

/* Слайды лежат друг на друге; активный виден, остальные уезжают в сторону и растворяются */
.slide { grid-area: 1 / 1; align-self: start; min-width: 0; padding: 28px; visibility: hidden; opacity: 0; translate: 2.5em 0; transition: opacity var(--t-close), translate var(--t-close), visibility 0s .22s; }
.slide.is-before { translate: -2.5em 0; }
.slide.is-active { visibility: inherit; opacity: 1; translate: 0 0; transition: opacity var(--t-open), translate var(--t-open), visibility 0s; }
.slide-title { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -.03em; font-weight: 800; outline: none; text-wrap: balance; }
.slide-title:focus-visible { outline: none; }
.slide-number { margin: 8px 0 0; color: var(--muted); font-size: 15px; font-weight: 700; }
.slide-number strong { color: var(--ink); font-weight: 800; white-space: nowrap; }
.slide-text { margin: 10px 0 0; color: var(--text-soft); font-size: 16px; }
.slide-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--text-soft); font-size: 14px; font-weight: 700; line-height: 1.35; }
.slide-note .ui-icon { flex: none; width: 20px; height: 20px; color: var(--indigo-ink); }
.slide-action { display: block; width: 100%; min-height: 54px; margin-top: 18px; }

/* 1. Радар поверх тёмной карты: сетка, яркий вращающийся луч и расходящиеся круги */
.radar { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin: 28px 0 20px; border-radius: 18px; background: radial-gradient(circle at 50% 50%, #343a86 0%, #20244f 55%, #14163a 100%); box-shadow: inset 0 0 0 1px #ffffff1f; }
.radar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(31deg, transparent 48%, #ffffff1c 49% 51%, transparent 52%), linear-gradient(-37deg, transparent 46%, #ffffff1c 47% 49%, transparent 50%), linear-gradient(10deg, transparent 51%, #ffffff1c 52% 54%, transparent 55%); background-size: 190px 120px, 180px 150px, 250px 110px; }
.radar-grid { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 62px, #ffffff33 62px 63px), linear-gradient(#ffffff2e, #ffffff2e) center / 1px 100% no-repeat, linear-gradient(#ffffff2e, #ffffff2e) center / 100% 1px no-repeat; }
.radar-sweep { position: absolute; z-index: 1; left: 50%; top: 50%; height: 190%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: conic-gradient(from 0deg, #8f91ff00 0deg, #8f91ff00 235deg, #8f91ff40 300deg, #a9abff99 345deg, #d8d9ff 359deg, #ffffff 360deg); animation: radar-spin 2.2s linear infinite; }
.radar-ring { position: absolute; z-index: 2; left: 50%; top: 50%; height: 150%; aspect-ratio: 1; translate: -50% -50%; border: 3px solid #b4b6ff; border-radius: 50%; box-shadow: 0 0 22px #8f91ff, inset 0 0 22px #8f91ff88; opacity: 0; animation: radar-ring 2.8s ease-out infinite; }
.radar-ring.r2 { animation-delay: .93s; }
.radar-ring.r3 { animation-delay: 1.86s; }
.radar-core { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; translate: -50% -50%; border-radius: 50%; background: var(--white); color: var(--coral); box-shadow: 0 0 0 6px #ffffff40, 0 0 0 14px #ffffff22, 0 10px 30px #0000006b; animation: radar-core 2.2s ease-in-out infinite; }
.radar-core .ui-icon { width: 28px; height: 28px; }
.rq-steps { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.rq-steps li { display: flex; align-items: center; gap: 12px; color: #8a8da1; font-size: 15px; font-weight: 700; transition: color var(--t-close); }
.rq-mark { position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #d3d7ec; border-radius: 50%; color: var(--white); transition: background var(--t-close), border-color var(--t-close); }
.rq-mark .ui-icon { width: 14px; height: 14px; stroke-width: 3.2; scale: 0; transition: scale var(--t-open); }
.rq-steps li.is-active { color: var(--ink); }
.rq-steps li.is-active .rq-mark { border-color: #d3d7ec; border-top-color: var(--indigo); animation: radar-spin 1s linear infinite; }
.rq-steps li.is-done { color: var(--ink); }
.rq-steps li.is-done .rq-mark { border-color: var(--indigo); background: var(--indigo); }
.rq-steps li.is-done .rq-mark .ui-icon { scale: 1; }

/* 2. Размытый пример результата */
.sample { margin-top: 18px; padding: 14px; border: 1px solid #e3e6f3; border-radius: 18px; background: #fafbff; }
.sample-map { position: relative; overflow: hidden; height: 150px; border-radius: 14px; background: #dce8ed; }
.sample-map-bg { position: absolute; inset: -14px; filter: blur(7px); background: linear-gradient(31deg, transparent 48%, #fff 49% 51%, transparent 52%), linear-gradient(-37deg, transparent 46%, #fff 47% 49%, transparent 50%), linear-gradient(10deg, transparent 51%, #fff 52% 54%, transparent 55%), #dce8ed; background-size: 170px 100px, 160px 130px, 220px 90px, auto; }
.sample-pin { position: absolute; left: 50%; top: 52%; width: 34px; height: 34px; translate: -50% -50%; rotate: -45deg; border-radius: 50% 50% 50% 0; background: var(--coral); }
.sample-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 99px; background: var(--white); color: var(--indigo-ink); font-size: 12px; font-weight: 800; box-shadow: 0 4px 12px #32345e26; }
.sample-lock { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; translate: -50% -50%; border-radius: 50%; background: #ffffffe6; color: var(--ink); box-shadow: 0 6px 18px #32345e33; }
.sample-lock .ui-icon { width: 22px; height: 22px; }
.sample-fields { margin: 10px 0 0; }
.sample-fields > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: 1px solid #e8ebf6; }
.sample-fields > div:last-child { border-bottom: 0; padding-bottom: 2px; }
.sample-fields dt { color: var(--muted); font-size: 14px; font-weight: 700; }
.sample-fields dd { margin: 0; filter: blur(5px); font-weight: 800; user-select: none; }

/* 3. Оплата */
.pay-form { margin-top: 18px; }
.pay-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 800; }
.pay-input { display: block; width: 100%; height: 54px; padding: 0 16px; border: 1px solid #c9cde6; border-radius: var(--radius-sm); background: var(--white); font-size: 16px; transition: border-color var(--ease), box-shadow var(--ease); }
.pay-input:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px #5b5cf033; }
.pay-input[aria-invalid="true"] { border-color: #d6393a; box-shadow: 0 0 0 3px #d6393a22; }
.pay-error { max-height: 0; margin: 0; overflow: hidden; opacity: 0; color: #c0292a; font-size: 13px; font-weight: 700; transition: max-height var(--t-open), opacity var(--t-close), margin var(--t-open); }
.pay-error.show { max-height: 3em; margin-top: 6px; opacity: 1; }
.slide-back { display: block; width: 100%; min-height: 48px; margin-top: 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-soft); font-weight: 800; transition: background var(--ease), color var(--ease); }
.slide-back:hover { background: var(--indigo-soft); color: var(--indigo-ink); }
.pay-fail { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t-open), opacity var(--t-close); }
.pay-fail.show { grid-template-rows: 1fr; opacity: 1; }
.pay-fail-body { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .32s; }
.pay-fail.show .pay-fail-body { visibility: visible; transition: visibility 0s; }
.pay-fail p { margin: 10px 0 0; padding: 12px 16px; border-radius: var(--radius-sm); background: #fff0f0; color: #a82020; font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1px #f2c4c4; }

/* 4–6. Тест исхода оплаты, ссылка, карта-заглушка */
.test-badge { display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 99px; background: #fff6e5; color: #7a4d00; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.slide-danger { display: block; width: 100%; min-height: 54px; margin-top: 10px; border: 2px solid #e5a9a9; border-radius: var(--radius-sm); background: #fff; color: #a82020; font-weight: 800; transition: background var(--ease), border-color var(--ease); }
.slide-danger:hover { background: #fff0f0; border-color: #d6393a; }
.success-badge { display: grid; place-items: center; width: 52px; height: 52px; margin: 8px 0 14px; border-radius: 50%; background: #e3f8ee; color: #1a9a63; animation: badge-pop var(--t-open) both; }
.success-badge .ui-icon { width: 28px; height: 28px; stroke-width: 3; }
.map-stub { position: relative; overflow: hidden; height: 220px; margin-top: 18px; border-radius: 18px; background: linear-gradient(31deg, transparent 48%, #fff 49% 51%, transparent 52%), linear-gradient(-37deg, transparent 46%, #fff 47% 49%, transparent 50%), linear-gradient(10deg, transparent 51%, #fff 52% 54%, transparent 55%), #dce8ed; background-size: 190px 120px, 180px 150px, 250px 110px, auto; }
.map-stub .sample-pin { top: 46%; }
html.modal-lock { overflow: hidden; }

@keyframes badge-pop { from { scale: .4; opacity: 0; } 60% { scale: 1.12; } to { scale: 1; opacity: 1; } }
@keyframes radar-spin { to { rotate: 360deg; } }
@keyframes radar-ring { 0% { scale: .08; opacity: .95; } 100% { scale: 1; opacity: 0; } }
@keyframes radar-core { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }

/* ---------- Страница Цели (/<код>) ---------- */
.share-page, .owner-page { min-height: 100dvh; padding: 24px; background: linear-gradient(115deg, #edf4ff 0%, #e4edff 48%, #f3f6ff 100%); }
.share-page { display: grid; place-items: center; }
.share-card { width: min(480px, 100%); padding: 32px; border-radius: 26px; background: var(--white); box-shadow: 0 30px 80px #32345e26; }
.states { display: grid; align-content: start; overflow: hidden; margin-top: 6px; transition: height var(--t-open); }
.share-card .slide { padding: 22px 0 0; }
.spinner { display: block; width: 44px; height: 44px; margin: 12px 0 18px; border: 4px solid #d3d7ec; border-top-color: var(--indigo); border-radius: 50%; animation: radar-spin 1s linear infinite; }
.share-message { margin: 18px 0 0; padding: 14px 16px; border-left: 4px solid var(--indigo); border-radius: 14px; background: #f3f4ff; }
.share-message figcaption { color: var(--indigo-ink); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.share-message blockquote { margin: 6px 0 0; font-weight: 700; overflow-wrap: anywhere; white-space: pre-wrap; }
.share-facts { margin: 18px 0 0; }
.share-facts > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: 1px solid #e8ebf6; }
.share-facts dt { color: var(--muted); font-size: 14px; font-weight: 700; }
.share-facts dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.share-error { max-height: 0; margin: 0; overflow: hidden; opacity: 0; color: #a82020; font-size: 14px; font-weight: 700; transition: max-height var(--t-open), opacity var(--t-close), margin var(--t-open); }
.share-error.show { max-height: 4em; margin-top: 12px; opacity: 1; }
.success-badge.live { position: relative; margin-inline: auto; background: #e3f8ee; } /* по центру: пульсация (кольцо до 1.6×) не обрезается краем окна */
.success-badge.live::after { content: ""; position: absolute; inset: 0; border: 2px solid #1a9a63; border-radius: 50%; opacity: 0; animation: live-ring 2s ease-out infinite; }

.share-data { margin-top: 18px; padding: 14px 16px; border: 1px solid #e3e6f3; border-radius: 16px; background: #fafbff; }
.share-data-title { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.share-data-line { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; color: var(--text-soft); font-size: 14px; font-weight: 700; }
.share-data-line .ui-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--indigo-ink); }
.share-data-toggle { margin-top: 8px; padding: 6px 0; border: 0; background: none; color: var(--indigo-ink); font-weight: 800; text-decoration: underline; }
.share-data-list { margin-top: 10px; }
.owner-map.share-map { height: 240px; margin-top: 16px; }
.share-sent { margin-top: 16px; }
.share-sent h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }

.leak { margin: 0; padding: 12px 14px; border: 1px solid #e3e6f3; border-radius: 12px; background: var(--white); }
.leak > div { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; }
.leak dt, .leak dd { margin: 0; font-size: 14px; }
.leak dt { color: var(--muted); font-weight: 700; }
.leak dd { font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.leak .leak-site { margin-bottom: 4px; color: var(--ink); font-size: 15px; font-weight: 800; }
.leak.is-placeholder dd, .leak.is-placeholder .leak-site { filter: blur(5px); user-select: none; }
.leak-password { margin: 8px 0 0; color: #8a2a2a; font-size: 13px; font-weight: 700; }
.leak-sample { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fff6e5; color: #7a4d00; font-size: 13px; font-weight: 700; }

/* ---------- Страница Заказчика (/order/<токен>) ---------- */
.owner-card { width: min(720px, 100%); margin: 0 auto; padding: 32px; border-radius: 26px; background: var(--white); box-shadow: 0 30px 80px #32345e26; }
.owner-views { display: grid; align-content: start; overflow: hidden; transition: height var(--t-open); }
.owner-card .slide { padding: 0; }
.owner-card .slide[data-view="checking"] { padding-top: 24px; }
.owner-title { margin: 22px 0 18px; outline: none; font-size: clamp(26px, 5vw, 34px); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; }
.status-list { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.status-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #f0dfae; border-radius: 14px; background: #fffbee; transition: background var(--t-close), border-color var(--t-close); }
.status-icon { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff0c4; color: #b07a00; transition: background var(--t-close), color var(--t-close); }
.status-icon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e0a100; transition: opacity var(--t-close); }
.status-icon .ui-icon { position: absolute; width: 15px; height: 15px; stroke-width: 3; opacity: 0; scale: .5; transition: opacity var(--t-close), scale var(--t-open); }
.status-item.is-done, .status-item.is-live { border-color: #bfe9d4; background: #f4fcf8; }
.status-item.is-bad { border-color: #f2c4c4; background: #fff7f7; }
.is-done .status-icon, .is-live .status-icon { background: #e3f8ee; color: #1a9a63; }
.is-bad .status-icon { background: #ffe3e3; color: #c0292a; }
.is-done .status-icon::before, .is-live .status-icon::before, .is-bad .status-icon::before { opacity: 0; }
.is-done .status-icon .ui-icon:not(.icon-bad), .is-live .status-icon .ui-icon:not(.icon-bad), .is-bad .status-icon .icon-bad { opacity: 1; scale: 1; }
.is-live .status-icon::after { content: ""; position: absolute; inset: 0; border: 2px solid #1a9a63; border-radius: 50%; opacity: 0; animation: live-ring 2s ease-out infinite; }
.status-body { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.status-body strong { font-size: 15px; }
.status-body span { color: var(--text-soft); font-size: 14px; font-weight: 600; text-align: right; }
.owner-debug { margin-bottom: 14px; padding: 14px; border: 1px dashed #d9b44a; border-radius: 16px; background: #fffbee; }
.debug-badge { display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 99px; background: #fff0c4; color: #7a4d00; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.owner-debug .pay-label { margin-top: 0; }
.link-row { display: flex; gap: 8px; }
.link-row .pay-input { flex: 1; min-width: 0; height: 54px; font-weight: 700; color: var(--indigo-ink); text-overflow: ellipsis; }
.copy-btn { display: flex; flex: none; align-items: center; gap: 8px; min-height: 54px; padding: 0 16px; border: 1px solid #c9cde6; border-radius: var(--radius-sm); background: var(--white); color: var(--indigo-ink); font-weight: 800; transition: background var(--ease), border-color var(--ease), color var(--ease); }
.copy-btn:hover { background: var(--indigo-soft); border-color: var(--indigo); }
.copy-btn.is-copied { background: #e3f8ee; border-color: #1a9a63; color: #12724a; }
.copy-btn .ui-icon { width: 20px; height: 20px; }
.copy-status { display: block; height: 0; overflow: hidden; }
.share-via { display: grid; gap: 8px; margin-top: 10px; }
.share-row { display: flex; gap: 8px; }
.share-btn { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--white); font-size: 14px; font-weight: 800; transition: filter var(--ease), translate var(--ease); }
.copy-mini { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 1px solid #c9cde6; border-radius: var(--radius-sm); background: var(--white); color: var(--indigo-ink); transition: background var(--ease), border-color var(--ease), color var(--ease); }
.copy-mini:hover { background: var(--indigo-soft); border-color: var(--indigo); }
.copy-mini.is-copied { background: #e3f8ee; border-color: #1a9a63; color: #12724a; }
.copy-mini .ui-icon { width: 18px; height: 18px; }
.share-btn:hover { color: var(--white); filter: brightness(1.08); }
.share-btn:active { translate: 0 1px; }
.share-btn .ui-icon { flex: none; width: 18px; height: 18px; }
.share-btn.is-telegram { background: #229ed9; }
.share-btn.is-whatsapp { background: #25a244; }
.share-btn.is-viber { background: #7360f2; }
.share-btn:not([href]) { pointer-events: none; opacity: .5; }
.owner-sms { margin: 0; padding: 12px 14px; border-radius: 12px; background: #eef1ff; color: var(--indigo-ink); font-size: 14px; font-weight: 700; }
.owner-sms.is-bad { background: #fff0f0; color: #8a2a2a; }
.owner-data { margin-top: 20px; }
.owner-data h2 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.owner-data-note { margin: 0 0 10px; color: var(--text-soft); font-size: 14px; font-weight: 600; }
.owner-data-note:empty { display: none; }
.owner-data-list, .share-data-list { display: grid; gap: 10px; }
.owner-map { position: relative; isolation: isolate; overflow: hidden; height: 340px; margin-top: 20px; border-radius: 18px; background: #dce8ed; }
.map-empty { font-family: var(--font); position: absolute; inset: 0; z-index: 1000; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: #ffffff8c; backdrop-filter: blur(7px); color: var(--text-soft); font-weight: 700; transition: opacity var(--t-close), visibility 0s .22s; }
.map-empty.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.map-empty .ui-icon { width: 36px; height: 36px; color: var(--coral); }
.map-empty p { max-width: 22em; margin: 0; }
.map-marker span { position: absolute; left: 0; top: 2px; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; background: var(--coral); box-shadow: 0 8px 14px #c9333970; transform: rotate(-45deg); }
.map-marker span::after { content: ""; position: absolute; left: 11px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--white); }
.owner-stale { max-height: 0; margin: 0; padding: 0 14px; overflow: hidden; opacity: 0; border-radius: 12px; background: #fff6e5; color: #7a4d00; font-size: 14px; font-weight: 700; transition: max-height var(--t-open), opacity var(--t-close), margin var(--t-open), padding var(--t-open); }
.owner-stale.show { max-height: 6em; margin-top: 12px; padding: 12px 14px; opacity: 1; }
.owner-report { max-height: 0; margin: 0; padding: 0 14px; overflow: hidden; opacity: 0; border-radius: 12px; background: #fff7f7; color: #8a2a2a; font-size: 14px; font-weight: 700; visibility: hidden; transition: max-height var(--t-open), opacity var(--t-close), margin var(--t-open), padding var(--t-open), visibility 0s .22s; }
.owner-report.show { visibility: visible; transition-delay: 0s, 0s, 0s, 0s, 0s; max-height: 9em; margin-top: 12px; padding: 12px 14px; opacity: 1; }
.owner-live { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22b573; animation: live-pulse 2s ease-in-out infinite; }

@keyframes live-ring { 0% { scale: .8; opacity: .8; } 100% { scale: 1.6; opacity: 0; } }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Страница ошибки (404, 403, 500) ---------- */
.error-hero { display: grid; align-items: center; min-height: 100dvh; padding: 110px 0 70px; }
.error-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(760px, 100%); margin: 0 auto; text-align: center; }
.error-card .eyebrow { margin-bottom: 4px; }
.error-code { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.6vw, 14px); font-size: clamp(100px, 22vw, 200px); font-weight: 800; line-height: 1; letter-spacing: -.06em; }
.error-code > span:not(.error-pin) { background: linear-gradient(160deg, #4748d6 10%, #8f91ff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-pin { position: relative; display: grid; place-items: center; width: .66em; height: .66em; border-radius: 50%; background: var(--white); color: var(--coral); box-shadow: 0 .05em .18em #32345e40, 0 0 0 .06em #ffffff99; letter-spacing: 0; }
.error-pin .ui-icon { width: .36em; height: .36em; }
.error-pin i { position: absolute; inset: 0; border: 3px solid var(--indigo); border-radius: 50%; opacity: 0; animation: live-ring 2.6s ease-out infinite; }
.error-pin i:nth-child(2) { animation-delay: 1.3s; }
.error-card h1 { margin: 14px 0 0; font-size: clamp(28px, 4.4vw, 46px); }
.error-card .lead { margin: 14px auto 0; max-width: 600px; }
.error-form-title { margin: 30px 0 12px; color: var(--text-soft); font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.error-form { text-align: left; }
.error-home { margin-top: 26px; padding: 8px 4px; color: var(--indigo-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; transition: color var(--ease); }
.error-home:hover { color: var(--ink); }
.error-debug { max-width: 100%; margin-top: 28px; padding: 12px 16px; border-radius: 14px; background: var(--white); box-shadow: 0 12px 30px #32345e1f; text-align: left; font-size: 13px; }
.error-debug summary { font-weight: 800; overflow-wrap: anywhere; }
.error-debug pre { margin: 10px 0 0; overflow: auto; font-size: 12px; }

/* ---------- Планшет и телефон ---------- */
@media (max-width: 900px) {
  nav { display: flex; position: absolute; top: calc(100% + 12px); left: -24px; right: -24px; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 24px 20px; background: var(--white); box-shadow: 0 16px 24px #2b315018; visibility: hidden; opacity: 0; translate: 0 -.8em; pointer-events: none; transition: opacity var(--t-close), translate var(--t-close), visibility 0s .22s; }
  header.menu-open nav { visibility: visible; opacity: 1; translate: 0 0; pointer-events: auto; transition: opacity var(--t-open), translate var(--t-open), visibility 0s; }
  nav > a { padding: 15px 0; border-bottom: 1px solid #eceef8; font-size: 17px; }
  .language-menu { margin: 0 6px 0 auto; } /* слева от кнопки меню, вне выпадающего списка */
  .lang { min-height: 44px; font-size: 14px; }
  .menu { display: grid; }
  .hero { min-height: auto; padding-top: 72px; padding-bottom: 48px; }
  /* Форма запроса всегда внизу экрана: человек может отправить запрос с любого места страницы */
  .request-form { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; max-width: 620px; margin: 0 auto; box-shadow: 0 10px 34px #25274b38; }
  .error-form-title { display: none; }
  footer { padding-bottom: 25px; }
  body:has(.request-form) footer { padding-bottom: 130px; }
  .hero-grid { grid-template-columns: 1fr; padding: 52px 0 0; }
  .hero-copy { padding-right: 0; }
  /* Колонки друг под другом: анимация сверху, заголовок и форма ниже */
  .visual { order: -1; max-width: 560px; margin: 0 auto 28px; }
  .steps { grid-template-columns: 1fr; max-width: 540px; margin: auto; }
  .step { min-height: 170px; }
  main > section:not(.hero) { padding: 80px 0; }
}

@media (max-width: 560px) {
  .error-hero { padding: 96px 0 56px; }
  .share-page, .owner-page { padding: 12px; }
  .share-card, .owner-card { padding: 24px 20px; }
  .owner-map { height: 280px; }
  /* Окно на телефоне занимает весь экран с отступом 10px со всех сторон (внутри прокручивается); высоту из JS перекрываем */
  .rq { inset: auto; top: 0; left: 0; width: 100%; height: 100dvh; place-items: stretch; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .rq-card { width: 100%; height: 100% !important; max-height: none; translate: 0 100%; scale: 1; }
  .rq.open .rq-card { translate: 0 0; }
  .slide { padding: 24px 20px; }
  .slide-title { font-size: 24px; padding-right: 44px; }
  .cc-panel { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-height: 78vh; border-radius: 22px 22px 0 0; translate: 0 100%; scale: 1; transform-origin: bottom center; }
  .cc-panel.above, .cc-panel.open { translate: 0 0; }
  .cc-panel:not(.open) { translate: 0 100%; }
  .cc-list { max-height: calc(78vh - 64px); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .cc-backdrop { background: #16173366; }
  .cc-backdrop.open { visibility: visible; opacity: 1; transition: opacity var(--t-open), visibility 0s; }
  .shell, .header-inner { width: min(100% - 40px, 1280px); }
  nav { left: -20px; right: -20px; padding: 6px 20px 20px; }
  .hero::before { width: 330px; height: 330px; left: 10%; top: 210px; }
  .brand { font-size: 24px; }
  .pin-logo { width: 27px; }
  .hero-grid { padding-top: 35px; }
  .eyebrow { font-size: 12px; }
  h1 { font-size: 36px; }
  .lead { font-size: 17px; margin: 16px 0 20px; }
  .locate { flex-basis: 100%; }
  .notice { font-size: 14px; }
  /* На телефоне сцена уже: два смартфона рядом, письмо летит по короткой дуге над получателем */
  .visual { aspect-ratio: 46 / 55; --f1x: 19em; --f1y: 14em; --f2x: 9.5em; --f2y: 17em; --fpk: 7em; --r1x: 9.5em; --r1y: 17em; --r2x: 32.5em; --r2y: 36em; --rpk: 10em; }
  .visual > * { font-size: 2.1739cqw; }
  .screen > * { font-size: 5.6cqw; }
  .phone1 { --w: 26em; right: 0; top: 0; }
  .phone2 { --w: 19em; left: 0; bottom: 0; }
  .location-card { left: .5em; right: auto; bottom: 5em; }
  .dot.one { left: 14px; }
  .benefits { grid-template-columns: 1fr; }
  .section-sub { margin-bottom: 35px; font-size: 16px; }
  main > section:not(.hero) { padding: 64px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .legal { display: block; }
  .legal div { margin-top: 10px; gap: 12px; }
}

/* Для тех, у кого в системе включено «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .visual *, .visual *::after, .radar *, .rq-mark, .success-badge, .success-badge::after, .spinner, .live-dot, .status-icon::after, .error-pin i { animation: none !important; }
  .radar-ring.r1 { opacity: .35; scale: .5; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}