*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Backgrounds */
  --bg-primary:#FFFFFF;
  --bg-secondary:#F8FAFC;
  --bg-section-alt:#F1F5F9;
  --bg-card:#FFFFFF;
  --bg-card-hover:#FAFBFF;

  /* Text */
  --text-heading:#1E293B;
  --text-body:#334155;
  --text-muted:#64748B;
  --text-light:#94A3B8;

  /* Brand Colors */
  --magenta:#ED1E81;
  --light-blue:#77C3EC;
  --gradient-primary:linear-gradient(90deg,#ED1E81 0%,#77C3EC 100%);
  --gradient-stat:linear-gradient(90deg,#FF0081 0%,#79C5EC 100%);
  --gradient-cta:linear-gradient(90deg,#ED1E81 0%,#77C3EC 100%);
  --magenta-tint:rgba(237,30,129,.07);
  --magenta-tint-strong:rgba(237,30,129,.12);
  --blue-tint:rgba(119,195,236,.15);
  --green:#10B981;

  /* Borders & Shadows */
  --border:#E2E8F0;
  --border-hover:rgba(237,30,129,0.3);
  --shadow-card:0 1px 3px rgba(0,0,0,0.05),0 10px 30px rgba(0,0,0,0.04);
  --shadow-card-hover:0 10px 40px rgba(237,30,129,0.08);

  /* Fonts */
  --font-h:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --font-b:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;

  /* Layout */
  --container:min(1240px,92vw);
  --radius:16px;
  --radius-pill:50px;

  /* Footer (dark) */
  --footer-bg:#1E293B;
  --footer-bg-darker:#172033;
  --footer-text:#CBD5E1;
  --footer-muted:#94A3B8;
  --footer-border:rgba(255,255,255,0.08);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-b);color:var(--text-body);background:var(--bg-primary);line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:var(--font-h);color:var(--text-heading);line-height:1.2;font-weight:800}
a{text-decoration:none;color:var(--magenta);transition:color .2s}
a:hover{color:#c81870}
img{max-width:100%;display:block}
.container{width:var(--container);margin:0 auto}
.section{padding:80px 0}
@media(max-width:768px){.section{padding:56px 0}}
.section-alt{background:var(--bg-section-alt)}

/* ---------- BREADCRUMB ---------- */
.site-header{padding:20px 0;background:var(--bg-primary);border-bottom:1px solid var(--border)}
.header-logo{display:inline-block}
.header-logo img{height:40px;width:auto}
.breadcrumb{padding:16px 0}
.breadcrumb-list{list-style:none;display:flex;align-items:center;gap:8px;font-size:.85rem}
.breadcrumb-list li+li::before{content:'/';color:var(--text-light);margin-right:4px}
.breadcrumb-list a{color:var(--text-muted);font-weight:500}
.breadcrumb-list a:hover{color:var(--magenta)}
.breadcrumb-list .current{color:var(--text-heading);font-weight:600}

/* ---------- HERO ---------- */
.hero{padding:64px 0 80px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-180px;right:-120px;width:600px;height:600px;background:radial-gradient(circle,var(--magenta-tint) 0%,transparent 70%);pointer-events:none;z-index:0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:start;position:relative;z-index:1}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:var(--radius-pill);border:1px solid var(--border-hover);background:var(--magenta-tint);font-size:.8rem;color:var(--magenta);font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-bottom:20px}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--magenta);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;margin-bottom:20px;line-height:1.15;color:var(--text-heading)}
.hero h1 span{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:1.1rem;color:var(--text-body);max-width:540px;margin-bottom:32px;line-height:1.7}
.trust-pills{display:flex;flex-wrap:wrap;gap:12px}
.trust-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-card);font-size:.85rem;color:var(--text-heading);font-weight:600}
.trust-pill .num{color:var(--magenta);font-weight:800;font-family:var(--font-h)}
.trust-pill svg{width:16px;height:16px;flex-shrink:0;color:var(--green)}

