:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0a0a0a;
  color: #fff8f3;
}

* { box-sizing: border-box; }

body { margin: 0; background: radial-gradient(circle at top right, #4b1734 0, #0a0a0a 42rem); }

main { width: min(100% - 2rem, 68rem); margin: 0 auto; padding: 5rem 0 6rem; }

.eyebrow { color: #75e6b6; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

h1 { margin: .25rem 0; font-size: clamp(3.5rem, 12vw, 8rem); line-height: .9; }

.lede { max-width: 48rem; color: #e8dce3; font-size: clamp(1.2rem, 3vw, 1.8rem); line-height: 1.45; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 5rem; }

a { color: inherit; }

.actions a { padding: .9rem 1.15rem; border: 1px solid #7e6172; border-radius: 999px; text-decoration: none; }
.actions .primary { border-color: #ef94c5; background: #ef94c5; color: #1c0d16; font-weight: 800; }

section { margin-top: 3rem; }
h2 { font-size: 1.7rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.grid a { min-height: 10rem; padding: 1.25rem; border: 1px solid #432e3b; border-radius: 1.25rem; background: rgba(23, 17, 21, .78); text-decoration: none; }
.grid strong, .grid span { display: block; }
.grid strong { margin-bottom: .65rem; color: #ef94c5; font-size: 1.1rem; }
.grid span, .status { color: #d6c8d0; line-height: 1.55; }

.status { padding: 1.5rem; border-left: .35rem solid #75e6b6; background: #101714; }

@media (prefers-reduced-motion: no-preference) {
  .grid a { transition: transform .16s ease, border-color .16s ease; }
  .grid a:hover { transform: translateY(-2px); border-color: #ef94c5; }
}