.elementor-6551 .elementor-element.elementor-element-299f664{--display:flex;}.elementor-6551 .elementor-element.elementor-element-c576ea1{--display:flex;}.elementor-6551 .elementor-element.elementor-element-2329c64{--display:flex;}.elementor-6551 .elementor-element.elementor-element-8228a71{--display:flex;}.elementor-6551 .elementor-element.elementor-element-cbe1da6{--display:flex;}/* Start custom CSS *//* ═══════════════════════════════════════════════════════════════
   CRSTBL — INDUSTRY LANDING PAGE SETTINGS CSS
   Paste into: Elementor → Page Settings → Custom CSS
   Works for ALL 5 industry pages — no changes needed per page.
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO SECTION ── */
/* Elementor section CSS class: prod-hero */
.prod-hero {
  min-height: 75vh;
  position: relative;
  overflow: hidden;
  background-color: #F5F9FC;
  background-image: radial-gradient(circle, rgba(2,73,115,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.prod-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: calc(100% - 630px);
  width: 700px; height: 700px;
  border-radius: 50%;
  background: rgba(33, 158, 188, 0.14);
  z-index: 0; pointer-events: none;
}
.prod-hero::after {
  content: '';
  position: absolute;
  bottom: -15%; left: -5%;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: rgba(58, 197, 206, 0.20);
  z-index: 0; pointer-events: none;
}
.prod-hero .elementor-container { position: relative; z-index: 1; }
.prod-hero .elementor-widget-html { position: relative; z-index: 2; }

/* ── STATS BAR (dark navy) ── */
/* Elementor section CSS class: intent-card-section */
.intent-card-section { background: #021939; }

/* ── PROBLEM SECTION (dark navy + ambient circle) ── */
/* Elementor section CSS class: missing-section */
.missing-section {
  background: #021939 !important;
  position: relative; overflow: hidden;
}
.missing-section::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: rgba(33,158,188,0.05);
  pointer-events: none;
}
.missing-section .elementor-heading-title,
.missing-section h1, .missing-section h2, .missing-section h3 {
  color: #ffffff !important;
}
.missing-section p { color: rgba(255,255,255,0.65) !important; }

/* ── SOLUTION SECTION (teal background) ── */
/* Elementor section CSS class: how-works-section */
.how-works-section { background: #E9F9F9 !important; }

/* ── FEATURE CARDS (shared hover pattern) ── */
.prod-feat-card {
  background: #ffffff;
  border: 1px solid rgba(2,73,115,0.07);
  border-radius: 16px; padding: 32px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative; overflow: hidden;
}
.prod-feat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: #219EBC;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s;
}
.prod-feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(2,25,57,0.08);
}
.prod-feat-card:hover::before { transform: scaleX(1); }

/* ── CTA BANNER (dark navy) ── */
/* Elementor section CSS class: prod-cta-banner */
.prod-cta-banner {
  background: #021939 !important;
  position: relative; overflow: hidden; text-align: center;
}
.prod-cta-banner::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 400px;
  border-radius: 50%;
  background: rgba(33,158,188,0.08);
  pointer-events: none;
}
.prod-cta-banner .elementor-heading-title,
.prod-cta-banner h2 { color: #ffffff !important; }
.prod-cta-banner p { color: rgba(255,255,255,0.60) !important; }/* End custom CSS */