@layer components {
  /* =========================================================
     Иконка
     Экспортированные из Figma SVG используются как альфа-маска,
     поэтому иконка красится через currentColor в любой контекст.
     ========================================================= */

  .icon {
    display: inline-block;
    inline-size: var(--icon-size, 2rem);
    block-size: var(--icon-size, 2rem);
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--icon-src) center / contain no-repeat;
    mask: var(--icon-src) center / contain no-repeat;
  }

  .icon--arrow { --icon-src: url("../assets/icons/svg/arrow.svg"); }
  .icon--auction { --icon-src: url("../assets/icons/svg/auction.svg"); }
  .icon--car { --icon-src: url("../assets/icons/svg/car.svg"); }
  .icon--car-key { --icon-src: url("../assets/icons/svg/car-key.svg"); }
  .icon--company { --icon-src: url("../assets/icons/svg/company.svg"); }
  .icon--documents { --icon-src: url("../assets/icons/svg/documents.svg"); }
  .icon--exchange { --icon-src: url("../assets/icons/svg/exchange.svg"); }
  .icon--eye { --icon-src: url("../assets/icons/svg/eye.svg"); }
  .icon--growth { --icon-src: url("../assets/icons/svg/growth.svg"); }
  .icon--kpi { --icon-src: url("../assets/icons/svg/kpi.svg"); }
  .icon--laptop { --icon-src: url("../assets/icons/svg/laptop.svg"); }
  .icon--loader { --icon-src: url("../assets/icons/svg/loader.svg"); }
  .icon--money { --icon-src: url("../assets/icons/svg/money.svg"); }
  .icon--pin { --icon-src: url("../assets/icons/svg/pin.svg"); }
  .icon--pin-world { --icon-src: url("../assets/icons/svg/pin-world.svg"); }
  .icon--plus-circle { --icon-src: url("../assets/icons/svg/plus-circle.svg"); }
  .icon--room-key { --icon-src: url("../assets/icons/svg/room-key.svg"); }
  .icon--search { --icon-src: url("../assets/icons/svg/search.svg"); }
  .icon--shield { --icon-src: url("../assets/icons/svg/shield.svg"); }
  .icon--support { --icon-src: url("../assets/icons/svg/support.svg"); }
  .icon--time { --icon-src: url("../assets/icons/svg/time.svg"); }
  .icon--towing-truck { --icon-src: url("../assets/icons/svg/towing-truck.svg"); }
  .icon--truck { --icon-src: url("../assets/icons/svg/truck.svg"); }
  .icon--users { --icon-src: url("../assets/icons/svg/users.svg"); }

  .icon--sm { --icon-size: 1.5rem; }
  .icon--lg { --icon-size: 3.125rem; }

  /* =========================================================
     Кнопка
     ========================================================= */

  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--color-on-dark);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-lg);
    min-block-size: 2.75rem;
    border-radius: var(--radius-xs);
    border: 1px solid var(--btn-border);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    text-align: start;
    transition:
      background-color var(--duration) var(--ease-out),
      border-color var(--duration) var(--ease-out),
      transform var(--duration) var(--ease-out),
      box-shadow var(--duration) var(--ease-out);
  }

  .btn__body {
    display: grid;
    gap: var(--space-xs);
  }

  .btn__title {
    font-size: var(--fs-lead);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
  }

  .btn__sub {
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    opacity: 0.85;
  }

  .btn__arrow {
    transition: transform var(--duration) var(--ease-out);
  }

  .btn:hover {
    transform: translateY(-2px);
  }

  .btn:hover .btn__arrow {
    transform: translateX(0.25rem);
  }

  .btn:active {
    transform: translateY(0);
  }

  /* --- варианты размера --- */

  .btn--lg {
    padding: var(--space-lg);
    gap: var(--space-xs);
    min-inline-size: min(24rem, 100%);
  }

  .btn--lg .btn__title {
    font-size: var(--fs-btn-lg);
    line-height: 1;
  }

  .btn--md {
    min-inline-size: min(24rem, 100%);
    min-block-size: 4.5rem;
    padding: 0.5rem 1.25rem;
    gap: var(--space-xs);
  }

  .btn--md .btn__body {
    gap: 0.125rem;
  }

  .btn--md .btn__title {
    line-height: 1.1;
  }

  .btn--sm {
    padding-inline: var(--space-md);
    padding-block: var(--space-xs);
    gap: var(--space-2xs);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
  }

  /* --- варианты цвета --- */

  .btn--main {
    --btn-bg: var(--color-brand);
    --btn-fg: var(--color-on-dark);
  }

  .btn--main:hover {
    --btn-bg: #16a5a1;
    box-shadow: var(--shadow-brand);
  }

  .btn--ghost {
    --btn-border: var(--color-on-dark);
    --btn-fg: var(--color-on-dark);
  }

  .btn--ghost:hover {
    --btn-bg: rgb(255 255 255 / 0.1);
  }

  .btn--outline {
    --btn-border: var(--color-ink);
    --btn-fg: var(--color-ink);
  }

  .btn--outline .btn__sub {
    color: var(--color-body);
    opacity: 1;
  }

  .btn--outline:hover {
    --btn-bg: var(--color-ink);
    --btn-fg: var(--color-on-dark);
  }

  .btn--outline:hover .btn__sub {
    color: inherit;
  }

  /* =========================================================
     Плашка-надзаголовок
     ========================================================= */

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

  /* =========================================================
     Карточка-аудитория: фото + иконка в круге + текст
     ========================================================= */

  .audience-card {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
      transform var(--duration) var(--ease-out),
      box-shadow var(--duration) var(--ease-out);
  }

  .audience-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

  .audience-card__media {
    aspect-ratio: 1;
    inline-size: 100%;
    object-fit: cover;
  }

  .audience-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 var(--space-xs) 1.5rem;
    text-align: center;
  }

  .audience-card__badge {
    display: grid;
    place-items: center;
    inline-size: 5rem;
    block-size: 5rem;
    margin-block-start: -2.625rem;
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-brand);
  }

  .audience-card__title {
    margin-block-start: var(--space-2xs);
    font-size: var(--fs-h6);
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--color-ink);
  }

  .audience-card__text {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-snug);
    color: var(--color-body);
  }

  /* =========================================================
     Карточка-преимущество: круг с иконкой, заголовок, текст
     ========================================================= */

  .benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-xs) var(--space-2xl);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-2);
    text-align: center;
  }

  .benefit-card__badge {
    display: grid;
    place-items: center;
    inline-size: 2.875rem;
    block-size: 2.875rem;
    color: var(--color-ink);
  }

  .benefit-card__badge .icon {
    background-color: transparent;
    -webkit-mask: none;
    mask: none;
    background-image: var(--icon-src);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: brightness(0);
  }

  .benefit-card__title {
    font-size: var(--fs-body);
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
    color: var(--color-ink);
  }

  .benefit-card__text {
    font-size: var(--fs-sm);
    line-height: 1.1;
    color: var(--color-body);
  }

  /* =========================================================
     Карточка услуги: иконка + заголовок в строку, текст ниже
     ========================================================= */

  .service-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    block-size: 100%;
    min-block-size: 14.875rem;
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition:
      transform var(--duration) var(--ease-out),
      box-shadow var(--duration) var(--ease-out);
  }

  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

  .service-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    color: var(--color-brand);
  }

  .service-card__title {
    font-size: var(--fs-h6);
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--color-ink);
  }

  .service-card__text {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-snug);
    color: var(--color-body);
  }

  /* =========================================================
     Карточка категории транспорта
     ========================================================= */

  .category-card {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-ink);
  }

  .category-card__media {
    aspect-ratio: 327 / 180;
    inline-size: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
  }

  .category-card:hover .category-card__media {
    transform: scale(1.04);
  }

  .category-card__bar {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-block-size: 4rem;
    padding: 0.625rem 1.25rem;
    color: var(--color-on-dark);
  }

  .category-card__title {
    flex: 1;
    max-inline-size: 11.1875rem;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
  }

  .category-card__go {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-ink);
    transition: transform var(--duration) var(--ease-out);
  }

  .category-card:hover .category-card__go {
    transform: translateX(0.25rem);
  }

  .category-card__go .icon {
    --icon-size: 1.25rem;
  }

  /* =========================================================
     Карточка лота
     ========================================================= */

  .lot-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    overflow: hidden;
    transition: border-color var(--duration) var(--ease-out);
  }

  .lot-card:hover {
    border-color: var(--color-brand);
  }

  .lot-card__media {
    aspect-ratio: 186 / 82;
    inline-size: 100%;
    object-fit: cover;
  }

  .lot-card__body {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-xs);
  }

  .lot-card__row {
    display: grid;
    gap: var(--space-3xs);
  }

  .lot-card__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
  }

  .lot-card__name,
  .lot-card__price {
    font-size: 0.8125rem;
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    color: var(--color-ink);
  }

  .lot-card__meta {
    font-size: var(--fs-4xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-ink-3);
  }

  .lot-card__timer {
    font-weight: var(--fw-regular);
  }

  /* =========================================================
     Факт: иконка + подпись (опционально с заголовком)
     ========================================================= */

  .fact {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2xs);
    border-radius: var(--radius-md);
    color: var(--color-brand);
  }

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

  .fact__title {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-ink);
  }

  .fact__text {
    font-size: var(--fs-sm);
    line-height: 1;
    color: var(--color-ink-2);
  }

  /* =========================================================
     Показатель: крупная цифра + подпись
     ========================================================= */

  .stat {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
  }

  .stat__icon {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    flex: none;
    color: var(--color-brand);
  }

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

  .stat__label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--color-ink);
  }

  /* =========================================================
     Аккордеон FAQ на нативном <details>
     ========================================================= */

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

  .accordion__item {
    border-block-end: 1px solid var(--color-border);
    padding-block-end: var(--space-xl);
  }

  .accordion__summary {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-lg);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-ink);
  }

  .accordion__marker {
    color: var(--color-brand);
    transition: transform var(--duration) var(--ease-out);
  }

  .accordion__item[open] .accordion__marker {
    transform: rotate(45deg);
  }

  .accordion__panel {
    padding-block-start: var(--space-sm);
    font-size: var(--fs-body);
    line-height: 1.2;
    color: var(--color-body);
    max-inline-size: 80ch;
  }

  /* Плавное раскрытие там, где браузер умеет анимировать высоту. */
  @supports (interpolate-size: allow-keywords) {
    :root {
      interpolate-size: allow-keywords;
    }

    .accordion__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--duration) var(--ease-out),
        content-visibility var(--duration) allow-discrete;
    }

    .accordion__item[open]::details-content {
      block-size: auto;
    }
  }

  /* =========================================================
     Логотип
     ========================================================= */

  .logo {
    display: inline-flex;
    flex: none;
  }

  .logo__img {
    inline-size: clamp(9rem, 12vw, 14.125rem);
    block-size: auto;
  }
}