/* DC Hero Banner — tech-agency hero with illustrated card composition.
   White background, text + dual CTA left, floating UI cards over a faded gear right. */

.dcps{
  --dcps-primary:#3b3df0;
  --dcps-primary-2:#5c5ff5;
  --dcps-ink:#101326;
  --dcps-muted:#5a6b85;
  --dcps-bg-card:#ffffff;
  --dcps-bg-soft:#f3f5fb;
  background:#ffffff;
  padding:90px 30px;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;
  color:var(--dcps-ink);
}
.dcps__inner{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.1fr; gap:60px;
  align-items:center;
}

/* ---------- LEFT: copy ---------- */
.dcps__copy{min-width:0;}
.dcps__eyebrow{
  display:inline-block; font-size:14px; font-weight:600;
  color:var(--dcps-primary); margin-bottom:18px;
  letter-spacing:.01em;
}
.dcps__title{
  font-size:clamp(34px,4.2vw,52px); font-weight:800; line-height:1.1;
  letter-spacing:-.02em; margin:0 0 22px;
}
.dcps__lead{
  font-size:16px; line-height:1.6; color:var(--dcps-muted);
  max-width:520px; margin:0 0 30px;
}
.dcps__ctas{display:flex; flex-wrap:wrap; gap:14px;}
.dcps__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:10px; font-weight:700; font-size:15px;
  text-decoration:none; transition:transform .2s, box-shadow .2s, background .2s;
}
.dcps__btn--primary{
  background:var(--dcps-primary); color:#fff;
  box-shadow:0 8px 22px -10px rgba(59,61,240,.6);
}
.dcps__btn--primary:hover{transform:translateY(-2px); background:var(--dcps-primary-2);}
.dcps__btn--ghost{
  background:#fff; color:var(--dcps-ink); border:1.5px solid #d8def0;
}
.dcps__btn--ghost:hover{border-color:var(--dcps-primary); color:var(--dcps-primary);}

/* ---------- RIGHT: illustrated art ---------- */
.dcps__art{
  position:relative; aspect-ratio:1/1; min-height:460px;
}
.dcps__gear{
  position:absolute; top:50%; left:50%;
  width:78%; max-width:520px; height:auto;
  transform:translate(-50%,-50%);
  opacity:.18; filter:grayscale(.15);
  pointer-events:none;
}
.dcps__card{
  position:absolute; background:var(--dcps-bg-card);
  border-radius:14px; box-shadow:0 18px 40px -14px rgba(16,19,38,.18);
  z-index:1;
}

/* Main card center-back */
.dcps__card--main{
  top:16%; left:36%; width:48%; padding:20px;
  display:flex; flex-direction:column; gap:14px;
}
.dcps__dots{display:flex; gap:6px;}
.dcps__dots span{
  width:9px; height:9px; border-radius:50%;
}
.dcps__dots span:nth-child(1){background:#ff6b6b;}
.dcps__dots span:nth-child(2){background:#ffd93d;}
.dcps__dots span:nth-child(3){background:#6bd968;}
.dcps__bars{display:flex; flex-direction:column; gap:8px;}
.dcps__bars i{
  display:block; height:8px; border-radius:4px;
  background:linear-gradient(90deg,#dde3f2,#eef1f9);
}

/* Plus card top-right */
.dcps__card--plus{
  top:6%; right:8%; width:64px; height:64px;
  background:var(--dcps-primary);
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  box-shadow:0 14px 30px -10px rgba(59,61,240,.55);
}
.dcps__card--plus svg{width:26px; height:26px;}

/* Avatar bubble upper-mid-right */
.dcps__card--avatar{
  top:18%; right:18%; width:56px; height:56px;
  border-radius:50%; background:#e8edf7;
  display:flex; align-items:center; justify-content:center;
}
.dcps__avatar{
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,#9eb4cc,#cbd8e8);
}

/* Code card left-center */
.dcps__card--code{
  top:30%; left:6%; width:80px; height:80px;
  display:flex; align-items:center; justify-content:center;
  border-radius:18px;
}
.dcps__card--code svg{width:34px; height:34px;}

/* Mini card right-mid */
.dcps__card--mini{
  top:54%; right:4%; width:130px; padding:16px;
  display:flex; flex-direction:column; gap:6px;
}
.dcps__card--mini i{
  display:block; height:6px; border-radius:3px;
  background:#dde3f2;
}
.dcps__card--mini i:nth-child(1){width:80%;}
.dcps__card--mini i:nth-child(2){width:55%; background:var(--dcps-primary); opacity:.6;}

/* Cog card bottom-left */
.dcps__card--cog{
  bottom:18%; left:14%; width:60px; height:60px;
  background:var(--dcps-primary);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -10px rgba(59,61,240,.5);
}
.dcps__card--cog svg{width:26px; height:26px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .dcps{padding:60px 24px;}
  .dcps__inner{grid-template-columns:1fr; gap:50px;}
  .dcps__art{max-width:520px; margin:0 auto; min-height:420px;}
}
@media (max-width:560px){
  .dcps__title{font-size:30px;}
  .dcps__art{min-height:360px;}
  .dcps__card--main{padding:14px; gap:10px;}
  .dcps__card--plus,.dcps__card--cog{width:50px; height:50px;}
  .dcps__card--code{width:64px; height:64px;}
  .dcps__btn{padding:12px 22px; font-size:14px;}
}