/* ---------- LEAD FORM ---------- */
.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:36px 32px;position:relative;overflow:hidden}
.form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary)}
.form-card h3{font-size:1.25rem;margin-bottom:6px;color:var(--text-heading)}
.form-card .form-sub{color:var(--text-muted);font-size:.88rem;margin-bottom:24px;line-height:1.5}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.8rem;color:var(--text-body);margin-bottom:6px;font-weight:600}
.form-group input,.form-group select{width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-heading);font-family:var(--font-b);font-size:.9rem;transition:border-color .2s,box-shadow .2s}
.form-group input::placeholder{color:var(--text-light)}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px var(--magenta-tint);background:var(--bg-primary)}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.form-group select option{background:var(--bg-primary);color:var(--text-heading)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 28px;border:none;border-radius:var(--radius-pill);background:var(--gradient-cta);color:#fff;font-family:var(--font-h);font-size:1rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .2s;letter-spacing:.2px}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.form-trust{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.78rem;color:var(--text-muted)}
.form-trust svg{width:14px;height:14px;color:var(--green);flex-shrink:0}

/* ---------- TRUST BAR ---------- */
.trust-bar{background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:32px 0}
.trust-bar-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:40px}
.trust-bar-label{font-size:.78rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:700;white-space:nowrap}
.trust-bar-logos{display:flex;align-items:center;flex-wrap:wrap;gap:32px;justify-content:center}
.trust-bar-logos img{height:28px;opacity:.5;filter:grayscale(100%);transition:opacity .2s,filter .2s}
.trust-bar-logos img:hover{opacity:1;filter:none}

/* ---------- SECTION HEADERS ---------- */
.section-header{text-align:center;max-width:640px;margin:0 auto 48px}
.section-header .label,.methodology-header .label{color:var(--magenta);font-size:.78rem;text-transform:uppercase;letter-spacing:2px;font-weight:700;margin-bottom:14px;display:inline-flex;align-items:center;gap:10px}
.section-header .label::before,.methodology-header .label::before{content:'';width:28px;height:3px;border-radius:2px;background:var(--gradient-primary)}
.section-header h2{font-size:clamp(1.5rem,3.2vw,2.2rem);margin-bottom:14px;color:var(--text-heading)}
.section-header p{color:var(--text-body);font-size:1rem;line-height:1.7}

/* ---------- METHODOLOGY ---------- */
.methodology-header{text-align:center;max-width:700px;margin:0 auto 56px}
.methodology-header h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:16px;color:var(--text-heading)}
.methodology-header p{color:var(--text-body);font-size:1.05rem;line-height:1.7}

.timeline{position:relative;max-width:880px;margin:0 auto}
.timeline::before{content:'';position:absolute;left:28px;top:0;bottom:0;width:2px;background:var(--gradient-primary);opacity:.3}
@media(max-width:640px){.timeline::before{left:18px}}

.phase{position:relative;padding-left:72px;margin-bottom:12px}
@media(max-width:640px){.phase{padding-left:52px}}
.phase-dot{position:absolute;left:17px;top:22px;width:24px;height:24px;border-radius:50%;background:var(--bg-primary);border:2px solid var(--magenta);display:flex;align-items:center;justify-content:center;z-index:1;transition:background .2s,border-color .2s}
@media(max-width:640px){.phase-dot{left:7px;width:22px;height:22px}}
.phase-dot span{font-size:.65rem;font-weight:700;color:var(--magenta);font-family:var(--font-h)}
.phase.active .phase-dot{background:var(--gradient-primary);border-color:var(--magenta)}
.phase.active .phase-dot span{color:#fff}

.phase-header{display:flex;align-items:center;gap:16px;cursor:pointer;padding:18px 24px;border-radius:12px;border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-card);transition:background .2s,border-color .2s}
.phase-header:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}
.phase.active .phase-header{border-color:var(--border-hover);background:var(--magenta-tint)}
.phase-title{flex:1}
.phase-title h3{font-size:1.1rem;margin-bottom:2px;color:var(--text-heading)}
.phase-title .phase-time{font-size:.8rem;color:var(--magenta);font-weight:600}
.phase-toggle{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:transform .3s,border-color .2s;flex-shrink:0}
.phase.active .phase-toggle{transform:rotate(180deg);border-color:var(--magenta)}
.phase-toggle svg{width:14px;height:14px;color:var(--text-muted)}

.phase-body{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s;opacity:0}
.phase.active .phase-body{max-height:600px;opacity:1}
.phase-content{padding:20px 24px 28px;border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;background:var(--bg-card)}
.phase-content ul{list-style:none;margin-bottom:16px}
.phase-content ul li{position:relative;padding-left:22px;margin-bottom:10px;font-size:.92rem;color:var(--text-body);line-height:1.6}
.phase-content ul li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--magenta)}
.phase-deliverable{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;background:var(--magenta-tint);border:1px solid var(--border-hover);font-size:.82rem;color:var(--magenta);font-weight:600}
.phase-deliverable svg{width:14px;height:14px}

