:root {
  --bg: rgb(185, 205, 165);
  --accent: rgba(103, 81, 97);
  --gray: rgb(135, 171, 157);
  --dark-gray: rgba(103, 81, 97);
  --transition-fast: 0.3s ease-out;
  --transition-slow: 0.6s cubic-bezier(.22,.61,.36,1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  color: var(--dark-gray);
  background-color: var(--bg);
}

main {
  height: 680px; 
  overflow: visible;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* общие анимации */
.reveal-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal-up--visible {
  opacity: 1;
  transform: translateY(0);
}