:root {
  --x-blue: #4aa3ff;
  --x-violet: #6b4bff;
  --x-pink: #ff4bd8;
  --text: #f3efff;
  --muted: #c8bfde;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Outfit", "Manrope", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 82%, rgba(74, 83, 255, 0.26) 0%, transparent 42%),
    radial-gradient(circle at 86% 12%, rgba(203, 76, 255, 0.24) 0%, transparent 40%),
    linear-gradient(175deg, #070515 0%, #0a061c 52%, #050410 100%);
}

.dp-page {
  width: min(980px, calc(100% - 2.4rem));
  margin: clamp(2.2rem, 7vh, 4.4rem) auto clamp(2.2rem, 7vh, 4.4rem);
}

.dp-head h1 {
  margin: 0.8rem 0 0;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: transparent;
  background: linear-gradient(90deg, var(--x-blue), var(--x-violet), var(--x-pink));
  -webkit-background-clip: text;
  background-clip: text;
}

.dp-head p {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.dp-brand {
  color: #ece4ff;
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.dp-content {
  margin-top: clamp(1.3rem, 4vh, 2.4rem);
  display: grid;
  gap: 0.7rem;
}

.dp-content h2 {
  margin: 1.15rem 0 0.1rem;
  color: #f2ecff;
  font-size: clamp(1.06rem, 1.28vw, 1.3rem);
  font-weight: 500;
  line-height: 1.35;
}

.dp-content h3 {
  margin: 0.75rem 0 0.1rem;
  color: rgba(240, 231, 255, 0.94);
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  font-weight: 500;
  line-height: 1.35;
}

.dp-content p {
  margin: 0;
  color: rgba(221, 214, 243, 0.92);
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.7;
  font-weight: 300;
}

.dp-content ul {
  margin: 0.1rem 0 0.2rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.2rem;
}

.dp-content li {
  color: rgba(221, 214, 243, 0.92);
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.62;
  font-weight: 300;
}