/* ============================================================
   JCS BPO — Service detail page styles ("Lead Generation
   & Outreach"). Builds on style.css + ourwork.css + about.css
   (tokens, header, footer, hero art, glass dashboard, reveal
   system, timeline). Adds: service hero tuning, feature grid,
   benefit grid, process panel, growth-network flourishes.
   ============================================================ */

/* ---- Hero copy tuning ---- */
.svc-hero .hero-copy{max-width:640px}
.svc-hero .hero-copy h1{font-size:clamp(2.3rem,4.7vw,4.1rem)}
.svc-hero .hero-copy p.sub{max-width:600px}
.svc-hero .hero-grid{grid-template-columns:1.04fr .96fr}
.svc-kicker{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.02em;color:var(--heading);
  padding:.5rem .9rem .5rem .55rem;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  border:1px solid var(--border);backdrop-filter:blur(8px);
}
.svc-kicker .k-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--on-primary)}
.svc-kicker .k-ic svg{width:16px;height:16px}

/* ---- dashboard flourish: animated growth trendline ---- */
.dash-trend{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.10)}
.dash-trend .dt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.dash-trend .dt-head span{font-size:.78rem;color:var(--muted);font-weight:600}
.dash-trend .dt-head b{font-family:"Poppins",sans-serif;font-weight:700;font-size:.95rem;color:#48d39b}
.spark{display:flex;align-items:flex-end;gap:.45rem;height:54px}
.spark i{flex:1;border-radius:6px 6px 3px 3px;background:var(--grad);opacity:.9;transform-origin:bottom;animation:sparkGrow 1.1s var(--ease) both}
.spark i:nth-child(1){height:34%;animation-delay:.05s}
.spark i:nth-child(2){height:46%;animation-delay:.15s}
.spark i:nth-child(3){height:40%;animation-delay:.25s}
.spark i:nth-child(4){height:62%;animation-delay:.35s}
.spark i:nth-child(5){height:55%;animation-delay:.45s}
.spark i:nth-child(6){height:78%;animation-delay:.55s}
.spark i:nth-child(7){height:92%;animation-delay:.65s}
@keyframes sparkGrow{from{transform:scaleY(.04);opacity:.2}to{transform:scaleY(1);opacity:.9}}
@media (prefers-reduced-motion:reduce){.spark i{animation:none!important}}

/* ============ Section · Key Features ============ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.feat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:2rem 1.8rem;position:relative;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.feat-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.feat-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.feat-card:hover::after{opacity:1}
.feat-ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:var(--halo);color:var(--primary);margin-bottom:1.2rem;transition:transform .5s var(--ease)}
.feat-card:hover .feat-ic{transform:rotate(-8deg) scale(1.06)}
.feat-ic svg{width:26px;height:26px}
.feat-card h4{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.16rem;color:var(--heading);margin-bottom:.55rem}
.feat-card p{font-size:.96rem;color:var(--muted);line-height:1.58;margin:0}

/* ============ Section · Benefits ============ */
.benefits{background:var(--bg-alt)}
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
.benefit{
  display:flex;gap:1.1rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:1.7rem 1.7rem;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.benefit:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.benefit .b-ic{flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:var(--on-primary);box-shadow:0 12px 26px -12px var(--halo)}
.benefit .b-ic svg{width:24px;height:24px}
.benefit h4{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.12rem;color:var(--heading);margin-bottom:.4rem}
.benefit p{font-size:.95rem;color:var(--muted);line-height:1.56;margin:0}

/* ============ Section · Our Process ============ */
.proc-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2.4rem,5vw,4rem);align-items:start}
/* number badges on the inherited .timeline */
.proc-grid .tl-item{counter-increment:proc;padding-bottom:2.1rem}
.proc-grid .timeline{counter-reset:proc;padding-left:3rem}
.proc-grid .tl-item::before{left:-3rem;width:30px;height:30px}
.proc-grid .tl-item::after{content:counter(proc);left:-3rem;top:0;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad);color:var(--on-primary);
  font-family:"Poppins",sans-serif;font-weight:700;font-size:.86rem}
.proc-grid .timeline::before{left:14px}

.proc-aside{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  padding:clamp(2rem,3.4vw,2.8rem);background:var(--grad-deep);color:#fff;box-shadow:var(--shadow-lg);
}
.proc-aside::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 88% 8%,rgba(255,255,255,.14),transparent 58%)}
.proc-aside .pa-in{position:relative;z-index:1}
.proc-aside .pa-ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;margin-bottom:1.3rem}
.proc-aside .pa-ic svg{width:26px;height:26px}
.proc-aside h3{color:#fff;font-family:"Poppins",sans-serif;font-weight:700;font-size:clamp(1.4rem,2.2vw,1.8rem);margin-bottom:1rem}
.proc-aside p{color:rgba(255,255,255,.86);font-size:1.02rem;line-height:1.62;margin:0}
.proc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.7rem}
.proc-metric{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:1rem 1.1rem}
.proc-metric b{display:block;font-family:"Poppins",sans-serif;font-weight:700;font-size:1.7rem;line-height:1;color:#fff}
.proc-metric span{font-size:.8rem;color:rgba(255,255,255,.78)}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .feat-grid{grid-template-columns:1fr 1fr}
  .proc-grid{grid-template-columns:1fr}
}
@media (max-width:920px){
  .svc-hero .hero-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .feat-grid{grid-template-columns:1fr}
  .benefit-grid{grid-template-columns:1fr}
  .proc-metrics{grid-template-columns:1fr 1fr}
}