/* ============================================================
   EnableX 2026 theme layer — loads AFTER bootstrap.min.css
   Tokens + Bootstrap variable overrides + section patterns
   ============================================================ */
:root{
  /* Brand */
  --enx-red:#ED1C24; --enx-red-dark:#B81729; --enx-red-light:#FDE7E9;
  --enx-blue:#273185; --enx-purple:#602D91;
  --enx-grad-band:linear-gradient(135deg,#1B0A6B 0%,#7B1FA2 50%,#E91E63 100%);
  --enx-grad-btn:linear-gradient(135deg,#A1198A 0%,#C32843 100%);
  --enx-grad-btn-hover:linear-gradient(135deg,#8B1377 0%,#A91F36 100%);
  /* Ink & surfaces */
  --enx-ink:#0e1a2b; --enx-ink-soft:#4a5568; --enx-ink-mute:#6b7280;
  --enx-line:#e6eaf0; --enx-bg:#fff; --enx-bg-soft:#f7f9fc; --enx-bg-deep:#0e1a2b;
  /* Shape */
  --enx-radius-card:12px; --enx-radius-btn:6px; --enx-radius-pill:999px;
  --enx-shadow:0 6px 24px rgba(14,26,43,.08);
  --enx-shadow-strong:0 10px 40px rgba(14,26,43,.14);
  /* Bootstrap overrides */
  --bs-primary:#ED1C24; --bs-primary-rgb:237,28,36;
  --bs-body-color:#0e1a2b;
  --bs-body-font-family:'Plus Jakarta Sans','PJS Fallback',system-ui,Arial,sans-serif;
  --bs-body-font-size:1rem; --bs-body-line-height:1.6;
  --bs-border-color:#e6eaf0; --bs-border-radius:6px; --bs-border-radius-lg:12px;
  --bs-link-color:#B81729; --bs-link-hover-color:#8f121f;
}
body{font-family:var(--bs-body-font-family);color:var(--enx-ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:700;letter-spacing:-.02em;color:var(--enx-ink)}
h1,.h1{font-weight:800}
.btn:focus-visible,a:focus-visible{outline:3px solid rgba(96,45,145,.4);outline-offset:2px}

/* ---------- Buttons ---------- */
.btn-enx-primary{background:var(--enx-grad-btn);color:#fff;border:0;border-radius:var(--enx-radius-btn);
  font-weight:700;padding:.65rem 1.4rem}
.btn-enx-primary:hover,.btn-enx-primary:focus{background:var(--enx-grad-btn-hover);color:#fff}
.btn-enx-outline{background:#fff;color:var(--enx-ink);border:1px solid var(--enx-line);
  border-radius:var(--enx-radius-btn);font-weight:700;padding:.65rem 1.4rem}
.btn-enx-outline:hover{border-color:var(--enx-purple);color:var(--enx-purple)}

/* ---------- Forms ---------- */
/* Entered/selected values read bold so a filled-in field visually stands
   out from its label; placeholders (not yet real data) stay regular-weight
   and muted so they're not mistaken for entered content. */
.form-label{font-weight:600;color:var(--enx-ink-soft);font-size:.9rem}
.form-control,.form-select{font-weight:700;color:var(--enx-ink)}
.form-control::placeholder{font-weight:400;color:var(--enx-ink-mute)}
.form-select:invalid,.form-select option[value=""]{font-weight:400;color:var(--enx-ink-mute)}
.form-select option{font-weight:600;color:var(--enx-ink)}

/* ---------- Section scaffolding ---------- */
.enx-section{padding:96px 0}
.enx-section-tight{padding:64px 0}
@media (max-width:768px){.enx-section{padding:64px 0}.enx-section-tight{padding:48px 0}}
.enx-eyebrow{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--enx-purple);margin-bottom:.75rem}
.enx-lead{font-size:1.125rem;color:var(--enx-ink-soft);max-width:46rem}
.bg-enx-soft{background:var(--enx-bg-soft)}
.bg-enx-cream{background:linear-gradient(180deg,#fff 0%,#FFF8F0 100%)}
.bg-enx-lav{background:linear-gradient(180deg,#fff 0%,#F4F0FF 100%)}
.bg-enx-blue{background:linear-gradient(180deg,#fff 0%,#EEF4FB 100%)}
.bg-enx-band{background:var(--enx-grad-band);color:#fff}
.bg-enx-band h1,.bg-enx-band h2,.bg-enx-band h3{color:#fff}

/* ---------- Hero: layered gradient field, framed visual ---------- */
.enx-hero{
  position:relative;overflow:hidden;
  padding:96px 0 80px;
  background:
    radial-gradient(ellipse 55% 70% at 88% 8%, rgba(233,30,99,.09), transparent 60%),
    radial-gradient(ellipse 45% 60% at 4% 92%, rgba(96,45,145,.10), transparent 60%),
    linear-gradient(180deg,#fff 0%,#F6F3FD 100%);
}
.enx-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(39,49,133,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(39,49,133,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 30%,#000 30%,transparent 100%);
}
.enx-hero>.container{position:relative;z-index:1}
.enx-hero h1{font-size:clamp(2.1rem,4.5vw,3.4rem);line-height:1.12;margin-bottom:1rem;text-wrap:balance}
.enx-hero .enx-lead{margin-bottom:1.75rem}
.enx-hero-ctas{display:flex;gap:.75rem;flex-wrap:wrap}
.enx-hero-visual{
  max-width:100%;height:auto;
  border-radius:16px;
  box-shadow:0 24px 64px -20px rgba(39,49,133,.30),0 4px 18px rgba(14,26,43,.08);
  border:1px solid rgba(255,255,255,.8);
}
@media (max-width:768px){.enx-hero{padding:56px 0 44px}}

/* ---------- Section head: shared centered heading block ---------- */
.enx-section-head{text-align:center;max-width:820px;margin:0 auto 52px}
.enx-section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;margin-bottom:.9rem}
.enx-section-head .enx-lead{margin:0 auto}

/* ---------- Cards ---------- */
.enx-card{background:#fff;border:1px solid var(--enx-line);border-radius:var(--enx-radius-card);
  padding:28px;height:100%;transition:box-shadow .15s,transform .15s}
.enx-card:hover{box-shadow:var(--enx-shadow);transform:translateY(-2px)}
.enx-card .enx-icon{color:var(--enx-red);margin-bottom:14px}
.enx-card h3,.enx-card h4{font-size:1.15rem;margin-bottom:.5rem}
.enx-card p{color:var(--enx-ink-soft);font-size:.95rem;margin:0}

/* ---------- CTA band: gradient with decorative glow + grid ---------- */
.enx-cta-band{
  position:relative;overflow:hidden;
  background:var(--enx-grad-band);border-radius:20px;color:#fff;
  padding:64px 48px;text-align:center;
  box-shadow:0 24px 60px -24px rgba(27,10,107,.5);
}
.enx-cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%);
}
.enx-cta-band::after{
  content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,transparent 70%);pointer-events:none;
}
.enx-cta-band>*{position:relative;z-index:1}
.enx-cta-band h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem)}
.enx-cta-band p{color:rgba(255,255,255,.85);max-width:40rem;margin:.75rem auto 1.5rem}
@media (max-width:768px){.enx-cta-band{padding:44px 24px}}

/* ---------- Stats ---------- */
.enx-stat-row{display:flex;flex-wrap:wrap;justify-content:center;gap:34px;padding:22px 0;
  border-top:1px solid var(--enx-line);border-bottom:1px solid var(--enx-line)}
.enx-stat-row>div{display:flex;align-items:baseline;gap:8px;font-size:.875rem;color:var(--enx-ink-mute)}
.enx-stat-row strong{font-size:1.375rem;font-weight:800;color:var(--enx-ink)}

/* ---------- Icons ---------- */
.enx-icon{display:inline-block;width:30px;height:30px;vertical-align:-6px;fill:currentColor}
.enx-icon-lg{width:44px;height:44px}

/* ---------- Image placeholder (see docs/image-manifest.md) ---------- */
.enx-img-ph{display:block;width:100%;height:auto;color:var(--enx-ink-mute)}

/* ---------- Accordion: override Bootstrap's default blue active/focus
   with the brand violet, site-wide (every FAQ + industry accordion) ---------- */
.accordion{
  --bs-accordion-active-color:var(--enx-purple);
  --bs-accordion-active-bg:#F4F0FF;
  --bs-accordion-btn-focus-border-color:rgba(96,45,145,.35);
  --bs-accordion-btn-focus-box-shadow:0 0 0 .25rem rgba(96,45,145,.15);
}