@font-face {
  font-family: "Gotham";
  src: url("./mockups/assets/fonts/gotham-book.otf") format("opentype");
  font-weight: 400;
}

:root {
  color-scheme: dark;
  --ink: #f4f0e8;
  --muted: #a6adb5;
  --line: rgba(244, 240, 232, 0.16);
  --accent: #f2b54b;
  --bg: #101416;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 70% 10%, #20343b 0, var(--bg) 43%); color: var(--ink); font-family: Gotham, Arial, sans-serif; }
.hub-shell { width: min(880px, calc(100% - 48px)); margin: 0 auto; padding: 16vh 0; }
.eyebrow { color: var(--accent); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
h1 { max-width: 680px; margin: 18px 0; font-size: clamp(48px, 8vw, 96px); line-height: .94; letter-spacing: -.05em; font-weight: 400; }
.intro { max-width: 560px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.module-link { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 72px; padding: 26px 0; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.module-link strong, .module-link small { display: block; }
.module-link strong { font-size: 24px; font-weight: 400; }
.module-link small { margin-top: 8px; color: var(--muted); font-size: 14px; }
.arrow { color: var(--accent); font-size: 32px; }
.module-link:hover strong { color: var(--accent); }