/* Korsa AI Trade — общий стиль сайта.
 *
 * ## Один продукт — один вид
 *
 * До 20 августа сайт был фиолетовым, а карточки сделок в канале — почти
 * чёрными с янтарным именем и зелёной прибылью. Человек приходит на сайт
 * ПРЯМО С КАРТОЧКИ, и попадал будто к другому продавцу.
 *
 * Теперь палитра и шрифты взяты у карточек: они и есть то, что покупатель
 * видит первым. Шрифты отдаются из `assets/shrifty` — из той же папки, что
 * и карточкам, а не второй копией в `site/`: копия разошлась бы при первой
 * замене начертания.
 *
 * ## Почему не чистый чёрный
 *
 * Чистый чёрный на экране телефона выглядит провалом, а не глубиной. Основа
 * с синим уклоном — та же, что на карточке.
 *
 * ## Светлая тема
 *
 * Половина людей открывает ссылки днём с телефона, и белый текст на чёрном
 * на солнце не читается. В светлой теме янтарь темнеет до бронзы: на белом
 * светлый янтарь не виден вовсе.
 */

/* Шрифты те же, что на карточках сделок. `swap` — чтобы страница читалась,
   пока начертание едет: пустая страница хуже страницы системным шрифтом. */
@font-face {
  font-family: "Korsa Display";
  src: url("/shrifty/BigShoulders-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Korsa Metka";
  src: url("/shrifty/Jura-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Korsa Mono";
  src: url("/shrifty/JetBrainsMono-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --fon-1: #0B0D10;
  --fon-2: #06080A;
  --karta: #11151A;
  --karta-2: #161B21;
  --tekst: #E8EAED;
  --tusklo: #7C8894;
  --gran: #1F262E;
  --setka: #141920;
  --akcent: #D8A657;
  --na-akcente: #14100A;
  --akcent-svet: #E8BC77;
  --ok: #3DDC97;
  --treboga: #E87A6A;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "Korsa Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
          Consolas, monospace;
  --display: "Korsa Display", "Helvetica Neue", Arial, sans-serif;
  --metka: "Korsa Metka", var(--sans);
}

/* Светлая тема: янтарь темнеет до бронзы, зелёное — до лесного. Наивная
   инверсия дала бы жёлтый текст на белом, который не читается вовсе. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fon-1: #FAF8F4; --fon-2: #F1EEE7; --karta: #FFFFFF; --karta-2: #F7F4EE;
    --tekst: #14181C; --tusklo: #5E6873; --gran: #E3DED3;
    --setka: #EFEAE0;
    --na-akcente: #FFFFFF;
    --akcent: #A8752A; --akcent-svet: #8C5F1F; --ok: #17915F;
    --treboga: #B5453A;
  }
}
:root[data-theme="light"] {
  --fon-1: #FAF8F4; --fon-2: #F1EEE7; --karta: #FFFFFF; --karta-2: #F7F4EE;
  --tekst: #14181C; --tusklo: #5E6873; --gran: #E3DED3;
    --setka: #EFEAE0;
  --na-akcente: #FFFFFF;
  --akcent: #A8752A; --akcent-svet: #8C5F1F; --ok: #17915F;
  --treboga: #B5453A;
}
:root[data-theme="dark"] {
  --fon-1: #0B0D10; --fon-2: #06080A; --karta: #11151A; --karta-2: #161B21;
  --tekst: #E8EAED; --tusklo: #7C8894; --gran: #1F262E; --setka: #141920;
  --akcent: #D8A657; --akcent-svet: #E8BC77; --ok: #3DDC97;
  --na-akcente: #14100A;
  --treboga: #E87A6A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tekst);
  /* Сетка — та же, что на карточке: она не украшение, а опора глазу и
     отличие от плоской страницы. Очень тихая, поэтому в цвете границы. */
  background:
    linear-gradient(var(--setka) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, var(--setka) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(165deg, var(--fon-1) 0%, var(--fon-2) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

/* --- шапка ------------------------------------------------------------- */

header.verh {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 30px; max-width: 1080px; margin: 0 auto;
}
.znak { width: 46px; height: 46px; flex: none; display: block; }
/* Стрелка знака была вписана цветом в семи страницах разом. Цвет обязан
   жить в одном месте: иначе смена акцента правит вёрстку, а не тему. */
.znak .strelka { stroke: var(--akcent); }
.imya {
  font-family: var(--metka); font-size: 17px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--akcent);
  white-space: nowrap;
}
.imya span {
  display: block; color: var(--tusklo); font-family: var(--sans);
  font-weight: 400; font-size: 12px; letter-spacing: .01em;
  margin-top: 3px; text-transform: none;
}
.verh .spravo { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.yazyk {
  display: flex; border: 1px solid var(--gran); border-radius: 9px;
  overflow: hidden; background: var(--karta);
}
.yazyk button {
  border: 0; background: transparent; color: var(--tusklo); cursor: pointer;
  font: 600 12.5px var(--sans); padding: 7px 12px;
}
.yazyk button[aria-pressed="true"] { background: var(--akcent); color: var(--na-akcente); }

/* --- общее ------------------------------------------------------------- */

main { max-width: 1080px; margin: 0 auto; padding: 0 22px 90px; }
h1 {
  font-family: var(--display);
  /* Нижняя граница считана по самому длинному слову заголовка
     («КРУГЛОСУТОЧНО»): при 38px оно не помещалось в 390 точек и обрезалось.
     `break-word` — вторая линия защиты на случай слова длиннее. */
  font-size: clamp(29px, 6.4vw, 68px); font-weight: 700; line-height: .98;
  letter-spacing: 0; margin: 0 0 18px; text-wrap: balance;
  text-transform: uppercase; overflow-wrap: break-word;
}
h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3.6vw, 38px); font-weight: 700; letter-spacing: 0;
  margin: 0 0 16px; text-wrap: balance; text-transform: uppercase;
  overflow-wrap: break-word;
}
h3 { font-size: 16px; font-weight: 650; margin: 0 0 8px; }
p { margin: 0 0 14px; max-width: 62ch; }
.lid { font-size: 18px; color: var(--tusklo); max-width: 56ch; }
.tiho { color: var(--tusklo); font-size: 13.5px; }

section { padding: 46px 0; border-top: 1px solid var(--gran); }
section:first-of-type { border-top: 0; }

.knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--akcent); color: var(--na-akcente); text-decoration: none;
  font: 500 14.5px var(--metka); letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px -12px rgba(216,166,87,.55);
  transition: transform .12s ease, filter .2s ease;
}
.knopka:hover { transform: translateY(-1px); filter: brightness(1.08); }
.knopka:active { transform: translateY(0); }
.knopka:focus-visible { outline: 2px solid var(--akcent-svet); outline-offset: 3px; }
.knopka.tihaya {
  background: transparent; color: var(--tekst);
  border: 1px solid var(--gran); box-shadow: none;
}

.karty { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.karta {
  background: var(--karta); border: 1px solid var(--gran);
  border-radius: 15px; padding: 22px 24px;
}
.karta p:last-child { margin-bottom: 0; }

/* --- счётчик мест ------------------------------------------------------ */

.mesta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--karta); border: 1px solid var(--gran);
  border-radius: 999px; padding: 8px 16px 8px 12px;
  font-size: 13.5px; color: var(--tusklo); margin-bottom: 20px;
}
.mesta b {
  font-family: var(--mono); font-size: 15px; color: var(--tekst);
  font-variant-numeric: tabular-nums;
}
.tochka {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(61,220,151,.18);
}

