:root {
  --g: #08090c; --g2: #0a0b0f; --s: #11141a; --t: #f7f1e8; --t2: #d8d2c8;
  --d: #8a949f; --d2: #5e6874; --a: #ff6b2c; --ah: #ff8450; --af: #150703;
  --c: #35e0d6; --ok: #6bd49a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--g); color: var(--t);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.6;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 48px 24px 64px; }
.serif { font-family: 'Newsreader', serif; font-optical-sizing: auto; letter-spacing: -0.02em; }
.kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--a);
}
h1 { font-family: 'Newsreader', serif; font-weight: 400; font-size: 56px; line-height: 1.02; letter-spacing: -0.02em; margin: 16px 0 20px; }
h1 em { font-style: italic; font-weight: 300; }
h2 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 26px; letter-spacing: -0.015em; margin: 40px 0 10px; }
p { color: var(--d); font-size: 16px; max-width: 560px; }
p + p { margin-top: 12px; }
ul { color: var(--d); margin: 12px 0 0 20px; max-width: 540px; }
li + li { margin-top: 6px; }
a { color: var(--a); text-decoration: none; }
a:hover { color: var(--ah); }
strong { color: var(--t2); font-weight: 600; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 28px; border-radius: 16px;
  background: var(--a); color: var(--af); font-weight: 500; font-size: 17px;
}
.btn:hover { background: var(--ah); color: var(--af); }
.btn.ghost { background: var(--s); color: var(--t); border: 1px solid rgba(255,255,255,.14); }
.hero-art { margin: 8px 0 4px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 100px; background: var(--s);
  border: 1px solid rgba(255,255,255,.08); color: var(--d); font-size: 13.5px;
}
.dot { width: 7px; height: 7px; border-radius: 7px; background: var(--ok); }
footer {
  margin-top: 72px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  color: var(--d2); font-size: 13px;
}
footer a { color: var(--d); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 28px 0; }
.card {
  padding: 20px; border-radius: 18px; background: var(--s);
  border: 1px solid rgba(255,255,255,.08);
}
.card h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--t); }
.card p { font-size: 13.5px; }
.muted { color: var(--d2); font-size: 13px; }
@media (max-width: 480px) { h1 { font-size: 42px; } .wrap { padding-top: 36px; } }