/* Keep fixed dialogs attached to the viewport instead of the page scroll container. */
#centroid-page-root {
  overflow-x: clip !important;
  overflow-y: visible !important;
  min-height: 100vh;
}

#centroid-brief-dialog-overlay {
  isolation: isolate !important;
  pointer-events: auto !important;
}

#centroid-brief-dialog-card,
#centroid-brief-dialog-card button[aria-label="Close field guide"] {
  pointer-events: auto !important;
}

/*
 * Hide WordPress / theme / Elementor chrome under the landing page.
 * The extra white strip at the bottom is the theme footer sitting after
 * CENTROID's own dark footer.
 */
html.centroid-landing-active,
html:has(#centroid-page-root),
body.centroid-landing-active {
  background: #071637 !important;
}

html.centroid-landing-active .site-content,
html.centroid-landing-active #content,
html.centroid-landing-active .content-area,
html.centroid-landing-active .elementor-location-single,
html:has(#centroid-page-root) .site-content,
html:has(#centroid-page-root) #content,
html:has(#centroid-page-root) .content-area {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html.centroid-landing-active .site-footer,
html.centroid-landing-active footer#colophon,
html.centroid-landing-active footer.site-footer,
html.centroid-landing-active .ast-footer-wrap,
html.centroid-landing-active .ast-small-footer,
html.centroid-landing-active .site-below-footer-wrap,
html.centroid-landing-active .hfg-footer,
html.centroid-landing-active #footer,
html.centroid-landing-active .elementor-location-footer,
html.centroid-landing-active .e-n-footer,
html.centroid-landing-active .wp-block-template-part[data-area="footer"],
html.centroid-landing-active .wp-block-group.has-global-padding:has(> footer),
html:has(#centroid-page-root) .site-footer,
html:has(#centroid-page-root) footer#colophon,
html:has(#centroid-page-root) footer.site-footer,
html:has(#centroid-page-root) .ast-footer-wrap,
html:has(#centroid-page-root) .ast-small-footer,
html:has(#centroid-page-root) .site-below-footer-wrap,
html:has(#centroid-page-root) .hfg-footer,
html:has(#centroid-page-root) #footer,
html:has(#centroid-page-root) .elementor-location-footer,
html:has(#centroid-page-root) .e-n-footer,
html:has(#centroid-page-root) .wp-block-template-part[data-area="footer"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  visibility: hidden !important;
}

/* Keep CENTROID's own footer visible. */
#centroid-page-root footer {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}

/* Empty Elementor / theme blocks after the landing page. */
html:has(#centroid-page-root) .elementor-widget:has(#centroid-page-root) ~ *,
html:has(#centroid-page-root) .e-con:has(#centroid-page-root) ~ .e-con:not(:has(#centroid-page-root)) {
  display: none !important;
}

#centroid-page-root {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==============================================================================
 * UNIFIED MODAL FORMS FORMATTING
 * Ensures Demo Request Form and Benchmark Unlock Form have 100% identical
 * card styling, typography, input dimensions, focus rings, and button appearance.
 * ============================================================================== */
#centroid-demo-dialog-card,
#centroid-unlock-dialog-card {
  max-width: 36rem !important; /* max-w-xl */
  border-radius: 1.5rem !important; /* rounded-3xl */
  background-color: #f7f9fc !important;
  padding: 1.75rem 2rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  #centroid-demo-dialog-card,
  #centroid-unlock-dialog-card {
    padding: 1.25rem 1.25rem !important;
    border-radius: 1rem !important;
  }
}

#centroid-demo-form,
#centroid-unlock-form {
  margin-top: 1.25rem !important;
}

#centroid-demo-form label,
#centroid-unlock-form label {
  display: block !important;
  margin-bottom: 0.85rem !important;
}

#centroid-demo-form label > span,
#centroid-unlock-form label > span {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #5c6d8e !important;
  margin-bottom: 0.375rem !important;
}

#centroid-demo-form input[type="text"],
#centroid-demo-form input[type="email"],
#centroid-demo-form select,
#centroid-unlock-form input[type="text"],
#centroid-unlock-form input[type="email"] {
  height: 2.75rem !important; /* 44px (h-11) */
  width: 100% !important;
  border-radius: 0.75rem !important; /* 12px (rounded-xl) */
  border: 1px solid #ccd8eb !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  padding: 0 0.875rem !important;
  font-size: 0.875rem !important; /* 14px (text-sm) */
  color: #10295b !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

#centroid-demo-form select {
  padding-right: 2rem !important;
  cursor: pointer !important;
}

#centroid-demo-form textarea {
  width: 100% !important;
  border-radius: 0.75rem !important;
  border: 1px solid #ccd8eb !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.875rem !important;
  color: #10295b !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
  resize: none !important;
  min-height: 4.5rem !important;
}

#centroid-demo-form input:focus,
#centroid-demo-form select:focus,
#centroid-demo-form textarea:focus,
#centroid-unlock-form input:focus {
  border-color: #dd5201 !important;
  box-shadow: 0 0 0 3px rgba(221, 82, 1, 0.12) !important;
}

#centroid-demo-form button[type="submit"],
#centroid-unlock-form button {
  height: 3rem !important; /* 48px (h-12) */
  width: 100% !important;
  border-radius: 9999px !important;
  background-color: #dd5201 !important;
  background: #dd5201 !important;
  color: #ffffff !important;
  font-size: 0.875rem !important; /* 14px */
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 4px 14px rgba(221, 82, 1, 0.35) !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
  margin-top: 0.75rem !important;
}

#centroid-demo-form button[type="submit"]:hover,
#centroid-unlock-form button:hover {
  background-color: #b04000 !important;
  background: #b04000 !important;
  transform: translateY(-1px) !important;
}

#centroid-demo-form p,
#centroid-unlock-form p {
  text-align: center !important;
  font-size: 0.6875rem !important; /* 11px */
  line-height: 1rem !important;
  color: #8390a7 !important;
  margin-top: 0.5rem !important;
}


/* ==============================================================================
 * HERO SECTION COLOR THEME: Dark Blue (#081b48) & Brand Orange (#dd5201)
 * ============================================================================== */
#centroid-page-root #top,
html:has(#centroid-page-root) #centroid-page-root #top,
.elementor #centroid-page-root #top {
  background-color: #081b48 !important;
  background: radial-gradient(ellipse 80% 70% at 85% 35%, rgba(16, 41, 91, 0.85) 0%, rgba(8, 27, 72, 0.95) 50%, #081b48 100%) !important;
  color: #ffffff !important;
}

#centroid-page-root #top h1,
.elementor #centroid-page-root #top h1 {
  color: #ffffff !important;
}

#centroid-page-root #top h1 span,
.elementor #centroid-page-root #top h1 span {
  color: #ff9a67 !important;
  background: linear-gradient(135deg, #ffab7d 0%, #ff9a67 40%, #dd5201 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

#centroid-page-root #top p,
.elementor #centroid-page-root #top p {
  color: #b7c5e1 !important;
}

#centroid-page-root #top #top-eyebrow,
.elementor #centroid-page-root #top #top-eyebrow {
  background-color: #0b214f !important;
  background: #0b214f !important;
  border-color: rgba(255, 154, 103, 0.35) !important;
  color: #ffab7d !important;
}

#centroid-page-root #top #top-eyebrow span,
.elementor #centroid-page-root #top #top-eyebrow span {
  color: #ff9a67 !important;
}

#centroid-page-root #top .centroid-btn-primary,
.elementor #centroid-page-root #top .centroid-btn-primary {
  background-color: #dd5201 !important;
  background: #dd5201 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px -2px rgba(221, 82, 1, 0.45) !important;
  border: none !important;
}

#centroid-page-root #top .centroid-btn-primary:hover,
.elementor #centroid-page-root #top .centroid-btn-primary:hover {
  background-color: #b04000 !important;
  background: #b04000 !important;
  box-shadow: 0 6px 20px -2px rgba(221, 82, 1, 0.55) !important;
}

