.btn { min-height: 56px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid transparent; border-radius: 4px; font-weight: 500; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; overflow: hidden; }
.btn--compact { min-height: 52px; padding-inline: 25px; }
.btn--primary { color: #fff; background: var(--green-950); }
.btn--primary:hover { background: #284333; transform: translateY(-2px) scale(1.015); }
.btn--outline { color: var(--green-950); background: rgba(255,255,255,.3); border-color: rgba(92,96,68,.6); }
.btn--outline:hover { background: #fff; border-color: var(--olive-700); transform: translateY(-2px) scale(1.015); }
.btn__arrow { display: inline-grid; place-items: center; transition: transform .28s ease; }
.btn:hover .btn__arrow { animation: arrow-loop .45s ease; }

.hero-pager { position: absolute; z-index: 6; right: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 34px; padding: 10px 0; border-radius: 999px; background: rgba(255,255,255,.90); border: 1px solid rgba(25,45,34,.08); box-shadow: 0 8px 22px rgba(25,45,34,.09); backdrop-filter: blur(4px); }
.hero-pager__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(25,45,34,.30); cursor: pointer; transition: height .25s ease, background .25s ease, opacity .25s ease; }
.hero-pager__dot:hover { background: rgba(25,45,34,.55); }
.hero-pager__dot.is-active { width: 7px; height: 20px; background: var(--green-950); }
.hero-pager__dot:focus-visible { outline: 2px solid rgba(25,45,34,.28); outline-offset: 3px; }