/* ============================================================================
   ecomvision.team — сайт приложений
   Три материала, один прибор.

   Оболочка одна: бумага, тёмный Остров сверху, одна сетка, одна типографика.
   Миры разные: «Дела» — бумага и синий Things, «Финансы» — стекло, ирис и мята,
   TopHalo — ночь и halo. Цвета приложений живут только в своих секциях.

   Подпись сайта — Остров: чёрная капсула у верхней кромки, которая ведёт себя
   как настоящий динамический остров: просыпается, показывает контекст, «пикает»
   событие, держит прогресс чтения и раскрывается по ⌘K.
   ========================================================================= */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-tight-cyrillic-v9.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-v9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+2318, U+21E7, U+2325, U+FEFF, U+FFFD;
}

/* ── Токены ─────────────────────────────────────────────────────────────── */
:root {
  /* Бумага — материал оболочки */
  --paper:    #f4f5f7;
  --paper-hi: #ffffff;
  --paper-lo: #e9ebef;
  --ink:      #0b0b0e;
  --ink-2:    #33353c;
  --mute:     #6b6f78;
  --fade:     #9ea2ac;
  --hair:     rgba(11, 11, 14, 0.08);
  --hair-2:   rgba(11, 11, 14, 0.15);

  /* Ночь — материал TopHalo */
  --night:    #050506;
  --night-hi: #101014;
  --night-lo: #0a0a0d;

  /* «Дела»: синий Things + смысловые цвета списков из самого приложения */
  --dela:       #2980f5;
  --dela-deep:  #0d5cdb;
  --dela-star:  #ffc71a;  /* Сегодня */
  --dela-moon:  #5e5ce6;  /* Вечером */
  --dela-flag:  #ff453a;  /* срок */
  --dela-book:  #30d158;  /* Журнал */

  /* «Финансы»: палитра снята с экспортов SF Symbols самого приложения */
  --fin-iris:    #3378e6;
  --fin-mint:    #4da380;
  --fin-mint-d:  #1a6b4a;
  --fin-apricot: #d69166;
  --fin-lav:     #857abd;
  --fin-grey:    #8e8e93;

  /* TopHalo */
  --halo:      #b66bff;
  --halo-soft: #d0a4ff;
  --halo-deep: #6834d6;

  /* Тени: одна семья, три глубины */
  --sh-1: 0 1px 2px rgba(11, 11, 14, 0.04), 0 8px 24px -14px rgba(11, 11, 14, 0.18);
  --sh-2: 0 2px 6px rgba(11, 11, 14, 0.06), 0 26px 52px -24px rgba(11, 11, 14, 0.28);
  --sh-3: 0 4px 12px rgba(11, 11, 14, 0.07), 0 48px 96px -40px rgba(11, 11, 14, 0.4);
  --sh-icon: 0 16px 34px -14px rgba(11, 11, 14, 0.34), 0 2px 4px rgba(11, 11, 14, 0.06);

  /* Радиусы — концентрические, как в приложениях */
  --r-ctl: 12px;   /* мелкий орган управления */
  --r-fld: 16px;   /* поле, строка */
  --r-srf: 22px;   /* контентная поверхность */
  --r-big: 30px;   /* крупная поверхность */

  /* Движение — та же грамматика, что в «Финансах» */
  --m-press: 140ms;
  --m-state: 260ms;
  --m-morph: 380ms;
  --m-num:   260ms;
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-snap:   cubic-bezier(0.2, 0.9, 0.2, 1);
  --e-spring: cubic-bezier(0.34, 1.5, 0.5, 1);

  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --container: 1200px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --sec:    clamp(64px, 7.6vw, 112px);
  --sec-sm: clamp(44px, 5.4vw, 76px);

  --t-mega:  clamp(2.9rem, 7.8vw, 7rem);
  --t-h1:    clamp(2.5rem, 6vw, 5.25rem);
  --t-h2:    clamp(1.9rem, 4.2vw, 3.5rem);
  --t-h3:    clamp(1.125rem, 1.7vw, 1.375rem);
  --t-lede:  clamp(1.0625rem, 1.3vw, 1.3125rem);
  --t-body:  clamp(0.9375rem, 1vw, 1.0625rem);
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --accent: var(--ink);
  color-scheme: light;
}

