/* ==========================================================================
   Оформление сайта: типографика, ритм и формы.

   Лежит отдельным слоем поверх styles.css, где остаётся разметка блоков.
   Такое разделение осталось от периода, когда оформление обкатывалось
   параллельно с рабочим: базовые правила не трогались, всё новое писалось
   здесь. Менять внешний вид — сюда.

   Задача: убрать признаки, по которым дизайн читается как сгенерированный.
   Главные из них были: гарнитура Inter, вес 800 у всех заголовков, мелкий
   интерфейсный кегль (17px текст, 14px кнопки), сплошная фиолетовая заливка
   кнопок и одинаковые скругления с рамками на каждом блоке.

   Что взято из оригинала (замеры с живой страницы):
     текст      19px / 31px (1.63) / +0.015em, белый с прозрачностью
     заголовки  вес 700, межстрочный 1.15, трекинг −0.015em
     шкала      h1 46 → h2 40 → h3 28 — без провала на третьем уровне
     кнопка     16px / 500, поля 17×34, капсула, рамка 2px
     секции     ритм 90px
     карточки   скругление 25px, без рамки, фон на тон светлее

   Гарнитура: Instrument Sans из оригинала кириллицу не поддерживает, поэтому
   взят Onest — геометричный гротеск, рисованный сразу под кириллицу.
   ========================================================================== */

:root {
  --f: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Фон тот же, но поверхности разведены мягче: карточка отличается тоном,
     а не рамкой — рамка на каждом блоке и делала вид «сеткой из коробок». */
  --card:      #17181d;
  --card-2:    #1c1d23;
  --line:      #2a2c34;
  --line-soft: #202229;

  /* Текст задаётся прозрачностью по белому, как в оригинале: так он ровнее
     ложится на любой фон, чем отдельно подобранный серый. */
  --tx:       #ffffff;
  --tx-dim:   rgba(255, 255, 255, .7);
  --tx-faint: rgba(255, 255, 255, .45);

  /* Скругления — то, что выдавало «мыльный» вид сильнее всего. В оригинале
     блоки почти острые: измерение по живой странице дало 5px у карточек
     работ и ~10px у остальных, при этом кнопки остаются капсулами. Контраст
     острого блока и круглой кнопки и создаёт узнаваемый характер; когда всё
     скруглено одинаково, страница выглядит сгенерированной. */
  --r:    8px;
  --r-lg: 10px;
  --r-card: 5px;

  /* Жёлтый — акцент самой темы: в оригинале им набраны надзаголовки.
     Фиолетовый остаётся фирменным цветом и уходит в детали. */
  --gold:      #f0d24e;
  --accent-hi: #7a68ff;
}

body { font-size: 19px; line-height: 1.63; letter-spacing: .015em; color: var(--tx-dim); }

/* --- заголовки ----------------------------------------------------------- */
/* Вес 700 вместо 800 и ровная шкала: у третьего уровня был провал с 35 до 20,
   из-за него подзаголовки читались как обычный текст. */
h1, h2, h3, h4, .h-like {
  color: var(--tx);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
}
h1 { font-size: clamp(34px, 4.6vw, 52px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.2; }
.sechead p, .hero__lead { color: var(--tx-dim); letter-spacing: .015em; }
.hero__lead { font-size: clamp(18px, 1.9vw, 21px); }

/* Надзаголовок — жёлтый с подчёркиванием, как в оригинале. Он там единственное
   цветное пятно в тексте и держит на себе всю акцентную роль. */
.eyebrow {
  color: var(--gold);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* --- кнопки -------------------------------------------------------------- */
/* Кнопка перестаёт быть фиолетовым прямоугольником: тёмная капсула с рамкой,
   кегль как у основного текста. Фиолетовым остаётся только главное действие. */
.btn {
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .015em;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: #14151a;
  color: var(--tx);
}
.btn:hover { border-color: #43454f; background: #1a1b21; }
.btn--lg { padding: 17px 34px; font-size: 17px; }
.btn--primary, .hero__btns .btn:first-child, .lead__form .btn[type="submit"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover, .hero__btns .btn:first-child:hover, .lead__form .btn[type="submit"]:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
}
.btn--ghost { background: transparent; }

/* Шапка: пункты крупнее и легче по весу. */
.hdr nav a, .mega__group a { font-size: 16px; font-weight: 500; letter-spacing: .015em; }
.hdr .btn { padding: 11px 24px; font-size: 15px; }

/* --- ритм секций --------------------------------------------------------- */
.sec { padding: 90px 0; }
.sec--top { padding-top: 70px; }
.hero { padding: 100px 0 70px; }
.sechead { margin-bottom: 44px; }

/* --- поверхности --------------------------------------------------------- */
/* Рамка убрана со всех карточек: в оригинале блоки отделяются тоном фона.
   Там, где нужна граница, она остаётся у таблиц и форм. */
.card, .quote, .feat, .pcard, .side, .tariff {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--card);
}
.card { padding: 32px; }
.quote { padding: 30px; background: var(--card-2); }

/* Крупные числа в карточках — та же шкала, что у заголовков. */
.card--num b, .stats b, .hero__stats b { font-weight: 700; letter-spacing: -.015em; }

/* --- списки и мелочи ----------------------------------------------------- */
.ticks li { line-height: 1.6; }
.legacy p { font-size: 18px; line-height: 1.7; }
.note { color: var(--tx-faint); }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .sec { padding: 62px 0; }
  .hero { padding: 66px 0 52px; }
  .btn--lg { padding: 15px 28px; font-size: 16px; }
}


/* --- сетки: воздух между блоками ---------------------------------------- */
/* В оригинале колонки разнесены на 80px. Столько при трёх колонках много,
   но прежние 22px делали из сетки сплошное полотно. */
.grid { gap: 34px; }
.grid--2 { gap: 44px; }

/* --- карточка работы: плакат, а не коробка ------------------------------ */
/* В оригинале карточка проекта — вертикальный плакат: снимок занимает всю
   площадь, поверх него категория, заголовок и кнопка. Пропорция 437×617,
   то есть примерно 0.71. У нас была «коробка»: картинка сверху, под ней
   отдельным блоком теги, заголовок, описание и ссылка — и именно это
   читалось как шаблон.

   Разметка не менялась: снимок уходит в фон абсолютным позиционированием,
   текстовый блок всплывает поверх него. */
/* Высота карточки: от исходной вертикали оставлено 70%. Снимки сайтов
   горизонтальные (примерно 4:3), и в узком вертикальном боксе их резало по
   бокам сильнее, чем нужно, — при более спокойной пропорции кадр берётся
   ближе к тому, что на снимке и снято. */
.pcard__link {
  position: relative;
  aspect-ratio: 72 / 70;
  border: 0;
  border-radius: var(--r-card);
  background: #101115;
  overflow: hidden;
}
.pcard__link:hover { transform: none; background: #101115; }
.pcard__shot {
  position: absolute; inset: 0;
  border: 0;
  background: #0a0b0d;
}
.pcard__shot picture, .pcard__shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  aspect-ratio: auto;
  transition: transform .5s ease;
}
.pcard__link:hover .pcard__shot img { transform: scale(1.04); }
/* Затемнение снизу вверх — чтобы текст читался на любом снимке. */
.pcard__link::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 11, 13, .15) 0%, rgba(10, 11, 13, .55) 42%, rgba(10, 11, 13, .95) 100%);
}
.pcard__body {
  position: relative; z-index: 2;
  margin-top: auto;
  gap: 10px;
  padding: 28px 26px 26px;
}
/* Логотип клиента идёт первой строкой текстового блока: вынести его в угол
   карточки нельзя — абсолютная привязка считалась бы от текстового блока,
   а не от самой карточки, и логотип ложился поверх тегов. */
