/* strAImer landing.
   Общие токены и компоненты — в /shared/tokens.css (их же использует кабинет).
   Здесь только то, что принадлежит лендингу: живой фон, появление по скроллу,
   макет эфира и демонстрации интерактивов. Локального `:root` нет намеренно —
   переменные страницы объявлены на `.landing`, чтобы не переопределять токены
   сайта для соседних страниц. */

.landing {
  --shell: rgba(10, 8, 22, 0.72);
  --twitch: hsl(264, 100%, 74%);
  --youtube: hsl(0, 85%, 62%);
  --kick: hsl(96, 80%, 52%);
  overflow-x: hidden;
}

/* Шапка и подвал переехали в /shared/tokens.css: их носит и лендинг, и правовые
   страницы, а копия правил разошлась бы с оригиналом молча. */

/* -------------------------------------------------------------- герой */

.hero { padding: 76px 0 40px; }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  /* Снизу 4px вместо 20: остальное добавляет `padding-bottom` у `.grad`,
     без которого обрезаются хвосты букв (см. shared/tokens.css). */
  margin: 18px 0 4px;
}
.hero h1 span { display: block; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* Размер подобран по русской версии: там подписи длиннее, и при прежних
   13px/24px и 0.98rem две кнопки героя не влезали в колонку и переносились
   на вторую строку. */
.btn-lg { padding: 12px 18px; font-size: 0.92rem; }
.btn-lg:disabled { opacity: 0.72; cursor: default; }
.soon {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.28);
}
.hero-note { margin-top: 16px; font-size: 0.85rem; max-width: 520px; }

/* ------------------------------------------------------- макет эфира */

.hero-stage { perspective: 1200px; }
.stage {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--shell);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transform: rotateY(-7deg) rotateX(3deg);
  transition: transform 0.6s var(--ease);
}
.hero-stage:hover .stage { transform: rotateY(-2deg) rotateX(1deg); }

.stage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--hair);
  font-size: 0.76rem;
  color: var(--text-muted);
}
.live { display: inline-flex; align-items: center; gap: 7px; color: var(--danger); font-weight: 700; letter-spacing: 0.06em; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.viewers b { color: var(--text-secondary); }

.stage-scene {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(139, 92, 246, 0.22), transparent 60%),
    linear-gradient(160deg, hsl(250, 40%, 12%), hsl(255, 45%, 7%));
  padding: 14px;
}
.cam {
  position: absolute;
  left: 14px; bottom: 58px;
  width: 34%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(60% 60% at 50% 38%, rgba(255, 255, 255, 0.1), transparent 70%),
    linear-gradient(180deg, hsl(258, 30%, 22%), hsl(258, 30%, 13%));
}

.alert-card {
  position: absolute;
  top: 14px; left: 14px;
  min-width: 46%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border-active);
  background: rgba(24, 16, 48, 0.9);
  box-shadow: var(--glow);
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.alert-card.is-in { opacity: 1; transform: none; }
.alert-title { font-size: 0.72rem; color: var(--accent-hover); font-weight: 700; letter-spacing: 0.04em; }
.alert-amount { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.alert-text { font-size: 0.74rem; color: var(--text-secondary); }

.stage-chat {
  position: absolute;
  right: 14px; top: 14px; bottom: 58px;
  width: 42%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  overflow: hidden;
  font-size: 0.72rem;
}
.chat-line {
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: rgba(10, 8, 22, 0.66);
  border-left: 2px solid var(--twitch);
  color: var(--text-secondary);
  animation: chat-in 0.35s var(--ease);
}
.chat-line b { color: var(--text-primary); }
.chat-line[data-platform="youtube"] { border-left-color: var(--youtube); }
.chat-line[data-platform="kick"] { border-left-color: var(--kick); }
@keyframes chat-in { from { opacity: 0; transform: translateX(14px); } }

.stage-goal { position: absolute; left: 14px; right: 14px; bottom: 14px; }
.goal-row { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--text-secondary); margin-bottom: 6px; }
.goal-bar { height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.goal-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), hsl(190, 90%, 58%));
  box-shadow: 0 0 12px var(--accent-glow);
  transition: width 0.9s var(--ease);
}