/* ---------- MID CTA BANNER ---------- */
.mid-cta{padding:48px;border-radius:20px;border:1px solid var(--border-hover);background:linear-gradient(135deg,rgba(237,30,129,.05),rgba(119,195,236,.08));text-align:center;margin:56px 0 0}
.mid-cta h3{font-size:1.3rem;margin-bottom:10px;color:var(--text-heading)}
.mid-cta p{color:var(--text-body);font-size:.95rem;margin-bottom:24px}
.mid-cta .btn-primary{width:auto;padding:14px 36px}

/* ---------- DIFFERENTIATORS ---------- */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:960px){.diff-grid{grid-template-columns:1fr}}
.diff-card{padding:36px 28px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-card);transition:border-color .25s,transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.diff-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary);opacity:0;transition:opacity .25s}
.diff-card:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.diff-card:hover::before{opacity:1}
.diff-icon{width:52px;height:52px;border-radius:12px;background:var(--magenta-tint);border:1px solid var(--border-hover);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.diff-icon svg{width:24px;height:24px;color:var(--magenta)}
.diff-card h3{font-size:1.15rem;margin-bottom:12px;color:var(--text-heading)}
.diff-card p{font-size:.92rem;line-height:1.7;color:var(--text-body)}

/* ---------- RESULTS / CASE STUDIES ---------- */
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:960px){.results-grid{grid-template-columns:1fr}}
.result-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-card);overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.result-card:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.result-card-body{padding:28px 24px}
.result-tag{display:inline-block;padding:4px 12px;border-radius:var(--radius-pill);background:var(--magenta-tint);border:1px solid var(--border-hover);font-size:.72rem;color:var(--magenta);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px}
.result-card h3{font-size:1.05rem;margin-bottom:6px;color:var(--text-heading)}
.result-metric{font-size:1.7rem;font-family:var(--font-h);font-weight:800;background:var(--gradient-stat);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px}
.result-card p{font-size:.88rem;color:var(--text-body);line-height:1.6;margin-bottom:16px}
.result-services{display:flex;flex-wrap:wrap;gap:6px}
.result-services span{padding:4px 10px;border-radius:6px;background:var(--blue-tint);border:1px solid rgba(119,195,236,.35);font-size:.72rem;color:#2B6C8F;font-weight:600}

/* ---------- COMPARISON ---------- */
.compare-wrapper{max-width:920px;margin:0 auto}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-card)}
@media(max-width:640px){.compare-grid{grid-template-columns:1fr}}
.compare-col{padding:32px 28px}
.compare-col.traditional{background:var(--bg-secondary)}
.compare-col.dimag{background:var(--magenta-tint);border-left:1px solid var(--border)}
@media(max-width:640px){.compare-col.dimag{border-left:none;border-top:1px solid var(--border)}}
.compare-col h3{font-size:1.05rem;margin-bottom:24px;display:flex;align-items:center;gap:10px;color:var(--text-heading)}
.compare-col.dimag h3{color:var(--magenta)}
.compare-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;font-size:.9rem;line-height:1.5;color:var(--text-body)}
.compare-item svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.compare-col.traditional .compare-item svg{color:var(--text-light)}
.compare-col.dimag .compare-item svg{color:var(--green)}
.compare-col.dimag .compare-item{color:var(--text-heading);font-weight:500}

/* ---------- INDUSTRIES ---------- */
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:768px){.industry-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.industry-grid{grid-template-columns:1fr}}
.industry-card{padding:28px 24px;border-radius:14px;border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-card);text-align:center;transition:border-color .25s,transform .25s,box-shadow .25s}
.industry-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.industry-icon{width:48px;height:48px;margin:0 auto 16px;border-radius:12px;background:var(--magenta-tint);display:flex;align-items:center;justify-content:center}
.industry-icon svg{width:22px;height:22px;color:var(--magenta)}
.industry-card h4{font-size:.95rem;margin-bottom:6px;color:var(--text-heading)}
.industry-card p{font-size:.82rem;color:var(--text-muted);line-height:1.5}