#centroid-page-root #top .centroid-btn-secondary,
.elementor #centroid-page-root #top .centroid-btn-secondary {
  background-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  backdrop-filter: blur(4px) !important;
}

#centroid-page-root #top .centroid-btn-secondary:hover,
.elementor #centroid-page-root #top .centroid-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

#centroid-page-root #top .centroid-btn-secondary span,
.elementor #centroid-page-root #top .centroid-btn-secondary span {
  color: #ffab7d !important;
}

#centroid-page-root #top #top-stats-row,
.elementor #centroid-page-root #top #top-stats-row {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}

#centroid-page-root #top #top-stats-row > div {
  border-left-color: rgba(255, 255, 255, 0.15) !important;
}

#centroid-page-root #top #top-stats-row strong,
.elementor #centroid-page-root #top #top-stats-row strong {
  color: #ffffff !important;
}

#centroid-page-root #top #top-stats-row span,
.elementor #centroid-page-root #top #top-stats-row span {
  color: #94a3b8 !important;
}

#centroid-page-root #top #top-stats-row > div:nth-child(3) strong {
  color: #ffab7d !important;
}

#centroid-page-root #top #top-stats-row > div:nth-child(3) > div:first-child {
  background-color: rgba(221, 82, 1, 0.2) !important;
  color: #ff9a67 !important;
}

/* ==============================================================================
 * HEADER COLOR THEME: Dark Blue (#081b48) matching Hero Section
 * ============================================================================== */
