/* ==========================================================================
   CUSTOM LEAD-GEN SOFTWARE service line — components layered on main.css + pp.css
   Loaded only on /custom-lead-generation-software/* pages.
   ========================================================================== */
:root{
  --dev-bg2:#0a1024;
  --dev-line:rgba(255,255,255,.08);
  --dev-line-2:rgba(255,255,255,.16);
  --dev-muted:#8b97b8;
  --dev-ink:#e8eefc;
}

/* ---------- hero ---------- */
.dev-hero{
  padding:clamp(112px,15vh,168px) clamp(18px,5vw,48px) 34px;
  max-width:1240px;margin:0 auto;
}
.dev-hero .crumb{margin-bottom:20px}
.dev-kicker{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:18px;display:block;
}
.dev-hero h1{
  font-size:clamp(2rem,5vw,3.5rem);max-width:19ch;margin-bottom:22px;
}
.dev-hero .hero-sub{
  color:var(--dev-muted);font-size:clamp(1.02rem,1.7vw,1.24rem);
  line-height:1.62;max-width:60ch;margin-bottom:14px;
}
.dev-price-tag{
  display:inline-flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;
  border:1px solid var(--dev-line-2);border-radius:12px;
  padding:11px 18px;margin:14px 0 4px;background:rgba(56,232,255,.05);max-width:56ch;
}
.dev-price-tag b{font-family:var(--mono);font-size:.98rem;color:var(--cyan);font-weight:600;white-space:nowrap}
.dev-price-tag span{color:var(--dev-muted);font-size:.88rem;line-height:1.5}

/* ---------- hero: two columns so the right half is never dead space ---------- */
.dev-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr);
  gap:clamp(32px,4vw,56px);align-items:start;
}
.dev-hero-grid .dev-hero-copy h1{max-width:15ch}
.dev-hero-grid .dev-hero-copy .hero-sub{max-width:52ch}
@media(max-width:980px){
  .dev-hero-grid{grid-template-columns:1fr}
  .dev-hero-grid .dev-hero-copy h1{max-width:19ch}
}

/* spec / source panel that sits beside the hero copy */
.spec-panel{
  border:1px solid var(--dev-line-2);border-radius:16px;padding:26px 26px 22px;
  background:linear-gradient(160deg,rgba(56,232,255,.07),rgba(139,92,246,.05));
}
.spec-panel h2,.spec-panel h3{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:16px;font-weight:500;
}
.spec-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-top:1px solid var(--dev-line);
}
.spec-row:first-of-type{border-top:0;padding-top:0}
.spec-row>span{color:var(--dev-muted);font-size:.86rem;flex:0 0 auto}
.spec-row>b{color:var(--dev-ink);font-size:.88rem;font-weight:500;text-align:right;line-height:1.45}
.spec-panel .spec-note{color:var(--dev-muted);font-size:.82rem;line-height:1.55;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--dev-line)}
.spec-list-plain{list-style:none;display:grid;gap:10px}
.spec-list-plain li{color:var(--dev-ink);font-size:.89rem;line-height:1.5;padding-left:22px;position:relative}
.spec-list-plain li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:2px;
  background:var(--cyan);border-radius:2px}

/* ---------- intro prose + side card (never a lone centred column) ---------- */
.intro-grid{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.85fr);
  gap:clamp(30px,4vw,52px);align-items:start;
}
.intro-grid .intro-copy p{
  color:var(--dev-muted);font-size:1.04rem;line-height:1.72;margin-bottom:18px;max-width:62ch;
}
.intro-grid .intro-copy p:last-child{margin-bottom:0}
@media(max-width:980px){.intro-grid{grid-template-columns:1fr}}

/* ---------- proof band ---------- */
.proof-band{
  border-block:1px solid var(--dev-line);background:rgba(10,16,36,.5);
  padding:34px clamp(18px,5vw,48px);
}
.proof-inner{max-width:1180px;margin:0 auto;display:grid;gap:26px;
  grid-template-columns:minmax(260px,1.1fr) 2fr;align-items:center}
.proof-inner p{color:var(--dev-muted);font-size:.98rem;line-height:1.62}
.proof-inner p strong{color:var(--dev-ink);font-weight:500}
.proof-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px}
.proof-stat{border-left:2px solid rgba(56,232,255,.35);padding-left:14px}
.proof-stat b{display:block;font-family:var(--mono);font-size:1.5rem;color:var(--dev-ink);font-weight:500;line-height:1.2}
.proof-stat span{display:block;color:var(--dev-muted);font-size:.8rem;margin-top:4px;line-height:1.35}
@media(max-width:860px){.proof-inner{grid-template-columns:1fr}}

/* ---------- solution / vertical cards ---------- */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:18px}
.sol-card{
  display:flex;flex-direction:column;background:var(--dev-bg2);
  border:1px solid var(--dev-line);border-radius:14px;padding:24px 22px 22px;
  transition:border-color .25s,transform .25s;color:inherit;
}
.sol-card:hover{border-color:rgba(56,232,255,.42);transform:translateY(-3px);text-decoration:none}
.sol-card h3{font-size:1.04rem;color:var(--dev-ink);margin-bottom:9px;line-height:1.28}
.sol-card p{color:var(--dev-muted);font-size:.92rem;line-height:1.55;flex:1}
.sol-more{
  margin-top:16px;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  color:var(--cyan);text-transform:uppercase;
}

