.elementor-19152 .elementor-element.elementor-element-e617229{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-af1a175 *//* =========================================================
   DUX Hub Case Study — Static Styles
   Brand: Evangelist Apps (dark UI, lime accent)
   ========================================================= */

:root{
  --bg:#1a1c20;
  --fg:#fafafa;
  --card:#23262b;
  --card-2:#1f2126;
  --muted:#a4a8b1;
  --border:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.18);
  --primary:#B6D743;
  --primary-fg:#16181c;
  --secondary:#2a2d33;
  --radius:0.75rem;
  --radius-lg:1rem;
  --radius-xl:1.5rem;
  --radius-2xl:2rem;
  --maxw:80rem;
}

*{box-sizing:border-box;margin:0;padding:0;border-color:var(--border)}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
h1,h2,h3,h4{letter-spacing:-0.02em;line-height:1.1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

.container{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.container.narrow-2{max-width:56rem}
.center{text-align:center}
.narrow{max-width:48rem;margin-left:auto;margin-right:auto}
.accent{color:var(--primary)}
.mt-large{margin-top:2.5rem}

/* ---------- ANNOUNCEMENT BAR (marquee) ---------- */
.announce{background:var(--primary);color:var(--primary-fg);overflow:hidden;font-size:.85rem}
.announce-track{display:flex;white-space:nowrap;padding:.65rem 0;animation:marquee 30s linear infinite;width:max-content}
.announce-item{display:inline-flex;align-items:center;gap:.75rem;padding:0 1.5rem;font-weight:500}
.announce-item a{text-decoration:underline;text-underline-offset:2px}
.diamond{display:inline-block;width:.6rem;height:.6rem;background:currentColor;transform:rotate(45deg)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(26,28,32,.85);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;padding-bottom:1rem}
.brand{display:inline-flex;align-items:center;gap:.5rem}
.brand-dot{display:inline-flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;border-radius:9999px;background:color-mix(in oklab,var(--primary) 18%,transparent)}
.brand-dot>span{width:1rem;height:1rem;border-radius:9999px;background:var(--primary)}
.brand-name{font-weight:800;font-size:1.125rem;letter-spacing:-.01em}
.main-nav{display:none;gap:1.75rem;font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:rgba(250,250,250,.8)}
.main-nav a{transition:color .2s}
.main-nav a:hover,.main-nav a.active{color:var(--primary)}
@media(min-width:1024px){.main-nav{display:inline-flex;align-items:center}}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;font-weight:700;transition:opacity .2s,transform .2s;cursor:pointer;border:0}
.btn-primary{background:var(--primary);color:var(--primary-fg) !important;padding:.65rem 1.25rem;font-size:.875rem}
.btn-primary:hover{opacity:.9}
.btn-lg{padding:.9rem 1.75rem;font-size:.9rem}
.arrow{display:inline-block;transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- PAGE HEADING ---------- */
.page-heading{background:#050505;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.page-heading .container{padding-top:4rem;padding-bottom:2.5rem}
.dux-logo{
    height:4rem !important;
    width:auto !important;
    object-fit:contain !important;}
@media(min-width:768px){.dux-logo{height:5rem}}
.eyebrow-big{margin-top:2.5rem;color:var(--primary);font-size:.875rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
.rule-full{margin-top:1.5rem;height:1px;width:100%;background:var(--primary)}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden}
.hero .container{padding-top:4rem;padding-bottom:2.5rem}
@media(min-width:1024px){.hero .container{padding-top:6rem}}
.hero-bg{
  position:absolute;inset:0;z-index:-1;opacity:.6;
  background:radial-gradient(60% 50% at 70% 20%,color-mix(in oklab,var(--primary) 22%,transparent),transparent 70%);
}
.title-xl{font-size:3rem;font-weight:800;line-height:1.02}
@media(min-width:768px){.title-xl{font-size:3.75rem}}
@media(min-width:1024px){.title-xl{font-size:4.5rem}}
.subtitle{margin-top:1.25rem;font-size:1.5rem;font-weight:600;color:rgba(250,250,250,.92)}
@media(min-width:768px){.subtitle{font-size:1.875rem}}
.lead{margin-top:1.25rem;color:var(--muted);font-size:1rem;line-height:1.7;max-width:42rem;margin-left:auto;margin-right:auto}
@media(min-width:768px){.lead{font-size:1.125rem}}

.hero-shot{margin-top:3.5rem;position:relative;display:flex;justify-content:center}
.hero-shot img{width:60%;border-radius:2.2rem;border:1px solid var(--border);box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
@media(min-width:640px){.hero-shot img{width:40%}}
@media(min-width:1024px){.hero-shot img{width:32%}}
.hero-glow{position:absolute;inset:-2.5rem;z-index:-1;border-radius:3rem;filter:blur(48px);opacity:.4;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in oklab,var(--primary) 50%,transparent),transparent)}

/* ---------- STATS ---------- */
.stat-grid{margin-top:3.5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:1024px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{border:1px solid var(--border);background:rgba(35,38,43,.6);backdrop-filter:blur(6px);border-radius:var(--radius-xl);padding:1.75rem 1.5rem;text-align:center}
.stat-value{font-size:2.25rem;font-weight:800;color:var(--primary);letter-spacing:-.02em}
@media(min-width:768px){.stat-value{font-size:3rem}}
.stat-label{margin-top:.5rem;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- SECTIONS ---------- */
.section{padding:5rem 0}
@media(min-width:1024px){.section{padding:7rem 0}}
.section-alt{background:rgba(42,45,51,.45);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--primary);font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;justify-content:center}
.center .eyebrow{justify-content:center}
.eyebrow .dash{display:inline-block;height:1px;width:2rem;background:var(--primary)}

.title-lg{margin-top:1.25rem;font-size:48px !important ;font-weight:800 !important;line-height:1.1}
@media(min-width:768px){.title-lg{font-size:3rem}}

.prose{margin-top:1.75rem;color:var(--muted);font-size:1rem;line-height:1.75;display:flex;flex-direction:column;gap:1.25rem;max-width:48rem;margin-left:auto;margin-right:auto;text-align:center}
@media(min-width:768px){.prose{font-size:1.125rem}}
.text-link{color:var(--primary);text-decoration:underline;text-underline-offset:4px}
.text-link:hover{text-decoration:none}

/* ---------- FACTS GRID ---------- */
.facts-grid{margin-top:3.5rem;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.facts-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.facts-grid{grid-template-columns:repeat(4,1fr)}}
.fact{border:1px solid var(--border);background:rgba(42,45,51,.4);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;transition:border-color .2s}
.fact:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent)}
.fact-icon{margin:0 auto;width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.6rem;background:color-mix(in oklab,var(--primary) 10%,transparent);color:var(--primary)}
.fact-value{margin-top:1rem;font-weight:600;color:var(--fg)}
.fact-label{margin-top:.25rem;font-size:.875rem;color:var(--muted)}

/* ---------- CARDS ---------- */
.cards-2,.cards-3{display:grid;gap:1.25rem;margin-top:3rem}
.cards-2{grid-template-columns:1fr}
@media(min-width:768px){.cards-2{grid-template-columns:repeat(2,1fr)}}
.cards-3{grid-template-columns:1fr}
@media(min-width:768px){.cards-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards-3{grid-template-columns:repeat(3,1fr)}}

.card{position:relative;border:1px solid var(--border);background:var(--card);border-radius:var(--radius-xl);padding:1.75rem;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--primary) 40%,transparent)}
.card h3{font-size:1.125rem;font-weight:700;margin-bottom:.5rem;line-height:1.3}
.card p{font-size:.875rem;color:var(--muted);line-height:1.65}
.card-icon{margin-bottom:1.25rem;width:3rem;height:3rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.85rem;background:color-mix(in oklab,var(--primary) 15%,transparent);color:var(--primary)}
.card-icon.emphasis{background:var(--primary);color:var(--primary-fg)}

