:root {
  --qtb-bg: #e8eeff;
  --qtb-bg-alt: #cfddff;
  --qtb-surface: #ffffff;
  --qtb-surface-soft: #f4f7ff;
  --qtb-surface-deep: #081438;
  --qtb-ink: #091939;
  --qtb-ink-soft: #224995;
  --qtb-text: #2a4f81;
  --qtb-text-soft: #5f79a4;
  --qtb-text-faint: #91a9cf;
  --qtb-primary: #1e6dff;
  --qtb-primary-strong: #1348c9;
  --qtb-primary-soft: #dfe9ff;
  --qtb-primary-deep: #081438;
  --qtb-secondary: #6a7cff;
  --qtb-azure: #dfe8ff;
  --qtb-cyan: #21d0ff;
  --qtb-cyan-strong: #0f72ac;
  --qtb-cyan-soft: #def7ff;
  --qtb-amber: #7f73ff;
  --qtb-amber-strong: #5546d0;
  --qtb-amber-soft: #eeebff;
  --qtb-border: #9bb3ea;
  --qtb-border-strong: #5f84e5;
  --qtb-shadow-xs: 0 1px 2px rgba(8, 20, 56, 0.08);
  --qtb-shadow-sm: 0 14px 30px rgba(28, 77, 208, 0.2);
  --qtb-shadow: 0 30px 70px rgba(12, 33, 82, 0.26);
  --qtb-shadow-lg: 0 48px 100px rgba(8, 20, 56, 0.4);
  --qtb-hero-grad:
    radial-gradient(circle at 88% 6%, rgba(33, 208, 255, 0.5), transparent 48%),
    radial-gradient(circle at 12% 88%, rgba(127, 115, 255, 0.38), transparent 50%),
    linear-gradient(152deg, #081438 0%, #163f95 34%, #1e6dff 67%, #8de3ff 114%);
}

body {
  background:
    radial-gradient(circle at 86% -8%, rgba(33, 208, 255, 0.26), transparent 42%),
    radial-gradient(circle at 12% 8%, rgba(30, 109, 255, 0.2), transparent 44%),
    radial-gradient(circle at 50% 106%, rgba(127, 115, 255, 0.18), transparent 46%),
    linear-gradient(180deg, #f8fbff 0%, var(--qtb-bg) 52%, #dde7ff 100%);
}

.qtb-header {
  background: rgba(245, 248, 255, 0.88);
  border-bottom-color: rgba(95, 132, 229, 0.3);
  backdrop-filter: saturate(1.18) blur(10px);
}

.qtb-brand__mark {
  border-radius: 14px;
  background:
    radial-gradient(circle at 74% 18%, rgba(33, 208, 255, 0.8), transparent 33%),
    radial-gradient(circle at 26% 84%, rgba(127, 115, 255, 0.48), transparent 44%),
    linear-gradient(148deg, #081438 0%, #1e6dff 58%, #6a7cff 100%);
}

.qtb-hero__panel,
.qtb-cta-strip {
  background: var(--qtb-hero-grad);
}

.qtb-btn--primary,
.qtb-billing-switch button.is-active,
.qtb-pagination .current {
  background: linear-gradient(135deg, #1e6dff 0%, #1348c9 50%, #21d0ff 100%);
  box-shadow: 0 16px 34px rgba(30, 109, 255, 0.34);
}

.qtb-btn--primary:hover,
.qtb-billing-switch button.is-active:hover {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.03);
}

.qtb-hero__title em,
.qtb-gradient-text {
  background: linear-gradient(96deg, #ffffff 0%, #95ecff 35%, #a69dff 72%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.qtb-plan-card--featured {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(136deg, #21d0ff, #1e6dff 45%, #7f73ff) border-box;
}

.qtb-plan-badge--accent {
  background: linear-gradient(136deg, #21d0ff, #1e6dff 45%, #7f73ff);
}

.qtb-footer {
  background:
    radial-gradient(circle at 92% 2%, rgba(33, 208, 255, 0.18), transparent 34%),
    radial-gradient(circle at 8% 104%, rgba(127, 115, 255, 0.15), transparent 34%),
    linear-gradient(180deg, transparent, rgba(30, 109, 255, 0.08));
}

.qtb-cap-card,
.qtb-plan-card,
.qtb-blog-card,
.qtb-faq-item {
  border-color: rgba(95, 132, 229, 0.28);
}