/* Новая главная (макет Lovable: possibility-patchwork.lovable.app), перенесена в вёрстку сайта.
   Все правила под .hp, чтобы не задеть общие стили сайта. */

.hp {
  --hp-bg: #faf9fe;
  --hp-fg: #161423;
  --hp-card: #fff;
  --hp-primary: #823feb;
  --hp-primary-2: #532bc7;
  --hp-primary-soft: #f0eaff;
  --hp-secondary: #f0eef9;
  --hp-muted: #555365;
  --hp-border: #e2dfea;
  --hp-success: #0fa05c;
  --hp-danger: #de3b3d;
  --hp-gradient: linear-gradient(135deg, #823feb, #532bc7);
  --hp-shadow: 0 1px 2px rgba(22, 20, 35, .04), 0 12px 32px -12px rgba(76, 59, 119, .18);
  --hp-glow: 0 20px 50px -15px rgba(130, 63, 235, .55);
  background: var(--hp-bg);
  color: var(--hp-fg);
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Сброс без веса (:where): перебивает только общие стили тегов, а классы сайта (блок «Сервисы», кнопки .btn) работают как обычно */
:where(.hp) :is(h1, h2, h3, p, ul, li, figure) { margin: 0; padding: 0; }
:where(.hp) ul { list-style: none; }
:where(.hp) a { color: inherit; text-decoration: none; }
:where(.hp) a:hover { text-decoration: none; }
.hp img { max-width: 100%; }

.hp__shell { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.hp__h2 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: var(--hp-fg); }
.hp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hp__more { display: none; align-items: center; gap: 8px; font-weight: 600; color: var(--hp-primary); white-space: nowrap; }
.hp__more:hover { color: var(--hp-primary-2); }
.hp__more svg, .hp__arrow { width: 16px; height: 16px; flex-shrink: 0; }
.hp__block { padding-bottom: 96px; }

/* ---------- первый экран ---------- */
.hp__hero { position: relative; overflow: hidden; border-radius: 0 0 48px 48px;
  background-image: radial-gradient(ellipse at 50% 0%, #dbceff 0%, rgba(219, 206, 255, 0) 65%); }
.hp__hero-img { position: absolute; left: 0; right: 0; top: 160px; width: 100%; height: auto; opacity: .7; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent); }
.hp__hero-in { position: relative; padding-top: 80px; padding-bottom: 40px; text-align: center; }
.hp__h1 { max-width: 896px; margin: 0 auto; font-size: 36px; line-height: 1.05; font-weight: 800; letter-spacing: -.025em; color: var(--hp-fg); }
.hp__h1 span { color: var(--hp-primary); }
.hp__lead { max-width: 672px; margin: 24px auto 0; font-size: 18px; line-height: 1.55; color: var(--hp-muted); }
.hp__hero-btns { margin-top: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.hp__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 16px 32px;
  background-image: var(--hp-gradient); box-shadow: var(--hp-glow); color: #fff; font: 600 16px/1.5 inherit; font-family: inherit; cursor: pointer;
  transition: transform .2s ease; }
.hp__btn:hover, .hp__btn:focus { transform: translateY(-2px); color: #fff; text-decoration: none; }
.hp__link-btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px; font-weight: 600; color: var(--hp-fg); }
.hp__link-btn:hover, .hp__link-btn:focus { color: var(--hp-primary); text-decoration: none; }

/* «Оставить заявку» в шапке (выводится, если страница задала $header_lead_btn) */
.header-lead { display: inline-flex; align-items: center; height: 40px; margin-right: 12px; padding: 0 18px; border-radius: 999px; background: #fff; color: #41216e; font-size: 14px; font-weight: 500; white-space: nowrap; transition: opacity .2s ease; }
.header-lead:hover, .header-lead:focus { color: #41216e; opacity: .9; text-decoration: none; }
@media (max-width: 575px) { .header-lead { height: 34px; margin-right: 8px; padding: 0 12px; font-size: 13px; } }
.hp__btn:focus { outline: none; }
.hp__btn svg { width: 20px; height: 20px; }

/* ---------- логотипы ---------- */
.hp__logos { border-top: 1px solid var(--hp-border); border-bottom: 1px solid var(--hp-border); background: var(--hp-card); }
.hp__logos-title { padding-top: 40px; text-align: center; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--hp-muted); }
.hp__logos .hp__shell { padding-top: 24px; padding-bottom: 40px; }
.hp__marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hp__marquee-track { display: flex; width: max-content; animation: hp-marquee 40s linear infinite; }
.hp__marquee:hover .hp__marquee-track { animation-play-state: paused; }
.hp__marquee-set { display: flex; flex-shrink: 0; align-items: center; gap: 56px; padding-right: 56px; }
.hp__logo { width: auto; max-width: none; object-fit: contain; opacity: .6; -webkit-filter: grayscale(1); filter: grayscale(1); transition: all .3s ease; }
.hp__logo:hover { opacity: 1; -webkit-filter: none; filter: none; }
.hp__logo-text { font-weight: 800; letter-spacing: -.025em; white-space: nowrap; line-height: 1; color: var(--hp-muted); opacity: .6; transition: all .3s ease; }
.hp__logo-text:hover { opacity: 1; color: #0284c7; }
@keyframes hp-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hp__marquee-track { animation: none; } }

/* ---------- цифры ---------- */
.hp__stats { padding-top: 64px; padding-bottom: 64px; }
.hp__stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; }
.hp__stat-num { display: flex; align-items: baseline; gap: 8px; }
.hp__stat-big { font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -.025em;
  background-image: var(--hp-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp__stat-big--tight { letter-spacing: -.06em; }
.hp__stat-unit { font-size: 20px; font-weight: 600; color: rgba(130, 63, 235, .7); }
.hp__stat-text { margin-top: 12px; font-size: 16px; line-height: 1.375; color: var(--hp-muted); }

/* ---------- кейсы ---------- */
.hp__cases-grid { margin-top: 48px; display: grid; gap: 20px; }
.hp__case { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border-radius: 16px; background: var(--hp-card);
  box-shadow: var(--hp-shadow); transition: transform .2s ease; color: var(--hp-fg); }
.hp__case:hover { transform: translateY(-4px); color: var(--hp-fg); }
.hp__case-logo { display: flex; align-items: center; height: 48px; }
.hp__case-logo img { max-height: 48px; width: auto; max-width: 100%; object-fit: contain; object-position: left; }
.hp__case-logo span { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--hp-primary-2); }
.hp__case-body { margin-top: 40px; }
.hp__case-title { font-size: 18px; line-height: 1.375; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hp__case-more { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--hp-primary); }
.hp__case-more svg { transition: transform .2s ease; }
.hp__case:hover .hp__case-more svg { transform: translateX(4px); }

/* ---------- почему Relog ---------- */
.hp__features { background: var(--hp-secondary); padding-top: 80px; padding-bottom: 80px; }
.hp__features .hp__h2 { max-width: 672px; }
.hp__feat-grid { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.hp__feat-col { display: flex; flex: 1 1 0%; flex-direction: column; gap: 20px; min-width: 0; }
.hp__feat-pair { display: flex; flex-direction: column; gap: 20px; }
.hp__feat { display: flex; flex: 1 1 0%; flex-direction: column; min-height: 0; min-width: 0; padding: 24px; border-radius: 24px; background: var(--hp-card); box-shadow: var(--hp-shadow); }
.hp__feat-title { font-size: 18px; line-height: 1.4; font-weight: 600; }
.hp__feat-text { margin-top: 6px; max-width: 416px; font-size: 14px; line-height: 1.625; color: var(--hp-muted); }
.hp__feat--sm .hp__feat-title { font-size: 16px; }
.hp__feat--sm .hp__feat-text { font-size: 13px; }
.hp__feat-img { margin-top: 12px; display: flex; flex: 1 1 0%; align-items: center; justify-content: center; min-height: 0; }
.hp__feat-img--bleed { margin-left: -24px; margin-right: -24px; }
.hp__feat-img img { width: auto; max-width: 100%; height: auto; object-fit: contain; }

/* ---------- сервисы (вёрстка и слайдер — общие с сайтом) ---------- */
.hp__services { padding-top: 96px; padding-bottom: 96px; }
.hp__services .main-service { margin: 0; padding: 0; }
.hp__services .main-service .title-lg { font-family: inherit; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: var(--hp-fg); }

/* ---------- подходит ли ---------- */
.hp__fit-grid { margin-top: 48px; display: grid; gap: 20px; }
.hp__fit { padding: 32px; border-radius: 16px; }
.hp__fit--yes { background: var(--hp-primary-soft); }
.hp__fit--no { background: var(--hp-card); border: 1px solid var(--hp-border); }
.hp__fit-title { font-size: 20px; font-weight: 700; }
.hp__fit ul { margin-top: 24px; }
.hp__fit li { display: flex; gap: 12px; font-size: 16px; }
.hp__fit li + li { margin-top: 16px; }
.hp__fit--no li { color: var(--hp-muted); }
.hp__fit li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.hp__fit--yes li svg { color: var(--hp-success); }
.hp__fit--no li svg { color: var(--hp-danger); }

/* ---------- интеграции ---------- */
.hp__integr { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 28px; border-radius: 24px;
  background-image: var(--hp-gradient); color: #fff; }
.hp__integr .hp__h2 { max-width: 512px; color: #fff; }
.hp__integr-sub { margin-top: 12px; font-size: 18px; opacity: .8; }
.hp__integr-sub a { text-decoration: underline; text-underline-offset: 3px; }
.hp__integr-sub a:hover { color: #fff; opacity: 1; }
.hp__integr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.hp__integr-list span { padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .15); text-align: center; font-size: 14px; font-weight: 600; }

/* ---------- статьи ---------- */
.hp__posts-grid { margin-top: 48px; display: grid; gap: 20px; }
.hp__post { display: block; overflow: hidden; border-radius: 16px; background: var(--hp-card); box-shadow: var(--hp-shadow); color: var(--hp-fg); }
.hp__post:hover { color: var(--hp-fg); }
.hp__post-img { display: block; overflow: hidden; aspect-ratio: 740 / 420; background: var(--hp-secondary); }  /* пропорция обложек блога: без обрезки */
.hp__post-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hp__post:hover .hp__post-img img { transform: scale(1.05); }
.hp__post-body { padding: 24px; }
.hp__post-cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hp-primary); }
.hp__post-title { margin-top: 8px; font-size: 20px; line-height: 1.35; font-weight: 700; }
.hp__post-date { margin-top: 8px; font-size: 14px; color: var(--hp-muted); }

/* ---------- FAQ (разметка и JSON-LD — общий ru/faq_block.php) ---------- */
.hp__faq .faq-page { padding: 0; }
.hp__faq .faq-page-title { margin: 0; font-family: inherit; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: var(--hp-fg); }
.hp__faq .faq-page-sub { margin-top: 16px; font-size: 18px; color: var(--hp-muted); }
.hp__faq .faq-list { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.hp__faq .faq-item, .hp__faq .faq-item:last-child { border: 1px solid var(--hp-border); border-radius: 16px; background: var(--hp-card); padding: 0 24px; transition: box-shadow .25s ease; }
.hp__faq .faq-item.is-open { box-shadow: var(--hp-shadow); }
.hp__faq .faq-question, .hp__faq .faq-item:first-child .faq-question { padding: 24px 0; font-family: inherit; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--hp-fg); }
.hp__faq .faq-question:hover { color: var(--hp-primary); }
.hp__faq .faq-answer-inner p, .hp__faq .faq-answer-inner ul li { font-size: 16px; line-height: 1.625; color: var(--hp-muted); }

/* ---------- форма ---------- */
.hp__demo { padding-bottom: 64px; }
/* общая обёртка сайта даёт 80px белого отступа перед подвалом — на главной фон страницы идёт до подвала */
.page-wrapper:has(> .hp) { padding-bottom: 0; }
.hp__demo-panel { display: grid; align-items: center; gap: 48px; padding: 32px; border-radius: 24px; background-image: var(--hp-gradient); color: #fff; }
.hp__demo-title { font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: #fff; }
.hp__demo-sub { margin-top: 20px; font-size: 18px; opacity: .8; }
.hp__form-card { min-width: 0; padding: 32px; border-radius: 16px; background: var(--hp-card); color: var(--hp-fg); }
.hp__form-card-title { margin-bottom: 20px; font-size: 16px; font-weight: 600; }
/* Общая форма cases/form.php (как в кейсе Premier Foods): поля на всю ширину карточки */
.hp__form-card .subscribe-demo { display: block; margin: 0; padding: 0; background: transparent; }
.hp__form-card .subscribe-demo-form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.hp__form-card .half-form { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 0; }
.hp__form-card .half-form .form-group { width: 100%; margin: 0; }
.hp__form-card .form-group { display: block; height: auto; margin: 0; padding: 0; background: none; border: none; border-radius: 0; }
.hp__form-card .form-group input { display: block; width: 100%; height: 52px; padding: 0 16px; color: var(--hp-fg); background: #fff; border: 1px solid var(--hp-border); border-radius: 12px; font-family: inherit; font-size: 15px; outline: none; }
.hp__form-card .form-group input:focus { border-color: var(--hp-primary); }
.hp__form-card .iti { display: block; width: 100%; }
.hp__form-card .iti input { width: 100%; }
.hp__form-card .form-group.danger input { border-color: #e53935; }
.hp__form-card .bootstrap-select { width: 100% !important; margin: 0 !important; }
.hp__form-card .bootstrap-select > .btn,
.hp__form-card select.select-form { display: flex !important; align-items: center; width: 100%; height: 52px !important; padding: 0 16px !important; color: var(--hp-fg) !important; background: #fff !important; border: 1px solid var(--hp-border) !important; border-radius: 12px !important; box-shadow: none !important; margin: 0 !important; font-size: 15px; }
.hp__form-card .bootstrap-select .filter-option { position: static; display: flex; align-items: center; height: 100%; padding: 0; text-align: left; }
.hp__form-card .bootstrap-select .filter-option-inner,
.hp__form-card .bootstrap-select .filter-option-inner-inner { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; }
.hp__form-card .subscribe-demo-submit { display: flex; flex-direction: column; gap: 12px; }
.hp__form-card #doCallC .btn { width: 100%; height: 56px !important; margin: 0 !important; padding: 0 !important; color: #fff !important; background: var(--hp-gradient) !important; border: none !important; border-radius: 12px !important; font-family: inherit; font-size: 16px; font-weight: 600; }
.hp__form-card #doCallC .btn:hover { opacity: .95; }
.hp__form-card .load { display: none; }
.hp__form-card .subscribe-demo-form > div:has(> .g-recaptcha) { max-width: 100%; overflow: hidden; margin: 0 !important; }
.hp__form-card .accept-form { display: flex; align-items: center; gap: 10px; margin: 0; }
.hp__form-card .accept-form p { margin: 0; color: var(--hp-muted); font-size: 12px; line-height: 16px; }
.hp__form-card .accept-form a { color: var(--hp-muted); text-decoration: underline; }
.hp__form-card .accept-form .checkbox { width: 18px; height: 18px; flex: 0 0 18px; }
.hp__form-card .accept-form .checkmark { width: 18px !important; height: 18px !important; }

/* ---------- адаптив ---------- */
@media (min-width: 640px) {
  .hp__hero-btns { flex-direction: row; }
  .hp__more { display: inline-flex; }
  .hp__cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp__feat-pair { flex-direction: row; }
  .hp__feat-img img { max-height: var(--mh); }
  .hp__integr { padding: 40px; }
  .hp__integr-list { width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp__integr-list span { padding: 12px 20px; font-size: 16px; }
}
@media (min-width: 768px) {
  .hp__h2 { font-size: 48px; line-height: 1; }
  .hp__hero-in { padding-top: 112px; }
  .hp__h1 { font-size: 72px; }
  .hp__lead { font-size: 20px; }
  .hp__stats { padding-top: 80px; padding-bottom: 80px; }
  .hp__stat-big { font-size: 60px; }
  .hp__stat-unit { font-size: 24px; }
  .hp__features { padding-top: 96px; padding-bottom: 96px; }
  .hp__feat-title { font-size: 20px; }
  .hp__feat-text { font-size: 16px; }
  .hp__services .main-service .title-lg { font-size: 48px; line-height: 1; }
  .hp__fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp__integr { flex-direction: row; align-items: center; padding: 56px; }
  .hp__integr .hp__h2 { font-size: 36px; line-height: 1.1; }
  .hp__posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp__faq .faq-page-title { font-size: 48px; line-height: 1; }
  .hp__demo-panel { padding: 56px; }
  .hp__demo-title { font-size: 60px; line-height: 1; }
}
@media (min-width: 1024px) {
  .hp__stats-grid { display: flex; justify-content: space-between; column-gap: 32px; }
  .hp__stat { flex-shrink: 0; }
  .hp__stat-label { width: 0; }
  .hp__stat-text { width: 144px; }
  .hp__cases-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp__feat-grid { flex-direction: row; }
  .hp__demo-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .hp__hero { border-radius: 0 0 32px 32px; }
  .hp__hero-in { padding-top: 56px; }
  .hp__h1 { font-size: 32px; }
  .hp__block { padding-bottom: 64px; }
  .hp__services { padding-top: 64px; padding-bottom: 64px; }
  .hp__demo-panel { padding: 24px 20px; gap: 28px; }
  .hp__demo-title { font-size: 30px; }
  .hp__form-card { padding: 20px 16px; }
  .hp__faq .faq-item, .hp__faq .faq-item:last-child { padding: 0 16px; }
  .hp__faq .faq-question, .hp__faq .faq-item:first-child .faq-question { padding: 18px 0; font-size: 16px; }
}
.hp [id] { scroll-margin-top: 96px; }
html:has(.hp) { scroll-behavior: smooth; }
/* кнопки в слайдере «Сервисы»: у сайта цвет текста берётся от ссылки, задаём явно */
.hp .main-service .btn-primary, .hp .main-service .btn-primary:hover, .hp .main-service .btn-primary:focus { color: #fff; }

/* ---------- окно заявки #authModal (общее для сайта, из подвала) — на новой главной в стиле макета ---------- */
body:has(.hp) #authModal .modal-dialog { max-width: 480px; }
body:has(.hp) #authModal .modal-content { border: 0; border-radius: 16px; padding: 28px; background: #fff; box-shadow: 0 24px 64px -16px rgba(22, 20, 35, .35); font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
body:has(.hp) #authModal .modal-header { position: relative; display: block; padding: 0; border: 0; }
body:has(.hp) #authModal .modal-title { margin: 0; padding-right: 32px; font-family: inherit; font-size: 20px; line-height: 1.3; font-weight: 600; color: #161423; }
body:has(.hp) #authModal .hp-modal-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: #555365; }
body:has(.hp) #authModal .close { position: absolute; top: -4px; right: -6px; margin: 0; padding: 4px 8px; font-size: 26px; font-weight: 400; line-height: 1; color: #161423; opacity: .7; text-shadow: none; }
body:has(.hp) #authModal .close:hover { opacity: 1; }
body:has(.hp) #authModal .modal-body { padding: 24px 0 0; }
body:has(.hp) #authModal .auth-form { display: flex; flex-direction: column; gap: 16px; }
body:has(.hp) #authModal .form-group { display: block !important; width: 100%; margin: 0; padding: 0; height: auto; background: none; border: 0; }  /* у сайта поля в строку — тут подпись над полем */
body:has(.hp) #authModal .hp-modal-label { display: block; margin: 0 0 6px; font-size: 14px; line-height: 1.3; font-weight: 500; color: #161423; }
body:has(.hp) #authModal .hp-modal-label i { font-style: normal; color: #de3b3d; }
body:has(.hp) #authModal .form-group input { display: block; width: 100%; height: 44px; padding: 0 14px; border: 1px solid #e2dfea; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(22, 20, 35, .06); font-family: inherit; font-size: 15px; color: #161423; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
body:has(.hp) #authModal .form-group input:focus { border-color: #823feb; box-shadow: 0 0 0 3px rgba(130, 63, 235, .15); }
body:has(.hp) #authModal .form-group.danger input { border-color: #de3b3d; }
body:has(.hp) #authModal .iti { display: block; width: 100%; }
body:has(.hp) #authModal .bootstrap-select { width: 100% !important; margin: 0 !important; }
body:has(.hp) #authModal .bootstrap-select > .btn, body:has(.hp) #authModal select.select-form { display: flex !important; align-items: center; width: 100%; height: 44px !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid #e2dfea !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(22, 20, 35, .06) !important; font-family: inherit; font-size: 15px; color: #161423 !important; }
body:has(.hp) #authModal .bootstrap-select .filter-option { position: static; display: flex; align-items: center; height: 100%; padding: 0; text-align: left; }
body:has(.hp) #authModal .bootstrap-select .filter-option-inner-inner { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #555365; }
body:has(.hp) #authModal .modal-body > .auth-form > div:has(> .g-recaptcha) { max-width: 100%; overflow: hidden; margin: 0 !important; }
body:has(.hp) #authModal .accept-form { display: flex; align-items: flex-start; gap: 10px; margin: 0 !important; }
body:has(.hp) #authModal .accept-form p { margin: 0; font-size: 12px; line-height: 16px; color: #555365; }
body:has(.hp) #authModal .accept-form a { color: #555365; text-decoration: underline; }
body:has(.hp) #authModal #doCall .btn { display: block; width: 100%; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(135deg, #823feb, #532bc7); box-shadow: 0 16px 40px -16px rgba(130, 63, 235, .6); font-family: inherit; font-size: 16px; font-weight: 600; color: #fff; }
body:has(.hp) #authModal #doCall .btn:hover { opacity: .95; }
@media (max-width: 480px) { body:has(.hp) #authModal .modal-content { padding: 22px 18px; } }

/* ---------- игра «Хотите сыграть?» (тизер, игра по ссылке) ---------- */
.hp { --g-yellow: #f0d858; --g-blue: #0075ff; --g-contour: #e7def5; --g-line: #dfe3ee; --g-panel: #2b0a45; --g-truck-1: #05f; --g-truck-2: #d95f00; --g-truck-3: #18b840; }
.hp__game { display: grid; gap: 40px; }
.hp__game-title { font-size: 36px; line-height: 1.08; }
.hp__game-title span, .hp__game-sub span { color: var(--hp-primary); }
.hp__game-sub { margin-top: 16px; font-size: 20px; line-height: 1.375; font-weight: 700; letter-spacing: -.025em; }
.hp__game-text { margin-top: 20px; max-width: 512px; font-size: 18px; color: var(--hp-muted); }
.hp__game-rules { margin-top: 28px; }
.hp__game-rules li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; }
.hp__game-rules li + li { margin-top: 12px; }
.hp__game-rules svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--hp-primary); }
.hp__game-btns { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hp__game-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 12px; font-size: 16px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 3px rgba(22, 20, 35, .12); transition: opacity .2s ease; }
.hp__game-btn svg { width: 16px; height: 16px; }
.hp__game-btn--primary, .hp__game-btn--primary:hover, .hp__game-btn--primary:focus { background: var(--hp-primary); color: #fff; text-decoration: none; }
.hp__game-btn--yellow, .hp__game-btn--yellow:hover, .hp__game-btn--yellow:focus { background: var(--g-yellow); color: var(--hp-fg); text-decoration: none; }
.hp__game-btn:hover { opacity: .88; }
.hp__game-panel { position: relative; display: flex; align-items: center; padding: 20px; border-radius: 24px; background-color: var(--g-panel);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px); }
.hp__game-pin { display: none; position: absolute; right: 20px; top: 20px; width: 20px; height: 20px; color: #fff; }
.hp__game-board { position: relative; width: 100%; }
.hp__game-card { padding: 12px; border-radius: 16px; background: var(--hp-card); }
.hp__game-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--hp-muted); }
.hp__game-card-head span + span { color: var(--hp-fg); text-align: right; }
.hp__game-map { position: relative; margin-top: 8px; overflow: hidden; border-radius: 12px; }
.hp__game-map svg { display: block; width: 100%; height: auto; }
.hp__game-stats { display: none; position: absolute; right: 8px; top: 8px; width: 144px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.95); box-shadow: var(--hp-shadow); }
.hp__game-k { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hp-muted); }
.hp__game-k--mt { margin-top: 8px; font-weight: 400; }
.hp__game-v { font-size: 18px; line-height: 1; font-weight: 700; color: var(--hp-fg); }
.hp__game-v--sm { font-size: 14px; line-height: 1.4; }
.hp__game-win { margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: var(--g-blue); font-size: 10px; font-weight: 700; color: #fff; }
.hp__game-left { position: absolute; right: 8px; bottom: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.95); box-shadow: var(--hp-shadow); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hp-fg); }
.hp__game-float { display: none; position: absolute; border-radius: 16px; background: var(--hp-card); box-shadow: var(--hp-shadow); }
.hp__game-float--done { left: 4px; top: 56px; align-items: center; gap: 12px; padding: 14px; }
.hp__game-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--hp-primary-soft); color: var(--hp-primary); }
.hp__game-ico svg { width: 20px; height: 20px; }
.hp__game-big { display: block; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--hp-fg); }
.hp__game-float--fleet { left: 16px; bottom: 8px; width: 208px; padding: 16px; }
.hp__game-float--fleet ul { margin-top: 10px; }
.hp__game-float--fleet li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.hp__game-float--fleet li + li { margin-top: 8px; }
.hp__game-float--fleet li span { width: 24px; height: 4px; flex-shrink: 0; border-radius: 999px; }
.hp__game-float--fleet li b { font-weight: 600; color: var(--hp-fg); }
.hp__game-float--fleet li b:last-child { margin-left: auto; }
@media (min-width: 640px) {
  .hp__game-panel { padding: 28px; }
  .hp__game-pin, .hp__game-stats { display: block; }
  .hp__game-float--done { display: flex; }
  .hp__game-float--fleet { display: block; }
}
@media (min-width: 768px) { .hp__game-title { font-size: 48px; } .hp__game-sub { font-size: 24px; } }
@media (min-width: 1024px) { .hp__game { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

/* ---------- блок заявки: кнопка вместо формы (как в макете) ---------- */
.hp__demo-title { font-size: 36px; }
.hp__form-card-title { margin-bottom: 0; font-size: 18px; line-height: 1.55; }
.hp__demo-btn { display: block; width: 100%; margin-top: 20px; padding: 16px 20px; border: 0; border-radius: 16px; background-image: var(--hp-gradient); box-shadow: var(--hp-shadow); font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; cursor: pointer; transition: opacity .2s ease; }
.hp__demo-btn:hover { opacity: .95; }
.hp__demo-btn:focus { outline: none; }
.hp__demo-note { margin-top: 16px; font-size: 13px; color: var(--hp-muted); }
.hp__demo-note a { color: inherit; }
.hp__demo-note a:hover { color: var(--hp-primary); text-decoration: underline; }
@media (min-width: 768px) { .hp__demo-title { font-size: 56px; line-height: 1.05; } }
@media (min-width: 1024px) { .hp__form-card { padding: 40px; border-radius: 28px; } }

/* «Получить демо за 15 минут» — кнопка-ссылка (открывает презентера) */
button.hp__link-btn { border: 0; background: none; font-family: inherit; font-size: 16px; line-height: 1.5; cursor: pointer; }
button.hp__link-btn:focus { outline: none; }