:root {
  --qtb-bg: #e8f1ff;
  --qtb-bg-alt: #cddfff;
  --qtb-surface: #ffffff;
  --qtb-surface-soft: #f1f7ff;
  --qtb-surface-deep: #05132f;
  --qtb-ink: #061a42;
  --qtb-ink-soft: #1a458f;
  --qtb-text: #274a78;
  --qtb-text-soft: #5f79a4;
  --qtb-text-faint: #8ca3ca;
  --qtb-primary: #116eff;
  --qtb-primary-strong: #0b43b1;
  --qtb-primary-soft: #dbe9ff;
  --qtb-primary-deep: #05132f;
  --qtb-secondary: #4f8cff;
  --qtb-azure: #d6e8ff;
  --qtb-cyan: #20d6ff;
  --qtb-cyan-strong: #0e82c0;
  --qtb-cyan-soft: #dcf7ff;
  --qtb-amber: #6a7dff;
  --qtb-amber-strong: #4454dd;
  --qtb-amber-soft: #e8edff;
  --qtb-border: #9ebbf2;
  --qtb-border-strong: #5e87eb;
  --qtb-shadow-xs: 0 1px 2px rgba(5, 19, 47, 0.08);
  --qtb-shadow-sm: 0 10px 30px rgba(17, 110, 255, 0.16);
  --qtb-shadow: 0 26px 64px rgba(7, 35, 88, 0.22);
  --qtb-shadow-lg: 0 44px 96px rgba(5, 19, 47, 0.36);
  --qtb-hero-grad:
    radial-gradient(circle at 88% 2%, rgba(32, 214, 255, 0.4), transparent 55%),
    radial-gradient(circle at 14% 84%, rgba(106, 125, 255, 0.28), transparent 50%),
    linear-gradient(150deg, #05132f 0%, #0d2d74 38%, #116eff 68%, #8ddfff 112%);
}

body {
  background:
    radial-gradient(circle at 90% -8%, rgba(32, 214, 255, 0.22), transparent 40%),
    radial-gradient(circle at 10% 6%, rgba(17, 110, 255, 0.16), transparent 42%),
    radial-gradient(circle at 50% 110%, rgba(106, 125, 255, 0.16), transparent 46%),
    linear-gradient(180deg, #f7fbff 0%, var(--qtb-bg) 55%, #dceaff 100%);
}

.qtb-header {
  background: rgba(244, 250, 255, 0.9);
  border-bottom-color: rgba(94, 135, 235, 0.28);
}

.qtb-brand__mark {
  border-radius: 14px;
  background:
    radial-gradient(circle at 72% 18%, rgba(32, 214, 255, 0.76), transparent 34%),
    radial-gradient(circle at 28% 80%, rgba(106, 125, 255, 0.42), transparent 44%),
    linear-gradient(148deg, #05132f 0%, #116eff 60%, #4f8cff 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, #116eff 0%, #0b43b1 50%, #20d6ff 100%);
  box-shadow: 0 16px 34px rgba(17, 110, 255, 0.3);
}

.qtb-hero__title em,
.qtb-gradient-text {
  background: linear-gradient(96deg, #ffffff 0%, #9edfff 36%, #6a7dff 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, #20d6ff, #116eff 46%, #6a7dff) border-box;
}

.qtb-plan-badge--accent {
  background: linear-gradient(136deg, #20d6ff, #116eff 46%, #6a7dff);
}

.qtb-footer {
  background:
    radial-gradient(circle at 92% 2%, rgba(32, 214, 255, 0.15), transparent 34%),
    radial-gradient(circle at 6% 102%, rgba(106, 125, 255, 0.13), transparent 36%),
    linear-gradient(180deg, transparent, rgba(17, 110, 255, 0.08));
}