/* ==========================================================================
   Перший екран (головна, ритейл, банк): планета згори, заголовок, кнопки, карусель партнерів.
   Розмітка — templates/sections/home-hero.php.
   ========================================================================== */
.hhero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-ink);
  isolation: isolate;
}

.hhero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(120px, 14vh, 150px);
  text-align: center;
}
.hhero__title {
  max-width: 1180px;
  font-size: clamp(36px, 3.5vw, 52px);
  line-height: 1.07;
  font-weight: 500;
  letter-spacing: -0.033em;
  color: var(--text-on-dark);
  text-wrap: balance;
}
.hhero__lead {
  max-width: 700px;
  margin-top: 20px;
  font-size: 17px;
  line-height: 27px;
  color: var(--text-on-dark-2);
  text-wrap: pretty;
}
/* ключова фраза підзаголовка — біла */
.hhero__lead b { font-weight: 500; color: var(--text-on-dark); }
.hhero__lead-short { display: none; }
.hhero__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(452px, 100%);
  margin-top: 30px;
}

/* Дві рівноцінні кнопки вибору */
.choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 12, 26, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: var(--text-on-dark);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.5s var(--ease-out), box-shadow 0.6s var(--ease-out), background-color 0.5s var(--ease-out);
}
.choice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 50%);
  pointer-events: none;
}
.choice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 155, 255, 0.32), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.choice:hover,
.choice:focus-visible {
  border-color: rgba(191, 210, 255, 0.42);
  background: rgba(20, 28, 64, 0.6);
  box-shadow: 0 0 0 4px rgba(61, 107, 255, 0.08), 0 20px 50px -22px rgba(61, 107, 255, 0.8);
}
.choice:hover::after,
.choice:focus-visible::after { opacity: 1; }
/* на телефоні — короткий підпис («Для банків»), щоб обидві кнопки стали в один рядок */
.choice__short { display: none; }
.choice .btn__arrow { color: var(--text-on-dark-2); transition: transform 0.45s var(--ease-out), color 0.3s; }
.choice:hover .btn__arrow { color: var(--text-on-dark); transform: translateX(3px); }

