/* ============================================================
   УТИЛИТЫ — повторяемые правила. Только то, что реально
   используется по всему сайту. Не раздувать.
   ============================================================ */
.container {
  margin: 0 auto;
  max-width: var(--container);
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--sp-8) 0;
}

/* Кнопки */
.btn {
  align-items: center;
  border: none;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 500;
  gap: var(--sp-2);
  padding: 8px 22px;
  text-decoration: none;
  transition: background var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--color-amber-400);
  color: var(--color-olive-950);
  padding: 6px 16px;
  font-size: 13px;
}

.btn--primary:hover {
  background: var(--color-bone-100);
  color: var(--color-olive-950);
}

.btn--secondary {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-accent);
  color: var(--color-accent);
  padding: 8px 18px;
}

.btn--secondary:hover {
  background: #8b926933;
  color: rgb(255 255 255 / 63%);
}

.btn--danger {
  background: var(--color-danger);
  color: var(--color-white);
}

/* Карточка */
.card {
  backdrop-filter: blur(18px) saturate(120%);
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Скрыть визуально, оставить для скринридеров */
.visually-hidden {
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}