.elementor-18534 .elementor-element.elementor-element-32219c6{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-776bf16 *//* Evangelist Apps — static WordPress-ready styles */
:root{
  --background:hsl(228 25% 8%);
  --foreground:hsl(0 0% 98%);
  --surface:hsl(228 18% 14%);
  --surface-elevated:hsl(228 20% 16%);
  --card:hsl(228 20% 12%);
  --card-elevated:hsl(228 20% 16%);
  --primary:hsl(65 75% 50%);
  --primary-foreground:hsl(228 25% 8%);
  --primary-glow:hsl(65 80% 60%);
  --muted:hsl(228 15% 15%);
  --muted-foreground:hsl(220 10% 55%);
  --border:hsl(228 15% 20%);
  --border-strong:hsl(228 15% 28%);
  --radius:.75rem;
  --container:1400px;
  --shadow-glow:0 10px 30px hsla(65,75%,50%,.2);
  --shadow-elevated:0 10px 30px -10px rgba(0,0,0,.6);
  --font-sans:"Roboto",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;border-color:var(--border)}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--background);
    color:var(--foreground);
    font-family:var(--font-sans);
    line-height:1.6;
    -webkit-font-smoothing:antialiased
    
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4,h5{font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:0}
h1{font-size:clamp(2rem,5vw,3.5rem)}
h2{font-size:clamp(1.75rem,3.5vw,2.75rem)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.text-primary{color:var(--primary)}
.text-muted{color:var(--muted-foreground)}
.text-glow{text-shadow:0 0 30px hsla(65,75%,50%,.3)}

/* layout */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1.25rem}
@media(min-width:768px){.container{padding-inline:2rem}}
.section{padding-block:2rem}
@media(min-width:768px){.section{padding-block:2.5rem}}
@media(min-width:1024px){.section{padding-block:3rem}}

/* badges / eyebrow */
.badge{display:inline-block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin-bottom:.5rem}
.eyebrow{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)}
.section-header{margin-bottom:1.75rem}
.section-header.center{text-align:center}
.section-header h2{margin-bottom:.75rem}
.section-header p{max-width:48rem;font-size:1.125rem;color:var(--muted-foreground)}
.section-header.center p{margin-inline:auto}

/* buttons */
.btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:1rem 2.25rem;
    border-radius:9999px;
    font-size:.875rem;
    font-weight:700;
    transition:all .2s;
    border:1px solid transparent
    
}
.btn .icon{
    width:1rem;
    height:1rem;
    stroke:currentColor;
    fill:none;
    stroke-width:2
    
}
.btn-primary{
    background:var(--primary);
    color:var(--primary-foreground) !important;
    
}
.btn-primary:hover{
    filter:brightness(1.08);
    box-shadow:var(--shadow-glow)
    
}
.btn-outline{
    border-color:var(--primary);
    color:var(--primary);
    background:transparent
    
}
.btn-outline:hover{
    background:var(--primary);
    color:var(--primary-foreground) !important;
    
}

/* card */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:border-color .2s,background-color .2s}
.card:hover{border-color:hsla(65,75%,50%,.3)}
.icon-tile{display:inline-flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.5rem;background:hsla(65,75%,50%,.1);color:var(--primary)}
.icon-tile.lg{height:3rem;width:3rem}
.icon-tile svg{width:1.25rem;height:1.25rem;stroke:var(--primary);fill:none;stroke-width:2}


/* ===== Hero ===== */
.hero{padding-top:6rem}
.hero .container{text-align:center}
.hero h1{max-width:60rem;margin-inline:auto}
.hero-sub{margin:2rem auto 0;max-width:42rem;font-size:1.125rem;color:var(--muted-foreground)}
.hero-cta{margin-top:2.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem}
@media(min-width:640px){.hero-cta{flex-direction:row}}
.hero-meta{margin-top:1.25rem;font-size:.75rem;color:var(--muted-foreground)}
.hero-image{margin:4rem auto 0;max-width:72rem}
.hero-image img{border-radius:1rem;border:1px solid hsla(228,15%,20%,.6);box-shadow:0 25px 50px -12px rgba(0,0,0,.5);width:100%;height:auto}

