:root { --night: #0C1524; --panel: #132036; --moon: #EFE6D2; --amber: #E3A75E; --muted: #9AA3B2; --line: #26375A; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); color: var(--moon); font: 18px/1.65 "Cormorant Garamond", Georgia, serif; }
a { color: var(--amber); }
.hero { min-height: 72vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 16px;
  background: linear-gradient(rgba(12,21,36,.35), rgba(12,21,36,.85)), url(rooftops.jpg) center/cover no-repeat; }
.hero img { width: 96px; height: auto; }
.hero h1 { font-size: clamp(44px, 9vw, 76px); font-weight: 600; margin: 8px 0 4px; line-height: 1.05; }
.hero h1 em { color: var(--amber); font-weight: 500; }
.hero p { font: 600 14px/1.5 "Courier Prime", ui-monospace, monospace; letter-spacing: 1.5px; text-transform: uppercase; color: var(--moon); margin: 10px 0 28px; }
.btn { display: inline-block; background: var(--amber); color: #1B1408; text-decoration: none; font: 700 16px/1 -apple-system, "Segoe UI", sans-serif; padding: 14px 22px; border-radius: 999px; }
main { max-width: 720px; margin: 0 auto; padding: 40px 16px 24px; }
main h1 { font-size: 40px; font-weight: 600; margin: 0 0 4px; } main h2 { font-size: 26px; font-weight: 600; margin: 34px 0 8px; color: var(--amber); }
.meta { color: var(--muted); font: 14px/1.5 -apple-system, "Segoe UI", sans-serif; }
li { margin-bottom: 6px; }
footer { border-top: 1px solid var(--line); max-width: 720px; margin: 40px auto 0; padding: 20px 16px 40px; display: flex; gap: 18px; flex-wrap: wrap; font: 14px/1.5 -apple-system, "Segoe UI", sans-serif; color: var(--muted); }
footer a { color: var(--muted); }