/* ========================================================================== */
/* RU: styles.css — проектный визуальный слой PPS                            */
/* EN: styles.css — PPS project-specific visual layer                         */
/* ========================================================================== */

/* ========================================================================== */
/* RU: Общий фон страницы                                                     */
/* EN: Global page background                                                 */
/* ========================================================================== */
body {
  background:
    radial-gradient(circle at 8% 10%, rgba(0, 107, 255, 0.10), transparent 24%),
    radial-gradient(circle at 90% 78%, rgba(0, 107, 255, 0.08), transparent 20%),
    linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
}

/* ========================================================================== */
/* RU: Hero badges / Строка доверия на первом экране about.html               */
/* EN: Hero badges / Trust badges on about.html first screen                  */
/* ========================================================================== */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.hero-badges .eyebrow {
  margin-bottom: 0;
}

/* ========================================================================== */
/* RU: Hero background / Декоративный фон первого экрана                      */
/* EN: Hero background / Decorative first-screen background                   */
/* ========================================================================== */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__bg::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 12% 16%, rgba(0, 107, 255, 0.16), transparent 20%),
    radial-gradient(circle at 78% 24%, rgba(0, 107, 255, 0.14), transparent 18%),
    radial-gradient(circle at 84% 78%, rgba(0, 107, 255, 0.12), transparent 18%),
    radial-gradient(circle at 42% 72%, rgba(11, 53, 88, 0.10), transparent 16%);
  filter: blur(8px);
  animation: heroGlowShift 9s ease-in-out infinite alternate;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.18;
  mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
}

/* ========================================================================== */
/* RU: Геометрические формы hero                                              */
/* EN: Hero geometric shapes                                                  */
/* ========================================================================== */
.hero__shape {
  position: absolute;
  opacity: 1;
  will-change: transform;
  mix-blend-mode: multiply;
}

.hero__shape--one {
  top: -4%;
  left: -6%;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(0, 107, 255, 0.24), rgba(0, 107, 255, 0.04) 72%);
  animation: floatOne 7s ease-in-out infinite;
}

.hero__shape--two {
  top: 8%;
  right: 6%;
  width: 220px;
  height: 220px;
  border-radius: 40px;
  background: radial-gradient(circle at 35% 35%, rgba(0, 107, 255, 0.20), rgba(0, 107, 255, 0.03) 74%);
  animation: floatTwo 8s ease-in-out infinite;
}

.hero__shape--three {
  left: 52%;
  bottom: 4%;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(11, 53, 88, 0.18), rgba(11, 53, 88, 0.03) 72%);
  animation: floatThree 6s ease-in-out infinite;
}

.hero__shape--four {
  right: -3%;
  bottom: 2%;
  width: 280px;
  height: 280px;
  border-radius: 42% 58% 48% 52% / 52% 42% 58% 48%;
  background: radial-gradient(circle at 35% 35%, rgba(0, 107, 255, 0.16), rgba(0, 107, 255, 0.03) 76%);
  animation: floatFour 8.5s ease-in-out infinite;
}

.hero__shape--center {
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  border-radius: 26%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 107, 255, 0.26), rgba(0, 107, 255, 0.06) 58%, transparent 78%);
  transform: translate(-50%, -50%) rotate(24deg);
  filter: blur(4px);
  animation: floatCenter 6s ease-in-out infinite;
}

/* ========================================================================== */
/* RU: Дополнительная глубина и визуальный акцент hero                        */
/* EN: Additional depth and hero visual accent                                */
/* ========================================================================== */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(238, 244, 251, 0) 0%, rgba(238, 244, 251, 0.68) 52%, rgba(238, 244, 251, 1) 100%);
  pointer-events: none;
}

.hero__panel {
  transform: translateZ(0);
}

.hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at top right, rgba(0, 107, 255, 0.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(0, 107, 255, 0.08), transparent 28%);
  pointer-events: none;
}

.hero__panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--hero-panel-radius) - 1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.34));
  pointer-events: none;
  z-index: 0;
}

