/* АльфаТрансПрофит — лендинг (вариант «site»)
 *
 * Конструкция и типографика — из запечённых референсов, не выдуманные:
 *   Alkonta (snapshots/alkonta-krasnodar): шрифт Mulish; h1 60px / h2 32px, 700,
 *     uppercase, line-height 130%; панель, уходящая за край экрана
 *     (margin-left:-292px + padding-left:292px, радиус 0 20px 20px 0);
 *     pill-кнопка padding 9px 9px 9px 20px с кружком на конце; радиусы 20/15/30;
 *     переходы 0.2s linear; многослойная тонированная тень.
 *   Контур (snapshots/kontur-logistika): line-height 1.5 в тексте, радиусы 16/24,
 *     светлый серый контейнер секции, нумерованные шаги 1–4 в обычном регистре.
 *
 * Цвета — НЕ из референсов: вся палитра выведена из #003030 логотипа.
 */

/* ---------------- токены ---------------- */

:root {
  /* палитра выведена из логотипа: тон 180°, разные светлота и насыщенность */
  --brand: #003030;
  --brand-deep: #001a1a;
  --brand-mid: #0a4a44;
  --brand-soft: #8ed0c2;
  --brand-pale: #e8f1ef;

  --ink: #1b1f1e;
  --muted: #5f6b68;
  --paper: #ffffff;
  --grey: #f1f3f2;
  --line: #e3e7e6;

  --shell: 1200px;          /* Alkonta: max-width 1200 */
  --gutter: 20px;           /* Alkonta: базовый шаг 20px */
  /* расстояние от края экрана до колонки контента — для выносных панелей */
  --pad: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));

  --r-lg: 30px;
  --r-md: 20px;
  --r-sm: 15px;
  --r-pill: 100px;

  --t: .2s linear;          /* Alkonta: единственная кривая перехода */

  /* Alkonta: тень как лестница слоёв, тонированная акцентом */
  --shadow: 0 6px 12px rgba(0, 48, 48, .05), 0 23px 23px rgba(0, 48, 48, .04),
            0 51px 31px rgba(0, 48, 48, .03), 0 90px 36px rgba(0, 48, 48, .01);

  --font: Mulish, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;              /* Контур: базовый интерлиньяж текста */
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

section { padding: 100px 0; }
section[id] { scroll-margin-top: 90px; }

.grey { background: var(--grey); }

/* ---------------- типографика (правила Alkonta) ---------------- */

h1, h2 {
  font-weight: 700;
  line-height: 130%;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

h1 { font-size: clamp(30px, 4.2vw, 56px); overflow-wrap: anywhere; }
h2 { font-size: clamp(24px, 2.7vw, 32px); margin-bottom: 20px; }

/* Контур: подзаголовки в обычном регистре, интерлиньяж 1.2–1.33 */
h3 { font-size: 20px; font-weight: 700; line-height: 1.3; }

.hl { color: var(--brand); }
.on-dark .hl { color: var(--brand-soft); }

/* Alkonta: .hero__subtitle — 22px, 700, uppercase */
.eyebrow {
  font-size: 22px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--brand);
}

.on-dark .eyebrow { color: var(--brand-soft); }

.lead { font-size: 18px; color: var(--muted); max-width: 62ch; }
.on-dark { color: #fff; }
.on-dark .lead { color: rgba(255, 255, 255, .82); }

.head { margin-bottom: 50px; }
.head .lead { margin-top: 20px; }

/* ---------------- pill-кнопка с кружком (Alkonta) ---------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 9px 9px 9px 20px;      /* Alkonta: точные значения */
  border: 0;
  border-radius: var(--r-pill);
  font: 700 16px/1 var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.pill i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  font-style: normal;
  font-size: 17px;
  line-height: 1;
  transition: transform var(--t);
}

.pill:hover i { transform: translateX(3px); }

