:root {
  --qtb-bg: #f2f7ff;
  --qtb-bg-alt: #d9e7ff;
  --qtb-surface: #ffffff;
  --qtb-surface-soft: #f7fbff;
  --qtb-surface-deep: #07173f;
  --qtb-ink: #081a46;
  --qtb-ink-soft: #1d3f93;
  --qtb-text: #214777;
  --qtb-text-soft: #5c78a3;
  --qtb-text-faint: #93aacf;
  --qtb-primary: #0a63ff;
  --qtb-primary-strong: #0844ba;
  --qtb-primary-soft: #e7efff;
  --qtb-primary-deep: #07173f;
  --qtb-secondary: #4a7cff;
  --qtb-azure: #d7e8ff;
  --qtb-cyan: #35cbff;
  --qtb-cyan-strong: #0c79bc;
  --qtb-cyan-soft: #def5ff;
  --qtb-amber: #7e67ff;
  --qtb-amber-strong: #5d39df;
  --qtb-amber-soft: #ece8ff;
  --qtb-border: #b5caf4;
  --qtb-border-strong: #6f93f2;
  --qtb-shadow-xs: 0 1px 2px rgba(7, 23, 63, 0.07);
  --qtb-shadow-sm: 0 8px 24px rgba(10, 99, 255, 0.14);
  --qtb-shadow: 0 26px 64px rgba(7, 23, 63, 0.2);
  --qtb-shadow-lg: 0 44px 98px rgba(7, 23, 63, 0.34);
  --qtb-hero-grad:
    radial-gradient(ellipse 70% 78% at 86% 4%, rgba(53, 203, 255, 0.42), transparent 57%),
    radial-gradient(circle at 12% 82%, rgba(126, 103, 255, 0.3), transparent 52%),
    linear-gradient(150deg, #07173f 0%, #123793 40%, #0a63ff 73%, #90dfff 116%);
}

body {
  background:
    radial-gradient(circle at 92% -6%, rgba(53, 203, 255, 0.2), transparent 42%),
    radial-gradient(circle at 6% 8%, rgba(10, 99, 255, 0.14), transparent 40%),
    radial-gradient(circle at 52% 110%, rgba(126, 103, 255, 0.14), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, var(--qtb-bg) 56%, #e6efff 100%);
}

.qtb-header {
  background: rgba(250, 253, 255, 0.88);
  border-bottom-color: rgba(111, 147, 242, 0.26);
}

.qtb-brand__mark {
  border-radius: 16px 10px 16px 10px;
  background:
    radial-gradient(circle at 76% 20%, rgba(53, 203, 255, 0.78), transparent 34%),
    radial-gradient(circle at 24% 78%, rgba(126, 103, 255, 0.42), transparent 44%),
    linear-gradient(148deg, #07173f 0%, #0a63ff 62%, #4a7cff 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, #0a63ff 0%, #0844ba 52%, #35cbff 100%);
  box-shadow: 0 16px 34px rgba(10, 99, 255, 0.28);
}

.qtb-hero__title em,
.qtb-gradient-text {
  background: linear-gradient(96deg, #ffffff 0%, #a7dbff 36%, #7e67ff 70%, #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, #35cbff, #0a63ff 48%, #7e67ff) border-box;
}

.qtb-plan-badge--accent {
  background: linear-gradient(136deg, #35cbff, #0a63ff 48%, #7e67ff);
}

.qtb-footer {
  background:
    radial-gradient(circle at 90% 4%, rgba(53, 203, 255, 0.14), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(126, 103, 255, 0.12), transparent 38%),
    linear-gradient(180deg, transparent, rgba(10, 99, 255, 0.08));
}