/* -------------------------------------------------------- три крюка */

.hooks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 56px auto; }
.hook h3 { margin: 12px 0 8px; font-size: 1.05rem; }
.hook p { margin: 0; font-size: 0.9rem; }
.hook-icon { font-size: 1.5rem; line-height: 1; }

/* --------------------------------------------------------- секции */

/* Только по вертикали: у секции обычно есть и класс `container`, а сокращённая
   запись `padding` снесла бы его боковые отступы — на телефоне текст упирался
   в края экрана. */
.section { padding-top: 64px; padding-bottom: 64px; }
.section-head { max-width: 720px; margin-bottom: 32px; }
.section h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; margin: 8px 0 12px; line-height: 1.15; }

/* ------------------------------------------------------------ бенто */

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bento .card { display: flex; flex-direction: column; gap: 10px; }
.bento .card h3 { margin: 6px 0 0; font-size: 1.1rem; letter-spacing: -0.01em; }
.bento .card p { margin: 0; font-size: 0.9rem; }
.bento .card .pill { align-self: flex-start; }
.bento-lg { grid-column: span 2; }
.bento-head { display: flex; flex-direction: column; gap: 10px; }
.bento code { font-family: var(--font-mono); font-size: 0.85em; color: var(--accent-hover); }

/* Общая рамка любой демонстрации внутри карточки. */
.demo {
  margin-top: auto;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hair);
  background: rgba(8, 6, 18, 0.55);
}

.demo-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.demo-label { font-size: 0.74rem; color: var(--success); font-weight: 600; }
.demo-timer { font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-secondary); }

.lots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.86rem;
  transition: transform 0.45s var(--ease), border-color 0.3s, background 0.3s;
}
.lot.is-lead { border-color: var(--card-border-active); background: var(--accent-soft); }
.lot-num { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }
.lot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-sum { font-weight: 700; font-variant-numeric: tabular-nums; }
.lot-sum.is-hit { color: var(--accent-hover); }

/* Карусель: шкала копилки, лента карточек и список долгов.

   Шкала намеренно другого цвета, чем у целей сбора: на странице их две, и
   одинаковые полосы читались бы как одна и та же функция. У целей —
   фиолетовый в голубой, здесь — фиолетовый в розовый. */
.pool-bar { height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pool-bar span {
  display: block;
  height: 100%;
  width: 68%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), hsl(320, 90%, 62%));
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
  transition: width 0.9s var(--ease);
}

/* Лента едет внутри окна, поэтому обрезается по краям: зритель видит кусок
   ленты, а не аккуратно уложенный ряд — так же, как в самом оверлее.
   Указатель стоит по центру окна: под ним карточка и останавливается. */
.ribbon-window {
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  padding: 4px 0;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.ribbon-window::after {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: linear-gradient(180deg, transparent, var(--accent-hover), transparent);
  box-shadow: 0 0 10px var(--accent-glow);
  pointer-events: none;
}
.ribbon {
  display: flex;
  gap: 8px;
  width: max-content;
  will-change: transform;
}
/* Карточка. Цвет — метка редкости, а не украшение: в самом модуле группы
   различаются именно им, и зритель читает редкость до того, как лента встанет.
   Список редкостей — RARITY_ORDER движка карусели. */
.ribbon-card {
  --r: hsl(250, 10%, 66%);
  --rg: rgba(190, 190, 210, 0.35);
  flex: none;
  width: 124px;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.25));
  box-shadow: inset 0 -2px 0 0 var(--r);
  font-size: 0.74rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0.62;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.ribbon-card[data-rarity="uncommon"]  { --r: hsl(150, 72%, 52%); --rg: rgba(45, 210, 140, 0.4); }
