/* LogiRates, новая главная (home2610). Все селекторы под .hp, как home2609 под .home2609.
   Шрифт Manrope (уже подключён на сайте). Картинки: assets/home2610/ рядом с этим файлом. */
/* ===== Общее для пакета: то, что у нас в /shipping/ лежит в site.css. Всё в рамках .hp ===== */
.hp { --text: #1a1a1a; --ease-out: cubic-bezier(.2, .7, .2, 1); position: relative; overflow-x: clip; background: #fff; font-family: Manrope, "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; interpolate-size: allow-keywords; }
.hp *, .hp ::before, .hp ::after { box-sizing: border-box; }
.hp a { color: inherit; }

/* Появление при скролле. Класс lr-motion на html ставит скрипт в <head> (inertia.blade.php), блоки помечает data-r initHome2610; при «уменьшить движение» его нет и всё видно сразу */
@keyframes lr-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* Первый экран вместе с картинкой (лента — LCP) виден сразу, без проявления (VT-PERF-02, VT-PERF-07) */
.lr-motion .hp [data-r] { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.lr-motion .hp [data-r]:not(.in) { opacity: 0; transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) { .hp *, .hp ::before, .hp ::after { animation: none !important; transition: none !important; } }

/* Плавное раскрытие вопросов */
.hp details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease-out), content-visibility .35s allow-discrete; }
.hp details[open]::details-content { height: auto; }

