/* ============================================================================
   Lectify — промо-сайт lectify.app
   ----------------------------------------------------------------------------
   Фон — живой WebGL (шейдер ink, палитра sky) из прототипов экрана входа.
   Всё остальное здесь: стекло, типографика, секции, карусель возможностей.
   ========================================================================== */

:root {
  --ink:        #0B1020;   /* основной текст */
  --ink-soft:   #2A3242;   /* вторичный текст */
  --accent:     #2F6BD8;
  --accent-dp:  #1E4FA8;
  --radius-lg:  28px;
  --radius-md:  20px;
  --radius-sm:  14px;
  --maxw:       1120px;
  --gutter:     24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: #EAF1FB;                 /* цвет из палитры sky — виден до старта WebGL */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* ── Живой фон ───────────────────────────────────────────────────────────────
   Канвас закреплён во вьюпорте, а не в потоке: страница прокручивается ПОВЕРХ
   фона. Иначе рисунок пришлось бы растягивать на всю высоту документа, и на
   длинной странице масштаб узора поехал бы вместе с ней. */
#bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}

/* Вуаль. Живой фон меняет светлоту под текстом, поэтому контраст «дышит»:
   одна и та же строка то читается, то нет. Вуаль фиксирует нижнюю границу
   читаемости — но плотность у неё ИЗМЕРЕННАЯ, а не подобранная на глаз.

   Замер палитры sky с шейдером ink (17 тыс. сэмплов кадра, чтение буфера в
   том же тике, что и отрисовка): 1-й процентиль относительной яркости фона
   = 0.328. Это даёт контраст 6.82:1 для основного текста (#0B1020) и 4.63:1
   для вторичного (#2A3242) ВООБЩЕ БЕЗ вуали — оба уже проходят WCAG AA.
   Вуаль 0.15 поднимает вторичный до ~5.9, оставляя рисунок видимым.
   Стоявшие здесь ~0.6 давали контраст 10:1 и стирали фон почти полностью.

   ⚠️ Если менять палитру или шейдер — замер надо повторить: другая палитра
   двигает нижнюю границу яркости, и та же вуаль перестаёт быть достаточной. */
.veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% 8%, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.22) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.12) 100%);
}

.page { position: relative; z-index: 2; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Стекло ──────────────────────────────────────────────────────────────────
   contain: paint обязателен везде, где стеклянный элемент лежит внутри
   контейнера с overflow: hidden. backdrop-filter берёт подложку из корневого
   слоя и игнорирует обрезку предка — без contain соседний слайд карусели
   остаётся видимым за её границей. */
.glass {
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 0 0 1px rgba(255,255,255,0.55),
    0 18px 46px rgba(19, 43, 92, 0.10);
}

/* ── Шапка ─────────────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 40;
  padding: 12px 0;
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  border-radius: 999px; padding: 9px 10px 9px 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; }
.brand img { width: 28px; height: 28px; border-radius: 8px; display: block; }
.brand span { font-size: 17px; font-weight: 650; letter-spacing: -0.4px; }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 7px 12px; border-radius: 999px; transition: background 160ms ease, color 160ms ease;
}
.nav a:hover { background: rgba(255,255,255,0.6); color: var(--ink); }

.lang {
  display: flex; gap: 2px; flex: none; padding: 3px;
  border-radius: 999px; background: rgba(11,16,32,0.06);
}
.lang button {
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px;
  border: 0; background: transparent; color: var(--ink-soft);
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.lang button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(19,43,92,0.14); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 76px 0 92px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--accent-dp);
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.55); box-shadow: inset 0 0 0 1px rgba(47,107,216,0.18);
}
.eyebrow i { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); flex: none; }

h1 {
  margin-top: 22px;
  font-size: clamp(38px, 6.4vw, 74px);
  line-height: 1.03;
  letter-spacing: -2.6px;
  font-weight: 680;
  max-width: 15ch;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--accent); }

.lead {
  margin-top: 22px; max-width: 54ch;
  font-size: clamp(16.5px, 1.5vw, 19.5px); line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ── Кнопки сторов ──────────────────────────────────────────────────────── */
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.store {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 17px; border-radius: 16px;
  text-decoration: none; color: var(--ink);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px rgba(255,255,255,0.5),
              0 10px 28px rgba(19,43,92,0.10);
  position: relative;
}
/* Кнопки пока не ведут в стор — приложение не опубликовано. Показываем это
   состоянием самой кнопки, а не мелким текстом рядом: неактивная кнопка,
   которая при этом читается как настоящая, — обещание без обмана. */
.store--pending { opacity: 0.62; box-shadow: inset 0 0 0 1px rgba(19,43,92,0.10); }
.store--pending:hover { opacity: 0.85; }
.store svg { flex: none; }
.store b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.2; }
.store small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-soft); opacity: 0.72; margin-top: 2px; }
.store .soon {
  position: absolute; top: -9px; right: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(47,107,216,0.35);
}