/* ===== Logos marquee ===== */
.logos{border-block:1px solid var(--border);background:hsla(228,20%,12%,.3);padding-block:2.5rem}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;align-items:center;gap:3rem;animation:marquee 35s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{height:2.5rem;width:auto;max-width:140px;flex-shrink:0;object-fit:contain;opacity:.7;filter:grayscale(1);transition:all .2s}
.marquee img:hover{opacity:1;filter:grayscale(0)}
@keyframes marquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ===== Two-col grids ===== */
.two-col{display:grid;gap:3rem}
@media(min-width:768px){.two-col{grid-template-columns:1fr 1fr;gap:4rem}}
.grid-2{display:grid;gap:1rem}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;gap:1.25rem}
@media(min-width:640px){.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-4{display:grid;gap:1.25rem}
@media(min-width:640px){.grid-4{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ===== Transformation ===== */
.transform-grid{display:grid;gap:1.5rem;max-width:64rem;margin:3rem auto 0}
@media(min-width:768px){.transform-grid{grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch}}
.transform-arrow{display:none;align-items:center;justify-content:center}
@media(min-width:768px){.transform-arrow{display:flex}}
.transform-arrow span{display:flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:9999px;border:1px solid var(--border);background:var(--card);color:var(--primary)}
.transform-list{margin-top:1rem;display:flex;flex-direction:column;gap:1rem}
.transform-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:.95rem;color:var(--muted-foreground)}
.transform-list svg{width:1.25rem;height:1.25rem;flex-shrink:0;margin-top:.125rem}
.transform-card.after{border-color:hsla(65,75%,50%,.4)}
.transform-card.after .transform-list li{color:var(--foreground)}
.transform-card.after .transform-list svg{color:var(--primary)}
.transform-note{margin:2.5rem auto 0;max-width:42rem;text-align:center;color:var(--muted-foreground)}

/* ===== Inline CTA ===== */
.inline-cta{display:flex;justify-content:center;margin-top:2.5rem}
.inline-cta-inner{display:flex;flex-direction:column;align-items:center;gap:.75rem;border-radius:9999px;border:1px solid hsla(228,15%,20%,.6);background:hsla(228,15%,15%,.3);padding:.75rem 1.25rem;text-align:center}
@media(min-width:640px){.inline-cta-inner{flex-direction:row;gap:1.25rem;padding:.75rem 1.75rem}}
.inline-cta-inner p{font-size:.875rem;color:var(--muted-foreground)}
.inline-cta-inner a{display:inline-flex;align-items:center;gap:.375rem;color:var(--primary);font-weight:600;font-size:.875rem;transition:color .2s}
.inline-cta-inner a:hover{color:hsla(65,75%,55%,.8)}
.inline-cta-inner svg{width:1rem;height:1rem;transition:transform .2s}
.inline-cta-inner a:hover svg{transform:translateX(2px)}

/* ===== Services accordion ===== */
.services-grid{
    display:grid;
    gap:2rem;
    margin-top:2.5rem;
    
}
@media(min-width:1024px){
    .services-grid
    {
        grid-template-columns:320px 1fr
        
    }
    
}
.svc-tabs{
    display:flex;
    gap:.5rem;
    overflow-x:auto;
    
}
@media(min-width:1024px){
    .svc-tabs{
        flex-direction:column;
        gap:0;
        overflow:visible;
        
    }}
.svc-tab{
    display:flex !important;
    align-items:center !important;
    gap:.75rem !important;
    white-space:nowrap !important;
    border-radius:.5rem !important;
    padding:1rem 1.25rem !important;
    text-align:left !important;
    font-size:.875rem !important;
    font-weight:600 !important;
    color:var(--muted-foreground) !important;
    background:transparent !important;
    border-left:2px solid transparent !important;
    transition:color .2s,background .2s !important;
}

button.svc-tab {
    border-style: none;
}

button.svc-tab:hover{
    border-style: none;
}
   
@media(min-width:1024px){
    .svc-tab{
        white-space:normal !important;
        
    }
    
}
.svc-tab .num{
    font-size:.75rem !important;
    opacity:.6 !important;
    
}
.svc-tab.active{
    color:var(--primary) !important;
    background:var(--card)!important;
    border-left-color:var(--primary) !important;
    
}
.svc-content{padding:2rem}
@media(min-width:768px){.svc-content{padding:2.5rem}}
.svc-head{display:flex;align-items:center;gap:1rem}
.svc-head h3{font-size:1.25rem;font-weight:700}
@media(min-width:768px){.svc-head h3{font-size:1.5rem}}
.svc-intro{margin-top:1.5rem;color:var(--muted-foreground)}
.svc-bullets{margin-top:1.5rem;display:grid;gap:.75rem}
@media(min-width:640px){.svc-bullets{grid-template-columns:1fr 1fr}}
.svc-bullets div{display:flex;align-items:flex-start;gap:.625rem;font-size:.875rem}
.svc-bullets .dot{margin-top:.45rem;height:.375rem;width:.375rem;flex-shrink:0;border-radius:9999px;background:var(--primary)}
.svc-outcome{margin-top:1.5rem;border-radius:.5rem;padding:.75rem 1rem;font-size:.875rem;background:hsla(65,75%,50%,.06);border:1px solid hsla(65,75%,50%,.2)}
.svc-outcome strong{color:var(--primary)}

/* ===== Product thinking ===== */
.points-grid{margin:2rem auto 0;max-width:48rem;display:grid;gap:.75rem}
@media(min-width:640px){.points-grid{grid-template-columns:1fr 1fr}}

/* ===== Case study carousel ===== */
.cs-wrap{position:relative}
.cs-card{position:relative;overflow:hidden;padding:1.5rem}
@media(min-width:768px){.cs-card{padding:2.5rem}}
@media(min-width:1024px){.cs-card{padding:3rem}}
.cs-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:1024px){.cs-grid{grid-template-columns:1fr 1fr;gap:3rem}}
.cs-stats{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1.5rem}
@media(min-width:768px){.cs-stats{gap:2.5rem}}
.cs-stat{min-width:8rem}
.cs-stat+.cs-stat{border-left:1px solid var(--border);padding-left:1.5rem}
@media(min-width:768px){.cs-stat+.cs-stat{padding-left:2.5rem}}
.cs-stat .v{font-size:1.25rem;font-weight:700;color:var(--primary)}
@media(min-width:768px){.cs-stat .v{font-size:1.5rem}}
.cs-stat .l{margin-top:.25rem;font-size:.75rem;color:var(--muted-foreground)}
.cs-img{display:flex;align-items:center;justify-content:center}
.cs-img img{max-height:400px;width:100%;border-radius:.75rem;object-fit:contain}
.cs-arrow{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    height:2.75rem !important;
    width:2.75rem !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid var(--border-strong) !important;
    border-radius:9999px !important;
    background:hsla(228,25%,8%,.8) !important;
    backdrop-filter:blur(8px) !important;
    transition:all .2s !important;
    z-index:5 !important;
    padding: 2px !important;
    color: white !important;
    
}
.cs-arrow:hover{
    border-color:var(--primary) !important;
    color:var(--primary) !important;
    
}
.cs-arrow.prev{
    left:.5rem !important;
    
}
.cs-arrow.next{
    right:.5rem !important;
    
}
.cs-dots{
    margin-top:1.5rem !important;
    display:flex !important;
    justify-content:center !important;
    gap:.5rem !important;
    padding: 2px !important;
    
}
.cs-dot{
    height:.5rem !important;
    width:.5rem !important;
    border-radius:9999px !important;
    background:var(--border-strong) !important;
    transition:all .2s !important;
    padding: 2px !important;
    
}
    
.cs-dot.active{
    background:var(--primary) !important;
    width:1.5rem !important;
    padding: 2px;
    
}

/* ===== Stats ===== */

.card.start-gap h3 {
    font-size: 18px !important;
}

.stats-card .v{font-size:2.25rem;font-weight:700;color:var(--primary)}
.stats-card .l{margin-top:.75rem;font-size:.875rem;color:var(--muted-foreground)}

/* ===== Industries CTA strip ===== */
.industries-cta{margin-top:2.5rem;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1.25rem;text-align:center;border-color:hsla(65,75%,50%,.3)}
@media(min-width:768px){.industries-cta{flex-direction:row;text-align:left}}
.industries-cta p{color:var(--muted-foreground);font-size:1rem}
@media(min-width:768px){.industries-cta p{font-size:1.125rem}}

/* ===== Process ===== */
.process-card{position:relative;overflow:hidden}
.process-card .bignum{position:absolute;right:1rem;top:.5rem;font-size:4.5rem;font-weight:700;line-height:1;color:hsla(65,75%,50%,.07);pointer-events:none}
.process-card .deliv{margin-top:1.25rem;border-top:1px solid var(--border);padding-top:1rem}
.process-card .deliv h5{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}
.process-card .deliv ul{margin-top:.5rem;display:flex;flex-direction:column;gap:.25rem;font-size:.875rem}

/* ===== Tech stack tabs ===== */
.stack-tabs{
    margin-top:2.5rem !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:.75rem !important;
    
}
.stack-tab{
    display:inline-flex !important;
    align-items:center !important;
    gap:.625rem !important;
    border:1px solid var(--border) !important;
    background:var(--card) !important;
    color:var(--foreground) !important;
    padding:.75rem 1.5rem;
    border-radius:9999px !important;
    font-size:.875rem !important;
    font-weight:600 !important;
    transition:all .2s !important;
    
}
.stack-tab svg{
    width:1.25rem !important;
    height:1.25rem !important;
    stroke:currentColor !important;
    fill:none;
    stroke-width:2;
    
}
.stack-tab:hover{
    border-color:var(--border-strong) !important;
    background:var(--card-elevated) !important;
    
}
.stack-tab.active{
    border-color:var(--primary) !important;
    background:var(--primary) !important;
    color:var(--primary-foreground) !important;
    box-shadow:0 4px 6px -1px rgba(0,0,0,.3) !important;
    
}
.stack-grid{
    margin-top:2.5rem;display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.stack-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.stack-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.stack-grid{grid-template-columns:repeat(6,1fr)}}
.stack-item{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem;text-align:center}
.stack-item .logo-box{display:flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:.5rem;background:var(--card-elevated)}
.stack-item .logo-box img{height:2rem;width:2rem}
.stack-item .name{font-size:.875rem;font-weight:500}

/* ===== FAQ ===== */
.faq-list{
    margin:2.5rem auto 0;
    max-width:48rem;
    display:flex;
    flex-direction:column;
    gap:.75rem;
    
}
.faq{
    padding:0;
    
}
.faq button{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:1rem !important;
    padding:1.25rem 1.5rem !important;
    text-align:left !important; 
    font-size:1rem !important;
    font-weight:600 !important;
    background: transparent !important;
    color: white !important;
    border-style: none;
    
}
@media(min-width:768px){
    .faq button
    {
    font-size:1.125rem !important;
    padding:1.25rem 1.75rem !important;
        
    }
    
}
.faq .chev{
    width:1.25rem !important;
    height:1.25rem;
    flex-shrink:0;
    color:var(--muted-foreground) !important;
    transition:transform .3s;
    
}
.faq.open .chev{
    transform:rotate(180deg);
    color:var(--primary) !important;
    
}
.faq .answer{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
    
}
.faq.open .answer{
    grid-template-rows:1fr;
    
}
.faq .answer-inner{
    overflow:hidden;
    
}
.faq .answer p{
    padding:0 1.5rem 1.5rem;
    font-size:.875rem;
    color:var(--muted-foreground) !important;
    
}
@media(min-width:768px){
    .faq .answer p{
        padding:0 1.75rem 1.5rem !important;
        font-size:1rem !important;
        
    }
    
}


/* FAQ — full mobile fix (paste at the very bottom of your CSS) */

.faq-list {
  width: 100% !important;
  max-width: 48rem;
  padding-inline: 0 !important;
  box-sizing: border-box;
}

.faq {
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

.faq button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 1.25rem !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow: hidden !important;
}

.faq button span {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.faq .chev {
  flex-shrink: 0 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.faq .answer p {
  padding: 0 1.25rem 1.25rem !important;
  word-break: break-word !important;
}

/* also fix the outer container if it's bleeding */
body {
  overflow-x: hidden !important;
}

.container {
  width: 100% !important;
  box-sizing: border-box !important;
  padding-inline: 1.25rem !important;
}

@media (max-width: 479px) {
  .faq button {
    font-size: 0.875rem !important;
    padding: 1rem !important;
    gap: 0.5rem !important;
  }
  .faq .answer p {
    padding: 0 1rem 1rem !important;
    font-size: 0.8125rem !important;
  }
}


/* ===== Final CTA ===== */
.final-cta{
    max-width:64rem;
    margin-inline:auto;
    padding:2.5rem;
    text-align:center;
    border-color:hsla(65,75%,50%,.3);

    
}
@media(min-width:768px){
    .final-cta{
    padding:4rem;
        
    }}
.final-cta p.lead{
    margin:1.25rem auto 0;
    max-width:42rem;
    font-size:1.125rem;
    color:var(--muted-foreground) !important;
    
}

/* ===== Floating CTA ===== */
.floating-cta{
    position:fixed;
    bottom:1.5rem;
    left:1.5rem;
    z-index:40;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:var(--primary);
    color:var(--primary-foreground) !important;
    padding:.75rem 1.25rem;
    border-radius:9999px;
    font-size:.875rem;
    font-weight:600;
    box-shadow:var(--shadow-elevated);
    opacity:0;
    transform:translateY(1rem) !important;
    pointer-events:none;
    transition:all .3s;
    
}
.floating-cta.visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    
}
.floating-cta:hover{
    background:var(--primary-glow);
    box-shadow:var(--shadow-glow);
    
}
@media(min-width:768px){
    .floating-cta{
        bottom:2rem;
        left:2rem;
        
    }
    
}
.floating-cta svg{
    width:1rem;
    height:1rem;
    
}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border);background:var(--background)}
.footer-inner{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding-block:3rem}
@media(min-width:768px){.footer-inner{flex-direction:row;align-items:center}}
.footer-inner p{font-size:.75rem;color:var(--muted-foreground);
    
}

/* utility */
.mt-2{
    margin-top:.5rem;
    
}
.mt-4{
    margin-top:1rem;
    font-size: 16px !important;
    
}
.mt-6{
    margin-top:1.5rem;
    
}
.mt-8{
    margin-top:2rem;
    
}
.mt-10{
    margin-top:2.5rem
    ;
}
.flex{
    display:flex;
    
}
.items-center{
    align-items:center;
    
}
.gap-2{
    gap:.5rem;
    
}
.gap-3{
    gap:.75rem;
    
}
.gap-4{
    gap:1rem;
    
}
.start-gap{
    display:flex;
    align-items:flex-start;
    gap:1rem;
    
}/* End custom CSS */