/* --- тарифы ------------------------------------------------------------ */

.cena {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px;
}
.cena .chislo {
  font-family: var(--mono); font-size: 38px; font-weight: 650;
  letter-spacing: -.03em;
}
.cena .bylo { color: var(--tusklo); text-decoration: line-through; font-size: 17px; }
.karta.glavnaya { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent); }
.metka {
  display: inline-block; font: 500 11px var(--metka); letter-spacing: .16em;
  text-transform: uppercase; color: var(--akcent-svet);
  background: rgba(216,166,87,.12); padding: 4px 10px; border-radius: 5px;
  margin-bottom: 12px;
}

ul.spisok { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
ul.spisok li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14.5px; color: var(--tusklo); line-height: 1.5;
}
ul.spisok li b { color: var(--tekst); font-weight: 600; }
.galka { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--ok); }

/* --- подвал ------------------------------------------------------------ */

footer.niz {
  border-top: 1px solid var(--gran); margin-top: 20px;
  padding: 26px 22px 40px; max-width: 1080px; margin-left: auto;
  margin-right: auto; color: var(--tusklo); font-size: 13px;
}
footer.niz p { max-width: 74ch; }

/* Адрес поддержки. Отдельной строкой и заметнее дисклеймера: до 18 августа
   бот в четырёх местах просил «напишите нам», а написать было некуда. */
