/* ============================================================
   pages/about.css — О проекте.
   Секции страницы:
   1. .about-hero  — видео-фон + оверлей #025491/90% + контент;
   2. .hero-slider — табы (Desktop: ряд; Tablet/Mobile: 2×2)
                     + панели с фон-изображением и тем же оверлеем.
   Mobile-first; брейкпоинты проекта 768 / 1025.
   ============================================================ */

/* ============================================================
   1. ABOUT HERO
   ============================================================ */
.about-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding-block: 48px;
  min-height: 480px;
  display: flex;
  align-items: center;
  isolation: isolate;
}

/* Слой 1 — медиа (видео + fallback фон-цвет на случай отсутствия файла) */
.about-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #025491;
}
.about-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Слой 2 — синий оверлей #025491/90% (точное значение из ТЗ) */
.about-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #025491;
  opacity: 0.9;
}

/* Слой 3 — контент поверх */
.about-hero__inner {
  position: relative;
  z-index: 1;
}

.about-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
}

.about-hero__title {
  color: #fff;
  margin: 0;
}

.about-hero__lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  line-height: 1.4;
  max-width: 540px;
}

/* Три преимущества: на mobile в столбик, ≥768 — в ряд */
.about-hero__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-block: 8px 4px;
  padding: 0;
  list-style: none;
}
.about-hero__feature {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.about-hero__feature-headline {
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: #fff;
}
.about-hero__feature-text {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

/* CTA: на mobile вертикально, ≥768 в ряд */
.about-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.about-hero__actions .btn {
  width: 100%;
}

@media (min-width: 768px) {
  .about-hero {
    padding-block: 80px;
    min-height: 560px;
  }
  .about-hero__lead {
    font-size: 20px;
  }
  .about-hero__features {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-block: 16px 8px;
  }
  .about-hero__feature-headline {
    font-size: 24px;
  }
  .about-hero__actions {
    flex-direction: row;
    gap: 16px;
  }
  .about-hero__actions .btn {
    width: auto;
  }
}

@media (min-width: 1025px) {
  .about-hero {
    padding-block: 120px;
    min-height: 640px;
  }
  .about-hero__content {
    gap: 28px;
  }
  .about-hero__feature-headline {
    font-size: 28px;
  }
  .about-hero__feature-text {
    font-size: 15px;
  }
}

/* ============================================================
   2. HERO SLIDER
   ============================================================ */
.hero-slider {
  background-color: var(--color-bg-site);
  padding-block: 40px;
}

/* ---- Табы ---- */
.hero-slider__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

.hero-slider__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background-color: var(--color-bg-elements);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-weight: var(--fw-semibold);
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.hero-slider__tab:hover,
.hero-slider__tab:focus-visible {
  color: var(--color-primary);
}
.hero-slider__tab.is-active {
  background-color: var(--color-primary);
  color: #fff;
}
.hero-slider__tab.is-active:hover,
.hero-slider__tab.is-active:focus-visible {
  background-color: var(--color-primary-hover);
  color: #fff;
}

/* ---- Контейнер панелей ---- */
.hero-slider__panels {
  position: relative;
  min-height: 320px;
}

/* ---- Панель ---- */
.hero-slider__panel {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.hero-slider__panel[hidden] {
  display: none;
}
.hero-slider__panel.is-active {
  opacity: 1;
}
/* fade-out быстрее, чем fade-in (по ТЗ) */
.hero-slider__panel.is-fading-out {
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
  opacity: 0;
}

/* Фоновое изображение слайда — пока CSS-градиент-плейсхолдер.
   TODO: заменить background-image на реальные ассеты в assets/img/ */
.hero-slider__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-slider__bg--1 {
  background-image: url('../../img/slider/slide-1.png');
}
.hero-slider__bg--2 {
  background-image: url('../../img/slider/slide-2.png');
}
.hero-slider__bg--3 {
  background-image: url('../../img/slider/slide-3.png');
}
.hero-slider__bg--4 {
  background-image: url('../../img/slider/slide-4.png');
}

/* Синий оверлей #025491/90% — поверх фотофона */
.hero-slider__overlay {
  position: absolute;
  inset: 0;
  background-color: #025491;
  opacity: 0.9;
}

/* Контент слайда */
.hero-slider__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 20px;
  color: #fff;
}
.hero-slider__heading {
  margin: 0;
  color: #fff;
}
.hero-slider__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
}

/* ---------- Tablet (768–1024) ---------- */
@media (min-width: 768px) {
  .hero-slider {
    padding-block: 60px;
  }
  .hero-slider__tabs {
    /* Tablet: сетка 2×2 — оставляем тот же grid */
    gap: 12px;
    margin-bottom: 28px;
  }
  .hero-slider__tab {
    min-height: 56px;
    padding: 12px 18px;
    font-size: 15px;
  }
  .hero-slider__panels {
    min-height: 420px;
  }
  .hero-slider__content {
    padding: 32px;
    gap: 16px;
  }
}

/* ---------- Desktop (≥1025) ---------- */
@media (min-width: 1025px) {
  .hero-slider {
    padding-block: 80px;
  }
  .hero-slider__tabs {
    /* Desktop: один горизонтальный ряд */
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-bottom: 32px;
  }
  .hero-slider__tab {
    flex: 1;
    min-height: 64px;
    padding: 14px 22px;
    font-size: 16px;
  }
  .hero-slider__panels {
    min-height: 520px;
  }
  .hero-slider__content {
    padding: 48px;
    gap: 20px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-slider__panel,
  .hero-slider__panel.is-fading-out {
    transition: none;
  }
  .about-hero__video {
    /* На некоторых системах reduced-motion подразумевает паузу видео;
       autoplay всё равно перехватит браузер, но мы явно подсказываем */
    display: none;
  }
}

/* ============================================================
   3. PLASTER PRO — текст + фото 3D-принтера
   ============================================================ */
.plaster-pro {
  padding: 60px 0;
}
.plaster-pro__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.plaster-pro__title {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 16px;
}
.plaster-pro__text {
  color: var(--color-text-main);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}
.plaster-pro__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

@media (min-width: 768px) {
  .plaster-pro { padding: 80px 0; }
  .plaster-pro__inner {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .plaster-pro__title { font-size: 32px; margin-bottom: 20px; }
  .plaster-pro__text  { font-size: 18px; line-height: 1.6; }
}
@media (min-width: 1025px) {
  .plaster-pro { padding: 100px 0; }
  .plaster-pro__inner { gap: 64px; }
  .plaster-pro__title { font-size: 36px; }
}

/* ============================================================
   4. SOLUTION CAROUSEL — «Решение УниДрайв в действии»
   ============================================================ */
.solution {
  padding: 60px 0;
}
.solution__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.solution__title {
  color: var(--color-primary);
  font-size: 24px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  margin: 0;
}
.solution__link {
  color: var(--color-primary);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.solution__link:hover,
.solution__link:focus-visible {
  color: var(--color-primary-hover);
}

.solution__carousel {
  position: relative;
}
.solution__track {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-elements);
}
.solution__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.solution__slide.is-active { opacity: 1; }
.solution__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.solution__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: var(--color-primary);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.solution__nav:hover,
.solution__nav:focus-visible { background: #fff; }
.solution__nav:active { transform: translateY(-50%) scale(0.95); }
.solution__nav--prev { left: 12px; }
.solution__nav--next { right: 12px; }

.solution__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.solution__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(2, 83, 145, 0.3);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.solution__dot.is-active {
  background: var(--color-primary);
  transform: scale(1.3);
}

@media (min-width: 768px) {
  .solution { padding: 80px 0; }
  .solution__title { font-size: 32px; }
  .solution__nav { width: 48px; height: 48px; font-size: 28px; }
}
@media (min-width: 1025px) {
  .solution { padding: 100px 0; }
  .solution__title { font-size: 36px; }
  .solution__nav--prev { left: 20px; }
  .solution__nav--next { right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .solution__slide,
  .solution__dot { transition: none !important; }
}

/* ============================================================
   5. DOCS — три карточки PDF
   ============================================================ */
.docs {
  padding: 60px 0;
}
.docs__title {
  color: var(--color-primary);
  font-size: 24px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  margin: 0 0 24px;
}
.docs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.docs__card {
  background: #fff;
  border: 1px solid rgba(2, 83, 145, 0.1);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .docs__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(2, 83, 145, 0.12);
    border-color: rgba(2, 83, 145, 0.25);
  }
}
.docs__icon {
  width: 36px;
  height: 36px;
  color: var(--color-primary);
}
.docs__icon svg { width: 100%; height: 100%; }
.docs__card-title {
  color: var(--color-primary);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  margin: 0;
}
.docs__card-text {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.docs__btn {
  align-self: flex-start;
  background: var(--color-primary);
  color: #fff;
  padding: 8px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  transition: background-color 0.2s ease;
}
.docs__btn:hover,
.docs__btn:focus-visible { background: var(--color-primary-hover); color: #fff; }
.docs__btn[data-todo="pdf"] {
  /* TODO: подключить реальные PDF-файлы — пока href="#" */
  cursor: pointer;
}

@media (min-width: 768px) {
  .docs { padding: 80px 0; }
  .docs__title { font-size: 32px; margin-bottom: 32px; }
  .docs__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
@media (min-width: 1025px) {
  .docs { padding: 100px 0; }
  .docs__title { font-size: 36px; }
  .docs__grid { gap: 24px; }
}

/* ============================================================
   6. TEAM — фото слева + список справа на синем фоне
   ============================================================ */
.team {
  background: var(--color-primary);
  color: #fff;
  padding: 60px 0;
}
.team__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.team__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.team__title {
  color: #fff;
  font-size: 28px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  margin: 0 0 24px;
}
.team__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.team__member {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.team__name {
  color: #fff;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  margin: 0;
}
.team__role {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
}

@media (min-width: 768px) {
  .team { padding: 80px 0; }
  .team__inner {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .team__title { font-size: 36px; margin-bottom: 32px; }
  .team__name  { font-size: 18px; }
  .team__list  { gap: 24px; }
}
@media (min-width: 1025px) {
  .team { padding: 100px 0; }
  .team__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .team__title { font-size: 40px; }
  .team__name  { font-size: 20px; }
  .team__role  { font-size: 16px; }
  /* Список — две колонки на широких экранах, чтобы заполнять пространство */
  .team__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
  }
}

/* Декоративное свечение по краям team-секции — заполняет пустые поля по бокам */
.team::before,
.team::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 180, 255, 0.18), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 0;
}
.team::before { left: -120px; }
.team::after  { right: -120px; }

/* ============================================================
   7. CONTACT DECOR — дубликат правил из pages/index.css.
   Нужен здесь, потому что about.html теперь тоже использует
   полноценную секцию .contact с орбами/сеткой/частицами,
   но pages/index.css на about.html не подключается.
   TODO: при следующем рефакторинге вынести в общий contact-shared.css.
   ============================================================ */
.contact__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.contact__decor-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.7;
  will-change: transform;
}
.contact__decor-orb--1 {
  width: 400px; height: 400px;
  top: -100px; left: -100px;
  background: radial-gradient(circle, rgba(80, 150, 255, 0.55), transparent 65%);
  animation: contactOrbFloat 12s ease-in-out infinite;
}
.contact__decor-orb--2 {
  width: 500px; height: 500px;
  bottom: -150px; right: -150px;
  background: radial-gradient(circle, rgba(2, 83, 145, 0.45), transparent 65%);
  animation: contactOrbFloat 14s ease-in-out infinite reverse;
}
.contact__decor-orb--3 {
  width: 350px; height: 350px;
  top: calc(50% - 175px);
  left: calc(35% - 175px);
  background: radial-gradient(circle, rgba(120, 180, 255, 0.4), transparent 70%);
  filter: blur(60px);
  opacity: 0.6;
  animation: contactOrbFloat 10s ease-in-out infinite 2s;
}
@keyframes contactOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, -40px) scale(1.15); }
  66%      { transform: translate(-30px, 50px) scale(0.95); }
}

.contact__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(2, 83, 145, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 83, 145, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  opacity: 0.5;
  animation: contactGridDrift 30s linear infinite;
  pointer-events: none;
  will-change: background-position;
}
@keyframes contactGridDrift {
  from { background-position: 0 0,       0 0; }
  to   { background-position: 60px 60px, 60px 60px; }
}

.contact__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.contact__particles span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(80, 150, 255, 0.7);
  box-shadow: 0 0 8px rgba(80, 150, 255, 0.5);
  will-change: transform, opacity;
}
.contact__particles span:nth-child(1) { top: 15%; left: 8%;  animation: contactParticle 8s   ease-in-out infinite;       }
.contact__particles span:nth-child(2) { top: 75%; left: 12%; animation: contactParticle 9s   ease-in-out infinite 1s;    }
.contact__particles span:nth-child(3) { top: 30%; left: 25%; animation: contactParticle 7s   ease-in-out infinite 2.5s;  }
.contact__particles span:nth-child(4) { top: 60%; left: 32%; animation: contactParticle 10s  ease-in-out infinite 0.5s;  }
.contact__particles span:nth-child(5) { top: 20%; left: 88%; animation: contactParticle 8s   ease-in-out infinite 3s;    }
.contact__particles span:nth-child(6) { top: 80%; left: 92%; animation: contactParticle 9s   ease-in-out infinite 1.5s;  }
.contact__particles span:nth-child(7) { top: 50%; left: 5%;  animation: contactParticle 7.5s ease-in-out infinite 4s;    }
.contact__particles span:nth-child(8) { top: 45%; left: 95%; animation: contactParticle 8.5s ease-in-out infinite 2s;    }
@keyframes contactParticle {
  0%, 100% { transform: translate(0, 0)        scale(1);   opacity: 0.3; }
  50%      { transform: translate(20px, -30px) scale(1.5); opacity: 1;   }
}

@media (max-width: 767px) {
  .contact__decor-orb--1 { width: 200px; height: 200px; top: -60px; left: -60px; }
  .contact__decor-orb--2 { width: 240px; height: 240px; bottom: -80px; right: -80px; }
  .contact__decor-orb--3 { display: none; }
  .contact__grid,
  .contact__particles { display: none; }
  .contact__decor-orb { filter: blur(50px); }
}
@media (prefers-reduced-motion: reduce) {
  .contact__decor-orb,
  .contact__grid,
  .contact__particles span {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   Финальные анимации новых секций
   ============================================================ */

/* Plaster-Pro: заголовок и текст слева, фото справа с zoom-in */
.plaster-pro.fade-in-up {
  /* Сама секция уже использует базовый fade-in-up — оставляем как есть */
}
.plaster-pro__content {
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.7s ease-out 0.1s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.plaster-pro__media {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.7s ease-out 0.2s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.plaster-pro.is-visible .plaster-pro__content {
  opacity: 1;
  transform: translateX(0);
}
.plaster-pro.is-visible .plaster-pro__media {
  opacity: 1;
  transform: scale(1);
}
.plaster-pro__media img {
  transition: transform 0.4s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .plaster-pro__media:hover img {
    transform: scale(1.03);
  }
}

/* Solution carousel — Ken Burns на активном слайде */
.solution__slide.is-active img {
  animation: solutionKenBurns 6s ease-out;
  will-change: transform;
}
@keyframes solutionKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
/* Точка active — пульсация */
.solution__dot.is-active {
  animation: solutionDotPulse 1.8s ease-in-out infinite;
}
@keyframes solutionDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(2, 83, 145, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(2, 83, 145, 0); }
}
/* Стрелки навигации — hover-scale (только на устройствах с указателем) */
@media (hover: hover) and (pointer: fine) {
  .solution__nav:hover {
    transform: translateY(-50%) scale(1.1);
  }
}

/* Docs cards: stagger entry + icon wobble на hover карточки */
.docs__card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
}
.docs.is-visible .docs__card {
  opacity: 1;
  transform: translateY(0);
}
.docs.is-visible .docs__card:nth-child(1) { transition-delay: 0s; }
.docs.is-visible .docs__card:nth-child(2) { transition-delay: 0.15s; }
.docs.is-visible .docs__card:nth-child(3) { transition-delay: 0.30s; }
@media (hover: hover) and (pointer: fine) {
  .docs__card:hover .docs__icon {
    animation: docsIconWobble 0.5s ease-in-out;
  }
}
@keyframes docsIconWobble {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-5deg); }
  75%      { transform: rotate(5deg); }
}

/* Team — фото слева slide-in, список — каждый член по очереди */
.team__media {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.team.is-visible .team__media {
  opacity: 1;
  transform: translateX(0);
}
.team__member {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.team.is-visible .team__member {
  opacity: 1;
  transform: translateX(0);
}
.team.is-visible .team__member:nth-child(1) { transition-delay: 0.20s; }
.team.is-visible .team__member:nth-child(2) { transition-delay: 0.30s; }
.team.is-visible .team__member:nth-child(3) { transition-delay: 0.40s; }
.team.is-visible .team__member:nth-child(4) { transition-delay: 0.50s; }
.team.is-visible .team__member:nth-child(5) { transition-delay: 0.60s; }

/* Звёзды на фоне team-секции */
.team {
  position: relative;
  overflow: hidden;
}
.team__inner { position: relative; z-index: 1; }
.team__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.team__stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(180, 220, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(180, 220, 255, 0.5);
  animation: teamTwinkle 3.5s ease-in-out infinite;
  will-change: opacity, transform;
}
.team__stars span:nth-child(1)  { left: 8%;  top: 18%; animation-delay: 0s;   animation-duration: 3s;   }
.team__stars span:nth-child(2)  { left: 18%; top: 70%; animation-delay: 0.5s; animation-duration: 4s;   width: 3px; height: 3px; }
.team__stars span:nth-child(3)  { left: 28%; top: 30%; animation-delay: 1.2s; animation-duration: 3.5s; }
.team__stars span:nth-child(4)  { left: 38%; top: 85%; animation-delay: 0.3s; animation-duration: 5s;   width: 1px; height: 1px; }
.team__stars span:nth-child(5)  { left: 48%; top: 12%; animation-delay: 1.8s; animation-duration: 3.8s; }
.team__stars span:nth-child(6)  { left: 58%; top: 55%; animation-delay: 0.8s; animation-duration: 4.2s; }
.team__stars span:nth-child(7)  { left: 68%; top: 22%; animation-delay: 2.1s; animation-duration: 3s;   }
.team__stars span:nth-child(8)  { left: 78%; top: 75%; animation-delay: 0.6s; animation-duration: 4.5s; width: 3px; height: 3px; }
.team__stars span:nth-child(9)  { left: 88%; top: 40%; animation-delay: 1.5s; animation-duration: 3.2s; }
.team__stars span:nth-child(10) { left: 92%; top: 88%; animation-delay: 0.2s; animation-duration: 4s;   }
.team__stars span:nth-child(11) { left: 5%;  top: 95%; animation-delay: 1.1s; animation-duration: 3.5s; }
.team__stars span:nth-child(12) { left: 95%; top: 8%;  animation-delay: 1.7s; animation-duration: 4.8s; }
@keyframes teamTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}

/* About-Hero entry stagger: фичи + кнопки по очереди */
.about-hero__feature {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.about-hero__content.fade-in-up.is-visible .about-hero__feature {
  opacity: 1;
  transform: translateY(0);
}
.about-hero__content.fade-in-up.is-visible .about-hero__feature:nth-child(1) { transition-delay: 0.50s; }
.about-hero__content.fade-in-up.is-visible .about-hero__feature:nth-child(2) { transition-delay: 0.62s; }
.about-hero__content.fade-in-up.is-visible .about-hero__feature:nth-child(3) { transition-delay: 0.74s; }

.about-hero__actions .btn {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.about-hero__content.fade-in-up.is-visible .about-hero__actions .btn {
  opacity: 1;
  transform: scale(1);
}
.about-hero__content.fade-in-up.is-visible .about-hero__actions .btn:nth-child(1) { transition-delay: 0.90s; }
.about-hero__content.fade-in-up.is-visible .about-hero__actions .btn:nth-child(2) { transition-delay: 1.00s; }

/* Hero Slider: волна появления табов при первом is-visible */
.hero-slider__tab {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, background-color 0.2s ease, color 0.2s ease;
}
.hero-slider.is-visible .hero-slider__tab {
  opacity: 1;
  transform: translateY(0);
}
.hero-slider.is-visible .hero-slider__tab:nth-child(1) { transition-delay: 0.05s; }
.hero-slider.is-visible .hero-slider__tab:nth-child(2) { transition-delay: 0.15s; }
.hero-slider.is-visible .hero-slider__tab:nth-child(3) { transition-delay: 0.25s; }
.hero-slider.is-visible .hero-slider__tab:nth-child(4) { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .plaster-pro__content,
  .plaster-pro__media,
  .plaster-pro__media img,
  .docs__card,
  .docs__card:hover .docs__icon,
  .team__media,
  .team__member,
  .team__stars span,
  .solution__slide.is-active img,
  .solution__dot.is-active,
  .solution__nav:hover,
  .about-hero__feature,
  .about-hero__actions .btn,
  .hero-slider__tab {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}