/* ===== IT-Blocks content-page enhancements: tasteful color + interactivity =====
   Shared across About, Industries, Services index, Contact, Discover, and Blogs.
   Adds animated colored accents to each page's cards
   and colored stats/pills, cohesive with the solution pages. */
:root{
  --e-blue:#0E7BC4; --e-blue-d:#0A5C94;
  --e-teal:#0EA5A5; --e-teal-d:#0c7d7d;
  --e-indigo:#4F5BD5; --e-indigo-d:#3a44b0;
  --e-green:#1A9E54; --e-green-d:#127a40;
}

/* generic: animated colored top accent on cards */
.vals .v,.bcard,.prodc,.office,.ind-visual,.pcard{position:relative;overflow:hidden}
.vals .v::before,.prodc::before,.office::before,.ind-visual::before,.pcard::before,.bcard::after{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);z-index:2}
.vals .v:hover::before,.prodc:hover::before,.office:hover::before,
.ind-visual:hover::before,.pcard:hover::before,.bcard:hover::after{transform:scaleX(1)}
.vals .v:hover,.prodc:hover,.bcard:hover{border-color:transparent}
[dir="rtl"] .vals .v::before,[dir="rtl"] .prodc::before,
[dir="rtl"] .office::before,[dir="rtl"] .ind-visual::before,[dir="rtl"] .pcard::before,
[dir="rtl"] .bcard::after{transform-origin:right}

/* About: value cards cycle colors + geo pill hover */
.vals .v:nth-child(4n+1)::before{background:linear-gradient(90deg,var(--e-blue),#5bb0e6)}
.vals .v:nth-child(4n+2)::before{background:linear-gradient(90deg,var(--e-teal),#4fd0d0)}
.vals .v:nth-child(4n+3)::before{background:linear-gradient(90deg,var(--e-indigo),#8a92e6)}
.vals .v:nth-child(4n)::before{background:linear-gradient(90deg,var(--e-green),#5cc98a)}
.geo span{transition:border-color .2s,color .2s}
.geo span:hover{border-color:var(--e-blue);color:var(--e-blue)}

/* Industries: colored stat number + accent per row */
.ind-row:nth-child(4n+1) .ind-stat .n,.ind-row:nth-child(4n+1) .ind-stat .u{color:var(--e-blue)}
.ind-row:nth-child(4n+2) .ind-stat .n,.ind-row:nth-child(4n+2) .ind-stat .u{color:var(--e-teal)}
.ind-row:nth-child(4n+3) .ind-stat .n,.ind-row:nth-child(4n+3) .ind-stat .u{color:var(--e-indigo)}
.ind-row:nth-child(4n) .ind-stat .n,.ind-row:nth-child(4n) .ind-stat .u{color:var(--e-green)}
.ind-row:nth-child(4n+1) .ind-visual::before{background:linear-gradient(90deg,var(--e-blue),#5bb0e6)}
.ind-row:nth-child(4n+2) .ind-visual::before{background:linear-gradient(90deg,var(--e-teal),#4fd0d0)}
.ind-row:nth-child(4n+3) .ind-visual::before{background:linear-gradient(90deg,var(--e-indigo),#8a92e6)}
.ind-row:nth-child(4n) .ind-visual::before{background:linear-gradient(90deg,var(--e-green),#5cc98a)}
.ind-sol a{transition:background .15s,color .15s}

/* Blogs */
.bcard:nth-child(3n+1)::after{background:linear-gradient(90deg,var(--e-blue),#5bb0e6)}
.bcard:nth-child(3n+2)::after{background:linear-gradient(90deg,var(--e-teal),#4fd0d0)}
.bcard:nth-child(3n)::after{background:linear-gradient(90deg,var(--e-indigo),#8a92e6)}

/* Discover (.pcard) + Services index (.prodc) */
.pcard:nth-child(3n+1)::before,.prodc:nth-child(4n+1)::before{background:linear-gradient(90deg,var(--e-blue),#5bb0e6)}
.pcard:nth-child(3n+2)::before,.prodc:nth-child(4n+2)::before{background:linear-gradient(90deg,var(--e-teal),#4fd0d0)}
.pcard:nth-child(3n)::before,.prodc:nth-child(4n+3)::before{background:linear-gradient(90deg,var(--e-indigo),#8a92e6)}
.prodc:nth-child(4n)::before{background:linear-gradient(90deg,var(--e-green),#5cc98a)}

/* Contact office cards */
.office:nth-child(1)::before{background:linear-gradient(90deg,var(--e-blue),#5bb0e6)}
.office:nth-child(2)::before{background:linear-gradient(90deg,var(--e-teal),#4fd0d0)}
.office:nth-child(3)::before{background:linear-gradient(90deg,var(--e-indigo),#8a92e6)}