/*
 * Лендинг patchbay.ru — вёрстка в токенах дизайн-системы M4.
 * Токены (цвета/радиусы/тени/типографика) скопированы из
 * apps/desktop/src/renderer/index.css: тёмная тема Graphite — базовая,
 * светлая палитра — те же роли токенов через prefers-color-scheme.
 * Шрифты приложения (Geist Variable, JetBrains Mono Variable) бандлятся
 * внутрь приложения; лендинг без внешних загрузок использует их
 * системные фолбэки из тех же стеков.
 *
 * Мокап терминала всегда тёмный (Graphite) — терминал тёмный и в светлой
 * теме приложения, это честная витрина продукта.
 */

:root {
  --font-sans: 'Geist Variable', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono Variable', Consolas, monospace;

  /* Graphite (index.css @theme) */
  --color-bg: #141518;
  --color-surface: #18191e;
  --color-card: #1e2026;
  --color-card-hover: #262933;
  --color-border: #282b33;
  --color-border-strong: #373b47;
  --color-text: #e9eaee;
  --color-text-secondary: #9ca1ac;
  --color-text-muted: #676d7b;

  --color-accent: #5b8def;
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, white);
  --color-accent-ink: #0c1220;
  --color-accent-wash: color-mix(in srgb, var(--color-accent) 13%, transparent);
  --color-accent-ring: color-mix(in srgb, var(--color-accent) 40%, transparent);

  --color-warning: #e2a64f;
  --color-warning-wash: color-mix(in srgb, var(--color-warning) 14%, transparent);

  --radius-card: 10px;
  --radius-control: 8px;

  --shadow-elevation-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-elevation-2: 0 12px 30px rgb(0 0 0 / 0.35);

  /* Мокап терминала: постоянные значения, не зависят от светлой темы */
  --term-bg: #141518;
  --term-bar: #18191e;
  --term-border: #282b33;
  --term-text: #d6d9e0;
  --term-muted: #676d7b;
  --term-green: #85c99e;
  --term-cyan: #7fc0d4;

  /* Кривые движения: встроенные CSS-изинги слабые, кастомные — с характером */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  color-scheme: dark;
}

/* Светлая палитра: те же роли токенов; в приложении светлых тем нет,
 * значения подобраны по ролям Graphite с контрастом A11Y-02. */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f2f3f6;
    --color-surface: #f7f8fa;
    --color-card: #ffffff;
    --color-card-hover: #eef0f4;
    --color-border: #dfe2e8;
    --color-border-strong: #c4c9d4;
    --color-text: #1a1c22;
    --color-text-secondary: #565c68;
    --color-text-muted: #767d8b;

    --color-accent: #3763c9;
    --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, black);
    --color-accent-ink: #ffffff;

    --shadow-elevation-1: 0 1px 2px rgb(20 22 30 / 0.08);
    --shadow-elevation-2: 0 12px 30px rgb(20 22 30 / 0.12);

    color-scheme: light;
  }
}

* {
  box-sizing: border-box;
}

/* Атрибут hidden скрывает элемент сильнее любого display у класса: без этого
 * .btn (inline-block) и другие классы с display перебивали бы UA-правило —
 * скрытая кнопка «Открыть Patchbay» оказывалась бы видимой. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

code,
kbd {
  font-family: var(--font-mono);
}

::selection {
  background: color-mix(in srgb, var(--color-accent) 32%, transparent);
}

:focus-visible {
  outline: 2px solid var(--color-accent-ring);
  outline-offset: 2px;
}

a {
  color: var(--color-accent);
  transition: color 120ms ease;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Мono-лейбл секции в духе шелла: «$ почему patchbay» */
.section-label {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--color-text-muted);
}

.section-label::before {
  content: '$ ';
  color: var(--color-accent);
}

/* --- Шапка --- */

.site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  color: var(--color-text);
  text-decoration: none;
}

.brand svg {
  display: block;
}

.lang-switch {
  margin-left: auto;
  color: var(--color-text-secondary);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: 4px 10px;
  font-size: 14px;
  transition: color 120ms ease, background-color 120ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .lang-switch:hover {
    background: var(--color-card-hover);
    color: var(--color-text);
  }
}

/* --- Хиро: копирайт слева, терминал справа --- */

.hero {
  padding: 72px 0 56px;
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}

.hero-tagline {
  margin: 0 0 28px;
  color: var(--color-text-secondary);
  font-size: 17px;
  max-width: 44ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

.hero-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* --- Кнопки: transform+opacity, отклик на нажатие --- */

.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: var(--radius-control);
  font-weight: 600;
  font-size: 15.5px;
  transition: transform 160ms var(--ease-out), background-color 120ms ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-elevation-1);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--color-accent-hover);
  }
}