/* ── Сброс и основа ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(41, 128, 245, 0.18); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 11px 15px;
  border-radius: var(--r-ctl); font-weight: 500;
}
.skip:focus { top: 16px; }

/* ── Типографика ────────────────────────────────────────────────────────── */
.display {
  font-size: var(--t-mega);
  font-weight: 620;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-wrap: balance;
}
.h1 {
  font-size: var(--t-h1);
  font-weight: 620;
  letter-spacing: -0.042em;
  line-height: 0.98;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h2 {
  font-size: var(--t-h2);
  font-weight: 620;
  letter-spacing: -0.033em;
  line-height: 1.03;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.022em; line-height: 1.18; }
.lede { font-size: var(--t-lede); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.dim { color: var(--mute); }
.soft { color: var(--fade); }

/* Микро-метка: одна на всю систему */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
/* Инструментальный голос: всё числовое и техническое */
.mono { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Сетка ──────────────────────────────────────────────────────────────── */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { --container: 1400px; }
.section { padding-block: var(--sec); }
.section--sm { padding-block: var(--sec-sm); }
.section--tight { padding-block: clamp(36px, 4.5vw, 64px); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); }

/* Заголовок секции — один скелет, выравнивание задаёт секция */
.head { display: grid; gap: 14px; }
.head .h2 { max-width: 20ch; }
.head .lede { max-width: 54ch; margin-top: 2px; }
.head--center { justify-items: center; text-align: center; }
.head--center .h2, .head--center .lede { margin-inline: auto; }

/* ── Шапка ──────────────────────────────────────────────────────────────── */
.top {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.022em; font-size: 1.0625rem;
}
.brand img { width: 24px; height: 24px; border-radius: 6px; }
.brand span { color: var(--fade); font-weight: 500; }
.top__links { display: flex; gap: 6px; }
.top__links a {
  font-size: var(--t-small); color: var(--mute);
  padding: 7px 11px; border-radius: 999px;
  transition: color var(--m-press), background var(--m-press);
}
.top__links a:hover { color: var(--ink); background: rgba(11, 11, 14, 0.05); }
@media (max-width: 760px) {
  .top__links { display: none; }
  .top { height: auto; padding-top: 62px; padding-bottom: 4px; }
}

/* ══ ОСТРОВ ════════════════════════════════════════════════════════════════
   Подпись сайта. Пять состояний, одна капсула:
   покой (три иконки) → контекст (приложение) → пик (событие) → меню → ⌘K.
   ========================================================================= */
.island {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  translate: -50% 0;
  z-index: 100;
  width: var(--isl-w, 132px);
  background: #000;
  color: #fff;
  border-radius: 21px;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 14px 36px -14px rgba(11, 11, 14, 0.55);
  overflow: hidden;
  transition:
    width var(--m-morph) var(--e-spring),
    border-radius var(--m-state) var(--e-out),
    box-shadow var(--m-state) linear;
  will-change: width;
}
.island--boot { --isl-w: 78px; }
.island--boot .island__bar > * { opacity: 0; }
.island--ctx  { --isl-w: 186px; }
.island--peek { --isl-w: min(330px, 100vw - 28px); }
.island--open { --isl-w: min(392px, 100vw - 24px); border-radius: 25px; }
.island--find { --isl-w: min(452px, 100vw - 24px); border-radius: 25px; }
.island--halo {
  box-shadow:
    0 0 0 0.5px rgba(182, 107, 255, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 14px 44px -12px rgba(182, 107, 255, 0.5);
}

.island__bar { position: relative; display: flex; align-items: center; height: 40px; padding: 0 6px 0 10px; gap: 6px; }
.island__toggle {
  flex: 1 1 auto; min-width: 0; height: 40px;
  display: flex; align-items: center; gap: 8px;
  text-align: left; border-radius: 20px;
}
.island__toggle:focus-visible { outline-offset: -3px; outline-color: #fff; }

/* покой: три иконки */
.island__apps { display: flex; align-items: center; gap: 6px; }
.island__apps img { width: 18px; height: 18px; border-radius: 4.5px; }

/* контекст: иконка + имя */
.island__ctx { display: none; align-items: center; gap: 8px; min-width: 0; }
.island__ctx img { width: 20px; height: 20px; border-radius: 5px; flex: 0 0 auto; }
.island__name {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.island--ctx .island__apps,
.island--peek .island__apps { display: none; }
.island--ctx .island__ctx,
.island--peek .island__ctx { display: flex; }
.island--open .island__apps, .island--find .island__apps { display: flex; }
.island--open .island__ctx,  .island--find .island__ctx  { display: none; }

/* действие — только в состоянии пика */
.island__cta {
  display: none; flex: 0 0 auto; align-items: center;
  height: 28px; padding: 0 12px; margin-left: auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background var(--m-press);
}
.island__cta:hover { background: rgba(255, 255, 255, 0.26); }
.island__cta--soon { background: transparent; color: rgba(255, 255, 255, 0.62); font-weight: 500; padding-right: 4px; }
.island__cta--soon:hover { background: transparent; color: #fff; }
.island--peek .island__cta { display: inline-flex; }

.island__chev {
  flex: 0 0 auto; width: 28px; height: 28px; margin-left: auto;
  display: grid; place-items: center; border-radius: 14px;
  color: rgba(255, 255, 255, 0.55);
  transition: transform var(--m-state) var(--e-out), background var(--m-press), color var(--m-press);
}
.island__toggle:hover .island__chev { background: rgba(255, 255, 255, 0.12); color: #fff; }
.island--open .island__chev, .island--find .island__chev { transform: rotate(180deg); }
.island--peek .island__chev { display: none; }

/* прогресс чтения — как индикатор системы на настоящем острове */
.island__rail {
  position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px;
  border-radius: 2px; background: rgba(255, 255, 255, 0.12);
  opacity: 0; transition: opacity var(--m-state);
}
.island--scrolled .island__rail { opacity: 1; }
.island--open .island__rail, .island--find .island__rail { opacity: 0; }
.island__rail i {
  display: block; height: 100%; width: var(--p, 0%);
  border-radius: 2px; background: var(--isl-accent, #fff);
  transition: width 120ms linear, background var(--m-state);
}

/* раскрытая часть: меню и ⌘K */
.island__drop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--m-morph) var(--e-spring); }
.island--open .island__drop, .island--find .island__drop { grid-template-rows: 1fr; }
.island__drop > div { min-height: 0; overflow: hidden; }

.island__find { display: none; padding: 2px 8px 0; }
.island--find .island__find { display: block; }
.island__find input {
  width: 100%; height: 38px; padding: 0 12px;
  border: 0; border-radius: var(--r-ctl);
  background: rgba(255, 255, 255, 0.08);
  color: #fff; font-size: 0.875rem; letter-spacing: -0.01em;
}
.island__find input::placeholder { color: rgba(255, 255, 255, 0.4); }
.island__find input:focus { outline: none; background: rgba(255, 255, 255, 0.13); }

.island__list { padding: 4px 6px 6px; }
.island__item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: var(--r-fld);
  transition: background var(--m-press);
}
.island__item:hover, .island__item:focus-visible, .island__item[data-cursor] { background: rgba(255, 255, 255, 0.1); }
.island__item img { width: 30px; height: 30px; border-radius: 7.5px; flex: 0 0 auto; }
.island__item b { display: block; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.012em; }
.island__item small { display: block; font-size: var(--t-micro); color: rgba(255, 255, 255, 0.55); margin-top: 1px; }
.island__item > span:nth-child(2) { min-width: 0; }
.island__status {
  margin-left: auto; flex: 0 0 auto;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.5); white-space: nowrap;
}
.island__status--go { color: #fff; background: rgba(255, 255, 255, 0.15); padding: 5px 9px; border-radius: 10px; }
.island__links {
  display: flex; flex-wrap: wrap; gap: 3px;
  padding: 7px 8px 9px; margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.island__links a {
  font-size: var(--t-micro); color: rgba(255, 255, 255, 0.7);
  padding: 6px 9px; border-radius: 10px;
  transition: background var(--m-press), color var(--m-press);
}
.island__links a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.island__hint {
  margin-left: auto; align-self: center;
  font-family: var(--mono); font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.32); padding-right: 4px;
}
.island__empty { padding: 14px 12px 16px; font-size: var(--t-small); color: rgba(255, 255, 255, 0.5); }

@media (max-width: 720px) {
  .island--peek { --isl-w: min(300px, 100vw - 24px); }
  .island__hint { display: none; }
}

/* ── Кнопки и чипы ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px;
  border-radius: 23px;
  background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.014em;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09) inset;
  transition: transform var(--m-press) var(--e-out), background var(--m-press), box-shadow var(--m-state);
}
.btn:hover { background: #1c1c22; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: 0 0 0 1px var(--hair-2) inset; }
.btn--ghost:hover { background: rgba(11, 11, 14, 0.045); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: #eeeef2; }
.btn--halo { background: var(--halo); color: #180a22; box-shadow: 0 8px 28px -10px rgba(182, 107, 255, 0.65); }
.btn--halo:hover { background: var(--halo-soft); }
.btn--sm { height: 38px; padding: 0 15px; font-size: var(--t-small); border-radius: 19px; }
.btn--wide { width: 100%; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.actions--center { justify-content: center; }
/* сноска под кнопками — никогда не внутри строки кнопок */
.actions + .fineprint { margin-top: 14px; }
.fineprint { font-size: var(--t-small); color: var(--mute); max-width: 46ch; text-wrap: pretty; }
.fineprint b { color: var(--ink-2); font-weight: 600; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: 15px;
  font-size: var(--t-small); font-weight: 500; color: var(--mute);
  box-shadow: 0 0 0 1px var(--hair) inset;
  white-space: nowrap;
}
.chip--soon { color: var(--ink-2); background: rgba(11, 11, 14, 0.045); box-shadow: none; }
.chip--soon::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.chip--price { color: var(--ink); background: rgba(11, 11, 14, 0.045); box-shadow: none; font-weight: 600; }

.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  font-size: var(--t-small); color: var(--mute);
}
.meta .mono { font-size: var(--t-micro); }

/* Строка фактов «нулей» — тезис студии в инструментальном голосе */
.zeros {
  display: flex; flex-wrap: wrap; gap: 0;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.02em; color: var(--mute);
}
.zeros span { display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; border-left: 1px solid var(--hair); }
.zeros span:first-child { padding-left: 0; border-left: 0; }
.zeros b { font-weight: 600; color: var(--ink); font-size: 0.875rem; }
@media (max-width: 560px) {
  .zeros span { padding: 0 12px; }
}

/* ── Появление ──────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--e-out), transform 0.8s var(--e-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 70ms; }
.reveal[data-delay="2"] { transition-delay: 140ms; }
.reveal[data-delay="3"] { transition-delay: 210ms; }

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.footer {
  padding: 44px 0 calc(44px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair);
  font-size: var(--t-small); color: var(--mute);
}
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer a { transition: color var(--m-press); }
.footer a:hover { color: var(--ink); }
.footer__legal { margin-top: 20px; color: var(--fade); font-size: var(--t-micro); line-height: 1.6; max-width: 92ch; }

/* ── Ночь: перекраска токенов, а не отдельная тема ──────────────────────── */
.night {
  --paper: var(--night);
  --paper-hi: #101014;
  --paper-lo: #16161b;
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.8);
  --mute: rgba(255, 255, 255, 0.54);
  --fade: rgba(255, 255, 255, 0.34);
  --hair: rgba(255, 255, 255, 0.1);
  --hair-2: rgba(255, 255, 255, 0.2);
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -14px rgba(0, 0, 0, 0.85);
  --sh-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 28px 56px -22px rgba(0, 0, 0, 0.9);
  --sh-3: 0 4px 12px rgba(0, 0, 0, 0.6), 0 56px 100px -44px rgba(0, 0, 0, 0.95);
  --sh-icon: 0 18px 40px -14px rgba(182, 107, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.6);
  --accent: var(--halo);
  background: var(--night);
  color: #fff;
  color-scheme: dark;
}
.night ::selection { background: rgba(182, 107, 255, 0.35); }
.night .btn { background: #fff; color: var(--night); }
.night .btn:hover { background: #ededf2; }
.night .btn--ghost { background: transparent; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; }
.night .btn--ghost:hover { background: rgba(255, 255, 255, 0.07); }
.night .btn--halo { background: var(--halo); color: #180a22; }
.night .btn--halo:hover { background: var(--halo-soft); }
.night .chip { color: rgba(255, 255, 255, 0.72); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset; }
.night .chip--price { background: rgba(255, 255, 255, 0.09); color: #fff; box-shadow: none; }
.night .top__links a:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.night .island {
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 14px 36px -14px rgba(0, 0, 0, 0.9);
}
.night .island--halo {
  box-shadow:
    0 0 0 0.5px rgba(182, 107, 255, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 14px 46px -12px rgba(182, 107, 255, 0.55);
}
.night .footer__legal { color: rgba(255, 255, 255, 0.32); }

/* ── Уважение к настройкам ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}
.no-js .reveal { opacity: 1; transform: none; }
.no-js .island__drop { display: none; }
@media print { .island { display: none; } }

/* ══ ГЛАВНАЯ: тезис ════════════════════════════════════════════════════════ */
.hero { padding-top: clamp(52px, 8vw, 104px); padding-bottom: clamp(40px, 5vw, 72px); text-align: center; }
.hero .eyebrow { margin-bottom: 24px; }
.hero .display { margin-inline: auto; max-width: 13ch; }
.hero .display i { font-style: normal; color: var(--mute); }
.hero .lede { margin: 26px auto 0; max-width: 47ch; }
.hero .zeros { justify-content: center; margin-top: 30px; }

/* ── Три плитки: один каркас, три материала ─────────────────────────────── */
.hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
  margin-top: clamp(40px, 5vw, 68px);
  text-align: left;
}
.card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 366px;
  padding: clamp(22px, 2.3vw, 30px);
  border-radius: var(--r-big);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--e-out), box-shadow 0.5s var(--e-out);
}
.card:hover { transform: translateY(-4px); }
.card__icon {
  width: clamp(68px, 6.6vw, 86px); height: auto;
  border-radius: 22.5%;
  box-shadow: var(--sh-icon);
  transition: transform 0.6s var(--e-spring);
}
.card:hover .card__icon { transform: translateY(-5px) scale(1.035); }
.card__name { margin-top: 24px; font-size: 1.5rem; font-weight: 620; letter-spacing: -0.032em; line-height: 1.1; }
.card__promise {
  margin-top: 8px; font-size: 1.0625rem; line-height: 1.34; font-weight: 500;
  letter-spacing: -0.016em; text-wrap: pretty;
}
.card__body { margin-top: 12px; font-size: var(--t-small); line-height: 1.5; text-wrap: pretty; }
.card__foot { margin-top: auto; padding-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__plat { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase; }
.card__go {
  position: absolute; top: clamp(20px, 2.1vw, 26px); right: clamp(20px, 2.1vw, 26px);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  transition: background var(--m-state), color var(--m-state), transform 0.5s var(--e-out);
}
.card:hover .card__go { transform: translate(2px, -2px); }

/* Бумага — «Дела» */
.card--paper { background: var(--paper-hi); box-shadow: 0 0 0 1px var(--hair) inset, var(--sh-1); }
.card--paper:hover { box-shadow: 0 0 0 1px var(--hair) inset, var(--sh-2); }
.card--paper .card__promise { color: var(--ink-2); }
.card--paper .card__body, .card--paper .card__plat { color: var(--mute); }
.card--paper .card__plat { color: var(--fade); }
.card--paper .card__go { background: rgba(11, 11, 14, 0.05); color: var(--fade); }
.card--paper:hover .card__go { background: var(--ink); color: #fff; }

/* Стекло — «Финансы» */
.card--glass {
  background:
    radial-gradient(125% 85% at 6% -4%, rgba(133, 122, 189, 0.3), transparent 56%),
    radial-gradient(115% 85% at 100% 104%, rgba(77, 163, 128, 0.28), transparent 54%),
    linear-gradient(155deg, #ffffff 0%, #f1f3f9 62%, #eceff6 100%);
  box-shadow: 0 0 0 1px rgba(11, 11, 14, 0.07) inset, 0 2px 0 -1px rgba(255, 255, 255, 1) inset, var(--sh-1);
}
.card--glass:hover { box-shadow: 0 0 0 1px rgba(11, 11, 14, 0.06) inset, 0 1px 0 rgba(255, 255, 255, 0.9) inset, var(--sh-2); }
.card--glass .card__promise { color: var(--ink-2); }
.card--glass .card__body { color: var(--mute); }
.card--glass .card__plat { color: var(--fade); }
.card--glass .card__go { background: rgba(11, 11, 14, 0.05); color: var(--fade); }
.card--glass:hover .card__go { background: var(--fin-iris); color: #fff; }
/* блик стекла идёт за курсором */
.card--glass::after {
  content: ""; position: absolute; inset: -40%; z-index: -1;
  background: radial-gradient(38% 38% at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.85), transparent 70%);
  opacity: 0; transition: opacity 0.5s var(--e-out);
}
.card--glass:hover::after { opacity: 1; }

/* Ночь — TopHalo */
.card--night {
  background: radial-gradient(95% 62% at 50% -12%, rgba(182, 107, 255, 0.36), transparent 62%), #08080b;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, var(--sh-2);
}
.card--night:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, var(--sh-3), 0 40px 90px -50px rgba(182, 107, 255, 0.6); }
.card--night .card__promise { color: rgba(255, 255, 255, 0.92); }
.card--night .card__body { color: rgba(255, 255, 255, 0.6); }
.card--night .card__plat { color: rgba(255, 255, 255, 0.42); }
.card--night .card__icon { box-shadow: 0 18px 42px -14px rgba(182, 107, 255, 0.6); }
.card--night .card__go { background: rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.7); }
.card--night:hover .card__go { background: #fff; color: var(--ink); }
.card--night .chip { color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset; }
.card--night .chip--price { color: #fff; background: rgba(255, 255, 255, 0.11); box-shadow: none; font-weight: 600; }
.card--night .btn { background: #fff; color: var(--ink); }
.card--night .btn:hover { background: #eeeef2; }

@media (max-width: 980px) {
  .hub { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .card__foot { padding-top: 22px; }
}

/* ══ АКТЫ: один скелет, три композиции ════════════════════════════════════ */
.act { position: relative; padding-block: clamp(60px, 7.5vw, 108px); }
.act__label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.act__label img { width: 26px; height: 26px; border-radius: 6.5px; box-shadow: 0 6px 14px -6px rgba(11, 11, 14, 0.35); }
.night .act__label img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 18px rgba(182, 107, 255, 0.35); }
.act .h2 { max-width: 17ch; }
.act .lede { margin-top: 18px; }
.act .actions { margin-top: 30px; }

/* Список особенностей — маркер берёт акцент секции */
.feat { margin-top: 26px; display: grid; gap: 13px; }
.feat li { position: relative; padding-left: 26px; color: var(--ink-2); line-height: 1.5; text-wrap: pretty; }
.feat li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 11px; height: 11px; border-radius: 3.5px;
  background: var(--accent);
}
.feat b { color: var(--ink); font-weight: 600; }

/* Две колонки: текст и медиа */
.act__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 52px) clamp(16px, 2.4vw, 32px); align-items: center; }
.act__grid > .act__text  { grid-column: 1 / span 5; }
.act__grid > .act__media { grid-column: 6 / span 7; }
.act--flip .act__grid > .act__text  { grid-column: 8 / span 5; }
.act--flip .act__grid > .act__media { grid-column: 1 / span 7; }

/* Медиа во всю ширину, текст под ним в две колонки */
.act__head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.act__head .h2 { max-width: 20ch; }
.act__head .lede { margin-top: 16px; max-width: 60ch; }
.act__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px clamp(16px, 2.4vw, 32px); align-items: start; }
.act__cols > :first-child { grid-column: 1 / span 5; }
.act__cols > :last-child  { grid-column: 7 / span 6; }
.act__cols .feat { margin-top: 0; }

.act--dela { --accent: var(--dela); }
.act--fin  { --accent: var(--fin-iris); }
.act--halo { --accent: var(--halo); overflow: hidden; }

@media (max-width: 980px) {
  .act__grid > .act__text, .act__grid > .act__media,
  .act--flip .act__grid > .act__text, .act--flip .act__grid > .act__media { grid-column: 1 / -1; }
  .act__cols > :first-child, .act__cols > :last-child { grid-column: 1 / -1; }
  .act .h2 { max-width: none; }
}

/* Свет выключается срезом: любое затухание светлого в чёрное даёт грязный серый */
.act--halo { padding-block: clamp(88px, 10.5vw, 152px); }

/* ── Сцена для готового изображения ─────────────────────────────────────── */
.stage {
  position: relative; border-radius: var(--r-big); overflow: hidden;
  background: var(--paper-lo);
  box-shadow: 0 0 0 1px var(--hair) inset, var(--sh-1);
}
.stage img { width: 100%; height: 100%; object-fit: cover; }
.stage--contain img { object-fit: contain; }
.stage--16x9  { aspect-ratio: 16 / 9; }
.stage--16x10 { aspect-ratio: 16 / 10; }
.stage--16x11 { aspect-ratio: 16 / 11; }
.stage--4x3   { aspect-ratio: 4 / 3; }
.stage--tall  { aspect-ratio: 4 / 4.6; }
.stage--glass { background: linear-gradient(158deg, #f7f8fc, #e8ecf3); }
.stage--pad { padding: clamp(18px, 3vw, 42px); display: grid; place-items: center; }
.stage--pad img { border-radius: var(--r-fld); }
.stage-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.5vw, 18px); }
.stage-duo .stage { aspect-ratio: 4 / 5; }
.stage-stack { display: grid; gap: clamp(12px, 1.5vw, 18px); }
.stage-stack .stage { aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .stage-duo { grid-template-columns: 1fr; } .stage-duo .stage { aspect-ratio: 4 / 3; } }

/* ── Корпус iPhone ──────────────────────────────────────────────────────── */
.phone {
  position: relative; width: 100%; aspect-ratio: 9 / 19.5;
  border-radius: clamp(28px, 11%, 52px);
  background: #0f1014; padding: 3.2%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07) inset,
    0 0 0 1px rgba(11, 11, 14, 0.45),
    0 40px 80px -34px rgba(11, 11, 14, 0.5);
}
.phone::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px #2a2b31 inset, 0 0 0 4px #0f1014 inset;
}
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: clamp(20px, 8.5%, 42px); overflow: hidden; background: var(--paper); }
.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone--sm { width: min(100%, 292px); }
.phone__island { position: absolute; top: 2.6%; left: 50%; translate: -50% 0; width: 27%; height: 3.4%; border-radius: 999px; background: #050506; }

/* ══ ПРИНЦИП ══════════════════════════════════════════════════════════════ */
.principle { position: relative; }
.principle .grid { align-items: start; row-gap: 36px; }
.principle__lead { grid-column: 1 / span 4; position: sticky; top: 96px; }
.principle__lead .h2 { max-width: 11ch; margin-top: 14px; }
.principle__lead .lede { margin-top: 18px; max-width: 32ch; }
.rules { grid-column: 6 / span 7; display: grid; }
.rules > div {
  display: grid; grid-template-columns: minmax(0, 12rem) 1fr; gap: 8px 20px;
  padding: 18px 0; border-top: 1px solid var(--hair);
}
.rules > div:last-child { border-bottom: 1px solid var(--hair); }
.rules dt { font-weight: 600; letter-spacing: -0.018em; }
.rules dd { color: var(--mute); text-wrap: pretty; }
@media (max-width: 980px) {
  .principle__lead { grid-column: 1 / -1; position: static; }
  .rules { grid-column: 1 / -1; }
  .rules > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ══ РОЛИК ════════════════════════════════════════════════════════════════ */
.reel__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px clamp(16px, 2.4vw, 32px); align-items: end; margin-bottom: 34px; }
.reel__head > :first-child { grid-column: 1 / span 7; }
.reel__head > :last-child { grid-column: 8 / span 5; }
.reel__head .h2 { max-width: 19ch; margin-top: 14px; }
.reel__head p { font-size: var(--t-body); color: var(--mute); text-wrap: pretty; }
@media (max-width: 980px) { .reel__head > :first-child, .reel__head > :last-child { grid-column: 1 / -1; } }

.player {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--r-big); overflow: hidden;
  background: var(--paper-lo);
  box-shadow: 0 0 0 1px var(--hair) inset, var(--sh-2);
}
.player video, .player img { width: 100%; height: 100%; object-fit: cover; }
.player__poster { position: absolute; inset: 0; transition: opacity 0.5s var(--e-out); }
.player__play {
  position: absolute; left: clamp(16px, 2.2vw, 26px); bottom: clamp(16px, 2.2vw, 26px);
  display: inline-flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 8px 0 18px; border-radius: 26px;
  background: rgba(11, 11, 14, 0.92); color: #fff;
  font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.014em;
  backdrop-filter: blur(10px);
  transition: transform var(--m-state) var(--e-spring), background var(--m-press);
}
.player__play svg { width: 16px; height: 16px; }
.player__play:hover { transform: scale(1.03); background: #000; }
.player__dur {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.13);
  padding: 8px 10px; border-radius: 15px;
}
.player--playing .player__poster, .player--playing .player__play { opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
  .player__play { left: auto; right: 14px; bottom: 14px; height: 48px; width: 48px; padding: 0; justify-content: center; border-radius: 24px; }
  .player__play .player__label, .player__play .player__dur { display: none; }
}

/* ══ СТУДИЯ ═══════════════════════════════════════════════════════════════ */
.studio { border-top: 1px solid var(--hair); }
.studio .grid { align-items: center; row-gap: 22px; }
.studio__text { grid-column: 1 / span 7; }
.studio__text .h3 { max-width: 30ch; }
.studio__text p { margin-top: 10px; color: var(--mute); max-width: 52ch; text-wrap: pretty; }
.studio__actions { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 980px) {
  .studio__text, .studio__actions { grid-column: 1 / -1; }
  .studio__actions { justify-content: flex-start; }
}

/* ══ СТРАНИЦА ПРИЛОЖЕНИЯ ══════════════════════════════════════════════════ */
.apphero { padding-top: clamp(36px, 5vw, 68px); padding-bottom: clamp(44px, 6vw, 84px); }
.apphero .grid { align-items: center; row-gap: 40px; }
.apphero__text { grid-column: 1 / span 6; }
.apphero__media { grid-column: 7 / span 6; }
.apphero__icon { width: clamp(80px, 8.5vw, 112px); height: auto; border-radius: 22.5%; box-shadow: var(--sh-icon); margin-bottom: 26px; }
.night .apphero__icon { box-shadow: var(--sh-icon), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.apphero .eyebrow { margin-bottom: 14px; }
.apphero .h1 i { font-style: normal; color: var(--mute); }
.apphero .lede { margin-top: 20px; max-width: 44ch; }
.apphero .actions { margin-top: 28px; }
.apphero .meta { margin-top: 22px; }
@media (max-width: 980px) { .apphero__text, .apphero__media { grid-column: 1 / -1; } }

/* Три опоры */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 18px); }
.pillar {
  padding: 26px; border-radius: var(--r-srf);
  background: var(--paper-hi);
  box-shadow: 0 0 0 1px var(--hair) inset;
}
.pillar__n { display: block; font-family: var(--mono); font-size: var(--t-micro); color: var(--accent); margin-bottom: 12px; letter-spacing: 0.06em; }
.pillar .h3 { font-size: 1.125rem; }
.pillar p { margin-top: 9px; color: var(--mute); font-size: var(--t-small); line-height: 1.5; text-wrap: pretty; }
.night .pillar { background: rgba(255, 255, 255, 0.045); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }

/* Спецификации */
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.specs > div { display: grid; grid-template-columns: minmax(0, 12rem) 1fr; gap: 8px 16px; padding: 15px 0; border-top: 1px solid var(--hair); }
.specs dt { color: var(--mute); font-size: var(--t-small); }
.specs dd { font-weight: 500; letter-spacing: -0.012em; text-wrap: pretty; }
.specs dd .mono { font-size: 0.8125rem; }
@media (max-width: 820px) { .specs { grid-template-columns: 1fr; } }

/* Вопросы */
.faq { display: grid; max-width: 840px; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 0; font-weight: 600; letter-spacing: -0.018em; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat,
    rgba(11, 11, 14, 0.05);
  color: var(--mute);
  transition: transform var(--m-state) var(--e-out);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); max-width: 66ch; text-wrap: pretty; }
.night .faq summary::after { background-color: rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.7); }

/* Шаги установки — здесь номер несёт смысл: это порядок */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 18px); }
.steps li {
  counter-increment: step; padding: 24px; border-radius: var(--r-srf);
  background: var(--paper-hi); box-shadow: 0 0 0 1px var(--hair) inset;
}
.night .steps li { background: rgba(255, 255, 255, 0.045); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
.steps li::before {
  content: counter(step);
  display: inline-grid; place-items: center; width: 27px; height: 27px;
  border-radius: 50%; background: var(--accent); color: #180a22;
  font-family: var(--mono); font-weight: 600; font-size: 0.8125rem;
  margin-bottom: 14px;
}
.steps b { display: block; font-weight: 600; letter-spacing: -0.014em; }
.steps p { margin-top: 6px; color: var(--mute); font-size: var(--t-small); line-height: 1.5; text-wrap: pretty; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* Финальный призыв */
.cta-final { text-align: center; }
.cta-final .h2 { max-width: 19ch; margin-inline: auto; }
.cta-final .lede { margin: 16px auto 0; max-width: 42ch; }
.cta-final .actions { justify-content: center; margin-top: 28px; }
.cta-final .fineprint { margin-inline: auto; text-align: center; }
.cta-final .meta { justify-content: center; margin-top: 18px; }

/* Карточка загрузки и заметка */
.dl-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center;
  padding: 14px 18px; border-radius: var(--r-srf);
  background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset;
  text-align: left;
}
.dl-card .k { font-family: var(--mono); font-size: 0.6875rem; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.08em; }
.dl-card code { font-family: var(--mono); font-size: 0.6875rem; color: rgba(255, 255, 255, 0.62); word-break: break-all; line-height: 1.5; }
.note {
  padding: 15px 18px; border-radius: var(--r-fld);
  background: var(--paper-hi); box-shadow: 0 0 0 1px var(--hair) inset;
  font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty;
}
.night .note { background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset; color: rgba(255, 255, 255, 0.74); }
.note b { color: var(--ink); font-weight: 600; }

/* Аудит приватности — таблица показаний прибора */
.audit {
  display: grid; border-radius: var(--r-srf);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset;
  padding: 6px 20px;
}
.audit > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.audit > div:first-child { border-top: 0; }
.audit dt { color: rgba(255, 255, 255, 0.62); font-size: var(--t-small); }
.audit dd { font-family: var(--mono); font-size: 0.8125rem; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.audit dd.ok { color: #5fe0ce; }
.audit dd.halo { color: var(--halo-soft); }
@media (max-width: 720px) { .audit > div { flex-direction: column; align-items: flex-start; gap: 3px; } .audit dd { text-align: left; } }

/* Галерея экранов */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); align-items: end; }
.gallery figure { display: grid; gap: 14px; }
.gallery figcaption { font-size: var(--t-small); color: var(--mute); text-align: center; text-wrap: pretty; }
@media (max-width: 820px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } .gallery .phone { width: min(100%, 320px); margin-inline: auto; } }