.hero__panel-top,
.hero__panel-body {
  position: relative;
  z-index: 1;
}

/* ========================================================================== */
/* RU: Hero showcase interactions                                             */
/* EN: Hero showcase interactions                                             */
/* ========================================================================== */
.hero-showcase__tab {
  transition:
    background-color var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.hero-showcase__tab:hover {
  color: var(--color-primary);
  transform: translateY(-1px);
}

.hero-card {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    opacity var(--transition);
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 107, 255, 0.07), transparent 28%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.hero-card.is-active::before {
  opacity: 1;
}

.hero-showcase__pagination {
  align-items: center;
}

.hero-showcase__dot {
  transition:
    width var(--transition),
    background-color var(--transition),
    transform var(--transition),
    opacity var(--transition);
}

.hero-showcase__dot.is-active {
  transform: scale(1);
}

/* ========================================================================== */
/* RU: Кнопка "наверх"                                                        */
/* EN: Back to top button                                                     */
/* ========================================================================== */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11, 53, 88, 0.08);
  border-radius: 999px;
  background: rgba(0, 107, 255, 0.96);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 107, 255, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--transition),
    visibility var(--transition),
    transform var(--transition),
    background-color var(--transition);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary-hover);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* ========================================================================== */
/* RU: Анимации hero                                                          */
/* EN: Hero animations                                                        */
/* ========================================================================== */
@keyframes floatOne {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(42px, 38px, 0) scale(1.08);
  }
}

@keyframes floatTwo {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(-28px, 34px, 0) rotate(14deg);
  }
}

@keyframes floatThree {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(28px, -28px, 0) scale(1.12);
  }
}

@keyframes floatFour {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(-34px, -28px, 0) rotate(-14deg);
  }
}

@keyframes floatCenter {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(24deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(38deg) scale(1.12);
  }
}

@keyframes heroGlowShift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(0, -26px, 0) scale(1.08);
  }
}

/* ========================================================================== */
/* RU: Адаптивность project-specific слоя                                     */
/* EN: Project-specific responsive rules                                      */
/* ========================================================================== */
@media (max-width: 1180px) {
  .hero__shape--one {
    width: 310px;
    height: 310px;
  }

  .hero__shape--four {
    width: 240px;
    height: 240px;
  }

  .hero__shape--center {
    width: 420px;
    height: 420px;
  }
}

@media (max-width: 920px) {
  .hero__shape--one {
    left: -8%;
    width: 250px;
    height: 250px;
  }

  .hero__shape--two {
    width: 170px;
    height: 170px;
  }

  .hero__shape--three {
    width: 150px;
    height: 150px;
  }

  .hero__shape--four {
    right: -6%;
    width: 190px;
    height: 190px;
  }

  .hero__shape--center {
    width: 340px;
    height: 340px;
  }
}

@media (max-width: 760px) {
  .hero__bg::after {
    background-size: 36px 36px;
    opacity: 0.12;
  }

  .hero__shape--one,
  .hero__shape--four {
    opacity: 0.72;
  }

  .hero__shape--two,
  .hero__shape--three {
    opacity: 0.56;
  }

  .hero__shape--center {
    width: 260px;
    height: 260px;
    opacity: 0.72;
  }

  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }
}

/* hr-business: контроль переноса заголовка "Что меняет программа поддержки сотрудников" */
#impact-title {
  text-wrap: auto;
  max-width: 22ch;
}

@media (max-width: 760px) {
  #impact-title {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero__bg::before,
  .hero__shape--one,
  .hero__shape--two,
  .hero__shape--three,
  .hero__shape--four,
  .hero__shape--center {
    animation: none !important;
  }

  .card,
  .feature-card,
  .pricing-card,
  .metric-card,
  .form-card,
  .faq-item,
  .step-item,
  .hero-card,
  .hero-showcase__tab,
  .hero-showcase__dot,
  .back-to-top {
    transition: none !important;
  }
}