/* ---------- SOLUTION GRID ---------- */
.solution-grid{margin-top:3rem;display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:768px){.solution-grid{grid-template-columns:repeat(3,1fr)}}
.solution-card{position:relative;border:1px solid var(--border);background:var(--card);border-radius:var(--radius-xl);overflow:hidden;transition:transform .3s,border-color .3s}
.solution-card:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--primary) 40%,transparent)}
.solution-card.emphasis{background:color-mix(in oklab,var(--primary) 10%,transparent);border-color:color-mix(in oklab,var(--primary) 40%,transparent)}
.solution-img{aspect-ratio:9/14;display:flex;align-items:center;justify-content:center;background:rgba(42,45,51,.4);overflow:hidden}
.solution-img img{width:100%;height:100%;object-fit:contain;object-position:top}
.solution-body{padding:1.5rem}
.solution-body h3{font-size:1.125rem;font-weight:700;margin-bottom:.5rem}
.solution-body p{font-size:.875rem;color:var(--muted);line-height:1.65}

/* ---------- STEPS / WORKFLOW ---------- */
.steps-grid{margin-top:3.5rem;display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps-grid{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;display:flex;gap:1rem;align-items:flex-start;border:1px solid var(--border);background:rgba(35,38,43,.6);border-radius:var(--radius-xl);padding:1.5rem;overflow:hidden;transition:border-color .25s,background .25s}
.step:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent);background:var(--card)}
.step-icon{flex-shrink:0;width:3rem;height:3rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.85rem;background:color-mix(in oklab,var(--primary) 10%,transparent);color:var(--primary);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--primary) 20%,transparent)}
.step-num{display:flex;align-items:center;gap:.5rem;color:var(--primary);font-weight:800;font-size:.75rem;letter-spacing:.08em}
.step-rule{height:1px;flex:1;background:linear-gradient(to right,color-mix(in oklab,var(--primary) 40%,transparent),transparent)}
.step p{margin-top:.5rem;font-size:1rem;font-weight:500;line-height:1.4}
@media(min-width:768px){.step p{font-size:1.0625rem}}

