/* Designed light bands for service pages (Technical scope, Delivery process, media) */
html body .svp2 .sv-band.sv-b{
  --bd-acc:#3b63f5;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 100% 0%,color-mix(in srgb,var(--bd-acc) 20%,transparent),transparent 70%),
    radial-gradient(760px 380px at 0% 100%,color-mix(in srgb,var(--bd-acc) 14%,transparent),transparent 70%),
    linear-gradient(180deg,#eaf0ff 0%,#f6f9ff 55%,#eef3ff 100%)!important;
}

/* subtle dot grid */
html body .svp2 .sv-band.sv-b::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--bd-acc) 28%,transparent) 1.1px,transparent 1.3px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.1) 60%,rgba(0,0,0,.45));
          mask-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.1) 60%,rgba(0,0,0,.45));
}

/* accent strip along the top edge */
html body .svp2 .sv-band.sv-b::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:4px;
  z-index:0;
  background:linear-gradient(90deg,var(--bd-acc),color-mix(in srgb,var(--bd-acc) 25%,#4fc3ff) 55%,transparent);
}

html body .svp2 .sv-band.sv-b h2{
  color:#0b1437!important;
  -webkit-text-fill-color:#0b1437!important;
}
html body .svp2 .sv-band.sv-b p,
html body .svp2 .sv-band.sv-b .sv-body{
  color:#33415f!important;
}

/* ---------- Technical scope: card list ---------- */
html body .svp2 .sv-band.sv-b .sv-cols:not(.soc-one){
  row-gap:16px!important;
  column-gap:clamp(18px,2.4vw,32px)!important;
}
html body .svp2 .sv-band.sv-b .sv-cols li{
  position:relative;
  display:flex;
  align-items:center;
  min-height:68px;
  margin:0!important;
  padding:16px 22px 16px 62px!important;
  border:1px solid color-mix(in srgb,var(--bd-acc) 18%,#dbe4f5);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 2px rgba(15,30,80,.04),0 10px 28px -14px rgba(30,60,160,.28);
  color:#13204a!important;
  font-weight:500;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
html body .svp2 .sv-band.sv-b .sv-cols li:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--bd-acc) 55%,#fff);
  box-shadow:0 2px 4px rgba(15,30,80,.05),0 18px 34px -14px color-mix(in srgb,var(--bd-acc) 55%,transparent);
}
/* gradient badge with check */
html body .svp2 .sv-band.sv-b .sv-cols li::before{
  content:"";
  position:absolute;
  left:18px;top:50%;
  width:30px;height:30px;
  margin-top:-15px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--bd-acc),color-mix(in srgb,var(--bd-acc) 45%,#4fc3ff));
  box-shadow:0 6px 14px -4px color-mix(in srgb,var(--bd-acc) 60%,transparent);
}
html body .svp2 .sv-band.sv-b .sv-cols li::after{
  content:"";
  position:absolute;
  left:28px;top:50%;
  width:6px;height:11px;
  margin-top:-8px;
  border:solid #fff;
  border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}

/* ---------- Delivery process: step cards ---------- */
html body .svp2 .sv-band.sv-b .sv-rings{
  gap:clamp(16px,2vw,28px)!important;
  align-items:stretch;
}
html body .svp2 .sv-band.sv-b .sv-rings li{
  position:relative;
  flex:1 1 190px;
  max-width:260px;
  padding:30px 20px 26px!important;
  border:1px solid color-mix(in srgb,var(--bd-acc) 18%,#dbe4f5)!important;
  border-top:4px solid var(--bd-acc)!important;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 2px rgba(15,30,80,.04),0 14px 34px -16px rgba(30,60,160,.3);
  transition:transform .2s ease,box-shadow .2s ease;
}
html body .svp2 .sv-band.sv-b .sv-rings li:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(15,30,80,.05),0 22px 40px -16px color-mix(in srgb,var(--bd-acc) 55%,transparent);
}
html body .svp2 .sv-band.sv-b .ring::before{background:#fff!important}
html body .svp2 .sv-band.sv-b .ring b{color:#0b1437!important;-webkit-text-fill-color:#0b1437!important;font-size:34px!important;line-height:1}
html body .svp2 .sv-band.sv-b .sv-rings h3{color:#0b1437!important;-webkit-text-fill-color:#0b1437!important}
html body .svp2 .sv-band.sv-b .sv-rings p{color:#4a5878!important}

/* ---------- Media band ---------- */
html body .svp2 .sv-band.sv-b .svvid{
  border:6px solid #fff;
  border-radius:22px;
  box-shadow:0 24px 60px -24px color-mix(in srgb,var(--bd-acc) 60%,rgba(15,30,80,.6));
}

@media (max-width:860px){
  html body .svp2 .sv-band.sv-b .sv-cols li{min-height:60px}
  html body .svp2 .sv-band.sv-b .sv-rings li{max-width:none;flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html body .svp2 .sv-band.sv-b .sv-cols li,
  html body .svp2 .sv-band.sv-b .sv-rings li{transition:none}
  html body .svp2 .sv-band.sv-b .sv-cols li:hover,
  html body .svp2 .sv-band.sv-b .sv-rings li:hover{transform:none}
}

/* ---------- Three-step walkthrough beside the video ---------- */
html body .svp2 .sv-band.sv-b .sv-walk{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:12px;
  counter-reset:walk;
  max-width:62ch;
}
html body .svp2 .sv-band.sv-b .sv-walk li{
  counter-increment:walk;
  position:relative;
  display:grid;
  gap:2px;
  margin:0!important;
  padding:14px 18px 14px 68px!important;
  border:1px solid color-mix(in srgb,var(--bd-acc) 18%,#dbe4f5);
  border-radius:16px;
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 2px rgba(15,30,80,.04),0 10px 26px -14px rgba(30,60,160,.28);
}
html body .svp2 .sv-band.sv-b .sv-walk li::before{
  content:counter(walk);
  position:absolute;
  left:16px;top:50%;
  width:36px;height:36px;
  margin-top:-18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--bd-acc),color-mix(in srgb,var(--bd-acc) 45%,#4fc3ff));
  color:#fff;
  font:700 1rem/1 "Helvetica Neue",Arial,sans-serif;
  box-shadow:0 6px 14px -4px color-mix(in srgb,var(--bd-acc) 60%,transparent);
}
html body .svp2 .sv-band.sv-b .sv-walk b{
  font-size:1.05rem;
  font-weight:700;
  color:#0b1437!important;
  -webkit-text-fill-color:#0b1437!important;
}
html body .svp2 .sv-band.sv-b .sv-walk span{
  font-size:.98rem!important;
  line-height:1.5!important;
  color:#4a5878!important;
  -webkit-text-fill-color:#4a5878!important;
}
@media (max-width:860px){
  html body .svp2 .sv-band.sv-b .sv-walk{max-width:none}
}
