/* Service detail pages – scoped to .cbs, safe alongside Porto/Bootstrap */
.cbs{--brand:#0088CC;--ink:#0e1320;--muted:#5d6577;--line:#dfe4ee;--soft:#f3f5f8;--g:rgb(125,125,130);
  color:var(--ink);font-family:inherit;line-height:1.5;-webkit-font-smoothing:antialiased}
.cbs *,.cbs *::before,.cbs *::after{box-sizing:border-box}
.cbs h1,.cbs h2,.cbs h3,.cbs p,.cbs ul{margin:0;padding:0;font-family:inherit;letter-spacing:normal;text-transform:none}
.cbs ul{list-style:none}
.cbs a,.cbs a:hover{text-decoration:none}

.cbs .cbs-w{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}
.cbs .cbs-eyebrow{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.cbs h2{font-size:clamp(26px,3.4vw,40px);line-height:1.2;font-weight:700;letter-spacing:-.01em;max-width:22ch;color:var(--ink)}
.cbs .cbs-sec{padding:clamp(56px,8vw,104px) 0;background:#fff}
.cbs .cbs-soft{background:var(--soft)}
.cbs .cbs-build,.cbs .cbs-final{background:#000;color:#fff}
.cbs .cbs-build h2,.cbs .cbs-final h2{color:#fff}

/* buttons */
.cbs a.cbs-btn{display:inline-block;padding:14px 26px;border-radius:4px;font-weight:600;font-size:16px;line-height:1.4;border:1px solid transparent;transition:transform .25s,background .25s,border-color .25s}
.cbs a.cbs-btn-p,.cbs a.cbs-btn-p:hover{color:#fff}
.cbs a.cbs-btn-p{background:var(--brand)}
.cbs a.cbs-btn-p:hover{background:#0a9be3;transform:translateY(-2px)}
.cbs a.cbs-btn-l,.cbs a.cbs-btn-l:hover{color:#fff}
.cbs a.cbs-btn-l{border-color:#ffffff40}
.cbs a.cbs-btn-l:hover{border-color:#fff}
.cbs .cbs-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* hero */
.cbs .cbs-hero{background:#000;color:#fff;padding:clamp(56px,8vw,112px) 0;overflow:hidden}
.cbs .cbs-hero .cbs-w{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.cbs .cbs-crumb{font-size:14px;color:var(--g);margin-bottom:28px}
.cbs .cbs-crumb a{color:var(--g)}.cbs .cbs-crumb a:hover{color:#fff}
.cbs .cbs-hero h1{font-size:clamp(34px,4.8vw,62px);line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#fff}
.cbs .cbs-hero h1 span{color:var(--g)}
.cbs .cbs-lede{margin:24px 0 36px;font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:#97979b;max-width:52ch}
.cbs .cbs-mock{background:#0d1118;border:1px solid #ffffff1f;border-radius:12px;padding:18px;box-shadow:0 30px 80px #0088cc26}
.cbs .cbs-mock-bar{display:flex;gap:6px;margin-bottom:16px}
.cbs .cbs-mock-bar i{width:9px;height:9px;border-radius:50%;background:#ffffff2e}
.cbs .cbs-mock-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid #ffffff14;font-size:14px;color:#c9c9cf}
.cbs .cbs-mock-row em{font-style:normal;font-size:12px;padding:3px 10px;border-radius:999px;background:#0088cc2e;color:#52c1f5;white-space:nowrap}
.cbs .cbs-mock-row em.cbs-dim{background:#ffffff14;color:#97979b}
.cbs .cbs-mock-chart{display:flex;align-items:flex-end;gap:8px;height:92px;margin-top:20px}
.cbs .cbs-mock-chart span{flex:1;background:linear-gradient(#0088CC,#0088cc40);border-radius:3px 3px 0 0}

/* pain points */
.cbs .cbs-pain{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:48px}
.cbs .cbs-pain>div{padding-top:18px;border-top:2px solid var(--line);transition:border-color .3s}
.cbs .cbs-pain>div:hover{border-top-color:var(--brand)}
.cbs .cbs-pain h3{font-size:18px;line-height:1.35;font-weight:600;margin-bottom:8px;color:var(--ink)}
.cbs .cbs-pain p{font-size:15px;line-height:1.6;color:var(--muted)}

/* what we build */
.cbs .cbs-rows{margin-top:48px;border-top:1px solid #ffffff1a}
.cbs .cbs-row{display:grid;grid-template-columns:80px 1fr 1fr;gap:24px;padding:36px 0;border-bottom:1px solid #ffffff1a;align-items:start}
.cbs .cbs-n{color:var(--brand);font-size:24px;font-variant-numeric:tabular-nums}
.cbs .cbs-row h3{font-size:clamp(22px,2.6vw,32px);line-height:1.2;font-weight:700;color:var(--g);transition:color .3s,transform .5s cubic-bezier(.22,.8,.24,1)}
.cbs .cbs-row:hover h3{color:#fff;transform:translateX(14px)}
.cbs .cbs-row p{color:#97979b;font-size:16px;line-height:1.65;margin-bottom:16px}
.cbs .cbs-tags{display:flex;flex-wrap:wrap;gap:8px}
.cbs .cbs-tags li{padding:7px 14px;font-size:13px;color:#c9c9cf;border:1px solid #ffffff2e;border-radius:999px;background:#ffffff0a}

/* comparison */
.cbs .cbs-cmp{margin-top:44px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.cbs .cbs-cmp>div{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;border-bottom:1px solid var(--line)}
.cbs .cbs-cmp>div:last-child{border-bottom:0}
.cbs .cbs-cmp span{padding:18px 22px;font-size:15px;line-height:1.55;color:var(--muted)}
.cbs .cbs-cmp span:first-child{font-weight:600;color:var(--ink)}
.cbs .cbs-cmp span:last-child{color:var(--ink)}
.cbs .cbs-cmp .cbs-h span{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--soft);color:var(--muted)}
.cbs .cbs-cmp .cbs-h span:last-child{color:var(--brand)}

/* process timeline */
.cbs .cbs-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,28px);margin-top:52px}
.cbs .cbs-step{position:relative;padding-top:34px}
.cbs .cbs-step::before{content:"";position:absolute;top:11px;left:0;right:-28px;height:2px;background:var(--line)}
.cbs .cbs-step:last-child::before{right:0;background:linear-gradient(90deg,var(--line),var(--brand))}
.cbs .cbs-step::after{content:"";position:absolute;top:4px;left:0;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--brand)}
.cbs .cbs-step:last-child::after{background:var(--brand)}
.cbs .cbs-step b{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.cbs .cbs-step h3{font-size:19px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.cbs .cbs-step p{font-size:15px;line-height:1.6;color:var(--muted)}

/* built to last */
.cbs .cbs-three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:44px}
.cbs .cbs-card{padding:28px;border:1px solid var(--line);border-radius:10px;background:#fff;transition:border-color .3s,transform .3s}
.cbs .cbs-card:hover{border-color:var(--brand);transform:translateY(-3px)}
.cbs .cbs-card h3{font-size:20px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.cbs .cbs-card p{font-size:15px;line-height:1.65;color:var(--muted)}
.cbs .cbs-stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.cbs .cbs-stack li{padding:8px 16px;font-size:14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:#fff}

/* final CTA */
.cbs .cbs-final .cbs-cta{margin-top:32px}
.cbs .cbs-final a.cbs-mail,.cbs .cbs-final a.cbs-mail:hover{color:#97979b}
.cbs .cbs-final a.cbs-mail:hover{color:#fff}

@media (max-width:1000px){
  .cbs .cbs-hero .cbs-w{grid-template-columns:1fr}
  .cbs .cbs-pain{grid-template-columns:1fr 1fr}
  .cbs .cbs-steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .cbs .cbs-step:nth-child(even)::before,.cbs .cbs-step:last-child::before{right:0}
  .cbs .cbs-three{grid-template-columns:1fr}
  .cbs .cbs-row{grid-template-columns:50px 1fr}
  .cbs .cbs-row>div{grid-column:2}
}
@media (max-width:620px){
  .cbs .cbs-pain,.cbs .cbs-steps{grid-template-columns:1fr}
  .cbs .cbs-step::before{right:0!important}
  .cbs .cbs-cmp>div{grid-template-columns:1fr}
  .cbs .cbs-cmp .cbs-h{display:none}
  .cbs .cbs-cmp span:first-child{background:var(--soft)}
  .cbs .cbs-row:hover h3{transform:translateX(6px)}
}
@media (prefers-reduced-motion:reduce){.cbs *{transition:none!important}}