/* Premium type system — Jost (thin/light) throughout, Inter as fallback.
   @import must stay at the very top of the file. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700&family=Inter:wght@400;500&family=Cormorant+Garamond:wght@500;600&display=swap');

:root {
  --nf-primary: #1d4e89;
  --nf-primary-dark: #16386a;
  --nf-primary-soft: #e7edfa;
  --nf-secondary: #1d4e89;
  --nf-ink: #0f172a;
  --nf-muted: #475569;
  --nf-surface: #f4f8f9;
  --nf-surface-alt: #eaf2f4;
}

body {
  color: var(--nf-ink);
}

.c-button,
.footer-heading-button,
.submit-button-2 {
  background-color: var(--nf-primary) !important;
  color: #ffffff !important;
}

.c-button:hover,
.footer-heading-button:hover,
.submit-button-2:hover {
  background-color: var(--nf-primary-dark) !important;
}

.nav-link:hover,
.link-2:hover,
.nav-dropdown_toggle:hover,
.nav-dropdown_link:hover,
.footer-text-link:hover,
a.link:hover {
  color: var(--nf-primary) !important;
}

/* Cohesive navy family for the label bars (replaces the template rainbow).
   Subtle shade variation keeps cards distinct; orange stays a brand accent. */
.product-tool.cc-accounts > .product-tool_inner {
  background: #14315c !important;
  color: #eaf1fb !important;
}

.product-tool.cc-payments > .product-tool_inner {
  background: #1a4676 !important;
  color: #eaf1fb !important;
}

.product-tool.cc-cards > .product-tool_inner {
  background: #10395c !important;
  color: #eaf1fb !important;
}

.product-tool.cc-credit > .product-tool_inner {
  background: #204f7e !important;
  color: #eaf1fb !important;
}

.product-tool.cc-savings > .product-tool_inner {
  background: #0f2b4a !important;
  color: #eaf1fb !important;
}

/* Top panels: one calm, brand-neutral blue-grey tint across all cards. */
.product-tool.cc-accounts > .product-tool_details,
.product-tool.cc-payments > .product-tool_details,
.product-tool.cc-cards > .product-tool_details,
.product-tool.cc-credit > .product-tool_details,
.product-tool.cc-savings > .product-tool_details {
  background: #eaeff5 !important;
  color: var(--nf-ink) !important;
}

.business-slide.cc-purple-bg {
  background: #334e92 !important;
}

.business-slide.cc-green-bg {
  background: #234a5d !important;
}

.business-slide.cc-blue-bg {
  background: #dcebf2 !important;
}

.business-slide.cc-yellow-bg {
  background: #f0f4f7 !important;
}

.business-img_container.cc-blue-bg,
.business-img_container.cc-green-bg,
.business-img_container.cc-purple-bg,
.business-img_container.cc-yellow-bg,
.business-img_container.cc-white-bg {
  background: #f2f7fa !important;
}

.developer-tool.cc-accounts,
.developer-tool.cc-payments,
.developer-tool.cc-exports,
.developer-tool.cc-credit-js {
  background: var(--nf-primary-soft) !important;
  color: var(--nf-primary-dark) !important;
}

.compliance-block,
.footer-wrapper.cc-white-bg {
  background: var(--nf-surface-alt) !important;
}

.compliance-list_inner,
.product-tool,
.business-slide,
.footer-heading {
  border-radius: 14px;
}

.footer-wrapper.cc-white-bg .footer-head_top,
.footer-wrapper.cc-payments .footer-head_top,
.footer-wrapper.cc-credit .footer-head_top,
.footer-wrapper.cc-savings .footer-head_top {
  background: var(--nf-primary-dark) !important;
  color: #ffffff !important;
}

.footer-wrapper.cc-white-bg {
  color: #dbe7ff;
  background: #0b1635 !important;
}

/* Footer inner panel was dark green (Anchor theme) — make it deep navy. */
.footer-inner {
  background: #0b1a38 !important;
}

.footer-wrapper.cc-white-bg .footer-heading-title,
.footer-wrapper.cc-white-bg .footer-heading-text,
.footer-wrapper.cc-white-bg .footer-links-heading,
.footer-wrapper.cc-white-bg .footer-text-link,
.footer-wrapper.cc-white-bg .foot-notes,
.footer-wrapper.cc-white-bg .address-heading,
.footer-wrapper.cc-white-bg .address-text,
.footer-wrapper.cc-white-bg .newletter-heading,
.footer-wrapper.cc-white-bg .link {
  color: #dbe7ff !important;
}

.footer-wrapper.cc-white-bg .text-field-2,
.footer-wrapper.cc-white-bg .submit-button-2 {
  border: 1px solid rgba(219, 231, 255, 0.3);
}

.product-tool_image img,
.business-slide_img img {
  object-fit: cover;
}

.partner-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Client logos in the home page strip (same set as myneuraai.com). */
.partner-img {
  max-width: 120px;
}