/* Знак TopHalo */
.halo-mark { width: 88px; height: auto; filter: drop-shadow(0 0 18px rgba(182, 107, 255, 0.55)); }
@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(182, 107, 255, 0.4)); }
  50%      { filter: drop-shadow(0 0 28px rgba(182, 107, 255, 0.8)); }
}
.halo-mark--live { animation: breathe 5s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════════════════
   ЖИВЫЕ ДЕМО
   Не скриншоты. Каждое приложение показано своим материалом и своей
   механикой: у «Дел» — разбор строки и галочка, у «Финансов» — одно число
   и его расчёт, у TopHalo — сам остров с четырьмя страницами.
   ═════════════════════════════════════════════════════════════════════════ */

.dm {
  position: relative;
  border-radius: var(--r-big);
  overflow: hidden;
  container-type: inline-size;
  box-shadow: 0 0 0 1px var(--hair) inset, var(--sh-2);
}
.dm__chrome {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border-bottom: 1px solid var(--hair);
}
.dm__lights { display: flex; gap: 6px; }
.dm__lights i { width: 10px; height: 10px; border-radius: 50%; background: #d9dbe0; }
.dm__title {
  margin-inline: auto;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.02em;
  color: var(--fade);
}
.dm__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fade);
}
.dm__live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.dm__body { padding: clamp(16px, 3cqw, 26px); }