#centroid-page-root header,
header[data-c-id="path_div_header"],
.centroid-landing-active header {
  background-color: #081b48 !important;
  background: rgba(8, 27, 72, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

#centroid-page-root header a,
header[data-c-id="path_div_header"] a,
.centroid-landing-active header a {
  color: #cbd5e1 !important;
}

#centroid-page-root header a:hover,
header[data-c-id="path_div_header"] a:hover,
.centroid-landing-active header a:hover {
  color: #ff9a67 !important;
}

#centroid-page-root header nav,
header[data-c-id="path_div_header"] nav {
  background-color: transparent !important;
}

#centroid-page-root header button.centroid-btn-primary,
header[data-c-id="path_div_header"] button.centroid-btn-primary,
.centroid-landing-active header button.centroid-btn-primary {
  background-color: #dd5201 !important;
  background: #dd5201 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 10px rgba(221, 82, 1, 0.35) !important;
  border: none !important;
}

#centroid-page-root header button.centroid-btn-primary:hover,
header[data-c-id="path_div_header"] button.centroid-btn-primary:hover,
.centroid-landing-active header button.centroid-btn-primary:hover {
  background-color: #b04000 !important;
  background: #b04000 !important;
}

#centroid-page-root header button[aria-label="Open navigation"],
#centroid-page-root header button[aria-label="Close navigation"] {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}



/* ==============================================================================
 * FIX INVISIBLE THEME HEADER OVERLAY & ENABLE HERO BUTTON CLICKS
 * Eliminates any theme-generated transparent/sticky headers and ensures
 * hero buttons are always in the foreground with pointer-events enabled.
 * ============================================================================== */
html.centroid-landing-active .site-header,
html.centroid-landing-active header#masthead,
html.centroid-landing-active header.site-header,
html.centroid-landing-active .ast-main-header-wrap,
html.centroid-landing-active .ast-theme-transparent-header #masthead,
html.centroid-landing-active .elementor-location-header,
html.centroid-landing-active .e-n-header,
html.centroid-landing-active .hfg-header,
html.centroid-landing-active #masthead,
html:has(#centroid-page-root) .site-header,
html:has(#centroid-page-root) header#masthead,
html:has(#centroid-page-root) header.site-header,
html:has(#centroid-page-root) .ast-main-header-wrap,
html:has(#centroid-page-root) .ast-theme-transparent-header #masthead,
html:has(#centroid-page-root) .elementor-location-header,
html:has(#centroid-page-root) .e-n-header,
html:has(#centroid-page-root) .hfg-header,
html:has(#centroid-page-root) #masthead {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -999 !important;
}

/* Ensure CENTROID header height is constrained to 3.85rem so it cannot overlap hero */
#centroid-page-root header,
header[data-c-id="path_div_header"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  height: 3.85rem !important;
  max-height: 3.85rem !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* Hero section and interactive controls stacking context */
#centroid-page-root #top {
  position: relative !important;
  z-index: 1 !important;
}

#centroid-page-root #top-hero-grid {
  position: relative !important;
  z-index: 10 !important;
}

#centroid-page-root #top-hero-grid > div:first-child,
#centroid-page-root .centroid-rise {
  position: relative !important;
  z-index: 40 !important;
  pointer-events: auto !important;
}

#centroid-page-root #top .centroid-btn-primary,
#centroid-page-root #top .centroid-btn-secondary,
#centroid-page-root #top a,
#centroid-page-root #top button {
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Ensure background glows never block mouse events */
#centroid-page-root #top div[style*="radial-gradient"],
#centroid-page-root #top .pointer-events-none {
  pointer-events: none !important;
}

/* Lower right visual column z-index so it cannot cover left column buttons */
#centroid-page-root .centroid-drift {
  z-index: 5 !important;
  pointer-events: auto !important;
}

/* ==============================================================================
 * UNIFIED 30-MINUTE DEMO BUTTONS - 100% IDENTICAL ACROSS THE ENTIRE PAGE
 * ============================================================================== */
#centroid-page-root .centroid-btn-primary,
#centroid-page-root button[onclick*="centroidOpenDemoModal"],
#centroid-page-root .centroid-trigger-demo-btn,
button.centroid-trigger-demo-btn,
.centroid-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 0.72rem 1.85rem !important;
  border-radius: 9999px !important;
  background-color: #dd5201 !important;
  background: #dd5201 !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(221, 82, 1, 0.35) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

#centroid-page-root .centroid-btn-primary:hover,
#centroid-page-root button[onclick*="centroidOpenDemoModal"]:hover,
#centroid-page-root .centroid-trigger-demo-btn:hover,
button.centroid-trigger-demo-btn:hover,
.centroid-btn-primary:hover {
  background-color: #b04000 !important;
  background: #b04000 !important;
  box-shadow: 0 6px 20px rgba(221, 82, 1, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* Hero Secondary Button: See how it works */
#centroid-page-root #top .centroid-btn-secondary,
.elementor #centroid-page-root #top .centroid-btn-secondary,
.centroid-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 0.72rem 1.75rem !important;
  border-radius: 9999px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  backdrop-filter: blur(4px) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

#centroid-page-root #top .centroid-btn-secondary:hover,
.elementor #centroid-page-root #top .centroid-btn-secondary:hover,
.centroid-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}


/* ==============================================================================
 * 1. FIX INVISIBLE LAYER: DISABLE POINTER EVENTS ON HERO VISUAL DRIFT
 * div.centroid-drift was spanning 1102px and sitting over the left hero column.
 * Forcing pointer-events: none guarantees it can NEVER intercept mouse clicks!
 * ============================================================================== */
#centroid-page-root .centroid-drift,
#centroid-page-root #top-hero-grid > div:nth-child(2),
div.centroid-drift {
  pointer-events: none !important;
  z-index: 1 !important;
}

#centroid-page-root .centroid-drift * {
  pointer-events: none !important;
}

/* Elevate left column (text, eyebrow, heading, and buttons) to foreground */
#centroid-page-root .centroid-rise,
#centroid-page-root #top-hero-grid > div:first-child {
  position: relative !important;
  z-index: 60 !important;
  pointer-events: auto !important;
}

#centroid-page-root .centroid-rise *,
#centroid-page-root #top-hero-grid > div:first-child * {
  pointer-events: auto !important;
}

#centroid-page-root #top .centroid-btn-primary,
#centroid-page-root #top .centroid-btn-secondary,
#centroid-page-root #top a,
#centroid-page-root #top button {
  position: relative !important;
  z-index: 70 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Ensure proper grid order and spacing on all screen sizes */
#centroid-page-root #top-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  gap: 2rem !important;
  align-items: center !important;
}

@media (max-width: 767px) {
  #centroid-page-root #top-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  #centroid-page-root #top-hero-grid > div:first-child {
    order: 1 !important;
  }
  #centroid-page-root #top-hero-grid > div:nth-child(2) {
    order: 2 !important;
  }
}

/* ==============================================================================
 * 2. EXPAND AND CLEAN UP DEMO REQUEST & UNLOCK MODAL FORMS
 * Enlarged width (max-w-2xl / 720px), generous padding, clean inputs, no mess.
 * ============================================================================== */
#centroid-demo-dialog-card,
#centroid-unlock-dialog-card {
  max-width: 44rem !important; /* 704px - spacious and executive */
  width: 95% !important;
  border-radius: 1.75rem !important;
  background-color: #f7f9fc !important;
  padding: 2.25rem 2.5rem !important;
  box-shadow: 0 25px 50px -12px rgba(7, 24, 61, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  max-height: min(92vh, 780px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  #centroid-demo-dialog-card,
  #centroid-unlock-dialog-card {
    padding: 1.5rem 1.25rem !important;
    border-radius: 1.25rem !important;
    width: 100% !important;
  }
}

#centroid-demo-dialog-card h2,
#centroid-unlock-dialog-card h2 {
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
  color: #10295b !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

#centroid-demo-dialog-card p.centroid-modal-sub,
#centroid-unlock-dialog-card p.centroid-modal-sub {
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  color: #61708b !important;
  margin-bottom: 1.5rem !important;
}

