.ap-hero {
  background: var(--ap-bg);
  color: var(--ap-text);
  padding-block: var(--ap-pad-top-mobile) var(--ap-pad-bottom-mobile);
}

.ap-hero * { box-sizing: border-box; }
.ap-hero__grid { display: grid; gap: 36px; align-items: center; }
.ap-hero__content { max-width: 720px; }
.ap-hero__eyebrow { margin: 0 0 14px; color: var(--ap-accent); font-size: 12px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; }
.ap-hero__heading { margin: 0; max-width: 760px; color: var(--ap-text); font-size: clamp(40px, 11vw, 68px); font-weight: 750; line-height: 1.02; letter-spacing: -.045em; }
.ap-hero__description { margin: 22px 0 0; max-width: 680px; color: var(--ap-muted); font-size: 17px; line-height: 1.65; }
.ap-hero__search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 28px; }
.ap-hero__search input { width: 100%; min-height: 54px; border: 1px solid color-mix(in srgb, var(--ap-border) 58%, transparent); border-radius: 12px; background: var(--ap-surface); color: #092733; padding: 0 17px; font: inherit; }
.ap-hero__search input::placeholder { color: #66808a; }
.ap-hero__search button { min-height: 54px; min-width: 104px; border: 0; border-radius: 12px; background: var(--ap-accent); color: var(--ap-accent-text); padding: 0 18px; font: inherit; font-weight: 800; cursor: pointer; }
.ap-hero__search-help { margin: 10px 0 0; color: var(--ap-muted); font-size: 13px; line-height: 1.55; }
.ap-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ap-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border-radius: 10px; padding: 0 20px; text-decoration: none; font-weight: 800; line-height: 1.2; }
.ap-button--primary { background: var(--ap-accent); color: var(--ap-accent-text); }
.ap-button--secondary { border: 1px solid color-mix(in srgb, var(--ap-border) 70%, transparent); color: var(--ap-text); }
.ap-hero__points { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 22px 0 0; padding: 0; list-style: none; }
.ap-hero__points li { align-items: center; color: var(--ap-muted); display: inline-flex; font-size: 13px; font-weight: 650; gap: 7px; line-height: 1.4; }
.ap-hero__points span { align-items: center; background: color-mix(in srgb, var(--ap-accent) 18%, transparent); border-radius: 50%; color: var(--ap-accent); display: inline-flex; height: 20px; justify-content: center; width: 20px; }
.ap-hero__visual { min-width: 0; }
.ap-hero__image { overflow: hidden; border-radius: 22px; background: var(--ap-surface); }
.ap-hero__image img { display: block; width: 100%; height: auto; }
.ap-order-flow { border: 1px solid color-mix(in srgb, var(--ap-border) 45%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--ap-surface) 96%, transparent); color: #092733; padding: 24px; box-shadow: 0 24px 70px rgb(0 0 0 / .2); }
.ap-order-flow__topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: #57727c; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.ap-order-flow__badge { border-radius: 999px; background: #dff8f4; color: #087466; padding: 6px 9px; letter-spacing: 0; }
.ap-order-flow h2 { margin: 20px 0 18px; color: #092733; font-size: 27px; line-height: 1.16; }
.ap-order-flow__steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ap-order-flow__steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; min-height: 72px; position: relative; }
.ap-order-flow__steps li:not(:last-child)::before { background: #cbe7e4; content: ""; height: calc(100% - 30px); left: 16px; position: absolute; top: 34px; width: 2px; }
.ap-order-flow__steps b { align-items: center; background: #dff8f4; border: 1px solid #bcebe5; border-radius: 50%; color: #087466; display: inline-flex; font-size: 13px; height: 34px; justify-content: center; position: relative; width: 34px; z-index: 1; }
.ap-order-flow__steps strong { color: #102f39; display: block; font-size: 14px; line-height: 1.35; padding-top: 1px; }
.ap-order-flow__steps p { color: #5b747d; font-size: 13px; line-height: 1.48; margin: 4px 0 14px; }
.ap-order-flow__note { background: #f0faf8; border-radius: 10px; color: #35645e; font-size: 12px; font-weight: 650; line-height: 1.5; margin: 4px 0 0; padding: 11px 12px; }
.ap-visually-hidden { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }

@media (min-width: 750px) {
  .ap-hero { padding-block: var(--ap-pad-top) var(--ap-pad-bottom); }
  .ap-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: clamp(42px, 6vw, 88px); }
  .ap-hero__search { grid-template-columns: minmax(0, 1fr) auto; }
  .ap-hero__search button { min-width: 148px; }
  .ap-order-flow { padding: 30px 32px; }
}

@media (max-width: 479px) {
  .ap-hero__search { gap: 7px; }
  .ap-hero__search input { min-height: 52px; padding-inline: 13px 6px; }
  .ap-hero__search button { min-height: 52px; min-width: 88px; padding-inline: 12px; }
  .ap-hero__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .ap-button { min-height: 46px; padding-inline: 13px; text-align: center; }
  .ap-order-flow { padding: 20px; }
  .ap-order-flow h2 { font-size: 24px; }
}

@supports not (color: color-mix(in srgb, white, black)) {
  .ap-hero__search input, .ap-button--secondary, .ap-order-flow { border-color: var(--ap-border); }
  .ap-order-flow { background: var(--ap-surface); }
}