/* ==========================================================================
   Tegridy — глубина фона и движение.

   Под всем содержимым лежит сцена «Реки» (position: fixed): светлые токи
   бегут по сплетённым руслам, обнимают первый экран с боков и сходятся
   под ним. Выбрана владельцем 2026-09-21 из пяти вариантов. Сила сцены
   максимальна в первом экране и спадает при прокрутке: --sp (0..1)
   задаёт depth.js, он же рисует русла под размер окна.
   ========================================================================== */

:root {
  --sp: 0;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --glow-1: rgba(91, 56, 232, 0.26);
  --glow-2: rgba(56, 104, 255, 0.2);
  --scene-line: rgba(91, 56, 232, 0.2);
  --scene-line-hi: rgba(91, 56, 232, 0.55);
  --grain: 0.035;
}

:root[data-theme='dark'] {
  --glow-1: rgba(143, 109, 255, 0.46);
  --glow-2: rgba(64, 112, 255, 0.34);
  --scene-line: rgba(160, 132, 255, 0.34);
  --scene-line-hi: rgba(196, 178, 255, 0.9);
  --grain: 0.06;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --glow-1: rgba(143, 109, 255, 0.46);
    --glow-2: rgba(64, 112, 255, 0.34);
    --scene-line: rgba(160, 132, 255, 0.34);
    --scene-line-hi: rgba(196, 178, 255, 0.9);
    --grain: 0.06;
  }
}

/* --- Сцена ---------------------------------------------------------------- */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  /* Высота «большого» экрана: адресная строка телефона не дёргает фон */
  height: 100vh;
  height: 100lvh;
  bottom: auto;
  will-change: opacity;
  view-transition-name: scene;
}

body[data-page='app'] .scene { display: none; }

main,
.foot { position: relative; z-index: 1; }

.scene-layer { position: absolute; inset: 0; }

/* Зерно поверх любой сцены: снимает цифровую гладкость заливок */
.scene-grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Реки: светлые токи бегут по сплетённым руслам (пути рисует depth.js) - */

.scene-rivers { will-change: transform; } /* сдвиг задаёт depth.js в пикселях */

.rivers-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.rivers-svg .bed {
  fill: none;
  stroke: var(--scene-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.rivers-svg .flow {
  fill: none;
  stroke: var(--scene-line-hi);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 0.07 0.93;
  stroke-dashoffset: 1;
  animation: river-flow var(--t, 9s) linear infinite;
  animation-delay: var(--dl, 0s);
}

@keyframes river-flow { to { stroke-dashoffset: 0; } }

.scene-rivers::before {
  content: '';
  position: absolute;
  inset: 0;
  /* свет над заголовком и там, где русла сходятся под первым экраном */
  background: radial-gradient(ellipse 55% 40% at 50% 40%, var(--glow-1), transparent 72%),
    radial-gradient(ellipse 42% 18% at 50% 96%, var(--glow-2), transparent 75%);
  opacity: 0.8;
}

:root[data-theme='dark'] .tile-dark { background: rgba(20, 20, 26, 0.55); border-block: 1px solid var(--line); }
:root[data-theme='dark'] .tile-accent { background: color-mix(in srgb, var(--accent-soft) 72%, transparent); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tile-dark { background: rgba(20, 20, 26, 0.55); border-block: 1px solid var(--line); }
  :root:not([data-theme]) .tile-accent { background: color-mix(in srgb, var(--accent-soft) 72%, transparent); }
}

:root[data-theme='light'] .tile-accent,
:root:not([data-theme]) .tile-accent { background: color-mix(in srgb, var(--accent-soft) 82%, transparent); }

/* --- Тень как материал ---------------------------------------------------- */

.card {
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* --- Первый экран: один подписанный момент -------------------------------- */

.tile-hero .hero-inner { will-change: transform, opacity; } /* сдвиг задаёт depth.js */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Вход первого экрана — тот же набор, что у блоков ниже: opacity + сдвиг 10 px, 0.38 с,
   задержка по очереди (36 мс на ступень). Без размытия: на слабых телефонах оно мигало. */
:root.has-js .tile-hero .t-display:not(.is-split),
:root.has-js .tile-hero .hero-lead,
:root.has-js .tile-hero .hero-actions,
:root.has-js .tile-hero .hero-note {
  animation: rise-in 0.38s var(--ease) both;
}

/* Если разбить заголовок на слова не удалось, он всё равно появится */
:root.has-js .tile-hero .t-display:not(.is-split) { animation-delay: 0.04s; }
:root.has-js .tile-hero .hero-lead { animation-delay: 0.18s; }
:root.has-js .tile-hero .hero-actions { animation-delay: 0.22s; }
:root.has-js .tile-hero .hero-note { animation-delay: 0.26s; }

/* Заголовок проявляется по словам */
.t-display.is-split .w {
  display: inline-block;
  animation: rise-in 0.38s var(--ease) both;
  animation-delay: calc(0.04s + var(--i) * 0.036s);
}

/* --- Появление при прокрутке: один набор на всё -------------------------------
   opacity 0→1 + translateY(10px→0), 0.38 с, задержка min(i,6)·36 мс. Без размытия. */

:root.has-js .reveal {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

:root.has-js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.38s var(--ease), transform 0.38s var(--ease);
  transition-delay: var(--d, 0ms);
}

/* шаги: линия между шагами прорисовывается (как полоса прогресса, 600 мс) */
:root.has-js .steps-row li:not(:last-child)::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 0.2s);
}

:root.has-js .steps-row li.seen:not(:last-child)::after { transform: scaleX(1); }

/* --- Отклик на курсор ------------------------------------------------------ */

.nav-links a { position: relative; }

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s var(--ease-out);
}

