

.cgroups{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;gap:clamp(12px,1.4vw,20px)!important;align-items:stretch;margin-top:18px;perspective:1400px}
.cgroup{position:relative;padding:clamp(20px,2vw,28px);border-radius:18px;background:linear-gradient(200deg,rgba(233,239,246,.07),rgba(233,239,246,.02));
  border:1px solid rgba(168,200,230,.2);box-shadow:0 40px 80px -60px rgba(0,0,0,.7);transition:transform .6s cubic-bezier(.16,.84,.3,1),border-color .34s ease}
.cgroup:hover{transform:translateY(-4px) rotateX(3deg);border-color:rgba(168,200,230,.36)}
.cgroup h3{margin:0 0 14px!important;padding-bottom:12px;border-bottom:1px solid rgba(168,200,230,.22);font-size:14px!important;letter-spacing:.06em;color:#A8C8E6!important}
.cgroup .clients{display:grid!important;grid-template-columns:1fr!important;column-gap:clamp(18px,2vw,30px)!important;margin:0!important;max-width:none!important}
.cgroups .cgroup:last-child .clients{grid-template-columns:1fr 1fr!important}
.cgroup .clients li{padding:11px 0!important;font-size:15.5px!important}
.cgroup .clients li:last-child,.cgroups .cgroup:last-child .clients li:nth-last-child(-n+2){border-bottom:0!important}
@media (max-width:1000px){.cgroups{grid-template-columns:1fr!important}.cgroups .cgroup:last-child .clients{grid-template-columns:1fr!important}}



.vcards{display:none}
.pillars{margin-top:clamp(40px,4.4vw,70px);perspective:1800px;perspective-origin:50% 20%}
.pl-scene{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px);padding-bottom:34px;
  transform-style:preserve-3d;transform:rotateX(12deg) rotateY(-10deg);transition:transform .94s cubic-bezier(.16,.84,.3,1)}
.pillars.in .pl-scene{transform:rotateX(6deg) rotateY(-6deg)}
.pl{--d:44px;position:relative;height:clamp(250px,22vw,330px);transform-style:preserve-3d;transform-origin:50% 100%;
  transform:scaleY(.18);opacity:0;transition:transform .87s cubic-bezier(.16,.84,.3,1) calc(var(--i) * .14s),opacity .54s ease calc(var(--i) * .14s)}
.pillars.in .pl{transform:none;opacity:1}
.pl-front{position:absolute;inset:0;transform:translateZ(calc(var(--d) / 2));border-radius:4px;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#EEF3F8 100%);border:1px solid rgba(127,160,196,.28);
  display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2vw,30px);
  box-shadow:inset 0 -60px 80px -60px rgba(59,90,124,.18)}
.pl-front::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 65%);
  transform:translateX(-120%);transition:transform .94s cubic-bezier(.16,.84,.3,1)}