.pill--brand { background: var(--brand); color: #fff; }
.pill--brand i { background: #fff; color: var(--brand); }
.pill--brand:hover { background: var(--brand-mid); }

.pill--paper { background: #fff; color: var(--brand); }
.pill--paper i { background: var(--brand); color: #fff; }
.pill--paper:hover { background: var(--brand-pale); }

/* Контур: контурная pill-кнопка в шапке */
.pill--line {
  background: transparent;
  color: var(--brand);
  border: 2px solid var(--brand);
  padding: 12px 26px;
  font-size: 15px;
}
.pill--line:hover { background: var(--brand); color: #fff; }

:focus-visible { outline: 3px solid var(--brand-mid); outline-offset: 3px; }

/* ---------------- панель, уходящая за край экрана (Alkonta) ----------------
   Внутренний отступ до колонки контента задан longhand-свойством: блоки ниже
   объявляют свои padding тоже longhand, иначе сокращённая запись его затрёт. */

.bleed-l {
  margin-left: calc(-1 * var(--pad));
  padding-left: var(--pad);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.bleed-r {
  margin-right: calc(-1 * var(--pad));
  padding-right: var(--pad);
  border-radius: var(--r-md) 0 0 var(--r-md);
}

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

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* шаг 20px, а не 30: с 30px марка, меню, телефон и кнопка требуют 1203px
   и не влезают в колонку 1160px — кнопка вылезала за сетку на 43px */
.hdr__in { display: flex; align-items: center; gap: var(--gutter); height: 86px; }

.mark { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mark img { width: 56px; height: 56px; }
.mark b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.mark i {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

/* вправо всё лишнее отталкивает марка, а не меню: иначе на ширинах, где меню
   скрыто, телефон и кнопка прилипали к логотипу, а справа зияла пустота */
.hdr .mark { margin-right: auto; }

.hdr__nav { display: flex; gap: 18px; }
.hdr__nav a { font-size: 15px; font-weight: 600; white-space: nowrap; transition: color var(--t); }
.hdr__nav a:hover { color: var(--brand-mid); }

/* Контур: справа простая текстовая ссылка и контурная pill, без блока с подписью */
.hdr__tel { font-size: 16px; font-weight: 700; white-space: nowrap; transition: color var(--t); }
.hdr__tel:hover { color: var(--brand-mid); }

/* ---------------- хиро (Alkonta) ---------------- */

.hero { position: relative; padding: 0; background: var(--brand-deep); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .shell { position: relative; z-index: 1; padding-top: 130px; padding-bottom: 90px; }

.hero__panel {
  background: var(--brand);
  color: #fff;
  /* Alkonta: max-width панели 857px — но там она задавала колонку текста.
     Здесь .bleed-l добавляет слева вынос за край экрана (--pad), и при
     box-sizing: border-box вынос вычитался бы из тех же 857px: на 2560px
     под текст оставалось 117px, на 3440px — ноль и переполнение.
     Прибавляем вынос к max-width — колонка текста постоянна на любой ширине. */
  max-width: calc(857px - var(--gutter) + var(--pad));
  padding-top: 40px;
  padding-right: 40px;
  padding-bottom: 40px;
}

.hero h1 { margin-bottom: 20px; }

/* Alkonta: .hero__title-small — 18px, 400, uppercase, узкая колонка */
.hero__small {
  max-width: 46ch;
  margin-bottom: 40px;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, .88);
}

/* Alkonta: .hero__list — flex space-between, число 50px, подпись 16px по центру */
.hero__list {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 620px;
  margin-bottom: 40px;
}

.hero__list div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__list b { font-size: clamp(34px, 3.6vw, 50px); font-weight: 700; line-height: 1; margin-bottom: 26px; }
.hero__list span { font-size: 16px; max-width: 16ch; }

/* ---------------- Контур: тёмная скруглённая плашка-заявление ----------------
   Заголовок в обычном регистре, интерлиньяж 1.2, радиус 24px. */

.k-band {
  background: var(--brand);
  color: #fff;
  border-radius: 24px;
  padding: 60px 50px;
}

/* оба правила в один класс: иначе .k-band p перебивает .k-band__note по специфичности */
.k-band__title {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  max-width: 22ch;
}

.k-band__title em { font-style: normal; color: var(--brand-soft); }

.k-band__note {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
  max-width: 56ch;
}

/* ---------------- Контур: серый скруглённый контейнер секции ---------------- */

.k-panel { background: var(--grey); border-radius: 24px; padding: 60px 50px; }

/* ---------------- Контур: плоские серые карточки со ссылкой-стрелкой ---------------- */

.k-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.k-card { background: var(--grey); border-radius: 16px; padding: 40px; }
.k-card h3 { margin-bottom: 15px; font-size: 22px; }
.k-card p { font-size: 17px; line-height: 1.5; color: var(--muted); }

.k-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 17px;
  font-weight: 600;
  color: var(--brand);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t);
}

.k-link::after { content: " →"; }
.k-link:hover { border-color: var(--brand); }

.k-link--section { margin-top: 30px; font-size: 18px; }

/* ---------------- Контур: фото в карточке с наложенной белой карточкой ---------------- */

.k-photo { position: relative; padding-left: 40px; padding-bottom: 40px; }
.k-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; }

.k-photo__card {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 340px;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.k-photo__card span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.k-photo__card b { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.k-photo__card p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ---------------- услуги: плитки в тёмном контейнере (Alkonta) ---------------- */

.tiles {
  background: var(--brand-deep);
  border-radius: var(--r-md);
  padding: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.tile {
  position: relative;
  min-height: 420px;
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; transition: transform .5s linear;
}

.tile::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 26, 26, .2) 0%, rgba(0, 26, 26, .9) 100%);
}

.tile:hover img { transform: scale(1.05); }

/* общая высота текстового блока и заголовка: иначе заголовки в одну и в две
   строки дают рваную линию по четырём плиткам */
.tile__body { padding: 20px; color: #fff; min-height: 185px; }

.tile__body b {
  display: block;
  min-height: 2.4em;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.tile__body p { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .8); }

/* два столбца Контура: текст слева, фото-карточка справа, без выноса за край */
.k-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 60px; align-items: center; }

/* ---------------- два столбца: текст + фото за край (Alkonta) ---------------- */

.split { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.split__text { flex: 0 0 48%; }
.split__text p { color: var(--muted); margin-top: 20px; }

.split__photo { flex: 1 1 auto; min-width: 0; background: var(--brand); }
.split__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.split--photo-left .split__photo { padding-top: 20px; padding-right: 20px; padding-bottom: 20px; }
.split--photo-left .split__photo img { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.split--photo-right .split__photo { padding-top: 20px; padding-bottom: 20px; padding-left: 20px; }
.split--photo-right .split__photo img { border-radius: var(--r-sm) 0 0 var(--r-sm); }

/* список с квадратными маркерами (Alkonta) */
.marks { list-style: none; display: grid; gap: 15px; margin-top: 30px; }

/* маркер позиционируется абсолютно, чтобы инлайн-разметка внутри пункта
   (например <b>) не превращалась в отдельную колонку */
.marks li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.45; }

.marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  background: var(--brand);
}
.on-dark .marks li::before { background: var(--brand-soft); }

.marks b { font-weight: 800; }

/* ---------------- шаги 1–4 (Контур) ---------------- */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }

.step__n {
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
  margin-bottom: 20px;
}

.step h3 { margin-bottom: 10px; }
.step p { font-size: 16px; color: var(--muted); }

/* ---------------- заявка (Alkonta) ---------------- */

.fb { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.fb__form { flex: 0 0 40%; }          /* Alkonta: .feedback__form-wrapper */
.fb__form form { display: grid; gap: 15px; margin-top: 30px; }

.fb__form input, .fb__form select {
  width: 100%;
  padding: 18px 25px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  font: 500 16px var(--font);
  color: var(--ink);
  outline: none;
  appearance: none;
  transition: border-color var(--t);
}

.fb__form input::placeholder { color: #9aa5a2; }
.fb__form input:focus, .fb__form select:focus { border-color: var(--brand); }

.fb__form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f6b68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  padding-right: 50px;
}

.fb__form .pill { justify-self: start; margin-top: 5px; }
.fb__note { font-size: 13px; color: var(--muted); max-width: 44ch; }

.fb__ok {
  display: none;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}

.fb__side {
  flex: 1 1 auto; min-width: 0;
  background: var(--brand); color: #fff;
  padding-top: 40px; padding-bottom: 40px; padding-left: 40px;
  display: flex; flex-direction: column; gap: 30px;
}

/* квадрат, а не портрет: при 4/5 панель вырастала на 200px выше колонки с формой */
.fb__side img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 45%;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

/* ---------------- подвал (Alkonta) ---------------- */

.ftr { background: var(--brand-deep); color: rgba(255, 255, 255, .82); padding: 60px 0; }

.ftr__in { display: flex; align-items: flex-start; gap: 60px; flex-wrap: wrap; }

.ftr .mark { margin-right: auto; }
.ftr .mark b { color: #fff; }
.ftr .mark i { color: rgba(255, 255, 255, .6); }

.ftr__col h4 { font-size: 14px; font-weight: 700; color: var(--brand-soft); margin-bottom: 15px; }
.ftr__col p, .ftr__col a { display: block; font-size: 16px; margin-bottom: 10px; }
.ftr__col a:hover { color: var(--brand-soft); }
.ftr__col a.big { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }

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

/* меню — первое, что убирается из шапки: ниже 1240px пять пунктов вместе
   с телефоном и кнопкой уже не помещаются, и кнопку обрезал край экрана.
   Телефон и кнопка остаются — по ним звонят и оставляют заявку. */
@media (max-width: 1240px) {
  .hdr__nav { display: none; }
}

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* плитки шире, заголовки укладываются в строку — выравнивать нечего */
  .tile__body, .tile__body b { min-height: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
  .ftr__in { gap: 40px; }
  .hero .shell { padding-top: 90px; padding-bottom: 60px; }
  .k-split { gap: 40px; }
  .k-panel, .k-band { padding: 50px 36px; }
}

@media (max-width: 900px) {
  section { padding: 70px 0; }

  .k-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .k-cards { grid-template-columns: minmax(0, 1fr); }
  .k-card { padding: 30px; }

  .split, .fb { flex-direction: column; align-items: stretch; gap: 40px; }
  .split--photo-left { flex-direction: column-reverse; }
  .split__text, .fb__form { flex: 1 1 auto; }
  .split__photo img { aspect-ratio: 16 / 10; }

  .fb__side { margin-right: 0; padding: 30px 20px; border-radius: var(--r-md); }
  .fb__side img { border-radius: var(--r-sm); }

  .hero__panel { max-width: none; padding-top: 30px; padding-right: 20px; padding-bottom: 30px; }

  /* панель шире, чем на десктопе: space-between растащил бы числа по краям */
  .hero__list {
    max-width: none;
    justify-content: flex-start;
    gap: 50px;
  }
  .hero__list div { align-items: flex-start; text-align: left; }
  .claim__panel { padding-right: 20px; }

  .split--photo-left .split__photo,
  .split--photo-right .split__photo { padding: 20px; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }

  .k-panel, .k-band { padding: 34px 20px; border-radius: 16px; }
  .k-photo { padding-left: 0; padding-bottom: 0; }
  /* position: relative обязателен — иначе картинка рисуется поверх фона карточки */
  .k-photo__card {
    position: relative;
    inset: auto;
    z-index: 1;
    max-width: none;
    margin: -40px 16px 0;
  }

  .hdr__in { height: 70px; gap: 12px; }
  .hdr__tel { display: none; }
  .mark img { width: 44px; height: 44px; }
  .mark b { font-size: 14px; }
  .mark i { display: none; }
  .hdr .pill--line { padding: 10px 18px; font-size: 13.5px; }

  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 320px; }

  .steps { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ftr__in { flex-direction: column; gap: 30px; }

  /* панель во всю ширину закрывала бы кадр целиком, а обрезка по высоте
     оставляла бы одно небо — выносим фото отдельной лентой над панелью */
  .hero { display: flex; flex-direction: column; }
  .hero__bg { position: static; height: 220px; }
  .hero .shell { padding-top: 0; padding-bottom: 0; }
  .hero__panel { border-radius: 0; padding-bottom: 40px; }

  .hero__list { flex-wrap: wrap; gap: 24px 20px; }
  .hero__list div { align-items: flex-start; text-align: left; flex: 1 0 40%; }
  .hero__list b { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}