@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

:root {
  --blue:#4f7cff;
  --purple:#7b5cff;
  --glass:rgba(255,255,255,0.08);
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:Inter, sans-serif;
  color:#fff;
  background:#05060a;
}

.background {
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at top right, #2a3cff55, transparent 40%),
    radial-gradient(circle at bottom left, #7b5cff33, transparent 45%);
  z-index:-1;
}

.hero {
  text-align:center;
  padding:80px 20px 40px;
}

.logo {
  font-size:60px;
  font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  -webkit-background-clip:text;
  color:transparent;
}

.container {
  max-width:1100px;
  margin:auto;
  padding:20px;
}

.client {
  text-align:center;
  margin-bottom:50px;
}

.client span {
  opacity:.6;
  text-transform:uppercase;
  letter-spacing:2px;
}

.plans {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
}

.plan {
  background:var(--glass);
  backdrop-filter:blur(14px);
  border-radius:22px;
  padding:32px;
  border:2px solid transparent;
  cursor:pointer;
  transition:.35s;
  position:relative;
}

.plan:hover {
  transform:translateY(-6px);
}

.plan.selected {
  border-color:var(--blue);
  box-shadow:0 0 40px rgba(79,124,255,.35);
}

.plan.featured {
  background:linear-gradient(180deg,rgba(79,124,255,.18),var(--glass));
}

.plan h3 {
  font-size:26px;
}

.subtitle {
  opacity:.75;
  margin-bottom:20px;
}

.plan ul {
  list-style:none;
  padding:0;
}

.plan ul li {
  margin-bottom:12px;
}

.tag {
  position:absolute;
  top:20px;
  right:20px;
  font-size:12px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  padding:6px 12px;
  border-radius:20px;
}

.action {
  text-align:center;
  margin:50px 0;
}

button {
  padding:18px 44px;
  font-size:16px;
  border-radius:40px;
  border:none;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:white;
  cursor:pointer;
  opacity:.35;
  transition:.3s;
}

button.enabled {
  opacity:1;
  box-shadow:0 0 35px rgba(79,124,255,.6);
}

.details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

footer {
  text-align:center;
  margin:60px 0 30px;
  opacity:.75;
}