/* ---------- TWO-COL PROFILE ---------- */
.two-col{display:grid;gap:3rem;align-items:center;grid-template-columns:1fr}
@media(min-width:1024px){.two-col{grid-template-columns:repeat(2,1fr);gap:4rem}}
.two-col-img{position:relative;order:2}
@media(min-width:1024px){.two-col-img{order:1}}
.two-col-body{order:1}
@media(min-width:1024px){.two-col-body{order:2}}
.profile-glow{position:absolute;inset:-1.5rem;border-radius:2rem;filter:blur(32px);opacity:.6;background:radial-gradient(60% 50% at 50% 50%,color-mix(in oklab,var(--primary) 35%,transparent),transparent 70%)}
.profile-frame{position:relative;border:1px solid var(--border);background:var(--card);border-radius:2rem;padding:1rem;box-shadow:0 30px 80px -30px rgba(0,0,0,.25)}
@media(min-width:768px){.profile-frame{padding:1.5rem}}
.profile-frame img{width:100%;height:auto;border-radius:1rem;object-fit:contain}
.point-list{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.25rem}
.point-list li{display:flex;align-items:flex-start;gap:1rem;border:1px solid var(--border);background:rgba(35,38,43,.6);border-radius:var(--radius-xl);padding:1.25rem;transition:border-color .2s}
.point-list li:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent)}
.point-icon{flex-shrink:0;width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.85rem;background:color-mix(in oklab,var(--primary) 15%,transparent);color:var(--primary)}
.point-list h3{font-size:1.125rem;font-weight:700;line-height:1.3}
.point-list p{margin-top:.35rem;font-size:.95rem;color:var(--muted);line-height:1.6}

/* ---------- IMPACT STATS ---------- */
.impact-stats{margin-top:3rem;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:1024px){.impact-stats{grid-template-columns:repeat(5,1fr)}}
.impact-stat{position:relative;overflow:hidden;border:2px solid color-mix(in oklab,var(--primary) 30%,transparent);background:linear-gradient(135deg,color-mix(in oklab,var(--primary) 15%,transparent),var(--card),var(--card));border-radius:var(--radius-xl);padding:1.75rem;text-align:center;transition:transform .3s,border-color .3s,box-shadow .3s}
.impact-stat:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:0 20px 60px -20px color-mix(in oklab,var(--primary) 55%,transparent)}
.impact-value{font-size:3.75rem;font-weight:800;color:var(--primary);letter-spacing:-.02em;filter:drop-shadow(0 2px 20px color-mix(in oklab,var(--primary) 45%,transparent))}
@media(min-width:768px){.impact-value{font-size:4.5rem}}
.impact-label{margin-top:1.75rem;font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,250,250,.8); line-height:15px}
.impact-bar{margin:1rem auto 0;height:2px;width:2.5rem;border-radius:9999px;background:color-mix(in oklab,var(--primary) 70%,transparent);transition:width .3s}
.impact-stat:hover .impact-bar{width:4rem}

