@import "./base/variables.css";
@import "./base/reset.css";
@import "./base/typography.css";
@import "./components/hero.css";
@import "./layout/header.css";
@import "./layout/footer.css";
@import "./layout/grid.css";
@import "./components/buttons.css";
@import "./components/burger.css";
@import "./components/sections.css";
@import "./components/pricing.css";
@import "./components/floating-cta.css";

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

.landing-section {
  background: rgba(7, 20, 11, 0.8);
}

.landing-section:nth-of-type(even) {
  background: rgba(8, 21, 14, 0.92);
}

.landing-section .section-grid > *:first-child {
  color: var(--color-sand);
}

.section-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 960px) {
  .hero__content {
    padding: 0 var(--space-lg);
  }

  .section-detail {
    gap: var(--space-lg);
  }
}

.site-shell {
  background: var(--color-forest);
}

footer {
  background: linear-gradient(
    180deg,
    rgba(11, 14, 12, 0.95),
    rgba(15, 33, 27, 0.95)
  );
  padding: var(--space-xxl) var(--space-md);
  color: var(--color-neutral);
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer .footer-inner {
  width: min(100%, var(--max-content-width));
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

footer section {
  margin-bottom: var(--space-lg);
}

footer h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: var(--space-xs);
  color: var(--color-sunlight);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-xs);
}

footer a {
  color: var(--color-neutral);
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover,
footer a:focus-visible {
  color: var(--color-sunlight);
}

footer p {
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}

.footer-credits {
  width: min(100%, var(--max-content-width));
  margin: 0 auto;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
  text-align: center;
}

.footer-credits p {
  margin: 0;
  color: var(--color-neutral);
}

.footer-credits a {
  color: var(--color-sunlight);
}

@media (min-width: 960px) {
  footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  footer section {
    margin-bottom: 0;
  }
}