:root {
  color-scheme: dark;
  --background: #0c0b10;
  --background-deep: #141117;
  --surface: #19161c;
  --surface-raised: #211d24;
  --border: #383139;
  --text: #f1e8dc;
  --muted: #c7bbb0;
  --primary: #c9a86a;
  --on-primary: #21170a;
  --secondary: #b24f5f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -10%, rgba(178, 79, 95, .18), transparent 38rem),
    var(--background);
  color: var(--text);
  line-height: 1.65;
}

a { color: var(--primary); }
a:hover { color: #e0c38e; }

.wrap { width: min(100% - 40px, 760px); margin: 0 auto; }

header {
  border-bottom: 1px solid var(--border);
  background: rgba(12, 11, 16, .82);
  backdrop-filter: blur(16px);
}

nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: .08em; }
.links { display: flex; gap: 18px; font-size: 14px; }
.links a { color: var(--muted); text-decoration: none; }
.links a:hover { color: var(--text); }

main { padding: 72px 0 88px; }
h1, h2, h3 { font-family: Sora, Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1.2; }
h1 { margin: 0 0 20px; font-size: clamp(36px, 8vw, 64px); letter-spacing: -.04em; }
h2 { margin-top: 44px; font-size: 24px; }
h3 { margin-top: 28px; font-size: 18px; }
p, li { color: var(--muted); }
.lead { max-width: 650px; font-size: 19px; }
.eyebrow { color: var(--primary); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.card { margin-top: 32px; padding: 28px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.card h2, .card h3 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.grid .card { margin: 0; }
.button { display: inline-block; margin-top: 16px; padding: 14px 20px; border-radius: 16px; background: var(--primary); color: var(--on-primary); font-weight: 700; text-decoration: none; }
.button:hover { background: #ac8748; color: var(--on-primary); }
.meta { font-size: 14px; }
footer { padding: 28px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }

@media (max-width: 620px) {
  .links { gap: 12px; }
  .grid { grid-template-columns: 1fr; }
  main { padding-top: 52px; }
  .card { padding: 22px; }
}

@media (prefers-color-scheme: light) {
  :root { color-scheme: light; --background: #f8f4ed; --surface: #fffffc; --surface-raised: #f2eae0; --border: #d6c8b8; --text: #21191c; --muted: #574b48; --primary: #8f3447; --on-primary: #fff; }
  body { background: radial-gradient(circle at 50% -10%, rgba(143, 52, 71, .12), transparent 38rem), var(--background); }
  header { background: rgba(248, 244, 237, .84); }
  a:hover { color: #702536; }
}