/* WayliLoc — home.css (redesign landing, self-contained, links only from index.html) */

:root {
    --bg:#E7F3F1; --bg-2:#F4FAF9; --scrim:rgba(231,243,241,0.72);
    --surface:#FFFFFF; --surface-2:#F2F8F7; --line:rgba(13,27,42,0.12); --line-soft:rgba(13,27,42,0.06);
    --text:#0C1A28; --muted:#57707A; --faint:#8DA3AC;
    --teal:#159C90; --teal-2:#12B3A5; --teal-ink:#0B4A45; --blue:#0074E1; --sos:#E12A3B; --amber:#DE8408; --violet:#7C5CE0;
    --map-ink:rgba(13,27,42,0.10); --map-ink-2:rgba(13,27,42,0.05); --glow:rgba(21,156,144,0.25);
    --display: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
    --sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --radius:18px; --radius-lg:28px; --maxw:1160px; --ease:cubic-bezier(.22,.61,.36,1);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:#08111C; --bg-2:#0B1826; --scrim:rgba(7,15,26,0.66);
      --surface:#102233; --surface-2:#16304A; --line:rgba(255,255,255,0.10); --line-soft:rgba(255,255,255,0.05);
      --text:#E9F2F2; --muted:#93AAB4; --faint:#5C7683;
      --teal:#2BBFB3; --teal-2:#35D6C8; --teal-ink:#A9F0E8; --blue:#3D9BFF; --sos:#FF4D5E; --amber:#FFB020; --violet:#9E86FF;
      --map-ink:rgba(255,255,255,0.09); --map-ink-2:rgba(255,255,255,0.045); --glow:rgba(53,214,200,0.30);
    }
  }
  :root[data-theme="light"] {
    --bg:#E7F3F1; --bg-2:#F4FAF9; --scrim:rgba(231,243,241,0.72);
    --surface:#FFFFFF; --surface-2:#F2F8F7; --line:rgba(13,27,42,0.12); --line-soft:rgba(13,27,42,0.06);
    --text:#0C1A28; --muted:#57707A; --faint:#8DA3AC;
    --teal:#159C90; --teal-2:#12B3A5; --teal-ink:#0B4A45; --blue:#0074E1; --sos:#E12A3B; --amber:#DE8408; --violet:#7C5CE0;
    --map-ink:rgba(13,27,42,0.10); --map-ink-2:rgba(13,27,42,0.05); --glow:rgba(21,156,144,0.25);
  }
  :root[data-theme="dark"] {
    --bg:#08111C; --bg-2:#0B1826; --scrim:rgba(7,15,26,0.66);
    --surface:#102233; --surface-2:#16304A; --line:rgba(255,255,255,0.10); --line-soft:rgba(255,255,255,0.05);
    --text:#E9F2F2; --muted:#93AAB4; --faint:#5C7683;
    --teal:#2BBFB3; --teal-2:#35D6C8; --teal-ink:#A9F0E8; --blue:#3D9BFF; --sos:#FF4D5E; --amber:#FFB020; --violet:#9E86FF;
    --map-ink:rgba(255,255,255,0.09); --map-ink-2:rgba(255,255,255,0.045); --glow:rgba(53,214,200,0.30);
  }

  * { box-sizing:border-box; }
  /* overscroll-behavior гасит iOS-«резинку» (rubber-band): при упоре в потолок/низ
     страница не «отскакивает», поэтому липкая шапка (.topbar/.header) не дёргается.
     overflow-x:clip — убирает боковую протяжку страницы (декоративные элементы вроде
     .roads вылезают за края; на iOS `overflow-x:hidden` на body без html не держит).
     Берём `clip`, а НЕ `hidden`: clip не делает элемент скролл-контейнером по Y, значит
     не ломает `position:sticky` шапки (hidden превратил бы overflow-y:visible → auto). */
  /* Шапка — position:fixed (НЕ sticky!): скролл-лок бургера (overflow:hidden на html)
     ронял sticky-шапку в документную позицию → при открытии меню на пролистанной
     странице шапка «уезжала», бургер пропадал, всё зависало. fixed на overflow не
     реагирует. Взамен контенту нужен верхний отступ = высоте шапки (64px). */
  html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overscroll-behavior-y:none; overflow-x:clip; -webkit-tap-highlight-color:transparent; scroll-padding-top:64px; }
  body { margin:0; padding-top:64px; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; overscroll-behavior-y:none; }
  /* Тап по иконкам/кнопкам на мобилке — без «вспышки»-подсветки iOS/Android (серо-синий
     прямоугольник) и без выделения текста / long-press-callout на самих иконках. Свойство
     tap-highlight наследуемое (задано на html), тут — явно для интерактивных + сброс callout. */
  a, button, input, select, textarea, label, summary, [role="button"], [tabindex] { -webkit-tap-highlight-color:transparent; }
  button, [role="button"], .theme-btn, .burger, .lang-btn, .hdr-ctrl,
  .header-download, .mm-download, .mobile-download {
    -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  }
  /* Анти-мигание языка: прячем контент, пока i18n не применит сохранённый НЕ-en язык.
     Класс i18n-loading ставит inline-скрипт в <head> (только если wl_lang!=='en'),
     снимает apply() в i18n.js после перевода; в inline-скрипте есть 1.5с-таймер как страховка. */
  html.i18n-loading body { visibility: hidden; }
  img { max-width:100%; display:block; }
  ul { list-style:none; }
  h1, h2, h3, h4 { font-family:var(--display); }
  .brand { font-family:var(--display); }
  .wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
  a { color:inherit; text-decoration:none; }
  .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
  .muted { color:var(--muted); }

  /* ===== TOP BAR ===== */
  .topbar { position:fixed; top:0; left:0; right:0; z-index:60; backdrop-filter:blur(14px); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--line-soft); }
  /* На МОБИЛКЕ убираем backdrop-filter(blur) у фиксированной шапки: на iOS блюр на
     position:fixed ломает хит-тест — первый тап по бургеру «терялся» (меню открывалось
     только со второго). Взамен — сплошной непрозрачный фон (контент под шапкой и так скрыт).
     На десктопе (мышь, тап-мисса нет) фрост-эффект оставляем. */
  @media (max-width: 900px) {
    .topbar, .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  }
  .topbar-in { display:flex; align-items:center; justify-content:space-between; height:64px; }
  .brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.01em; }
  .brand-logo { width:32px; height:32px; border-radius:8px; display:block; }
  .topnav { display:flex; align-items:center; gap:24px; }
  .nav-links { display:flex; gap:24px; list-style:none; margin:0; padding:0; }
  .topnav a { color:var(--muted); font-size:.92rem; font-weight:600; transition:color .2s; }
  @media (hover: hover) { .topnav a:hover { color:var(--text); } }  .proto-tag { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-ink); background:color-mix(in srgb, var(--teal) 16%, transparent); border:1px solid color-mix(in srgb, var(--teal) 34%, transparent); padding:4px 8px; border-radius:999px; }
  .theme-btn { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; transition:transform .2s var(--ease), border-color .2s; }
  @media (hover: hover) { .theme-btn:hover { transform:translateY(-2px); border-color:var(--teal); } }  .theme-btn svg { width:18px; height:18px; }
  @media (prefers-color-scheme: dark) { .theme-btn .sun { display:block; } .theme-btn .moon { display:none; } }
  @media (prefers-color-scheme: light) { .theme-btn .sun { display:none; } .theme-btn .moon { display:block; } }
  :root[data-theme="dark"] .theme-btn .sun { display:block; } :root[data-theme="dark"] .theme-btn .moon { display:none; }
  :root[data-theme="light"] .theme-btn .sun { display:none; } :root[data-theme="light"] .theme-btn .moon { display:block; }

  /* ===== HERO ===== */
  .hero { position:relative; overflow:hidden; padding:74px 0 96px; isolation:isolate; }
  .hero-map { position:absolute; inset:0; z-index:-2; }
  .hero-map svg { width:100%; height:100%; }
  .hero-scrim { position:absolute; inset:0; z-index:-1; background:radial-gradient(1100px 620px at 68% 30%, transparent, var(--bg) 78%), linear-gradient(180deg, transparent 40%, var(--bg) 100%), linear-gradient(90deg, var(--bg) 4%, transparent 46%); }
  .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
  .eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:7px 12px; border-radius:999px; margin-bottom:22px; }
  .eyebrow .live-dot { width:8px; height:8px; border-radius:50%; background:var(--teal-2); box-shadow:0 0 0 0 var(--teal-2); animation:livepulse 2.4s ease-out infinite; }
  .eyebrow b { color:var(--text); font-weight:700; }
  h1 { font-size:clamp(2.5rem, 6vw, 4.15rem); line-height:1.02; letter-spacing:-.03em; font-weight:850; margin:0 0 20px; text-wrap:balance; }
  h1 .accent { color:var(--teal); position:relative; white-space:nowrap; }
  h1 .accent::after { content:""; position:absolute; left:0; right:0; bottom:.08em; height:.09em; background:linear-gradient(90deg, var(--teal-2), transparent); transform:scaleX(0); transform-origin:left; animation:underline 1s .7s var(--ease) forwards; }
  .lede { font-size:clamp(1.02rem, 1.7vw, 1.18rem); color:var(--muted); max-width:30em; margin:0 0 30px; }
  .lede strong { color:var(--text); font-weight:650; }
  .cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px; }
  .store { display:inline-flex; align-items:center; gap:11px; padding:13px 20px; border-radius:14px; background:var(--text); color:var(--bg); font-weight:700; font-size:.95rem; transition:transform .22s var(--ease), box-shadow .22s; }
  @media (hover: hover) { .store:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.22); } }  .store svg { width:22px; height:22px; }
  .store small { display:block; font-size:.66rem; font-weight:600; opacity:.7; line-height:1; margin-bottom:2px; }
  .store span { line-height:1; }
  .store.ghost { background:var(--surface); color:var(--text); border:1px solid var(--line); }
  .telemetry { display:flex; gap:26px; flex-wrap:wrap; }
  .tstat .n { font-family:var(--mono); font-size:1.35rem; font-weight:600; letter-spacing:-.01em; color:var(--text); }
  .tstat .n .u { font-size:.8rem; color:var(--teal); }
  .tstat .l { font-size:.78rem; color:var(--faint); letter-spacing:.02em; }

  /* ===== PHONE ===== */
  .phone-stage { display:grid; place-items:center; }
  .phone { position:relative; width:300px; aspect-ratio:300 / 620; border-radius:44px; padding:12px; background:linear-gradient(160deg, #1c2c3a, #0b1622); box-shadow:0 40px 90px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.05), inset 0 0 0 2px rgba(255,255,255,.04); }
  @media (prefers-color-scheme: light) { .phone { background:linear-gradient(160deg, #2a3947, #16232f); } }
  :root[data-theme="light"] .phone { background:linear-gradient(160deg, #2a3947, #16232f); }
  :root[data-theme="dark"] .phone { background:linear-gradient(160deg, #1c2c3a, #0b1622); }
  .phone::before { content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:116px; height:26px; border-radius:999px; background:#050d15; z-index:8; }
  .screen-frame { position:relative; width:100%; height:100%; border-radius:33px; overflow:hidden; background:var(--bg-2); }
  .screen { position:absolute; inset:0; opacity:0; transform:scale(1.02); transition:opacity .55s var(--ease), transform .55s var(--ease); display:flex; flex-direction:column; }
  .screen.is-active { opacity:1; transform:scale(1); }
  .sbar { display:flex; justify-content:space-between; align-items:center; padding:16px 20px 8px; font-family:var(--mono); font-size:.72rem; color:var(--text); }
  .sbar .dots { display:flex; gap:4px; align-items:center; color:var(--muted); }
  .sbar .dots b { width:4px; height:4px; border-radius:50%; background:currentColor; display:inline-block; }

  .mini { position:relative; flex:1; margin:4px 0 0; overflow:hidden; background:radial-gradient(120% 90% at 30% 10%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 55%), var(--surface-2); }
  .mini.sat { background:linear-gradient(160deg, #22432f, #12303f); }
  .roads { position:absolute; inset:0; }
  .roads span { position:absolute; background:var(--map-ink); }
  .roads .h { height:2px; left:-10%; right:-10%; }
  .roads .v { width:2px; top:-10%; bottom:-10%; }

  .pin { position:absolute; transform:translate(-50%, -100%); display:grid; place-items:center; z-index:4; }
  .pin .av { width:30px; height:30px; border-radius:50% 50% 50% 3px; transform:rotate(45deg); display:grid; place-items:center; color:#fff; font-weight:800; font-size:.74rem; border:2px solid var(--surface); box-shadow:0 6px 14px rgba(0,0,0,.3); }
  .pin .av span { transform:rotate(-45deg); }
  .pin.p-teal .av { background:linear-gradient(150deg, var(--teal-2), var(--teal)); }
  .pin.p-blue .av { background:linear-gradient(150deg, #56a8ff, var(--blue)); }
  .pin.p-amber .av { background:linear-gradient(150deg, #ffc24d, var(--amber)); }
  .pin .ring { position:absolute; top:6px; left:50%; transform:translateX(-50%); width:30px; height:30px; border-radius:50%; border:2px solid var(--teal-2); animation:ping 2.6s ease-out infinite; }

  /* saved-point marker (round + glyph) */
  .spin { position:absolute; transform:translate(-50%,-50%); width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; border:2px solid var(--surface); box-shadow:0 4px 10px rgba(0,0,0,.3); z-index:4; }
  .spin svg { width:13px; height:13px; }

  .zone { position:absolute; border-radius:40% 55% 48% 52%; z-index:2; border:2px dashed color-mix(in srgb, var(--teal) 70%, transparent); background:color-mix(in srgb, var(--teal) 12%, transparent); animation:breathe 5s ease-in-out infinite; }

  .toast { position:absolute; left:12px; right:12px; top:14px; z-index:6; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 12px; display:flex; gap:10px; align-items:center; box-shadow:0 12px 26px rgba(0,0,0,.2); }
  .toast .ic { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; color:#fff; }
  .toast .tx { font-size:.74rem; line-height:1.35; }
  .toast .tx b { display:block; font-size:.8rem; }
  .toast .tx .mono { color:var(--muted); font-size:.68rem; }

  .card { margin:0 10px 12px; padding:12px; border-radius:16px; z-index:6; background:var(--surface); border:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.08); }
  .card .row { display:flex; align-items:center; gap:10px; }
  .card .who { display:flex; flex-direction:column; min-width:0; }
  .card .who b { font-size:.86rem; }
  .card .who .mono { font-size:.66rem; color:var(--muted); }
  .card .fresh { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.66rem; color:var(--teal); }
  .card .fresh i { width:7px; height:7px; border-radius:50%; background:var(--teal-2); box-shadow:0 0 8px var(--teal-2); }
  .card .acts { display:flex; gap:8px; margin-top:11px; }
  .card .acts button { flex:1; border:0; border-radius:11px; padding:9px 0; font-weight:700; font-size:.78rem; font-family:var(--sans); cursor:default; }
  .card .acts .here { background:color-mix(in srgb, var(--teal) 18%, transparent); color:var(--teal-ink); }
  .card .acts .sos { background:var(--sos); color:#fff; }

  /* routes */
  .modeseg { display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:11px; padding:4px; }
  .modeseg button { flex:1; border:0; background:transparent; border-radius:8px; padding:7px 0; font-family:var(--sans); font-weight:700; font-size:.74rem; color:var(--muted); cursor:default; }
  .modeseg button.on { background:var(--teal); color:#fff; }
  .eta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; font-family:var(--mono); font-size:.72rem; color:var(--text); }
  .eta .amber { color:var(--amber); }

  /* SOS */
  .sos-screen { background:radial-gradient(120% 80% at 50% 40%, color-mix(in srgb, var(--sos) 22%, var(--bg-2)), var(--bg-2)); }
  .sos-core { flex:1; display:grid; place-items:center; position:relative; }
  .sos-btn { width:128px; height:128px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 35%, #ff6b78, var(--sos)); color:#fff; font-weight:900; font-size:1.5rem; letter-spacing:.1em; box-shadow:0 0 0 0 color-mix(in srgb, var(--sos) 60%, transparent); animation:sosbreathe 1.9s ease-out infinite; z-index:3; }
  .sos-live { position:absolute; top:20px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:#fff; background:var(--sos); padding:5px 12px; border-radius:999px; display:inline-flex; gap:8px; align-items:center; }
  .sos-live i { width:7px; height:7px; border-radius:50%; background:#fff; animation:blink 1s steps(1) infinite; }
  .sos-meta { padding:0 16px 18px; text-align:center; }
  .sos-meta .t { font-family:var(--mono); font-size:1.5rem; font-weight:600; }
  .sos-meta .s { font-size:.78rem; color:var(--muted); }

  /* audio waveform */
  .eq { display:flex; gap:4px; align-items:center; height:44px; }
  .eq i { width:5px; height:26%; border-radius:3px; background:#fff; animation:eqbar 1.1s ease-in-out infinite; }
  .audio-card { margin:0 12px 16px; padding:12px 14px; border-radius:16px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; gap:12px; }
  .audio-card .mic { width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--sos); color:#fff; }
  .audio-card .eq i { background:var(--sos); }
  .audio-card .lbl { font-size:.72rem; }
  .audio-card .lbl b { display:block; font-size:.82rem; }
  .audio-card .lbl .mono { color:var(--muted); font-size:.66rem; }
  .mic-badge { position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:.68rem; font-weight:700; color:var(--sos); box-shadow:0 8px 18px rgba(0,0,0,.18); white-space:nowrap; }
  .mic-badge .eq { height:16px; } .mic-badge .eq i { width:3px; background:var(--sos); }

  /* lock screen / live activity */
  .lockscreen { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; padding:20px 14px; background:linear-gradient(180deg, #0a1a2b 0%, #12314a 55%, #0a1a2b 100%); color:#fff; }
  .di { display:inline-flex; align-items:center; gap:8px; background:#000; color:#fff; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; padding:6px 14px; border-radius:999px; margin-bottom:26px; }
  .di i { width:8px; height:8px; border-radius:50%; background:var(--sos); box-shadow:0 0 8px var(--sos); animation:blink 1.1s steps(1) infinite; }
  .di b { color:var(--sos); font-weight:700; }
  .ls-time { font-size:3rem; font-weight:300; line-height:1; letter-spacing:.02em; }
  .ls-date { font-size:.8rem; opacity:.75; margin:6px 0 auto; }
  .la-banner { width:100%; margin-top:auto; background:rgba(255,255,255,.1); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:12px; display:flex; gap:11px; align-items:center; }
  .la-banner .lic { width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--sos); color:#fff; }
  .la-banner .lt b { display:block; font-size:.82rem; }
  .la-banner .lt .mono { font-size:.66rem; opacity:.85; }

  /* history */
  .hist { flex:1; padding:6px 16px 16px; display:flex; flex-direction:column; }
  .htrace { height:92px; border-radius:14px; margin-bottom:12px; position:relative; overflow:hidden; background:var(--surface-2); border:1px solid var(--line-soft); }
  .titem { display:grid; grid-template-columns:18px 1fr; gap:10px; padding:7px 0; position:relative; }
  .titem::before { content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--line); }
  .titem .d { width:12px; height:12px; border-radius:50%; background:var(--teal); border:2px solid var(--surface); z-index:1; margin-top:3px; }
  .titem.b .d { background:var(--blue); } .titem.a .d { background:var(--amber); }
  .titem .tt b { font-size:.8rem; } .titem .tt .mono { display:block; font-size:.66rem; color:var(--muted); }

  /* my circle list */
  .listwrap { flex:1; padding:6px 12px 12px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
  .lhead { font-weight:800; font-size:.98rem; padding:6px 4px 2px; }
  .prow { display:flex; align-items:center; gap:10px; padding:9px; border-radius:14px; background:var(--surface); border:1px solid var(--line-soft); }
  .prow .who { display:flex; flex-direction:column; min-width:0; }
  .prow .who b { font-size:.8rem; }
  .prow .who .mono { font-size:.62rem; color:var(--muted); }
  .toggles { margin-left:auto; display:flex; gap:4px; }
  .tog { font-family:var(--mono); font-size:.56rem; letter-spacing:.03em; padding:3px 6px; border-radius:6px; background:var(--surface-2); color:var(--faint); border:1px solid var(--line-soft); }
  .tog.on { background:color-mix(in srgb, var(--teal) 18%, transparent); color:var(--teal-ink); border-color:transparent; }
  .tog.sos.on { background:color-mix(in srgb, var(--sos) 16%, transparent); color:var(--sos); }

  /* widget / home screen */
  .homescreen { flex:1; padding:16px 16px 14px; display:flex; flex-direction:column; background:linear-gradient(180deg, color-mix(in srgb, var(--teal) 26%, #0c2233), color-mix(in srgb, var(--blue) 20%, #0c2233)); }
  .hs-time { color:#fff; text-align:center; font-size:2.1rem; font-weight:300; margin-bottom:16px; }
  .widget-tile { background:rgba(255,255,255,.94); color:#0C1A28; border-radius:18px; padding:12px; box-shadow:0 10px 24px rgba(0,0,0,.25); }
  .wt-head { display:flex; align-items:center; gap:7px; font-size:.68rem; font-weight:800; color:#0B4A45; margin-bottom:9px; }
  .wt-head .dot { width:14px; height:14px; border-radius:5px; background:linear-gradient(150deg, #35D6C8, #159C90); }
  .wt-body { display:flex; align-items:center; gap:10px; }
  .wt-body .who { display:flex; flex-direction:column; }
  .wt-body .who b { font-size:.82rem; } .wt-body .who .mono { font-size:.62rem; color:#57707A; }
  .wt-map { margin-left:auto; width:56px; height:46px; border-radius:10px; background:radial-gradient(120% 120% at 30% 20%, #cdeee9, #a9d9d2); position:relative; overflow:hidden; }
  .wt-map i { position:absolute; left:52%; top:44%; width:12px; height:12px; border-radius:50% 50% 50% 2px; transform:translate(-50%,-100%) rotate(45deg); background:#E12A3B; }
  .icongrid { margin-top:16px; display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
  .icongrid i { aspect-ratio:1; border-radius:13px; background:rgba(255,255,255,.16); }
  .dock { margin-top:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; background:rgba(255,255,255,.14); border-radius:18px; padding:10px; }
  .dock i { aspect-ratio:1; border-radius:12px; background:rgba(255,255,255,.22); }

  /* settings */
  .setwrap { flex:1; padding:6px 12px 14px; display:flex; flex-direction:column; gap:8px; }
  .setrow { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px; border-radius:13px; background:var(--surface); border:1px solid var(--line-soft); font-size:.82rem; font-weight:600; }
  .setrow .mono { font-weight:500; }
  .segmini { display:flex; gap:3px; background:var(--surface-2); border-radius:8px; padding:3px; }
  .segmini b { font-size:.66rem; font-weight:700; padding:4px 9px; border-radius:6px; color:var(--muted); }
  .segmini b.on { background:var(--teal); color:#fff; }
  .switch { width:38px; height:22px; border-radius:999px; background:var(--teal); position:relative; flex:none; }
  .switch::after { content:""; position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); }
  .switch.off { background:var(--line); } .switch.off::after { right:auto; left:2px; }

  /* saved places list peek */
  .places { position:absolute; left:12px; right:12px; bottom:12px; z-index:6; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow:0 -6px 20px rgba(0,0,0,.1); }
  .plrow { display:flex; align-items:center; gap:9px; padding:6px 4px; }
  .plrow .pic { width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; }
  .plrow .pic svg { width:13px; height:13px; }
  .plrow b { font-size:.78rem; } .plrow .mono { margin-left:auto; font-size:.62rem; color:var(--muted); }

  /* trips cards */
  .tcard { display:flex; align-items:center; gap:11px; padding:12px; border-radius:16px; background:var(--surface); border:1px solid var(--line); }
  .tcard + .tcard { margin-top:10px; }
  .tcard .tprof { width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--blue) 16%, transparent); color:var(--blue); }
  .tcard .tinfo { min-width:0; } .tcard .tinfo b { font-size:.86rem; } .tcard .tinfo .mono { display:block; font-size:.64rem; color:var(--muted); }
  .tbadge { font-size:.58rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border-radius:6px; background:color-mix(in srgb, var(--sos) 14%, transparent); color:var(--sos); margin-top:4px; display:inline-block; }
  .tagain { margin-left:auto; flex:none; font-size:.72rem; font-weight:700; color:var(--teal-ink); background:color-mix(in srgb, var(--teal) 16%, transparent); border-radius:10px; padding:8px 12px; }

  /* route line reused */
  .route { position:absolute; inset:0; z-index:3; pointer-events:none; }
  .route path { fill:none; stroke:var(--blue); stroke-width:4; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420; animation:draw 3.6s var(--ease) infinite; filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--blue) 50%, transparent)); }

  /* ===== SECTION HEADS ===== */
  .shead { text-align:center; max-width:46rem; margin:0 auto 40px; }
  .shead .ey { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); display:inline-block; margin-bottom:12px; }
  .shead h2 { font-size:clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing:-.02em; margin:0 0 12px; text-wrap:balance; }
  .shead p { color:var(--muted); margin:0; }

  /* ===== STORY ===== */
  .story { padding:56px 0 20px; }
  .story-grid { display:grid; grid-template-columns:1fr 360px; gap:64px; align-items:start; }
  .story-steps { display:flex; flex-direction:column; }
  .step { min-height:88vh; display:flex; flex-direction:column; justify-content:center; opacity:.32; transition:opacity .45s var(--ease); border-left:2px solid var(--line-soft); padding-left:26px; }
  .step.is-active { opacity:1; border-left-color:var(--teal); }
  .step .kbadge { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
  .step .kbadge b { width:22px; height:1px; background:var(--teal); display:inline-block; }
  .step h3 { font-size:clamp(1.5rem, 2.6vw, 2rem); letter-spacing:-.02em; margin:0 0 12px; }
  .step p { color:var(--muted); margin:0; max-width:27em; }
  .step p strong { color:var(--text); font-weight:650; }
  .ptag { display:inline-block; margin-top:16px; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius:999px; padding:3px 10px; }
  .story-stage { position:sticky; top:84px; }

  /* ===== FEATURE BLOCKS ===== */
  .fsection { padding:64px 0; }
  .fsection.alt { background:var(--bg-2); }
  .fblock { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
  .fblock + .fblock { margin-top:64px; }
  .fblock .fvisual { display:grid; place-items:center; }
  .fblock.rev .fvisual { order:2; }
  .fbody .kbadge { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
  .fbody .kbadge b { width:22px; height:1px; background:var(--teal); display:inline-block; }
  .fbody h3 { font-size:clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing:-.02em; margin:0 0 12px; text-wrap:balance; }
  .fbody p { color:var(--muted); margin:0 0 14px; max-width:34em; }
  .fbody p strong { color:var(--text); font-weight:650; }
  .fbody ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
  .fbody li { display:flex; gap:10px; align-items:flex-start; font-size:.94rem; color:var(--text); }
  .fbody li svg { width:18px; height:18px; flex:none; margin-top:3px; color:var(--teal); }
  .fbody li strong { font-weight:650; }
  .fbody .ptag { color:var(--amber); }

  /* mock card frames used inside feature blocks */
  .mockphone { width:264px; }
  .mockcard { width:300px; max-width:100%; padding:16px; border-radius:24px; background:var(--surface); border:1px solid var(--line); box-shadow:0 30px 60px rgba(0,0,0,.16); }
  .mocklock { width:264px; border-radius:30px; padding:20px 16px; background:linear-gradient(180deg, #0a1a2b, #12314a 60%, #0a1a2b); color:#fff; box-shadow:0 30px 60px rgba(0,0,0,.3); display:flex; flex-direction:column; align-items:center; min-height:360px; }
  .mockhome { width:220px; height:150px; border-radius:22px; overflow:hidden; position:relative; padding:14px; background:linear-gradient(180deg, color-mix(in srgb, var(--teal) 28%, #0c2233), color-mix(in srgb, var(--blue) 22%, #0c2233)); box-shadow:0 24px 50px rgba(0,0,0,.25); }

  /* ===== KIDS ===== */
  .kids { padding:70px 0 40px; }
  .kids-head { text-align:center; max-width:44rem; margin:0 auto 44px; }
  .kbadge2 { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-ink); background:color-mix(in srgb, var(--teal) 15%, transparent); border:1px solid color-mix(in srgb, var(--teal) 30%, transparent); padding:6px 12px; border-radius:999px; margin-bottom:18px; }
  .kbadge2 svg { width:15px; height:15px; }
  .kids-head h2 { font-size:clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing:-.02em; margin:0 0 12px; text-wrap:balance; }
  .kids-head p { color:var(--muted); margin:0; }
  .kids-head p strong { color:var(--text); font-weight:650; }
  .kids-phones { display:flex; justify-content:center; align-items:center; gap:30px; flex-wrap:wrap; margin-bottom:44px; }
  .kids-phones .phone { width:262px; }
  .tilt-l { transform:rotate(-4deg); } .tilt-r { transform:rotate(4deg); }
  .kids-cap { text-align:center; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:12px; }

  .child { flex:1; display:flex; flex-direction:column; align-items:center; padding:24px 18px 20px; background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--teal) 16%, var(--bg-2)), var(--bg-2)); }
  .child-hi { font-size:1.15rem; font-weight:800; margin-bottom:22px; }
  .child-sos { width:120px; height:120px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 35%, #ff6b78, var(--sos)); color:#fff; font-weight:900; font-size:1.4rem; letter-spacing:.1em; box-shadow:0 0 0 0 color-mix(in srgb, var(--sos) 55%, transparent); animation:sosbreathe 2.1s ease-out infinite; }
  .child-here { margin-top:20px; border:0; border-radius:14px; padding:12px 26px; font-family:var(--sans); font-weight:800; font-size:.9rem; background:color-mix(in srgb, var(--teal) 20%, transparent); color:var(--teal-ink); }
  .child-fam { margin-top:auto; display:flex; gap:16px; padding-top:20px; }
  .child-fam .cf { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.64rem; color:var(--muted); }
  .child-fam .cf .av2 { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.9rem; }
  .cf.m .av2 { background:linear-gradient(150deg, var(--teal-2), var(--teal)); }
  .cf.d .av2 { background:linear-gradient(150deg, #56a8ff, var(--blue)); }
  .cf.g .av2 { background:linear-gradient(150deg, #ffc24d, var(--amber)); }

  .child-set { flex:1; padding:16px 14px; display:flex; flex-direction:column; gap:9px; }
  .fam-row { display:flex; align-items:center; gap:10px; padding:10px; border-radius:13px; background:var(--surface); border:1px solid var(--line-soft); }
  .fam-row .av2 { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.78rem; }
  .fam-row b { font-size:.82rem; }
  .fam-row .x { margin-left:auto; width:22px; height:22px; border-radius:7px; background:var(--surface-2); color:var(--muted); display:grid; place-items:center; font-size:.8rem; }
  .fam-add { margin-top:6px; border:1.5px dashed var(--line); background:transparent; color:var(--teal-ink); border-radius:13px; padding:11px; font-family:var(--sans); font-weight:700; font-size:.8rem; }

  .safety { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
  .scard { padding:22px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); }
  .scard .ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px; background:color-mix(in srgb, var(--teal) 15%, transparent); color:var(--teal-ink); }
  .scard .ic svg { width:21px; height:21px; }
  .scard h4 { margin:0 0 7px; font-size:1rem; }
  .scard p { margin:0; color:var(--muted); font-size:.88rem; }

  /* note */
  .note { margin:40px 0 70px; padding:26px 28px; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface); display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
  .note .ic { width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--teal) 16%, transparent); color:var(--teal-ink); }
  .note h4 { margin:0 0 6px; font-size:1.02rem; }
  .note p { margin:0; color:var(--muted); font-size:.92rem; max-width:70ch; }
  .note .body { flex:1; min-width:240px; }
  .note code { font-family:var(--mono); font-size:.85em; background:var(--surface-2); padding:1px 5px; border-radius:5px; }

  /* reveal + load */
  .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in { opacity:1; transform:none; }
  .rise { opacity:0; transform:translateY(18px); animation:rise .9s var(--ease) forwards; }
  .d1 { animation-delay:.05s; } .d2 { animation-delay:.16s; } .d3 { animation-delay:.28s; } .d4 { animation-delay:.4s; }

  @keyframes rise { to { opacity:1; transform:translateY(0); } }
  @keyframes underline { to { transform:scaleX(1); } }
  @keyframes livepulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--teal-2) 60%, transparent); } 70%,100% { box-shadow:0 0 0 10px transparent; } }
  @keyframes ping { 0% { transform:translateX(-50%) scale(.6); opacity:.9; } 100% { transform:translateX(-50%) scale(2.3); opacity:0; } }
  @keyframes breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
  @keyframes sosbreathe { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--sos) 55%, transparent); } 70%,100% { box-shadow:0 0 0 34px transparent; } }
  @keyframes blink { 50% { opacity:.25; } }
  @keyframes draw { 0% { stroke-dashoffset:420; } 55%,100% { stroke-dashoffset:0; } }
  @keyframes sweep { to { transform:rotate(360deg); } }
  @keyframes drift-a { 0%,100% { transform:translate(-50%,-100%); } 50% { transform:translate(-50%, -108%); } }
  @keyframes bgdraw { to { stroke-dashoffset:0; } }
  @keyframes eqbar { 0%,100% { height:22%; } 50% { height:100%; } }

  .sweep { position:absolute; width:240px; height:240px; left:62%; top:30%; transform-origin:center; border-radius:50%; background:conic-gradient(from 0deg, transparent 0deg, var(--glow) 34deg, transparent 60deg); animation:sweep 6s linear infinite; z-index:-2; opacity:.8; }
  .bg-route { stroke-dasharray:900; stroke-dashoffset:900; animation:bgdraw 5s var(--ease) .4s forwards; }

  @media (max-width: 900px) {
    .hero-grid { grid-template-columns:1fr; gap:30px; }
    .phone-stage { order:-1; }
    /* mobile scrollytelling: pin the phone at the top so every screen stays
       visible while you read the captions scrolling beneath it (it morphs
       per step, same as desktop but vertical). */
    .story-grid { display:flex; flex-direction:column; gap:0; }
    .story-stage { order:-1; position:sticky; top:66px; z-index:5; align-self:stretch; display:grid; place-items:center; background:var(--bg); padding:12px 0 16px; margin:0; box-shadow:0 12px 14px -10px rgba(0,0,0,.16); }
    .story-stage .phone { width:172px; }
    .step { min-height:58vh; padding:5vh 0 0; border-left:0; justify-content:flex-start; }
    .step .kbadge b { display:none; }
    .fblock { grid-template-columns:1fr; gap:26px; }
    .fblock.rev .fvisual { order:0; }
    .safety { grid-template-columns:1fr; }
    .topnav a:not(.proto-tag) { display:none; }
  }
  @media (max-width: 520px) { .wrap { padding:0 18px; } .telemetry { gap:18px; } .kids-phones .phone { width:230px; } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
    .route path, .bg-route { stroke-dashoffset:0; }
    .rise, .reveal { opacity:1; transform:none; }
    h1 .accent::after { transform:scaleX(1); }
    .eq i { height:60%; }
  }

  /* ============================================================
     ADDED FOR REAL SITE: language switcher, burger, mobile menu, footer
     ============================================================ */

  /* --- language switcher (desktop dropdown) --- */
  .lang-switch { position:relative; }
  .lang-btn { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 12px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-family:var(--sans); font-weight:700; font-size:.82rem; cursor:pointer; transition:border-color .2s, transform .2s var(--ease); }
  @media (hover: hover) { .lang-btn:hover { border-color:var(--teal); transform:translateY(-2px); } }  .lang-btn svg { width:16px; height:16px; flex:none; }  .lang-btn .globe { width:16px; height:16px; }
  .lang-btn .chev { width:13px; height:13px; transition:transform .2s; }
  .lang-switch.open .lang-btn .chev { transform:rotate(180deg); }
  .lang-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:172px; list-style:none; margin:0; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.2); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .2s, visibility .2s; z-index:80; }
  .lang-switch.open .lang-menu { opacity:1; visibility:visible; transform:none; }
  .lang-menu li { margin:0; }
  .lang-menu button { display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--text); font-family:var(--sans); font-weight:600; font-size:.86rem; padding:9px 11px; border-radius:9px; cursor:pointer; }
  @media (hover: hover) { .lang-menu button:hover { background:var(--surface-2); } }  .lang-menu button.is-active { color:var(--teal-ink); background:color-mix(in srgb, var(--teal) 14%, transparent); font-weight:700; }

  /* --- burger --- */
  .burger { display:none; flex-direction:column; gap:5px; width:40px; height:40px; border:1px solid var(--line); border-radius:11px; background:var(--surface); cursor:pointer; align-items:center; justify-content:center; touch-action:manipulation; }
  .burger span { width:18px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
  .burger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .burger.active span:nth-child(2) { opacity:0; }
  .burger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* --- mobile menu --- */
  /* Меню на ВСЮ высоту под шапкой (top:64px; bottom:0) — перекрывает фон целиком, поэтому
     скролл-лок не нужен (см. main.js). Длинный список скроллится внутри; overscroll-behavior
     не даёт прокрутке протечь на фон. */
  .mobile-menu { position:fixed; left:0; right:0; top:64px; bottom:0; background:var(--bg); border-bottom:1px solid var(--line); padding:14px 24px 24px; display:flex; flex-direction:column; gap:2px; transform:translateY(-130%); transition:transform .35s var(--ease); z-index:55; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .mobile-menu.active { transform:none; }
  .mobile-menu a { padding:13px 4px; font-weight:600; color:var(--text); border-bottom:1px solid var(--line-soft); }
  .mobile-menu .mm-download { margin-top:12px; border-bottom:0; background:var(--teal); color:#fff; text-align:center; border-radius:12px; padding:13px; font-weight:800; }
  .mm-langs { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .mm-langs button { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:9px; padding:8px 12px; font-family:var(--sans); font-weight:600; font-size:.84rem; cursor:pointer; }
  .mm-langs button.is-active { border-color:var(--teal); color:var(--teal-ink); }

  /* --- footer --- */
  .site-footer { border-top:1px solid var(--line-soft); background:var(--bg-2); padding:56px 0 30px; margin-top:20px; }
  .footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; }
  .footer-brand .brand { margin-bottom:14px; }
  .footer-brand p { color:var(--muted); max-width:36ch; font-size:.92rem; margin:0; }
  .footer-col h4 { font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin:0 0 14px; font-family:var(--sans); font-weight:700; }
  .footer-col a { display:block; color:var(--muted); padding:5px 0; font-size:.92rem; transition:color .2s; }
  @media (hover: hover) { .footer-col a:hover { color:var(--text); } }  .footer-bottom { margin-top:40px; padding-top:20px; border-top:1px solid var(--line-soft); color:var(--faint); font-size:.84rem; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
  .footer-bottom .brand-logo { width:26px; height:26px; }

  /* --- responsive: show burger, hide desktop nav/lang --- */
  @media (max-width: 900px) {
    .topnav .nav-links, .topnav .lang-switch, .topnav .header-download { display:none; }
    .burger { display:flex; }
    .topbar-in { gap:10px; }
    .topnav { gap:10px; }
    .brand { min-width:0; overflow:hidden; }
    .brand-logo, .theme-btn, .burger { flex:0 0 auto; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .footer-brand { grid-column:1 / -1; }
  }
  @media (max-width: 520px) {
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom { justify-content:center; text-align:center; }
  }

  /* ============================================================
     LEGACY CONTENT PAGES (support / privacy / terms / delete-account /
     unsubscribe). They keep their old markup + old class names and only
     swap style.css → home.css. This block (a) bridges the old CSS-variable
     names to the new theme tokens (so inline styles keep working, in light
     AND dark) and (b) restyles the old structural classes to the new look.
     ============================================================ */

  /* (a) old var names → new tokens (theme-aware automatically) */
  :root {
    --white: var(--surface);
    --light-bg: var(--bg-2);
    --gray-100: var(--surface-2);
    --gray-200: var(--line);
    --gray-300: var(--line);
    --gray-500: var(--muted);
    --gray-700: var(--muted);
    --gray-900: var(--text);
    --navy: var(--text);
    --navy-light: var(--text);
    --teal-dark: var(--teal-2);
    --teal-light: color-mix(in srgb, var(--teal) 15%, transparent);
    --orange: var(--amber);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,.12);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.16);
    --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px;
    --transition: .25s ease;
  }

  /* (b) container + header (old markup) → new look */
  .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
  .header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line-soft); }
  .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 10px; }
  .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; color: var(--text); letter-spacing: -.01em; }
  .logo img { width: 32px; height: 32px; border-radius: 8px; }
  .logo-text { font-family: var(--display); }
  .header .nav { display: flex; align-items: center; gap: 24px; }
  .header .nav-links { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
  .header .nav-links a { color: var(--muted); font-size: .92rem; font-weight: 600; transition: color .2s; }
  @media (hover: hover) { .header .nav-links a:hover { color: var(--text); } }  .header-download { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 11px; background: var(--teal); color: #fff; font-weight: 700; font-size: .9rem; }
  .header-download svg { width: 17px; height: 17px; }
  @media (hover: hover) { .header-download:hover { background: var(--teal-2); } }  /* Пункт «Карта» в меню — выделен как ОСОБЫЙ вход (живая веб-карта): тиловая
     пилюля + пульсирующая точка «live». Работает в desktop-nav и мобильном меню. */
  .nav-links a.nav-map, .mobile-menu a.nav-map {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--teal) !important; font-weight: 800 !important;
    background: rgba(21,156,144,0.12); padding: 6px 13px; border-radius: 999px;
  }
  .nav-links a.nav-map::before, .mobile-menu a.nav-map::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
    flex-shrink: 0; animation: navMapPulse 1.8s ease-out infinite;
  }
  @media (hover: hover) { .nav-links a.nav-map:hover, .mobile-menu a.nav-map:hover { background: rgba(21,156,144,0.22); color: var(--teal) !important; } }  @keyframes navMapPulse {
    0% { box-shadow: 0 0 0 0 rgba(21,156,144,0.55); }
    70% { box-shadow: 0 0 0 7px rgba(21,156,144,0); }
    100% { box-shadow: 0 0 0 0 rgba(21,156,144,0); }
  }
  @media (prefers-reduced-motion: reduce) { .nav-map::before { animation: none; } }
  /* Текущий пункт меню — видно, где сейчас находишься. Обычный пункт — подчёркнут;
     «Карта» на своей странице — залитая пилюля. */
  .nav-links a.nav-current { color: var(--text) !important; font-weight: 800; position: relative; }
  .nav-links a.nav-current:not(.nav-map)::after {
    content: ''; position: absolute; left: 4px; right: 4px; bottom: -7px; height: 2.5px;
    background: var(--teal); border-radius: 2px;
  }
  .nav-links a.nav-map.nav-current, .mobile-menu a.nav-map.nav-current { background: var(--teal); color: #fff !important; }
  .nav-links a.nav-map.nav-current::before, .mobile-menu a.nav-map.nav-current::before { background: #fff; }
  .lang-switch-mobile { margin-top: 14px; }
  .lang-switch-mobile-label { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
  .lang-switch-mobile-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .lang-switch-mobile-list button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 9px; padding: 8px 12px; font-family: var(--sans); font-weight: 600; font-size: .84rem; cursor: pointer; }
  .lang-switch-mobile-list button.is-active { border-color: var(--teal); color: var(--teal-ink); }
  /* Специфичность: базовое `.mobile-menu a` (0,1,1) перебивало `.mobile-download`
     (0,1,0) → текст «Скачать» красился в var(--text) (тёмный) на legal-страницах.
     Прописываем через `.mobile-menu` (0,2,0), чтобы белый на тиле держался везде. */
  .mobile-menu .mobile-download { margin-top: 12px; border-bottom: 0 !important; background: var(--teal); color: #fff; text-align: center; border-radius: 12px; padding: 13px; font-weight: 800; }
  /* «Карта»-пилюля внизу мобильного меню (над «Скачать»): убрать линию-разделитель
     из базового `.mobile-menu a` (под скруглённой пилюлей смотрится обрезком),
     сжать до ширины содержимого и отделить сверху — выделенный вход, как в navbar. */
  .mobile-menu a.nav-map { border-bottom: 0; margin-top: 10px; align-self: flex-start; }

  @media (max-width: 900px) {
    .header .nav-links, .header .lang-switch, .header .header-download { display: none; }
    .header .burger { display: flex; }
  }

  /* page hero (inner-page banner) */
  .page-header { position: relative; overflow: hidden; padding: 64px 0 40px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 10%, var(--bg)), var(--bg)); border-bottom: 1px solid var(--line-soft); }
  .page-header-decor { display: none; }
  .page-header h1 { font-family: var(--display); font-size: clamp(1.9rem, 5vw, 2.8rem); letter-spacing: -.02em; color: var(--text); margin: 0 0 10px; }
  .page-header p { color: var(--muted); max-width: 40rem; margin: 0 auto; font-size: 1.02rem; }

  /* page content */
  .page-content { padding: 48px 0 70px; }
  .page-content > .container { max-width: 820px; }
  .page-content h2 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.02em; color: var(--text); margin: 0 0 20px; }
  .page-content .container > h2:not(:first-child) { margin-top: 40px; }
  .page-content h3 { font-family: var(--display); font-size: 1.15rem; color: var(--text); margin: 28px 0 10px; }
  .page-content p, .page-content li { color: var(--muted); line-height: 1.7; }
  .page-content p { margin: 0 0 14px; }
  .page-content ul, .page-content ol { margin: 0 0 16px; padding-left: 22px; }
  .page-content li { margin-bottom: 8px; }
  .page-content a:not(.btn) { color: var(--teal); font-weight: 600; }
  .page-content strong { color: var(--text); }

  /* FAQ accordion */
  .faq-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 44px; }
  .faq-item { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
  .faq-question { width: 100%; text-align: left; background: none; border: 0; padding: 18px 20px; font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .faq-arrow { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform var(--transition); }
  .faq-item.active .faq-arrow { transform: rotate(180deg); }
  .faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .faq-item.active .faq-answer { max-height: 600px; }
  .faq-answer p { margin: 0; padding: 0 20px 18px; color: var(--muted); line-height: 1.7; }

  /* buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 12px; font-family: var(--sans); font-weight: 700; font-size: .98rem; cursor: pointer; border: 1.5px solid transparent; transition: transform .2s var(--ease), background .2s, border-color .2s; text-decoration: none; }
  .btn-primary { background: var(--teal); color: #fff; }
  @media (hover: hover) { .btn-primary:hover { background: var(--teal-2); transform: translateY(-2px); } }  .btn-outline { background: transparent; color: var(--text); border-color: var(--line); }
  @media (hover: hover) { .btn-outline:hover { border-color: var(--teal); color: var(--teal-ink); } }
  /* forms + cards */
  .contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; margin-bottom: 34px; }
  .contact-form h2 { margin-top: 0; }
  .form-group { margin-bottom: 16px; }
  .form-group label { display: block; font-size: .84rem; font-weight: 700; color: var(--text); margin-bottom: 7px; }
  .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); font-family: var(--sans); font-size: .98rem; box-sizing: border-box; transition: border-color .2s; }
  .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--teal); }
  .field-error, .form-error { display: block; color: var(--sos); font-size: .82rem; margin-top: 6px; }

  /* warning box (delete-account subscription warning) */
  .warning-box { background: color-mix(in srgb, var(--amber) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius: 16px; padding: 18px 20px; margin: 20px 0; }
  .warning-box h3, .warning-box h4 { color: var(--text); margin: 0 0 8px; font-family: var(--display); }
  .warning-box p { color: var(--muted); margin: 0 0 8px; }
  .warning-box a { color: var(--teal); font-weight: 600; }

  /* footer (old markup) */
  .footer { border-top: 1px solid var(--line-soft); background: var(--bg-2); padding: 54px 0 28px; }
  .footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
  .footer-brand .logo { margin-bottom: 14px; }
  .footer-brand p { color: var(--muted); max-width: 36ch; font-size: .92rem; margin: 0; }
  .footer-title { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 14px; font-family: var(--sans); font-weight: 700; }
  .footer-links { display: flex; flex-direction: column; gap: 9px; }
  .footer-links a { color: var(--muted); font-size: .92rem; transition: color .2s; }
  @media (hover: hover) { .footer-links a:hover { color: var(--text); } }  .footer-bottom { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: .84rem; text-align: center; }
  @media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
  @media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; } }

  /* Header nav collapses to burger earlier (≤1100) so the extra Privacy/Terms
     menu items never overflow the top bar on narrow desktops / long locales. */
  @media (max-width: 1300px) {
    .topnav .nav-links, .topnav .lang-switch, .topnav .header-download,
    .header .nav-links, .header .lang-switch, .header .header-download { display: none; }
    .burger, .header .burger { display: flex; }
    /* Legal-страницы: бургер вне .nav, поэтому .nav с одной видимой кнопкой темы
       повисала по центру (space-between). Толкаем её вправо, вплотную к бургеру —
       как сгруппированы theme+burger внутри .topnav на лендинге. */
    .header .nav { margin-left: auto; }
  }

  /* HEADER FULL-WIDTH: keep the (longer, localized) menu on one line and use
     the whole viewport width so it never wraps/breaks the top bar. */
  .topbar-in, .header-inner { max-width: none; }
  .topnav, .nav-links, .header .nav, .header .nav-links { gap: 18px; }
  .topnav a, .nav-links a, .header .nav-links a, .header-download { white-space: nowrap; }

  /* Download button text/icon must stay white even inside .topnav (whose
     generic `a` rule paints links muted grey). */
  .topnav .header-download, .header .header-download { color: #fff; }
  @media (hover: hover) { .topnav .header-download:hover, .header .header-download:hover { color: #fff; } }