/* ===== AIRA hero visual (слои) ============================= */

.aira-hero-visual {
  position: relative;
  width: 100%;
  max-width: 520px;          /* можно менять под сетку */
  min-height: 500px;
  margin-left: auto;
  aspect-ratio: 4 / 3;       /* чтобы блок держал форму до загрузки */
  overflow: visible;
}

/* Базовый стиль для всех слоёв */
.aira-hero-layer {
  position: absolute;
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: none;
}

/* Орбита (пунктирный овал + бегущие точки) */
.aira-hero-orbit {
  position: absolute;
  inset: 4% 0 0;
  margin: auto;
  width: 96%;
  height: 80%;
  border-radius: 50%;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  opacity: 0.8;
  pointer-events: none;
}

/* Две бегущие точки по орбите */
.aira-hero-orbit::before,
.aira-hero-orbit::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.9);
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: aira-orbit-dot 10s linear infinite;
}

.aira-hero-orbit::after {
  animation-delay: -5s;
}

/* ===== Расположение слоёв (подогнано под референс) ===== */

/* Дом — низ слева */
.aira-hero-home {
  width: 22%;
  bottom: 15%;
  left: 5%;
  animation: aira-float-soft 10s ease-in-out infinite;
}

/* Офис — низ справа */
.aira-hero-office {
  width: 24%;
  bottom: 25%;
  right: 0;
  animation: aira-float-soft 11s ease-in-out infinite;
  animation-delay: -2s;
}

/* Люди — центр снизу */
.aira-hero-users {
  width: 45%;
  bottom: 6%;
  left: 52%;
  transform: translateX(-50%);
  animation: aira-float-center 9s ease-in-out infinite;
}

/* graph1 — Task (крупная карточка слева сверху) */
.aira-hero-graph1 {
  width: 30%;
  top: 8%;
  left: 10%;
  animation: aira-float-card-1 7s ease-in-out infinite;
}

/* graph2 — € и пользователь (центр выше людей) */
.aira-hero-graph2 {
  width: 22%;
  top: 18%;
  left: 40%;
  animation: aira-float-card-2 8s ease-in-out infinite;
}

/* graph3 — календарь (справа сверху) */
.aira-hero-graph3 {
  width: 22%;
  top: 9%;
  right: 10%;
  animation: aira-float-card-3 9s ease-in-out infinite;
}

/* graph4 — большой график (справа, ближе к середине) */
.aira-hero-graph4 {
  width: 24%;
  top: 30%;
  right: 20%;
  animation: aira-float-card-4 8.5s ease-in-out infinite;
}

/* graph5 — маленький квадратик (слева от людей) */
.aira-hero-graph5 {
  width: 16%;
  top: 30%;
  left: 4%;
  animation: aira-float-card-5 7.5s ease-in-out infinite;
}

/* ===== Анимации ========================================== */

@keyframes aira-float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes aira-float-center {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -8px); }
}

@keyframes aira-float-card-1 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes aira-float-card-2 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes aira-float-card-3 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@keyframes aira-float-card-4 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

@keyframes aira-float-card-5 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes aira-orbit-dot {
  0%   { transform: translate(-50%, -50%) rotate(0deg) translateX(48%); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(48%); }
}

/* Адаптив — чтобы на мобилках всё не было огромным */

@media (max-width: 991.98px) {
  .aira-hero-visual {
    max-width: 360px;
    margin: 2rem auto 0;
  }
}

/* ===== AIRA ABOUT VISUAL ==================================== */

.about-image {
  /* оставляем твой position-relative из разметки */
  position: relative;
}

/* Контейнер слоёв */
.aira-about-visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 530px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Общий стиль слоя */
.aira-about-layer {
  position: absolute;
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: none;
}

/* Свечение под персонажами */
.aira-about-glow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 30%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0,
      rgba(148, 163, 184, 0.35) 0,
      rgba(15, 23, 42, 0.9) 55%,
      transparent 100%);
  opacity: 0.95;
}

/* --- Расположение слоёв (подогнано под композицию) --- */

/* Центральный персонаж с кубом */
.aira-about-center {
  width: 34%;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  animation: about-center-float 9s ease-in-out infinite;
}

/* Девушка слева с Task/Done */
.aira-about-girl {
  width: 32%;
  bottom: 12%;
  left: 5%;
  animation: about-girl-float 8s ease-in-out infinite;
}

/* Парень справа с € + user */
.aira-about-guy {
  width: 32%;
  bottom: 12%;
  right: 4%;
  animation: about-guy-float 8.5s ease-in-out infinite;
}

/* График роста внизу справа */
.aira-about-chart {
  width: 26%;
  bottom: 10%;
  right: 10%;
  animation: about-chart-float 7.5s ease-in-out infinite;
}

/* --- Анимации --- */

@keyframes about-center-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}

@keyframes about-girl-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes about-guy-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes about-chart-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Адаптив для планшетов/мобилок */

@media (max-width: 991.98px) {
  .aira-about-visual {
    max-width: 360px;
    margin-top: 2rem;
  }

  .experience-badge {
    /* при желании можно сместить бейдж */
    right: 1.5rem;
    bottom: 1.5rem;
  }
}