/* ═══════════════════════════════════════════════════════════════════════════
   ЛЕНДИНГ chat.sensever.com — публичная главная для тех, кто ещё не вошёл.

   ВСЁ ПОД `.lnd`, и это не вкусовщина: тот же документ не открывается вместе с
   приложением, но файл лежит рядом с `chat/ui.css`, и однажды кто-нибудь
   подключит оба на одной странице. Ни одного правила на голый тег — только на
   свой класс.

   Палитра взята из приложения (`chat/ui.css`), а не придумана заново: человек
   входит с этой страницы прямо в Chat, и смена цвета на границе читалась бы как
   переход на чужой сайт.
   ═══════════════════════════════════════════════════════════════════════════ */

.lnd{
  --ink:#141916;          /* заголовки и кнопка — цвет .primary приложения      */
  --body:#616964;         /* основной текст                                     */
  --muted:#969b99;        /* подписи                                            */
  --line:#eceeed;
  --line2:#dfe3e0;
  --soft:#f7f8f7;
  --card:#fff;
  --acc:#567148;          /* акцент — цвет .text-link приложения                 */
  --acc-soft:#eef3ea;     /* фон своих сообщений                                */
  --r:14px;
  --maxw:1180px;
  --pad:24px;
  --shadow:0 18px 48px -26px rgba(20,25,22,.32);

  font-family:'Open Sans',system-ui,sans-serif;
  color:var(--body);
  line-height:1.65;
  font-size:15px;
  background:#fff;
  /* СБРОС СОБСТВЕННОГО ОТСТУПА `body`. Класс стоит на самом `body`, а разметку
     страницы браузер по умолчанию отодвигает от краёв окна на 8 пикселей. Общий
     сброс из `chat/ui.css` сюда не подключён (лендинг не тянет стили
     приложения), и без этой строки вся страница лежала в светлой рамке: тёмный
     первый экран не доходил до краёв, а на телефоне это читалось особенно
     заметно — полосы не растянуты во всю ширину. */
  margin:0;
  overflow-x:hidden;      /* слои параллакса шире полосы — горизонтальной прокрутки быть не должно */
}
:is(.lnd-main, .lnd-foot) *{box-sizing:border-box}
:is(.lnd-main, .lnd-foot) img{max-width:100%;display:block}
:is(.lnd-main, .lnd-foot) a{color:inherit;text-decoration:none}
:is(.lnd-main, .lnd-foot) .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
:is(.lnd-main, .lnd-foot) .acc{color:var(--acc)}

/* ── типографика ─────────────────────────────────────────────────────────── */
:is(.lnd-main, .lnd-foot) h1, :is(.lnd-main, .lnd-foot) h2, :is(.lnd-main, .lnd-foot) h3, :is(.lnd-main, .lnd-foot) h4{color:var(--ink);margin:0;font-weight:600;letter-spacing:-.02em}
:is(.lnd-main, .lnd-foot) h1{font-size:clamp(34px,5.4vw,60px);line-height:1.06;letter-spacing:-.035em}
:is(.lnd-main, .lnd-foot) h2{font-size:clamp(26px,3.6vw,42px);line-height:1.12;letter-spacing:-.03em}
:is(.lnd-main, .lnd-foot) h3{font-size:19px;line-height:1.35}
:is(.lnd-main, .lnd-foot) p{margin:0}
:is(.lnd-main, .lnd-foot) .eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acc)}
:is(.lnd-main, .lnd-foot) .lead{font-size:clamp(15px,1.5vw,17.5px);color:var(--body);margin-top:20px;max-width:56ch}