#centroid-demo-form,
#centroid-unlock-form {
  margin-top: 1.5rem !important;
}

#centroid-demo-form .grid,
#centroid-unlock-form .grid {
  gap: 1rem !important;
  margin-bottom: 1rem !important;
}

#centroid-demo-form label,
#centroid-unlock-form label {
  display: block !important;
  margin-bottom: 1rem !important;
}

#centroid-demo-form label > span,
#centroid-unlock-form label > span {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #4b5b7b !important;
  margin-bottom: 0.45rem !important;
}

#centroid-demo-form input[type="text"],
#centroid-demo-form input[type="email"],
#centroid-demo-form select,
#centroid-unlock-form input[type="text"],
#centroid-unlock-form input[type="email"] {
  height: 3rem !important; /* 48px */
  width: 100% !important;
  border-radius: 0.75rem !important;
  border: 1.5px solid #cbd7e9 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  padding: 0 1rem !important;
  font-size: 0.92rem !important;
  color: #10295b !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

#centroid-demo-form select {
  cursor: pointer !important;
  padding-right: 2.25rem !important;
}

#centroid-demo-form textarea {
  width: 100% !important;
  border-radius: 0.75rem !important;
  border: 1.5px solid #cbd7e9 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.92rem !important;
  color: #10295b !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
  min-height: 4.5rem !important;
  resize: vertical !important;
}

#centroid-demo-form input:focus,
#centroid-demo-form select:focus,
#centroid-demo-form textarea:focus,
#centroid-unlock-form input:focus {
  border-color: #dd5201 !important;
  box-shadow: 0 0 0 3px rgba(221, 82, 1, 0.15) !important;
}

#centroid-demo-form button[type="submit"],
#centroid-unlock-form button[type="submit"],
#centroid-unlock-form button {
  height: 3.25rem !important; /* 52px */
  width: 100% !important;
  border-radius: 9999px !important;
  background-color: #dd5201 !important;
  background: #dd5201 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  box-shadow: 0 6px 20px rgba(221, 82, 1, 0.38) !important;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
  margin-top: 1rem !important;
}

#centroid-demo-form button[type="submit"]:hover,
#centroid-unlock-form button[type="submit"]:hover,
#centroid-unlock-form button:hover {
  background-color: #b04000 !important;
  background: #b04000 !important;
  box-shadow: 0 8px 25px rgba(221, 82, 1, 0.48) !important;
  transform: translateY(-1px) !important;
}

/* ==============================================================================
 * 3. BOTTOM CTA DEMO BUTTON - LUXURIOUS & NOT SQUISHED
 * ============================================================================== */
#centroid-page-root .centroid-cta-demo-btn,
section.bg-\[\#dd5c20\] button.group,
section[class*="dd5c20"] button.group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0.85rem 2.25rem !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #081b48 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  border: none !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

#centroid-page-root .centroid-cta-demo-btn:hover,
section.bg-\[\#dd5c20\] button.group:hover,
section[class*="dd5c20"] button.group:hover {
  background-color: #081b48 !important;
  background: #081b48 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px -5px rgba(8, 27, 72, 0.5) !important;
}


/* ==============================================================================
 * CLEAN, SPACIOUS, EXECUTIVE DEMO REQUEST & BENCHMARK UNLOCK MODAL
 * ============================================================================== */
#centroid-demo-dialog-card,
#centroid-unlock-dialog-card {
  max-width: 640px !important;
  width: 95% !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 36px 36px 32px 36px !important;
  box-shadow: 0 25px 60px -15px rgba(8, 27, 72, 0.4), 0 0 0 1px rgba(226, 232, 240, 0.9) !important;
  border: 1px solid #e2e8f0 !important;
  max-height: min(92vh, 800px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  #centroid-demo-dialog-card,
  #centroid-unlock-dialog-card {
    padding: 24px 20px 24px 20px !important;
    border-radius: 18px !important;
    width: 100% !important;
  }
}

#centroid-demo-dialog-card h2,
#centroid-unlock-dialog-card h2 {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #10295b !important;
  letter-spacing: -0.04em !important;
  margin: 0.5rem 0 0.35rem 0 !important;
}

