/* Основной контейнер */
.cosmic-block {
  position: relative;
  width: 100%;
  height: 460px;
  background: #7F543D;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Стеклянная плашка — Apple Style */
.glass-panel {
  position: relative;
  width: 70%;
  height: 250px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 32px;
  overflow: hidden;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
}

/* Apple Glass Border Layer */
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.20),
    inset 0 0 6px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

/* Верхний Apple highlight */
.glass-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  opacity: 0.22;
  pointer-events: none;
}

/* Текст */
.glass-content {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 400;
  color: #FFFFFF;
  text-align: left;
  position: relative;
  z-index: 20;
}

/* Чёткие мягкие градиентные шары — объединённый вариант */
.sphere {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  transition: transform 0.1s linear;

  /* === Градиент 100% как на референсе === */
  background: radial-gradient(circle at 50% 35%,
    #fff7ed 0%,      /* свет сверху */
    #f7e2c9 32%,     /* мягкий переход */
    #e6c5a0 60%,     /* тёплый центр */
    #cfae8b 78%,     /* затемнение ближе к низу */
    #b89272 100%     /* тёплая тень по краю */
  );

  /* Мягкое матовое свечение */
  filter: blur(0.2px);

  /* Лёгкая тень снизу — как на референсе */
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.10);
}


/* Позиции левой тройки */
.s1 { top: -20px; left: 6%; width: 200px; height: 200px; }
.s2 { top: 120px; left: -70px; width: 170px; height: 170px; }
.s3 { bottom: -60px; left: 14%; width: 180px; height: 180px; }

/* Позиции правой тройки */
.s4 { top: -30px; right: 7%; width: 200px; height: 200px; }
.s5 { top: 130px; right: -60px; width: 170px; height: 170px; }
.s6 { bottom: -70px; right: 16%; width: 220px; height: 220px; }