:root {
  --clickable-shadow: 0 12px 30px rgba(0, 79, 45, .12);
  --clickable-shadow-strong: 0 16px 38px rgba(0, 79, 45, .16);
  --clickable-ring: 0 0 0 3px rgba(0, 107, 60, .18);
}

:where(a, button, summary, [role="button"], .btn, .lang-option, .brand, .hero-arrow) {
  cursor: pointer;
}

:where(a, button, summary, .btn, .lang-option, .brand, .card, .product, .feature, .machine, .advantage, .milestone) {
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

.links a:hover,
footer a:hover,
.foot a:hover,
.contact a:hover,
.panel a:hover,
.card a:hover,
.cta a:hover {
  color: var(--green, #006b3c) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

:where(.links a, footer a, .foot a, .brand, .btn, .lang-option, summary, .card a, .panel a):focus-visible {
  outline: none;
  box-shadow: var(--clickable-ring);
  border-radius: 8px;
}

.brand:hover {
  opacity: .92;
}

.btn:hover {
  background: var(--green2, #004f2d) !important;
  box-shadow: var(--clickable-shadow) !important;
  transform: translateY(-1px) !important;
}

.btn.outline:hover {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .78) !important;
}

.language-switcher:hover {
  border-color: rgba(0, 107, 60, .62) !important;
  box-shadow: 0 8px 20px rgba(0, 79, 45, .08) !important;
}

.lang-option:hover {
  background: rgba(0, 107, 60, .09) !important;
  color: var(--green2, #004f2d) !important;
}

.lang-option.active:hover {
  background: var(--green2, #004f2d) !important;
  color: #fff !important;
}

:where(.card:has(a[href]), .product:has(a[href]), .feature:has(a[href]), .machine:has(a[href]), .milestone:has(a[href])) {
  cursor: pointer;
}

.card:has(a[href]):hover,
.product:has(a[href]):hover,
.feature:has(a[href]):hover,
.machine:has(a[href]):hover,
.milestone:has(a[href]):hover {
  border-color: rgba(0, 107, 60, .42) !important;
  box-shadow: var(--clickable-shadow) !important;
  transform: translateY(-2px) !important;
}

.card:has(a[href]):hover img {
  opacity: .96;
}

:where(summary) {
  min-height: 44px;
}

details[open] summary,
summary:hover {
  color: var(--green2, #004f2d);
}

@media (hover: none) {
  :where(.btn, .card:has(a[href]), .product:has(a[href]), .feature:has(a[href]), .machine:has(a[href]), .milestone:has(a[href])):hover {
    transform: none;
    box-shadow: none;
  }
}

@media (max-width: 900px) {
  :where(.btn, .lang-option, .links a, .card a, .panel a, summary) {
    min-height: 44px;
  }

  :where(.btn, .card a, .panel a) {
    display: inline-flex;
    align-items: center;
  }
}