@layer sections {
  .hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 746px;               /* Figma 12:78 */
    padding-block: 200px 160px;
    overflow: hidden;
    isolation: isolate;
  }

  /* Фон. Поки зображення не залите — небо над бетоном, як у макеті. */
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(180deg, #1a5fa8 0%, #4a90d9 38%, #9db8cc 62%, #5a6068 63%, #3b4046 100%);
  }

  /* Desktop-композиція у Figma зібрана на полотні близько 1920px і
     центрується при звуженні екрана. Так техніка не «їздить» відносно тексту. */
  .hero__image {
    position: absolute;
    z-index: 0;
    inset-block-start: -48px;
    inset-inline-start: 50%;
    width: max(1920px, 100vw);
    height: auto;
    max-width: none;
    translate: -50% 0;
    object-fit: cover;
    object-position: center;
  }

  /* Figma використовує рівномірний 30% scrim поверх усього фото. */
  .hero__media::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: var(--surface-scrim);
  }

  .hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 486px;   /* 486 — ширина віджета в макеті */
    align-items: center;
    gap: var(--sp-64);
    width: min(var(--container), 100% - var(--gutter) * 2);
  }

  .hero__title { max-width: 14ch; }

  /* 660px, а не ch: у макеті абзац лягає рівно в 4 рядки, і кнопка
     лишається над технікою, а не поверх неї. */
  .hero__text {
    max-width: 660px;
    margin-block: var(--sp-24) var(--sp-40);
    color: var(--label-secondary);
  }

  @media (max-width: 1100px) {
    .hero__inner { grid-template-columns: 1fr; gap: var(--sp-40); }
    .hero {
      align-items: center;
      min-height: 0;
      padding-block: calc(var(--sp-24) + 76px + var(--sp-40)) var(--sp-56);
    }
    .hero__title { max-width: 20ch; }
  }

  /* Figma 1428:7616: 390×985, row 358×825 на координаті y=96. */
  @media (max-width: 767px) {
    .hero {
      align-items: center;
      justify-content: center;
      min-height: 985px;
      padding: var(--sp-96) var(--sp-16) var(--sp-64);
    }

    .hero__inner {
      gap: var(--sp-24);
      width: 100%;
    }

    .hero__content {
      display: flex;
      flex-direction: column;
      gap: var(--sp-40);
      overflow: hidden;
    }

    .hero__title {
      max-width: none;
      font-size: clamp(36px, 10.256vw, 40px);
      line-height: 1;
      letter-spacing: -.035em;
    }

    .hero__text {
      max-width: none;
      margin: var(--sp-24) 0 0;
      color: var(--label-primary);
      font-size: var(--fs-body-1);
      line-height: 1.34;
    }

    .hero__content > .btn { width: 100%; }

    /* Mobile має окремий щільний crop: фото 576×1800, y=-418 від Hero. */
    .hero__image {
      inset-block-start: -418px;
      width: 576px;
      height: 1800px;
      object-fit: cover;
      object-position: center;
    }
  }
}