/* Charcoal → Frost Blue theme overrides — brighter, higher-contrast accents */
:root {
  --design-system-zignaly---category-color-active: #3de8ff;
  --design-system-zignaly---category-breadcrumb: #7af0ff;
  --design-system-zignaly---show-more-link: #22d3ee;
  --design-system-zignaly---button-gradient-color-1: #0680a8;
  --design-system-zignaly---button-gradient-color-2: #5ef0ff;
  --design-system-zignaly---category-page-link-color: #3de8ff;
  --design-system-zignaly---description-color: #f2f7fb;
  --design-system-zignaly---short-description: #b6c4d2;
  --p_text: #b6c4d2;
  --c1: #b6c4d2;
  --nav-menu-link: #b6c4d2;
  --design-system-zignaly---bold-colore: var(--design-system-zignaly---category-color-active);
  --body-bg: #0a0d12;
  --home-white: #f2f7fb;
  --button-bg-gradient-start: #0680a8;
  --button-bg-gradient-end: #5ef0ff;
  --hero-text-hl-gradient-start: #7af0ff;
  --hero-text-hl-gradient-end: #1ec8e8;
  --toc-link: #3de8ff;
  --faq-bg: #0a0d12;
  --home-faq-border-start: #22d3ee;
  --home-faq-border-end: #0680a8;
  --g1_a: #0c1520;
  --g1_b: #0ea5c9;
  --menu-bg: #121820;
  --design-system-zignaly---post-bg: #151c24;
  --frost-glow: rgba(61, 232, 255, 0.32);
  --frost-glow-soft: rgba(34, 211, 238, 0.2);
  --frost-overlay: rgba(10, 13, 18, 0.62);
}

html {
  color-scheme: dark;
}

/* Unified site background on all root pages (not work/) */
body:not(.work-infiniti),
body.landing-page-body,
body.body-4,
body.body-category,
body.success-page-body,
.body,
.body-4,
.main-page-wrapper {
  background-color: var(--body-bg) !important;
  background-image:
    linear-gradient(180deg, rgba(10, 13, 18, 0.72) 0%, rgba(10, 13, 18, 0.88) 100%),
    url(../images/ui/sitebg-optimized2.jpg) !important;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-attachment: scroll;
}

