.philosophy {
  position: relative;
}

.philosophy::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block: 18% 10%;
  margin: auto;
  inline-size: min(88vw, 980px);
  block-size: min(65vw, 380px);
  border-radius: var(--radius-large);
  background:
    linear-gradient(125deg, rgba(124, 58, 237, 0.05), rgba(14, 165, 233, 0.03)),
    linear-gradient(transparent 98%, rgba(124, 58, 237, 0.08) 99%),
    linear-gradient(90deg, transparent 98%, rgba(124, 58, 237, 0.08) 99%);
  background-size: auto, 26px 26px, 26px 26px;
  pointer-events: none;
}

.philosophy__inner {
  position: relative;
  border: 1px solid rgba(229, 231, 235, 0.9);
  border-radius: var(--radius-large);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft-sm);
  padding: 1.5rem 1.1rem;
  display: grid;
  gap: 1.2rem;
  text-align: center;
}

.philosophy__headline {
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  color: #5b21b6;
}

.philosophy__slider {
  position: relative;
  min-block-size: 86px;
  display: grid;
  place-items: center;
}

.philosophy__slide {
  position: absolute;
  inset: 0;
  margin: auto;
  max-inline-size: 42rem;
  display: grid;
  place-items: center;
  font-size: clamp(1.3rem, 4.4vw, 2rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-text-main);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.philosophy__slide--active {
  opacity: 1;
  transform: translateY(0);
}

.philosophy__slide--leaving {
  opacity: 0;
  transform: translateY(-10px);
}

.philosophy__slide--entering {
  opacity: 1;
  transform: translateY(0);
}

.philosophy__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.philosophy__dot {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  border: 0;
  background: rgba(107, 114, 128, 0.35);
  cursor: pointer;
  transition: transform var(--transition-soft), background-color var(--transition-soft);
}

.philosophy__dot--active {
  background: var(--color-primary);
  transform: scale(1.2);
}

@media (min-width: 48rem) {
  .philosophy__inner {
    padding: 2.2rem 1.9rem;
    gap: 1.35rem;
  }

  .philosophy__slider {
    min-block-size: 110px;
  }
}