/* ============================================================
   JEEKSSHIRE 24 — дизайн-система
   Тёмная продуктовая страница: слева слово, справа устройство.
   Один файл на все страницы сайта: лендинг, пять юридических
   документов и серверный лок-скрин gate.php.
   Движение только compositor-свойствами, с тихим режимом.
   ============================================================ */

/* ---------- Токены ---------- */
:root{
  --bg:#000;
  --bg-2:#000;
  --ink:#EDEFF5;        /* 17.2:1 на --bg */
  --muted:#A8B0C2;      /*  9.1:1 на --bg · 8.5:1 на --surface */
  --muted-2:#858D9E;    /*  5.8:1 на --bg · 5.4:1 на --surface — самый слабый текстовый */
  --surface:#14161D;
  --surface-2:#1A1D26;
  --line:#262A34;
  --line-strong:#323846;
  --gold:#C9A24E;

  /* Sapphire Spectrum. Тон *-t — осветлённый: чистый jewel на тёмном
     не добирает контраста для текста, поэтому заливка берёт основной,
     а надписи — осветлённый. */
  --j1:#2E60E0; --j1-t:#8FAEFF;   /* сапфир  */
  --j2:#1FB880; --j2-t:#6FE3BE;   /* изумруд */
  --j3:#8A4FE0; --j3-t:#C3A2FF;   /* фиолет  */
  --j4:#2FB0D8; --j4-t:#7FD8F2;   /* бирюза  */
  --j5:#E0803F; --j6:#E0457A; --j7:#6A5AE6; --j8:#E0BE5A;

  --r-in:12px;
  --r-out:18px;
  --r-lg:26px;
  --r-xl:34px;
  --r-pill:999px;

  --maxw:1200px;
  --pad:clamp(20px,4vw,28px);

  --ease:cubic-bezier(.22,1,.36,1);
  --font-display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:#000}
body{
  font-family:var(--font-body);
  position:relative;
  isolation:isolate;
  min-height:100%;
  background:#000;
  color:var(--ink);
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.028em;line-height:1.08}
p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- Background cosmos ---------- */
.bg{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:#000;
}
.bg__cosmos{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.1s ease;will-change:opacity;
}
.app-cosmos-live .bg__cosmos{opacity:.9}
.bg__aurora{display:none}
.bg__stars{
  position:absolute;inset:-4%;opacity:.74;
  animation:starDrift 74s ease-in-out infinite;will-change:transform,opacity;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 45% 80%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 85% 22%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 32% 65%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 60% 12%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.6px 1.6px at 12% 16%, rgba(255,255,255,.72), transparent),
    radial-gradient(1.3px 1.3px at 92% 74%, rgba(255,255,255,.66), transparent),
    radial-gradient(1px 1px at 53% 44%, rgba(255,255,255,.55), transparent);
  background-size:420px 420px,360px 360px,520px 520px,300px 300px,440px 440px,560px 560px,690px 690px,760px 760px,620px 620px;
  background-repeat:repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 90%,rgba(0,0,0,.62) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 90%,rgba(0,0,0,.62) 100%);
}
.app-cosmos-live .bg__stars{opacity:.3}
.app-cosmos-static .bg__cosmos{display:none}
.bg__stars::after{
  content:"";position:absolute;inset:0;opacity:.52;
  background:
    radial-gradient(2px 2px at 18% 23%,rgba(255,255,255,.88),transparent 72%),
    radial-gradient(2.2px 2.2px at 77% 16%,rgba(255,255,255,.78),transparent 72%),
    radial-gradient(1.8px 1.8px at 64% 78%,rgba(255,255,255,.72),transparent 72%),
    radial-gradient(2px 2px at 36% 58%,rgba(255,255,255,.72),transparent 72%);
  background-size:910px 910px,1080px 1080px,970px 970px,1160px 1160px;
  background-repeat:repeat;
}
.grain{
  position:fixed;inset:0;z-index:50;pointer-events:none;
  display:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes cosmosDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.4%,1.6%,0) scale(1.09)}
}
@keyframes starDrift{
  0%,100%{transform:translate3d(0,0,0);opacity:.42}
  50%{transform:translate3d(1.4%,-1%,0);opacity:.68}
}

/* ---------- Утилиты, общие для всех страниц ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
/* Вордмарк — белый SVG, задаётся высотой, ширина следует пропорции */
.wm-img{display:block;width:auto;max-width:none;height:28px;-webkit-user-drag:none;user-select:none}
@media (max-width:560px){.wm-img{height:24px}}
@media (max-width:480px){.wm-img{height:20px}}
.nav__flag{appearance:none;flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;padding:0;
  transition:border-color .2s,background .2s,transform .12s}
.nav__flag:hover{border-color:rgba(201,162,78,.5);background:var(--surface-2)}
.nav__flag:active{transform:scale(.9)}
.nav__flag-emoji{display:block;font-size:18px;line-height:1;transform:translateY(.5px)}
.legal-link{appearance:none;border:0;background:transparent;padding:2px 0;cursor:pointer;text-decoration:none;
  font-family:var(--font-body);font-size:13px;color:var(--muted);transition:color .2s;text-align:left}
.legal-link:hover{color:var(--ink)}

/* Honeypot: остаётся в DOM и заполняется ботами, но невидим человеку.
   Уводить его за left:-9999px нельзя — в арабской раскладке документ
   растёт влево и появляется горизонтальная прокрутка. */
