:root{
  --bg:#050505;
  --bg-elevated:#0f0f0f;
  --text:#f0ede6;
  --muted:#9a9a9a;
  --border:#1e1e1e;

  --accent:#8b5cf6;
  --accent-light:#ddd6fe;
  --accent-dark:#2e1065;

  --font-heading:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;

  --container: 980px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.25rem;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(5,5,5,.85);
  backdrop-filter: blur(18px);
  border-bottom:1px solid var(--border);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
}

.logo{
  font-family:var(--font-heading);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
}

.card{
  margin:2.25rem 0 3rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:16px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

h1{
  font-family:var(--font-heading);
  letter-spacing:-.02em;
  margin:0 0 .5rem;
}
.muted{ color:var(--muted); margin:0 0 1.5rem; }

h2{
  font-family:var(--font-heading);
  margin:2rem 0 .75rem;
  font-size:1.15rem;
}

p, li{
  color: rgba(240,237,230,.85);
  line-height:1.75;
  font-size: .95rem;
}

ul{ padding-left: 1.25rem; }

.actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:2rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.8rem 1.25rem;
  border-radius:999px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  transition: all .25s ease;
}

.btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.btn--primary{
  background:var(--accent);
  color:#fff;
  border-color:transparent;
}

.btn--primary:hover{
  background:var(--accent-light);
  color:var(--accent-dark);
  border-color:transparent;
}

.footer{
  padding: 1.5rem 0 2rem;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.85rem;
}

.footer__row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}