/* ── кнопки ──────────────────────────────────────────────────────────────── */
:is(.lnd-main, .lnd-foot) .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:14px;border-radius:11px;padding:13px 22px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;transition:background .18s,border-color .18s,transform .18s,color .18s}
:is(.lnd-main, .lnd-foot) .btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
:is(.lnd-main, .lnd-foot) .btn-primary:hover{background:#303a33;border-color:#303a33}
:is(.lnd-main, .lnd-foot) .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
:is(.lnd-main, .lnd-foot) .btn-ghost:hover{background:var(--soft);border-color:#c9d0cb}
:is(.lnd-main, .lnd-foot) .btn-lg{padding:15px 26px;font-size:15px;border-radius:12px}
/* на тёмном фоне цвета меняются местами */
:is(.lnd-main, .lnd-foot) .on-dark .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
:is(.lnd-main, .lnd-foot) .on-dark .btn-primary:hover{background:#e7ebe7;border-color:#e7ebe7}
:is(.lnd-main, .lnd-foot) .on-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
:is(.lnd-main, .lnd-foot) .on-dark .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
:is(.lnd-main, .lnd-foot) .btn:focus-visible, :is(.lnd-main, .lnd-foot) a:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:11px}
:is(.lnd-main, .lnd-foot) .on-dark a:focus-visible, :is(.lnd-main, .lnd-foot) .on-dark .btn:focus-visible{outline-color:#fff}

/* ═══ ШАПКА ═══
   МАТОВОЕ СТЕКЛО НА ВСЮ ШИРИНУ — как в шапке лендинга sensever.com: тот же
   полупрозрачный белый с размытием под ним, та же тонкая черта снизу, те же
   скруглённые «таблетки» кнопок. Человек приходит сюда с основного сайта, и
   шапка не должна выглядеть чужой.

   СТЕКЛО СТОИТ ВСЕГДА, а не появляется после прокрутки. Прежде шапка была
   прозрачной над тёмным первым экраном и светлела при отъезде — два разных
   облика у одной полосы. `saturate` вместе с `blur` и даёт то самое «жидкое»
   впечатление: цвета под стеклом не сереют, а наливаются.

   ЗАПАСНОЙ ЦВЕТ НЕПРОЗРАЧНЕЕ: там, где `backdrop-filter` не поддержан, за
   стеклом просвечивал бы текст страницы. */
/* Прокрутили — под стеклом появляется мягкая тень: полоса отделяется от
   содержимого, которое под неё заезжает. Всё, что делает класс `is-stuck`. */
/* «Таблетки», как на sensever.com */

/* ── ВЫБОР ЯЗЫКА ──
   Список — обычные ссылки, и без скрипта он просто всегда раскрыт (правило
   `.lnd:not(.is-armed)` ниже): язык меняется даже с выключенным JS. */
/* Список языков — общий компонент проекта: /chat/language-picker.css */

/* ═══ ПЕРВЫЙ ЭКРАН ═══ */
.lnd-hero:where(.lnd-main, .lnd-main *){position:relative;overflow:hidden;background:#0d1210;color:#fff;
  /* минус шапка: она липкая и место в потоке занимает */
  min-height:calc(100dvh - 76px);display:flex;align-items:center;
  padding:clamp(48px,9vh,96px) 0}
/* ТРИ ФОНОВЫХ СЛОЯ ЕДУТ С РАЗНОЙ СКОРОСТЬЮ — этим и создаётся глубина.
   Каждому дан запас по высоте: слой сдвигается, и без запаса на краю показалась
   бы полоса подложки ровно на величину сдвига. */
.lnd-hero__grad:where(.lnd-main, .lnd-main *){position:absolute;inset:-15% 0;z-index:0;will-change:transform;
  background:
    radial-gradient(70% 60% at 78% 22%,rgba(86,113,72,.34),transparent 70%),
    radial-gradient(55% 55% at 12% 82%,rgba(38,60,44,.5),transparent 72%),
    linear-gradient(165deg,#131b17,#0b100d 60%,#0d1210)}
/* Сетка — то, по чему движение вообще видно. Ровную заливку можно двигать
   сколько угодно: без повторяющейся черты глазу не за что зацепиться. */
.lnd-hero__grid:where(.lnd-main, .lnd-main *){position:absolute;inset:-25% 0;z-index:1;pointer-events:none;will-change:transform;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 72px);
  -webkit-mask-image:radial-gradient(75% 70% at 50% 45%,#000,transparent 100%);
  mask-image:radial-gradient(75% 70% at 50% 45%,#000,transparent 100%)}
/* Пятно света идёт быстрее и в другую сторону — иначе слои двигались бы как один.
   Нарисовано градиентом, а не размытием: `filter:blur` на пятне в 800 пикселей
   браузер пересчитывает каждый кадр, а прокрутка — ровно то место, где этого
   делать нельзя. */
.lnd-hero__glow:where(.lnd-main, .lnd-main *){position:absolute;z-index:2;width:min(90vw,900px);height:min(90vw,900px);
  right:-14%;top:-28%;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(circle,rgba(120,160,100,.24) 0%,transparent 66%)}
.lnd-hero__in:where(.lnd-main, .lnd-main *){position:relative;z-index:3;display:grid;gap:clamp(32px,5vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:center}
.lnd-hero h1:where(.lnd-main, .lnd-main *){color:#fff;max-width:16ch}
.lnd-hero .eyebrow:where(.lnd-main, .lnd-main *){color:rgba(255,255,255,.62)}
.lnd-hero .lead:where(.lnd-main, .lnd-main *){color:rgba(255,255,255,.76);max-width:44ch}
.lnd-hero .cta-row:where(.lnd-main, .lnd-main *){display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.lnd-hero__note:where(.lnd-main, .lnd-main *){margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.5)}
.lnd-hero__copy>*:where(.lnd-main, .lnd-main *){ /* появление первого экрана — без наблюдателя, сразу при загрузке */
  animation:lnd-up .7s cubic-bezier(.2,.7,.2,1) both}
.lnd-hero__copy>*:nth-child(2):where(.lnd-main, .lnd-main *){animation-delay:.08s}
.lnd-hero__copy>*:nth-child(3):where(.lnd-main, .lnd-main *){animation-delay:.16s}
.lnd-hero__copy>*:nth-child(4):where(.lnd-main, .lnd-main *){animation-delay:.24s}
.lnd-hero__copy>*:nth-child(5):where(.lnd-main, .lnd-main *){animation-delay:.32s}
@keyframes lnd-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media(max-width:980px){
  .lnd-hero__in:where(.lnd-main, .lnd-main *){grid-template-columns:minmax(0,1fr);gap:40px}
  .lnd-hero:where(.lnd-main, .lnd-main *){min-height:0}
  .lnd-hero h1:where(.lnd-main, .lnd-main *){max-width:none}
}

/* ═══ ПОЛОСЫ С ПАРАЛЛАКСОМ ═══
   Единица показа — полоса: свой фон, своё пятно света, свой рисунок и свой макет
   интерфейса. Слои едут с разной скоростью (см. landing.js), текст и картинка
   проявляются при подходе к окну. */
.lnd-band:where(.lnd-main, .lnd-main *){position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;min-height:clamp(520px,82vh,840px);
  padding:clamp(56px,8vh,104px) 0}
.lnd-band__bg:where(.lnd-main, .lnd-main *){position:absolute;left:0;right:0;top:-12%;height:124%;z-index:0;
  background:var(--bnd-bg);will-change:transform}
.lnd-band__glow:where(.lnd-main, .lnd-main *){position:absolute;z-index:1;width:min(80vw,860px);height:min(80vw,860px);
  top:-26%;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(circle,var(--bnd-glow) 0%,transparent 68%)}
.lnd-band--left .lnd-band__glow:where(.lnd-main, .lnd-main *){left:-16%}
.lnd-band--right .lnd-band__glow:where(.lnd-main, .lnd-main *){right:-16%}
/* Рисунок фона — не украшение, а то, чем виден параллакс: он обгоняет фон, и
   разница скоростей читается по повторяющейся черте. Края растворены маской —
   обрезанный по границе полосы узор выдал бы сам слой. */
.lnd-band__deco:where(.lnd-main, .lnd-main *){position:absolute;left:0;right:0;top:-24%;height:148%;z-index:2;
  pointer-events:none;will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
.lnd-band__in:where(.lnd-main, .lnd-main *){position:relative;z-index:3;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.lnd-band--right .lnd-band__media:where(.lnd-main, .lnd-main *){order:2}
.lnd-band--right .lnd-band__copy:where(.lnd-main, .lnd-main *){order:1}
.lnd-band__copy h2:where(.lnd-main, .lnd-main *){color:var(--bnd-ink)}
.lnd-band__copy .eyebrow:where(.lnd-main, .lnd-main *){color:var(--bnd-eyebrow)}
.lnd-band__copy p:where(.lnd-main, .lnd-main *){margin-top:18px;color:var(--bnd-mut);max-width:46ch;font-size:16px}
.lnd-band__list:where(.lnd-main, .lnd-main *){margin:26px 0 0;padding:0;list-style:none;display:grid;gap:12px;max-width:46ch}
.lnd-band__list li:where(.lnd-main, .lnd-main *){position:relative;padding-left:28px;color:var(--bnd-mut);font-size:14.5px}
.lnd-band__list li:where(.lnd-main, .lnd-main *)::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;
  border-radius:50%;background:var(--bnd-dot)}
.lnd-band__link:where(.lnd-main, .lnd-main *){display:inline-flex;align-items:center;gap:7px;margin-top:26px;
  font-size:14px;font-weight:600;color:var(--bnd-link)}
.lnd-band__link:hover:where(.lnd-main, .lnd-main *){gap:11px}
.lnd-band__link span:where(.lnd-main, .lnd-main *){transition:transform .2s}

/* ── темы полос ──
   Тем ровно столько же, сколько полос: добавленная сверх этого полоса останется
   вовсе без фона, и это видно сразу — в отличие от тихого повтора по кругу. */
.lnd-band--t0:where(.lnd-main, .lnd-main *){--bnd-bg:linear-gradient(160deg,#f7f9f6,#eef2ec);--bnd-glow:rgba(86,113,72,.16);
  --bnd-ink:#141916;--bnd-mut:#69716c;--bnd-eyebrow:#567148;--bnd-dot:#7c9a6c;--bnd-link:#3f5636;
  --shot-bg:#fff;--shot-line:#e8ebe7;--shot-ink:#141916;--shot-mut:#98a09a;--shot-soft:#f6f8f5;--shot-acc:#e9efe3}
.lnd-band--t1:where(.lnd-main, .lnd-main *){--bnd-bg:linear-gradient(160deg,#121a16,#0b100d);--bnd-glow:rgba(120,170,110,.2);
  --bnd-ink:#fff;--bnd-mut:rgba(255,255,255,.68);--bnd-eyebrow:#9dbb8a;--bnd-dot:#8fae7d;--bnd-link:#b7d2a6;
  --shot-bg:#161e1a;--shot-line:#28322c;--shot-ink:#f2f5f1;--shot-mut:#8c968f;--shot-soft:#1d2621;--shot-acc:#2b3a2c}
.lnd-band--t2:where(.lnd-main, .lnd-main *){--bnd-bg:linear-gradient(160deg,#f5f8fb,#e7eef5);--bnd-glow:rgba(70,120,180,.18);
  --bnd-ink:#141916;--bnd-mut:#68707a;--bnd-eyebrow:#4a7096;--bnd-dot:#6f9ac2;--bnd-link:#3c6087;
  --shot-bg:#fff;--shot-line:#e4eaf0;--shot-ink:#141916;--shot-mut:#98a2ac;--shot-soft:#f4f7fa;--shot-acc:#e6eef7}
.lnd-band--t3:where(.lnd-main, .lnd-main *){--bnd-bg:linear-gradient(160deg,#101419,#090c0f);--bnd-glow:rgba(90,140,200,.2);
  --bnd-ink:#fff;--bnd-mut:rgba(255,255,255,.66);--bnd-eyebrow:#8fb4d8;--bnd-dot:#7ba3cc;--bnd-link:#a8c9e8;
  --shot-bg:#12171c;--shot-line:#242d35;--shot-ink:#e9eef3;--shot-mut:#828d97;--shot-soft:#171e24;--shot-acc:#213040}
.lnd-band--t4:where(.lnd-main, .lnd-main *){--bnd-bg:linear-gradient(160deg,#fbf8f4,#f1ece4);--bnd-glow:rgba(180,140,90,.18);
  --bnd-ink:#141916;--bnd-mut:#6d675f;--bnd-eyebrow:#8a6a3e;--bnd-dot:#c09b62;--bnd-link:#7a5c32;
  --shot-bg:#fff;--shot-line:#ece5da;--shot-ink:#141916;--shot-mut:#a39a8c;--shot-soft:#faf7f2;--shot-acc:#f3ece0}

.lnd-band--t5:where(.lnd-main, .lnd-main *){--bnd-bg:linear-gradient(160deg,#16131d,#0d0b12);--bnd-glow:rgba(150,120,210,.2);
  --bnd-ink:#fff;--bnd-mut:rgba(255,255,255,.66);--bnd-eyebrow:#b7a4e0;--bnd-dot:#a08bd3;--bnd-link:#cdbff0;
  --shot-bg:#18151f;--shot-line:#2c2738;--shot-ink:#efecf5;--shot-mut:#8f889c;--shot-soft:#1e1a27;--shot-acc:#2f2842}
.lnd-band--t6:where(.lnd-main, .lnd-main *){--bnd-bg:linear-gradient(160deg,#f3f9f8,#e4f0ee);--bnd-glow:rgba(60,150,140,.16);
  --bnd-ink:#141916;--bnd-mut:#65716f;--bnd-eyebrow:#2f7d74;--bnd-dot:#5fa89f;--bnd-link:#276a62;
  --shot-bg:#fff;--shot-line:#dfeae8;--shot-ink:#141916;--shot-mut:#93a19f;--shot-soft:#f3f8f7;--shot-acc:#e1f0ed}

/* рисунки фона — градиентами, без единого лишнего запроса */
.lnd-band--t0 .lnd-band__deco:where(.lnd-main, .lnd-main *){
  background:repeating-radial-gradient(circle at 74% 28%,transparent 0 64px,rgba(86,113,72,.14) 64px 66px)}
.lnd-band--t1 .lnd-band__deco:where(.lnd-main, .lnd-main *){
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 28px)}
.lnd-band--t2 .lnd-band__deco:where(.lnd-main, .lnd-main *){
  background:repeating-linear-gradient(0deg,rgba(70,120,180,.1) 0 1px,transparent 1px 56px),
             repeating-linear-gradient(90deg,rgba(70,120,180,.1) 0 1px,transparent 1px 56px)}
.lnd-band--t3 .lnd-band__deco:where(.lnd-main, .lnd-main *){
  background:radial-gradient(rgba(255,255,255,.1) 1.4px,transparent 1.5px);background-size:34px 34px}
.lnd-band--t4 .lnd-band__deco:where(.lnd-main, .lnd-main *){
  background:repeating-linear-gradient(90deg,rgba(180,140,90,.12) 0 1px,transparent 1px 48px)}
.lnd-band--t5 .lnd-band__deco:where(.lnd-main, .lnd-main *){
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 30px)}
.lnd-band--t6 .lnd-band__deco:where(.lnd-main, .lnd-main *){
  background:repeating-radial-gradient(circle at 22% 70%,transparent 0 58px,rgba(60,150,140,.12) 58px 60px)}

@media(max-width:980px){
  .lnd-band:where(.lnd-main, .lnd-main *){min-height:0;padding:72px 0}
  .lnd-band__in:where(.lnd-main, .lnd-main *){grid-template-columns:minmax(0,1fr);gap:36px}
  .lnd-band--right .lnd-band__media:where(.lnd-main, .lnd-main *){order:0}
  .lnd-band--right .lnd-band__copy:where(.lnd-main, .lnd-main *){order:0}
}

/* ═══ МАКЕТЫ ИНТЕРФЕЙСА ═══
   Нарисованы разметкой, а не сняты скриншотами: текст в них остаётся текстом —
   он масштабируется, читается с экрана телефона и не размывается на ретине, а
   страница не тянет ни одного мегабайта картинок. */
.lnd-shot:where(.lnd-main, .lnd-main *){position:relative;max-width:100%;min-width:0;border-radius:18px;overflow:hidden;will-change:transform;
  background:var(--shot-bg);border:1px solid var(--shot-line);box-shadow:var(--shadow);
  color:var(--shot-ink);font-size:12.5px;line-height:1.5}
.lnd-shot__bar:where(.lnd-main, .lnd-main *){display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--shot-line);
  background:var(--shot-soft)}
.lnd-shot__dot:where(.lnd-main, .lnd-main *){width:9px;height:9px;border-radius:50%;background:var(--shot-line)}
.lnd-shot__title:where(.lnd-main, .lnd-main *){margin-left:6px;font-size:11px;color:var(--shot-mut);letter-spacing:.02em}
.lnd-shot__body:where(.lnd-main, .lnd-main *){padding:16px}

/* переписка */
.lnd-chat:where(.lnd-main, .lnd-main *){display:grid;grid-template-columns:150px minmax(0,1fr)}
.lnd-chat__list:where(.lnd-main, .lnd-main *){border-right:1px solid var(--shot-line);padding:12px 10px;background:var(--shot-soft)}
.lnd-chat__item:where(.lnd-main, .lnd-main *){display:flex;gap:9px;align-items:center;padding:8px;border-radius:9px;margin-bottom:3px}
.lnd-chat__item.is-on:where(.lnd-main, .lnd-main *){background:var(--shot-acc)}
.lnd-chat__ava:where(.lnd-main, .lnd-main *){width:26px;height:26px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  font-size:11px;font-weight:600;background:var(--shot-acc);color:var(--shot-ink)}
.lnd-chat__meta:where(.lnd-main, .lnd-main *){min-width:0}
.lnd-chat__meta b:where(.lnd-main, .lnd-main *){display:block;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnd-chat__meta span:where(.lnd-main, .lnd-main *){display:block;font-size:10.5px;color:var(--shot-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnd-chat__thread:where(.lnd-main, .lnd-main *){padding:16px;display:flex;flex-direction:column;gap:10px;min-height:236px}
.lnd-msg:where(.lnd-main, .lnd-main *){max-width:82%;padding:9px 12px;border-radius:13px 13px 13px 4px;
  background:var(--shot-soft);border:1px solid var(--shot-line)}
.lnd-msg--own:where(.lnd-main, .lnd-main *){align-self:flex-end;background:var(--shot-acc);border-color:transparent;border-radius:13px 13px 4px 13px}
.lnd-msg small:where(.lnd-main, .lnd-main *){display:block;margin-top:5px;font-size:9.5px;color:var(--shot-mut);text-align:right}
.lnd-msg__who:where(.lnd-main, .lnd-main *){display:block;font-size:10px;font-weight:600;color:var(--shot-mut);margin-bottom:4px}
.lnd-msg__react:where(.lnd-main, .lnd-main *){display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:3px 9px;border-radius:20px;
  font-size:10.5px;background:var(--shot-bg);border:1px solid var(--shot-line);color:var(--shot-mut)}
.lnd-msg__react svg:where(.lnd-main, .lnd-main *){width:12px;height:12px;stroke:var(--shot-mut);fill:none;stroke-width:1.6;stroke-linejoin:round}
.lnd-chat__typing:where(.lnd-main, .lnd-main *){font-size:10.5px;color:var(--shot-mut);margin-top:auto}
.lnd-chat__box:where(.lnd-main, .lnd-main *){display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:8px 10px;
  border:1px solid var(--shot-line);border-radius:12px;color:var(--shot-mut);font-size:11.5px}
.lnd-chat__send:where(.lnd-main, .lnd-main *){margin-left:auto;width:26px;height:26px;border-radius:8px;background:var(--shot-ink);
  color:var(--shot-bg);display:grid;place-items:center;font-size:13px;flex-shrink:0}
@media(max-width:520px){ .lnd-chat:where(.lnd-main, .lnd-main *){grid-template-columns:1fr} .lnd-chat__list:where(.lnd-main, .lnd-main *){display:none} }

/* виджет на сайте */
.lnd-site:where(.lnd-main, .lnd-main *){position:relative;min-height:300px;padding:16px;background:var(--shot-soft)}
.lnd-site__skeleton:where(.lnd-main, .lnd-main *){display:grid;gap:9px}
.lnd-site__skeleton i:where(.lnd-main, .lnd-main *){display:block;height:9px;border-radius:5px;background:var(--shot-line)}
.lnd-site__skeleton i:nth-child(1):where(.lnd-main, .lnd-main *){width:44%;height:15px}
.lnd-site__skeleton i:nth-child(3):where(.lnd-main, .lnd-main *){width:82%}
.lnd-site__skeleton i:nth-child(4):where(.lnd-main, .lnd-main *){width:64%}
.lnd-site__skeleton i:nth-child(5):where(.lnd-main, .lnd-main *){width:73%}
.lnd-site__cards:where(.lnd-main, .lnd-main *){display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.lnd-site__cards i:where(.lnd-main, .lnd-main *){display:block;height:58px;border-radius:10px;background:var(--shot-line)}
.lnd-widget:where(.lnd-main, .lnd-main *){position:absolute;right:14px;bottom:14px;width:min(236px,72%);border-radius:14px;
  background:var(--shot-bg);border:1px solid var(--shot-line);box-shadow:0 16px 36px -18px rgba(20,25,22,.45);overflow:hidden}
.lnd-widget__head:where(.lnd-main, .lnd-main *){display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--shot-acc)}
.lnd-widget__head b:where(.lnd-main, .lnd-main *){font-size:11.5px;font-weight:600}
.lnd-widget__head span:where(.lnd-main, .lnd-main *){font-size:10px;color:var(--shot-mut);display:block}
.lnd-widget__on:where(.lnd-main, .lnd-main *){width:7px;height:7px;border-radius:50%;background:#6f9a5e;margin-left:auto;flex-shrink:0}
.lnd-widget__body:where(.lnd-main, .lnd-main *){padding:12px;display:grid;gap:8px}
.lnd-widget__msg:where(.lnd-main, .lnd-main *){padding:8px 10px;border-radius:11px 11px 11px 3px;background:var(--shot-soft);font-size:11.5px}
.lnd-widget__msg--own:where(.lnd-main, .lnd-main *){border-radius:11px 11px 3px 11px;background:var(--shot-acc);justify-self:end}
.lnd-widget__box:where(.lnd-main, .lnd-main *){margin:2px 12px 12px;padding:7px 10px;border:1px solid var(--shot-line);border-radius:10px;
  font-size:11px;color:var(--shot-mut)}
.lnd-bubble:where(.lnd-main, .lnd-main *){position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:16px;
  background:var(--shot-ink);color:var(--shot-bg);display:grid;place-items:center}

/* код */
.lnd-code:where(.lnd-main, .lnd-main *){padding:0;background:var(--shot-bg)}
.lnd-code pre:where(.lnd-main, .lnd-main *){margin:0;padding:18px;overflow-x:auto;font-size:12px;line-height:1.85;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--shot-ink)}
.lnd-code .c-key:where(.lnd-main, .lnd-main *){color:#c08a4a}
.lnd-code .c-str:where(.lnd-main, .lnd-main *){color:#7ca35f}
.lnd-code .c-com:where(.lnd-main, .lnd-main *){color:var(--shot-mut)}
.lnd-code .c-fn:where(.lnd-main, .lnd-main *){color:#6f9dd0}
.lnd-code__foot:where(.lnd-main, .lnd-main *){display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;border-top:1px solid var(--shot-line);
  background:var(--shot-soft)}
.lnd-code__foot span:where(.lnd-main, .lnd-main *){font-size:10.5px;color:var(--shot-mut);border:1px solid var(--shot-line);
  border-radius:20px;padding:3px 10px}
@media(max-width:560px){ .lnd-code pre:where(.lnd-main, .lnd-main *){font-size:11px;padding:14px;line-height:1.75} }

/* обращения */
.lnd-desk:where(.lnd-main, .lnd-main *){display:grid;gap:10px;padding:16px}
.lnd-desk__row:where(.lnd-main, .lnd-main *){display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;
  border:1px solid var(--shot-line);background:var(--shot-soft)}
.lnd-desk__row.is-on:where(.lnd-main, .lnd-main *){background:var(--shot-acc);border-color:transparent}
.lnd-desk__row b:where(.lnd-main, .lnd-main *){font-size:11.5px;font-weight:600;display:block}
.lnd-desk__row span:where(.lnd-main, .lnd-main *){font-size:10.5px;color:var(--shot-mut);display:block}
.lnd-desk__tag:where(.lnd-main, .lnd-main *){margin-left:auto;font-size:10px;color:var(--shot-mut);border:1px solid var(--shot-line);
  border-radius:20px;padding:3px 9px;background:var(--shot-bg);white-space:nowrap}

/* статья в ленте */
.lnd-article:where(.lnd-main, .lnd-main *){padding:16px;display:grid;gap:10px}
.lnd-article__head:where(.lnd-main, .lnd-main *){display:flex;gap:10px;align-items:center}
.lnd-article__head b:where(.lnd-main, .lnd-main *){display:block;font-size:11.5px}
.lnd-article__head span span:where(.lnd-main, .lnd-main *){display:block;font-size:10.5px;color:var(--shot-mut)}
.lnd-article__title:where(.lnd-main, .lnd-main *){font-size:15px;line-height:1.3;font-weight:700}
.lnd-article p:where(.lnd-main, .lnd-main *){color:var(--shot-mut);font-size:12px}
.lnd-article__cover:where(.lnd-main, .lnd-main *){position:relative;height:118px;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#6f8fa8 0%,#b9c8cf 55%,#8c9a86 56%,#5f6f5a 100%)}
.lnd-article__cover i:where(.lnd-main, .lnd-main *){position:absolute;bottom:0;background:rgba(20,28,34,.72);border-radius:3px 3px 0 0}
.lnd-article__cover i:nth-child(1):where(.lnd-main, .lnd-main *){left:14%;width:16%;height:62%}
.lnd-article__cover i:nth-child(2):where(.lnd-main, .lnd-main *){left:36%;width:11%;height:82%}
.lnd-article__cover i:nth-child(3):where(.lnd-main, .lnd-main *){left:54%;width:20%;height:48%}
.lnd-article__foot:where(.lnd-main, .lnd-main *){display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lnd-article__foot .lnd-desk__tag:where(.lnd-main, .lnd-main *){margin-left:0}
.lnd-article__meta:where(.lnd-main, .lnd-main *){margin-left:auto;font-size:10.5px;color:var(--shot-mut)}
.lnd-desk__tag--soon:where(.lnd-main, .lnd-main *){border-style:dashed}

/* доска задач */
.lnd-board:where(.lnd-main, .lnd-main *){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px;min-height:236px}
.lnd-board__col:where(.lnd-main, .lnd-main *){display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:12px;background:var(--shot-soft);
  border:1px solid var(--shot-line)}
.lnd-board__head:where(.lnd-main, .lnd-main *){font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--shot-mut);
  display:flex;justify-content:space-between;padding:2px 4px}
.lnd-board__card:where(.lnd-main, .lnd-main *){display:grid;gap:8px;padding:10px;border-radius:10px;background:var(--shot-bg);border:1px solid var(--shot-line)}
.lnd-board__card b:where(.lnd-main, .lnd-main *){font-size:11.5px;font-weight:600;line-height:1.35}
.lnd-board__card span:where(.lnd-main, .lnd-main *){display:flex;align-items:center;gap:6px;font-size:10px;color:var(--shot-mut)}
.lnd-board__card em:where(.lnd-main, .lnd-main *){font-style:normal;padding:2px 7px;border-radius:20px;background:var(--shot-acc);color:var(--shot-ink)}
.lnd-board__card i:where(.lnd-main, .lnd-main *){margin-left:auto;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;
  font-style:normal;font-size:10px;font-weight:600;background:var(--shot-acc);color:var(--shot-ink)}
@media(max-width:520px){ .lnd-board:where(.lnd-main, .lnd-main *){grid-template-columns:1fr 1fr} .lnd-board__col:nth-child(3):where(.lnd-main, .lnd-main *){display:none} }

/* уведомления */
.lnd-push:where(.lnd-main, .lnd-main *){display:grid;gap:10px;padding:16px}
.lnd-push__card:where(.lnd-main, .lnd-main *){display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:13px;
  border:1px solid var(--shot-line);background:var(--shot-soft)}
.lnd-push__card b:where(.lnd-main, .lnd-main *){font-size:11.5px;display:block}
.lnd-push__card p:where(.lnd-main, .lnd-main *){font-size:11.5px;color:var(--shot-mut);margin-top:3px}
.lnd-push__card time:where(.lnd-main, .lnd-main *){font-size:10px;color:var(--shot-mut);margin-left:auto;white-space:nowrap}
.lnd-push__ico:where(.lnd-main, .lnd-main *){width:28px;height:28px;border-radius:9px;background:var(--shot-acc);flex-shrink:0;
  display:grid;place-items:center}
.lnd-push__ico svg:where(.lnd-main, .lnd-main *){width:15px;height:15px;stroke:var(--shot-ink);fill:none;stroke-width:1.7}

/* ═══ ПЛИТКИ ВОЗМОЖНОСТЕЙ ═══ */
.lnd-sec:where(.lnd-main, .lnd-main *){padding:clamp(64px,9vh,110px) 0;position:relative}
/* Раздел, идущий сразу за другим: свой верхний отступ ему не нужен — хватает
   нижнего у соседа, иначе между ними встаёт пустая полоса в треть экрана. */
.lnd-sec--tight:where(.lnd-main, .lnd-main *){padding-top:0}
.lnd-sec__head:where(.lnd-main, .lnd-main *){max-width:660px;margin:0 auto clamp(36px,5vh,56px);text-align:center}
.lnd-sec__head h2:where(.lnd-main, .lnd-main *){margin-top:12px}
.lnd-sec__head p:where(.lnd-main, .lnd-main *){margin-top:16px;color:var(--body);font-size:16px}
.lnd-grid:where(.lnd-main, .lnd-main *){display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lnd-tile:where(.lnd-main, .lnd-main *){background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.lnd-tile:hover:where(.lnd-main, .lnd-main *){border-color:var(--line2);transform:translateY(-3px);box-shadow:var(--shadow)}
.lnd-tile__ic:where(.lnd-main, .lnd-main *){width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--acc-soft);border:1px solid rgba(86,113,72,.16)}
.lnd-tile__ic svg:where(.lnd-main, .lnd-main *){width:19px;height:19px;stroke:var(--acc);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lnd-tile h3:where(.lnd-main, .lnd-main *){font-size:16.5px;margin-bottom:7px}
.lnd-tile p:where(.lnd-main, .lnd-main *){font-size:14px;color:var(--body)}
@media(max-width:900px){ .lnd-grid:where(.lnd-main, .lnd-main *){grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .lnd-grid:where(.lnd-main, .lnd-main *){grid-template-columns:1fr} }

/* ═══ ШАГИ ═══ */
.lnd-steps:where(.lnd-main, .lnd-main *){display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:lnd-step}
.lnd-step:where(.lnd-main, .lnd-main *){position:relative;background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.lnd-step:where(.lnd-main, .lnd-main *)::before{counter-increment:lnd-step;content:"0" counter(lnd-step);
  font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--acc)}
.lnd-step h3:where(.lnd-main, .lnd-main *){margin:12px 0 8px;font-size:17px}
.lnd-step p:where(.lnd-main, .lnd-main *){font-size:14px}
@media(max-width:900px){ .lnd-steps:where(.lnd-main, .lnd-main *){grid-template-columns:1fr} }

/* ═══ ЗАКРЫВАЮЩИЙ ПРИЗЫВ ═══ */
.lnd-cta:where(.lnd-main, .lnd-main *){position:relative;overflow:hidden;border-radius:22px;padding:clamp(44px,7vw,72px) clamp(24px,5vw,56px);
  background:linear-gradient(150deg,#18211c,#0b100d);text-align:center;isolation:isolate}
.lnd-cta__glow:where(.lnd-main, .lnd-main *){position:absolute;z-index:0;width:760px;height:760px;left:50%;top:-46%;margin-left:-380px;
  border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(circle,rgba(120,160,100,.26),transparent 66%)}
.lnd-cta__in:where(.lnd-main, .lnd-main *){position:relative;z-index:1}
.lnd-cta h2:where(.lnd-main, .lnd-main *){color:#fff}
.lnd-cta p:where(.lnd-main, .lnd-main *){color:rgba(255,255,255,.7);max-width:52ch;margin:16px auto 0;font-size:16px}
.lnd-cta .cta-row:where(.lnd-main, .lnd-main *){display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ═══ ВОПРОСЫ ═══ */
.lnd-faq:where(.lnd-main, .lnd-main *){max-width:760px;margin:0 auto;display:grid;gap:10px}
.lnd-faq__item:where(.lnd-main, .lnd-main *){background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 20px}
.lnd-faq__item summary:where(.lnd-main, .lnd-main *){cursor:pointer;list-style:none;padding:18px 28px 18px 0;position:relative;
  font-size:16px;font-weight:600;color:var(--ink)}
.lnd-faq__item summary:where(.lnd-main, .lnd-main *)::-webkit-details-marker{display:none}
.lnd-faq__item summary:where(.lnd-main, .lnd-main *)::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400;color:var(--muted);transition:transform .2s}
.lnd-faq__item[open] summary:where(.lnd-main, .lnd-main *)::after{transform:translateY(-50%) rotate(45deg)}
.lnd-faq__item p:where(.lnd-main, .lnd-main *){padding:0 0 18px;color:var(--body);font-size:15px}

/* ═══ ПОДВАЛ ═══ */
/* СВЕРХУ ОТСТУПА НЕТ: раздел над подвалом уже несёт свой нижний, и второй давал
   бы между призывом и подвалом пустую полосу в треть экрана. */
.lnd-foot:where(.lnd-foot, .lnd-foot *){border-top:1px solid var(--line);padding:40px 0 48px}
.lnd-foot__in:where(.lnd-foot, .lnd-foot *){display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.lnd-foot__brand img:where(.lnd-foot, .lnd-foot *){height:24px;width:auto;margin-bottom:14px}
.lnd-foot__brand p:where(.lnd-foot, .lnd-foot *){font-size:13px;color:var(--muted);max-width:34ch}
.lnd-foot nav:where(.lnd-foot, .lnd-foot *){display:flex;gap:44px;flex-wrap:wrap}
.lnd-foot nav div:where(.lnd-foot, .lnd-foot *){display:grid;gap:9px;align-content:start}
.lnd-foot nav b:where(.lnd-foot, .lnd-foot *){font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.lnd-foot nav a:where(.lnd-foot, .lnd-foot *){font-size:13.5px;color:var(--body)}
.lnd-foot nav a:hover:where(.lnd-foot, .lnd-foot *){color:var(--acc)}
.lnd-foot__bottom:where(.lnd-foot, .lnd-foot *){margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}

/* ═══ ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ═══
   Класс `is-armed` ставит скрипт: без него ни один элемент не спрятан, и при
   выключенном JS страница остаётся целой, а не пустой. */
.lnd.is-armed .lnd-reveal:where(.lnd-main, .lnd-main *){opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.lnd.is-armed .lnd-reveal.is-in:where(.lnd-main, .lnd-main *){opacity:1;transform:none}
.lnd.is-armed .lnd-reveal--d1:where(.lnd-main, .lnd-main *){transition-delay:.09s}
.lnd.is-armed .lnd-reveal--d2:where(.lnd-main, .lnd-main *){transition-delay:.18s}
.lnd.is-armed .lnd-reveal--d3:where(.lnd-main, .lnd-main *){transition-delay:.27s}
/* макет въезжает со своей стороны — к тексту, а не просто снизу */
.lnd.is-armed .lnd-band--left .lnd-shot:where(.lnd-main, .lnd-main *){opacity:0;transform:translateX(44px) scale(.97);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.lnd.is-armed .lnd-band--right .lnd-shot:where(.lnd-main, .lnd-main *){opacity:0;transform:translateX(-44px) scale(.97);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.lnd.is-armed .lnd-band.is-in .lnd-shot:where(.lnd-main, .lnd-main *){opacity:1;transform:none}

/* ═══ МЕНЬШЕ ДВИЖЕНИЯ ═══
   Просили — не показываем вовсе: ни въездов, ни параллакса (скрипт проверяет то
   же условие и не трогает слои). Страница остаётся полностью читаемой. */
@media (prefers-reduced-motion:reduce){
  :is(.lnd-main, .lnd-foot) *{animation:none!important;transition:none!important}
  .lnd.is-armed .lnd-reveal:where(.lnd-main, .lnd-main *), .lnd.is-armed .lnd-band--left .lnd-shot:where(.lnd-main, .lnd-main *), .lnd.is-armed .lnd-band--right .lnd-shot:where(.lnd-main, .lnd-main *){opacity:1;transform:none}
}