.btn-ghost {
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover {
    background: var(--color-card-hover);
  }
}

/* --- Мокап терминала --- */

.hero-term {
  position: relative;
  min-width: 0;
}

/* мягкое свечение акцента позади окна — глубина без градиентного шума */
.hero-term::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  background: radial-gradient(
    55% 55% at 60% 40%,
    color-mix(in srgb, var(--color-accent) 9%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

.term {
  position: relative;
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevation-2);
  overflow: hidden;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--term-bar);
  border-bottom: 1px solid var(--term-border);
}

.term-tab {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--term-muted);
  padding: 4px 12px;
  border-radius: 6px;
}

.term-tab-active {
  background: var(--term-bg);
  color: var(--term-text);
  border: 1px solid var(--term-border);
}

.term-kbd {
  margin-left: auto;
  font-size: 11px;
  color: var(--term-muted);
  border: 1px solid var(--term-border);
  border-radius: 5px;
  padding: 2px 7px;
}

.term-body {
  margin: 0;
  padding: 18px 18px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--term-text);
  overflow-x: auto;
}

.t-p {
  color: var(--color-accent);
}

.t-h {
  color: var(--term-cyan);
}

.t-ok {
  color: var(--term-green);
}

.t-m {
  color: var(--term-muted);
}

.t-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  vertical-align: -2px;
  background: var(--term-text);
}

@media (prefers-reduced-motion: no-preference) {
  .t-cursor {
    animation: blink 1.2s steps(2, jump-none) infinite;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* --- Появление хиро: разовая, короткий каскад, только transform+opacity --- */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: rise 600ms var(--ease-out) both;
  }

  .hero-copy > *:nth-child(2) {
    animation-delay: 60ms;
  }

  .hero-copy > *:nth-child(3) {
    animation-delay: 120ms;
  }

  .hero-copy > *:nth-child(4) {
    animation-delay: 180ms;
  }

  .hero-term {
    animation: rise 700ms var(--ease-out) 150ms both;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* --- Дифференциаторы: нумерованный редакционный список --- */

.features {
  padding: 40px 0 16px;
}

.features-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: feat;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
}

.features-list li {
  counter-increment: feat;
  padding: 22px 0;
  border-top: 1px solid var(--color-border);
}

.features-list li:nth-child(-n + 2) {
  border-top: 0;
}

.features-list h3 {
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.features-list h3::before {
  content: counter(feat, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.features-list p {
  margin: 0;
  padding-left: 34px;
  color: var(--color-text-secondary);
  font-size: 14.5px;
}

/* --- Загрузка --- */

.download {
  padding: 48px 0 8px;
}

.download-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 26px 28px 22px;
}

.download-card + .download-card {
  margin-top: 14px;
}

.download-os {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 650;
}

.os-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-control);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-accent-wash);
  vertical-align: 2px;
}

.download-meta {
  color: var(--color-text-secondary);
  margin: 0 0 18px;
  font-size: 15px;
}

.download-meta [data-version],
.download-meta [data-release-date] {
  font-family: var(--font-mono);
  font-size: 13.5px;
}

.download-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dl {
  flex: 1 1 260px;
  display: block;
  text-align: left;
  text-decoration: none;
  padding: 14px 18px;
  border-radius: var(--radius-control);
  font-weight: 600;
  font-size: 16px;
  transition: transform 160ms var(--ease-out), background-color 120ms ease;
}

.dl:active {
  transform: scale(0.98);
}

.dl .dl-note {
  display: block;
  font-weight: 400;
  font-size: 13px;
  margin-top: 2px;
}

.dl .dl-file {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11.5px;
  margin-top: 8px;
  opacity: 0.75;
}

.dl-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-elevation-1);
}

.dl-primary .dl-note {
  color: color-mix(in srgb, var(--color-accent-ink) 78%, var(--color-accent));
}

@media (hover: hover) and (pointer: fine) {
  .dl-primary:hover {
    background: var(--color-accent-hover);
  }
}

.dl-secondary {
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

.dl-secondary .dl-note {
  color: var(--color-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .dl-secondary:hover {
    background: var(--color-card-hover);
  }
}

.sums-link {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.sums-link code {
  font-size: 12.5px;
}

/* Суммы скрыты атрибутом hidden, показывает site.js после удачного фетча */
.sums {
  margin-top: 16px;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}

.sums h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sum-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding: 6px 0;
}

.sum-name {
  font-size: 13.5px;
  color: var(--color-text);
  font-family: var(--font-mono);
}

.sum-hex {
  flex: 1 1 100%;
  order: 3;
  font-size: 12px;
  color: var(--color-text-secondary);
  word-break: break-all;
}

.sum-copy {
  margin-left: auto;
  font: inherit;
  font-size: 13px;
  color: var(--color-accent);
  background: var(--color-accent-wash);
  border: none;
  border-radius: var(--radius-control);
  padding: 3px 10px;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 120ms ease;
}

.sum-copy:active {
  transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
  .sum-copy:hover {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  }
}

/* --- Тарифы: Free первой карточкой, год — акцентный (PRD-05) --- */

.pricing {
  padding: 48px 0 8px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 22px 22px 20px;
}

/* Годовой тариф — акцентная рамка вместо кричащего фона */
.price-card--featured {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-ring);
}

.price-name {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.price-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-control);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-wash);
  vertical-align: 1px;
}