/* ---------- PRICING ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
@media(max-width:960px){.pricing-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}}
.pricing-card{padding:36px 28px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s}
.pricing-card:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.pricing-card.featured{border:2px solid var(--magenta);position:relative;box-shadow:var(--shadow-card-hover)}
.pricing-card.featured::before{content:'MOST POPULAR';position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:5px 18px;border-radius:var(--radius-pill);background:var(--gradient-cta);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:1px;white-space:nowrap}
.pricing-card h3{font-size:1.2rem;margin-bottom:8px;color:var(--text-heading)}
.pricing-card .pricing-desc{font-size:.88rem;color:var(--text-muted);margin-bottom:24px;line-height:1.5}
.pricing-features{list-style:none;flex:1;margin-bottom:28px}
.pricing-features li{position:relative;padding-left:26px;margin-bottom:12px;font-size:.88rem;color:var(--text-body);line-height:1.5}
.pricing-features li::before{content:'';position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2310B981'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5L11 5l1 1z'/%3E%3C/svg%3E") center/contain no-repeat}
.pricing-card .btn-secondary{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:13px 24px;border-radius:var(--radius-pill);border:2px solid var(--magenta);color:var(--magenta);font-family:var(--font-h);font-size:.95rem;font-weight:700;cursor:pointer;background:transparent;transition:background .2s,color .2s,box-shadow .2s}
.pricing-card .btn-secondary:hover{background:var(--gradient-cta);border-color:transparent;color:#fff;box-shadow:var(--shadow-card-hover)}
.pricing-card.featured .btn-secondary{background:var(--gradient-cta);border:none;color:#fff}
.pricing-card.featured .btn-secondary:hover{opacity:.92}
.pricing-note{text-align:center;margin-top:32px;font-size:.88rem;color:var(--text-muted);font-style:italic}

/* ---------- TESTIMONIALS ---------- */
.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:768px){.testimonials-grid{grid-template-columns:1fr}}
.testimonial-card{padding:32px 28px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-card);position:relative}
.testimonial-card::before{content:'\201C';position:absolute;top:16px;right:24px;font-size:4rem;font-family:Georgia,serif;color:var(--magenta);opacity:.12;line-height:1}
.testimonial-stars{display:flex;gap:2px;margin-bottom:16px}
.testimonial-stars svg{width:16px;height:16px;color:#f5a623}
.testimonial-card blockquote{font-size:.95rem;color:var(--text-body);line-height:1.7;margin-bottom:20px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{width:40px;height:40px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;color:#fff;font-size:.9rem}
.testimonial-meta h4{font-size:.88rem;color:var(--text-heading)}
.testimonial-meta span{font-size:.78rem;color:var(--text-muted)}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:20px 0;cursor:pointer;gap:16px}
.faq-question h4{font-size:1rem;font-weight:600;flex:1;color:var(--text-heading)}
.faq-toggle{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:transform .3s,border-color .2s;flex-shrink:0}
.faq-item.active .faq-toggle{transform:rotate(45deg);border-color:var(--magenta)}
.faq-toggle svg{width:14px;height:14px;color:var(--text-muted)}
.faq-item.active .faq-toggle svg{color:var(--magenta)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s;opacity:0}
.faq-item.active .faq-answer{max-height:400px;opacity:1}
.faq-answer p{padding:0 0 20px;font-size:.92rem;color:var(--text-body);line-height:1.7}

/* ---------- CITY GRID ---------- */
.city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.city-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.city-grid{grid-template-columns:repeat(2,1fr)}}
.city-card{padding:24px 20px;border-radius:12px;border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-card);text-align:center;transition:border-color .25s,transform .25s,box-shadow .25s}
.city-card:hover{border-color:var(--magenta);transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.city-card h4{font-size:.95rem;margin-bottom:4px;color:var(--text-heading)}
.city-card p{font-size:.78rem;color:var(--text-muted)}
.city-card .arrow{display:inline-block;margin-top:10px;color:var(--magenta);font-size:.8rem;font-weight:700;transition:transform .2s}
.city-card:hover .arrow{transform:translateX(4px)}

/* ---------- OTHER SERVICES ---------- */
.services-links{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:768px){.services-links{grid-template-columns:1fr}}
.service-link-card{display:flex;align-items:center;gap:16px;padding:24px;border-radius:12px;border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-card);transition:border-color .25s,transform .25s,box-shadow .25s}
.service-link-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.service-link-icon{width:44px;height:44px;border-radius:10px;background:var(--blue-tint);border:1px solid rgba(119,195,236,.35);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.service-link-icon svg{width:20px;height:20px;color:#2B8FC7}
.service-link-card h4{font-size:.95rem;margin-bottom:2px;color:var(--text-heading)}
.service-link-card p{font-size:.78rem;color:var(--text-muted)}

/* ---------- FINAL CTA ---------- */
.final-cta{background:var(--bg-section-alt);position:relative;overflow:hidden}
.final-cta::before{content:'';position:absolute;bottom:-200px;left:50%;transform:translateX(-50%);width:800px;height:400px;background:radial-gradient(ellipse,var(--magenta-tint) 0%,transparent 70%);pointer-events:none}
.final-cta-inner{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:start;position:relative;z-index:1}
@media(max-width:960px){.final-cta-inner{grid-template-columns:1fr}}
.final-cta h2{font-size:clamp(1.5rem,3.2vw,2.2rem);margin-bottom:16px;color:var(--text-heading)}
.final-cta p{color:var(--text-body);font-size:1.05rem;line-height:1.7;margin-bottom:24px;max-width:520px}

/* ---------- FOOTER ---------- */
.footer{background:var(--footer-bg);border-top:1px solid var(--footer-border);padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media(max-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .logo{font-family:var(--font-h);font-size:1.5rem;font-weight:800;color:#fff;margin-bottom:12px}
.footer-brand .logo span{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.footer-brand p{font-size:.88rem;color:var(--footer-muted);line-height:1.6;margin-bottom:20px}
.footer-social{display:flex;gap:12px}
.footer-social a{width:36px;height:36px;border-radius:8px;border:1px solid var(--footer-border);display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.footer-social a:hover{border-color:var(--magenta);background:rgba(237,30,129,.15)}
.footer-social a svg{width:16px;height:16px;color:var(--footer-muted)}
.footer-col h4{font-size:.85rem;color:#fff;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:20px;font-weight:700}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:10px}
.footer-col ul li a{color:var(--footer-muted);font-size:.88rem;transition:color .2s}
.footer-col ul li a:hover{color:var(--light-blue)}
.footer-bottom{border-top:1px solid var(--footer-border);padding:20px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--footer-muted)}
.footer-bottom a{color:var(--footer-muted)}
.footer-bottom a:hover{color:var(--light-blue)}

/* ---------- WHATSAPP FLOAT ---------- */
.whatsapp-float{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.35);z-index:999;transition:transform .2s}
.whatsapp-float:hover{transform:scale(1.1)}
.whatsapp-float svg{width:28px;height:28px;color:#fff}

/* ---------- STICKY MOBILE CTA ---------- */
.sticky-mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;padding:12px 16px;background:var(--bg-card);border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(0,0,0,.06);z-index:998;gap:10px;align-items:center}
@media(max-width:768px){.sticky-mobile-cta{display:flex}}
.sticky-mobile-cta .btn-primary{flex:1;padding:12px 20px;font-size:.9rem}
.sticky-mobile-cta .btn-wa{width:44px;height:44px;border-radius:10px;background:#25D366;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sticky-mobile-cta .btn-wa svg{width:22px;height:22px;color:#fff}

/* ---------- STAT COUNTER ---------- */
.stat-counter{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.stat-counter.visible{opacity:1;transform:translateY(0)}

/* ---------- BODY PADDING FOR STICKY CTA ---------- */
@media(max-width:768px){body{padding-bottom:72px}}

/* =====================================================
   DiMaG LIVE-SITE OVERRIDES. Solid CTA buttons and pill radius.
   Matches dimag.agency homepage, replaces gradient buttons.
   ===================================================== */
:root{
  --gradient-cta:#FF0081;
  --radius-pill:200px;
}
.btn-primary{
  background:#FF0081;
  color:#fff;
  border:none;
  border-radius:200px;
  padding:14px 28px;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 0 10px rgba(0,0,0,0.15);
  text-decoration:none;
}
.btn-primary:hover{
  background:#E6006F;
  transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(255,0,129,0.3);
  color:#fff;
}
.btn-secondary:hover{
  background:#FF0081;
  border-color:#FF0081;
  color:#fff;
  box-shadow:0 4px 20px rgba(255,0,129,0.3);
}
.form-card .btn-primary,
.form-card button[type="submit"]{
  background:#FF0081;
  border-radius:200px;
  box-shadow:0 0 10px rgba(0,0,0,0.15);
}
.pricing-card.featured .btn-secondary{
  background:#FF0081;
  border:none;
  color:#fff;
}
.pricing-card.featured::before{
  background:#FF0081;
}
.sticky-cta .btn-primary,
.sticky-mobile-cta .btn-primary{
  background:#FF0081;
  border-radius:200px;
}
.section-header .label::before,.methodology-header .label::before{background:#FF0081}
.label,.section-label,
.section-header .label,.methodology-header .label{
  border-radius:200px;
}


/* ═══════════════════════════════════════════════════════════════
   CRO AUDIT FIXES, v3.2
   Appended so they win on specificity without editing the rules
   above. Each block names the finding it closes.
   ═══════════════════════════════════════════════════════════════ */

/* B3  Testimonial quote mark rendered as a faint artefact.
       Was opacity .12 at 4rem, which reads as a smudge rather than a
       glyph. Raised, moved to the left where a quote belongs, and
       given a weight that survives on a light card. */
.testimonial-card::before{
  content:'\201C';
  position:absolute;
  top:8px; left:22px; right:auto;
  font-size:3.4rem;
  font-family:Georgia,'Times New Roman',serif;
  color:var(--magenta);
  opacity:.28;
  line-height:1;
  pointer-events:none;
}
.testimonial-card{position:relative;padding-top:44px}
.testimonial-card blockquote{position:relative;z-index:1}

/* C4  Approach section body copy set smaller than the rest of the page.
       Brought up to the standard body scale used in Services and
       Testimonials, and the three stat pills with it. */
.approach p,
.approach-section p,
.section .approach-body p{font-size:1rem;line-height:1.75;color:var(--text-body)}
.stat-block,.stat-pill,.trust-pill{font-size:.92rem;letter-spacing:.2px}
.stat-block .num,.stat-pill .num{font-size:1.5rem}
.stat-block .label,.stat-pill .label{font-size:.82rem}

/* D1  Form labels sitting flush against their inputs.
       line-height was 1, so the descender touched the field border. */
.form-group label,
.form-card label,
form label{line-height:1.4;margin-bottom:8px;display:block}
.form-group{margin-bottom:18px}
.form-group input,.form-group select,.form-group textarea{margin-top:2px}

/* B1  Partner logo strip. The images 404, so the row showed broken
       placeholders. The fallback below renders a text wordmark in the
       same visual weight when an image fails, which reads as
       intentional rather than broken. The JS adds .logo-fallback. */
.trust-bar-logos img{height:28px;opacity:.55;filter:grayscale(100%)}
.trust-bar-logos img:hover{opacity:1;filter:none}
.trust-bar-logos .logo-fallback{
  display:inline-flex;align-items:center;height:28px;padding:0 14px;
  border:1px solid var(--border);border-radius:6px;
  font-family:var(--font-h),sans-serif;font-weight:700;font-size:.82rem;
  letter-spacing:.4px;color:var(--text-muted);background:var(--bg-card);
  white-space:nowrap;
}

/* B2  Service card icons were the same stock mark on all three.
       The JS swaps in a distinct geometric mark per card. This just
       makes sure the container renders them at a consistent size. */
.diff-icon svg,.industry-icon svg,.service-link-icon svg{width:22px;height:22px}
.diff-icon,.industry-icon{flex:none}

/* C2  Submit button states. The JS sets these classes. */
.btn-primary.is-sending{opacity:.7;pointer-events:none}
.form-success{
  margin-top:14px;padding:14px 16px;border-radius:10px;
  background:var(--magenta-tint);border:1px solid var(--border-hover);
  font-size:.92rem;line-height:1.6;color:var(--text-heading);
}

/* A1  Header navigation, for pages the pipeline generates. */
.site-header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;
  padding:14px 0;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .container{display:flex;align-items:center;gap:28px;width:100%}
.site-header .header-logo{
  font-family:var(--font-h),sans-serif;font-weight:800;font-size:1.15rem;
  color:var(--text-heading);text-decoration:none;letter-spacing:-.5px;
  flex:0 0 auto;
}
.site-header .header-logo img{height:32px;width:auto}
.site-nav{display:flex;gap:22px;margin-left:auto;flex:0 0 auto}
.site-nav a{
  font-size:.9rem;font-weight:600;color:var(--text-body);
  text-decoration:none;transition:color .2s;
  white-space:nowrap;
}
.site-nav a:hover{color:var(--magenta)}
/* Header CTA reset. The base .btn-primary is set to width:100% for form
   buttons, which made the header CTA stretch the whole row. Scoping to
   .header-cta locks width and layout without touching the pink pill look. */
.site-header .btn-primary,
.header-cta{
  width:auto;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  padding:10px 22px;
  font-size:.86rem;font-weight:600;
  white-space:nowrap;
  box-shadow:none;
  line-height:1.2;
  min-width:0;
}
@media(max-width:860px){
  .site-nav{display:none}
  .site-header .btn-primary,.header-cta{margin-left:auto}
}

/* D3  Footer city line ran together as one string. */
.footer-cities{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0}
.footer-cities li{font-size:.86rem;color:var(--text-muted)}
.footer-cities li+li{position:relative;padding-left:16px}
.footer-cities li+li::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--magenta);opacity:.6;
}


/* ═══════════════════════════════════════════════════════════════
   CRO AUDIT FIXES, v3.3
   ═══════════════════════════════════════════════════════════════ */

/* D2  FAQ accordion visual style was inconsistent with the reference
       used elsewhere on the DiMag site. Reference uses a plus and
       minus icon in a light state with no filled active row. The
       previous rules used a rotating cross inside a circle and tinted
       the active border. Overrides land here so they win on cascade
       order at equal specificity. */
.faq-item{
  border-bottom:1px solid var(--border);
  background:transparent;
}
.faq-item.active{
  background:transparent;
}
.faq-question{
  padding:22px 4px;
  gap:20px;
}
.faq-question h4{
  font-weight:600;color:var(--text-heading);
}
.faq-toggle{
  width:22px;height:22px;
  border:0;background:none;
  display:flex;align-items:center;justify-content:center;
  transform:none;transition:none;
  position:relative;flex-shrink:0;
}
.faq-item.active .faq-toggle{
  transform:none;border:0;background:none;
}
/* Hide the inline SVG the pipeline emits and draw a plus/minus with
   pseudo elements so the icon never depends on an external asset. */
.faq-toggle svg{display:none}
.faq-toggle::before,
.faq-toggle::after{
  content:'';position:absolute;
  background:var(--text-muted);
  transition:background .2s, opacity .2s, transform .2s;
}
.faq-toggle::before{
  /* horizontal bar, always visible, becomes the minus */
  width:14px;height:2px;border-radius:1px;
}
.faq-toggle::after{
  /* vertical bar, hides on active to turn plus into minus */
  width:2px;height:14px;border-radius:1px;
}
.faq-item.active .faq-toggle::before,
.faq-item.active .faq-toggle::after{
  background:var(--magenta);
}
.faq-item.active .faq-toggle::after{
  transform:scaleY(0);
}
/* Replace the tinted active border with a subtle underline accent. */
.faq-item{position:relative}
.faq-item.active::after{
  content:'';position:absolute;left:0;bottom:-1px;height:2px;
  width:48px;background:var(--magenta);border-radius:1px;
}


/* ═══════════════════════════════════════════════════════════════
   LEAD FORM STATES, v3.3.3
   ═══════════════════════════════════════════════════════════════ */
.dimag-lead-success{
  padding:24px 28px;border-radius:16px;
  background:#F7FFF8;border:1px solid #C6F0CE;
  color:#0B4222;font-family:var(--font-body,Poppins),sans-serif;font-size:1rem;line-height:1.55;
  box-shadow:0 4px 24px rgba(6,80,32,.06);
}
.dimag-lead-success strong{
  display:block;margin-bottom:6px;
  font-family:var(--font-h,Raleway),sans-serif;font-size:1.1rem;color:var(--magenta,#FF0081);
}
.dimag-lead-error{
  margin:0 0 14px 0;padding:12px 16px;border-radius:10px;
  background:#FFF5F5;border:1px solid #FFCFCF;color:#8B1F1F;
  font-family:var(--font-body,Poppins),sans-serif;font-size:.92rem;line-height:1.45;
}
.btn-primary.is-sending{opacity:.75;cursor:wait}