/* СДО ПРОФ — дополнения к Tailwind (то, что CDN не покрывает) */

@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
}

/* Скрываем полосу прокрутки, как в оригинальном дизайне */
::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }

/* Плавная прокрутка к якорям (с учётом фиксированной шапки) */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }

/* Material Symbols: базовый размер как в дизайне */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* <details>/<summary> — аккордеон FAQ без родного маркера */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
details[open] summary .material-symbols-outlined { transform: rotate(180deg); }
summary .material-symbols-outlined { transition: transform .2s ease; }

/* Слайдеры калькулятора в тёмной секции */
input[type="range"] { -webkit-appearance: none; appearance: none; outline: none; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 9999px;
  background: #ffffff; border: 3px solid #2563eb;
  cursor: pointer; box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 9999px;
  background: #ffffff; border: 3px solid #2563eb; cursor: pointer;
}

/* Состояния формы заявки */
.lead-topic input:checked + span { color: #004ac6; font-weight: 600; }
.lead-topic:has(input:checked) { background: #dce9ff; }
@supports not selector(:has(*)) {
  .lead-topic input:checked { outline: 2px solid #2563eb; }
}

/* Уведомление о результате отправки */
.form-note { display: none; }
.form-note.is-visible { display: block; }

/* ============================================================
   Фон hero-секции: анимированные пятна + парящие карточки
   ============================================================ */

/* Мягкие цветные пятна на фоне */
.hero-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: .65;
  pointer-events: none;
  will-change: transform;
}
.hero-orb-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(37,99,235,.45) 0%, rgba(37,99,235,0) 70%);
  top: -120px; left: -100px;
  animation: orbFloat1 18s ease-in-out infinite;
}
.hero-orb-2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(0,96,88,.35) 0%, rgba(0,96,88,0) 70%);
  top: 40px; right: -160px;
  animation: orbFloat2 22s ease-in-out infinite;
}
.hero-orb-3 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(107,216,203,.38) 0%, rgba(107,216,203,0) 70%);
  bottom: -140px; left: 12%;
  animation: orbFloat3 20s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, 30px) scale(1.08); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, 40px) scale(1.06); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -35px) scale(1.1); }
}

/* Парящие карточки-иконки по краям (видны на широких экранах) */
.hero-float {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  will-change: transform;
}
.hero-float.is-on { opacity: 1; }

.hero-float-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06);
  border: 2px solid rgba(219,225,255,1);
  color: #004ac6;
  transform: perspective(600px) rotateY(-10deg) rotateX(6deg);
}
.hero-float-inner .material-symbols-outlined { font-size: 30px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* разные акценты — как в дизайне системы */
.hf-2 .hero-float-inner { color: #006058; border-color: #89f5e7; }
.hf-5 .hero-float-inner { color: #5b598c; border-color: #e3dfff; }
.hf-6 .hero-float-inner { color: #2563eb; border-color: #dbe1ff; }

/* лёгкий 3D-наклон и разные скорости парения */
.hf-1 { top: 16%;  left: 4%;  animation: floatY 9s  ease-in-out infinite; }
.hf-2 { top: 46%;  left: 7%;  animation: floatY 11s ease-in-out infinite -1.5s; }
.hf-3 { top: 74%;  left: 3%;  animation: floatY 13s ease-in-out infinite -3s; }
.hf-4 { top: 20%;  right: 5%; animation: floatY 10s ease-in-out infinite -0.8s; }
.hf-5 { top: 50%;  right: 3%; animation: floatY 12s ease-in-out infinite -2.2s; }
.hf-6 { top: 78%;  right: 8%; animation: floatY 14s ease-in-out infinite -4s; }

@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-22px) rotate(3deg); }
}

/* На узких экранах карточки скрываем, чтобы не мешали тексту */
@media (max-width: 1279px) {
  .hero-float { display: none; }
}
/* На очень широких — раздвигаем чуть дальше от текста */
@media (min-width: 1700px) {
  .hf-1, .hf-2, .hf-3 { left: 6%; }
  .hf-4, .hf-5, .hf-6 { right: 6%; }
}

/* Уважаем настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .hero-orb, .hero-float { animation: none !important; }
}

/* ============================================================
   Бегущая строка логотипов клиентов
   ============================================================ */

.logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* мягкое затухание по краям */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: max-content;
  padding: 0.5rem 0;
}

.logo-track-left  { animation: marqueeLeft 70s linear infinite; }
.logo-track-right { animation: marqueeRight 80s linear infinite; }

@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* останавливаем ленту при наведении — чтобы можно было рассмотреть */
.logo-marquee:hover .logo-track { animation-play-state: paused; }

.logo-card {
  flex: 0 0 auto;
  width: 150px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
  border: 1px solid #eff4ff;
  transition: box-shadow .25s ease, transform .25s ease;
}
.logo-card:hover {
  box-shadow: 0 6px 18px rgba(15,23,42,.12);
  transform: translateY(-2px);
}
.logo-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(15%);
  transition: filter .25s ease;
}
.logo-card:hover img { filter: grayscale(0%); }

/* на мобильных карточки меньше */
@media (max-width: 640px) {
  .logo-card { width: 116px; height: 70px; padding: 0.5rem; }
  .logo-track { gap: 0.75rem; }
  .logo-track-left  { animation-duration: 50s; }
  .logo-track-right { animation-duration: 58s; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none !important; }
}

/* ============================================================
   Появление блоков при прокрутке
   ============================================================ */
/* Скрываем блоки ТОЛЬКО когда JS работает (класс anim-ready ставит скрипт).
   Если JS выключен или упал — контент виден всегда. */
.anim-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.anim-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   Кнопка «Наверх»
   ============================================================ */
.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 9999px;
  background: #004ac6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,74,198,.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .25s;
  z-index: 40;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #1D4ED8; }
.to-top .material-symbols-outlined { font-size: 24px; }

@media (max-width: 640px) {
  .to-top { right: 1rem; bottom: 1rem; width: 42px; height: 42px; }
}