@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;600;700&family=Share+Tech+Mono&display=swap');

:root {
  --bg: #05050a;
  --card: #0c0c14;
  --line: rgba(120, 90, 255, 0.3);
  --accent: #8b5cf6;
  --accent2: #22d3ee;
  --accent3: #a78bfa;
  --text: #e8e6f0;
  --dim: #9b97b0;
  --font-d: 'Orbitron', sans-serif;
  --font-b: 'Rajdhani', sans-serif;
  --font-m: 'Share Tech Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font-family: var(--font-b);
  background:
    radial-gradient(ellipse 70% 45% at 50% -15%, rgba(34, 211, 238, 0.12), transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139, 92, 246, 0.22), transparent 55%),
    var(--bg);
  color: var(--text);
}
.wrap { max-width: 640px; margin: 0 auto; padding: 40px 18px 70px; text-align: center; }
.badge {
  display: inline-block;
  font-family: var(--font-m);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent2);
  border: 1px solid rgba(34, 211, 238, 0.35);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
h1 {
  font-family: var(--font-d);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.2;
  background: linear-gradient(105deg, #fff, var(--accent3), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.lead { color: var(--dim); font-size: 1.1rem; max-width: 420px; margin: 0 auto 28px; }
.card {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.18);
}
.card h2 {
  font-family: var(--font-d);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent3);
  margin-bottom: 10px;
}
.card p { color: var(--dim); font-size: 1rem; line-height: 1.5; }
.btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  border-radius: 12px;
  font-family: var(--font-d);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #0a0a12;
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6, #22d3ee);
  box-shadow: 0 8px 28px rgba(139, 92, 246, 0.35);
}
.btn.alt {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--accent3);
  box-shadow: none;
}
.ver {
  font-family: var(--font-m);
  font-size: 0.8rem;
  color: var(--accent2);
  margin-top: 8px;
}
.foot {
  margin-top: 36px;
  font-family: var(--font-m);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}