/* ---------- RESET & GLOBAL ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scrollbar-gutter: stable;
}
body {
  background: var(--dar-bg-base);
  font-family: var(--dar-font-sans);
  color: var(--dar-text-primary);
  line-height: var(--dar-lh-relaxed);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
}

/* ---------- КОНТЕЙНЕРЫ ---------- */
.container {
  max-width: var(--dar-container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dar-space-xl);
  padding-right: var(--dar-space-xl);
}
@media (max-width: var(--dar-breakpoint-md)) {
  .container {
    padding-left: var(--dar-space-lg);
    padding-right: var(--dar-space-lg);
  }
}

/* ---------- АНИМАЦИИ ---------- */
@keyframes fadeUp {
  from { opacity: var(--dar-opacity-zero); transform: translateY(var(--dar-animation-translate-y)); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp var(--dar-transition-normal) ease forwards;
}