:root {
  --bg: #050506;
  --bg-raised: #0b0b0d;
  --text: #f4f1ea;
  --text-2: rgba(244, 241, 234, 0.68);
  --text-3: rgba(244, 241, 234, 0.42);
  --gold: #d6b36e;
  --gold-bright: #eed9a4;
  --gold-border: rgba(214, 179, 110, 0.38);
  --gold-soft: rgba(214, 179, 110, 0.12);
  --line: rgba(244, 241, 234, 0.1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: radial-gradient(120% 60% at 50% 0%, #1b1710 0%, #0e0c0a 45%, var(--bg) 100%) fixed, var(--bg);
  color: var(--text);
  font: 400 17px/1.65 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height: 100vh;
}

a { color: var(--gold-bright); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

header.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.wordmark {
  font: 700 18px/1 'Unbounded', sans-serif; letter-spacing: 0.08em;
  color: var(--gold); text-decoration: none;
}
nav a { color: var(--text-2); text-decoration: none; margin-left: 18px; font-size: 15px; }
nav a:hover, nav a[aria-current] { color: var(--gold-bright); }

main { padding: 48px 0 64px; }

h1, h2, h3 { font-family: 'Josefin Sans', sans-serif; font-weight: 700; line-height: 1.2; }
h1 { font-size: 34px; color: var(--gold); margin: 0 0 8px; }
h2 { font-size: 22px; color: var(--gold-bright); margin: 40px 0 10px; }
h3 { font-size: 18px; margin: 24px 0 6px; }
p, li { color: var(--text-2); }
strong { color: var(--text); font-weight: 600; }
ul { padding-left: 20px; }
li { margin: 6px 0; }
.meta { color: var(--text-3); font-size: 14px; margin-bottom: 32px; }

.card {
  background: var(--gold-soft); border: 1px solid var(--gold-border);
  border-radius: 18px; padding: 20px 22px; margin: 24px 0;
}
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* Home */
.hero { text-align: center; padding: 72px 0 40px; }
.hero .big {
  font: 700 clamp(40px, 12vw, 72px)/1 'Unbounded', sans-serif; letter-spacing: 0.06em;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, #9e7c3e);
  -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 16px;
}
.hero .tag { font: 600 22px/1.3 'Josefin Sans', sans-serif; color: var(--text); margin: 0 0 12px; }
.hero p { max-width: 520px; margin: 0 auto; }
.features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 40px 0; }
.features .card { margin: 0; }
.features h3 { margin-top: 0; color: var(--gold-bright); }
.soon {
  display: inline-block; margin-top: 28px; padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--gold-border); color: var(--gold-bright);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
}

footer {
  border-top: 1px solid var(--line); padding: 24px 0 40px;
  color: var(--text-3); font-size: 14px;
}
footer a { color: var(--text-2); text-decoration: none; margin-right: 16px; }

@media (max-width: 480px) {
  h1 { font-size: 28px; }
  nav a { margin-left: 12px; font-size: 14px; }
}