#centroid-demo-dialog-card h2 + p,
#centroid-unlock-dialog-card h2 + p {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: #64748b !important;
  margin: 0 0 1.5rem 0 !important;
  max-width: 100% !important;
}

#centroid-demo-form,
#centroid-unlock-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: 1.25rem !important;
}

#centroid-demo-form .grid,
#centroid-unlock-form .grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 0 !important;
}

@media (max-width: 600px) {
  #centroid-demo-form .grid,
  #centroid-unlock-form .grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

#centroid-demo-form label,
#centroid-unlock-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#centroid-demo-form label > span,
#centroid-unlock-form label > span {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #475569 !important;
  margin: 0 !important;
}

#centroid-demo-form input[type="text"],
#centroid-demo-form input[type="email"],
#centroid-demo-form select,
#centroid-unlock-form input[type="text"],
#centroid-unlock-form input[type="email"] {
  height: 48px !important;
  min-height: 48px !important;
  width: 100% !important;
  border-radius: 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  padding: 0 16px !important;
  font-size: 0.92rem !important;
  color: #0f172a !important;
  outline: none !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

#centroid-demo-form select {
  cursor: pointer !important;
  padding-right: 28px !important;
}

#centroid-demo-form textarea {
  width: 100% !important;
  border-radius: 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  padding: 12px 16px !important;
  font-size: 0.92rem !important;
  color: #0f172a !important;
  outline: none !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  min-height: 76px !important;
  resize: vertical !important;
}

#centroid-demo-form input:focus,
#centroid-demo-form select:focus,
#centroid-demo-form textarea:focus,
#centroid-unlock-form input:focus {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #dd5201 !important;
  box-shadow: 0 0 0 3px rgba(221, 82, 1, 0.15) !important;
}

#centroid-demo-form button[type="submit"],
#centroid-unlock-form button[type="submit"],
#centroid-unlock-form button {
  height: 52px !important;
  min-height: 52px !important;
  width: 100% !important;
  border-radius: 9999px !important;
  background-color: #dd5201 !important;
  background: #dd5201 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 6px 20px rgba(221, 82, 1, 0.35) !important;
  transition: all 0.2s ease !important;
  margin-top: 8px !important;
}

#centroid-demo-form button[type="submit"]:hover,
#centroid-unlock-form button[type="submit"]:hover,
#centroid-unlock-form button:hover {
  background-color: #b04000 !important;
  background: #b04000 !important;
  box-shadow: 0 8px 25px rgba(221, 82, 1, 0.45) !important;
  transform: translateY(-1px) !important;
}

#centroid-demo-form p,
#centroid-unlock-form p {
  text-align: center !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
  color: #64748b !important;
  margin: 6px 0 0 0 !important;
  padding-bottom: 4px !important;
}



/* ==============================================================================
 * HERO SECTION LAYOUT: VERTICALLY SPACIOUS WITH STRICT HORIZONTAL BOUNDS
 * 1. Undo horizontal expansion: Left column, paragraph, and stats are strictly
 *    contained to max-width 32rem / 480px, completely preventing animation overlap.
 * 2. Vertically long: min-height 100vh - 3.85rem with generous 4.5rem - 5rem padding
 *    ensures an expansive, elegant vertical presence.
 * ============================================================================== */
#centroid-page-root #top,
.elementor #centroid-page-root #top,
#top {
  min-height: calc(100vh - 3.85rem) !important;
  height: auto !important;
  padding: 4rem 0 3.5rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

@media (min-width: 1024px) {
  #centroid-page-root #top,
  .elementor #centroid-page-root #top,
  #top {
    min-height: calc(100vh - 3.85rem) !important;
    padding: 5rem 0 4.5rem 0 !important;
  }
}

#centroid-page-root #centroid-hero-container {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Two-column grid with strict column constraints to prevent horizontal bleeding */
#centroid-page-root #top-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
  gap: 2rem !important;
  align-items: center !important;
}

@media (max-width: 767px) {
  #centroid-page-root #top-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Strictly constrain left column width so it never touches or overlaps the right animation */
#centroid-page-root #top-hero-grid > div:first-child,
#centroid-page-root .centroid-rise {
  max-width: 32rem !important;
  width: 100% !important;
  position: relative !important;
  z-index: 60 !important;
  pointer-events: auto !important;
}

/* Paragraph text stays neatly bounded within left column */
#centroid-page-root #top p.max-w-xl,
#centroid-page-root #top .centroid-rise > p {
  max-width: 31rem !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.6 !important;
}

/* Stats row: Undone horizontal spread - strictly contained to left column width */
#centroid-page-root #top-stats-row,
#centroid-page-root #top #top-stats-row,
.elementor #centroid-page-root #top #top-stats-row,
[data-c-id="id_top-stats-row"] {
  max-width: 32rem !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  padding-top: 1rem !important;
  margin-top: 1.25rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  transform: none !important;
}

@media (max-width: 640px) {
  #centroid-page-root #top-stats-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  #centroid-page-root #top-stats-row > div {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 0.65rem !important;
  }
  #centroid-page-root #top-stats-row > div:first-child {
    border-top: none !important;
    padding-top: 0 !important;
  }
}

