:root {
  --bg: #0b0818;
  --panel: rgba(13, 10, 20, 0.72);
  --gold: #8a6f2a;
  --gold-hi: #e0bc55;
  --text: #d8cfbf;
  --muted: #9a93a8;
  --ember: #ff7a1a;
  --arcane: #8a4dff;
  --ice: #9fe8ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold-hi); }
a:hover { color: #fff; }

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  image-rendering: pixelated;
}

/* hero */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.25rem 5rem;
  position: relative;
}
.emblem {
  width: 150px;
  height: 150px;
  image-rendering: pixelated;
  border: 2px solid var(--gold);
  box-shadow: 0 0 60px rgba(159, 232, 255, 0.28), 0 0 120px rgba(138, 77, 255, 0.18);
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.title {
  margin: 1.5rem 0 0;
  font-size: clamp(2.6rem, 11vw, 6.5rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  background: linear-gradient(100deg, #f4eeff 0%, #f4eeff 40%, #ffd36b 50%, #f4eeff 60%, #f4eeff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4.5s linear infinite;
  filter: drop-shadow(0 4px 24px rgba(138, 77, 255, 0.35));
}
@keyframes shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -100% 0; }
}
.tagline {
  margin: 1rem 0 0;
  font-size: clamp(1rem, 3vw, 1.4rem);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.chev { display: inline-block; animation: breathe 2.5s ease-in-out infinite; }
.chev.ember { color: var(--ember); }
.chev.arcane { color: #b98bff; animation-direction: reverse; }
@keyframes breathe {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
.lead { max-width: 34rem; margin: 1.25rem 0 0; font-size: 1.1rem; }

.join { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.address {
  display: inline-flex;
  align-items: stretch;
  font: inherit;
  color: #fff;
  background: var(--panel);
  border: 1px solid var(--gold);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.address:hover, .address:focus-visible {
  border-color: var(--gold-hi);
  box-shadow: 0 0 26px rgba(224, 188, 85, 0.25);
  outline: none;
}
.address-text {
  padding: 0.85rem 1.25rem;
  font: 600 clamp(0.95rem, 3.4vw, 1.25rem) ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.02em;
}
.address-action {
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1208;
  background: linear-gradient(90deg, var(--ember), var(--gold-hi));
}
.address.copied .address-action { background: linear-gradient(90deg, #55ff7f, #b6ffc8); }

.status { margin: 0; color: var(--muted); font-size: 0.95rem; }
.dot { display: inline-block; width: 0.65em; height: 0.65em; border-radius: 50%; margin-right: 0.35em; background: #ff5555; }
.dot.online { background: #55ff7f; box-shadow: 0 0 10px #55ff7f; }
.dot.checking { background: #888; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  text-decoration: none;
  font-size: 1.6rem;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* sections */
main { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }
.block {
  background: var(--panel);
  border: 1px solid var(--gold);
  padding: 2.5rem clamp(1.25rem, 4vw, 3rem);
  margin-bottom: 2.5rem;
  backdrop-filter: blur(3px);
}
h2 { margin: 0 0 0.5rem; font-size: clamp(1.6rem, 5vw, 2.3rem); letter-spacing: 0.04em; color: #fff; }
h3 { margin: 0 0 0.25rem; font-size: 1.25rem; color: #fff; }
.section-lead { margin: 0 0 1.75rem; color: var(--muted); max-width: 40rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; }
.card { padding: 1.5rem; background: rgba(5, 4, 10, 0.55); border: 1px solid; }
.card.ember { border-color: rgba(255, 122, 26, 0.6); box-shadow: inset 0 0 50px rgba(255, 106, 26, 0.08); }
.card.arcane { border-color: rgba(138, 77, 255, 0.65); box-shadow: inset 0 0 50px rgba(138, 77, 255, 0.1); }
.card.ember h3 { color: #ffb070; font-size: 1.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.card.arcane h3 { color: #c9a8ff; font-size: 1.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.card-sub { margin: 0 0 1rem; color: var(--muted); font-style: italic; }
.card ul { margin: 0; padding: 0; list-style: none; }
.card li { padding-left: 1.4rem; position: relative; margin-bottom: 0.55rem; }
.card li::before { content: "+"; position: absolute; left: 0; font-weight: 800; color: #55ff7f; }
.card li.no { color: var(--muted); }
.card li.no::before { content: "-"; color: #ff6a5a; }
.fineprint { margin: 1.5rem 0 0; color: var(--muted); font-size: 0.9rem; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; margin-top: 1.25rem; }
.feature { border-left: 2px solid var(--gold); padding-left: 1rem; }
.feature p { margin: 0.25rem 0 0; color: var(--muted); }

.steps { margin: 1.25rem 0 0; padding-left: 1.4rem; }
.steps li { margin-bottom: 0.9rem; }
.steps strong { color: #fff; }
code {
  font: 0.95em ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.45em;
  color: var(--gold-hi);
}

footer { text-align: center; padding: 1rem 1.25rem 3rem; color: var(--muted); font-size: 0.9rem; }
footer p { margin: 0.2rem 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .title { background-position: 50% 0; }
}