.pcard__logo { margin: 0 0 4px; }
.pcard__logo img { height: 26px; max-width: 140px; opacity: .9; }
/* Категория набирается как надзаголовок оригинала — жёлтым, мелко. */
.pcard__tags .tag {
  padding: 0; background: none; color: var(--gold);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.pcard__tags .tag + .tag::before { content: '·'; margin-right: 6px; color: var(--tx-faint); }
.pcard__tags { gap: 6px; }
.pcard__title { font-size: clamp(20px, 1.9vw, 25px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--tx); }
.pcard__result { display: none; }
/* Кнопка внутри карточки — капсула, как в оригинале: круглое на остром. */
.pcard__cta {
  align-self: flex-start;
  margin-top: 14px; padding: 12px 24px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 500;
}
.pcard__link:hover .pcard__cta { background: var(--accent-hi); }

/* Карточка в ленте кейсов на странице услуги — та же логика. */
.grid--3 .pcard__link { aspect-ratio: 76 / 70; }

@media (max-width: 760px) {
  .grid { gap: 22px; }
  .grid--2 { gap: 26px; }
  /* На узком экране карточка одна в ряд, заголовок занимает до пяти строк —
     жёсткая пропорция его обрезала. Здесь пропорция задаёт минимум, а высота
     идёт от содержимого. */
  .pcard__link { aspect-ratio: auto; min-height: 84vw; }
  .pcard__body { padding: 22px 20px 20px; }
}


/* --- полоса клиентов: ритм ---------------------------------------------- */
/* Отступ под заголовком задавался нижним margin самого заголовка, а он
   схлопывался: заголовок — единственный ребёнок обёртки, и его margin уходил
   наружу. Получалось, что подпись липнет к логотипам, а снизу зияет полный
   отступ секции. Держим дистанцию padding'ом — он не схлопывается никогда.

   Сама полоса вспомогательная, ей не нужен ритм большой секции: соседние
   блоки и так дают по 90px, вместе выходило почти 200px пустоты. Снизу
   отступ почти убран — его добирает следующая секция, иначе от логотипов до
   соседнего заголовка оставалось 150px против 30px под подписью. */
.clients { padding: 48px 0 20px; }
.clients__title { margin: 0; }
.clients__viewport { padding-top: 28px; }


/* --- логотипы клиентов: общий бокс -------------------------------------- */
/* Логотипы приходят разными: часть векторами, часть растром, пропорции от
   2:1 до 11:1. Раньше у большинства SVG холст был один — 300×128 — и рисунок
   занимал в нём кто сколько: «Мир сейфов» 17% высоты, Koike 97%. Из-за этого
   при одной и той же заданной высоте одни выглядели крупно, другие терялись.

   Холсты обрезаны по содержимому, а здесь каждому логотипу отведён
   одинаковый прямоугольник, в который он вписывается целиком. Высота у всех
   одна; шире положенного логотип не растёт — очень вытянутые упираются в
   ширину и оказываются ниже, иначе строка вроде «МИР СЕЙФОВ» растянулась бы
   на пол-экрана. */
.clients__logo img {
  height: 54px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: center;
}
.clients__logo--key img { height: 74px; max-width: 290px; }

@media (max-width: 860px) {
  .clients__logo img { height: 42px; max-width: 170px; }
  .clients__logo--key img { height: 56px; max-width: 220px; }
}