footer.niz p.svyaz { margin-top: 14px; }
footer.niz p.svyaz a { color: inherit; }

@media (max-width: 640px) {
  header.verh { padding: 16px 20px; gap: 11px; }
  .znak { width: 38px; height: 38px; }
  /* Разрядка съедает ширину быстрее размера: имя переносилось на две
     строки раньше, чем становилось мелким. */
  .imya { font-size: 13.5px; letter-spacing: .14em; }
  .knopka { font-size: 13px; letter-spacing: .09em; padding: 14px 20px; }
  main { padding: 0 18px 70px; }
  section { padding: 34px 0; }
}


/* Разобранный тариф. Не прячем — читателю полезно видеть, что цена первых
   была и кончилась, — но и не выдаём за действующую. */
.karta.razobrana { opacity: .55; }
.karta.razobrana .cena .chislo { text-decoration: line-through; }


/* Список на странице условий: без галочек и маркетинга — это документ. */
.spisok-prostoy {
  margin: 12px 0 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 9px;
}
.spisok-prostoy li { line-height: 1.6; }


/* --- итоги работы агента ----------------------------------------------- */
/*
   Цифры на витрине набраны моноширинным и по табличной сетке: колонка
   процентов обязана стоять ровно. Прыгающие цифры читаются как небрежность,
   а это единственное место сайта, где покупатель ищет доказательство. */

.itogi {
  display: grid; gap: 12px; margin: 4px 0 26px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.itog {
  background: var(--karta); border: 1px solid var(--gran);
  border-radius: 14px; padding: 16px 18px;
}
.itog .chislo {
  display: block; font-family: var(--mono); font-size: 30px; font-weight: 650;
  letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.itog .podpis {
  display: block; color: var(--tusklo); font-size: 12.5px; margin-top: 5px;
  line-height: 1.4;
}
.itog.horosho .chislo { color: var(--ok); }

/* Строка сделки. Не таблица: на телефоне таблица либо уезжает вбок, либо
   ужимает колонки до нечитаемого. Здесь строки просто переносятся. */
.sdelki { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sdelka {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--karta); border: 1px solid var(--gran);
  border-radius: 12px; padding: 13px 18px;
}
.sdelka .moneta {
  font-family: var(--mono); font-weight: 650; font-size: 15px;
  letter-spacing: -.01em;
}
.sdelka .storona {
  font: 600 10.5px var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--tusklo); border: 1px solid var(--gran);
  border-radius: 5px; padding: 2px 7px;
}
.sdelka .ceny {
  color: var(--tusklo); font-family: var(--mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.sdelka .roi {
  margin-left: auto; font-family: var(--mono); font-size: 19px; font-weight: 650;
  color: var(--ok); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* Пока числа не приехали — место занято, но ничего не обещано. Подставить
   сюда пример значило бы показать выдуманную сделку как настоящую. */
.itogi.zhdyom .chislo, .sdelki.zhdyom { opacity: .35; }

@media (max-width: 640px) {
  .itog .chislo { font-size: 26px; }
  .sdelka { padding: 12px 15px; gap: 10px; }
  .sdelka .roi { font-size: 17px; }
}

/* Ответ, посчитанный из журнала. Выделен, потому что это и есть ответ, а
   вокруг — объяснение, откуда он взялся. */
.primer {
  font-size: 15.5px; font-weight: 600; color: var(--tekst);
  font-variant-numeric: tabular-nums; margin-bottom: 10px;
}

/* Карточки вопросов растут по своему содержанию, а не тянутся до самой
   высокой в ряду: у ответов длина разная, и растянутая карточка с половиной
   пустоты читается как недоделанная. В тарифах наоборот — там ровный низ
   нужен, поэтому правило точечное. */
.karty.voprosy { align-items: start; }