#centroid-page-root #top-stats-row > div {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding-left: 0.65rem !important;
  padding-right: 0.25rem !important;
}

#centroid-page-root #top-stats-row > div:first-child {
  padding-left: 0 !important;
}

#centroid-page-root #top-stats-row strong {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

#centroid-page-root #top-stats-row span {
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
  color: #94a3b8 !important;
}

/* Right animation container: aligned to right, fully contained */
#centroid-page-root #top-hero-grid > div:nth-child(2),
#centroid-page-root .centroid-drift {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#centroid-page-root .centroid-drift img,
.elementor #centroid-page-root #top .centroid-drift img {
  display: block !important;
  max-width: 100% !important;
  max-height: 480px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}


/* ==============================================================================
 * COMPACT, ELEGANT, EXECUTIVE DEMO REQUEST & BENCHMARK UNLOCK MODAL
 * Sized comfortably so it NEVER covers the entire screen (max-width: 490px)
 * ============================================================================== */
#centroid-demo-dialog-card,
#centroid-unlock-dialog-card {
  max-width: 490px !important;
  width: 92% !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 24px 28px 22px 28px !important;
  box-shadow: 0 24px 60px -15px rgba(8, 27, 72, 0.38), 0 0 0 1px rgba(16, 41, 91, 0.08) !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  max-height: min(88vh, 600px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  #centroid-demo-dialog-card,
  #centroid-unlock-dialog-card {
    padding: 20px 16px 18px 16px !important;
    border-radius: 16px !important;
    width: 95% !important;
    max-height: 92vh !important;
  }
}

#centroid-demo-dialog-card h2,
#centroid-unlock-dialog-card h2 {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #10295b !important;
  letter-spacing: -0.035em !important;
  margin: 0.35rem 0 0.25rem 0 !important;
}

#centroid-demo-dialog-card h2 + p,
#centroid-unlock-dialog-card h2 + p {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  color: #64748b !important;
  margin: 0 0 0.85rem 0 !important;
  max-width: 100% !important;
}

#centroid-demo-form,
#centroid-unlock-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 0.75rem !important;
}

#centroid-demo-form .grid,
#centroid-unlock-form .grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
}

@media (max-width: 500px) {
  #centroid-demo-form .grid,
  #centroid-unlock-form .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

#centroid-demo-form label,
#centroid-unlock-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#centroid-demo-form label > span,
#centroid-unlock-form label > span {
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #475569 !important;
  margin: 0 !important;
}

#centroid-demo-form input[type="text"],
#centroid-demo-form input[type="email"],
#centroid-demo-form select,
#centroid-unlock-form input[type="text"],
#centroid-unlock-form input[type="email"] {
  height: 38px !important;
  min-height: 38px !important;
  width: 100% !important;
  border-radius: 9px !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  padding: 0 12px !important;
  font-size: 0.86rem !important;
  color: #0f172a !important;
  outline: none !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

#centroid-demo-form select {
  cursor: pointer !important;
  padding-right: 24px !important;
}

#centroid-demo-form textarea {
  width: 100% !important;
  border-radius: 9px !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  padding: 7px 12px !important;
  font-size: 0.84rem !important;
  color: #0f172a !important;
  outline: none !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  min-height: 52px !important;
  height: 52px !important;
  resize: vertical !important;
  line-height: 1.35 !important;
}

#centroid-demo-form input:focus,
#centroid-demo-form select:focus,
#centroid-demo-form textarea:focus,
#centroid-unlock-form input:focus {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #dd5201 !important;
  box-shadow: 0 0 0 3px rgba(221, 82, 1, 0.15) !important;
}

#centroid-demo-form button[type="submit"],
#centroid-unlock-form button[type="submit"],
#centroid-unlock-form button {
  height: 42px !important;
  min-height: 42px !important;
  width: 100% !important;
  border-radius: 9999px !important;
  background-color: #dd5201 !important;
  background: #dd5201 !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 4px 14px rgba(221, 82, 1, 0.35) !important;
  transition: all 0.2s ease !important;
  margin-top: 0.4rem !important;
}

#centroid-demo-form button[type="submit"]:hover,
#centroid-unlock-form button[type="submit"]:hover,
#centroid-unlock-form button:hover {
  background-color: #b04000 !important;
  background: #b04000 !important;
  box-shadow: 0 6px 18px rgba(221, 82, 1, 0.45) !important;
  transform: translateY(-1px) !important;
}

#centroid-demo-form p,
#centroid-unlock-form p {
  text-align: center !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
  color: #64748b !important;
  margin: 4px 0 0 0 !important;
  padding-bottom: 2px !important;
}

.centroid-modal-close-btn {
  top: 14px !important;
  right: 14px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 9999px !important;
}

/* ==============================================================================
 * HERO SECTION TYPOGRAPHY & PERFECT CENTER ALIGNMENT
 * ============================================================================== */
#centroid-page-root #top h1,
.elementor #centroid-page-root #top h1 {
  font-size: clamp(2.85rem, 5.2vw, 4.4rem) !important;
  line-height: 1.03 !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  color: #ffffff !important;
  margin-bottom: 0.85rem !important;
}

#centroid-page-root #top h1 span,
.elementor #centroid-page-root #top h1 span {
  color: #ff8f72 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ff8f72 !important;
}

/* Center and perfectly align hero animation graphic with text column across all users and screen widths */
#centroid-page-root #top-hero-grid,
.elementor #centroid-page-root #top-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
  gap: 2rem !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

