/* ═══════════ СЕКЦИИ ═══════════ */

.sec { padding: clamp(80px, 11vw, 150px) 0; position: relative }

/* ─── Лента каналов ──────────────────────────────────────────
   Едет своим ходом, при наведении почти останавливается —
   человек может прочитать, не гоняясь за строкой. */
.marquee-sec { padding: 26px 0; border-block: 1px solid var(--line); overflow: hidden }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.marquee-row {
  display: flex; align-items: center; gap: 30px;
  width: max-content;
  animation: run 34s linear infinite;
}
.marquee:hover .marquee-row { animation-duration: 90s }
@keyframes run { to { transform: translateX(-50%) } }
.marquee-row span {
  font-size: clamp(20px, 2.4vw, 30px); font-weight: 500;
  letter-spacing: -.02em; color: var(--ink-3);
  transition: color .4s var(--ease);
}
.marquee-row span:hover { color: var(--ink) }
.marquee-row i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: 0 0 auto }

/* ─── Цифры ──────────────────────────────────────────────────
   Считают вверх, когда попадают в экран. Цифра, которая просто
   стоит, не читается как достижение. */
.nums {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
.num b {
  display: block;
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 500; line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.num span { display: block; margin-top: 10px; color: var(--ink-2); font-size: 15px; max-width: 20ch }

/* ─── Стопка карточек ────────────────────────────────────────
   Липкое позиционирование: карточка встаёт у верха и ждёт, пока
   следующая наедет сверху. Прежняя в это время уменьшается —
   получается колода, которую сдают в руку. */
.stack { margin-top: clamp(40px, 6vw, 80px) }

.card-s {
  position: sticky;
  /* каждая следующая липнет чуть ниже — видны корешки прежних */
  top: calc(96px + var(--i) * 16px);
  padding-bottom: 22px;
}
.card-in {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3.6vw, 48px);
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: 30px; align-items: center;
  min-height: clamp(240px, 30vw, 320px);
  box-shadow: 0 30px 70px -50px rgba(14,18,32,.5);
  transform-origin: top center;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.card-txt .mono { display: block; margin-bottom: 14px }
.card-txt p { color: var(--ink-2); margin: 14px 0 0; max-width: 46ch; font-size: 16px }

.card-art {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-l);
  background: linear-gradient(150deg, #EEF0F6, #E4E7F1);
  display: grid; place-items: center;
  overflow: hidden;
}
/* Картинка вставляется целиком: каменная рамка нарисована в ней самой,
   а вокруг рамки — прозрачность. Поэтому ни подложки, ни обрезки:
   любая обрезка съедала бы рамку и ломала задумку. Пропорции блока
   равны пропорциям файла, чтобы contain не оставлял пустых полей. */
.card-art-photo {
  background: none;
  overflow: visible;
  /* Пропорции задаёт сама картинка: одна из них горизонтальная, другая
     квадратная. Жёсткое соотношение на блоке пришлось бы держать
     отдельным правилом под каждую и следить, чтобы они не разъехались. */
  aspect-ratio: auto;
}
.card-art-photo img {
  display: block; width: 100%; height: auto;
  /* Углы скруглены в самих файлах, но не у всех есть прозрачность.
     Дублируем радиусом: на белой карточке разницы не видно, а на любом
     другом фоне углы не превратятся в белые уголки. */
  border-radius: var(--r-l);
}

.card-art b {
  position: relative; z-index: 2;
  font-size: clamp(24px, 3vw, 38px); font-weight: 500; letter-spacing: -.03em;
}
/* пятно, которое медленно ходит внутри плашки */
.art-glow {
  position: absolute; inset: -30%;
  background: radial-gradient(38% 38% at 50% 50%, rgba(59,73,223,.5), transparent 70%);
  filter: blur(14px);
  animation: wander 11s var(--ease-soft) infinite;
}
.card-s:nth-child(2) .art-glow { background: radial-gradient(38% 38% at 50% 50%, rgba(201,242,77,.75), transparent 70%) }
.card-s:nth-child(4) .art-glow { background: radial-gradient(38% 38% at 50% 50%, rgba(201,242,77,.6), transparent 70%) }
@keyframes wander {
  0%,100% { transform: translate(-12%, -8%) }
  33%     { transform: translate(14%, 10%) }
  66%     { transform: translate(6%, -14%) }
}

/* ─── Демонстрация кабинета ───────────────────────────────────
   Стили самой демонстрации живут в v3-demo.css: там она собрана
   по образцу настоящего кабинета. Здесь только её место в потоке
   страницы, иначе правила задваивались и спорили друг с другом. */

.demo-sec .lead { margin-top: 16px }
.demo-sec .demo { margin-top: clamp(28px, 4vw, 48px) }

@media (max-width: 980px) {
  .nums { grid-template-columns: repeat(2, 1fr); gap: 30px 20px }
  .card-in { grid-template-columns: 1fr; min-height: 0 }
  .card-art { aspect-ratio: 16/7 }
  /* У картинок свои пропорции — полоса 16/7 к ним не применяется. */
  .card-art-photo { aspect-ratio: auto }
  .card-s { top: calc(80px + var(--i) * 10px) }
}