/* ==========================================================================
   RhythmMen — раскладка: контейнер, секции, сетки
   Отступы по макету: секции ~120px на десктопе, ~64px на мобильном.
   ========================================================================== */

.ds-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ds-container--narrow { max-width: calc(820px + var(--gutter) * 2); }

.ds-section { padding-block: clamp(var(--space-8), 5vw + 24px, var(--space-10)); position: relative; }
.ds-section--tight { padding-block: clamp(var(--space-7), 4vw + 16px, var(--space-9)); }
.ds-section--deep { background: var(--color-bg-deep); }
.ds-section--elevated { background: rgba(255, 255, 255, .025); border-block: 1px solid var(--color-border); }

.ds-section-head { max-width: 780px; margin-bottom: clamp(var(--space-6), 4vw, var(--space-8)); }
.ds-section-head--center { margin-inline: auto; text-align: center; }
.ds-section-head p { margin-top: var(--space-4); font-size: var(--fs-lead); color: var(--color-text); }

.ds-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-highlight);
}

.ds-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.ds-split { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .ds-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
  .ds-split--reverse > :first-child { order: 2; }
}

.ds-stack > * + * { margin-top: var(--space-4); }
.ds-cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Декор: звезда и глобус из макета, приглушённые */
.ds-decor {
  position: absolute; pointer-events: none; opacity: .07; color: #fff; z-index: 0;
}
.ds-decor--star { width: clamp(180px, 28vw, 420px); left: -6%; bottom: -8%; }
.ds-decor--globe { width: clamp(180px, 24vw, 360px); left: -4%; top: 10%; }
.ds-section > .ds-container { position: relative; z-index: 1; }