.pl:hover .pl-front::before{transform:translateX(120%)}
.pl-num{position:relative;font-family:"Jost",sans-serif;font-weight:200;font-size:clamp(46px,4vw,66px);line-height:1;color:var(--pine)}
.pl-line{position:relative;display:block;width:1px;flex:1;margin:18px 0;background:linear-gradient(to bottom,rgba(59,90,124,.4),rgba(59,90,124,0))}
.pl-front h3{position:relative;margin:0;font-weight:300;font-size:clamp(17px,1.4vw,21px);line-height:1.35;color:var(--ink)}
.pl-side{position:absolute;top:0;bottom:0;left:calc(100% - var(--d) / 2);width:var(--d);transform:rotateY(90deg);
  background:linear-gradient(180deg,#C9D6E3,#AFC0D1)}
.pl-top{position:absolute;left:0;right:0;top:calc(var(--d) / -2);height:var(--d);transform:rotateX(90deg);background:#F7F9FB;border:1px solid rgba(127,160,196,.2)}
.pl-base{position:absolute;left:-3%;right:-3%;bottom:0;height:34px;border-radius:4px;transform:translateZ(calc(var(--d) / 2 + 10px)) rotateX(80deg);transform-origin:50% 100%;
  background:linear-gradient(180deg,rgba(59,90,124,.16),rgba(59,90,124,0));filter:blur(2px)}
.pl{transition:transform .87s cubic-bezier(.16,.84,.3,1) calc(var(--i) * .14s),opacity .54s ease calc(var(--i) * .14s),filter .34s ease}
.pillars.in .pl:hover{transform:translateZ(34px) translateY(-8px);transition-delay:0s}
.pillars.in .pl-scene:hover .pl:not(:hover){opacity:.72;transition-delay:0s}
@media (max-width:1000px){
  .pl-scene{grid-template-columns:1fr;transform:none!important;padding:0}
  .pl{height:auto;transform:none!important;opacity:1!important}.pl-front{position:relative;transform:none;min-height:150px}
  .pl-side,.pl-top,.pl-base{display:none}.pl-line{flex:0 0 26px}
}
@media (prefers-reduced-motion:reduce){.pl,.pl-scene{transition:none;transform:none!important;opacity:1!important}}

.pillars{grid-column:1 / -1}.pl-scene{max-width:1100px;margin:0 auto}


.pl-side,.pl-top{display:none!important}
.pl-scene{transform:rotateX(6deg) rotateY(-4deg)!important;padding-bottom:40px}
.pillars.in .pl-scene{transform:rotateX(2deg) rotateY(-2deg)!important}
.pl{--d:0px;transform:translateY(40px) scale(.96);opacity:0}
.pillars.in .pl{transform:none;opacity:1}
.pl-front{border-radius:26px!important;transform:none!important;border:1px solid rgba(127,160,196,.2)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(240,245,250,.96) 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -40px rgba(35,59,87,.28),0 60px 120px -80px rgba(35,59,87,.22)!important}
.pl::before{content:"";position:absolute;inset:14px -10px -12px 10px;border-radius:28px;background:rgba(143,169,196,.14);transform:translateZ(-30px);z-index:-1;
  transition:transform .67s cubic-bezier(.16,.84,.3,1),opacity .4s ease}
.pl-front::before{border-radius:inherit}
.pl-num{color:rgba(59,90,124,.85)!important;font-size:clamp(42px,3.6vw,58px)!important}
.pl-line{background:linear-gradient(to bottom,rgba(59,90,124,.28),rgba(59,90,124,0))!important}
.pl-base{transform:none!important;left:8%!important;right:8%!important;bottom:4px!important;height:40px!important;border-radius:50%!important;
  background:radial-gradient(50% 50% at 50% 50%,rgba(35,59,87,.16),rgba(35,59,87,0) 70%)!important;filter:blur(8px)!important}
.pillars.in .pl:hover{transform:translateY(-8px)!important}
.pillars.in .pl:hover::before{transform:translateZ(-30px) translate(6px,6px);opacity:.8}
.pillars.in .pl-scene:hover .pl:not(:hover){opacity:.85!important}



@supports (animation-timeline: view()){
  main .s-head h2,main .i3-head h2,main .tstate-k h2,main .sstep h3,main .prof-txt h2,main .a-txt h3,main .cta h2,main .mhero-txt h1{
    animation:maskUp linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
  @keyframes maskUp{from{clip-path:inset(0 0 100% 0);translate:0 .45em}to{clip-path:inset(0 0 -20% 0);translate:0 0}}
  main .area .m1,main .side-tile,main .who-plate img,main .reach-stage,main .mapcard{
    animation:unveil linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
  @keyframes unveil{from{clip-path:inset(14% 6% 14% 6% round 22px)}to{clip-path:inset(0 0 0 0 round 16px)}}
  main .stats .stat,main .qa{animation:liftIn linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  @keyframes liftIn{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
}
@media (prefers-reduced-motion:reduce){main *{animation:none!important}}



@supports (animation-timeline: view()){
  .hero .rv,.phero .rv,.thero .rv,.mhero .rv,.lhero .rv{animation:none!important;
    transition:opacity .67s ease,transform .8s cubic-bezier(.16,.84,.3,1)!important}
  .hero .rv.d1,.phero .rv.d1,.thero .rv.d1,.mhero .rv.d1{transition-delay:.14s!important}
  .hero .rv.d2,.phero .rv.d2,.thero .rv.d2,.mhero .rv.d2{transition-delay:.28s!important}
  .hero .rv.d3,.phero .rv.d3,.thero .rv.d3,.mhero .rv.d3{transition-delay:.42s!important}
  .mhero-txt h1{animation:none!important}
}



html:not(.go) .hero .msk span,html:not(.go) .hero .rv,html:not(.go) .phero .rv,html:not(.go) .thero .rv,html:not(.go) .mhero .rv,
html:not(.go) .phero-media,html:not(.go) .tframe,html:not(.go) .mstack{opacity:0!important;transform:translateY(38px)!important;transition:none!important}
html.go .phero-media,html.go .mstack{transition:opacity .8s ease .2s,transform .94s cubic-bezier(.16,.84,.3,1) .2s}
