@layer sections {
  /* =========================================================
     Шапка
     ========================================================= */

  .header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background-color: var(--color-surface);
    transition: box-shadow var(--duration) var(--ease-out);
  }

  .header.is-stuck {
    box-shadow: var(--shadow-sm);
  }

  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    min-block-size: var(--header-height);
  }

  .header__tagline {
    display: none;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-muted);
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg) var(--space-2xl);
    min-inline-size: 0;
  }

  .nav-list__link {
    position: relative;
    display: inline-block;
    padding-block: var(--space-3xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--color-ink);
    white-space: nowrap;
    transition: color var(--duration) var(--ease-out);
  }

  .nav-list__link::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 2px;
    background-color: var(--color-brand);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--duration) var(--ease-out);
  }

  .nav-list__link:hover,
  .nav-list__link.is-active {
    color: var(--color-brand);
  }

  .nav-list__link:hover::after,
  .nav-list__link.is-active::after {
    transform: scaleX(1);
  }

  .header__contacts {
    display: grid;
    gap: var(--space-3xs);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-snug);
  }

  .header__phone {
    font-weight: var(--fw-bold);
    color: var(--color-ink);
  }

  .header__mail {
    font-weight: var(--fw-medium);
    color: var(--color-ink);
  }

  .header__phone:hover,
  .header__mail:hover {
    color: var(--color-brand);
  }

  /* --- Мобильная навигация --- */

  .header__nav {
    position: fixed;
    inset-block: var(--header-height) 0;
    inset-inline-end: 0;
    z-index: var(--z-nav-panel);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    inline-size: min(22rem, 100%);
    padding: var(--space-2xl) var(--space-xl) var(--space-4xl);
    background-color: var(--color-surface);
    border-inline-start: 1px solid var(--color-border);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--duration) var(--ease-out),
      visibility var(--duration);
  }

  .header__nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Стили панели действуют только там, где она существует. */
  @media (max-width: 79.9375em) {
    .header__nav .nav-list {
      flex-direction: column;
      gap: var(--space-lg);
    }

    .header__nav .nav-list__link {
      font-size: var(--fs-body-sm);
    }
  }

  .header__login {
    align-self: start;
    white-space: nowrap;
  }

  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background-color: rgb(2 17 32 / 0.5);
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
  }

  .nav-scrim.is-open {
    opacity: 1;
  }

  .burger {
    display: grid;
    place-content: center;
    gap: 5px;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: none;
    margin-inline-end: calc(var(--space-2xs) * -1);
    color: var(--color-ink);
  }

  .burger__bar {
    inline-size: 1.5rem;
    block-size: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
  }

  .burger[aria-expanded="true"] .burger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .burger[aria-expanded="true"] .burger__bar:nth-child(2) {
    opacity: 0;
  }

  .burger[aria-expanded="true"] .burger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* До 1536px строка вмещает меню и кнопку входа, но не контакты — они остаются в подвале. */
  @media (min-width: 80em) and (max-width: 95.9375em) {
    .header__contacts {
      display: none;
    }

    .header__nav .nav-list {
      gap: var(--space-md);
    }
  }

  /* Семь пунктов меню, контакты и кнопка входа умещаются в строку только с 1280px. */
  @media (min-width: 80em) {
    .header__nav {
      position: static;
      flex-direction: row;
      align-items: center;
      gap: var(--space-2xl);
      inline-size: auto;
      flex: 1;
      justify-content: end;
      padding: 0;
      border: none;
      overflow: visible;
      transform: none;
      visibility: visible;
      background: none;
    }

    .header__nav .nav-list {
      flex-direction: row;
      gap: var(--space-xl);
    }

    .burger,
    .nav-scrim {
      display: none;
    }
  }

  /* Слоган из макета возвращается, только когда строка держит его без переносов. */
  @media (min-width: 120em) {
    .header__tagline {
      display: block;
    }

    .header__nav .nav-list {
      margin-inline-end: auto;
    }
  }

  /* =========================================================
     Hero
     ========================================================= */

  .hero {
    position: relative;
    isolation: isolate;
    /* Сверху 56px до плашки, снизу 45px до края — как в макете 1920. */
    padding-block: clamp(2rem, 1.617rem + 1.569vw, 3.5rem)
      clamp(2rem, 1.481rem + 2.308vw, 2.8125rem);
    background-color: var(--color-surface-dark);
    color: var(--color-on-dark);
    overflow: clip;
  }

  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .hero__map {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: -8%;
    inline-size: min(90rem, 120%);
    max-inline-size: none;
    opacity: 0.55;
  }

  .hero__inner {
    display: grid;
    gap: var(--space-5xl);
    align-items: start;
  }

  .hero__lead {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-xl);
    max-inline-size: 49.25rem;
  }

  .hero__tiles,
  .hero__actions {
    align-self: stretch;
  }

  .hero .eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md);
    background-color: var(--color-brand-soft);
    font-size: var(--fs-body-lg);
    line-height: 1.2;
  }

  .hero__title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    /* 61.44 / 64 в макете */
    line-height: 0.96;
  }

  .hero__text {
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-on-dark);
    max-inline-size: 40.9375rem;
  }

  .hero__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
    gap: var(--space-lg);
    inline-size: 100%;
    margin-block-start: var(--space-md);
  }

  @media (min-width: 64em) {
    .hero__tiles {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .hero-tile {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 0.375rem 1.25rem 0.875rem;
    border-radius: var(--radius-md);
    background-color: var(--color-brand-soft);
  }

  .hero-tile__icon {
    color: var(--color-brand);
  }

  .hero-tile__title {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--color-brand);
  }

  .hero-tile__text {
    font-size: var(--fs-sm);
    line-height: 1;
  }

  .hero__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-lg);
    inline-size: 100%;
    margin-block-start: var(--space-md);
  }

  .hero__aside {
    display: grid;
    gap: var(--space-2xl);
    min-inline-size: 0;
  }

  .hero__aside > * {
    min-inline-size: 0;
  }

  .hero__cars {
    inline-size: 100%;
    /* Без ограничения по 100% собственная ширина картинки растягивает колонку сетки. */
    max-inline-size: min(62.5rem, 100%);
    justify-self: center;
  }

  /* --- Панель «Сегодня на платформе» --- */

  .platform-stats {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-dark-2);
  }

  .platform-stats__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--color-on-dark-muted);
  }

  .platform-stats__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-md);
    margin-block-start: var(--space-xs);
  }

  .platform-stat {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    min-block-size: 6.0625rem;
    color: var(--color-on-dark);
  }

  .platform-stat .icon {
    color: var(--color-brand);
  }

  .platform-stat__body {
    display: grid;
    gap: var(--space-3xs);
  }

  .platform-stat__value {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
  }

  .platform-stat__value--sm {
    font-size: var(--fs-body-sm);
  }

  .platform-stat__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.1;
    color: var(--color-on-dark-muted);
  }

  /* --- Панель «Последние лоты» --- */

  .lots {
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-ink);
  }

  .lots__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: 0 var(--space-2xs) var(--space-md);
  }

  .lots__title {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: 1.2;
  }

  .lots__all {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-brand);
    white-space: nowrap;
  }

  .lots__all:hover {
    text-decoration: underline;
  }

  .lots__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: var(--space-2xs);
  }

  @media (max-width: 29.9375em) {
    .lots__list {
      grid-auto-flow: column;
      grid-auto-columns: 11.625rem;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      padding-block-end: var(--space-2xs);
    }

    .lots__list > * {
      scroll-snap-align: start;
    }
  }

  /* Две колонки только с 1280px: ниже текстовой колонке не хватает ширины
     и правая схлопывается до нечитаемой. */
  @media (min-width: 80em) {
    .hero__inner {
      /* Левая колонка как в макете: 788px, правая забирает остаток. */
      grid-template-columns: 49.25rem minmax(0, 1fr);
      gap: var(--space-4xl);
      align-items: stretch;
    }

    .hero__lead {
      max-inline-size: none;
      inline-size: 100%;
    }

    .hero__tiles {
      margin-block-start: 0;
    }

    .hero__actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-block-start: auto;
    }

    .platform-stats {
      /* Центр правой половины, а не прижатие к правому краю. */
      justify-self: center;
      inline-size: min(33.1875rem, 100%);
    }

    .platform-stats__list {
      grid-template-columns: 1fr 1fr;
      column-gap: 1.875rem;
      row-gap: 0.125rem;
    }

    .hero__cars {
      /* В макете картинка на 13% шире своей колонки: слева заходит под текст,
         справа выходит за край контейнера. Проценты считаются от колонки,
         поэтому пропорция держится на любой ширине. */
      inline-size: 113%;
      max-inline-size: none;
      margin-inline: -7.4% -5.6%;
      /* Снизу у картинки ~8% прозрачного поля, поэтому подрез меньше верхнего:
         иначе карточка лотов режет колёса. */
      margin-block: -3vw -2.5vw;
    }

    .lots {
      inline-size: min(49.625rem, 100%);
      justify-self: end;
      margin-block-start: auto;
    }
  }

  /* =========================================================
     Клиенты
     ========================================================= */

  .clients {
    padding-block: var(--space-section);
  }

  .clients__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: var(--color-ink);
    text-align: center;
  }

  .clients__logos {
    inline-size: 100%;
    max-inline-size: min(71.25rem, 100%);
    margin-block-start: 1.25rem;
  }

  /* =========================================================
     Для кого платформа
     ========================================================= */

  /* Число колонок задаётся явно: auto-fit при 5 и 8 элементах
     даёт неровные ряды (5+3 вместо 4+4). */
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
    gap: var(--space-gutter);
  }

  @media (min-width: 30em) {
    .grid {
      --cols: 2;
    }
  }

  @media (min-width: 48em) {
    .grid {
      --cols: var(--cols-md, 2);
    }
  }

  @media (min-width: 64em) {
    .grid {
      --cols: var(--cols-lg, 3);
    }
  }

  @media (min-width: 80em) {
    .grid {
      --cols: var(--cols-xl, 4);
    }
  }

  /* На узких экранах ряды карточек превращаются в карусели —
     иначе страница вытягивается на многие тысячи пикселей. */
  @media (max-width: 47.9375em) {
    .grid--carousel {
      grid-auto-flow: column;
      grid-auto-columns: min(80%, 18rem);
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--space-shell);
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      margin-inline: calc(var(--space-shell) * -1);
      padding: var(--space-3xs) var(--space-shell) var(--space-md);
    }

    .grid--carousel > * {
      scroll-snap-align: start;
    }
  }

  .audience__grid {
    --cols-lg: 3;
    --cols-xl: 5;
  }

  /* --- Полоса с преимуществами платформы --- */

  .audience {
    padding-block: 4.0625rem;
  }

  .promo-bar {
    display: grid;
    gap: var(--space-xl);
    margin-block-start: var(--space-xl);
    padding: var(--space-md) var(--space-3xl);
    border-radius: var(--radius-md);
    background-color: var(--color-brand-veil);
  }

  .promo-bar__lead {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    min-inline-size: 0;
  }

  .promo-bar__lead > div {
    min-inline-size: 0;
  }

  .promo-bar__icon {
    --icon-size: 3.75rem;
    color: var(--color-brand);
  }

  .promo-bar__title {
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--color-brand);
  }

  .promo-bar__text {
    margin-block-start: var(--space-2xs);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-snug);
    color: var(--color-body);
  }

  .promo-bar__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    align-items: center;
  }

  .promo-bar__facts--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-xl);
  }

  .promo-bar--facts {
    padding-block: var(--space-md);
  }

  @media (min-width: 80em) {
    .promo-bar:not(.promo-bar--facts) {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 2.5rem;
      min-block-size: 7.5rem;
    }

    .promo-bar:not(.promo-bar--facts) .promo-bar__facts {
      grid-template-columns: repeat(4, max-content);
      justify-content: end;
      gap: 1.25rem;
    }

    .promo-bar:not(.promo-bar--facts) .fact {
      padding: 0;
    }

    .promo-bar:not(.promo-bar--facts) .fact__text {
      max-inline-size: 9.75rem;
    }
  }

  /* =========================================================
     О компании
     ========================================================= */

  .about {
    padding-block: var(--space-section) 5.75rem;
  }

  .about__stack {
    display: grid;
    gap: var(--space-3xl);
  }

  .about__head {
    display: grid;
    gap: var(--space-xl);
  }

  .about__text {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-snug);
    max-inline-size: 49.25rem;
  }

  .about__benefits {
    --cols-lg: 3;
    --cols-xl: 5;
  }

  /* --- Полоса с масштабами --- */

  .scale-bar {
    display: grid;
    gap: var(--space-2xl);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    background-color: var(--color-brand-tint);
  }

  .scale-bar__title {
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--color-brand);
  }

  .scale-bar__text {
    margin-block-start: var(--space-xs);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-snug);
    color: var(--color-body);
  }

  .scale-bar__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr));
    gap: var(--space-xl);
  }

  @media (min-width: 64em) {
    .scale-bar {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--space-4xl);
      padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-lg);
    }

    .scale-bar__stats {
      grid-template-columns: repeat(3, minmax(0, 11.5rem));
    }
  }

  /* --- Категории транспорта --- */

  .categories {
    display: grid;
    gap: var(--space-2xl);
  }

  .categories__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-ink);
  }

  .categories__text {
    margin-block-start: var(--space-xl);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-snug);
    color: var(--color-body);
  }

  .categories__grid {
    --cols-lg: 2;
    --cols-xl: 4;
  }

  @media (min-width: 80em) {
    .categories {
      grid-template-columns: minmax(0, 20.8125rem) minmax(0, 1fr);
      gap: var(--space-gutter);
      align-items: start;
    }
  }

  /* --- Тёмная полоса с призывом --- */

  .cta-bar {
    display: grid;
    gap: var(--space-xl);
    min-block-size: 8.25rem;
    padding: 1.25rem var(--space-lg);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-dark);
    color: var(--color-on-dark);
  }

  .cta-bar__icon {
    color: var(--color-on-dark);
  }

  .cta-bar__title {
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    line-height: 1.2;
  }

  .cta-bar__text {
    margin-block-start: var(--space-sm);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
  }

  .cta-bar__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-gutter);
  }

  @media (min-width: 80em) {
    .cta-bar {
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--space-2xl);
    }

    .cta-bar__actions {
      grid-template-columns: repeat(2, minmax(0, 24rem));
    }
  }

  /* =========================================================
     Услуги
     ========================================================= */

  .services {
    padding-block: 4.0625rem;
  }

  .services__grid {
    --cols-xl: 4;
    list-style: none;
  }

  .services__grid > li,
  .audience__grid > li,
  .about__benefits > li,
  .categories__grid > li {
    display: grid;
  }

  /* =========================================================
     FAQ
     ========================================================= */

  .faq__title {
    text-align: center;
    margin-block-end: 4.5625rem;
  }

  .faq .accordion {
    max-inline-size: 62.5rem;
    margin-inline: auto;
  }

  /* =========================================================
     Контакты
     ========================================================= */

  .contacts {
    padding-block: 3.9375rem 0;
    background-color: var(--color-surface-2);
  }

  .contacts__inner {
    display: grid;
    align-items: start;
    gap: var(--space-4xl);
    padding-block-end: 1.5625rem;
  }

  .contacts__lead {
    display: grid;
    align-content: start;
    gap: 3.125rem;
  }

  .contacts__lead .display {
    max-inline-size: 45rem;
    line-height: 1.1;
    text-wrap: unset;
  }

  .contacts__schedule {
    font-size: var(--fs-body);
    line-height: 1.2;
    color: var(--color-body);
  }

  .contacts__list {
    display: grid;
    gap: 1.875rem;
    align-content: start;
  }

  .contacts__label {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-body);
  }

  .contacts__value {
    margin-block-start: 0.875rem;
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-ink);
  }

  .contacts__item:last-child .contacts__value {
    max-inline-size: 25.34375rem;
  }

  .contacts__value a:hover {
    color: var(--color-brand);
  }

  .contacts__map {
    inline-size: 100%;
    block-size: clamp(12rem, 23vw, 27.375rem);
    object-fit: cover;
  }

  @media (min-width: 64em) {
    .contacts__inner {
      grid-template-columns: minmax(0, 55fr) minmax(0, 37fr);
      gap: var(--space-5xl);
    }
  }

  /* =========================================================
     Подвал
     ========================================================= */

  .footer {
    padding-block: clamp(2rem, 1.35rem + 2.8vw, 3.0625rem);
  }

  .footer__inner {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
  }

  .footer__links {
    display: grid;
    gap: var(--space-2xs);
    font-size: var(--fs-body);
    color: var(--color-body);
  }

  .footer__links a:hover {
    color: var(--color-brand);
  }

  .footer__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-gutter);
  }

  @media (min-width: 80em) {
    .footer__inner {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: var(--space-4xl);
    }

    .footer__actions {
      grid-template-columns: repeat(2, minmax(0, 24rem));
    }
  }
}