@font-face { font-family: Inter; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-600-italique.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }

:root {
  --night: #150629;
  --night-2: #0d0319;
  --panel: #240b42;
  --panel-2: #311054;
  --violet: #6d2ca0;
  --violet-light: #b37be0;
  --lime: #caff3f;
  --cream: #f3ede3;
  --muted: #d5c7e3;
  --line: rgba(179, 123, 224, .26);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--night-2);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }

.serif { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; letter-spacing: -.01em; }
em { font-family: "Source Serif 4", Georgia, serif; font-style: italic; color: var(--lime); }
.kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--violet-light);
}
.wordmark { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.wordmark span { color: var(--lime); }

.glow {
  background:
    radial-gradient(120% 60% at 85% 0%, rgba(109, 44, 160, .55), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(109, 44, 160, .28), transparent 60%),
    var(--night);
}

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 20px; border-radius: 14px;
  font-weight: 700; font-size: 16px;
}
.btn-lime { background: var(--lime); color: var(--night); }
.btn-ghost { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: #fff; }
.btn svg { width: 20px; height: 20px; flex: none; }

.qr-box {
  background: #fff; border-radius: 22px; padding: 14px;
  box-shadow: 0 0 0 4px var(--lime), 0 20px 60px rgba(0, 0, 0, .45);
}
.qr-box img { display: block; width: 100%; height: auto; }