/* ---------- TECH GRID ---------- */
.tech-grid{margin-top:3rem;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.tech-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.tech-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.tech-grid{grid-template-columns:repeat(4,1fr)}}
.tech{border:1px solid var(--border);background:rgba(35,38,43,.6);border-radius:var(--radius-lg);padding:1.25rem;transition:border-color .2s,background .2s}
.tech:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent);background:var(--card)}
.tech-role{display:flex;align-items:center;gap:.5rem;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tech-name{margin-top:.75rem;font-size:1.125rem;font-weight:700}
.check{display:inline-block;width:1rem;height:1rem;border-radius:9999px;background:var(--primary);position:relative}
.check::after{content:"";position:absolute;left:4px;top:2px;width:4px;height:8px;border:solid var(--primary-fg);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;border:1px solid color-mix(in oklab,var(--primary) 30%,transparent);background:var(--card);border-radius:1.5rem;padding:2.5rem;text-align:center}
@media(min-width:768px){.cta{padding:4rem}}
.cta-bg{position:absolute;inset:0;z-index:-1;opacity:.5;background:radial-gradient(60% 80% at 50% 0%,color-mix(in oklab,var(--primary) 25%,transparent),transparent 70%)}
.cta .title-lg{max-width:48rem;margin-left:auto;margin-right:auto}
.cta .lead{margin-top:1.25rem;max-width:36rem}
.cta .btn{margin-top:2rem}

/* ---------- FAQ — mobile text wrap fix ---------- */
.faq-list {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-top: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}
@media (min-width: 768px) {
  .faq-list {
    margin-top: 3rem !important;
    gap: 0.75rem !important;
  }
}

.faq {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  background: rgba(35, 38, 43, 0.6) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}
@media (min-width: 768px) {
  .faq {
    border-radius: var(--radius-xl) !important;
  }
}

/* Grid (not flex) — stops question text clipping on mobile */
.faq-q {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  column-gap: 0.75rem !important;
  text-align: left !important;
  padding: 1rem !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  white-space: normal !important;          /* overrides theme nowrap */
  overflow: visible !important;
  cursor: pointer !important;
  border: 0 !important;
  font-family: inherit !important;
  transition: background 0.2s !important;
  -webkit-tap-highlight-color: transparent !important;
}
@media (min-width: 768px) {
  .faq-q {
    align-items: center !important;
    column-gap: 1.5rem !important;
    padding: 1.25rem 1.5rem !important;
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
  }
}
.faq-q:hover {
  background: var(--card) !important;
}

.faq-q-text,
.faq-q > span:first-child {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

.chev {
  flex-shrink: 0 !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  margin-top: 0.15rem !important;
  align-self: start !important;
  position: relative !important;
  transition: transform 0.3s !important;
}
@media (min-width: 768px) {
  .chev {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-top: 0 !important;
    align-self: center !important;
  }
}
.chev::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid var(--primary) !important;
  border-bottom: 2px solid var(--primary) !important;
  transform: translate(-50%, -70%) rotate(45deg) !important;
}
@media (min-width: 768px) {
  .chev::before {
    width: 10px !important;
    height: 10px !important;
  }
}
.faq.open .chev {
  transform: rotate(180deg) !important;
}

.faq-a {
  display: grid !important;
  grid-template-rows: 0fr !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: grid-template-rows 0.3s ease-out !important;
}
.faq.open .faq-a {
  grid-template-rows: 1fr !important;
}
.faq-a-inner {
  min-height: 0 !important;
  overflow: hidden !important;
}
.faq-a-inner > p {
  margin: 0 !important;
  padding: 0 1rem !important;
  color: var(--muted) !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
}
.faq.open .faq-a-inner > p {
  padding-bottom: 1rem !important;
}
@media (min-width: 768px) {
  .faq-a-inner > p {
    padding: 0 1.5rem !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }
  .faq.open .faq-a-inner > p {
    padding-bottom: 1.5rem !important;
  }
}

/* ---------- FOOTER ---------- */
.site-footer{border-top:1px solid var(--border);margin-top:6rem}
.footer-grid{padding:3rem 1.5rem;display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
.footer-tag{margin-top:1rem;font-size:.875rem;color:var(--muted);max-width:18rem}
.site-footer h4{font-weight:600;margin-bottom:.75rem;font-size:.95rem}
.site-footer ul{display:flex;flex-direction:column;gap:.5rem;color:var(--muted);font-size:.875rem}
.muted{color:var(--muted);font-size:.875rem}
.footer-bottom{border-top:1px solid var(--border);padding:1.5rem;text-align:center;font-size:.75rem;color:var(--muted)}/* End custom CSS */