/* ── «Дела»: бумага, разбор строки, галочка ─────────────────────────────── */
.dm--paper { background: var(--paper-hi); }
.dm--paper .dm__lights i:first-child { background: #ff5f57; }
.dm--paper .dm__lights i:nth-child(2) { background: #febc2e; }
.dm--paper .dm__lights i:nth-child(3) { background: #28c840; }

.dela__head { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }
.dela__head svg { width: 21px; height: 21px; color: var(--dela-star); }
.dela__head b { font-size: 1.375rem; font-weight: 620; letter-spacing: -0.03em; }
.dela__head time { margin-left: auto; font-family: var(--mono); font-size: 0.6875rem; color: var(--fade); }

.dela__group { margin-top: 6px; }
.dela__sep {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 0 6px;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dela-moon);
}
.dela__sep svg { width: 13px; height: 13px; }

.dela__row {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 420ms var(--e-out), opacity 260ms linear;
}
.dela__row > span { overflow: hidden; display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.dela__row:first-child > span { border-top: 0; }
.dela__row.is-gone { grid-template-rows: 0fr; opacity: 0; }
.dela__row.is-new > span { animation: rowIn 420ms var(--e-out) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.dela__box {
  flex: 0 0 auto; position: relative;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 7px;
  box-shadow: 0 0 0 1.8px var(--fade) inset;
  background: transparent;
  transition: background var(--m-press), box-shadow var(--m-press), transform 220ms var(--e-spring);
}
.dela__box:hover { box-shadow: 0 0 0 1.8px var(--dela) inset; }
.dela__box::after {
  content: ""; position: absolute; left: 7px; top: 4px;
  width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.2); opacity: 0;
  transition: transform 260ms var(--e-spring), opacity 120ms linear;
}
.dela__row.is-done .dela__box { background: var(--dela); box-shadow: 0 0 0 1.8px var(--dela) inset; transform: scale(1.06); }
.dela__row.is-done .dela__box::after { transform: rotate(45deg) scale(1); opacity: 1; }

.dela__main { min-width: 0; flex: 1 1 auto; }
.dela__name { display: block; letter-spacing: -0.014em; transition: color 260ms linear; }
.dela__row.is-done .dela__name { color: var(--fade); }
.dela__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.dela__crumb { font-size: var(--t-micro); color: var(--fade); }
.dela__when { font-size: var(--t-micro); font-weight: 600; color: var(--dela-deep); font-variant-numeric: tabular-nums; }
.dela__tag { font-size: var(--t-micro); font-weight: 600; color: var(--dela-moon); }
.dela__note { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-micro); color: var(--fade); }
.dela__flag { flex: 0 0 auto; margin-top: 3px; width: 14px; height: 14px; color: var(--dela-flag); }

.dela__foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.dela__done {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--fade);
  display: inline-flex; align-items: center; gap: 6px;
}
.dela__done b { color: var(--dela-book); font-weight: 600; }

.dela__compose {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 8px 0 14px; margin-top: 14px;
  border-radius: var(--r-fld);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--hair) inset;
  transition: box-shadow var(--m-state);
}
.dela__compose:focus-within { box-shadow: 0 0 0 1.5px var(--dela) inset; background: var(--paper-hi); }
.dela__compose svg { width: 18px; height: 18px; color: var(--dela); flex: 0 0 auto; }
.dela__compose input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  font-size: var(--t-body); letter-spacing: -0.012em;
}
.dela__compose input::placeholder { color: var(--fade); }
.dela__add {
  flex: 0 0 auto; height: 34px; padding: 0 14px; border-radius: 17px;
  background: var(--dela); color: #fff;
  font-size: var(--t-small); font-weight: 600; letter-spacing: -0.01em;
  transition: background var(--m-press), opacity var(--m-press);
}
.dela__add:hover { background: var(--dela-deep); }
.dela__add[disabled] { opacity: 0.35; cursor: default; }