/* Сторінки ритейлу й банку: мітка над заголовком і одна основна кнопка */
.hhero__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--text-on-dark-2);
}
.hhero__label::before { content: ""; width: 6px; height: 6px; background: var(--brand-blue); }
.hhero--page .hhero__lead { max-width: 760px; }
.hhero__choices--single { grid-template-columns: minmax(0, 1fr); width: auto; }
.choice--primary {
  padding: 0 26px;
  /* той самий вигляд, що й .btn--primary — лише трохи вища (перший екран) */
  border-color: transparent;
  background: var(--button-primary-bg);
  color: var(--text-on-brand);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
}
.choice--primary .btn__arrow { color: rgba(255, 255, 255, 0.85); }
.choice--primary::before,
.choice--primary::after { display: none; }
.choice--primary:hover,
.choice--primary:focus-visible { background: var(--button-primary-hover); border-color: transparent; box-shadow: 0 10px 30px -10px rgba(56, 100, 245, 0.75); }
.choice--primary:hover .btn__arrow { color: #fff; }

/* Карусель партнерів */
.hhero__partners {
  position: relative;
  z-index: 3;
  padding: 8px 0 40px;
  background: var(--surface-ink);
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  padding-right: 72px;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track li { flex: none; }
.marquee__track li { color: #fff; opacity: 0.5; transition: opacity 0.4s var(--ease-out); }
.marquee__track li:hover { opacity: 0.9; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 760px) {
  .hhero__copy { padding-top: 112px; }
  .hhero__title { font-size: 30px; line-height: 1.13; letter-spacing: -0.03em; }
  .hhero__lead { max-width: 320px; font-size: 16px; line-height: 24px; margin-top: 16px; }
  .hhero__lead-full { display: none; }
  .hhero__lead-short { display: inline; }
  .hhero__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 28px; }
  .hhero__choices--single { grid-template-columns: minmax(0, 1fr); width: auto; }
  .hhero__choices .choice { padding: 0 14px; gap: 8px; }
  .choice__full { display: none; }
  .choice__short { display: inline; }
  .marquee__track { gap: 48px; padding-right: 48px; animation-duration: 36s; }
  .marquee__track .logo-mark { scale: 0.86; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ==========================================================================
   Перший екран «планета згори»
   ========================================================================== */
/* Висота першого екрана: на всю висоту вікна, але не нижче 720 px і не вище 960 px
   (на дуже високих екранах блок не розтягується без кінця). Вільне місце йде в проміжок
   між кнопками й каруселлю партнерів — карусель стоїть унизу екрана. На телефоні висота за вмістом. */
.hhero--orbit { min-height: clamp(720px, 100svh, 960px); }
.hhero--orbit .hhero__spacer { min-height: 56px; flex-grow: 1; }
.hhero__spacer {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  min-height: clamp(150px, 20vh, 230px);
}
.hhero--orbit .hhero__partners { background: transparent; padding: 34px 0 48px; }
.hhero__caption {
  margin-bottom: 22px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--text-on-dark-3);
  text-align: center;
}

/* ---------- orbit: зірки ---------- */
.orbit__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 27% 42%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 38% 12%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 63% 28%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 74% 9%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 86% 36%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 93% 16%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 6% 52%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 52% 6%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 18% 68%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 81% 58%, rgba(255, 255, 255, 0.35), transparent);
  background-size: 760px 520px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
  mask-image: linear-gradient(180deg, #000, transparent 55%);
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }

/* ---------- orbit: планета згори ---------- */
@keyframes rise { from { transform: translateY(80px); } to { transform: none; } }
.orbit { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.orbit__planet {
  --pw: max(2400px, 182vw);
  position: absolute;
  left: 50%;
  top: 112px;
  width: var(--pw);
  height: var(--pw);
  translate: -50% 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #0f1640 0%, #080b22 9%, #05060c 30%);
  box-shadow:
    0 -1px 0 0 rgba(214, 228, 255, 0.9),
    0 -4px 14px 0 rgba(150, 182, 255, 0.7),
    0 -30px 90px 0 rgba(61, 107, 255, 0.45),
    0 -120px 260px 0 rgba(36, 72, 232, 0.28);
  animation: rise 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.orbit__planet::after {
  /* внутрішнє сяйво атмосфери вздовж краю */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 26px 70px -20px rgba(61, 107, 255, 0.75), inset 0 4px 10px -2px rgba(190, 210, 255, 0.6);
}
.orbit__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(140, 170, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 170, 255, 0.09) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 50% 0;
  -webkit-mask-image: radial-gradient(28% 22% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  mask-image: radial-gradient(28% 22% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
}
.hhero--orbit .hhero__copy { padding-top: clamp(220px, 31vh, 300px); }
.hhero--orbit .hhero__title {
  background: linear-gradient(180deg, #ffffff 35%, #b7bdd2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hhero--orbit .hhero__title .split-word { background: inherit; -webkit-background-clip: text; background-clip: text; }
/* друга частина заголовка (<em>) — приглушена, як у заголовках секцій: головна думка біла, уточнення сіре */
.hhero--orbit .hhero__title em,
.hhero--orbit .hhero__title em .split-word { background: none; color: #8d93b0; -webkit-text-fill-color: #8d93b0; }

@media (max-width: 760px) {
  .orbit__planet { top: 96px; --pw: 1700px; }
  .hhero--orbit .hhero__copy { padding-top: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit__planet, .orbit__stars, .orbit__grid { animation: none; }
}
.no-motion .orbit__planet { animation: none; }



@media (max-width: 760px) {
  .hhero--orbit { min-height: 0; }
  .hhero--orbit .hhero__spacer { min-height: 100px; flex-grow: 0; }
}