:root {
  color-scheme: dark;
  font: 16px/1.55 "Trebuchet MS", system-ui, sans-serif;
  background: #101614;
  color: #eff4e9;
}

* { box-sizing: border-box; }
body { margin: 0; border-top: .35rem solid #b7e393; }
main { width: min(66rem, 100% - 2.5rem); margin: clamp(3rem, 10vw, 8rem) auto; }
header { margin-bottom: 2.5rem; }
.host { color: #b7e393; letter-spacing: .15em; font: 700 .78rem/1.5 monospace; }
h1, h2 { line-height: 1.05; letter-spacing: -.04em; }
h1 { margin: .25rem 0 1rem; font-size: clamp(3rem, 10vw, 6.5rem); }
h2 { margin-top: 0; font-size: 1.8rem; }
p { color: #bdc8bc; }
.intro { max-width: 38rem; font-size: 1.15rem; }
.release { color: #b7e393; font: 600 .88rem/1.6 monospace; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1rem; }
section { display: flex; align-items: flex-start; flex-direction: column; padding: clamp(1.3rem, 4vw, 2.25rem); background: #1a2320; border: 1px solid #35463b; border-radius: .75rem; }
section p { margin: 0 0 1.75rem; }
.button { margin-top: auto; padding: .65rem 1rem; background: #b7e393; color: #172215; border: 1px solid #b7e393; border-radius: .3rem; font-weight: 700; text-decoration: none; }
.secondary-button { background: transparent; color: #d7edce; }
.secondary { margin-top: 1rem; color: #bdc8bc; text-underline-offset: .2em; }
a:focus-visible { outline: .2rem solid #eff4e9; outline-offset: .25rem; }
a:hover { filter: brightness(1.15); }