.ome-hero {
  background: var(--ome-paper);
}

/* Scroll-growth: hero «прилипает», пока проигрывается анимация */
.ome-hero--growth {
  height: var(--ome-hero-track, 320svh);
}

.ome-hero--growth .ome-hero__nav {
  z-index: 40;
}

.ome-hero--growth .ome-hero__section {
  position: sticky;
  top: var(--ome-nav-h, 68px);
  height: calc(100svh - var(--ome-nav-h, 68px));
}

.ome-hero__nav {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: minmax(88px, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-height: 68px;
  padding: 18px var(--ome-pad-x) 10px;
  border-bottom: 1px solid var(--ome-hairline);
  background: rgba(232, 229, 217, 0.88);
  backdrop-filter: blur(14px);
}

.ome-hero__brand {
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
}

.ome-hero__nav-links {
  display: flex;
  gap: 12px;
  white-space: nowrap;
}

.ome-hero__nav-links a {
  padding: 5px 0 7px;
  border-bottom: 1px solid transparent;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

/* ── Mobile hero: content left, illustration right ── */
.ome-hero__section {
  --ome-hero-min-height: 100svh;
  --ome-section-pad-top: 24px;
  --ome-section-pad-bottom: 32px;
  --ome-hero-slot-width: 520px;
  --ome-hero-slot-height: 520px;
  position: relative;
  display: grid;
  grid-template-areas:
    "content"
    "proof";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: 0;
  min-height: var(--ome-hero-min-height);
  padding: var(--ome-section-pad-top) var(--ome-pad-x) var(--ome-section-pad-bottom);
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 250, 236, 0.95), transparent 18rem),
    radial-gradient(circle at 86% 66%, rgba(217, 122, 61, 0.16), transparent 20rem),
    radial-gradient(circle at 12% 84%, rgba(229, 184, 78, 0.18), transparent 18rem),
    linear-gradient(158deg, rgba(184, 71, 42, 0.07), transparent 54%),
    transparent;
}

.ome-hero__slot {
  grid-area: slot;
  position: absolute;
  z-index: 0;
  right: -34%;
  bottom: 0;
  left: auto;
  width: 134%;
  height: 72%;
  min-height: 0;
  margin-top: 0;
  pointer-events: none;
  transform: translate(var(--ome-offset-x, 0px), var(--ome-offset-y, 0px));
  background: radial-gradient(ellipse 62% 56% at 62% 74%, rgba(229, 184, 78, 0.22), transparent 72%);
}

.ome-hero__slot-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.ome-hero__growth {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center 100%;
  z-index: 1;
}

.ome-hero__illustration {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  z-index: 2;
}

.ome-hero__inner {
  grid-area: content;
  position: relative;
  z-index: 1;
  width: min(100%, var(--ome-content-max-width, 560px));
  margin-top: clamp(10px, 3.5svh, 36px);
  padding-right: 8px;
  transform: translate(var(--ome-offset-x, 0px), var(--ome-offset-y, 0px));
}

.ome-hero__eyebrow {
  color: var(--ome-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.ome-hero__title {
  max-width: 10ch;
  margin-top: 16px;
  font-size: clamp(38px, 11vw, 52px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.ome-hero__lead {
  max-width: 24ch;
  margin-top: 20px;
  color: var(--ome-soft);
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.6;
}

.ome-hero__lead br {
  display: block;
  content: "";
  margin-top: 0.6em;
}

.ome-hero__cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  color: #fff8ec;
  background: var(--ome-grad-warm);
  box-shadow: 0 14px 32px rgba(184, 71, 42, 0.28);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transform: translate(var(--ome-offset-x, 0px), var(--ome-offset-y, 0px));
}

.ome-hero__proof {
  grid-area: proof;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 28px;
  color: var(--ome-proof);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  transform: translate(var(--ome-offset-x, 0px), var(--ome-offset-y, 0px));
}

/* Hide CTA / proof on mobile when toggled */
.ome-hero--hide-cta-mobile .ome-hero__cta {
  display: none;
}

.ome-hero--hide-proof-mobile .ome-hero__proof {
  display: none;
}

/* ── Desktop (≥700px) ── */
@media (min-width: 700px) {
  .ome-hero__nav-links {
    gap: 18px;
  }

  .ome-hero__nav-links a {
    font-size: 10px;
  }

  .ome-hero__section {
    grid-template-areas:
      "content slot"
      "proof proof";
    grid-template-columns: minmax(0, 1fr) minmax(320px, 42vw);
    align-items: center;
    column-gap: clamp(32px, 6vw, 96px);
    row-gap: 20px;
  }

  .ome-hero__slot {
    position: relative;
    z-index: 0;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 100%;
    min-height: min(74svh, calc(var(--ome-hero-slot-height) + 120px));
    justify-self: end;
    align-self: end;
    background: radial-gradient(ellipse 58% 50% at 50% 64%, rgba(229, 184, 78, 0.2), transparent 72%);
  }

  .ome-hero__slot-inner {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .ome-hero__growth {
    position: relative;
    object-position: center bottom;
  }

  .ome-hero__illustration {
    position: absolute;
    object-position: right bottom;
  }

  .ome-hero__inner {
    margin-top: 0;
    padding-right: 0;
  }

  .ome-hero__title {
    max-width: 8ch;
    font-size: clamp(52px, 15vw, 104px);
    line-height: 0.9;
  }

  .ome-hero__lead {
    max-width: 29ch;
    font-size: clamp(18px, 5vw, 20px);
    line-height: 1.55;
  }

  .ome-hero__cta {
    min-height: 56px;
    margin-top: 30px;
    padding: 0 24px;
    box-shadow: 0 16px 36px rgba(184, 71, 42, 0.32);
  }

  .ome-hero__proof {
    justify-content: space-between;
    margin-top: 8px;
  }

  /* Restore hidden elements on desktop */
  .ome-hero--hide-cta-mobile .ome-hero__cta {
    display: inline-flex;
  }

  .ome-hero--hide-proof-mobile .ome-hero__proof {
    display: flex;
  }
}