.price-value {
  margin: 0 0 10px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.price-period {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

/* Цена в USDT приходит только с сервера — до ответа блок скрыт */
.price-usdt {
  margin: -4px 0 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.price-lead {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 14.5px;
}

.price-features {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.price-features li {
  padding: 3px 0 3px 18px;
  position: relative;
}

.price-features li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--color-accent);
}

.pricing-foot {
  margin-top: 18px;
}

.price-pro,
.price-pay {
  margin: 0 0 10px;
  color: var(--color-text-secondary);
  font-size: 14.5px;
  max-width: 68ch;
}

.price-pro strong {
  color: var(--color-text);
}

.price-pay {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-muted);
}

.price-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
}

.price-cta-note {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* --- Юридические страницы: узкая колонка, спокойная типографика --- */

.legal {
  max-width: 760px;
  padding: 40px 0 8px;
}

.legal h1 {
  margin: 0 0 6px;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.legal h2 {
  margin: 32px 0 10px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.legal h3 {
  margin: 22px 0 8px;
  font-size: 15.5px;
  font-weight: 600;
}

.legal p,
.legal li {
  color: var(--color-text-secondary);
  font-size: 15.5px;
}

.legal ol,
.legal ul {
  padding-left: 22px;
}

.legal li {
  margin: 6px 0;
}

.legal strong {
  color: var(--color-text);
}

/* Дата редакции и статус документа под заголовком */
.legal-meta {
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* Плашка «черновик до финализации юристом» / en-дисклеймер */
.legal-note {
  margin: 0 0 28px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-card);
  color: var(--color-text-secondary);
  font-size: 14.5px;
}

/* Реквизиты: пары «поле — значение» вместо таблицы */
.legal-req {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 8px 18px;
  font-size: 15px;
}

.legal-req dt {
  color: var(--color-text-muted);
}

.legal-req dd {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 14px;
  word-break: break-word;
}

/* --- Страница возврата из оплаты (BILL-05, D12) --- */

.return-card {
  max-width: 620px;
  margin: 56px 0 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 28px 28px 24px;
}

.return-title {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.return-title-en {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.return-card p {
  color: var(--color-text-secondary);
  font-size: 15px;
}

.return-actions {
  margin: 20px 0 0;
}

.return-hint {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
}

.return-hint + .return-hint {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
  color: var(--color-text-muted);
}

/* --- SmartScreen: спокойная карточка с тёплой напоминающей кромкой --- */

.smartscreen {
  padding: 40px 0 8px;
}

.smartscreen details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-card);
  padding: 0 20px;
}

.smartscreen summary {
  cursor: pointer;
  font-weight: 600;
  padding: 15px 0;
  list-style-position: inside;
}

.smartscreen details[open] summary {
  border-bottom: 1px solid var(--color-border);
}

.smartscreen details p {
  color: var(--color-text-secondary);
  font-size: 15px;
}

.smartscreen details strong {
  color: var(--color-text);
}

.smartscreen details p:last-child {
  padding-bottom: 10px;
}

/* --- Футер --- */

.site-footer {
  margin-top: 72px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 14px;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 22px;
  padding-bottom: 26px;
}

.site-footer a {
  color: var(--color-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover {
    color: var(--color-text);
  }
}

.site-footer .copyright {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* Пиксель Метрики (noscript): инлайн-стили запрещены CSP — класс здесь */
.metrika-pixel {
  position: absolute;
  left: -9999px;
}

/* --- Мобильная раскладка --- */

@media (max-width: 860px) {
  .hero {
    padding: 48px 0 40px;
  }

  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .features-list {
    grid-template-columns: 1fr;
  }

  .features-list li:nth-child(2) {
    border-top: 1px solid var(--color-border);
  }

  /* тарифы: одна колонка — карточки читаются как список */
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .legal-req {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .legal-req dd {
    margin-bottom: 10px;
  }
}

@media (max-width: 560px) {
  .download-card,
  .price-card,
  .return-card {
    padding: 20px 18px 18px;
  }

  .site-footer .copyright {
    margin-left: 0;
  }
}