/* ---------- numbered process ---------- */
.step-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:20px}
.step-item{border-top:1px solid var(--dev-line-2);padding-top:18px}
.step-item b{
  display:block;font-family:var(--mono);font-size:.76rem;letter-spacing:.2em;
  color:var(--cyan);margin-bottom:10px;
}
.step-item h3{font-size:1.02rem;color:var(--dev-ink);margin-bottom:8px}
.step-item p{color:var(--dev-muted);font-size:.92rem;line-height:1.58}

/* ---------- sector / pain rows ---------- */
.sector-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 34px}
.sector-item{padding:20px 0;border-bottom:1px solid var(--dev-line)}
.sector-item h3{font-size:1rem;color:var(--dev-ink);margin-bottom:7px}
.sector-item p{color:var(--dev-muted);font-size:.93rem;line-height:1.58}

/* ---------- build examples ---------- */
.build-list{display:grid;gap:16px}
.build-item{
  background:linear-gradient(180deg,var(--dev-bg2),rgba(6,10,24,.6));
  border:1px solid var(--dev-line);border-left:3px solid rgba(56,232,255,.5);
  border-radius:12px;padding:22px 24px;
}
.build-item h3{font-size:1.05rem;color:var(--dev-ink);margin-bottom:9px}
.build-item p{color:var(--dev-muted);font-size:.95rem;line-height:1.62}
@media(min-width:900px){.build-list{grid-template-columns:repeat(3,1fr)}}

/* ---------- source chips ---------- */
.src-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.src-chip{
  border:1px solid var(--dev-line-2);border-radius:999px;padding:7px 15px;
  font-size:.86rem;color:var(--dev-muted);background:rgba(10,16,36,.5);
}

/* ---------- city grid ---------- */
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.city-link{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  border:1px solid var(--dev-line);border-radius:10px;padding:12px 15px;
  background:rgba(10,16,36,.45);color:var(--dev-ink);font-size:.93rem;
  transition:border-color .2s,background .2s;
}
.city-link:hover{border-color:rgba(56,232,255,.45);background:rgba(56,232,255,.06);text-decoration:none}
.city-link i{font-style:normal;font-family:var(--mono);font-size:.74rem;color:var(--dev-muted)}

/* ---------- deliverables ---------- */
.deliver-box{
  border:1px solid var(--dev-line-2);border-radius:14px;padding:26px 28px;
  background:rgba(10,16,36,.55);
}
.deliver-box h3{font-size:1.05rem;color:var(--dev-ink);margin-bottom:14px}
.deliver-box ul{list-style:none;display:grid;gap:11px}
.deliver-box li{
  color:var(--dev-muted);font-size:.95rem;line-height:1.55;padding-left:24px;position:relative;
}
.deliver-box li::before{
  content:"";position:absolute;left:2px;top:.55em;width:9px;height:2px;
  background:var(--cyan);border-radius:2px;
}

/* ---------- price panel ---------- */
.price-panel{
  display:grid;gap:28px;grid-template-columns:minmax(240px,.9fr) 1.6fr;align-items:start;
  border:1px solid var(--dev-line-2);border-radius:16px;padding:32px clamp(22px,3vw,38px);
  background:linear-gradient(140deg,rgba(56,232,255,.06),rgba(139,92,246,.05));
}
.price-panel .pp-big{font-family:var(--mono);font-size:clamp(2.2rem,4.5vw,3rem);color:var(--dev-ink);line-height:1.1}
.price-panel .pp-big small{display:block;font-family:var(--font);font-size:.9rem;color:var(--dev-muted);margin-top:10px;letter-spacing:0}
.price-panel ul{list-style:none;display:grid;gap:12px}
.price-panel li{color:var(--dev-muted);font-size:.95rem;line-height:1.58}
.price-panel li b{color:var(--dev-ink);font-weight:500}
@media(max-width:820px){.price-panel{grid-template-columns:1fr}}

/* ---------- inline CTA ---------- */
.dev-cta{
  text-align:center;padding:64px clamp(18px,5vw,48px);
  border-top:1px solid var(--dev-line);
}
.dev-cta h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:14px}
.dev-cta p{color:var(--dev-muted);max-width:56ch;margin:0 auto 26px;line-height:1.62}

/* ---------- nearby cities strip ---------- */
.near-strip{display:flex;flex-wrap:wrap;gap:9px}
.near-strip a{
  border:1px solid var(--dev-line);border-radius:999px;padding:7px 15px;
  font-size:.87rem;color:var(--dev-muted);background:rgba(10,16,36,.4);
}
.near-strip a:hover{color:var(--dev-ink);border-color:rgba(56,232,255,.4);text-decoration:none}