:root {
  color-scheme: dark;
  --ink: #f7f7ff;
  --muted: #b8bbd0;
  --panel: rgba(22, 27, 66, 0.78);
  --line: rgba(135, 151, 255, 0.24);
  --mint: #35efc0;
  --blue: #49c8ff;
  --violet: #795cff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 0%, rgba(28, 177, 173, 0.19), transparent 34rem),
    radial-gradient(circle at 10% 60%, rgba(96, 63, 214, 0.17), transparent 38rem),
    #05081d;
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
}

.wrap { width: min(760px, calc(100% - 40px)); margin: 0 auto; }

header { padding: 64px 0 36px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 720;
  letter-spacing: .08em;
}

.mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--mint), var(--blue) 50%, var(--violet));
  box-shadow: 0 10px 38px rgba(62, 213, 215, .23);
  color: #fff;
  font-size: 24px;
}

main { padding-bottom: 80px; }

.hero, .card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}

.hero { padding: clamp(28px, 7vw, 56px); border-radius: 30px; }
.card { margin-top: 20px; padding: 26px; border-radius: 22px; }

h1 { margin: 0 0 14px; font-size: clamp(38px, 8vw, 64px); line-height: 1.02; letter-spacing: -.045em; }
h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.02em; }
p, li { color: var(--muted); }
p { margin: 8px 0 0; }
ul { padding-left: 22px; }

.eyebrow { margin-bottom: 14px; color: var(--mint); font-size: 13px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { padding: 11px 17px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 650; }
.button.primary { border-color: transparent; background: linear-gradient(120deg, #168c88, #4f53c8); }
.meta { margin-top: 28px; font-size: 14px; color: #9196b4; }
a { color: #7edfff; }
footer { padding: 24px 0 48px; color: #858aa8; font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .mark { animation: breathe 5s ease-in-out infinite; }
  @keyframes breathe { 50% { box-shadow: 0 12px 48px rgba(83, 231, 211, .36); } }
}