/* Resolution-independent color field and fluted highlights; no bitmap backdrop. */
html { background: #f4f3f9; }
body {
  color: #202340;
  --ambient-wave:
    radial-gradient(ellipse 26% 41% at 24% 45%, #000 10%, transparent 100%),
    radial-gradient(ellipse 30% 17% at 49% 63%, #000 15%, transparent 100%),
    radial-gradient(ellipse 28% 37% at 77% 58%, #000 12%, transparent 100%);
}
body::before {
  background:
    radial-gradient(ellipse 24% 33% at 79% 54%, #e59aef 0%, #b080fa99 48%, transparent 100%),
    radial-gradient(ellipse 26% 38% at 23% 46%, #7197ff 0%, #8071fbaa 50%, transparent 100%),
    radial-gradient(ellipse 32% 19% at 50% 64%, #8760f9 0%, #a994ff99 50%, transparent 100%);
  -webkit-mask-image: var(--ambient-wave);
  mask-image: var(--ambient-wave);
  transform-origin: center;
  will-change: transform, filter;
  animation: iridescent-hues 10s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    #ffffff00 0px, #ffffff70 3px, #ffffffa8 7px,
    #ffffff18 12px, #4848a018 17px, #ffffff00 22px);
  -webkit-mask-image: var(--ambient-wave);
  mask-image: var(--ambient-wave);
  will-change: transform, opacity;
  animation: iridescent-flow 12s ease-in-out infinite alternate;
}

@keyframes iridescent-hues {
  0% { transform: translate3d(-4%, -2%, 0) scale(1.08); filter: hue-rotate(-14deg) saturate(1.05); }
  50% { filter: hue-rotate(8deg) saturate(1.18); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.16); filter: hue-rotate(28deg) saturate(1.08); }
}
@keyframes iridescent-flow {
  0% { transform: translate3d(-5px, -1%, 0); opacity: .75; }
  50% { opacity: 1; }
  100% { transform: translate3d(5px, 2%, 0); opacity: .85; }
}

/* Contrast on the light backdrop; text inside the dark panels stays light. */
main .title, .platform__title { color: #202340; }
.work .title { color: #f4f8ff; }
.platform__title span, main .title span { color: #6538c4; }
.platform__title-cursor { background: #6538c4; }
.platform__subtitle { color: #4e4b6b; text-shadow: none; }
.hero .by-dauletten.mobile-only { color: #34344f; }
.subject__tag {
  color: #5934ad;
  background: rgba(255, 255, 255, .8);
  border-color: rgba(114, 77, 181, .2);
}
.contact__item-title { color: #202340; }
.contact__item a, .contact__item span { color: #4e4b6b; }
.contact__item a:hover { color: #6538c4; }
.header { background: rgba(3, 12, 37, .94); }
.work, .footer { background: rgba(3, 14, 42, .94); }
.work__title { color: #f4f8ff; }
.platform__item, .subject__item, .teacher__slide, .faq__main-accordeon,
.tarif__item, .privacy-section .content { background: rgba(4, 19, 54, .94); }

.teacher__slider .swiper-wrapper {
  transition-timing-function: cubic-bezier(.45, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  body::before { filter: none; transform: none; }
  body::after { opacity: .65; }
}

/* Floating header island; existing navigation and fixed positioning are retained. */
.header {
  top: 12px;
  left: 12px;
  right: 12px;
  max-width: 1272px;
  margin-inline: auto;
  border: 1px solid rgba(191, 207, 255, .2);
  border-radius: 26px;
  background: rgba(3, 12, 37, .82);
  box-shadow: 0 10px 28px rgba(10, 17, 46, .15);
}
.header-space { padding-top: 110px; }
@media (max-width: 1280px) {
  .header-space { padding-top: 76px; }
}
@media (max-width: 480px) {
  .header { top: 10px; left: 10px; right: 10px; border-radius: 22px; }
  .header > .container { padding-inline: 14px; }
  .header__logo { width: 130px; }
  .header__login { padding-inline: 24px; }
  .header .burger { margin-left: 16px; }
}