/* ── Форма подписки ─────────────────────────────────────────────────────── */
.notify { margin-top: 30px; max-width: 470px; }
.notify-label { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 10px; }
.notify-row { display: flex; gap: 8px; }
.notify input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 13px 16px; border-radius: 14px; border: 0;
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 0 0 1px rgba(19,43,92,0.10);
  transition: box-shadow 160ms ease;
}
.notify input::placeholder { color: rgba(42,50,66,0.45); }
.notify input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--accent); }
.notify button {
  flex: none; font: inherit; font-size: 15px; font-weight: 600;
  padding: 13px 20px; border-radius: 14px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 24px rgba(47,107,216,0.30);
  transition: transform 120ms ease, background 160ms ease;
}
.notify button:hover { background: var(--accent-dp); }
.notify button:active { transform: scale(0.98); }
.notify-note { font-size: 12.5px; color: var(--ink-soft); opacity: 0.7; margin-top: 10px; }
.notify-done { font-size: 14.5px; color: var(--accent-dp); font-weight: 550; margin-top: 12px; display: none; }
.notify.sent .notify-row, .notify.sent .notify-note { display: none; }
.notify.sent .notify-done { display: block; }

.notify-error { display: none; font-size: 13.5px; line-height: 1.45; color: #A32D2D; margin-top: 10px; }
.notify.failed .notify-error { display: block; }
.notify button[disabled] { opacity: 0.6; cursor: default; }

/* ── Секции ─────────────────────────────────────────────────────────────── */
section { padding: 64px 0; }
.sec-head { max-width: 62ch; margin-bottom: 38px; }
.sec-head h2 {
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -1.5px; font-weight: 660;
  text-wrap: balance;
}
.sec-head p { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }

/* ── Карусель возможностей ──────────────────────────────────────────────── */
.carousel { border-radius: var(--radius-lg); padding: 10px; contain: paint; }
.viewport { overflow: hidden; contain: paint; border-radius: 22px; }
.track { display: flex; will-change: transform; }
.slide { flex: 0 0 100%; min-width: 0; padding: 26px; display: grid; gap: 34px; align-items: center; }
@media (min-width: 860px) { .slide { grid-template-columns: 1fr 1fr; padding: 40px; gap: 46px; } }

.slide-copy h3 { font-size: clamp(23px, 2.6vw, 31px); line-height: 1.14; letter-spacing: -1px; font-weight: 640; }
.slide-copy p { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.slide-tag {
  display: inline-block; font-size: 11.5px; font-weight: 650; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--accent-dp); margin-bottom: 12px;
}

/* Подписанные вкладки вместо точек. Четыре кружка читаются как декорация, а
   за ними спрятана главная ценность продукта — половина посетителей просто не
   поймёт, что там есть ещё три экрана. Подписи называют их прямо. */
.tabs {
  display: flex; gap: 4px; justify-content: center; flex-wrap: wrap;
  padding: 16px 8px 8px;
}
.tabs button {
  font: inherit; font-size: 14px; font-weight: 550; letter-spacing: -0.2px;
  border: 0; background: transparent; color: var(--ink-soft);
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.tabs button:hover { background: rgba(255,255,255,0.55); color: var(--ink); }
.tabs button.on {
  background: rgba(255,255,255,0.92); color: var(--ink);
  box-shadow: 0 2px 8px rgba(19,43,92,0.10), inset 0 0 0 1px rgba(255,255,255,0.8);
}
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Мокапы (иллюстрации, не интерфейс) ─────────────────────────────────── */
.mock {
  border-radius: var(--radius-md); padding: 18px;
  background: rgba(255,255,255,0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px rgba(255,255,255,0.6),
              0 22px 50px rgba(19,43,92,0.12);
  min-height: 296px; display: flex; flex-direction: column;
}
.m-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-soft); opacity: 0.66; margin-bottom: 14px; }
.m-title { font-size: 16px; font-weight: 640; letter-spacing: -0.3px; margin-bottom: 12px; }
.m-essence {
  border-radius: var(--radius-sm); padding: 12px 13px; font-size: 13px; line-height: 1.45;
  background: rgba(47,107,216,0.10); box-shadow: inset 0 0 0 1px rgba(47,107,216,0.20);
  margin-bottom: 13px;
}
.m-essence b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--accent-dp); margin-bottom: 5px; }
.m-bullet { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 8px; }
.m-bullet::before { content: ''; margin-top: 7px; width: 5px; height: 5px; border-radius: 99px; background: var(--accent); opacity: 0.7; flex: none; }
.m-line { height: 7px; border-radius: 99px; background: var(--ink); opacity: 0.10; margin-bottom: 9px; }

.chat { display: flex; flex-direction: column; margin: auto 0; width: 100%; gap: 9px; }
.bubble { max-width: 84%; padding: 11px 14px; font-size: 13.5px; line-height: 1.45; border-radius: 17px; }
.bubble.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.bubble.ai { align-self: flex-start; background: rgba(255,255,255,0.9); color: var(--ink); border-bottom-left-radius: 6px; box-shadow: inset 0 0 0 1px rgba(19,43,92,0.07); }
.bubble .cite {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 650; color: var(--accent-dp);
  background: rgba(47,107,216,0.12); border-radius: 6px; padding: 1px 6px;
}