/* Фирменная лента в первом экране: уходит под шапку и растворяется вниз */
.hp img.lr-ribbon { position: absolute; z-index: 0; width: 1500px; max-width: none; height: auto; right: -300px; top: -300px; mix-blend-mode: multiply; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); }
@media (max-width: 980px) {
  .hp img.lr-ribbon { width: 760px; right: -330px; top: -60px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 65%, transparent 95%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 65%, transparent 95%); }
}
.hp .lr-hl { color: #eaa30a; }

/* Финальный блок: тёплая карточка в цветах ленты, человек выходит за её верх и смотрит на текст */
.hp .lr-cta { padding: 150px 0 96px; }
.hp .lr-cta__inner { position: relative; width: 1198px; max-width: calc(100% - 48px); margin: 0 auto; min-height: 400px; display: grid; grid-template-columns: minmax(0, 1fr) 520px; align-items: center; border-radius: 32px;
  background: url("assets/home2610/ribbon-alpha.webp") right -170px top -90px / 940px auto no-repeat, linear-gradient(120deg, #fff6e6 0%, #ffe7cf 50%, #ffdcdc 100%); }
.hp .lr-cta__copy { position: relative; z-index: 1; padding: 64px 0 64px 64px; max-width: 600px; }
.hp .lr-cta .lr-cta__copy h2 { margin: 0; font-size: 52px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.hp .lr-cta__text { margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: #50586a; max-width: 480px; }
.hp .lr-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hp .lr-cta__btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border-radius: 12px; background: #eaa30a; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.hp .lr-cta__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(234, 163, 10, .35); }
.hp .lr-cta__carriers { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.hp .lr-cta__carriers img { display: block; box-sizing: content-box; height: 22px; width: auto; padding: 9px 12px; background: #fff; border-radius: 10px; }
.hp .lr-cta__carriers img.lr-cta__fedex { height: 13px; padding: 13.5px 12px; }
.hp .lr-cta__carriers span { margin-left: 6px; color: #50586a; font-size: 14px; font-weight: 600; }
.hp img.lr-cta__person { position: absolute; right: 60px; bottom: 0; width: 430px; height: auto; max-width: none; }
@media (max-width: 1180px) {
  .hp .lr-cta__inner { grid-template-columns: minmax(0, 1fr) 400px; }
  .hp img.lr-cta__person { width: 380px; right: 10px; }
}
@media (max-width: 980px) {
  .hp .lr-cta { padding: 110px 0 64px; }
  .hp .lr-cta__inner { grid-template-columns: 1fr; max-width: calc(100% - 32px); min-height: 0; border-radius: 24px; background: linear-gradient(160deg, #fff6e6 0%, #ffe7cf 55%, #ffdcdc 100%); }
  .hp img.lr-cta__person { position: relative; right: auto; order: -1; display: block; width: 66%; max-width: 100%; margin: -96px 2% 0 auto; }
  .hp .lr-cta__copy { padding: 8px 24px 32px; }
  .hp .lr-cta .lr-cta__copy h2 { font-size: 32px; }
  .hp .lr-cta__text { font-size: 16px; }
  .hp .lr-cta__btn { width: 100%; }
  .hp .lr-cta__carriers { flex-wrap: wrap; }
  .hp .lr-cta__carriers span { flex-basis: 100%; margin: 4px 0 0; }
}

/* Прототип главной в стиле раздела /shipping/: белый фон, лента, живые куски интерфейса на HTML.
   Ширина контента 1198px, узкие блоки 820px. Стили ограничены .hp */
.hp {
  --ink: #1a1a1a; --muted: #6b7080; --slate: #50586a; --line: #ececf0; --soft-bg: #f6f6f7;
  --accent: #eaa30a; --orange: #ff7a1a; --pink: #ff6b8b; --green: #2e9e5b;
  --ease: cubic-bezier(.65, 0, .25, 1);
  color: var(--ink); -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
.hp :where(h1, h2, h3) { text-wrap: balance; }
.hp :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
.hp :where(ul, ol) { list-style: none; }
.hp img { display: block; max-width: 100%; }
.hp .bw { width: 1198px; max-width: calc(100% - 48px); margin: 0 auto; }
.hp .hp-narrow { width: 820px; max-width: calc(100% - 48px); margin: 0 auto; }
.hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hp h2 { font-size: 40px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.hp-head { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.hp-sub { font-size: 18px; line-height: 1.55; color: var(--slate); }
.hp-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.hp-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(234, 163, 10, .3); }
.hp-btn--ghost { background: var(--soft-bg); color: var(--ink); }
.hp-btn--ghost:hover { box-shadow: 0 8px 20px rgba(26, 31, 51, .08); }

.hp-logo { flex: none; width: auto; object-fit: contain; }
.hp-logo--usps { height: 22px; }
.hp-logo--ups { height: 24px; }
.hp-logo--fedex { height: 14px; }

.hp-ui { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(26, 31, 51, .06), 0 18px 40px rgba(60, 30, 0, .10); }

/* Градиентные иконки */
.hp-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #f2b632, var(--accent)); }
.hp-ico--2 { background: linear-gradient(135deg, #ff9a4d, var(--orange)); }
.hp-ico--3 { background: linear-gradient(135deg, #ff8a8a, var(--pink)); }
.hp-ico--4 { background: linear-gradient(135deg, #3a3d48, #1a1a1a); }

@keyframes hp-flip { 0% { opacity: 0; transform: translateY(6px); filter: blur(2px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes hp-pop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }

/* ===== Первый экран ===== */
.hp-hero { position: relative; padding: 64px 0 104px; }
.hp-hero__grid { position: relative; display: grid; grid-template-columns: 600px 520px; justify-content: space-between; align-items: center; }
.hp-hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hp h1 { font-size: 64px; line-height: 1.02; font-weight: 800; letter-spacing: -.04em; }
.hp-lead { font-size: 21px; line-height: 1.5; color: var(--slate); }

.hp-search { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 8px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(26, 31, 51, .06), 0 14px 34px rgba(60, 30, 0, .10); }
.hp-field { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-radius: 12px; background: var(--soft-bg); color: #9aa0ad; transition: box-shadow .2s, background-color .2s; }
.hp-field:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.hp-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); }
.hp-field input::placeholder { color: #8b91a0; font-weight: 500; }
.hp-field--btn { border: 0; font: inherit; font-size: 16px; font-weight: 500; color: #8b91a0; text-align: left; cursor: pointer; }
.hp-field--btn span { flex: 1; }
.hp-search__go { height: 56px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.hp-search__go:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(234, 163, 10, .35); }
.hp-micro { display: flex; flex-direction: column; gap: 4px; }
.hp-micro b { font-size: 16px; font-weight: 700; }
.hp-micro small { font-size: 13px; color: var(--muted); }
.hp-carriers { display: flex; align-items: center; gap: 18px; padding-top: 6px; }
.hp-carriers .hp-logo { filter: grayscale(1); opacity: .55; }
.hp-carriers span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a3a8b5; }

.hp-hero__visual { position: relative; }
.hp img.hp-ribbon { right: -300px; top: -300px; }
.hp-chip { position: absolute; z-index: 2; left: -34px; top: -26px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #1a1a1a; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 12px 28px rgba(26, 26, 26, .22); }
.hp-chip .ico { color: var(--accent); }
.lr-motion .hp-chip { animation: hp-float 5s ease-in-out 1.2s infinite; }
@keyframes hp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* путь посылки */
.hp-track { position: relative; z-index: 1; padding: 20px 22px 18px; }
.hp-track__head { display: flex; align-items: center; justify-content: space-between; }
.hp-track__id { display: flex; flex-direction: column; }
.hp-track__id small { font-size: 12px; font-weight: 600; color: var(--muted); }
.hp-track__id b { font-size: 17px; font-weight: 800; letter-spacing: .01em; }
.hp-status { padding: 6px 12px; border-radius: 999px; background: #fff3dc; color: #a0700a; font-size: 13px; font-weight: 800; transition: background-color .4s, color .4s; }
.hp-status[data-s="0"], .hp-status[data-s="1"] { background: var(--soft-bg); color: var(--slate); }
.hp-status[data-s="3"] { background: #e7f6ec; color: #1f7a45; }
.lr-motion .hp-status.tick { animation: hp-flip .4s var(--ease-out); }
.hp-track__map { margin: 6px -6px 0; }
.hp-track__map svg { display: block; width: 100%; height: auto; overflow: visible; }
.hp-track__road { fill: none; stroke: #e6e7ec; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 10; }
.hp-track__done { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: .38; }
.hp-track__pin { fill: #fff; stroke: #1a1a1a; stroke-width: 3; }
.hp-track__pin--to { stroke: var(--accent); }
.hp-track__van circle:first-child { fill: #1a1a1a; }
.hp-track__van { filter: drop-shadow(0 6px 10px rgba(26, 26, 26, .25)); }
.hp-track__cities { display: flex; justify-content: space-between; padding: 0 6px; margin-top: -2px; font-size: 12px; color: var(--muted); }
.hp-track__cities span { display: flex; flex-direction: column; }
.hp-track__cities span + span { text-align: right; }
.hp-track__cities b { font-size: 14px; color: var(--ink); }
.hp-track__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 16px; padding-top: 22px; }
.hp-track__steps::before { content: ""; position: absolute; top: 7px; left: 7px; right: 12%; height: 2px; background: #ececf0; }
.hp-track__steps li { position: relative; display: flex; flex-direction: column; gap: 2px; }
.hp-track__steps i { position: absolute; top: -22px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #dcdee5; transition: box-shadow .35s; }
.hp-track__steps li.on i { box-shadow: inset 0 0 0 5px var(--accent); }
.hp-track__steps li:last-child.on i { box-shadow: inset 0 0 0 5px #2fb35f; }
.hp-track__steps b { font-size: 13px; line-height: 1.25; font-weight: 700; color: #a3a8b5; transition: color .35s; }
.hp-track__steps li.on b { color: var(--ink); }
.hp-track__steps small { font-size: 12px; color: #b6bac4; }
.hp-track__steps li.on small { color: var(--muted); }
.hp-track__foot { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px 12px 8px; border-radius: 12px; background: var(--soft-bg); }
.hp-track__foot .hp-logo { justify-self: center; }
.hp-track__foot span { display: flex; flex-direction: column; }
.hp-track__foot b { font-size: 15px; font-weight: 700; }
.hp-track__foot small { font-size: 13px; color: var(--muted); }
.hp-track__foot strong { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ===== Боли ===== */
.hp-pains { padding: 40px 0 120px; }
.hp-pains__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.hp-pains__list li { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px; border-radius: 20px; background: var(--soft-bg); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.hp-pains__list li:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(26, 31, 51, .07); }
.hp-pains__list h3 { margin-top: 6px; font-size: 20px; line-height: 1.3; font-weight: 800; }
.hp-pains__list p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.hp-pains__band { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 64px; align-items: center; margin-top: 24px; padding: 48px 56px; border-radius: 24px; background: linear-gradient(150deg, #fff6e6 0%, #ffe7cf 55%, #ffdcdc 100%); }
.hp-pains__say { font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: #8a7a6a; }
.hp-pains__say b { color: var(--ink); font-weight: 800; }

/* одни и те же поля */
.hp-retype { padding: 18px 18px 20px; }
.hp-retype__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: var(--muted); font-weight: 600; }
.hp-retype__top b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.hp-retype__top em { font-style: normal; font-size: 12px; font-weight: 700; color: #d0662a; }
.hp-retype__fields { display: grid; grid-template-columns: .7fr 1.2fr .8fr 1.3fr; gap: 8px; }
.hp-retype__fields span { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--soft-bg); min-width: 0; }
.hp-retype__fields small { font-size: 11px; font-weight: 700; color: var(--muted); }
.hp-retype__fields b { height: 20px; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.hp-retype__fields span.typing { background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.hp-retype__fields span.typing b::after { content: ""; display: inline-block; width: 2px; height: 15px; margin-left: 1px; vertical-align: -2px; background: var(--ink); animation: hp-caret .8s steps(1) infinite; }
@keyframes hp-caret { 50% { opacity: 0; } }
.lr-motion .hp-retype.tick [data-order] { display: inline-block; animation: hp-flip .4s var(--ease-out); }

/* ===== Напрямую ===== */
.hp-direct { padding: 0 0 120px; }
.hp-direct__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.hp-way { display: flex; flex-direction: column; gap: 24px; padding: 36px; border-radius: 24px; background: var(--soft-bg); }
.hp-way--us { background: linear-gradient(150deg, #fff6e6 0%, #ffe7cf 60%, #ffe0d8 100%); }
.hp-way__name { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hp-way--us .hp-way__name { color: #b0700a; }
.hp-lane { display: flex; align-items: flex-start; border-radius: 16px; background: #fff; padding: 24px 22px 18px; }
.hp-node { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 64px; }
.hp-node i { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--soft-bg); color: var(--slate); }
.hp-way--us .hp-node i { background: linear-gradient(135deg, #f2b632, var(--accent)); color: #fff; }
.hp-node small { font-size: 13px; font-weight: 700; color: var(--slate); }
.hp-node--mid i { background: #ffe5ea; color: #d64264; }
.hp-markup { position: absolute; top: -18px; left: 50%; translate: -50% 0; padding: 3px 8px; border-radius: 6px; background: var(--pink); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; white-space: nowrap; }
.hp-wire { position: relative; container-type: inline-size; flex: 1; height: 2px; margin-top: 23px; border-radius: 2px; background: #e3e5ea; overflow: hidden; }
.hp-way--us .hp-wire { height: 3px; background: #f6dcb6; }
/* Блик бежит через transform (VT-PERF-02): -100% — своя ширина (= прежний left), 100cqw — ширина провода */
.hp-wire::after { content: ""; position: absolute; top: -2px; left: 0; transform: translateX(-100%); width: 40%; height: 6px; border-radius: 6px; opacity: 0; }
.hp-way--them .hp-wire::after { background: linear-gradient(90deg, transparent, #b9bdc8, transparent); }
.hp-way--us .hp-wire::after { width: 50%; background: linear-gradient(90deg, transparent, #f2b632 40%, #ff7a1a 70%, transparent); }
/* у посредника свет идёт в два перегона с остановкой, у нас одним махом */
.lr-motion .hp-lane--3.play .hp-wire::after { animation: hp-run-a 4s linear infinite; }
.lr-motion .hp-lane--3.play .hp-wire--2::after { animation-name: hp-run-b; }
.lr-motion .hp-lane--2.play .hp-wire::after { animation: hp-run-us 2s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes hp-run-a { 0% { transform: translateX(-100%); opacity: 1; } 32% { transform: translateX(100cqw); opacity: 1; } 33%, 100% { transform: translateX(100cqw); opacity: 0; } }
@keyframes hp-run-b { 0%, 52% { transform: translateX(-100%); opacity: 0; } 53% { opacity: 1; } 85% { transform: translateX(100cqw); opacity: 1; } 86%, 100% { transform: translateX(100cqw); opacity: 0; } }
@keyframes hp-run-us { 0% { transform: translateX(-100%); opacity: 1; } 90% { transform: translateX(100cqw); opacity: 1; } 100% { transform: translateX(100cqw); opacity: 0; } }
.lr-motion .hp-lane--3 .hp-markup { opacity: 0; }
.lr-motion .hp-lane--3.play .hp-markup { animation: hp-markup 4s var(--ease-out) infinite; }
@keyframes hp-markup { 0%, 30% { opacity: 0; transform: translateY(6px) scale(.7); } 38% { opacity: 1; transform: translateY(-2px) scale(1.08); } 44%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.lr-motion .hp-lane--3.play .hp-node--mid i { animation: hp-mid 4s ease-out infinite; }
@keyframes hp-mid { 0%, 30% { box-shadow: 0 0 0 0 rgba(255, 107, 139, 0); } 34% { box-shadow: 0 0 0 0 rgba(255, 107, 139, .45); } 50%, 100% { box-shadow: 0 0 0 12px rgba(255, 107, 139, 0); } }
.lr-motion .hp-lane--2.play .hp-node:last-child i { animation: hp-arrive 2s ease-out infinite; }
@keyframes hp-arrive { 0%, 82% { box-shadow: 0 0 0 0 rgba(234, 163, 10, 0); } 86% { box-shadow: 0 0 0 0 rgba(234, 163, 10, .5); } 100% { box-shadow: 0 0 0 12px rgba(234, 163, 10, 0); } }
.hp-pay { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; color: var(--muted); font-weight: 600; }
.hp-pay b { color: var(--ink); font-weight: 800; }
.hp-pay em { font-style: normal; padding: 3px 9px; border-radius: 6px; background: #ffe5ea; color: #c23a5a; font-size: 13px; font-weight: 800; }
.hp-pay__ok { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 6px; background: #e7f6ec; color: #1f7a45; font-size: 13px; font-weight: 800; }
.hp-way__list { display: flex; flex-direction: column; gap: 14px; }
.hp-way__list li { display: flex; gap: 12px; font-size: 16px; line-height: 1.45; }
.hp-way__list i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #e3e5ea; color: #8b91a0; }
.hp-way--them .hp-way__list li { color: var(--slate); }
.hp-way--us .hp-way__list i { background: var(--accent); color: #fff; }
.hp-direct__note { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; font-size: 15px; font-weight: 600; color: var(--slate); }
.hp-direct__note span { margin-left: 4px; }

/* ===== Что получаешь ===== */
.hp-get { padding: 0 0 120px; }
.hp-get__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.hp-card { display: flex; flex-direction: column; gap: 28px; padding: 36px 36px 32px; border-radius: 24px; background: var(--soft-bg); overflow: hidden; }
.hp-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hp-card__text h3 { margin-top: 8px; font-size: 22px; line-height: 1.25; font-weight: 800; }
.hp-card__text p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.hp-mini { margin-top: auto; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(26, 31, 51, .05), 0 12px 30px rgba(60, 30, 0, .07); }

/* два предложения */
.hp-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp-vs__col { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--soft-bg); }
.hp-vs__col p { display: flex; align-items: center; justify-content: space-between; height: 26px; }
.hp-vs__col > b { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.hp-vs__row { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 8px; }
.hp-vs__row small { font-size: 12px; font-weight: 700; color: var(--muted); }
.hp-meter { height: 8px; border-radius: 8px; background: #e7e8ed; overflow: hidden; }
.hp-meter i { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: 8px; background: linear-gradient(90deg, #f2b632, var(--orange)); }
.hp-meter--time i { background: linear-gradient(90deg, #3a3d48, #1a1a1a); }
.hp-tag { padding: 3px 8px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hp-tag--dark { background: #1a1a1a; }
.lr-motion .hp-vs:not(.play) .hp-meter i { width: 0; }
.lr-motion .hp-vs .hp-meter i { transition: width 1s var(--ease) .2s; }
.lr-motion .hp-vs .hp-vs__col + .hp-vs__col .hp-meter i { transition-delay: .5s; }
.lr-motion .hp-vs:not(.play) .hp-tag { opacity: 0; }
.lr-motion .hp-vs.play .hp-tag { animation: hp-pop .45s var(--ease-out) 1.3s both; }
.lr-motion .hp-vs.play .hp-tag--dark { animation-delay: 1.7s; }

/* один клик */
.hp-click { position: relative; padding: 14px; }
.hp-tpl { position: relative; z-index: 1; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border-radius: 12px; background: var(--soft-bg); }
.hp-tpl__ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--accent); }
.hp-tpl > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.hp-tpl b { font-size: 15px; font-weight: 700; }
.hp-tpl small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hp-tpl__btn { padding: 10px 14px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }
.hp-label { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 10px 4px 0; padding: 12px 14px; border-radius: 10px; border: 1.5px dashed #d9dce3; }
.hp-label__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hp-label__top b { font-size: 13px; font-weight: 800; }
.hp-label__top small { font-size: 11px; font-weight: 800; color: #1f7a45; }
.hp-label__mid { font-size: 13px; font-weight: 600; color: var(--slate); }
.hp-label__mid small { margin-right: 6px; color: var(--muted); }
.hp-label__code { height: 26px; background: repeating-linear-gradient(90deg, #1a1a1a 0 2px, transparent 2px 4px, #1a1a1a 4px 5px, transparent 5px 8px, #1a1a1a 8px 11px, transparent 11px 13px); border-radius: 2px; }
.lr-motion .hp-click.play .hp-tpl__btn { animation: hp-press 5s ease infinite; }
.lr-motion .hp-click.play .hp-label { animation: hp-out 5s var(--ease-out) infinite; }
@keyframes hp-press { 0%, 14% { transform: none; box-shadow: none; } 17% { transform: scale(.92); box-shadow: 0 0 0 6px rgba(234, 163, 10, .25); } 22%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(234, 163, 10, 0); } }
@keyframes hp-out { 0%, 18% { opacity: 0; transform: translateY(-46px) scaleY(.6); } 32% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(8px); } }
.lr-motion .hp-click.play .hp-label__code { animation: hp-print 5s linear infinite; }
@keyframes hp-print { 0%, 26% { clip-path: inset(0 100% 0 0); } 44%, 100% { clip-path: inset(0 0 0 0); } }

/* список отправок */
.hp-ships { padding: 14px 14px 10px; }
.hp-ships__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 10px; font-size: 14px; }
.hp-ships__head span { font-size: 12px; font-weight: 700; color: var(--muted); }
.hp-ships li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 10px 6px; border-top: 1px solid var(--line); }
.hp-ships .hp-logo { justify-self: center; }
.hp-ships .hp-logo--usps { height: 18px; } .hp-ships .hp-logo--ups { height: 20px; } .hp-ships .hp-logo--fedex { height: 12px; }
.hp-ships li > span { display: flex; flex-direction: column; }
.hp-ships b { font-size: 14px; font-weight: 700; }
.hp-ships small { font-size: 12px; color: var(--muted); }
.hp-ships em { font-style: normal; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--soft-bg); color: var(--slate); transition: background-color .4s, color .4s; }
.hp-ships li[data-s="1"] em, .hp-ships li[data-s="2"] em { background: #fff3dc; color: #a0700a; }
.hp-ships li[data-s="3"] em { background: #e7f6ec; color: #1f7a45; }
.lr-motion .hp-ships li.tick em { animation: hp-flip .4s var(--ease-out); }

/* чек */
.hp-bill { padding: 20px 20px 14px; }
.hp-bill__top { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; }
.hp-bill__top small { font-size: 13px; font-weight: 600; color: var(--muted); }
.hp-bill__top b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.hp-bill__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--slate); }
.hp-bill__row b { color: var(--ink); font-weight: 800; }
.hp-bill__fee s { position: relative; text-decoration: none; color: #a3a8b5; }
.hp-bill__fee s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; border-radius: 2px; background: var(--pink); }
.hp-bill__fee em { font-style: normal; padding: 3px 10px; border-radius: 6px; background: #e7f6ec; color: #1f7a45; font-weight: 800; }
.lr-motion .hp-bill:not(.play) .hp-bill__fee s { color: var(--slate); }
.lr-motion .hp-bill .hp-bill__fee s { transition: color .4s 1.2s; }
.lr-motion .hp-bill:not(.play) .hp-bill__fee s::after { transform: scaleX(0); }
.lr-motion .hp-bill .hp-bill__fee s::after { transform-origin: left; transition: transform .7s var(--ease) .5s; }
.lr-motion .hp-bill:not(.play) .hp-bill__fee em { opacity: 0; }
.lr-motion .hp-bill.play .hp-bill__fee em { animation: hp-pop .45s var(--ease-out) 1.3s both; }

/* ===== Как работает: кольцо ===== */
.hp-how { padding: 0 0 120px; }
.hp-how__grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 80px; align-items: center; }
.hp-how__copy { display: flex; flex-direction: column; gap: 36px; }
.hp-how__steps { display: flex; flex-direction: column; gap: 8px; }
.hp-how__steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 20px; border-radius: 16px; transition: background-color .3s; }
.hp-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: var(--soft-bg); font-size: 18px; font-weight: 800; color: var(--slate); }
.hp-how__steps h3 { font-size: 19px; line-height: 1.3; font-weight: 800; }
.hp-how__steps p { margin-top: 4px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.hp-how__note { padding-left: 20px; border-left: 3px solid var(--accent); font-size: 16px; line-height: 1.55; color: var(--slate); font-weight: 600; }

.hp-ring { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin: 0 auto; }
.hp-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp-ring__track { fill: none; stroke: #f0f1f4; stroke-width: 14; }
.hp-ring__arc { fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 150 604; stroke-dashoffset: 150; }
.hp-ring__spin { transform-origin: 160px 160px; }
.hp-ring::before { content: ""; position: absolute; inset: 22%; transition: transform .4s; border-radius: 50%; background: radial-gradient(circle, #fff6e6 0%, #ffe7cf 60%, rgba(255, 220, 220, 0) 72%); }
.hp-ring__node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; translate: -50% -50%; }
.hp-ring__node i { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(26, 31, 51, .06), 0 12px 28px rgba(60, 30, 0, .12); }
.hp-ring__node small { padding: 4px 10px; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 12px rgba(26, 31, 51, .06); }
.hp-ring__node--1 { left: 50%; top: 12.5%; }
.hp-ring__node--2 { left: 82.5%; top: 68.75%; }
.hp-ring__node--3 { left: 17.5%; top: 68.75%; }
.hp-ring__node--1 small { order: -1; }
.hp-ring__center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hp-ring__center small { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b0700a; }
.hp-ring__center b { font-size: 76px; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hp-ring__center em { max-width: 120px; margin-top: 6px; font-style: normal; font-size: 13px; line-height: 1.35; font-weight: 700; color: var(--slate); }
/* с анимацией: дуга идёт круг за 4,8 с, шаги загораются, когда дуга до них доходит */
.lr-motion .hp-ring.play .hp-ring__spin { animation: hp-spin 4.8s linear infinite; }
@keyframes hp-spin { to { transform: rotate(360deg); } }
.lr-motion .hp-ring.play .hp-ring__node i { animation: hp-lit 4.8s ease-out infinite; }
.lr-motion .hp-ring.play .hp-ring__node--2 i { animation-delay: 1.6s; }
.lr-motion .hp-ring.play .hp-ring__node--3 i { animation-delay: 3.2s; }
@keyframes hp-lit { 0% { background: var(--accent); color: #fff; transform: scale(1.14); box-shadow: 0 0 0 0 rgba(234, 163, 10, .5), 0 12px 28px rgba(60, 30, 0, .12); } 8% { transform: scale(1); } 22% { background: var(--accent); color: #fff; box-shadow: 0 0 0 18px rgba(234, 163, 10, 0), 0 12px 28px rgba(60, 30, 0, .12); } 33%, 100% { background: #fff; color: var(--accent); transform: none; } }
.lr-motion .hp-ring.play .hp-ring__node small { animation: hp-lit-label 4.8s ease-out infinite; }
.lr-motion .hp-ring.play .hp-ring__node--2 small { animation-delay: 1.6s; }
.lr-motion .hp-ring.play .hp-ring__node--3 small { animation-delay: 3.2s; }
@keyframes hp-lit-label { 0%, 24% { background: #1a1a1a; color: #fff; } 33%, 100% { background: #fff; color: var(--ink); } }
.hp-ring__parcel circle { fill: #1a1a1a; }
.hp-ring__parcel { filter: drop-shadow(0 4px 8px rgba(26, 26, 26, .3)); }
.hp-ring__dash { fill: none; stroke: #f1d9b4; stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; transform-origin: 160px 160px; }
.lr-motion .hp-ring.play .hp-ring__dash { animation: hp-spin 40s linear infinite reverse; }
.lr-motion .hp-how__grid:has(.hp-ring.play) .hp-how__steps li { animation: hp-step 4.8s ease-out infinite; }
.lr-motion .hp-how__grid:has(.hp-ring.play) .hp-how__steps li:nth-child(2) { animation-delay: 1.6s; }
.lr-motion .hp-how__grid:has(.hp-ring.play) .hp-how__steps li:nth-child(3) { animation-delay: 3.2s; }
@keyframes hp-step { 0%, 26% { background: var(--soft-bg); } 33%, 100% { background: transparent; } }
.lr-motion .hp-ring.tick [data-week] { animation: hp-week .6s var(--ease-out); }
@keyframes hp-week { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 60% { opacity: 1; transform: translateY(-3px) scale(1.06); color: var(--accent); } 100% { transform: none; } }
.lr-motion .hp-ring.tick::before { animation: hp-glow .8s ease-out; }
@keyframes hp-glow { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ===== Для кого ===== */
.hp-who { padding: 0 0 120px; }
.hp-who__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.hp-who__card { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 32px; border-radius: 24px; background: var(--soft-bg); }
.hp-who__card > :not(.hp-mini) { margin-left: 16px; margin-right: 16px; }
.hp-who__card .hp-mini { height: 236px; margin: 0 0 18px; overflow: hidden; }
.hp-who__num { font-size: 13px; font-weight: 800; color: #b0b4bf; }
.hp-who__card h3 { font-size: 22px; line-height: 1.25; font-weight: 800; }
.hp-who__line { font-size: 16px; line-height: 1.45; font-weight: 700; color: var(--ink); }
.hp-who__card p:last-child { font-size: 15px; line-height: 1.55; color: var(--muted); }
.hp-who__more { margin-top: 32px; }

/* файл заказов */
.hp-csv { display: flex; flex-direction: column; padding: 14px; }
.hp-csv__head { display: flex; align-items: center; gap: 8px; padding: 0 4px 10px; font-size: 14px; }
.hp-csv__head .ico { color: var(--pink); }
.hp-csv__head span { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.hp-csv li { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 8px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--slate); }
.hp-csv li:nth-child(odd) { background: var(--soft-bg); }
.hp-csv em { display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.hp-csv .hp-logo--usps { height: 15px; } .hp-csv .hp-logo--ups { height: 17px; } .hp-csv .hp-logo--fedex { height: 10px; }
.hp-csv__done { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 9px 12px; border-radius: 10px; background: #e7f6ec; color: #1f7a45; font-size: 13px; font-weight: 800; }
.lr-motion .hp-csv:not(.play) em, .lr-motion .hp-csv:not(.play) .hp-csv__done { opacity: 0; }
.lr-motion .hp-csv.play li { animation: hp-row 6.4s ease infinite; animation-delay: calc(var(--i) * .5s); }
.lr-motion .hp-csv.play em { animation: hp-cell 6.4s var(--ease-out) infinite; animation-delay: calc(var(--i) * .5s); }
.lr-motion .hp-csv.play .hp-csv__done { animation: hp-done 6.4s var(--ease-out) infinite; }
@keyframes hp-row { 0%, 4% { box-shadow: none; } 6% { box-shadow: inset 0 0 0 2px var(--accent); } 14%, 100% { box-shadow: inset 0 0 0 2px rgba(234, 163, 10, 0); } }
@keyframes hp-cell { 0%, 6% { opacity: 0; transform: translateX(10px); } 12%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes hp-done { 0%, 36% { opacity: 0; transform: translateY(6px); } 42%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }

/* один список с трёх площадок */
.hp-feed { padding: 14px; }
.hp-feed__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; font-size: 14px; }
.hp-feed__head span { padding: 2px 9px; border-radius: 999px; background: #1a1a1a; color: #fff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hp-feed ul { display: flex; flex-direction: column; gap: 8px; }
.hp-feed li { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; background: var(--soft-bg); }
.hp-feed li em { grid-row: span 2; justify-self: start; padding: 4px 8px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; }
.hp-feed li span { font-size: 13px; font-weight: 700; }
.hp-feed li small { font-size: 12px; color: var(--muted); }
.m-etsy { background: #f1641e; } .m-ebay { background: #3665f3; } .m-amazon { background: #232f3e; }
.lr-motion .hp-feed li.in { animation: hp-drop .6s var(--ease-out); }
@keyframes hp-drop { from { opacity: 0; transform: translateY(-16px) scale(.96); box-shadow: inset 0 0 0 2px var(--accent); } to { opacity: 1; transform: none; } }
.lr-motion .hp-feed.tick [data-count] { animation: hp-flip .4s var(--ease-out); }

/* один шаблон по неделям */
.hp-weeks { display: flex; flex-direction: column; padding: 16px 14px 14px; }
.hp-weeks__tpl { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #fff8ea; box-shadow: inset 0 0 0 1.5px #f4d48e; font-size: 13px; }
.hp-weeks__tpl .ico { color: var(--accent); }
.hp-weeks__tpl span { grid-column: 2; font-size: 12px; color: var(--muted); font-weight: 600; }
.hp-weeks ol { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 16px; }
.hp-weeks li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hp-weeks li small { font-size: 11px; font-weight: 800; color: #a3a8b5; }
.hp-weeks li i { display: inline-flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; max-width: 44px; border-radius: 10px; background: linear-gradient(135deg, #f2b632, var(--accent)); color: #fff; }
.hp-weeks__foot { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: var(--slate); text-align: center; }
.lr-motion .hp-weeks[data-weeks] li i { opacity: 0; transform: scale(.5) translateY(-10px); transition: opacity .3s, transform .45s var(--ease-out); }
.lr-motion .hp-weeks[data-weeks] li.on i { opacity: 1; transform: none; }
.lr-motion .hp-weeks[data-weeks] li.now i { box-shadow: 0 0 0 5px rgba(234, 163, 10, .25); }

/* ===== Необычный груз ===== */
.hp-odd { padding: 0 0 120px; }
.hp-odd__card { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 64px; align-items: center; padding: 64px; border-radius: 28px; background: linear-gradient(150deg, #fff6e6 0%, #ffe7cf 55%, #ffdcdc 100%); }
.hp-odd__copy { display: flex; flex-direction: column; gap: 18px; }
.hp-odd__copy p { font-size: 18px; line-height: 1.55; color: var(--slate); max-width: 520px; }
.hp-odd__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.hp-odd__tags li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .75); font-size: 14px; font-weight: 700; color: var(--slate); }
.lr-motion .hp-odd__tags li { animation: hp-float 4.6s ease-in-out infinite; }
.lr-motion .hp-odd__tags li:nth-child(2) { animation-delay: -1.2s; }
.lr-motion .hp-odd__tags li:nth-child(3) { animation-delay: -2.4s; }
.lr-motion .hp-odd__tags li:nth-child(4) { animation-delay: -3.6s; }
.hp-odd__form { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.hp-odd__form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--slate); }
.hp-odd__form input { height: 52px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--soft-bg); font: inherit; font-size: 16px; color: var(--ink); outline: 0; transition: box-shadow .2s, background-color .2s; }
.hp-odd__form input:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.hp-odd__form .hp-btn { width: 100%; margin-top: 4px; }
.hp-legal { font-size: 12px; line-height: 1.5; color: var(--muted); }
.hp-legal a { color: inherit; }

/* ===== Coming soon ===== */
.hp-soon-sec { padding: 0 0 120px; }
.hp-soon { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: center; padding: 40px 48px; border-radius: 20px; background: var(--soft-bg); }
.hp-soon > div { display: flex; flex-direction: column; gap: 10px; }
.hp-soon h3 { font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.hp-soon__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hp-soon__list li { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 104px; padding: 18px 20px; border-radius: 14px; background: #fff; font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--slate); }
.hp-soon__list span { padding: 2px 8px; border-radius: 6px; background: #fff3dc; color: #a0700a; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* ===== FAQ ===== */
.hp-faq { padding: 0 0 40px; }
.hp-faq__list { display: flex; flex-direction: column; margin-top: 40px; border-top: 1px solid var(--line); }
.hp-faq details { border-bottom: 1px solid var(--line); padding: 24px 4px; }
.hp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; font-size: 17px; font-weight: 700; line-height: 1.35; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 400; line-height: normal; color: var(--muted); }
.hp-faq details[open] summary::after { content: "×"; }
.hp-faq details p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* ===== Планшет ===== */
@media (max-width: 1180px) {
  .hp-hero__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .hp h1 { font-size: 54px; }
  .hp-search { grid-template-columns: 1fr; }
  .hp-chip { left: 0; }
  .hp-pains__band { grid-template-columns: 1fr; gap: 28px; }
  .hp-how__grid { grid-template-columns: 1fr 380px; gap: 48px; }
  .hp-who__card .hp-mini { height: 250px; }
  .hp-odd__card { grid-template-columns: 1fr 400px; gap: 40px; padding: 48px; }
  .hp-soon { grid-template-columns: 1fr; gap: 24px; }
  .hp-csv li span { font-size: 12px; }
}

/* ===== Телефон ===== */
@media (max-width: 980px) {
  .hp .bw, .hp .hp-narrow { max-width: calc(100% - 32px); }
  .hp-eyebrow { font-size: 11px; }
  .hp h2 { font-size: 28px; line-height: 1.18; }
  .hp-head { gap: 12px; }
  .hp-sub { font-size: 16px; }
  .hp-ico { width: 40px; height: 40px; border-radius: 12px; }

  .hp-hero { padding: 28px 0 48px; }
  .hp-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .hp-hero__copy { gap: 14px; }
  .hp h1 { font-size: 40px; line-height: 1.05; }
  .hp-lead { font-size: 17px; }
  .hp-search { gap: 6px; padding: 6px; border-radius: 16px; }
  .hp-field { height: 52px; }
  .hp-search__go { height: 52px; }
  .hp-micro b { font-size: 15px; }
  .hp-carriers { flex-wrap: wrap; gap: 14px; }
  .hp-carriers span { flex-basis: 100%; }
  .hp-hero__visual { width: 100%; max-width: 560px; padding-top: 64px; }
  .hp img.hp-ribbon { width: 640px; right: -250px; top: -40px; transform: rotate(-8deg); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 92%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 92%); }
  .hp-chip { left: 8px; top: 38px; font-size: 12px; padding: 8px 12px; }
  .hp-track { padding: 16px 14px 14px; }
  .hp-track__steps { gap: 4px; }
  .hp-track__steps b { font-size: 12px; }
  .hp-track__steps small { font-size: 11px; }
  .hp-track__cities b { font-size: 13px; }

  .hp-pains { padding: 16px 0 64px; }
  .hp-pains__list { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .hp-pains__list li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 22px 20px; border-radius: 16px; }
  .hp-pains__list li .hp-ico { grid-row: span 2; }
  .hp-pains__list h3 { margin: 0; font-size: 17px; }
  .hp-pains__list p { font-size: 15px; }
  .hp-pains__band { margin-top: 12px; padding: 28px 16px 16px; border-radius: 20px; gap: 22px; }
  .hp-pains__say { padding: 0 6px; font-size: 21px; }
  .hp-retype { padding: 14px; }
  .hp-retype__fields { grid-template-columns: 1fr 1fr; }

  .hp-direct { padding: 0 0 64px; }
  .hp-direct__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .hp-way { gap: 20px; padding: 22px 16px; border-radius: 20px; }
  .hp-way__name { padding: 0 4px; }
  .hp-lane { padding: 22px 12px 14px; }
  .hp-node { width: 58px; }
  .hp-node i { width: 44px; height: 44px; }
  .hp-wire { margin-top: 21px; }
  .hp-pay { padding: 0 4px; font-size: 15px; }
  .hp-way__list { padding: 0 4px; }
  .hp-way__list li { font-size: 15px; }
  .hp-direct__note { gap: 12px; margin-top: 20px; font-size: 14px; }
  .hp-direct__note span { flex-basis: 100%; margin: 0; }

  .hp-get { padding: 0 0 64px; }
  .hp-get__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .hp-card { gap: 20px; padding: 24px 16px 16px; border-radius: 20px; }
  .hp-card__text { padding: 0 4px; }
  .hp-card__text h3 { font-size: 19px; margin-top: 4px; }
  .hp-card__text p { font-size: 15px; }
  .hp-mini { padding: 14px; }
  .hp-vs { gap: 8px; }
  .hp-vs__col { padding: 12px 10px; }
  .hp-vs__col > b { font-size: 21px; }
  .hp-vs__row { grid-template-columns: 40px 1fr; gap: 6px; }
  .hp-vs__col p .hp-logo--usps { height: 18px; } .hp-vs__col p .hp-logo--ups { height: 20px; }
  .hp-tag { font-size: 9px; padding: 2px 6px; }
  .hp-click { padding: 10px; }
  .hp-tpl { grid-template-columns: 36px 1fr auto; gap: 10px; padding: 8px; }
  .hp-tpl__ico { width: 36px; height: 36px; }
  .hp-tpl__btn { padding: 9px 11px; font-size: 12px; }
  .hp-bill__top b { font-size: 30px; }

  .hp-how { padding: 0 0 64px; }
  .hp-how__grid { grid-template-columns: 1fr; gap: 32px; }
  .hp-how__copy { display: contents; }
  .hp-how__copy .hp-head { order: 0; }
  .hp-ring { order: 1; max-width: 340px; }
  .hp-how__steps { order: 2; }
  .hp-how__note { order: 3; }
  .hp-how__steps li { grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 12px; }
  .hp-num { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
  .hp-how__steps h3 { font-size: 17px; }
  .hp-how__steps p { font-size: 15px; }
  .hp-how__note { font-size: 15px; }
  .hp-ring__node i { width: 56px; height: 56px; }
  .hp-ring__node small { font-size: 12px; padding: 3px 8px; }
  .hp-ring__center b { font-size: 60px; }
  .hp-ring__center em { font-size: 12px; }
  .hp-ring__track, .hp-ring__arc { stroke-width: 12; }

  .hp-who { padding: 0 0 64px; }
  .hp-who__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .hp-who__card { padding: 12px 12px 24px; border-radius: 20px; }
  .hp-who__card > :not(.hp-mini) { margin-left: 12px; margin-right: 12px; }
  .hp-who__card .hp-mini { height: 228px; margin-bottom: 14px; }
  .hp-who__card h3 { font-size: 20px; }
  .hp-who__line { font-size: 15px; }
  .hp-who__more { margin-top: 20px; }
  .hp-who__more .hp-btn { width: 100%; }

  .hp-odd { padding: 0 0 64px; }
  .hp-odd__card { grid-template-columns: 1fr; gap: 24px; padding: 28px 16px 16px; border-radius: 20px; }
  .hp-odd__copy { padding: 0 8px; gap: 14px; }
  .hp-odd__copy p { font-size: 16px; }
  .hp-odd__tags li { font-size: 13px; padding: 6px 12px; }
  .hp-odd__form { padding: 18px 16px; }

  .hp-soon-sec { padding: 0 0 64px; }
  .hp-soon { padding: 28px 20px; border-radius: 16px; gap: 18px; }
  .hp-soon h3 { font-size: 22px; }
  .hp-soon__list { grid-template-columns: 1fr; gap: 8px; }
  .hp-soon__list li { flex-direction: row; align-items: center; min-height: 0; padding: 14px 16px; }

  .hp-faq__list { margin-top: 24px; }
  .hp-faq details { padding: 20px 2px; }
  .hp-faq summary { font-size: 16px; }
}

/* финальный блок: общий сброс отступов .hp не должен трогать ctaFinal */
.hp .lr-cta__text { margin-top: 18px; }
.hp img.lr-cta__person { max-width: none; }
@media (max-width: 980px) { .hp img.lr-cta__person { max-width: 100%; } }

/* ===== Рабочая форма поиска: подсказки адресов и окно веса и размеров ===== */
.hp-hero__copy { z-index: 3; }
.hp-field--place, .hp-dims-wrap { position: relative; }
.hp-field--place:focus-within, .hp-field--btn[aria-expanded="true"] { background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.hp-field--place.is-set .ico, .hp-field--btn.is-set .ico { color: var(--accent); }
.hp-field--place.is-bad, .hp-field--btn.is-bad { box-shadow: inset 0 0 0 2px #e5484d; }
.hp-dims-wrap .hp-field--btn { width: 100%; }
.hp-field--btn.is-set span { color: var(--ink); font-weight: 600; }
.hp-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 280px; overflow: auto; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(26, 31, 51, .08), 0 16px 36px rgba(26, 31, 51, .16); }
.hp-suggest li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.hp-suggest li small { font-size: 13px; font-weight: 500; color: var(--muted); }
.hp-suggest li[aria-selected="true"], .hp-suggest li:hover { background: var(--soft-bg); }
.hp-suggest li.is-empty { color: var(--muted); font-weight: 500; cursor: default; background: none; }
.hp-dims { position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); width: max(100%, 380px); display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(26, 31, 51, .08), 0 16px 36px rgba(26, 31, 51, .16); }
.hp-dims__title { font-size: 16px; font-weight: 800; }
.hp-dims__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hp-unit { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 32px 8px 12px; border-radius: 10px; background: var(--soft-bg); cursor: text; }
.hp-unit span { font-size: 12px; font-weight: 700; color: var(--muted); }
.hp-unit input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; font-weight: 700; color: var(--ink); }
.hp-unit i { position: absolute; right: 12px; bottom: 10px; font-style: normal; font-size: 13px; font-weight: 700; color: #b0700a; }
.hp-unit:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.hp-unit.is-bad { box-shadow: inset 0 0 0 2px #e5484d; }
.hp-dims__ok { height: 46px; border: 0; border-radius: 10px; background: #1a1a1a; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.hp-search__err { grid-column: 1 / -1; padding: 2px 8px 4px; font-size: 13px; line-height: 1.45; font-weight: 600; color: #c8333a; white-space: pre-line; }
@media (max-width: 1180px) { .hp-dims { width: 100%; } }
@media (max-width: 980px) { .hp-dims { padding: 14px; } .hp-unit { padding-right: 26px; } .hp-unit i { right: 9px; } }
.hp-dims[hidden], .hp-suggest[hidden], .hp-search__err[hidden] { display: none; }