:root {
  --color-primary: #17a345;
  --color-primary-hover: #148a3b;
  --color-primary-gradient: linear-gradient(90deg, #106f30 0%, #17a345 100%);
  --color-bg-dark: #111a16;
  --color-text-main: #25302c;
  --color-border: #dbe3df;
}

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

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--color-text-main);
  background: #ffffff;
}

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

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

[data-animate] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.animate-scroll-left {
  animation: scrollLeft 35s linear infinite;
  width: max-content;
}

.animate-scroll-right {
  animation: scrollRight 35s linear infinite;
  width: max-content;
}

.site-nav.nav-dark {
  background: rgba(21, 29, 26, 0.35);
  color: #ffffff;
}

.site-nav.nav-light {
  background: rgba(255, 255, 255, 0.92);
  color: #151d1a;
  border-color: #dbe3df;
  box-shadow: var(--shadow-sm);
}

.nav-link {
  color: inherit;
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-icon-btn {
  color: inherit;
  border: 1px solid currentColor;
}

.nav-icon-btn:hover {
  transform: scale(1.1);
}

.nav-cta {
  background: var(--color-primary);
  color: #ffffff;
}

.nav-cta:hover {
  filter: brightness(1.1);
}

@media (min-width: 1024px) {
  .workflow-expand {
    display: flex;
    width: 100%;
  }

  .workflow-expand .workflow-item {
    flex: 1 1 0;
    min-width: 0;
    transition: flex 0.45s ease;
  }

  .workflow-expand:hover .workflow-item {
    flex: 0.9 1 0;
  }

  .workflow-expand .workflow-item:hover {
    flex: 1.3 1 0;
  }
}