.card-stack { position: relative; margin: auto 0; height: 168px; }
.card-stack > div {
  position: absolute; inset: 0; border-radius: 18px; padding: 18px;
  background: rgba(255,255,255,0.92); box-shadow: inset 0 0 0 1px rgba(19,43,92,0.08), 0 10px 24px rgba(19,43,92,0.08);
  display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.card-stack .c3 { transform: translateY(16px) scale(0.92); opacity: 0.45; }
.card-stack .c2 { transform: translateY(8px)  scale(0.96); opacity: 0.72; }
.card-stack .c1 { font-size: 15.5px; font-weight: 550; line-height: 1.42; }
.card-stack .c1 span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent-dp); margin-bottom: 10px; }

.quiz-q { font-size: 14.5px; font-weight: 560; line-height: 1.4; margin-bottom: 14px; }
.quiz-opt {
  font-size: 13.5px; padding: 11px 13px; border-radius: 13px; margin-bottom: 8px;
  background: rgba(255,255,255,0.85); box-shadow: inset 0 0 0 1px rgba(19,43,92,0.07);
  display: flex; align-items: center; gap: 10px; color: var(--ink-soft);
}
.quiz-opt.right { background: rgba(29,158,117,0.12); box-shadow: inset 0 0 0 1px rgba(29,158,117,0.35); color: var(--ink); font-weight: 550; }
.quiz-opt i { width: 17px; height: 17px; border-radius: 99px; flex: none; box-shadow: inset 0 0 0 1.5px rgba(19,43,92,0.18); }
.quiz-opt.right i { background: #1D9E75; box-shadow: none; position: relative; }
.quiz-opt.right i::after {
  content: ''; position: absolute; left: 5px; top: 4px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}

/* ── Как это работает ───────────────────────────────────────────────────── */
.steps { display: grid; gap: 16px; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.step { border-radius: var(--radius-md); padding: 26px 24px 28px; }
.step-n {
  width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  font-size: 15px; font-weight: 680; color: #fff; background: var(--accent);
  box-shadow: 0 8px 20px rgba(47,107,216,0.28); margin-bottom: 16px;
}
.step h3 { font-size: 18.5px; font-weight: 620; letter-spacing: -0.4px; line-height: 1.2; }
.step p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }

/* ── Короткие возможности ───────────────────────────────────────────────── */
.tiles { display: grid; gap: 14px; }
@media (min-width: 640px)  { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { border-radius: var(--radius-md); padding: 22px 22px 24px; }
.tile h4 { font-size: 16.5px; font-weight: 620; letter-spacing: -0.3px; }
.tile p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.tile .ico {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(47,107,216,0.12); color: var(--accent-dp); margin-bottom: 14px;
}

/* ── Финальный призыв ───────────────────────────────────────────────────── */
.cta { border-radius: var(--radius-lg); padding: 52px 34px 56px; text-align: center; }
.cta h2 { font-size: clamp(27px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -1.5px; font-weight: 660; text-wrap: balance; }
.cta p { margin: 16px auto 0; max-width: 48ch; font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); }
.cta .stores { justify-content: center; margin-top: 22px; }
.cta-btn {
  display: inline-block; margin-top: 26px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  padding: 15px 30px; border-radius: 16px;
  background: var(--accent); color: #fff;
  box-shadow: 0 12px 28px rgba(47,107,216,0.30);
  transition: background 160ms ease, transform 120ms ease;
}
.cta-btn:hover { background: var(--accent-dp); }
.cta-btn:active { transform: scale(0.98); }

/* ── Футер ──────────────────────────────────────────────────────────────── */
.footer { padding: 44px 0 56px; margin-top: 30px; }
.footer-inner { border-radius: var(--radius-lg); padding: 34px 30px 30px; }
.footer-top { display: grid; gap: 26px; }
@media (min-width: 780px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } }
.footer h5 { font-size: 12px; font-weight: 650; letter-spacing: 0.7px; text-transform: uppercase; color: var(--ink-soft); opacity: 0.7; margin-bottom: 14px; }
.footer a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; display: block; margin-bottom: 9px; transition: color 160ms ease; }
.footer a:hover { color: var(--accent-dp); }
.company { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.company .name { color: var(--ink); font-weight: 600; font-size: 14.5px; display: block; margin-bottom: 6px; }
.company .todo { color: #B45309; background: rgba(186,117,23,0.10); border-radius: 6px; padding: 0 6px; }
.footer-bottom {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(19,43,92,0.10);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--ink-soft); opacity: 0.8;
}

/* ── Появление ──────────────────────────────────────────────────────────── */
.rise { opacity: 0; transform: translateY(14px); transition: opacity 620ms cubic-bezier(0.22,0.68,0.32,1), transform 620ms cubic-bezier(0.22,0.68,0.32,1); }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .hero { padding: 52px 0 68px; }
  section { padding: 46px 0; }
  .nav { display: none; }
  .store { flex: 1 1 100%; }
}