@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

:root {
  --ct-bg: #08050f;
  --ct-surface: #12101f;
  --ct-surface-bright: #1d1734;
  --ct-border: rgba(124, 58, 237, 0.35);
  --ct-text: #eef2ff;
  --ct-text-muted: #a7b0d1;
  --ct-primary: #8b5cf6;
  --ct-primary-hover: #7c3aed;
  --ct-primary-container: rgba(139, 92, 246, 0.14);
  --ct-link: #22d3ee;
  --ct-link-hover: #67e8f9;
  --ct-button-text: #04131a;
}

html,
body {
  min-height: 100%;
  background: radial-gradient(circle at top left, rgba(192, 132, 252, 0.16), transparent 22%), radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.12), transparent 24%), var(--ct-bg) !important;
  background-attachment: fixed;
  color: var(--ct-text) !important;
}

body {
  color-scheme: dark;
}

body,
p,
li,
span,
a,
input,
select,
textarea,
button {
  font-family: 'Manrope', 'Plus Jakarta Sans', 'Sora', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.hero-topline,
.badge {
  font-family: 'Sora', 'Plus Jakarta Sans', 'Manrope', sans-serif !important;
  letter-spacing: -0.01em;
}

.btn-primary,
.btn-secondary,
.download-button,
.media-btn,
.carousel-btn,
.metric-pill,
.tag-pill {
  font-family: 'Plus Jakarta Sans', 'Sora', 'Manrope', sans-serif !important;
}

.nav-tools a,
.nav-right .btn-primary,
.logo {
  font-family: 'Plus Jakarta Sans', 'Sora', 'Manrope', sans-serif !important;
}

a {
  color: var(--ct-link) !important;
}

a:not(.btn-primary):not(.download-button):not(.btn-secondary):not(.carousel-btn):not(.media-btn):hover {
  color: var(--ct-link-hover) !important;
}

nav {
  background: linear-gradient(180deg, rgba(56, 10, 91, 0.82), rgba(8, 5, 28, 0.92)) !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.24) !important;
}

.logo,
.nav-tools a,
header p,
p,
li,
span {
  color: var(--ct-text-muted);
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
.cta-title,
.hero h1,
.hero-cta h2,
.tools-modern-head h2,
.social-proof-head h2 {
  color: var(--ct-text) !important;
}

.hero-cta,
.section,
.example,
.card,
.bento-card,
.tool-modern-card,
.step-card,
.tracking-feature-card,
.metric-card,
.proof-metric,
.review-card,
.cta,
.final-cta-card,
.tag-pill,
.footer-shell,
.trust-section,
.device-frame,
.tools-modern-more a,
.tool-search input {
  background: var(--ct-surface-bright) !important;
  border-color: var(--ct-border) !important;
  color: var(--ct-text) !important;
}

.hero {
  background: transparent !important;
  border: none !important;
}

.hero-cta,
.final-cta-card,
.cta {
  background-image: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(10, 5, 26, 0.94)) !important;
}

.btn-primary,
.download-button,
#play-cta,
a.download-button {
  background: linear-gradient(135deg, #22d3ee, #34d399) !important;
  color: var(--ct-button-text) !important;
  border: none !important;
}

.btn-primary:hover,
.download-button:hover,
#play-cta:hover,
a.download-button:hover {
  background: linear-gradient(135deg, #67e8f9, #6ee7b7) !important;
  color: var(--ct-button-text) !important;
}

.btn-secondary {
  background: rgba(34, 211, 238, 0.1) !important;
  border: 1px solid rgba(34, 211, 238, 0.45) !important;
  color: #a5f3fc !important;
}

.nav-tools a,
.footer-col a,
.footer-bottom-links a,
.card a,
.tool-modern-link,
.tools-modern-more a,
.btn-secondary {
  color: var(--ct-link) !important;
}

.nav-tools a:hover,
.footer-col a:hover,
.footer-bottom-links a:hover,
.card a:hover,
.tool-modern-link:hover,
.tools-modern-more a:hover,
.btn-secondary:hover {
  color: var(--ct-link-hover) !important;
}

.badge,
.steps-eyebrow,
.tool-modern-icon,
.step-badge,
.metric-pill,
.review-stars,
.step-number {
  color: var(--ct-primary) !important;
}

.badge,
.steps-eyebrow,
.tool-modern-icon,
.step-badge,
.metric-pill,
.tag-pill:hover,
.tools-modern-more a:hover {
  background: rgba(139, 92, 246, 0.12) !important;
  border-color: rgba(139, 92, 246, 0.28) !important;
}

.card:hover,
.bento-card:hover,
.tool-modern-card:hover,
.review-card:hover,
.proof-metric:hover {
  border-color: rgba(139, 92, 246, 0.32) !important;
  background: rgba(139, 92, 246, 0.08) !important;
}

.trust-section,
.footer-shell,
footer {
  background: var(--ct-surface) !important;
}

.footer-col a,
.footer-bottom,
.footer-bottom-links a,
.note,
.copyright {
  color: var(--ct-text-muted) !important;
}

::selection {
  background: rgba(139, 92, 246, 0.28);
  color: #fff;
}