@media (min-width: 768px) and (max-width: 1080px) {
  #centroid-page-root #top-hero-grid,
  .elementor #centroid-page-root #top-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
    gap: 1.5rem !important;
  }
  
  #centroid-page-root #top h1,
  .elementor #centroid-page-root #top h1 {
    font-size: clamp(2.3rem, 4.2vw, 3.4rem) !important;
    line-height: 1.06 !important;
  }

  #centroid-page-root #top p.max-w-xl {
    font-size: 0.92rem !important;
    line-height: 1.52 !important;
  }

  #centroid-page-root #top-stats-row {
    padding-top: 0.75rem !important;
    gap: 0.35rem !important;
  }

  #centroid-page-root .centroid-drift img {
    max-height: 400px !important;
  }
}

@media (max-width: 767px) {
  #centroid-page-root #top-hero-grid,
  .elementor #centroid-page-root #top-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

#centroid-page-root #top-hero-grid > div:first-child,
#centroid-page-root .centroid-rise {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  max-width: 36rem !important;
}

#centroid-page-root #top-hero-grid > div:nth-child(2),
#centroid-page-root .centroid-drift {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  pointer-events: none !important;
}

#centroid-page-root .centroid-drift > div {
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

#centroid-page-root .centroid-drift img,
.elementor #centroid-page-root #top .centroid-drift img {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  max-height: 480px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ==============================================================================
 * LOGO BRANDING: BYLINE & TAGLINE
 * ============================================================================== */
.centroid-brand-container {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  vertical-align: middle !important;
  text-decoration: none !important;
}

.centroid-by-verbolabs {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #cbd5e1 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.centroid-by-verbolabs strong {
  color: #ffab7d !important;
  font-weight: 700 !important;
}

.centroid-logo-tagline {
  display: block !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: #93a4c8 !important;
  margin-top: 3px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

header a .centroid-brand-logo {
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
}

footer a .centroid-brand-logo {
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
}

/* ==============================================================================
 * HEADER SECURITY BUTTON
 * ============================================================================== */
.centroid-btn-security {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  padding: 0.38rem 1.1rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.centroid-btn-security:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.centroid-btn-security svg {
  color: #ffab7d !important;
}


/* ==============================================================================
 * WORDPRESS ADMIN BAR FIX (Ensures header and logo are NEVER cut off for logged-in admin)
 * ============================================================================== */
body.admin-bar header.sticky,
.admin-bar #centroid-page-root header.sticky,
.admin-bar #centroid-page-root header,
body.admin-bar #centroid-page-root header,
.admin-bar header {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar header.sticky,
  .admin-bar #centroid-page-root header.sticky,
  .admin-bar #centroid-page-root header,
  body.admin-bar #centroid-page-root header,
  .admin-bar header {
    top: 46px !important;
  }
}

body.admin-bar #centroid-page-root #top,
body.admin-bar .elementor #centroid-page-root #top {
  min-height: calc(100vh - 3.85rem - 32px) !important;
}


/* ==============================================================================
 * BULLETPROOF HERO GRID & PERFECT 2-COLUMN SIDE-BY-SIDE ALIGNMENT
 * Guarantees left text and right diagram ALWAYS sit side-by-side on all screens >= 768px
 * Never overlaps, never collides, never drops below the fold!
 * ============================================================================== */
#centroid-page-root #centroid-hero-container,
.elementor #centroid-page-root #centroid-hero-container {
  max-width: 1320px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 1.25rem 1.5rem !important;
  box-sizing: border-box !important;
}

#centroid-page-root #top-hero-grid,
.elementor #centroid-page-root #top-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) !important;
  gap: clamp(1rem, 2.5vw, 2.25rem) !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Left text column: fully contained, never overflows into right column */
#centroid-page-root #top-hero-grid > div:first-child,
#centroid-page-root .centroid-rise {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

#centroid-page-root #top h1,
.elementor #centroid-page-root #top h1 {
  font-size: clamp(2.35rem, 4vw, 3.8rem) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  color: #ffffff !important;
  margin: 0 0 0.85rem 0 !important;
  max-width: 100% !important;
}

#centroid-page-root #top h1 span.text-\[\#ff8f72\],
#centroid-page-root #top h1 span {
  color: #ff8f72 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ff8f72 !important;
}

#centroid-page-root #top p.max-w-xl,
#centroid-page-root #top .centroid-rise > p {
  max-width: 32rem !important;
  width: 100% !important;
  font-size: clamp(0.88rem, 1.2vw, 0.98rem) !important;
  line-height: 1.55 !important;
  color: #b7c5e1 !important;
  margin: 0 0 1.25rem 0 !important;
}

#centroid-page-root #top-stats-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  width: 100% !important;
  max-width: 32rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-top: 1rem !important;
}

/* Right diagram column: strictly bound to right side, scales responsively */
#centroid-page-root #top-hero-grid > div:nth-child(2),
#centroid-page-root .centroid-drift {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: auto !important;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: none !important;
  margin: 0 auto !important;
}

#centroid-page-root .centroid-drift > div,
#centroid-page-root #top-hero-grid > div:nth-child(2) > div {
  width: 100% !important;
  max-width: 680px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* The hero SVG image: aspect-ratio and explicit dimensions ensure it NEVER collapses to 0 */