.nav-links a:hover::after { transform: scaleX(1); transform-origin: left center; }

/* блик проходит по главной кнопке один раз при наведении */
/* clip, а не hidden: hidden делает кнопку прокручиваемым блоком, и во flex-ряду
   она сжимается до нуля, обрезая собственную надпись */
.btn-primary { position: relative; overflow: clip; isolation: isolate; }

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.8s var(--ease-out);
}

.btn-primary:hover::after { transform: translateX(130%); }

/* вопросы раскрываются плавно там, где браузер это умеет */
@supports selector(::details-content) {
  .faq-item { interpolate-size: allow-keywords; }

  .faq-item::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition: height 0.45s var(--ease-out), opacity 0.35s var(--ease-out),
      content-visibility 0.45s allow-discrete;
  }

  .faq-item[open]::details-content { height: auto; opacity: 1; }
}

/* --- Переходы между страницами -------------------------------------------- */

.nav { view-transition-name: nav; }

::view-transition-old(root) { animation: vt-out 0.17s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.17s var(--ease) both; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* --- Бережный режим -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* токи замирают, русла остаются: сцена статична, но не пуста */
  .scene * { animation: none !important; }
  .rivers-svg .flow { display: none; }
  .tile-hero .hero-inner,
  .scene-rivers { transform: none; opacity: 1; }
  :root.has-js .tile-hero .hero-inner > *,
  .t-display.is-split .w { animation: none !important; }
  .btn-primary::after { display: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* --- Первый экран: помещается в экран целиком ------------------------------ */

.tile-hero .hero-inner { gap: var(--s-4); }
.tile-hero .t-display { max-width: 16ch; }
.tile-hero .hero-lead { max-width: 40ch; }

/* --- Шапка на средних ширинах --------------------------------------------- */

/* Ссылки по центру и полный набор кнопок справа помещаются только от ~1165 px:
   ссылки и «Войти» уходят в меню, главное действие остаётся на виду. */
@media (max-width: 1179px) {
  .nav-links,
  .nav-login { display: none; }
  .nav-burger { display: inline-flex; }
}

/* --- Цели под палец ------------------------------------------------------- */

@media (pointer: coarse) {
  .btn-sm,
  .seg,
  .btn-icon { min-height: 44px; }
  .btn-icon { width: 44px; }
}

/* --- Ритм плиток плотнее: пустота между блоками читалась как «пусто» ------- */

.tile { padding-block: clamp(3.5rem, 2rem + 4.5vw, 6rem); }
.tile-hero { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }


/* В меню на узком экране вход и главное действие обязаны быть: правила,
   которые прячут их из шапки, задевали и копии внутри меню. [hidden]
   с !important по-прежнему решает, что показывать вошедшему. */
.nav-drawer-inner .nav-login,
.nav-drawer-inner .nav-cab { display: block; }
.nav-drawer-inner .nav-cta { display: inline-flex; }

/* Форма входа — объект, ей положена карточка. Класс plate-raised остался
   от прошлого мира и нигде не был описан: форма висела на фоне без подложки. */
.auth-card.plate-raised {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Мелкая подпись первого экрана лежит на свечении сцены: третьей ступени
   серого там не хватает контраста (замер по пикселям — до 3.2:1). */
.tile-hero .hero-note { color: var(--ink-2); }

/* ==========================================================================
   Жидкое стекло со свечением внутри — концепция Tegridy (набор «Liquid
   Glass v2» админки, cc/lg.html). Стекло лежит на сцене «Реки» и размывает
   её; кромка светлая сверху и тёмная снизу; внутри — свет акцента, который
   идёт за курсором.
   ========================================================================== */

:root {
  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.52));
  --glass-glow: radial-gradient(120% 90% at 50% -12%, rgba(91, 56, 232, 0.12), transparent 62%);
  --glass-edge: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(91, 56, 232, 0.07), inset 0 0 0 1px rgba(91, 56, 232, 0.11);
  --glass-drop: 0 18px 40px -22px rgba(43, 20, 110, 0.28);
  --glass-spot: rgba(91, 56, 232, 0.1);
  --glass-rule: rgba(91, 56, 232, 0.1);
  --glass-blur: blur(22px) saturate(170%);
}

:root[data-theme='dark'] {
  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  --glass-glow: radial-gradient(120% 90% at 50% -12%, rgba(143, 109, 255, 0.2), transparent 62%);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --glass-drop: 0 22px 48px -20px rgba(0, 0, 0, 0.8);
  --glass-spot: rgba(160, 130, 255, 0.16);
  --glass-rule: rgba(255, 255, 255, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
    --glass-glow: radial-gradient(120% 90% at 50% -12%, rgba(143, 109, 255, 0.2), transparent 62%);
    --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    --glass-drop: 0 22px 48px -20px rgba(0, 0, 0, 0.8);
    --glass-spot: rgba(160, 130, 255, 0.16);
    --glass-rule: rgba(255, 255, 255, 0.07);
  }
}

/* Пластина стекла: карточки, окна, финальная панель, форма входа */
.card,
.window,
.final-inner,
.auth-card.plate-raised {
  background: radial-gradient(440px circle at var(--mx, -999px) var(--my, -999px), var(--glass-spot), transparent 62%),
    var(--glass-glow), var(--glass-fill);
  border-color: transparent;
  box-shadow: var(--glass-edge), var(--glass-drop);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.plan:hover,
.window:hover {
  box-shadow: var(--glass-edge), var(--glass-drop), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Выделенный тариф светится изнутри сильнее и обведён светом акцента */
.plan-featured {
  background: radial-gradient(440px circle at var(--mx, -999px) var(--my, -999px), var(--glass-spot), transparent 62%),
    radial-gradient(130% 100% at 50% -20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 64%),
    var(--glass-fill);
  box-shadow: var(--glass-edge), inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    0 24px 60px -24px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Линейки внутри стекла — светом, а не серым */
.window .faq-item,
.cmp-row + .cmp-row,
.cmp-head,
.device-facts > div { border-color: var(--glass-rule); }
.cmp-head { background: transparent; }
.cmp-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* Финальная панель — главный кусок стекла внизу страницы */
.final-inner {
  background: radial-gradient(440px circle at var(--mx, -999px) var(--my, -999px), var(--glass-spot), transparent 62%),
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    var(--glass-fill);
}

/* Переключатель срока и режима входа — стеклянный жёлоб */
.period-switch,
.auth-modes {
  background: var(--glass-fill);
  border-color: transparent;
  box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Метки устройств и вторичные кнопки — стеклянные таблетки */
.apps-strip li,
.btn:not(.btn-primary):not(.btn-quiet) {
  background: var(--glass-fill);
  border-color: transparent;
  box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.btn:not(.btn-primary):not(.btn-quiet):hover { box-shadow: var(--glass-edge), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }

/* Главная кнопка — светящееся фиолетовое стекло. Белая надпись держит
   контраст не ниже 5:1 на самом светлом краю заливки. */
.btn-primary,
.seg[aria-pressed='true'] {
  --b-bg: linear-gradient(160deg, #7c48f5, #5428ce);
  --b-fg: #fff;
  background: var(--b-bg);
  color: var(--b-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 12px 28px -12px rgba(109, 61, 255, 0.85);
}

.btn-primary:hover {
  --b-bg: linear-gradient(160deg, #8a5af8, #5f32dc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 16px 36px -12px rgba(109, 61, 255, 0.95);
}

/* Номер шага — стеклянная линза со светом внутри */
.step-num {
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.04) 48%),
    linear-gradient(160deg, #7c48f5, #5428ce);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 28px -4px rgba(109, 61, 255, 0.7);
}

/* Шапка — полоса стекла */
.nav {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-bottom-color: var(--glass-rule);
  box-shadow: inset 0 -1px 0 var(--glass-rule);
  transition: background-color 0.4s var(--ease), border-color var(--dur-2) var(--ease);
}

/* Прилипшая шапка плотнее: под ней уже не сцена, а содержимое, и крупный
   заголовок не должен читаться сквозь меню (в Safari размытие слабее) */
.nav.is-stuck { background: color-mix(in srgb, var(--bg) 93%, transparent); }

/* Пункт меню того раздела, который сейчас на экране, остаётся подчёркнутым */
.nav-links a[aria-current] { color: var(--ink); }
.nav-links a[aria-current]::after { transform: scaleX(1); transform-origin: left center; }

/* Вопросы: текст отступает от кромки стекла */
.window.faq-list { padding: var(--s-1) 0; }
.window .faq-item summary { padding-inline: var(--s-6); }
.window .faq-item > p { padding-inline: var(--s-6); }
.window .faq-item:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

@media (max-width: 600px) {
  .window .faq-item summary,
  .window .faq-item > p { padding-inline: var(--s-4); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .window, .final-inner, .auth-card.plate-raised { background-color: var(--surface); }
}

@media (prefers-reduced-transparency: reduce) {
  .card, .window, .final-inner, .auth-card.plate-raised,
  .period-switch, .auth-modes, .apps-strip li, .btn:not(.btn-primary):not(.btn-quiet) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface);
  }
  .nav, .nav.is-stuck { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
}


/* Огоньки рек рисует depth.js на холсте поверх статичных русел */
.rivers-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
:root[data-theme='dark'] .rivers-flow { display: none; }