:root {
  --glass: rgba(255, 255, 255, 0.62);
  --border: rgba(255, 255, 255, 0.65);
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
}

html, body {
  overflow-x: hidden;
}

.bg-saas {
  background-color: #f8fafc;
  background-image:
    radial-gradient(900px 520px at 20% 10%, rgba(56, 189, 248, 0.25), transparent 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(99, 102, 241, 0.22), transparent 60%),
    radial-gradient(900px 520px at 60% 80%, rgba(217, 70, 239, 0.18), transparent 60%);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.shadow-soft {
  box-shadow: var(--shadow);
}

.card {
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(51 65 85);
  margin-bottom: 0.4rem;
}

.input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.75);
  padding: 0.75rem 0.95rem;
  font-size: 0.95rem;
  outline: none;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.input:focus {
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.12);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
  user-select: none;
}

.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.btn-primary {
  color: white;
  background: linear-gradient(90deg, rgba(56, 189, 248, 1), rgba(99, 102, 241, 1), rgba(217, 70, 239, 1));
  box-shadow: 0 16px 40px rgba(99, 102, 241, 0.18);
}

.btn-ghost {
  color: rgb(51 65 85);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.btn-danger {
  color: rgb(153 27 27);
  background: rgba(254, 242, 242, 0.75);
  border: 1px solid rgba(254, 202, 202, 0.8);
}

.btn-pill {
  border-radius: 999px;
  padding: 0.65rem 1rem;
  color: white;
  background: linear-gradient(90deg, rgba(251, 146, 60, 1), rgba(236, 72, 153, 1));
}

.link {
  color: rgb(79 70 229);
  text-decoration: underline;
  text-decoration-color: rgba(79, 70, 229, 0.35);
}

.nav-item {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 16px;
  color: rgb(51 65 85);
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.6);
}

.nav-item-active {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.18), rgba(99, 102, 241, 0.16), rgba(217, 70, 239, 0.12));
  border-color: rgba(99, 102, 241, 0.35);
}

.product-pill {
  width: 100%;
  border-radius: 16px;
  padding: 0.8rem 1rem;
  color: white;
  font-weight: 600;
  background: linear-gradient(90deg, var(--tw-gradient-from), var(--tw-gradient-to));
}

.product-pill.from-sky-400 { --tw-gradient-from: rgb(56 189 248); }
.product-pill.to-indigo-400 { --tw-gradient-to: rgb(129 140 248); }
.product-pill.from-indigo-400 { --tw-gradient-from: rgb(129 140 248); }
.product-pill.to-fuchsia-400 { --tw-gradient-to: rgb(232 121 249); }
.product-pill.from-emerald-400 { --tw-gradient-from: rgb(52 211 153); }
.product-pill.to-cyan-400 { --tw-gradient-to: rgb(34 211 238); }

.icon-chip {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(51 65 85);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.social-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgb(51 65 85);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.stat-card {
  border-radius: 24px;
  color: white;
  padding: 1.25rem;
  background: linear-gradient(90deg, var(--tw-gradient-from), var(--tw-gradient-to));
  box-shadow: var(--shadow);
}
.stat-card.from-sky-400 { --tw-gradient-from: rgb(56 189 248); }
.stat-card.to-indigo-400 { --tw-gradient-to: rgb(129 140 248); }
.stat-card.from-indigo-400 { --tw-gradient-from: rgb(129 140 248); }
.stat-card.to-fuchsia-400 { --tw-gradient-to: rgb(232 121 249); }
.stat-card.from-emerald-400 { --tw-gradient-from: rgb(52 211 153); }
.stat-card.to-cyan-400 { --tw-gradient-to: rgb(34 211 238); }
.stat-label { font-size: 0.85rem; opacity: 0.9; }
.stat-value { font-size: 1.8rem; font-weight: 800; margin-top: 0.25rem; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}