/* Frost overlays on photographic section backgrounds */
.section-hero {
  background-color: var(--body-bg);
  background-image:
    linear-gradient(180deg, rgba(10, 13, 18, 0.72) 0%, rgba(10, 13, 18, 0.88) 100%),
    url(../images/ui/home-hero-bg.webp) !important;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-cta-wrapper {
  background-image:
    radial-gradient(circle at 50% 28%, var(--frost-glow), rgba(126, 200, 224, 0) 28%),
    radial-gradient(circle at 18% 72%, var(--frost-glow-soft), rgba(126, 200, 224, 0) 22%),
    radial-gradient(circle at 82% 68%, var(--frost-glow-soft), rgba(126, 200, 224, 0) 20%) !important;
}

.home-section-content {
  background-color: var(--body-bg) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(26, 90, 120, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 45% at 80% 100%, rgba(126, 200, 224, 0.1), transparent 50%),
    linear-gradient(165deg, #0a0d12 0%, #0c1520 45%, #121820 100%) !important;
  background-size: auto;
  background-position: center;
}

.why-infiniti-card,
.growth-solution-grid {
  background-color: #121820 !important;
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(26, 90, 120, 0.35), transparent 62%),
    radial-gradient(circle at 15% 20%, rgba(126, 200, 224, 0.12), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(61, 143, 181, 0.14), transparent 40%),
    linear-gradient(145deg, #0a0d12 0%, #121820 40%, #151c24 100%) !important;
  background-size: auto;
  background-position: center;
}

.section-cta,
.section-faq,
.cta-section-2 {
  background-color: var(--body-bg) !important;
  background-image:
    linear-gradient(180deg, rgba(10, 13, 18, 0.72), rgba(10, 13, 18, 0.88)),
    url(../images/ui/cta-bg.webp) !important;
  background-size: cover;
  background-position: center;
}

.cta-section-2 {
  background-image:
    linear-gradient(180deg, rgba(10, 13, 18, 0.72), rgba(10, 13, 18, 0.88)),
    url(../images/ui/CTA.png) !important;
}

.featured-section,
.section-14.hero-section,
.hero-sections.hero-section {
  background-image:
    linear-gradient(180deg, rgba(10, 13, 18, 0.72), rgba(10, 13, 18, 0.88)),
    url(../images/ui/sitebg-optimized2.jpg) !important;
  background-size: cover;
}

.section-16,
.section-19,
.section-33.authors-section,
.category-page-wrapper {
  background-image:
    linear-gradient(180deg, rgba(10, 13, 18, 0.72), rgba(10, 13, 18, 0.88)),
    url(../images/ui/backgroundimag.png) !important;
  background-size: cover;
}

.section-22 {
  background-image:
    linear-gradient(180deg, rgba(10, 13, 18, 0.72), rgba(10, 13, 18, 0.88)),
    url(../images/ui/Section.png) !important;
  background-size: cover;
}

/* About hero underline graphic — quieter, matches muted home accents */
.image-10 {
  opacity: 0.35 !important;
  filter: brightness(0.55) saturate(0.65) !important;
}

.vacancy-section {
  background:
    linear-gradient(180deg, rgba(10, 13, 18, 0.72), rgba(10, 13, 18, 0.88)),
    radial-gradient(80% 80% at 10% 10%, rgba(126, 200, 224, 0.18), transparent 60%),
    radial-gradient(70% 70% at 90% 15%, rgba(61, 143, 181, 0.14), transparent 55%),
    url("../images/ui/public.jpg") center top / cover no-repeat,
    var(--body-bg) !important;
}

/* CTA buttons — one hover effect only: bright frost glow (no slide overlay) */
.button:not(.outline),
.button-main,
.button-main-2,
.button-primary-2,
.button-animated,
.button-animated-2,
.button-animated-4,
.button-animated-5,
.button-animated-6,
.button-animated-7,
.button-animated-8,
.button-animated-9,
.button-animated-10,
.button-animated-11,
.button-animated-12,
.button-animated-13,
.button-animated-14,
.button-animated-15,
.button-animated-16,
.button-animated-profitsharing,
.login__btn.btn-gold,
.btn-primary,
.lead-form .btn-gold {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(10, 13, 18, 0.4);
  background-image: linear-gradient(117deg, #0680a8 0%, #1ec8e8 48%, #5ef0ff 100%) !important;
  border-radius: 4px !important;
  overflow: visible !important;
  transform: none !important;
  transition:
    box-shadow 0.28s ease,
    background-image 0.28s ease,
    filter 0.28s ease,
    color 0.2s ease !important;
  box-shadow: none;
  filter: none;
}

.button:not(.outline):hover,
.button:not(.outline):focus-visible,
.button-main:hover,
.button-main-2:hover,
.button-primary-2:hover,
.button-animated:hover,
.button-animated-2:hover,
.button-animated-4:hover,
.button-animated-5:hover,
.button-animated-6:hover,
.button-animated-7:hover,
.button-animated-8:hover,
.button-animated-9:hover,
.button-animated-10:hover,
.button-animated-11:hover,
.button-animated-12:hover,
.button-animated-13:hover,
.button-animated-14:hover,
.button-animated-15:hover,
.button-animated-16:hover,
.button-animated-profitsharing:hover,
.login__btn.btn-gold:hover,
.btn-primary:hover,
.lead-form .btn-gold:hover {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(10, 13, 18, 0.65);
  background-image: linear-gradient(117deg, #0a9bc8 0%, #3de8ff 50%, #9af5ff 100%) !important;
  transform: none !important;
  box-shadow:
    0 0 14px 3px rgba(61, 232, 255, 0.95),
    0 0 28px 8px rgba(34, 211, 238, 0.85),
    0 0 48px 14px rgba(14, 165, 201, 0.55),
    0 0 72px 20px rgba(0, 220, 255, 0.38) !important;
  filter: none;
}

/* About wrappers: fit content so glow isn't clipped into a side trail */
.button_animated {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100%;
  overflow: visible !important;
  position: relative;
}

.button_animated .button-animated.b2,
.button_animated .button-animated.b3 {
  position: relative !important;
  width: auto !important;
  min-width: 12rem;
}

.button:not(.outline) .button-text,
.button:not(.outline) > div,
.button-main .button-text,
.button-animated-7 .button-text,
.button-animated-7 .button-label-6,
.button-animated-11 .button-text,
.login__btn.btn-gold .login__btn-label,
.btn-primary .login__btn-label,
.btn-primary__label,
.btn-primary > div,
.lead-form .btn-gold .btn-label {
  position: relative;
  z-index: 2;
  color: #fff !important;
}

/* Kill old Webflow slide overlays (IX still tries to animate them) */
.button-main-hover,
.button-hover-background-2,
.button-hover-background-5,
.button-hover-background-9,
.button-hover-background-10,
.design-system-zignaly--button-hover-background-2,
.design-system-zignaly--button-main-hover {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  inset: auto !important;
  left: -9999px !important;
  top: auto !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  pointer-events: none !important;
  background: none !important;
  box-shadow: none !important;
}

.button-animated.for-articles.tab-button:not(.active) {
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

a,
.link,
.nav-menu-link {
  --link-frost: #3de8ff;
}

/* Metrics banner */
.simple-info-card {
  background-color: #121820 !important;
  background-image:
    radial-gradient(ellipse 70% 120% at 0% 50%, rgba(26, 90, 120, 0.35), transparent 55%),
    radial-gradient(ellipse 70% 120% at 100% 50%, rgba(126, 200, 224, 0.14), transparent 55%),
    linear-gradient(105deg, #0a0d12 0%, #121820 45%, #151c24 100%) !important;
  border: 1px solid rgba(126, 200, 224, 0.12);
  border-radius: 4px !important;
}

.info-it-title {
  color: #a8b4c0 !important;
}

.info-it-text {
  color: #e8eef4 !important;
}

/* Section title underline: charcoal → frost (no magenta) */
.hero-title-lower-border {
  background-image: linear-gradient(
    90deg,
    rgba(10, 13, 18, 0) 0%,
    #0680a8 22%,
    #3de8ff 52%,
    #9af5ff 78%,
    rgba(10, 13, 18, 0) 100%
  ) !important;
}

/* Slightly more angular UI */
.growth-solution-grid,
.service-details-card,
.service-card,
.why-infiniti-card,
.signup-card,
.faq-item,
.button-main,
.button-main-2,
.button-primary-2,
.button-animated,
.button-animated-2,
.button,
.nav-menu,
.menu-bg,
.hero-concept-label {
  border-radius: 4px !important;
}

.growth-solution-icon,
.service-details-icon {
  border-radius: 4px !important;
}

/* Original multi-color icons (How Infiniti Works + Service Details) */
.growth-solution-card:nth-child(1) .growth-solution-icon,
.service-details-card:nth-child(1) .service-details-icon {
  background-color: #4053c1 !important;
}
.growth-solution-card:nth-child(2) .growth-solution-icon,
.service-details-card:nth-child(2) .service-details-icon {
  background-color: #7d33d6 !important;
}
.growth-solution-card:nth-child(3) .growth-solution-icon,
.service-details-card:nth-child(3) .service-details-icon {
  background-color: #0e9f7e !important;
}
.growth-solution-card:nth-child(4) .growth-solution-icon,
.service-details-card:nth-child(4) .service-details-icon {
  background-color: #c2590a !important;
}

.button-main-hover,
.button-hover-background-5 {
  border-radius: 3px !important;
}

/* Trusted By / testimonials — dark frost so light logos stay readable */
.section-trusted-by .testimonial-viewer.background {
  background-image:
    linear-gradient(180deg, rgba(10, 13, 18, 0) 40%, rgba(10, 13, 18, 0.35) 100%),
    linear-gradient(299deg, #0a0d12 0%, #0c1520 45%, #121820 100%) !important;
  border: 1px solid rgba(126, 200, 224, 0.12);
  border-radius: 4px !important;
}

.section-trusted-by .testimonial-leftbox,
.section-trusted-by .testimonial-leftbox.rounded-sm {
  background-image: linear-gradient(272deg, #0c1520 0%, #0680a8 100%) !important;
  border-radius: 4px 0 0 4px !important;
}

.section-trusted-by .title-md-7.testimonial {
  color: #7af0ff !important;
}

.section-trusted-by .title-xxs-new.quote {
  color: #e8eef4 !important;
}

.section-trusted-by .quote-wrap {
  border-radius: 4px !important;
}

.section-trusted-by .tab-link-testimonial {
  border-radius: 4px !important;
}

.section-trusted-by .tab-link-testimonial:hover,
.section-trusted-by .tab-link-testimonial.w--current {
  background-color: #0680a8 !important;
  background-image: linear-gradient(90deg, #0680a8 0%, #3de8ff 78%, transparent 79%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.section-trusted-by .tab-logo-wrap .logos-off,
.section-trusted-by .logos-off {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.section-trusted-by .quote-logo {
  filter: none;
  opacity: 1;
}

@media (max-width: 991px) {
  .section-trusted-by .testimonial-leftbox,
  .section-trusted-by .testimonial-leftbox.rounded-sm {
    border-radius: 4px 4px 0 0 !important;
  }

  .section-trusted-by .tab-link-testimonial:hover,
  .section-trusted-by .tab-link-testimonial.w--current {
    clip-path: none;
    background-image: none !important;
    background-color: #0680a8 !important;
  }
}

/* Signup hero — keep original mockup image clear */
.hero-media img {
  filter: none !important;
}

/* Footer — charcoal palette (was old navy #12152e) */
.footer-new-dark-with-cta,
.footer-new-dark-with-cta.div-block-116,
.work-site-footer .footer-new-dark-with-cta {
  background-color: #0a0d12 !important;
  background-image: none !important;
  border-top: 1px solid rgba(61, 232, 255, 0.1);
  color: #8a96a4 !important;
}

.footer-new-nav-heading,
.footer-new-nav-heading.margin-bottom.margin-sm {
  color: #b6c4d2 !important;
}

.footer-new-link-gray,
.footer-new-link-gray.w--current {
  color: #8a96a4 !important;
}

.footer-new-link-gray:hover {
  color: #3de8ff !important;
}

.text-color-maintext,
.footer-company-name {
  color: #f2f7fb !important;
}

.text-color-maintext2,
.footer-company-year,
.text-block-77,
.text-block-86,
.div-block-116 {
  color: #8a96a4 !important;
}