.contact__hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.contact__btn{flex:0 0 auto}
.contact__btn:disabled{opacity:.6;cursor:progress}
.contact__status{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.contact__status.is-ok{color:#5EE6A8}
.contact__status.is-err{color:var(--jNeg,#FF8F6B)}

/* ---------- Страница ---------- */
/* Секции стоят вплотную, но каждая несёт собственный цветной оттенок,
   который медленно дышит — так границы читаются без линеек и отступов. */
/* Шапка липкая, поэтому переход по якорю ставил бы верх секции ПОД неё.
   scroll-margin-top отодвигает точку остановки на высоту шапки плюс воздух —
   секция встаёт целиком под шапкой, а не прячется за ней. */
.section,[id]{scroll-margin-top:calc(62px + clamp(12px,2vw,28px))}
.section{position:relative;padding-block:clamp(30px,3.8vw,58px)}
.section::before{content:none}
#about{--glow:var(--j3)}
#features{--glow:var(--j1);--glow-x:62%}
#platforms{--glow:var(--j2)}
#contact{--glow:var(--j4);--glow-x:38%}
@keyframes tintBreathe{
  0%,100%{opacity:.72;filter:hue-rotate(0deg)}
  50%{opacity:1;filter:hue-rotate(12deg)}
}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--line-strong);flex:none}
.section__title{font-size:clamp(1.65rem,3.1vw,2.55rem)}
.section__sub,.hero__lead{color:var(--muted);font-size:clamp(1rem,1.15vw,1.08rem);max-width:62ch;margin-top:16px}

/* ─────────────────────────  TOP BAR  ───────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:rgba(11,12,16,.86);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.nav__inner{display:flex;align-items:center;gap:16px;height:62px}
.nav__brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.nav__brand .nav__mark{height:15px;width:auto}
/* Связка брендов: JEEKSSHIRE 24 × герб JEEKSSHIRE 24, ведёт на материнский сайт.
   Герб отдаётся в 132px — ровно запас под DPR 3 при показе в 34px. */
.nav__x{color:var(--muted-2);font-size:15px;line-height:1;flex:none;user-select:none}
.nav__shire{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:142px;height:46px;padding:3px 8px 3px 10px;flex:none;opacity:.9;
  border:1px solid rgba(196,215,245,.2);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 28px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.nav__shire:hover{opacity:1;transform:translateY(-1px);border-color:rgba(205,224,255,.38);background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.03))}
.nav__shire img{height:38px;width:38px;object-fit:contain;display:block;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 0 7px rgba(213,230,255,.18))}
.nav__back-arrow{color:var(--muted);font-size:15px;line-height:1;transition:color .2s var(--ease),transform .2s var(--ease)}
.nav__home-label{color:var(--ink);font-size:12px;font-weight:700;line-height:1;white-space:nowrap}
.nav__shire:hover .nav__back-arrow{color:var(--ink);transform:translateX(-2px)}
@media (max-width:600px){
  .nav__shire{min-width:132px;height:44px;padding:3px 6px 3px 9px;border-radius:14px}
  .nav__shire img{height:34px;width:34px}
  .nav__actions{gap:7px}
  .nav__soon{padding:5px 11px;font-size:10.5px;letter-spacing:.1em}
}
@media (max-width:380px){.nav__soon{display:none}}
.nav__links{display:flex;gap:26px;margin-left:20px}
.nav__links a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600}
.nav__links a:hover{color:var(--ink)}
.nav__links a.active{color:var(--ink)}
.nav.scrolled{background:rgba(11,12,16,.94);box-shadow:0 14px 34px -26px #000}
/* Правая группа шапки: замок (реальный выход из сессии), переключатель языка
   и метка статуса. Флаг стилизован выше, в общих утилитах. */
.nav__actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.nav__lock{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;
  border:1px solid var(--line);border-radius:10px;color:var(--muted);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.nav__lock svg{width:17px;height:17px}
.nav__lock:hover{color:var(--ink);border-color:var(--line-strong)}
.nav__soon{flex:none;border:1px solid var(--line-strong);border-radius:99px;padding:6px 15px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.nav__links{display:none}.nav__soon{margin-left:auto}}

/* ─────────────────────────  HERO  ───────────────────────── */
.hero{position:relative;padding-block:clamp(20px,2.6vw,36px) clamp(26px,3.2vw,44px)}
.hero::before{content:none}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:clamp(30px,4.5vw,64px);align-items:center}
/* Логотип и заголовок идут одной строкой, как шапка карточки в магазине.
   Заголовку снято ограничение в 16ch: ширину теперь держит сама колонка. */
.hero__id{display:flex;align-items:center;gap:clamp(16px,2vw,24px);margin-bottom:clamp(20px,2.6vw,30px)}
/* Иконка почти чёрная на почти чёрном фоне, и тёмная тень делала её ещё
   незаметнее. Светлая сапфировая кромка и подсветка снизу очерчивают
   скруглённый квадрат, не подменяя саму иконку. */
.hero__id img{width:132px;height:132px;border-radius:32px;flex:none;
  box-shadow:
    0 0 0 1px rgba(143,174,255,.26),
    0 2px 0 0 rgba(143,174,255,.08) inset,
    0 14px 34px -10px rgba(46,96,224,.5),
    0 32px 70px -28px rgba(46,96,224,.42)}
.hero__crest-tile{position:relative;isolation:isolate;display:grid;place-items:center;flex:none;
  width:clamp(148px,12vw,188px);aspect-ratio:1;padding:clamp(6px,.55vw,9px);overflow:hidden;
  border:1px solid rgba(188,217,221,.4);border-radius:clamp(30px,2.5vw,38px);
  background:#000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 20px 48px -20px rgba(46,96,224,.58),0 32px 70px -30px rgba(0,0,0,.72)}
.hero__crest-tile::before{display:none}
.hero__id img.hero__crest{display:block;width:100%;height:100%;border-radius:0;object-fit:contain;box-shadow:none;
  transform:scale(1.311);
  filter:drop-shadow(0 15px 28px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(216,232,255,.17))}
/* Лок-ап в два яруса — как в доке и в подвале. Описание не помещается рядом с
   иконкой в одну строку ни при каком разумном кегле: ему нужно 476px, а колонке
   остаётся 400px. Автоперенос из-за этого рвал его посередине — «Creative /
   Network & Jobs». Явные два яруса убирают произвол переноса разом во всех
   четырёх языках, а имя продукта получает тот вес, которого заслуживает. */
.hero__title{margin:0;min-width:0;flex:1;width:100%;container-type:inline-size;display:flex;flex-direction:column;gap:7px}
/* Имя продукта остаётся одной строкой и подстраивается под место рядом с гербом. */
.hero__title b{font-size:clamp(1.9rem,3.65vw,3.15rem);font-size:min(clamp(1.9rem,3.65vw,3.15rem),12cqi);white-space:nowrap;font-weight:800;letter-spacing:-.03em;line-height:1.02}
.hero__title span{font-size:clamp(1rem,1.42vw,1.26rem);font-weight:600;color:var(--muted);line-height:1.25;letter-spacing:-.004em}
.hero__lead{margin-top:20px;font-size:clamp(1rem,1.3vw,1.12rem);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.appstore-badge{display:inline-flex;align-items:center;gap:12px;padding:11px 18px;border-radius:var(--r-out);border:1px solid var(--line);background:var(--surface);text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.appstore-badge:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.appstore-badge .glyph{width:24px;height:24px;flex:none;color:var(--ink)}
.badge__txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.appstore-badge .badge__sm{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.appstore-badge .badge__lg{font-size:15px;font-weight:700;letter-spacing:-.01em}
.appstore-badge--primary{background:linear-gradient(180deg,#2E60E0,#2449B6);border-color:#3F6CE6;color:#fff}
.appstore-badge--primary .badge__sm{color:#E8EEFF}
.hero__note{margin-top:18px;color:var(--muted-2);font-size:12.5px}

/* ─────────────────────────  PHONE  ───────────────────────── */
/* Связка устройств: ноутбук позади, телефон перед ним внахлёст — так читается
   одна экосистема на разных экранах, а не два отдельных макета. Выравнивание
   по низу: телефон выше ноутбука, и общая опора у них снизу.
   Размер связки задаётся ШИРИНОЙ колонки, а высота ряда — соседней текстовой
   колонкой; связи между ними нет. При 78% и нахлёсте в 9% связка выходила на
   94px ниже текста, и центрирование делило недостачу пополам — отсюда пустые
   47px над макетами. Ширину под увеличение ноутбука освободил нахлёст: чем
   глубже телефон заходит на ноутбук, тем уже связка при тех же размерах. */
.hero__art{display:flex;align-items:flex-end;justify-content:center;position:relative}
/* Телефон задан фиксированными пикселями (332px × zoom .42 = 139px), ноутбук —
   процентом от колонки: вместе они не масштабируются, и на узкой колонке связка
   вылезала за её край. Третий предел это исключает: ширина связки равна
   ноутбук + 139 − нахлёст(16%), поэтому ноутбук не может превысить
   116% колонки минус ширину телефона с запасом. Контрольная точка не нужна. */
.device__mac{position:relative;width:min(88%,calc(116% - 148px),520px);flex:none}
.device__screen--mac{aspect-ratio:16/10.4;border:2px solid #2A2F3A;border-bottom:0;
  border-radius:12px 12px 0 0;background:linear-gradient(180deg,#12141B,#0A0C11);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.mac__bar{display:flex;gap:5px;padding:8px 10px;border-bottom:1px solid #1B1F29;flex:none}
.mac__bar i{width:7px;height:7px;border-radius:50%;background:#2C3341;display:block}
.mac__body{flex:1;display:flex;min-height:0}
.mac__side{width:26%;flex:none;border-right:1px solid #1B1F29;padding:10px 9px;
  display:flex;flex-direction:column;gap:8px}
.mac__main{flex:1;min-width:0;padding:10px 11px;display:flex;flex-direction:column;gap:9px}
.mac__row{display:flex;align-items:center;gap:8px}
.mac__ava{width:20px;height:20px;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg,var(--j1),var(--j3),var(--j4),var(--j2),var(--j1))}
.mac__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:1;align-content:start}
.mac__tile{height:44px;border-radius:8px;background:linear-gradient(150deg,var(--t),#101319)}
/* Крышка ноутбука обрывается ровно на основании, поэтому база идёт шире экрана */
.device__base{display:block;height:11px;width:112%;margin-inline-start:-6%;
  background:linear-gradient(#232732,#15171d);border-radius:0 0 7px 7px;position:relative}
.device__base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:22%;height:5px;background:#0B0C10;border-radius:0 0 7px 7px}
/* Внутренности телефона свёрстаны в фиксированных пикселях под ширину 332px.
   Рядом с ноутбуком он занимает втрое меньше, поэтому уменьшаем его целиком
   через zoom: в отличие от transform:scale он меняет и занимаемое место,
   так что соседний макет не съезжает и ничего не накладывается. */
.device__phone{position:relative;z-index:2;flex:none;width:148px;height:306px;margin-inline-start:-12%;margin-bottom:0;padding:6px;border-radius:25px;background:linear-gradient(160deg,#343A48,#171A22 55%,#0E1016);box-shadow:0 22px 55px #0008}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes heroGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-4%,3%,0) scale(1.14)}
}
.device__phone .device__island{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:88px;height:24px;border-radius:99px;background:#05060A;z-index:3}
.device__phone .device__screen{height:100%;border-radius:37px;overflow:hidden;background:#0C0E14;display:flex;flex-direction:column;padding:12px 12px 0}
.device__status{display:flex;justify-content:space-between;align-items:center;height:34px;padding:0 8px}
.device__status .mock__cap{width:26px;height:6px;border-radius:99px;background:#333A49}
.mock__sig{display:flex;align-items:flex-end;gap:2px;height:10px}
.mock__sig i{width:3px;border-radius:1px;background:#4A5264}
.mock__sig i:nth-child(1){height:4px}.mock__sig i:nth-child(2){height:6px}.mock__sig i:nth-child(3){height:8px}.mock__sig i:nth-child(4){height:10px;background:#2C323F}
.device__head{display:flex;align-items:center;gap:11px;padding:8px 6px 14px}
.mock__ava{width:42px;height:42px;border-radius:50%;flex:none;background:conic-gradient(from 210deg,#2E60E0,#8A4FE0,#2FB0D8,#1FB880,#2E60E0);position:relative}
.mock__ava::after{content:"";position:absolute;inset:3px;border-radius:50%;background:linear-gradient(150deg,#2B3140,#161922)}
.device__head .mock__lines{flex:1;display:flex;flex-direction:column;gap:6px}
.device__head .mock__sqbtn{width:30px;height:30px;border-radius:10px;background:#1A1E28;flex:none;position:relative}
.device__head .mock__sqbtn::after{content:"";position:absolute;inset:9px;border-radius:2px;border:1.5px solid #49516355;border-left:0;border-bottom:0;transform:rotate(45deg) translate(-1px,1px)}
.mock__bar{display:block;height:7px;border-radius:99px;background:#242936}
.mock__bar.is-hi{background:#39415288}
.device__chips{display:flex;gap:7px;padding:0 6px 12px;overflow:hidden}
.mock__chip{font-size:10.5px;font-weight:600;padding:5px 10px;border-radius:99px;background:#171B24;color:var(--muted-2);white-space:nowrap}
.mock__chip.is-on{background:rgba(46,96,224,.18);color:var(--j1-t)}
.device__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 6px;flex:1;align-content:start}
.mock__tile{border-radius:14px;position:relative;overflow:hidden;background:#171A22}
.mock__tile::after{content:"";position:absolute;inset:0;opacity:.85}
.mock__tile.a{height:104px}.mock__tile.b{height:74px}.mock__tile.c{height:74px}.mock__tile.d{height:104px}.mock__tile.e{height:64px}.mock__tile.f{height:64px}
.mock__tile.a::after{background:linear-gradient(150deg,#2E60E0,#10131A)}
.mock__tile.b::after{background:linear-gradient(150deg,#8A4FE0,#10131A)}
.mock__tile.c::after{background:linear-gradient(210deg,#1FB880,#10131A)}
.mock__tile.d::after{background:linear-gradient(160deg,#2FB0D8,#10131A)}
.mock__tile.e::after{background:linear-gradient(140deg,#39415A,#10131A)}
.mock__tile.f::after{background:linear-gradient(200deg,#2E60E0,#8A4FE0 60%,#10131A)}
.device__tabs{margin-top:10px;display:flex;justify-content:space-between;align-items:center;padding:14px 22px 18px;border-top:1px solid #1B1F29;background:#0A0C11;margin-inline:-12px}
.device__tabs i{width:18px;height:18px;background:#333A49;border-radius:4px;display:block}
.device__tabs i:nth-child(2){border-radius:50%}
.device__tabs i:nth-child(3){background:linear-gradient(160deg,#4A79F5,#2E60E0);border-radius:7px;width:22px;height:22px}
.device__tabs i:nth-child(4){border-radius:3px;height:14px;width:20px}
.device__tabs i:nth-child(5){border-radius:50% 50% 40% 40%}

/* ─────────────────────────  META STRIP  ───────────────────────── */
.store-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.store-meta>div{background:radial-gradient(80% 62% at 0% 0%, color-mix(in srgb,var(--c) 9%,transparent), transparent 64%),var(--surface);padding:20px 22px;min-width:0;transition:background .25s var(--ease)}
.store-meta>div:nth-child(1){--c:var(--j1)}
.store-meta>div:nth-child(2){--c:var(--j2)}
.store-meta>div:nth-child(3){--c:var(--j4)}
.store-meta>div:hover{background:radial-gradient(80% 62% at 0% 0%, color-mix(in srgb,var(--c) 16%,transparent), transparent 66%),var(--surface-2)}
.store-meta dt{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.store-meta dd{margin:9px 0 0;font-size:16.5px;font-weight:600;line-height:1.4;overflow-wrap:break-word}
.store-meta dd a,.footer__bottom a{text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px;transition:text-decoration-color .2s var(--ease),color .2s var(--ease)}
.store-meta dd a:hover,.footer__bottom a:hover{color:var(--ink);text-decoration-color:currentColor}
@media (max-width:760px){.store-meta{grid-template-columns:1fr 1fr}}
@media (max-width:400px){.store-meta{grid-template-columns:1fr}}

/* ─────────────────────────  TRIAD  ───────────────────────── */
.laws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(30px,4vw,50px)}
.law{background:radial-gradient(80% 62% at 0% 0%, color-mix(in srgb,var(--c) 9%,transparent), transparent 64%),var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px 28px;position:relative;overflow:hidden}
.law::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);
  animation:barBreathe 6.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.6s)}
@keyframes barBreathe{0%,100%{opacity:.55}50%{opacity:1}}
.law .law__glyph{font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--ct);margin-bottom:18px}
.law h3{font-size:1.3rem;margin-bottom:10px}
.law p{color:var(--muted);font-size:14.5px}
.law{transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.law::before{transition:box-shadow .3s var(--ease)}
.law:hover{transform:translateY(-4px);border-color:var(--line-strong);background:radial-gradient(80% 62% at 0% 0%, color-mix(in srgb,var(--c) 16%,transparent), transparent 66%),var(--surface-2)}
.law:hover::before{box-shadow:0 0 18px -2px var(--c)}
@media (max-width:900px){.laws{grid-template-columns:1fr}}

/* ─────────────────────────  FEATURE STRIP  ───────────────────────── */
.rail__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rail__count{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);white-space:nowrap}
/* Горизонтальный скроллер: при overflow-x:auto вертикальная ось перестаёт быть
   видимой и режет всё, что выходит за края. Поэтому поля сверху и снизу держат
   подъём карточки на наведении и её свечение; отступ сверху скомпенсирован
   уменьшенным margin, чтобы ритм не разъехался.
   Полоса прокрутки скрыта намеренно: навигацию ведут точки под лентой. */
.rail{display:flex;gap:18px;margin-top:clamp(0px,0.6vw,14px);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;padding-inline:max(var(--pad),calc((100% - 1200px)/2));
  padding-block:34px 44px;scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.rail__item{flex:0 0 min(340px,82vw);scroll-snap-align:center;display:flex;flex-direction:column;gap:18px}
.rail__item{animation:itemDrift 11s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.3s)}
@keyframes itemDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.rail__item:hover .mock{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:0 18px 34px rgba(0,0,0,.55),0 0 30px -12px color-mix(in srgb,var(--c) 75%,transparent)}
.rail__cap{display:flex;flex-direction:column;gap:8px}
.rail__cap .mock__row{display:flex;align-items:center;gap:9px}
.rail__cap .rail__num{font-family:var(--font-mono);font-size:12px;color:var(--ct)}
.rail__cap .rail__cdot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.rail__cap h3{font-size:1.16rem;line-height:1.22}
.rail__cap p{color:var(--muted);font-size:13.5px;line-height:1.55}

/* app-screen mock (shared) */
.mock{transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);height:330px;border-radius:var(--r-lg);overflow:hidden;flex:none;background:linear-gradient(180deg,#12141B,#0C0E13);border:1px solid var(--line);display:flex;flex-direction:column;box-shadow:0 14px 30px rgba(0,0,0,.45);position:relative}
.mock::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%)}
.mock__bar-top{display:flex;justify-content:space-between;align-items:center;padding:11px 16px 4px}
.mock__bar-top .mock__cap{width:22px;height:5px;border-radius:99px;background:#333A49}
.mock__body{flex:1;padding:8px 16px 16px;display:flex;flex-direction:column;gap:9px;overflow:hidden;min-height:0}
.mock__row{display:flex;align-items:center;gap:9px}
.mock__sq{width:34px;height:34px;border-radius:10px;flex:none;background:linear-gradient(150deg,var(--c),#14161D)}
.mock__circ{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(150deg,var(--c),#14161D)}
.mock__col{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.mock__card{background:#161922;border:1px solid #21262F;border-radius:14px;padding:11px 12px}
.mock__mini{font-size:10px;font-weight:600;color:var(--muted-2);letter-spacing:.04em}
.mock__tagrow{display:flex;gap:6px;flex-wrap:wrap}
.mock__tag{font-size:9.5px;font-weight:600;padding:4px 8px;border-radius:99px;background:#1A1E28;color:var(--muted-2);white-space:nowrap}
.mock__tag.is-on{background:color-mix(in srgb,var(--c) 22%,#14161D);color:var(--ct)}
.mock__pillbtn{height:20px;width:44px;border-radius:99px;background:color-mix(in srgb,var(--c) 30%,#14161D);flex:none}
.mock__grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mock__grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mock__thumb{border-radius:11px;height:58px;background:linear-gradient(150deg,var(--c),#101319);opacity:.9}
.mock__thumb.is-alt{background:linear-gradient(215deg,var(--c),#101319)}
.mock__cover{height:62px;border-radius:14px;background:linear-gradient(120deg,var(--c),#101319 80%);position:relative}
.mock__big{height:96px;border-radius:14px;background:linear-gradient(150deg,var(--c),#101319)}
.mock__bub{max-width:76%;border-radius:14px;padding:9px 11px;background:#1A1E28;display:flex;flex-direction:column;gap:5px}
.mock__bub.is-me{margin-left:auto;background:color-mix(in srgb,var(--c) 34%,#14161D)}
.mock__input{margin-top:auto;display:flex;align-items:center;gap:8px;background:#161922;border:1px solid #242A35;border-radius:99px;padding:8px 8px 8px 13px}
.mock__send{width:26px;height:26px;border-radius:50%;background:var(--c);flex:none}
.mock__prompt{font-family:var(--font-mono);font-size:11px;color:var(--muted);background:#12151C;border:1px solid #242A35;border-radius:12px;padding:11px 12px;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.mock__caret{width:7px;height:13px;background:var(--ct);display:inline-block;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.mock__meterrow{display:flex;align-items:center;gap:9px}
.mock__meter{height:6px;border-radius:99px;background:#1E232D;flex:1;overflow:hidden}
.mock__meter span{display:block;height:100%;border-radius:99px;background:var(--c)}
.mock__ring{width:46px;height:46px;border-radius:50%;flex:none;background:conic-gradient(var(--c) 0 62%,#1E232D 62% 100%);position:relative}
.mock__ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#12141B}
.mock__stepline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:20px}
.mock__stepline::before{content:"";position:absolute;left:5px;top:8px;bottom:12px;width:2px;background:#222733}
.mock__step{position:relative;padding:7px 0}
.mock__step::before{content:"";position:absolute;left:-20px;top:12px;width:12px;height:12px;border-radius:50%;background:#12141B;border:2px solid #2C3341}
.mock__step.is-done::before{background:var(--c);border-color:var(--c)}
.mock__step .mock__t{font-size:11px;font-weight:700;color:var(--muted)}
.mock__step .mock__s{font-size:9.5px;color:var(--muted-2)}
.mock__tabbar{display:flex;justify-content:space-between;align-items:center;margin:auto -16px -16px;padding:12px 24px 14px;border-top:1px solid #1B1F29;background:#090B0F}
.mock__tabbar i{width:15px;height:15px;border-radius:4px;background:#2E3542;display:block}
.mock__tabbar i.is-on{background:var(--c)}

/* ── Жизнь внутри мокапов ──────────────────────────────────────────────
   Иллюстрации экранов были статичными картинками: двигалась одна каретка в
   карточке AI, да сами карточки едва заметно дрейфовали целиком. Каждому
   мокапу дано ровно ОДНО медленное движение — то, которое отвечает смыслу
   экрана: миниатюры портфолио проявляются по очереди, кнопки отклика и
   отправки пульсируют, шкалы заполняются, кольцо и пройденные шаги дышат.
   Одно на мокап — потому что два и больше превращают карточку в мигающую
   витрину; читаться должен экран, а не анимация.
   Только opacity и transform: композиторные свойства, раскладка не
   пересчитывается ни разу. Фазы разведены между карточками через --i, иначе
   вся лента пульсировала бы в такт; внутри карточки — только там, где
   элементы действительно соседи по разметке (миниатюры в grid3, строки
   шкал), чтобы селектор не зависел от вложенности, которая может измениться.
   Блок prefers-reduced-motion выше гасит их все одним правилом. */
@keyframes mockBreathe{0%,100%{opacity:.62}50%{opacity:1}}
@keyframes mockPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes mockFill{0%,100%{transform:scaleX(.45)}50%{transform:scaleX(1)}}

.mock__grid3 .mock__thumb,.mock__big,.mock__ring{
  animation:mockBreathe 7.5s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.9s)}
.mock__grid3 .mock__thumb:nth-child(2){animation-delay:-1.2s}
.mock__grid3 .mock__thumb:nth-child(3){animation-delay:-2.4s}
.mock__grid3 .mock__thumb:nth-child(4){animation-delay:-3.6s}
.mock__grid3 .mock__thumb:nth-child(5){animation-delay:-4.8s}
.mock__grid3 .mock__thumb:nth-child(6){animation-delay:-6s}

.mock__pillbtn,.mock__send,.mock__step.is-done::before{
  animation:mockPulse 5.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.7s)}
.mock__step.is-done:nth-child(2)::before{animation-delay:-2.4s}

/* Шкала растёт из своего начала, а не из середины: transform-origin по
   логической оси, чтобы в арабском она не росла справа налево наоборот. */
.mock__meter span{transform-origin:left;
  animation:mockFill 8s ease-in-out infinite;animation-delay:calc(var(--i,0)*-1.3s)}
.mock__meterrow:nth-child(2) .mock__meter span{animation-delay:-2.7s}
.mock__meterrow:nth-child(3) .mock__meter span{animation-delay:-5.4s}

.rail__dots{display:flex;justify-content:center;gap:9px;margin-top:0;flex-wrap:wrap}
.rail__dot{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:var(--line-strong);cursor:pointer;transition:transform .2s ease,background .2s ease,width .2s ease}
.rail__dot:hover{background:var(--muted-2)}
.rail__dot[aria-current="true"]{width:26px;background:var(--muted)}

.features__more{margin:clamp(30px,4vw,48px) auto 0;padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line);color:var(--muted);font-size:clamp(15px,1.5vw,18px);
  line-height:1.55;max-width:64ch;text-align:center}
.features__more b{color:var(--ink);font-weight:700}

/* ─────────────────────────  PLATFORMS  ───────────────────────── */
.plat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:clamp(28px,3.5vw,44px)}
.plat{background:radial-gradient(80% 62% at 0% 0%, color-mix(in srgb,var(--c) 9%,transparent), transparent 64%),var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px 20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.plat{transition:transform .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease)}
.plat:hover{transform:translateY(-4px);border-color:var(--line-strong);background:radial-gradient(80% 62% at 0% 0%, color-mix(in srgb,var(--c) 16%,transparent), transparent 66%),var(--surface-2)}
.plat .glyph{width:26px;height:26px;flex:none;color:var(--muted);transition:color .28s var(--ease),transform .28s var(--ease)}
.plat:hover .glyph{color:var(--ink);transform:scale(1.08)}
.plat .badge__sm{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plat .badge__lg{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin-top:5px;overflow-wrap:break-word}
@media (max-width:1080px){.plat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.plat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.plat-grid{grid-template-columns:1fr}}
.download__honest{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);padding:20px 22px;color:var(--muted);font-size:14px;display:flex;gap:14px;align-items:flex-start}
.download__honest .download__honest-dot{width:8px;height:8px;border-radius:50%;background:var(--j2);flex:none;margin-top:9px}

/* Очерёдность платформ видна по подаче: Mac и iPhone идут первыми и показаны
   в полную силу, остальные приглушены. Уровень .74 выбран расчётом — при нём
   мелкая строка бейджа (и так самая слабая на странице) удерживает порог
   читаемости; наведение возвращает полную яркость. */
/* Приглушение через filter, а не opacity, СОЗНАТЕЛЬНО: карточки платформ — это
   элементы появления, а @keyframes revealIn анимирует именно opacity до 1 с
   заливкой both. Анимация перебивает обычное объявление, и после появления
   карточка вернулась бы к полной яркости. filter анимация не трогает. */
[data-later]{filter:opacity(.8);transition:filter .28s var(--ease)}
[data-later]:hover{filter:none}

/* ─────────────────────────  INVESTORS  ─────────────────────────
   Разворот остался двухколоночным — той же семьи, что герой главной
   (1.03/0.97) и контакты (0.85/1.15), — но колонки связаны по НИЗУ.
   Обёрток invest__say и invest__do больше нет: пока это были два независимых
   блока, их высоты расходились (236 против 325), и подгонка отступов не
   лечила — на другом языке расхождение возвращалось. Теперь все шесть
   узлов — прямые дети одной сетки с ИМЕНОВАННЫМИ областями: партитура
   читается глазами, а новый узел без grid-area виден сразу (улетит в
   неявную строку под всем блоком, а не встанет посреди композиции).
   Кегль заголовка НЕ тронут: 47.2px на 1440 остаётся ниже героя главной
   (.hero__title b = 50.4px), иерархия страниц сайта не переворачивается. */
.invest{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  /* Надглавие занимает первую строку ОДНО: раньше лид стартовал с ним
     вровень и первая строка правой колонки оказывалась выше первой строки
     заголовка. Заголовок и лид теперь оба во второй строке — точка входа
     одна. Заодно 14px собственного margin у .eyebrow живут внутри своей
     строки и больше ничего не двигают. */
  grid-template-areas:
    "kicker  ."        /* 1 · надглавие                       */
    "title   lead"     /* 2 · общая верхняя кромка чтения     */
    "rule    rule"     /* 3 · ось блока во всю меру           */
    "promise promise"  /* 4 · что придёт в ответ, по центру   */
    "act     act";     /* 5 · действие, по центру             */
  /* Зазор только по горизонтали: вертикальный ритм задают собственные
     margin-block-start размещённых узлов — общий row-gap складывался бы
     с ними и размывал расписание. */
  column-gap:clamp(22px,3.6vw,52px);row-gap:0;
  padding-block:clamp(6px,1.6vw,22px)}
/* Автоминимум грид-элемента (min-width:auto) даёт длинному неразрывному
   токену раздуть трек и утащить за собой ВЕСЬ блок. overflow-wrap:break-word
   от этого не спасает — на min-content-вклад влияет только anywhere. Поэтому
   пол снят здесь, а перенос разрешён на самом заголовке ниже. */
.invest>*{min-width:0}
.invest .eyebrow{grid-area:kicker;margin-bottom:clamp(12px,1.2vw,16px)}
/* anywhere, а не break-word: та же защита, что на .hero__title главной, но
   работающая в гриде. balance убирает одинокое слово в последней строке
   четырёхстрочного русского заголовка; в старых Safari/Firefox тихо игнорится. */
.invest h1{grid-area:title;overflow-wrap:anywhere;text-wrap:balance}
/* Меру задаёт колонка, а не счёт символов: правый край лида, обещания и
   кнопки должен быть один. Верхние отступы примитивов обнулены, иначе они
   складываются со строкой и сбивают общую кромку. */
.invest .section__sub{grid-area:lead;margin-top:0;max-width:none}
/* Обещание и кнопка вынесены на общую ось: почты в этом блоке больше нет, а
   она одна держала низ левой колонки — без неё двухколоночный низ распался бы
   на текст справа и пустоту слева.
   Меры у строки намеренно нет: она и заставляла обещание ломаться надвое.
   Самая длинная из четырёх строк — русская, 564px, а контейнер даёт 1144px.
   Замерено: одна строка держится до 640px ширины окна, на 600px переносится
   сама — на телефоне в одну строку она не поместится ни при какой вёрстке. */
.invest__promise{grid-area:promise;margin:clamp(20px,2.4vw,30px) 0 0;
  color:var(--muted);font-size:14.5px;text-align:center}
/* Линия была вертикальной, шла по высоте правой колонки и обрывалась у
   карточки — случайный штрих. Теперь она горизонтальная, идёт через обе
   колонки и через зазор, во всю меру контейнера: сверху заявление, снизу
   предложение. Тон --line-strong, а не --line, потому что на этом сайте
   линия, которая ОТКРЫВАЕТ, идёт сильным тоном (засечка .eyebrow::before),
   а закрывающая — слабым (.features__more). Псевдоэлемент размещён явно,
   поэтому он не «лишний ребёнок грида», о который спотыкается правка. */
.invest::before{content:"";grid-area:rule;height:1px;background:var(--line-strong);
  margin-block-start:clamp(26px,3.4vw,42px)}
/* Обёртка оставлена НЕ ради раскладки: .reveal доигрывает revealIn с
   fill:both, и кадр to{transform:none} на самой кнопке погасил бы подъём
   при наведении. Появление висит на обёртке, движение — на кнопке.
   Раскладки на ней нет: ширину и центровку держит сама кнопка. */
.invest__acts{grid-area:act;margin-block-start:clamp(14px,1.5vw,20px)}
/* Главное действие страницы было 148×47 — мельче, чем «Отправить» в форме
   ниже. Теперь во всю ширину своей колонки и на общей нижней линии.
   line-height задан явно: с межстрочным интервалом body (1.62) высоту
   диктовал бы line-box, а не min-height, и число в макете переставало бы
   что-либо значить (именно отсюда бралось расхождение низов на 1024).
   Рамка 1px #3F6CE6 — это семья ссылок-кнопок сайта (.appstore-badge--primary),
   а не безрамочная форменная .contact__btn: Invest — якорная ссылка.
   Вся краска в одном правиле, модификатор --primary убран: второй,
   вторичной кнопки на странице нет и не будет. */
.invest__act{display:flex;align-items:center;justify-content:center;text-align:center;
  width:min(100%,360px);margin-inline:auto;
  min-height:clamp(56px,4.6vw,64px);padding-block:16px;padding-inline:clamp(22px,2.4vw,34px);
  border:1px solid #3F6CE6;border-radius:var(--r-out);color:#fff;
  background:linear-gradient(180deg,var(--j1),#2449B6);
  font-size:clamp(16px,1.2vw,17.5px);font-weight:700;line-height:1.2;letter-spacing:-.01em;
  transition:transform .2s var(--ease),background .2s var(--ease),
             border-color .2s var(--ease),box-shadow .2s var(--ease)}
/* Свечение — только в наведении. На этом сайте цветная тень в покое бывает
   лишь у неинтерактивного предмета (.hero__id img); все кнопки и карточки
   светятся исключительно при наведении. */
.invest__act:hover{transform:translateY(-2px);border-color:#4E79EC;
  background:linear-gradient(180deg,#3A6BE8,#2A54CC);
  box-shadow:0 18px 40px -18px rgba(46,96,224,.9)}

/* Ниже 820px колонок нет — связывать по низу нечего, и сетка выпрямляется
   в одну колонку. Порядок областей повторяет порядок DOM, поэтому лестница
   появления идёт строго сверху вниз. Линия остаётся: в столбике она делит
   рассказ и действие ровно так же, только во всю ширину экрана. */
@media (max-width:820px){
  .invest{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"kicker" "title" "lead" "rule" "promise" "act"}
  /* Верхний отступ лида обнулён выше ради общей кромки с заголовком — в одной
     колонке кромки нет, и без отступа лид слипается с заголовком вплотную. */
  .invest .section__sub{margin-block-start:clamp(16px,2.8vw,20px)}
  .invest::before{margin-block-start:clamp(20px,4vw,28px)}
  .invest__promise{margin-block-start:clamp(16px,3.4vw,22px)}
  .invest__acts{margin-block-start:clamp(18px,3.6vw,24px)}
}

/* ─────────────────────────  CONTACT  ───────────────────────── */
.contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:start}
.contact__links{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.contact__links a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-out);padding:12px 16px;transition:border-color .2s ease}
.contact__links a:hover{border-color:var(--line-strong)}
.contact__links .contact__k{color:var(--muted-2);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
form{--c:var(--gold);background:radial-gradient(80% 62% at 0% 0%, color-mix(in srgb,var(--c) 9%,transparent), transparent 64%),var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,3vw,30px)}
.contact__pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact__field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;min-width:0}
.contact__field label{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.contact__field input,.contact__field select,.contact__field textarea{font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-in);padding:12px 14px;width:100%;transition:border-color .2s ease}
.contact__field textarea{min-height:124px;resize:vertical}
.contact__field input::placeholder,.contact__field textarea::placeholder{color:var(--muted-2)}
.contact__field input:hover,.contact__field select:hover,.contact__field textarea:hover{border-color:#3E4658}
.contact__btn{width:100%;margin-top:4px;border:0;border-radius:var(--r-out);padding:15px 20px;cursor:pointer;font-family:var(--font-body);font-size:15.5px;font-weight:700;color:#fff;background:linear-gradient(180deg,#2E60E0,#2449B6);transition:transform .2s ease,filter .2s ease}
.contact__btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}
@media (max-width:520px){.contact__pair{grid-template-columns:1fr}}

/* ─────────────────────────  DOCK  ───────────────────────── */
.dock{position:sticky;bottom:0;z-index:55;border-top:1px solid var(--line);background:rgba(14,16,22,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.dock__inner{display:flex;align-items:center;gap:18px;padding-block:11px}
.dock__id{display:flex;align-items:center;gap:11px;flex:none}
.dock__id img{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 1px rgba(143,174,255,.2)}
.dock__id b{display:block;font-size:14px;font-weight:700;line-height:1.25}
.dock__id span{display:block;font-size:11.5px;color:var(--muted-2)}
.dock__row{margin-left:auto;display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.dock__row::-webkit-scrollbar{display:none}
.dock__badge{transition:transform .2s var(--ease),border-color .2s var(--ease);display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:13px;border:1px solid var(--line);background:var(--surface);text-decoration:none;white-space:nowrap;flex:none}
.dock__badge .glyph{width:18px;height:18px;flex:none;color:var(--muted)}
.dock__badge .mock__t{display:flex;flex-direction:column;line-height:1.15}
.dock__badge .badge__sm{font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dock__badge .badge__lg{font-size:12.5px;font-weight:700}
.dock__badge--primary{background:linear-gradient(180deg,#2E60E0,#2449B6);border-color:#3F6CE6;color:#fff}
.dock__badge--primary .badge__sm{color:#E8EEFF}
.dock__badge:hover{transform:translateY(-2px);border-color:var(--line-strong)}
@media (max-width:860px){.dock__id span{display:none}}
@media (max-width:620px){.dock__id{display:none}.dock__row{margin-left:0;width:100%}}
.dock__row{align-items:flex-end}
/* «Открыть в браузере · скоро» стоит над «Скачать для Mac» одной колонкой; ссылки
   пока нет, поэтому бейдж не кликается и не приподнимается. */
.dock__stack{display:flex;flex-direction:column;gap:7px;flex:none}
.dock__badge--soon{cursor:default;opacity:.82}
.dock__badge--soon:hover{transform:none;border-color:var(--line)}

/* ─────────────────────────  FOOTER  ───────────────────────── */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding-block:clamp(34px,4vw,52px)}
/* Четыре колонки: бренд шире прочих, потому что несёт описание и статус.
   На планшете становится 2×2, на телефоне — одна колонка. */
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:32px 26px}
.footer__brand{display:flex;flex-direction:column;gap:12px;min-width:0}
.footer__lockup{display:inline-flex;align-items:center;gap:11px}
.footer__brand img.footer__ico{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 1px rgba(143,174,255,.2)}
.footer__brand img.nav__mark{height:15px;width:auto}
.footer__brand p{color:var(--muted);font-size:13.5px;max-width:34ch;margin:0}
.footer__dev{display:inline-flex;align-items:center;gap:8px;color:var(--muted-2);font-size:12.5px}
.footer__dev::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--j2);box-shadow:0 0 10px color-mix(in srgb,var(--j2) 70%,transparent);
  animation:soonPulse 3.4s ease-in-out infinite}
.footer__col{display:flex;flex-direction:column;gap:2px;min-width:0}
.footer__col h3{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2)}
.footer__col a{color:var(--muted);font-size:13.5px;padding:5px 0;overflow-wrap:break-word;
  transition:color .2s var(--ease)}
.footer__col a:hover{color:var(--ink)}
@media (max-width:900px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__top{grid-template-columns:1fr;gap:26px}}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--line)}
.footer__legal a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600}
.footer__legal a:hover{color:var(--ink);text-decoration:underline}
.footer__bottom{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted-2);font-size:12.5px}
.footer__bottom .footer__motto{font-family:var(--font-mono);letter-spacing:.12em}

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero::before{inset:-10% -30% auto -10%}
}
@media (max-width:560px){
  .hero__id{flex-direction:column;align-items:flex-start;gap:14px}
  .hero__crest-tile{width:132px;padding:6px;border-radius:28px}
  .device__mac{width:70%}
  .device__phone{width:116px;height:240px;margin-inline-start:-12%}
}
@media (max-width:520px){
  .hero__id img{width:96px;height:96px;border-radius:24px}
  .hero__cta .appstore-badge{flex:1 1 100%;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rail{scroll-behavior:auto}
}

/* ============================================================
   Standalone legal/document pages (privacy.html, terms.html, …)
   ============================================================ */
.doc-body{min-height:100vh}
.doc__top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(20px,4vw,40px);background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,162,78,.18)}
.doc__home{color:var(--muted);font-size:14px;transition:color .2s}
.doc__home:hover{color:var(--ink)}
.doc__brand{display:inline-flex;align-items:center}
.doc__brand .wm-img{height:24px;width:auto;display:block}
.doc{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:clamp(30px,5vw,56px) clamp(20px,4vw,40px) 72px}
.doc__title{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,5vw,34px);letter-spacing:-.02em;line-height:1.15;margin:0 0 7px}
.doc__subtitle{color:var(--muted-2);font-size:13px;margin:0 0 34px}
/* Jurisdiction tabs on the legal pages. Without JS the EU version stays visible
   (the others carry the `hidden` attribute), so the page is never blank. */
.jur{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.jur__b{appearance:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:13px;padding:8px 14px;
  border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);
  color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.jur__b:hover{color:var(--ink);border-color:var(--line-strong)}
.jur__b.on{color:#F4E6C4;border-color:rgba(201,162,78,.5);
  background:linear-gradient(rgba(201,162,78,.18),rgba(201,162,78,.07))}
.jur__note{color:var(--muted-2);font-size:13px;margin:-18px 0 26px}
/* Document body typography (privacy/terms/cookie/consent/company pages).
   The global reset strips list bullets, so lists are restored here explicitly. */
.doc .legal__body{overflow:visible;padding:0}
.legal__body h3{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.01em;margin:30px 0 10px}
.legal__body h3:first-child{margin-top:0}
.legal__body h4{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink);margin:22px 0 8px}
.legal__body p{margin:0 0 13px}
.legal__body ul,.legal__body ol{margin:0 0 14px;padding-inline-start:22px;list-style:disc}
.legal__body ol{list-style:decimal}
.legal__body li{margin:0 0 7px}
.legal__body strong{color:var(--ink);font-weight:600}
.legal__body a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.legal__body table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px}
.legal__body th,.legal__body td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.legal__body th{color:var(--ink);font-weight:600;background:var(--surface)}
[dir="rtl"] .legal__body{text-align:right}
.doc__foot{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:26px clamp(20px,4vw,40px) 56px;
  border-top:1px solid var(--line);color:var(--muted-2);font-size:13px}
.doc__foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 12px}
.doc__foot a{color:var(--muted);transition:color .2s}
.doc__foot a:hover{color:var(--ink)}

/* ============================================================
   Legal documents — full-screen reader overlay
   ============================================================ */

/* ============================================================
   Branded access gate (server-side, served by gate.php)
   ============================================================ */
/* Sized by WIDTH here, unlike every other mount: the gate card is only 360px wide with 32px
   of padding, so a height-driven wordmark (42px ≈ 233px wide) overruns it on small phones.
   min() keeps the 42px look on roomy cards and shrinks it proportionally when it can't fit. */
.wm-img--gate{width:min(100%,233px);height:auto;margin-inline:auto}
#gate{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:24px}
html.locked #gate{display:flex}
html.locked,html.locked body{overflow:hidden}
.lang--gate{position:absolute;top:16px;right:16px;z-index:3}
[dir="rtl"] .lang--gate{right:auto;left:16px}
.lang--gate{display:inline-flex;align-items:center;gap:4px}
.lang--gate .lang__b{appearance:none;border:0;background:transparent;cursor:pointer;font-size:20px;line-height:1;
  padding:4px 5px;border-radius:8px;opacity:.5;filter:grayscale(.35);transition:opacity .18s,background .18s,filter .18s}
.lang--gate .lang__b:hover{opacity:.95;filter:grayscale(0);background:rgba(255,255,255,.07)}
.lang--gate .lang__b.on{opacity:1;filter:none;background:rgba(255,255,255,.12)}
.gate__card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px;
  width:100%;max-width:360px;padding:40px 32px 30px;border-radius:24px;background:var(--surface);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 40px 100px -30px rgba(0,0,0,.9)}
.gate__logo{width:100px;height:100px}
.gate__soon{display:inline-flex;align-items:center;gap:8px;margin:6px 0 4px;
  font-family:var(--font-display);font-weight:600;font-size:13.5px;letter-spacing:.01em;color:#5EE6A8}
.gate__soon-dot{width:7px;height:7px;border-radius:50%;background:#5EE6A8;box-shadow:0 0 10px #5EE6A8;animation:soonPulse 1.8s ease-in-out infinite}
@keyframes soonPulse{0%,100%{opacity:.45;transform:scale(.82)}50%{opacity:1;transform:scale(1.1)}}
.gate__title{margin:8px 0 0;display:inline-flex}
.gate__sub{color:var(--muted);font-size:13px;margin:0 0 10px}
.gate__field{width:100%}
.gate__field input{width:100%;height:46px;padding:0 16px;border-radius:13px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--ink);font-family:var(--font-body);font-size:15px;transition:border-color .2s,box-shadow .2s}
.gate__field input::placeholder{color:var(--muted-2)}
.gate__field input:focus{outline:none;border-color:rgba(94,230,168,.55);box-shadow:0 0 0 3px rgba(94,230,168,.15)}
.gate__btn{width:100%;height:46px;margin-top:4px;border:1px solid rgba(94,230,168,.5);border-radius:13px;
  background:linear-gradient(rgba(94,230,168,.18),rgba(94,230,168,.06));color:#E8FBF2;
  font-family:var(--font-display);font-weight:600;font-size:15px;cursor:pointer;transition:.2s}
.gate__btn:hover{box-shadow:0 0 30px -8px rgba(94,230,168,.55);border-color:rgba(94,230,168,.75)}
.gate__err{color:var(--jNeg,#FF8F6B);font-size:13px;margin:2px 0 0;min-height:16px;opacity:0;transition:opacity .2s}
#gateForm.show-err .gate__err{opacity:1}

/* ============================================================
   Scroll reveal
   ============================================================ */
/* Появление сделано АНИМАЦИЕЙ, а не переходом: на карточках .reveal висит
   вместе с .plat/.law/.rail__item, и transition-шорткат перебивал бы их
   собственные переходы наведения. Так вход и реакция не мешают друг другу. */
.js .reveal{opacity:0}
.reveal.in{animation:revealIn .7s var(--ease) both;animation-delay:calc(var(--i,0)*70ms)}
/* Появление держится ТОЛЬКО на анимации, а блок prefers-reduced-motion выше по
   файлу гасит анимации целиком — значит, у всех, кто попросил меньше движения,
   каждый .reveal навсегда оставался на opacity:0 и сайт открывался пустым.
   Правило стоит здесь, а не в том блоке: там оно идёт раньше .js .reveal и
   проиграло бы ему по порядку при равной специфичности. Опираемся на .js, а не
   на .in — так содержимое видно, даже если скрипт вообще не отработал. */
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1}}
@keyframes revealIn{
  from{opacity:0;transform:translateY(22px) scale(.988)}
  to{opacity:1;transform:none}
}

/* ---------- Прозрачность: замена размытия на плотный фон ---------- */
@media (prefers-reduced-transparency:reduce){
.nav,.dock,.doc__top{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(10,10,12,.94)!important}
}

/* Shared branding and stable iOS mockup after the app migration. */
.app-wordmark{font:800 15px Manrope,system-ui,sans-serif;letter-spacing:.06em;white-space:nowrap}
.nav__mark{display:none}.nav__brand{gap:0}.nav__x{display:none}
.device__phone .device__screen{border-radius:19px;padding:10px 6px 0;min-width:0}
.device__phone .device__island{top:10px;width:40px;height:11px}
.device__phone .phone__top{font-size:6px}.device__phone .phone__grid{gap:4px}
.device__phone .phone__avatar{width:24px;height:24px}.hero__art{padding-bottom:12px;min-width:0;overflow:visible}
@media(max-width:560px){.app-wordmark{font-size:11px}.nav__shire{min-width:132px;height:44px;padding:3px 12px}.nav__shire img{width:34px;height:34px}.nav__back-arrow{display:inline-block}.device__phone .device__screen{padding-top:6px}.hero__art{margin-bottom:18px}.device__mac{min-width:0}}

/* Floating controls over the neutral starfield. */
.nav, .nav.scrolled {
  background: transparent !important;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.nav--app .nav__shire {
  opacity: 1;
  width: max-content;
  min-width: 44px;
  height: 46px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.025));
  border-color: rgba(218,231,246,.3);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3),inset 0 -1px 1px rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.nav--app .nav__home-label { font-size: 16px; line-height: 1.25; }
.nav__flag { width:44px; height:44px; border-radius:14px; }
.nav__shire:focus-visible, .nav__flag:focus-visible { outline:2px solid #e0edff; outline-offset:4px; }

/* Mobile controls fade together; sticky layout stays in place. */
.nav--app {
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
}
.nav--app.is-scroll-hidden {
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, 0s, .3s;
}

/* One glass surface and readable type for the desktop app navigation. */
@media (min-width: 861px) {
  html:not(.is-handheld) .nav--app {
    margin-block-start: clamp(10px, 2.2vw, 24px);
    top: clamp(10px, 2.2vw, 24px);
  }
  html:not(.is-handheld) .nav--app .nav__inner {
    height: auto; min-height: 48px; gap: 10px;
    padding-left: max(var(--pad), calc(170px - (100vw - min(100vw, var(--maxw))) / 2));
    padding-right: max(var(--pad), calc(96px - (100vw - min(100vw, var(--maxw))) / 2));
  }
  html:not(.is-handheld) .nav--app .nav__shire {
    position: fixed;
    left: calc(env(safe-area-inset-left, 0px) + clamp(12px, 2.2vw, 24px));
    top: calc(env(safe-area-inset-top, 0px) + clamp(10px, 2.2vw, 24px));
    min-width: 44px; width: auto; height: 48px; padding: 10px 12px;
  }
  html:not(.is-handheld) .nav--app .nav__actions {
    position: fixed;
    right: calc(env(safe-area-inset-right, 0px) + var(--app-toolbar-offset, clamp(10px, 1.9vw, 26px)));
    top: calc(env(safe-area-inset-top, 0px) + var(--app-toolbar-offset, clamp(10px, 1.9vw, 26px)));
  }
  html:not(.is-handheld) .nav--app .nav__links { gap: 8px; margin-left: 0; margin-right: auto; flex-wrap: wrap; }
  html:not(.is-handheld) .nav--app :is(.nav__shire, .nav__links a, .nav__flag) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid rgba(218,231,246,.34);
    background: linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.035));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.32),inset 0 -1px 1px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.2);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    transition: transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
  }
  html:not(.is-handheld) .nav--app .nav__links a { padding: 10px 12px; border-radius: 15px; }
  html:not(.is-handheld) .nav--app .nav__home-label { font: inherit; }
  html:not(.is-handheld) .nav--app .nav__flag { width: 48px; height: 48px; border-radius: 15px; }
  html:not(.is-handheld) .nav--app :is(.nav__shire, .nav__links a, .nav__flag):hover {
    transform: translateY(-1px);
    border-color: rgba(224,237,255,.6);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.4),inset 0 -1px 1px rgba(255,255,255,.1),0 10px 26px rgba(0,0,0,.24);
  }
  html:not(.is-handheld) .nav--app :is(.nav__shire, .nav__links a, .nav__flag):focus-visible {
    outline: 2px solid #e0edff;
    outline-offset: 4px;
  }
}
@media (min-width: 861px) and (max-width: 1180px) {
  html:not(.is-handheld) .nav--app { --app-toolbar-offset: clamp(8px, 1.4vw, 18px); }
}

@media (max-width: 860px) {
  .hero__grid > div:first-child { text-align: center; }
  .hero__id { align-items: center; justify-content: center; text-align: center; }
  .hero__lead { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__cta .appstore-badge { justify-content: center; }
}

/* Phones and tablets keep the same centered composition in both orientations. */
html.is-handheld .nav__links { display: none; }
html.is-handheld .hero__grid { grid-template-columns: 1fr; gap: 40px; }
html.is-handheld .hero__grid > div:first-child { text-align: center; }
html.is-handheld .hero__id { flex-direction: column; align-items: center; text-align: center; }
html.is-handheld .hero__lead { margin-inline: auto; }
html.is-handheld .hero__cta, html.is-handheld .hero__cta .appstore-badge { justify-content: center; }
html.is-handheld .hero__art { width: 100%; max-width: 680px; margin-inline: auto; }

/* Переход на страницу подписки (/premium) из раздела на странице приложения. */
.subscribe__cta{margin-top:clamp(18px,2.4vw,26px)}
.subscribe__link{
  display:inline-block;padding:14px 26px;border-radius:var(--r-pill);
  background:var(--j1);color:#F3F6FF;font-weight:700;text-decoration:none;
  transition:filter .18s var(--ease),transform .18s var(--ease);
}
.subscribe__link:hover{filter:brightness(1.08)}
.subscribe__link:active{transform:translateY(1px)}
.subscribe__link:focus-visible{outline:2px solid var(--j1-t);outline-offset:3px}

/* Safari 26 на iPhone заливает зону под статус-баром и под своей нижней панелью
   СПЛОШНЫМ тоном, когда у кромки экрана стоит fixed/sticky-элемент (берёт его цвет,
   у прозрачного — чёрный). Здесь таких было двое: шапка (sticky top:0 — на телефоне
   она всё равно гаснет после 40px прокрутки, см. main.js) и плашка загрузок
   (sticky bottom:0). Шапка на телефоне идёт в потоке, плашка висит с зазором от
   кромки — тогда под барами Safari видна сама прокручиваемая страница.
   Десктоп (≥861px без касания) не меняется. */
@media (max-width:860px){
  .nav--app{position:relative}
  .dock{bottom:calc(10px + env(safe-area-inset-bottom,0px));margin-inline:10px;border:1px solid var(--line);border-radius:18px}
}
html.is-handheld .nav--app{position:relative}
html.is-handheld .dock{bottom:calc(10px + env(safe-area-inset-bottom,0px));margin-inline:10px;border:1px solid var(--line);border-radius:18px}