.dela__parse { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin-top: 10px; padding-left: 2px; }
.dela__parse:empty { margin-top: 0; min-height: 0; }
.dela__chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: 13px;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: -0.005em;
  animation: chipIn 240ms var(--e-spring) both;
}
@keyframes chipIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
.dela__chip--when { background: rgba(41, 128, 245, 0.13); color: var(--dela-deep); }
.dela__chip--tag  { background: rgba(94, 92, 230, 0.14); color: #4a48c9; }
.dela__chip--due  { background: rgba(255, 69, 58, 0.13); color: #c62b21; }
.dela__chip--hint { background: rgba(11, 11, 14, 0.05); color: var(--mute); font-weight: 500; }

/* ── «Финансы»: стекло, одно число, честный расчёт ──────────────────────── */
.dm--glass {
  background: linear-gradient(168deg, #fdfdff, #f1f3f8);
  box-shadow: 0 0 0 1px rgba(11, 11, 14, 0.07) inset, 0 1px 0 rgba(255, 255, 255, 0.9) inset, var(--sh-2);
}
.dm--glass .dm__chrome { border-bottom-color: rgba(11, 11, 14, 0.07); }
.dm--glass .dm__lights i:first-child { background: #ff5f57; }
.dm--glass .dm__lights i:nth-child(2) { background: #febc2e; }
.dm--glass .dm__lights i:nth-child(3) { background: #28c840; }

.fin { display: grid; gap: clamp(16px, 2.4cqw, 24px); }
@container (min-width: 720px) {
  .fin { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: clamp(20px, 3cqw, 40px); }
}
.fin__panel {
  padding: clamp(16px, 2.4cqw, 22px);
  border-radius: var(--r-srf);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 1px rgba(11, 11, 14, 0.06) inset;
}
.fin__horizon { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fin__horizon .eyebrow { letter-spacing: 0.07em; }
.fin__eye { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--fin-grey); transition: background var(--m-press); }
.fin__eye:hover { background: rgba(11, 11, 14, 0.06); }
.fin__eye svg { width: 16px; height: 16px; }

.fin__amount {
  margin-top: 8px;
  display: flex; align-items: baseline; gap: 0.14em;
  font-size: clamp(2.25rem, 6.4cqw, 3.375rem);
  font-weight: 560; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fin__amount.is-private { filter: blur(9px); user-select: none; }
.fin__cur { font-size: 0.56em; font-weight: 500; color: var(--mute); }

/* Одометр: цифры катятся по разрядам, как numericText в приложении */
.odo { display: inline-flex; align-items: baseline; line-height: 1; }
.odo__s { position: relative; display: inline-block; height: 1em; overflow: hidden; }
.odo__s::before { content: "0"; visibility: hidden; }
.odo__col { position: absolute; left: 0; right: 0; top: 0; height: 1000%; display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -10%)); transition: transform 520ms var(--e-out); }
.odo__col span { height: 10%; display: flex; align-items: center; justify-content: center; }
.odo__gap { display: inline-block; width: 0.28em; }

.fin__ok { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: var(--t-small); color: var(--fin-mint-d); }
.fin__ok svg { width: 15px; height: 15px; }

.fin__disclose {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-top: 14px; padding: 11px 13px;
  border-radius: var(--r-ctl);
  background: transparent;
  box-shadow: 0 0 0 1px rgba(11, 11, 14, 0.08) inset;
  font-size: var(--t-small); font-weight: 500; letter-spacing: -0.01em;
  transition: background var(--m-press);
}
.fin__disclose:hover { background: rgba(11, 11, 14, 0.05); }
.fin__disclose svg { width: 14px; height: 14px; color: var(--mute); transition: transform var(--m-state) var(--e-out); }
.fin__disclose[aria-expanded="true"] svg { transform: rotate(180deg); }
.fin__calc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--m-morph) var(--e-out); }
.fin__calc.is-open { grid-template-rows: 1fr; }
.fin__calc > div { min-height: 0; overflow: hidden; }
.fin__calcrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 13px; font-size: var(--t-small);
  border-top: 1px solid rgba(11, 11, 14, 0.07);
}
.fin__calcrow:first-child { border-top: 0; padding-top: 12px; }
.fin__calcrow span { color: var(--mute); }
.fin__calcrow b { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.fin__calcrow--sum { border-top: 1px solid rgba(11, 11, 14, 0.16); }
.fin__calcrow--sum span { color: var(--ink); font-weight: 600; }
.fin__calcrow--sum b { font-weight: 600; color: var(--fin-iris); }

/* Рельса прогноза */
.fin__rail { position: relative; height: 54px; margin-top: 14px; }
.fin__rail-line { position: absolute; left: 0; right: 0; top: 24px; height: 3px; border-radius: 3px; background: rgba(11, 11, 14, 0.09); }
.fin__rail-line i { display: block; height: 100%; width: 34%; border-radius: 3px; background: var(--fin-iris); }
.fin__mark { position: absolute; top: 12px; translate: -50% 0; display: grid; justify-items: center; gap: 5px; }
.fin__mark b { width: 11px; height: 11px; border-radius: 50%; background: var(--fin-apricot); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); }
.fin__mark span { font-family: var(--mono); font-size: 0.625rem; color: var(--mute); white-space: nowrap; }
.fin__rail-ends { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.625rem; color: var(--fade); }

/* Запись операции */
.fin__compose {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 8px 0 14px;
  border-radius: var(--r-fld);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(11, 11, 14, 0.08) inset;
  transition: box-shadow var(--m-state);
}
.fin__compose:focus-within { box-shadow: 0 0 0 1.5px var(--fin-iris) inset; }
.fin__compose svg { width: 17px; height: 17px; color: var(--fin-iris); flex: 0 0 auto; }
.fin__compose input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: var(--t-small); }
.fin__compose input::placeholder { color: var(--fade); }
.fin__add { flex: 0 0 auto; height: 32px; padding: 0 13px; border-radius: 16px; background: var(--fin-iris); color: #fff; font-size: var(--t-small); font-weight: 600; transition: background var(--m-press), opacity var(--m-press); }
.fin__add:hover { background: #2765c9; }
.fin__add[disabled] { opacity: 0.35; cursor: default; }
.fin__parse { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin-top: 9px; }
.fin__parse:empty { min-height: 0; margin-top: 0; }
.fin__chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: var(--t-micro); font-weight: 600; animation: chipIn 240ms var(--e-spring) both; }
.fin__chip--kind { background: rgba(51, 120, 230, 0.13); color: #2765c9; }
.fin__chip--cat  { background: rgba(133, 122, 189, 0.16); color: #5b52a0; }
.fin__chip--sum  { background: rgba(11, 11, 14, 0.06); color: var(--ink); font-variant-numeric: tabular-nums; }
.fin__chip--acc  { background: rgba(77, 163, 128, 0.16); color: var(--fin-mint-d); }
.fin__chip--hint { background: rgba(11, 11, 14, 0.05); color: var(--mute); font-weight: 500; }

/* Недавние операции */
.fin__ops { margin-top: 14px; display: grid; }
.fin__op { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 420ms var(--e-out); }
.fin__op > span { overflow: hidden; display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid rgba(11, 11, 14, 0.07); }
.fin__op.is-new > span { animation: rowIn 420ms var(--e-out) both; }
.fin__sym { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(11, 11, 14, 0.05); color: var(--fin-grey); }
.fin__sym svg { width: 15px; height: 15px; }
.fin__sym--in { background: rgba(77, 163, 128, 0.16); color: var(--fin-mint-d); }
.fin__opmain { min-width: 0; flex: 1 1 auto; }
.fin__opmain b { display: block; font-size: var(--t-small); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin__opmain span { display: block; font-size: var(--t-micro); color: var(--fade); }
.fin__opsum { flex: 0 0 auto; font-family: var(--mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.fin__opsum--in { color: var(--fin-mint-d); }

/* ── TopHalo: сцена и остров ────────────────────────────────────────────── */
.macstage {
  position: relative;
  aspect-ratio: 16 / 10.2;
  border-radius: 22px 22px 14px 14px;
  overflow: hidden;
  container-type: inline-size;
  background:
    radial-gradient(52% 40% at 50% -8%, rgba(182, 107, 255, 0.46), transparent 68%),
    radial-gradient(58% 52% at 88% 92%, rgba(104, 52, 214, 0.42), transparent 62%),
    radial-gradient(46% 40% at 8% 78%, rgba(24, 124, 140, 0.24), transparent 64%),
    linear-gradient(178deg, #171334 0%, #0c0a18 56%, #06050b 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 56px 110px -54px rgba(182, 107, 255, 0.4),
    0 34px 70px -40px rgba(0, 0, 0, 0.9);
}
.macstage__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 5.4%; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.4%;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
  font-size: clamp(6px, 1.05cqw, 11px);
  color: rgba(255, 255, 255, 0.62);
}
.macstage__bar b { font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.macstage__bar-l, .macstage__bar-r { display: flex; align-items: center; gap: 1.4em; }
.macstage__bar-r { font-variant-numeric: tabular-nums; }
.macstage__win {
  position: absolute; left: 9%; right: 26%; top: 19%; bottom: 19%;
  border-radius: 12px;
  background: rgba(24, 22, 40, 0.62);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset, 0 30px 60px -34px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.macstage__win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 11%; background: rgba(255, 255, 255, 0.05); }
.macstage__win::after {
  content: ""; position: absolute; left: 4%; top: 3.4%;
  width: 7px; height: 7px; border-radius: 50%; background: #ff5f57;
  box-shadow: 12px 0 0 #febc2e, 24px 0 0 #28c840; opacity: 0.8;
}
.macstage__lines { position: absolute; left: 6%; right: 8%; top: 20%; bottom: 12%; display: grid; align-content: space-between; }
.macstage__lines i { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.macstage__lines i:nth-child(2) { width: 74%; }
.macstage__lines i:nth-child(3) { width: 86%; background: rgba(182, 107, 255, 0.3); }
.macstage__lines i:nth-child(4) { width: 48%; }
.macstage__lines i:nth-child(5) { width: 68%; }
.macstage__lines i:nth-child(6) { width: 58%; background: rgba(95, 224, 206, 0.26); }
.macstage__dock {
  position: absolute; left: 50%; bottom: 3.2%; translate: -50% 0;
  height: 6.4%; width: 33%; border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset;
  display: flex; align-items: center; justify-content: space-evenly; padding: 0 2%;
  backdrop-filter: blur(10px);
}
.macstage__dock i { width: 9%; aspect-ratio: 1; border-radius: 24%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12)); }
.macstage__dock i:nth-child(2) { background: linear-gradient(135deg, #5fe0ce, #187c8c); }
.macstage__dock i:nth-child(3) { background: linear-gradient(135deg, #ff9f0a, #ff5f57); }
.macstage__dock i:nth-child(4) { background: linear-gradient(135deg, #b66bff, #6834d6); }
.macstage__dock i:nth-child(5) { background: linear-gradient(135deg, #32d74b, #0f7a3a); }

/* Остров = сам вырез. Никакого зазора между корпусом и HUD. */
.hud {
  position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 3;
  --hud-w: 264px; --hud-h: 32px; --hud-r: 13px;
  width: var(--hud-w); height: var(--hud-h);
  background: #000; color: #fff;
  border-radius: 0 0 var(--hud-r) var(--hud-r);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 20px 46px -18px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  text-align: left;
  transition: width var(--m-morph) var(--e-spring), height var(--m-morph) var(--e-spring), border-radius var(--m-state) var(--e-out);
}
.hud[tabindex] { cursor: pointer; }
.hud:focus-visible { outline: 2px solid var(--halo); outline-offset: 3px; }
.hud[data-state="peek"]     { --hud-w: 308px; --hud-h: 78px;  --hud-r: 22px; }
.hud[data-state="expanded"] { --hud-w: 360px; --hud-h: 164px; --hud-r: 36px; }
@container (max-width: 660px) {
  .hud { --hud-w: 186px; --hud-h: 26px; --hud-r: 11px; }
  .hud[data-state="peek"]     { --hud-w: 232px; --hud-h: 60px; --hud-r: 18px; }
  .hud[data-state="expanded"] { --hud-w: 288px; --hud-h: 150px; --hud-r: 30px; }
}
.hud::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(182, 107, 255, 0), 0 0 26px rgba(182, 107, 255, 0);
  transition: box-shadow 600ms linear;
}
.hud[data-state="expanded"]::after { box-shadow: 0 0 0 1px rgba(182, 107, 255, 0.32), 0 0 34px rgba(182, 107, 255, 0.3); }

.hud__layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 180ms linear; }
.hud[data-state="compact"] .hud__layer--compact,
.hud[data-state="peek"] .hud__layer--peek,
.hud[data-state="expanded"] .hud__layer--expanded { opacity: 1; transition-delay: 130ms; }
.hud[data-state="expanded"] .hud__layer--expanded { pointer-events: auto; }

/* компакт: обложка слева от камеры, эквалайзер справа */
.hud__layer--compact { display: flex; align-items: center; justify-content: space-between; padding: 0 11px; }
.hud__cam { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 5px; height: 5px; border-radius: 50%; background: #16161c; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); }
.hud__art { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, #c58bff, #5b2fbf 58%, #2a1258); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset; flex: 0 0 auto; }
.hud__art--teal { background: linear-gradient(135deg, #5fe0ce, #187c8c 58%, #05283a); }
.hud__art--lg { width: 54px; height: 54px; border-radius: 12px; }
.hud__eq { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.hud__eq i { width: 3px; border-radius: 2px; background: #fff; height: 40%; transform-origin: bottom; animation: eq 1.1s ease-in-out infinite; }
.hud__eq i:nth-child(2) { animation-delay: -0.35s; height: 85%; }
.hud__eq i:nth-child(3) { animation-delay: -0.7s;  height: 60%; }
.hud__eq i:nth-child(4) { animation-delay: -0.15s; height: 95%; }
@keyframes eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* пик: событие пришло само */
.hud__layer--peek { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-weight: 600; font-size: 15px; letter-spacing: -0.012em; font-variant-numeric: tabular-nums; }
.hud__peek { display: none; align-items: center; gap: 9px; width: 100%; justify-content: space-between; }
.hud__peek--on { display: flex; }
.hud__peek svg { width: 17px; height: 17px; flex: 0 0 auto; }
.hud__peek i { font-style: normal; display: inline-flex; align-items: center; gap: 9px; }
.hud__peek small { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.hud__peek--battery { color: #32d74b; }
.hud__peek--timer   { color: #ff9f0a; }
.hud__peek--bt      { color: #fff; }
.hud__peek--focus   { color: var(--halo-soft); }

/* развёрнутый: четыре страницы, как в приложении */
.hud__pages { position: absolute; inset: 0; }
.hud__page { position: absolute; inset: 0; padding: 13px 15px 16px; opacity: 0; pointer-events: none; transition: opacity 200ms linear; }
.hud__page.is-on { opacity: 1; pointer-events: auto; }

.hud__now { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 12px; row-gap: 7px; }
.hud__title { align-self: center; min-width: 0; }
.hud__title b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud__title span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.55); margin-top: 1px; }
.hud__scrub { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9.5px; color: rgba(255, 255, 255, 0.55); }
.hud__bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.hud__bar i { display: block; height: 100%; width: 34%; background: #fff; border-radius: 2px; animation: scrub 45s linear infinite; }
@keyframes scrub { from { width: 34%; } to { width: 82%; } }
.hud__transport { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.tbtn { width: 29px; height: 29px; border-radius: 15px; display: grid; place-items: center; color: rgba(255, 255, 255, 0.85); transition: background var(--m-press); }
.tbtn:hover { background: rgba(255, 255, 255, 0.13); }
.tbtn svg { width: 15px; height: 15px; }
.tbtn--play { color: #fff; }
.tbtn--play svg { width: 18px; height: 18px; }

.hud__today { display: grid; gap: 7px; align-content: start; }
.hud__ev { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); }
.hud__ev i { width: 3px; align-self: stretch; border-radius: 2px; background: var(--halo); }
.hud__ev--soon i { background: #ff9f0a; }
.hud__ev b { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud__ev span { margin-left: auto; font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, 0.55); flex: 0 0 auto; }
.hud__ev-main { min-width: 0; }
.hud__ev-main small { display: block; font-size: 10px; color: rgba(255, 255, 255, 0.45); }

.hud__sys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.hud__tile { padding: 9px; border-radius: 11px; background: rgba(255, 255, 255, 0.07); display: grid; gap: 4px; }
.hud__tile svg { width: 15px; height: 15px; }
.hud__tile b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hud__tile span { font-size: 9.5px; color: rgba(255, 255, 255, 0.48); }
.hud__tile--bat svg { color: #32d74b; }
.hud__tile--net svg { color: #5fe0ce; }
.hud__tile--foc svg { color: var(--halo-soft); }

.hud__shelf { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; height: 100%; }
.hud__shelf-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 10.5px; color: rgba(255, 255, 255, 0.55); }
.hud__shelf-head b { color: #fff; font-weight: 600; font-size: 13px; letter-spacing: -0.012em; }
.hud__files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hud__file { border-radius: 10px; background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset; padding: 7px; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 5px; }
.hud__file i { display: block; border-radius: 5px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08)); position: relative; }
.hud__file i::after { content: ""; position: absolute; left: 24%; right: 24%; top: 30%; height: 2.5px; border-radius: 2px; background: rgba(0, 0, 0, 0.32); box-shadow: 0 7px 0 rgba(0, 0, 0, 0.24), 0 14px 0 rgba(0, 0, 0, 0.14); }
.hud__file i.pdf { background: linear-gradient(160deg, #ff8a80, #c62828); }
.hud__file i.img { background: linear-gradient(160deg, #5fe0ce, #187c8c); }
.hud__file i.img::after { top: 42%; left: 32%; right: 32%; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); box-shadow: none; }
.hud__file span { font-size: 9px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud__file--drop { background: transparent; box-shadow: none; outline: 1.5px dashed rgba(182, 107, 255, 0.55); outline-offset: -2px; display: grid; place-items: center; font-size: 9px; color: rgba(255, 255, 255, 0.5); }

/* точки-страницы: ими можно листать */
.hud__dots { position: absolute; left: 50%; bottom: 6px; translate: -50% 0; display: flex; gap: 4px; z-index: 2; }
.hud__dot { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; }
.hud__dot::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: background var(--m-press), transform var(--m-press); }
.hud__dot[aria-selected="true"]::before { background: #fff; transform: scale(1.15); }
.hud__dot:hover::before { background: rgba(255, 255, 255, 0.65); }

/* Подпись сцены */
.stagewrap { display: grid; gap: 16px; }
.stagewrap > .macstage { width: 100%; }
.macstage__cue {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-small); color: var(--mute);
  transition: opacity var(--m-state);
}
.macstage__cue::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--halo); box-shadow: 0 0 10px rgba(182, 107, 255, 0.8);
  animation: pulse 2.4s ease-in-out infinite;
}
.stagewrap:has(.macstage.is-touched) .macstage__cue { opacity: 0.25; }

/* Ряд из трёх состояний */
.hudrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.hudrow figure { display: grid; gap: 13px; }
.hudcell {
  position: relative; aspect-ratio: 16 / 6.6; border-radius: var(--r-srf); overflow: hidden;
  container-type: inline-size;
  background:
    radial-gradient(60% 60% at 50% -10%, rgba(182, 107, 255, 0.3), transparent 66%),
    linear-gradient(178deg, #14112a, #08070f);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.hudcell .macstage__bar { height: 9%; }
.hudcell .hud { pointer-events: none; }
.hudrow figcaption { font-size: var(--t-small); color: var(--mute); text-wrap: pretty; }
.hudrow figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; letter-spacing: -0.014em; }
@media (max-width: 900px) { .hudrow { grid-template-columns: 1fr; } .hudcell { aspect-ratio: 16 / 5.6; } }

/* ── Мелкие связки ──────────────────────────────────────────────────────── */
.fin__panel .eyebrow + .fin__compose { margin-top: 10px; }
.fin__panel .fin__parse + .eyebrow { display: block; margin-top: 16px; }
.fin__panel > .eyebrow:first-child + .fin__compose { margin-top: 10px; }
.stack-sm > * + * { margin-top: 14px; }
.stack-md > * + * { margin-top: 22px; }
.mt-lg { margin-top: clamp(28px, 3.6vw, 48px); }

/* Плавные переходы между страницами сайта */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── Лицензия ───────────────────────────────────────────────────────────── */
.pricecard {
  display: grid; gap: clamp(24px, 3vw, 44px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-big);
  background: radial-gradient(90% 120% at 0% 0%, rgba(182, 107, 255, 0.16), transparent 60%), rgba(255, 255, 255, 0.045);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
@media (min-width: 820px) { .pricecard { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.pricecard__sum { font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 620; letter-spacing: -0.045em; line-height: 1; }
.pricecard__sum small { font-size: 0.34em; font-weight: 500; color: var(--mute); letter-spacing: -0.01em; margin-left: 0.3em; }
.pricecard__note { margin-top: 10px; color: var(--mute); }
.pricecard .btn { margin-top: 22px; }
.pricecard .fineprint { margin-top: 16px; }
.pricecard__list { display: grid; gap: 0; align-self: center; }
.pricecard__list li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-2); text-wrap: pretty;
}
.pricecard__list li:first-child { border-top: 0; padding-top: 0; }
.pricecard__list li::before {
  content: ""; flex: 0 0 auto; margin-top: 0.36em;
  width: 14px; height: 8px; border: solid var(--halo); border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

/* Установка: шаги, архив и первый запуск в одном блоке */
.install { display: grid; gap: clamp(20px, 2.6vw, 32px); }
.install__box { display: grid; gap: 16px; align-content: start; }
@media (min-width: 900px) { .install__box { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px clamp(20px, 3vw, 40px); } }
.stage--halo { background: radial-gradient(60% 50% at 50% 50%, rgba(182, 107, 255, 0.26), transparent 70%), #08070d; }