#centroid-page-root .centroid-drift img,
#centroid-page-root #top-hero-grid img,
.elementor #centroid-page-root #top .centroid-drift img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1108 / 630 !important;
  max-height: 460px !important;
  object-fit: contain !important;
  pointer-events: none !important;
  filter: drop-shadow(0 20px 45px rgba(37, 99, 235, 0.12)) !important;
}

/* On mobile phones only (< 768px), stack vertically */
@media (max-width: 767px) {
  #centroid-page-root #top-hero-grid,
  .elementor #centroid-page-root #top-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  #centroid-page-root #top-hero-grid > div:first-child {
    order: 1 !important;
  }
  #centroid-page-root #top-hero-grid > div:nth-child(2) {
    order: 2 !important;
  }
}


/* ==============================================================================
 * ENLARGED HERO HEADLINE & BIGGER CENTERED ANIMATION IMAGE
 * ============================================================================== */
#centroid-page-root #centroid-hero-container,
.elementor #centroid-page-root #centroid-hero-container {
  max-width: 1460px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 1.25rem 1.5rem !important;
  box-sizing: border-box !important;
}

#centroid-page-root #top-hero-grid,
.elementor #centroid-page-root #top-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) !important;
  gap: clamp(1.25rem, 2.8vw, 2.75rem) !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Enlarged Make every language a business signal headline */
#centroid-page-root #top h1,
.elementor #centroid-page-root #top h1 {
  font-size: clamp(3.15rem, 5.8vw, 4.95rem) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  color: #ffffff !important;
  margin: 0 0 0.85rem 0 !important;
  max-width: 100% !important;
}

#centroid-page-root #top h1 span.text-\[\#ff8f72\],
#centroid-page-root #top h1 span {
  color: #ff8f72 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ff8f72 !important;
}

#centroid-page-root #top p.max-w-xl,
#centroid-page-root #top .centroid-rise > p {
  max-width: 34rem !important;
  width: 100% !important;
  font-size: clamp(0.95rem, 1.25vw, 1.05rem) !important;
  line-height: 1.58 !important;
  color: #b7c5e1 !important;
  margin: 0 0 1.35rem 0 !important;
}

/* Right diagram container: expanded width to 890px */
#centroid-page-root #top-hero-grid > div:nth-child(2),
#centroid-page-root .centroid-drift {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: auto !important;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: none !important;
  margin: 0 auto !important;
}

#centroid-page-root .centroid-drift > div,
#centroid-page-root #top-hero-grid > div:nth-child(2) > div {
  width: 100% !important;
  max-width: 890px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hero SVG image: enlarged max-height to 615px */
#centroid-page-root .centroid-drift img,
#centroid-page-root #top-hero-grid img,
.elementor #centroid-page-root #top .centroid-drift img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1108 / 630 !important;
  max-height: 615px !important;
  object-fit: contain !important;
  pointer-events: none !important;
  filter: drop-shadow(0 20px 45px rgba(37, 99, 235, 0.12)) !important;
}

/* Floating bottom badge: positioned neatly below diagram, never obscuring translation cards */
#centroid-page-root .centroid-drift .absolute.-bottom-2,
#centroid-page-root #top-hero-grid .absolute.-bottom-2 {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  margin-top: 14px !important;
  align-self: center !important;
}

@media (max-width: 767px) {
  /* ── Stack columns vertically ── */
  #centroid-page-root #top-hero-grid,
  .elementor #centroid-page-root #top-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Text column first, diagram column second */
  #centroid-page-root #top-hero-grid > div:first-child { order: 1 !important; }
  #centroid-page-root #top-hero-grid > div:nth-child(2) { order: 2 !important; }

  /* ── Hero overall container ── */
  #centroid-page-root #top,
  .elementor #centroid-page-root #top {
    max-width: 100% !important;
    padding: 2.5rem 0 2rem !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* ── Diagram column: full width, no forced height ── */
  #centroid-page-root .centroid-drift,
  #centroid-page-root #top-hero-grid > div:nth-child(2) {
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    animation: none !important;   /* no float drift on mobile */
  }

  /* Inner wrapper inside drift column */
  #centroid-page-root .centroid-drift > div,
  #centroid-page-root #top-hero-grid > div:nth-child(2) > div {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* ── SVG image: full width, uncapped height, auto from aspect-ratio ── */
  #centroid-page-root .centroid-drift img,
  #centroid-page-root #top-hero-grid img,
  .elementor #centroid-page-root #top .centroid-drift img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;      /* remove the 615px desktop cap */
    height: auto !important;
    aspect-ratio: 1108 / 630 !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* ── Headline: smaller on phone ── */
  #centroid-page-root #top h1,
  .elementor #centroid-page-root #top h1 {
    font-size: clamp(2rem, 8vw, 2.6rem) !important;
    line-height: 1.18 !important;
  }

  /* ── Floating badge: move below diagram, no overlap ── */
  #centroid-page-root .centroid-drift .absolute,
  #centroid-page-root #top-hero-grid .absolute.-bottom-2,
  #centroid-page-root .centroid-drift [class*="absolute"] {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    margin-top: 0.75rem !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  /* Extra small phones */
  #centroid-page-root #top h1,
  .elementor #centroid-page-root #top h1 {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem) !important;
  }
}

/* Keep the hero message readable on narrow phones; the diagram is decorative. */
@media (max-width: 767px) {
  #top-hero-grid > div:nth-child(2) {
    display: none !important;
  }
}