.partner-logo {
  display: block;
  max-width: 100%;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.75;
}

.partner-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #475569;
  white-space: nowrap;
}

/* Header logo: NEURAFORT wordmark (blue + orange fort) with a cursive
   "Group" signature beneath it. Wordmark sits at the top; ::after adds Group. */
.c-logo {
  background-image: url('../images/neurafort-logo.png?v=1') !important;
  background-repeat: no-repeat !important;
  background-size: 230px auto !important;
  background-position: left top !important;
  width: 230px !important;
  height: 52px !important;
  position: relative !important;
}
.c-logo::after {
  content: "GROUP";
  position: absolute;
  left: 0;
  right: 0;
  top: 33px;
  text-align: center;
  text-indent: 0.4em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  line-height: 1;
  color: #46587e;
}

@media screen and (max-width: 767px) {
  .c-logo {
    width: 196px !important;
    height: 44px !important;
    background-size: 196px auto !important;
  }
  .c-logo::after { top: 28px; font-size: 12px; }

}

@media screen and (max-width: 479px) {
  .c-logo {
    width: 172px !important;
    height: 40px !important;
    background-size: 172px auto !important;
  }
  .c-logo::after { top: 25px; font-size: 11px; letter-spacing: 0.3em; }

}

/* Footer wordmark (white NEURAFORT + orange fort on the dark footer).
   Height-constrained, width auto to keep the ~8:1 aspect ratio. */
.footer-logo {
  height: 26px !important;
  width: auto !important;
  max-width: 220px !important;
}

/* ===== Global type system: Jost (thin/light premium) =====
   Overrides the Webflow base fonts (Teg / Dmsans) everywhere. Icon fonts
   (icomoon, vamtam-theme, Webflow icons) are intentionally not targeted. */
body,
p, a, li, span, label, blockquote, figcaption, cite, strong, em,
input, textarea, select, button,
[class*="text"], [class*="paragraph"], [class*="description"],
[class*="link"], [class*="button"], [class*="label"],
[class*="nav"], [class*="menu"], [class*="body"], [class*="address"],
[class*="field"], [class*="input"] {
  font-family: 'Jost', 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Headings use the light weight for the thin, premium display look. */
h1, h2, h3, h4, h5, h6,
[class*="title"], [class*="-header"], [class*="header-"],
.hero-header, .horizontal-header {
  font-family: 'Jost', 'Inter', system-ui, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.005em;
}

/* Hero section heading ("One operating system…") — extra-thin Jost per request.
   Constrain width so the thinner (narrower) font keeps the original 3-line block. */
.uc-h2 {
  font-family: 'Jost', 'Inter', system-ui, sans-serif !important;
  font-weight: 200 !important;
  max-width: 800px;
}

/* Hero subtitle — force two balanced lines (was three; thin font is narrow). */
.hero-cta_subtext {
  max-width: 480px !important;
}
.hero-cta_subtext .sm-paragraph {
  text-wrap: balance;
}

/* Hero heading — each lane word its own vibrant color, kept thin. */
.uc-h2 .uc-products,
.uc-h2 .uc-studio,
.uc-h2 .uc-labs {
  -webkit-text-fill-color: currentColor;
}
.uc-h2 .uc-products { color: #2563eb !important; }
.uc-h2 .uc-studio { color: #f97316 !important; }
.uc-h2 .uc-labs { color: #10b981 !important; }

/* Home: Neura AI intro panel (replaces the old code-editor mock). */
.nf-neura-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 560px;
  padding: 48px;
  border-radius: 14px;
  background: #14315c;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 18px 40px rgba(15, 23, 42, 0.12);
}

.nf-neura-panel_eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b9cbe8;
}

.nf-neura-panel_title {
  margin: 0;
  font-size: 44px;
  line-height: 1.05;
  color: #ffffff;
}

.nf-neura-panel_text {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #dbe5f5;
}

.nf-neura-panel_button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: #ffffff;
  color: #14315c !important;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.nf-neura-panel_button:hover {
  background: #e7edfa;
}

.nf-neura-panel_button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

@media screen and (max-width: 767px) {
  .nf-neura-panel {
    padding: 28px 24px;
  }

  .nf-neura-panel_title {
    font-size: 34px;
  }

}

/* Footer: plain-text entries (no link) in the Global Delivery column. */
.footer-text-link.nf-footer-plain {
  margin: 0;
  cursor: default;
}

/* Mobile menu button (inline SVG; replaces the Webflow Lottie icon). */
.nav-menu_btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nf-ink);
  cursor: pointer;
}

.nav-menu_icon {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.nav-menu_close,
.navbar.cc-active .nav-menu_open {
  display: none;
}

.navbar.cc-active .nav-menu_close {
  display: inline;
}

.nav-menu_btn:focus-visible {
  outline: 3px solid var(--nf-primary);
  outline-offset: 4px;
  border-radius: 4px;
}