:root {
  --lime: #beee11;
  --ink: #10150c;
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--ink);
  color: #f8faef;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
.home { position: relative; isolation: isolate; }

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  z-index: -2;
}

.home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgb(10 15 6 / 65%), transparent 25%),
    linear-gradient(90deg, rgb(10 15 6 / 94%) 0%, rgb(10 15 6 / 83%) 30%, rgb(10 15 6 / 34%) 58%, rgb(10 15 6 / 5%) 100%);
}

main {
  max-width: 1600px;
  min-height: 100svh;
  margin: auto;
  padding: 40px clamp(24px, 6vw, 96px) 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--lime);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
}

.activity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 104px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid rgb(190 238 17 / 55%);
  border-radius: 999px;
  background: rgb(16 21 12 / 72%);
  backdrop-filter: blur(12px);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.activity[hidden] { display: none; }
.activity svg { width: 19px; height: 19px; flex: none; animation: activity-pulse 3s ease-in-out infinite; }
[data-activity-count] { min-width: 5ch; text-align: right; }
@keyframes activity-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .activity svg { animation: none; } }

.hero-copy { margin-block: auto; padding-block: 80px; }
h1 {
  margin: 64px 0 32px;
  font-size: clamp(60px, 9vw, 132px);
  line-height: .94;
  font-weight: 700;
  letter-spacing: -.065em;
}
.hero-copy h1 { margin-top: 0; }
.accent { color: var(--lime); }
p {
  max-width: 390px;
  margin: 0;
  color: #ecf0e4;
  font-size: clamp(18px, 1.65vw, 23px);
  line-height: 1.55;
  text-wrap: pretty;
}

footer {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgb(248 250 239 / 25%);
  color: #ecf0e4;
  font-size: 12px;
  letter-spacing: .08em;
}
footer::before { content: ""; width: 6px; height: 6px; background: var(--lime); border-radius: 50%; }

@media (max-width: 640px) {
  main { min-height: max(780px, 100svh); padding: 24px 24px 28px; }
  .hero-image {
    top: 26%;
    height: 74%;
    object-position: 62% center;
    mask-image: linear-gradient(180deg, transparent, #000 18%);
  }
  .home::before {
    background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 24%, rgb(16 21 12 / 88%) 37%, rgb(16 21 12 / 38%) 57%, rgb(16 21 12 / 5%) 74%, rgb(16 21 12 / 80%) 100%);
  }
  .hero-copy { margin: 48px 0 auto; padding: 0 0 220px; }
  h1 { font-size: clamp(58px, 14vw, 86px); margin-bottom: 24px; }
  p { max-width: 32ch; font-size: 18px; }
  .brand { font-size: 12px; }
  .activity { min-width: 96px; min-height: 36px; padding: 7px 11px; font-size: 13px; }
}