:root {
  --rezz-red: #ff2d2d;
  --accent: #6e1fff;
  --bg: #fff;
  --text: #111;
  --card: #f8f9fb;
  --dark-bg: #0f1115;
  --dark-text: #f4f4f4;
  --radius: 14px;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, Arial;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7
}

h1,
h2,
h3 {
  color: var(--accent)
}

.cta {
  display: inline-block;
  background: var(--rezz-red);
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 600;
  margin: 14px 0;
  transition: .3s;
  text-decoration: none
}

.cta:hover {
  opacity: .9;
  transform: scale(1.03)
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  margin: 24px 0;
  border: 1px solid #e3e3e3
}

ul {
  padding-left: 24px
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.pricing-th {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.pricing-td {
  padding: 8px;
}

@media(prefers-color-scheme:dark) {
  body {
    background: var(--dark-bg);
    color: var(--dark-text)
  }

  .card {
    background: #1a1c23;
    border-color: #2d2f39
  }
}