/* =========================================================================
   Витрина web-prosto.ru — токены и база
   Стилистика снята с b2b.yandex.ru/adv/metrika: тёмная база, поверх неё
   крупные скруглённые плиты, плоские заливки без единой тени, жирный
   гротеск с тесным интерлиньяжем, скругление 12 / 24 / 40.
   Решение по глубине: тёмный первый экран и подвал, середина страницы
   светлая — читаемость длинных списков важнее эффекта.
   ========================================================================= */

:root{
  /* ---- Тёмная база ---------------------------------------------------
     Два тона, а не один: #161F31 — поле страницы, #20293B — карточка
     на нём. Разница маленькая и намеренная: карточка отделяется тоном,
     а не рамкой и не тенью.

     Шаг между тонами — ровно +10 к каждому каналу, третий тон (наведение
     на карточку) — ещё столько же с небольшим уклоном в синий. Считать
     их «на глаз» нельзя: неравный шаг сразу видно там, где карточка
     лежит на поле, а на карточке лежит третья.

     Тон задан заказчиком. Он светлее прежнего, поэтому вместе с ним
     подняли прозрачность самого тихого текста — см. --on-dark-3. */
  --ink:        #161F31;
  --ink-2:      #20293B;
  --ink-3:      #2A364D;
  --ink-line:   rgba(255,255,255,.10);

  /* ---- Светлые плиты ---- */
  --paper:      #FFFFFF;
  --lav:        #EBEFF5;
  --lav-2:      #DFE5F0;
  --lav-3:      #CED7E6;

  /* ---- Акценты. Три чистых тона, без градиентов ---- */
  --blue:       #3287FF;
  --blue-ink:   #1C6AE0;
  --blue-pale:  #E3EDFF;
  --indigo:     #4B3CFF;
  --violet:     #7D32FF;

  /* ---- Текст на светлом ---- */
  --text:       #1E2837;
  --text-2:     #4C5A72;
  --text-3:     #7C8899;

  /* ---- Текст на тёмном и на цветном ---- */
  --on-dark:    #FFFFFF;
  --on-dark-2:  rgba(255,255,255,.68);
  /* .48, а не .44: на прежнем почти чёрном фоне мелкие подписи давали
     контраст 4,28 — уже ниже нормы 4,5, а на посветлевшем упали бы
     до 4,05. С .48 получается 4,79 на поле и 4,53 на карточке —
     проходит на обоих тонах, и разница в тоне на глаз незаметна. */
  --on-dark-3:  rgba(255,255,255,.48);

  /* ---- Смысловые. Применяются только по смыслу: зелёный — «входит»,
     красный — ошибка ввода. Декоративной заливки ими нет ---- */
  --green:      #12A05A;
  --red:        #E5484D;
  --red-soft:   #FDECEC;

  /* ---- Типографика ----
     Golos Text — открытый гротеск с полным кириллическим набором и
     весами до 900. Ближайшая доступная замена шрифту референса: та же
     закрытая апертура, те же прямые окончания, тот же ритм в тексте. */
  --font:       'Golos Text', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: var(--font);

  /* ---- Форма. Три радиуса, и больше никаких ---- */
  --r-slab:     40px;   /* плита раздела */
  --r-card:     24px;   /* карточка */
  --r-sm:       12px;   /* кнопка, поле, мелкий элемент */

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --fs-base:    16px;
  --tap:        44px;
}

/* ------------------------------ Сброс -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); }
body{
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,p { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
img,svg { max-width: 100%; }
img { display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::placeholder { color: var(--text-3); }
::selection { background: var(--blue); color: #fff; }

[hidden]{ display: none !important; }

/* Фокус клавиатуры — у каждого интерактивного элемента */
:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}
/* На тёмном и на цветном синяя рамка не читается — берём белую */
.on-dark :focus-visible,
.on-color :focus-visible{ outline-color: #fff; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================================
   Кнопки
   Прямоугольник со скруглением 12, а не пилюля: в референсе пилюль нет
   ни одной, и форма кнопки — половина его узнаваемости. Тени сняты,
   отклик даётся цветом.
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: 56px; padding: 16px 28px;
  border: none; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 16.5px; font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap; text-align:center;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s var(--ease-out);
}
.btn:active{ transform: scale(.985); }

.btn--primary{ background: var(--blue); color:#fff; }
.btn--primary:hover{ background: var(--blue-ink); color:#fff; }

/* На тёмном и на цветном главная кнопка белая — как в референсе */
.btn--white{ background: #fff; color: var(--text); }
.btn--white:hover{ background: var(--lav); color: var(--text); }

.btn--ghost{ background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.btn--ghost:hover{ background: rgba(255,255,255,.08); color: #fff; }

.btn--secondary{ background: var(--lav); color: var(--text); }
.btn--secondary:hover{ background: var(--lav-2); color: var(--text); }

.btn--sm{ min-height: 48px; padding: 13px 22px; font-size: 15.5px; }
.btn--block{ width: 100%; }
.btn[disabled]{ opacity:.4; cursor: not-allowed; transform:none; }

.btn__arrow{ display:inline-block; transition: transform .18s var(--ease-out); }
.btn:hover .btn__arrow{ transform: translateX(4px); }

/* Загрузка: подпись гаснет, кольцо крутится, повторный клик невозможен */
.btn.is-loading{ pointer-events:none; color: transparent; position: relative; }
.btn.is-loading .btn__arrow{ visibility: hidden; }
.btn.is-loading::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border: 2px solid #fff; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
.btn--white.is-loading::after,
.btn--secondary.is-loading::after{ border-color: var(--blue); border-top-color: transparent; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.iconbtn{
  width: var(--tap); height: var(--tap); min-width: var(--tap);
  display:grid; place-items:center;
  border: none; background: transparent; color: var(--on-dark-2);
  border-radius: var(--r-sm); cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.iconbtn:hover{ background: rgba(255,255,255,.10); color: #fff; }

/* =========================================================================
   Появление блоков при скролле — единственная анимация страницы.
   Прячем только когда скрипт жив: без JS содержимое остаётся на месте.
   ========================================================================= */
html.js-reveal .reveal{ opacity: 0; transform: translateY(16px); }
html.js-reveal .reveal.is-in{
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  html.js-reveal .reveal{ opacity: 1; transform: none; }
}