:root {
  --forest: #0f3e2f;
  --lake: #0a3a55;
  --lake-purple: #3b1f4a;
  --mist: #d6f3ea;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "DM Sans", Arial, sans-serif;
  background: linear-gradient(160deg, var(--forest), var(--lake), var(--lake-purple));
  color: #ecfff8;
}

.heading-font {
  font-family: "Jost", Arial, sans-serif;
}

.glass {
  background: rgba(6, 16, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.hero-overlay {
  background: linear-gradient(180deg, rgba(5, 24, 24, 0.2), rgba(5, 24, 24, 0.95));
}

@media (max-width: 640px) and (orientation: portrait) {
  .hero-overlay {
    background: linear-gradient(180deg, rgba(5, 24, 24, 0.55), rgba(5, 24, 24, 0.92));
  }
}

.orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.6;
  mix-blend-mode: screen;
}

.section-border {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gradient-band-1 {
  background: linear-gradient(
    160deg,
    var(--forest) 0%,
    var(--lake) 25%,
    var(--lake-purple) 60%,
    var(--lake) 75%,
    var(--forest) 89%
  );
}

.gradient-band-2 {
  background: linear-gradient(
    160deg,
    var(--forest) 13%,
    var(--lake) 35%,
    var(--lake-purple) 68%
  );
}

.site-header {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.site-header.is-hidden {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.ticker {
  animation: ticker 18s linear infinite;
}

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