.ribbon-card[data-rarity="rare"]      { --r: hsl(210, 90%, 62%); --rg: rgba(70, 150, 255, 0.42); }
.ribbon-card[data-rarity="epic"]      { --r: hsl(275, 85%, 68%); --rg: rgba(180, 110, 255, 0.45); }
.ribbon-card[data-rarity="legendary"] { --r: hsl(38, 95%, 58%);  --rg: rgba(255, 176, 40, 0.45); }
.ribbon-card[data-rarity="artifact"]  { --r: hsl(330, 92%, 64%); --rg: rgba(255, 80, 180, 0.5); }

/* Выпавшая карточка: та же метка редкости, только в полную силу. Отдельного
   «цвета победы» нет намеренно — иначе выигрыш стирал бы то, что выиграли. */
.ribbon-card.is-won {
  opacity: 1;
  transform: translateY(-2px);
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 0 var(--r), 0 0 18px var(--rg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
}

.debts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.debts li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.debts b { font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* Озвучка: очередь чтения. Читаемое сейчас помечено полосой слева и точкой —
   тем же способом, что и на тайле пульта. */
.demo-tts { display: flex; flex-direction: column; gap: 6px; }
.tts-line {
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--hair);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.tts-line b { color: var(--text-secondary); font-weight: 600; }
.tts-line.is-now { border-left-color: var(--success); color: var(--text-primary); }
.tts-line.is-now b { color: var(--text-primary); }

/* Колесо: сегменты нарисованы конусным градиентом, вращение задаёт скрипт. */
.demo-wheel { position: relative; display: grid; place-items: center; padding: 18px; }
.wheel {
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 2px solid var(--card-border-active);
  box-shadow: var(--glow), inset 0 0 26px rgba(0, 0, 0, 0.55);
  background: conic-gradient(
    var(--accent) 0deg 60deg,
    hsl(190, 85%, 45%) 60deg 120deg,
    hsl(320, 80%, 58%) 120deg 180deg,
    hsl(258, 60%, 40%) 180deg 240deg,
    hsl(150, 70%, 40%) 240deg 300deg,
    hsl(38, 90%, 52%) 300deg 360deg);
  transition: transform 4.2s cubic-bezier(0.16, 0.87, 0.28, 1);
}
.wheel-pin {
  position: absolute;
  top: 6px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid var(--text-primary);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.chain { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chain li {
  position: relative;
  padding: 7px 11px 7px 30px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.84rem;
  color: var(--text-muted);
  transition: color 0.25s, background 0.25s;
}
.chain li::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background 0.25s, box-shadow 0.25s;
}
.chain li.is-on { color: var(--text-primary); background: var(--accent-soft); }
.chain li.is-on::before { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

.demo-goal .goal-row { font-size: 0.8rem; }
.demo-chat { display: flex; flex-direction: column; gap: 6px; min-height: 168px; justify-content: flex-end; font-size: 0.82rem; }
.demo-cmd { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; }
.cmd-line b { font-family: var(--font-mono); color: var(--accent-hover); }

/* ------------------------------------------------------------- ИИ */

.ai-section { position: relative; }
.ai-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 40px; align-items: center; }
.ticks { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; color: var(--text-secondary); font-size: 0.94rem; }
.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0; top: -1px;
  color: var(--accent-hover);
  font-weight: 700;
}
.ai-chat { display: flex; flex-direction: column; gap: 10px; font-size: 0.88rem; }
.ai-msg { padding: 9px 12px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); }
.ai-msg b { color: var(--text-primary); }
.ai-reply { background: var(--accent-soft); border: 1px solid var(--card-border); }
.ai-reply b { color: var(--accent-hover); }

/* --------------------------------------------------- пульт, площадки */

.split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.split .card { display: flex; flex-direction: column; gap: 10px; }
.split .card .pill { align-self: flex-start; }
.split h3 { margin: 4px 0 0; font-size: 1.15rem; }
.split p { margin: 0; font-size: 0.92rem; }

.platforms-section .section-head { max-width: 640px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: border-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.chip:hover { border-color: var(--card-border-active); color: var(--text-primary); transform: translateY(-2px); }

/* ------------------------------------------------ бесплатно, тарифы */

.free-card { text-align: center; padding: 40px 28px; }
.free-card h2 { margin-top: 0; }
.free-card .lead { margin: 0 auto 14px; }
.free-card .muted { max-width: 640px; margin: 0 auto; font-size: 0.9rem; }

/* Карточки тарифов переехали в shared/plans.css: их же показывает `/pricing`,
   и лендинг с ней обязан выглядеть одинаково — иначе на одном сайте окажется
   две витрины с ценами, которые расходятся молча. */

.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.model-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.model-row .model-name { font-weight: 600; font-size: 0.9rem; }
.model-row .model-meta { font-size: 0.75rem; }

.final-cta { text-align: center; padding: 48px 28px; border-color: var(--card-border-active); }
.final-cta h2 { margin-top: 0; }
.final-cta .lead { margin: 0 auto 24px; }
.final-cta .hero-cta { justify-content: center; }


.demo-source { display: none; }

/* ------------------------------------------------------- адаптив */

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .stage { transform: none; }
  .hero-stage:hover .stage { transform: none; }
  .ai-inner { grid-template-columns: 1fr; gap: 28px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-lg { grid-column: span 2; }
}
@media (max-width: 760px) {
  /* `.plans` здесь больше нет: одна колонка на телефоне задаётся там же, где
     сама сетка тарифов, — в shared/plans.css. */
  .hooks, .bento, .split { grid-template-columns: 1fr; }
  .bento-lg { grid-column: span 1; }
  /* Здесь стояло `.header-nav a:not(.btn) { display: none }` — на телефоне
     разделы просто пропадали, потому что попасть в них было неоткуда. С
     12.08.2026 они уезжают под кнопку (shared/tokens.css, тот же порог 760),
     и правило осталось бы поверх неё: панель открывалась пустой. */
  .section { padding-top: 48px; padding-bottom: 48px; }
  .hero { padding: 48px 0 24px; }
}

/* Уважение к системной настройке: без движения остаются только смысл и цвет. */
@media (prefers-reduced-motion: reduce) {
  .live i { animation: none; }
  .stage { transform: none; }
  .wheel { transition: none; }
  .chat-line { animation: none; }
}

/* ─── С нами стримят ───────────────────────────────────────────────

   Плитки текстовые: аватарки грузить некуда, а чужая картинка на главной —
   это ещё и чужой запрос с нашей страницы.

   Сетка сама решает, сколько поместится в строку: список короткий и разной
   длины, а фиксированные колонки оставляли бы дыру на трёх стримерах. */
.live-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.live-tile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.live-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.live-name {
  font-weight: 600;
}

.live-where,
.live-game {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.live-where::before,
.live-game::before {
  content: '·';
  margin-right: 0.5rem;
  opacity: 0.55;
}

/* Стримил за последние сутки, но сейчас не в эфире.

   Приглушён, а не спрятан: блок отвечает на вопрос «этим пользуются живые
   люди», и вчерашний эфир отвечает на него так же, как сегодняшний. Разница
   между «сейчас» и «недавно» держится точкой и яркостью, а не текстом:
   подпись «был в эфире 6 часов назад» на каждой плитке превратила бы витрину
   в журнал. */
.live-tile.is-recent {
  opacity: 0.62;
}

.live-tile.is-recent:hover {
  opacity: 1;
}

/* Счётчик под плитками. Строка, а не плитка: она не ведёт никуда, и выглядеть
   нажимаемой ей нельзя. */
.live-more {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.9rem;
}

/* Красная точка — сигнал, а не цвет темы: «в эфире» красное у всех площадок. */
.live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #ff4438;
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Страница висит открытой часами — движение выключается вместе со всем
   остальным (.claude/rules/landing.md). */
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .live-tile:hover { transform: none; }
}