:root {
  color-scheme: light;
  --page: #f6f5f1;
  --ink: #111311;
  --muted: #5d665f;
  --line: rgba(17, 19, 17, 0.08);
  --accent: #1c7c54;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 16% 18%, rgba(28, 124, 84, 0.12), transparent 26%),
    radial-gradient(circle at 84% 22%, rgba(111, 126, 117, 0.12), transparent 24%),
    linear-gradient(180deg, #faf9f6 0%, var(--page) 100%);
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
}

.landing-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 32px;
}

.hero-noise {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17, 19, 17, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 17, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
  pointer-events: none;
}

.hero {
  position: relative;
  min-height: calc(100vh - 64px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  transform: translateY(-6vh);
}

.hero-kicker {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-logo {
  width: min(48vw, 440px);
  height: auto;
  opacity: 0.94;
  filter:
    saturate(0.88)
    drop-shadow(0 28px 60px rgba(17, 19, 17, 0.12));
}

.hero-copy-block {
  width: min(760px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: -8px;
  text-align: center;
}

.hero-copy-block h1 {
  margin: 0;
  font-size: clamp(3.4rem, 8vw, 7.2rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  font-weight: 600;
}

.hero-copy {
  margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.2;
  font-weight: 500;
}

.hero-subcopy {
  margin: 0;
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.5;
}

.hero-preview-mark {
  margin-top: 18px;
  color: #19232d;
  font-size: clamp(4.5rem, 9vw, 8rem);
  line-height: 0.8;
  font-weight: 500;
  letter-spacing: -0.08em;
  opacity: 0.92;
  text-shadow: 0 18px 40px rgba(25, 35, 45, 0.08);
}

.hero-path {
  margin: -4px 0 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.96rem;
  letter-spacing: 0.01em;
}

.hero-path span {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 720px) {
  .landing-shell {
    padding: 20px;
  }

  .hero {
    min-height: calc(100vh - 40px);
    transform: translateY(-4vh);
  }

  .hero-logo {
    width: min(78vw, 380px);
  }
}