:root {
  --white: #f7fbff;
  --black: #0f1722;
  --blue: #138a86;
  --blue-violet: #1a6fd9;
  --surface-1: #101a25;
  --surface-2: #162232;
  --surface-3: #1c2b3d;
  --muted: #c0cfdf;
  --line: #2a3a4e;
  --accent: #12b981;
}

body {
  background-color: var(--black);
  color: var(--white);
}

.nav {
  background-color: #0b121b;
  border-bottom-color: #2b3a4f;
}

.nav-link {
  color: #b0bfce;
}

.nav-link:hover,
.nav-link.w--current {
  color: #f5fbff;
  border-bottom-color: #12b981;
}

.nav-button {
  color: #eaf5ff;
  background-color: #132131;
  border-color: #3a4f67;
}

.nav-button:hover {
  background-color: #1a2d41;
}

.nav-button-white {
  color: #0f1722;
  background-color: #e8f4ff;
  border-color: #c9d8e8;
}

.section-title-wrapper {
  background-color: #1b2b3d99;
  border-color: #35506c;
}

.hero-section-subtitle,
.blog_subtitle,
.newsletter-subtitle,
.newsletter__header {
  color: #d6e3f0;
}

.ai-tools__heading {
  opacity: 1;
  background-image: linear-gradient(45deg, #1ec98c, #2990ff);
}

.ai-tools_subtitle {
  color: #475b72;
}

.ai-tools__item {
  background-color: #f6fbff;
  border: 1px solid #d3deea;
  box-shadow: 0 8px 22px #0c16240f;
}

.ai-tools__item.is__black,
.filter-empty,
.newsletter__wrapper {
  background-color: #142131cc;
  border-color: #344960;
}

.ai-tools__title,
.tag-name,
.tool-description {
  color: #223448;
}

.tool-description.is__white {
  color: #d8e4f2;
}

.tags-item {
  background-color: #e4edf7;
  border-color: #c3d3e2;
}

.tags-item.is__white {
  background-color: #203146;
  border-color: #38516d;
}

.tag-name.is__white {
  color: #e6f1ff;
}

.ai-tools-button,
.submit-button,
.hero-section__btn {
  background-image: linear-gradient(120deg, #12b981, #2d86ff);
}

.categories__grid-item {
  background-image: linear-gradient(160deg, #73b6ff 0%, #42d6b0 100%);
  border-radius: 14px;
}

.caregories-content {
  background: linear-gradient(180deg, #0f2034 0%, #0b1727 100%);
  border: 1px solid #3c5879;
  border-radius: 13px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.categories__grid-item:hover .caregories-content {
  background: linear-gradient(180deg, #122741 0%, #0d1d31 100%);
  border-color: #58a7ff;
  transform: translateY(-2px);
}

.white-button {
  background-color: #e8f4ff;
  color: #112030;
}

.black-button {
  background-color: #122033;
  color: #f0f8ff;
}

.blog-cms-item {
  border-color: #35506c;
}

.blog-cms__category {
  color: #32d29c;
}

.blog-cms__subtitle {
  color: #dce8f5;
}

.filter-input,
.newsletter-field {
  color: #e5f1ff;
  background-color: #1a2a3d;
  border-color: #34506a;
}

.filter-input:focus,
.newsletter-field:focus {
  border-color: #12b981;
}

.filter-submit-button {
  background-color: #1675d9;
}

.btn-green {
  background-color: #12b981;
}

.footer {
  background-color: #0d141ecc;
}

.footer-text,
.footer-links-content a {
  color: #c0cfdf;
}

.footer-links-column-title {
  color: #eef7ff;
}

.fs-cc-prefs2_overlay {
  background-color: #08111be6;
}

/* Contrast hardening across all templates */
.hero-section-subtitle,
.blog_subtitle,
.newsletter-subtitle,
.newsletter__header,
.blog-cms__subtitle,
.blog-cms__date-wrapper,
.footer-text,
.footer-links-content a,
.paragraph-12px,
.form-description,
.blog-post-hero-section-subtitle,
.learn-author-text,
.filter-text,
.dropdown-collection-text,
.hero-section-filter-categories-title {
  color: #d8e5f2;
}

.nav-link,
.footer-links-column-title,
.blog-post-button,
.navigation-pages-wrapper p,
.learn-author-name,
.blog-post__author-name {
  color: #edf6ff;
}

.tool-description,
.tag-name,
.ai-tools__title,
.categories__title,
.filter-title,
.filter-top-title__wrapper p {
  color: #223448;
}

.categories__title {
  color: #dff0ff;
  font-weight: 700;
}

.tool-description.is__white,
.tag-name.is__white,
.ai-tools__title.is__white,
.ai-tools__category__date,
.current-ai-tool__title,
.heading,
.blog-post-cms__category,
.blog-post-body p,
.blog-post-body li,
.blog-post-body blockquote,
.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4 {
  color: #e6f1ff;
}

.blog-post-body a,
.navigation-menu a,
.footer-links-content a:hover,
.footer-social-link:hover {
  color: #58b7ff;
}

.section-title-wrapper p,
.hero-section-title,
.categories__heading,
.filter__heading,
.blog-page__heading,
.learn-title,
.blog-post-hero-section-title {
  color: #f3f9ff;
}

.filter-input,
.newsletter-field,
.form-input,
.text-field-inform,
.w-select,
textarea {
  color: #ebf5ff;
}

.filter-input::placeholder,
.newsletter-field::placeholder,
.form-input::placeholder,
.text-field-inform::placeholder,
textarea::placeholder {
  color: #b7c8da;
}

.ai-tools__item.is__black .tool-description,
.ai-tools__item.is__black .tag-name,
.ai-tools__item.is__black .ai-tools__title {
  color: #e6f1ff;
}

.blog-cms-item,
.current-ai-tools-wrapper,
.current-learn-background .learn-content-wrapper,
.learn-video,
.submit-form,
.form-block-contact-us {
  box-shadow: 0 10px 24px #050b130f;
}

/* Mobile nav drawer fix */
@media screen and (max-width: 991px) {
  .nav-menu {
    display: none !important;
  }

  .nav-container {
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
  }

  .nav-button-mobile-menu {
    z-index: 1102;
    color: #f2f8ff;
  }

  .nav-menu.w--open {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1101;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    overflow-y: auto;
    background: #0b121b !important;
    padding: 86px 24px 24px !important;
    text-align: left !important;
    float: none !important;
  }

  .nav-menu.w--open .buttons-wrapper,
  .nav-menu.w--open .nav-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .nav-menu.w--open .nav-link {
    font-size: 22px;
    line-height: 1.2;
    padding: 14px 0;
    margin: 0;
    border-bottom: 1px solid #25384f;
  }

  .nav-menu.w--open .nav-button {
    margin-top: 12px;
    width: 100%;
    text-align: center;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* ── Opacity resets ── */
/* Webflow uses opacity on many elements which reduces effective contrast.
   Override to 1 so the explicit color values above take full effect. */
.navigation-pages-wrapper { opacity: 1; }
.footer-text { opacity: 1; }
.paragraph-12px { opacity: 1; }
.blog-cms__date-wrapper { opacity: 1; }
.featured-blog-cms__date-wrapper { opacity: 1; color: #d8e5f2; }
.blog-post-cms__date-wrapper { opacity: 1; color: #d8e5f2; }
.form-description { opacity: 1; }

/* ── Categories tab buttons ── */
.catergories-tab-wrapper {
  background-color: #1c2b3d;
  border-color: #3a5068;
}
.categories-tab-button { color: #c8d8e8; }
.categories-tab-button.w--current { color: #171618; background-color: #fff; }

/* ── Blog tab buttons ── */
.blog-tabs__link { color: #c8d8e8; }
.blog-tabs__link.w--current { color: #fff; }

/* ── Contact page section title ── */
.section-title { color: #1ec98c; }

/* ── Contact form inputs (dark bg to match theme) ── */
.text-field-inform,
.w-select {
  background-color: #1a2a3d;
  border-color: #34506a;
}

.text-field-inform:focus,
.w-select:focus {
  border-color: #12b981;
}

/* ── Pricing FAQ text ── */
.faq-question { color: #1e3048; }
.faq-question-text { color: #3d5468; }

/* ── Missing subtitle overrides ── */
.learn-hero-section-subtitle,
.blog-hero-section-subtitle,
.categories_subtitle { color: #d8e5f2; }

/* ── Pricing card text ── */
.pricing-subtitle,
.pricing-small-subtitle { color: #d6e3f0; }

/* ── Base anchor color (unclassed links) ── */
a { color: #d8e5f2; }

/* ── Filter dropdowns (search-and-filter page) ── */
.filter-toggle-dropdown,
.filter-toggle-dropdown_sorting {
  color: #d8e5f2;
}

.filter-toggle-dropdown.w--open,
.filter-toggle-dropdown_sorting.w--open {
  color: #ebf5ff;
}

/* ── Featured blog subtitle (blog index) ── */
.featured-blog-cms__subtitle {
  color: #dce8f5;
}

/* ── Cookie consent modal ── */
.fs-cc-prefs2_title {
  color: #f3f9ff;
}

.fs-cc-prefs2_label {
  color: #4ee8c7;
}

.fs-cc-banner2_button.fs-cc-button-alt {
  color: #f0f8ff;
  background-color: #020873aa;
}

/* ── Button hover: brightness instead of opacity ── */
.button:hover {
  opacity: 1;
  filter: brightness(0.9);
}