p{
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--para_Text_Dark);
}
.sticky{
  position: sticky;
  top: 100px;
}
.white_Border_Btn{
    border: 1px solid #fff;
  color: #fff;
      background: transparent;
}
.banner .banner__inner:after{
  display: none;
}
.btn_Row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.yt_Btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 17.5px;
  padding: 17px 34px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .22s ease,
              box-shadow .22s ease,
              background .22s ease,
              filter     .22s ease;
}

/* icon sizing now lives on .yt_Arrow in common-inner_revamp.css */
.yt_Btn svg:not(.yt_Arrow) {
  width: 16px;
  height: auto;
  flex: none;
}
.yt_Btn--Black{
  background: #000;
  color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.18);
     backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sap_Badge{
      gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 9px 20px 9px 12px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    translate: none;
    rotate: none;
    scale: none;
    opacity: 1;
    transform: translate(0px, 0px);
}
.sap_Badge img{
  max-width: 70px;
  height: auto;
}
.dot_Devider{
      width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(56, 189, 248);
    box-shadow: rgb(56, 189, 248) 0px 0px 10px;
}
.banner{
      background-size: cover;
    background-repeat: no-repeat;
}
.banner_Img img {
    border-radius: 43px;
    transform: rotateY(-24deg);
}
.banner_Img{
          border-radius: 45px;
    padding: 0;
    perspective: 400px;
    background: transparent;
}
.banner .banner__inner--title{
     font-size: clamp(2rem, 3.6vw, 5rem);
     font-weight: 300;
     letter-spacing: 0;
     margin-bottom: 1rem;
}
.banner .banner__inner--title span{
  font-weight: 600;
}

.hero_Btns {
    display: inline-block;
    width: 100%;
    margin-top: 2rem;
}
.content_Row {
    padding-top: 5rem;
    padding-bottom: 2rem;
}
.sap_Main_Banner{
  background: url(https://staging.yash.com/revamp/wp-content/uploads/2026/08/sap_Hero.jpg);
  background-size: cover;
    background-repeat: no-repeat;
    padding: 3rem 0;
    text-align: center;
        border-radius: 0 0 60px 60px;
    position: relative;
    overflow: hidden;
}
.sap_Main_Banner:after{
  background: #000000ad;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
}
.banner_Contant{
     font-size: 4rem;
    position: relative;
    z-index: 2;
}
.hero_Title{
 font-size: clamp(2rem, 3.2vw, 4rem);
    color: #fff;
    letter-spacing: -1px;
    font-weight: 700;
}
.hero_Sub_Title {
    font-size: clamp(1rem, 1.3vw, 2rem);
    font-weight: 300;
    color: #fff;
    line-height: 1.6;
    letter-spacing: 0;
}
.gradient_Text{
  text-transform: uppercase;
      background: linear-gradient(95deg, #7c58fd, #6A35E8) text;
    -webkit-text-fill-color: transparent;
}
.services_offering_Adhoc{
  background: #000;
}
.customHeader .contactBtn.btn{
      background: #651fde;
      border: none;
          padding-right: 38px;
    line-height: normal;
    height: auto;
}
.customHeader .contactBtn.btn:after{
      display: none;
}
.customHeader .contactBtn.btn i {
    font-size: 1.6rem;
    transform: rotate(45deg);
    position: absolute;
    right: 10px;
    top: 3px;
    bottom: 0;
}
.customHeader .contactBtn.btn:hover {
    transform: none;
    background: #550cd4;
}

/* S Verticle fix  */

#bsf-slider{
  height: auto!important;
  padding-top: 3rem;
  padding-bottom: 2rem;
}
  .bsf-slider__pin {
     position: static !important;  /* was position: sticky; top: 0 */
  height: auto !important;
    top: 20px;
    overflow: hidden;
  
  }

  .bsf-slider__inner {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 3rem 0 4rem;
  }

  
  /* === LEFT: numbered tab list === */
  .bsf-tablist {
    list-style: none;
    padding: 0;
    position: relative;
        padding-right: 4rem;
  }
.bsf-tab.glow-card{
  overflow: visible;
}
  .bsf-tablist li { list-style: none; margin: 0; padding: 0; }
  .bsf-tablist .bsf-tab span.right_arrow {
    position: absolute;
    right: 20px;
}
.bsf-tablist .bsf-tab span.right_arrow svg{
  transform: rotate(45deg);
}
  .bsf-tab {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 0.5rem;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    width: 100%;
    transition: color 0.4s ease;
    position: relative;
        border: 1px solid #b4b4b4;
    padding-left: 0;
    opacity: 0.7;
    transition: all 1s;;  background-size: 20px;
    background-repeat: no-repeat;
    background-position: 95% 56%;
    opacity: 1;
    transition: all 1s;
        margin-bottom: 1rem;
    border-radius: 15px;
    background: #fff;
  }
  .bsf-tab:hover, .bsf-is-active{
      /* background: #5a00fa url(../images/icon/right_Arrow_radius_white.svg); */
         background: #5a00fa;
        background-size: 20px;
    background-repeat: no-repeat;
    background-position: 95% 56%;
    opacity: 1;
    transition: all 1s;
    color: #fff;
    padding-left: 15px;
  }
  .bsf-tab__num {
    display: grid;
    place-items: center;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    transition: all 0.4s ease;
    z-index: 1;
        position: absolute !important;
    left: -43px;
    display: none;
  }
  .bsf-tab__label { transition: transform 0.4s ease; }
.bsf-tab__label h3{
          font-size: 1.25rem;
        font-weight: 600;
        padding-right: 3rem;
            padding-left: 1rem;
                margin-bottom: 0;
}
  .bsf-tab.bsf-is-active .bsf-tab__num {
    color: #fff;
  }
  .bsf-tab.bsf-is-active .bsf-tab__label { transform: translateX(4px); }

  /* === RIGHT: stacked panels (only one visible at a time) === */
  .bsf-panels {
    position: relative;
    height: 100%;
    min-height: 560px;
        padding: 1rem;
  }
  .bsf-panel {
    position: absolute;
    inset: 0;
    margin: 0;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 1.25rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }
  .bsf-panel.bsf-is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }


  /* === progress bar at top of pinned area === */
  .bsf-slider__progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--bsf-clr-border);
    z-index: 10;
  }
  .bsf-slider__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--bsf-clr-accent), var(--bsf-clr-accent-2));
    width: 0%;
    transition: width 0.3s ease;
  }

  /* === Mobile — stack on small screens, disable scroll-lock === */
  @media (max-width: 860px) {
    .bsf-scroll-slider { height: auto !important; }
    .bsf-slider__pin { position: relative; height: auto; padding: 2rem 0; }
    .bsf-slider__inner { padding: 1.5rem 1rem; }
    .bsf-panels { display: grid; gap: 1rem; height: auto; }
    .bsf-panel {
      position: relative;
      inset: auto;
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    .bsf-tablist { display: none; }
    .bsf-panel__visual { min-height: 200px; }
    .bsf-panels{     padding: 0;
    }
  }
  .offering_Right_panel .offering_panel{
    border-radius: 12px;
    background-size: cover;
    margin: 0rem 1rem;
    background-repeat: no-repeat;
    background-color: #000;
        background-size: cover !important;
        background-position: top !important;
    padding-right: 0;
    padding-top: 15px;
    display: flex;
    align-items: end;
    padding-bottom: 0;
    padding-left: 0;
  }
  .offering_Right_panel .offering_panel:nth-child(1){
    background-image: url(../images/bizNext/bizNext_services.jpg);

        margin: 0rem 1rem;
  }
.service_Offerings_Para{
  margin-bottom: 2rem;
}
  .service_Offerings_Para p{
    font-size: 1.1rem;
    color: var(--para_Text_Dark);
  }

  .glow-card {
  position: relative;
  overflow: hidden;
}

/* The glow itself — a radial gradient that follows the cursor */
.glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 20%) var(--my, 20%),
    rgba(68, 0, 255, 0.5),   /* glow color — change to your accent */
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.glow-card:hover {
  border-color: rgba(255, 91, 46, 0.3);
}
.glow-card:hover::before {
  opacity: 1;
}

/* Make sure card content sits above the glow */
.glow-card > * {
  position: relative;
  z-index: 1;
}



/* S Services */
.offering_dicscriptions_box {
    padding: 1rem;
        background: #000;
            background: rgb(0 0 0 / 80%);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgb(0 0 0 / 30%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgb(0 0 0 / 25%);
        width: 100%;
}
.offering_dicscriptions_box .sub_offrings_List ul{
    list-style: none;
    padding-left: 0;
  }
.offering_dicscriptions_box .sub_offrings_List ul li a{
     background: #ffffffcc;
    color: #000000;
    border-radius: 6px;
    font-size: 1rem;
    padding: 10px 35px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
    margin-bottom: 15px;
    transition: all 1s;
}
.offering_dicscriptions_box .sub_offrings_List ul li a:hover{
  background: #fff;
}
.offering_dicscriptions_box .sub_offrings_List ul li a img{
  width: 15px;
    height: auto;
    transform: rotate(-45deg);
    margin-left: 20px;
}
.offering_dicscriptions_box .offerings_Content_Box ul{
  padding-left: 15px;
}
.offering_dicscriptions_box .offerings_Content_Box ul li{
     margin-bottom: 12px;
}
.offering_dicscriptions_box p{
  color: var(--light-gray-text);
}

/* S Blogs */
.yt_Blog_Box{
  position: relative;
  padding: 2rem 0;
  border-bottom: 1px solid #707070;
}
.yt_Blog_Category{
  font-size: 0.9rem;
}
.yt_Blog_Content h4{
 font-size: 2rem;
}
/* S Number Box */

.yt_number_Box {
  display: flex;
  padding: 1.5rem 1rem;
  color: #fff;
  position: relative;
      height: 100%;
      overflow: hidden;
      border-radius: var(--box-radius);
}
.yt_number_Box_title{
         font-size: 2.2rem;
    font-weight: 600;
}
.yt_number_Box_Sub_Title{
         font-size: 1.8rem;
    font-weight: 600;
}
.yt_number_Box_Img {
  position: absolute;
}
.yt_number_Box_Img.right{
  right: 0;
}
.yt_number_Box_Img.bottom{
  bottom: 0;
}
.yt_number_Box_Img.left{
  left: 0;
}
.yt_number_Box_Img.top{
  top: 0;
}
.yt_number_Box .yt_number_Box_Content{
  position: relative;
  max-width: 70%;
      z-index: 1;
}
.yt_number_Box.right_Content{
  text-align: right;
}
.yt_number_Box.right_Content .yt_number_Box_Content{
     float: right;
    max-width: 100%;
    padding-left: 40%;
}
/* E Number Box */

@media (min-width:767.98px) {
   .mobile_tab_view{
  display: none;
}
}

.yashPerspectives .commonTag {
       display: flex;
    width: 100%;
    color: #5a00fa;
    padding-left: 0;
}
.blogListing__Box--info{
  min-height: 100px;
     transition: all 0.6s;
}
.yashPerspectives h3{
  min-height: auto;
}
.blogListing__Box--info{
      border: none;
    border-bottom: 1px solid #707070;
    border-radius: 0;
        padding: 2rem 4rem 2rem 0;
        transition: all 0.6s;
}
.yashPerspectives .blogListing .blogListing__Box .blogListing__Box--info h3 a{
      font-weight: 600;
}
.yashPerspectives .blogListing__Box:hover{
    background: url(../images/abstract/blog_background.png);
        background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
       transition: all 0.6s;
           padding-left: 2rem;
}
.blogListing__Box--info{
  background: url(../images/icon/right_Arrow_radius.svg);
  background-size: 20px;
    background-repeat: no-repeat;
    background-position: 95% 56%;
    opacity: 1;
    transition: all 1s;
}
.yashPerspectives .blogListing__Box:hover .blogListing__Box--info{
  background: url(../images/icon/right_Arrow_radius_white.svg);
  background-size: 20px;
    background-repeat: no-repeat;
    background-position: 95% 56%;
    opacity: 1;
    transition: all 1s;
}
.blogListing__Box--info:hover{
  opacity: 1;
}

.yashPerspectives .blogListing .blogListing__Box:hover .blogListing__Box--info h3 a{
  color: #fff;
}
.yashPerspectives{
      padding: 3rem 0 4rem;
}
@media (min-width: 1600px) {
  .container{
            max-width: 1440px;
  }
}
.yt_insights .yt_Section_title_main{
      text-align: center;
    color: #fff;
    font-size: 2.6rem;
    font-weight: 600;
    margin-bottom: 3rem;
    margin-top: 6rem;
}
.yt_Insight_img{
  min-height: 31rem;
}
.header_banners_content a.btn {
    margin: 20px 0;
    color: #fff;
    border: 1px solid #fff;
}
.header_banners_content a.btn i{
  margin-left: 1rem;
}
.header_banners_content a.btn:hover{
  border: none;
}


.card{
  background: var(--dark-Navy);
  padding: 1rem;
    color: #fff;
}
.card p{
   color: var(--light-gray-text);
}
.card ul{
  padding-left: 15px;
}
.card ul li{
  margin-bottom: 15px;
}
.card.white_Card{
      background: #ffffff;
      color: #000;
}
.card.white_Card p{
   color: var(--para_Text_Dark);
}

   

    .closing_Statement {
    padding: 3rem 0;
    text-align: center;
    background: #fff;
    margin: 3rem 0;
    border-radius: 1rem;
}
    .closing_Statement .closing_Title{
      font-size: 2rem;
      color: #000;
    }
      .closing_Statement p{
       color: #000!important
    }
    .closing_Statement .col-sm-12 div{
      display: flex;
    justify-content: center;
    }
.differentiatorSec{
  position: relative;
}
.differentiatorSec:before {
    content: '';
    position: absolute;
    background: #000;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    opacity: 0.8;
}
.differentiatorSec .common_Title{
  color: #fff;
}
.differentiatorSec .card.differentiator_Card{
      /* border-bottom: 1px solid #ccc; */
      margin-bottom: 1rem;
      background: transparent;
      height: 100%;
}
.differentiatorSec .card.differentiator_Card .card_Content{
      display: flex;
      flex-direction: column;
      height: 100%;
}
.differentiatorSec .card.differentiator_Card .card_Content h4{
        font-size: 2rem;
        flex: 0 0 30%;
        padding-right: 2rem;
        border-bottom: 1px solid #cccccc70;
}
.differentiatorSec .card.differentiator_Card .card_Content p{
      font-size: 1.1rem;
      flex: 0 0 50%;
      margin-left: 0;
      font-weight: 500;
      margin-bottom: 1rem;
}
.differentiatorSec .card.differentiator_Card .card_Content p:empty{
  display: none;
}

@media (max-width:576px){
  .banner .banner__inner--title{
                 font-size: 2.3rem !important;
        font-weight: 600;
        letter-spacing: 0;
        padding-top: 2rem;
  }
  .highlighted_part{
        font-size: 3rem;
  }
  .Home_banner .banner h6 {
    margin-bottom: 3rem;
    font-size: 1rem;
    font-weight: 400;
}


.offering_dicscriptions_box{
      background: #000000cc;
              border-radius: 12px;
}
.bsf-panel{
      grid-template-rows: auto;
}
.offering_dicscriptions_box .offerings_Content_Box  h3{
 color: #fff;
}


.yt_number_Box{
  min-height: auto;
}
.breadcrumbSec {
  padding-left: 20px;
}

}
/* Offerings pins */
.phase-0 .bsf-slider__pin{
  position: sticky;
    top: 20px;
}
.phase-0 .bixNext_Inner_Services .bsf-tablist .bsf-tab {
    padding: 6px 20px;
}


 :root{
    --ink:        #140b2b;
    --ink-alt:    #1d1140;
    --surface:    #271552;
    --accent:     #5a00fa;
    --accent-soft:#955cf9;
    --accent-deep:#5d40d0;
    --text:       #f5f1ff;
    --muted:      #a89bcf;
    --line:       rgba(147,79,252,0.38);
    --ring-dim:   rgba(147,79,252,0.16);

    --size: clamp(230px, 56vmin, 560px);
    --dot: clamp(48px, 10vmin, 82px);
  }


  

  


  /* ---------- Detail panel ---------- */

  .detail-panel{
    max-width:560px;
    min-height:70px;
    text-align:center;
    padding:0 8px;
  }

  .detail-panel .tag{
    display:inline-block;
    font-weight:800;
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--accent-soft);
    margin-bottom:8px;
    transition:opacity 0.25s ease;
  }

  .detail-panel p{
    margin:0;
    font-size:1.1rem;
    font-weight:500;
    line-height:1.65;
    color:var(--text);
    transition:opacity 0.25s ease;
  }

  .detail-panel.swap .tag,
  .detail-panel.swap p{ opacity:0; }

  @media (max-width:340px){
    .center-title{ font-size:15px; }
  }

  @media (prefers-reduced-motion: reduce){
    .comet-wrap{ animation:cometIn 0.6s ease 1.1s forwards; }
    .center-box{ animation:hubIn 0.6s ease 0.9s forwards; }
    .eyebrow,.aaa-intro h2,.orbit-ring,.node-inner{ animation-duration:0.01s; animation-delay:0s; }
  }
  @media (max-width:600px){

.yashPerspectives {
    padding: 2rem 0 4rem;
   }
    .bsf-slider__inner {
        padding: 1.5rem 1rem 0;
    }
  .why-sect-ibp-box-inner p{
    text-align: left!important;
  }
  .card{
    margin-bottom: 1rem;
  }

.listing_Box ul{
  grid-template-columns: repeat(1, 1fr);
}
.listing_Box li{
  min-height: auto;
}

.listing_With_Icons ul{
     grid-template-columns: repeat(1, 1fr);
}
.listing_With_Icons li{
      min-height: 100px;
}


}

@media (min-width:767.98px) and (max-width:870px) {
 .bsf-panel{
  display: none;
 }
 .bsf-panel.bsf-is-active{
  display: flex;
 }
.bsf-tablist {
  display: block;
}

.banner .banner__inner--title{
  font-size: 2.4rem !important;
          letter-spacing: 1px;
}


.yt_Insight_txt{
  min-height: 250px;
}
.banner{
  min-height: 50vh;
  background: #000000b5;
}

}
.yt_number_Box.teal_Blue_BG {
     background: #1c003d;
}
.yt_number_Box.teal_Blue_BG  .yt_number_Box_title{
  color: #fff!important;
}

@media (min-width: 1400px) {
   .bsf-panels{
        min-height: 500px;
   }
}


@media (min-width: 1160px) and (max-width:1399px) {
      .bsf-panels {
        min-height: 450px;
    }
}
.offering_dicscriptions_box .sub_offrings_List ul li{
  margin-left: 15px;
}
.offering_dicscriptions_box .sub_offrings_List ul li.parent_Nav {
    position: relative;
    left: -15px;
}
.offering_dicscriptions_box .sub_offrings_List ul li.parent_Nav a{
 background-color: #000;
 color: #fff;
}
.offering_dicscriptions_box .sub_offrings_List ul li.parent_Nav a img{
      filter: brightness(0) invert(1);
}


/* ==========================================================================
   CASE STUDIES
   ========================================================================== */
.cases_Sec { padding: 50px 0 60px; }
.cases_Decor .dots {
  position: absolute; width: 340px; height: 340px; left: -120px; bottom: -80px;
  background-image: radial-gradient(rgba(124, 88, 253, 0.22) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle, black, transparent 72%);
  mask-image: radial-gradient(circle, black, transparent 72%);
}
.cases_Sec .sec_Head { margin-bottom: 26px; max-width: 760px; }
.cases_Sec .sec_Title { font-size: clamp(50px, 5.5vw, 76px); white-space: nowrap; }

.case_Tabs { display: flex; gap: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.14); flex-wrap: nowrap; overflow: hidden; }
.case_Tab {
  flex: 1 1 0;
  min-width: 170px;
  text-align: left;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.42);
  padding: 20px 18px 22px;
  line-height: 1.35;
  transition: color 0.3s;
}
.case_Tab.is_Active { font-weight: 700; color: #111; }
.case_Fill {
  position: absolute; left: 0; bottom: -1px;
  height: 3px; width: 0;
  background: var(--accent);
}
.case_Tab.is_Active .case_Fill { animation: caseFill 6s linear forwards; }
@keyframes caseFill { from { width: 0; } to { width: 100%; } }

.case_Stage {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 34px;
  position: relative;
  height: clamp(400px, 42vw, 460px);
  overflow: hidden;
  background: var(--dark);
}
.case_Slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.7s; }
.case_Slide.is_Active { opacity: 1; pointer-events: auto; }
.case_Slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.case_Scrim_H { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6, 5, 10, 0.97) 0%, rgba(6, 5, 10, 0.9) 34%, rgba(6, 5, 10, 0.6) 60%, rgba(6, 5, 10, 0.25) 100%); }
.case_Scrim_V { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(6, 5, 10, 0.85) 0%, rgba(6, 5, 10, 0.3) 26%, transparent 52%); }
.case_Content_Wrap { position: absolute; inset: 0; display: flex; align-items: center; }
.case_Content_Inner { max-width: 1240px; margin: 0 auto; padding: 0 64px; width: 100%; }
.case_Content { max-width: 960px; }
.case_Badge {
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 600;
  letter-spacing: 2px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  display: inline-block;
}
.case_Body_Grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(30px, 4.5vw, 72px); align-items: end; margin-top: 26px; }
.case_Title {
  font-size: clamp(27px, 2.4vw, 37px);
  font-weight: 600;
  margin-bottom: 13px;
  letter-spacing: -0.6px;
  line-height: 1.22;
  color: #fff;
  text-wrap: pretty;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.case_Desc {
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
  margin-bottom: 22px;
  max-width: 820px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}
.case_Link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  padding: 14px 30px;
  border-radius: 999px;
  transition: transform 0.25s;
}
.case_Link:hover { color: #fff; transform: translateY(-2px); }
.case_Link img { width: 16px; height: auto; filter: brightness(0) invert(1); }
.case_Metric {
  display: flex; align-items: baseline; gap: 14px;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  padding: 22px 28px;
  border-radius: 18px;
}
.case_Metric_Num {
  font-size: clamp(56px, 5.4vw, 84px);
  font-weight: 200;
  letter-spacing: -2.5px;
  line-height: 0.95;
  background: linear-gradient(95deg, #d6ccff, #9b7bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.case_Metric_Label {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
  max-width: 210px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.insights_Sec { padding: 40px 0 100px; }
.insights_Sec .sec_Head { margin-bottom: 44px; }
.insights_Sec .sec_Title { font-size: clamp(40px, 4.4vw, 60px); line-height: 1.12; letter-spacing: -1.4px; }
.insights_Nav { display: flex; align-items: center; gap: 12px; }
.nav_Circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  display: grid; place-items: center;
  cursor: pointer;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.6);
}
.nav_Circle:hover { border-color: #000; background: #fff; }
.nav_Circle img { width: 20px; height: auto; }
.nav_Circle.prev img { transform: scaleX(-1); }

.insights_Swiper { overflow: visible; }
.insights_Swiper .swiper-slide { height: auto; display: flex; }
.insight_Card {
  display: flex; flex-direction: column;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.insight_Media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.insight_Media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.insight_Badge {
  position: absolute; top: 16px; left: 16px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}
.insight_Body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
.insight_Title {
  font-size: clamp(23px, 1.5vw, 28px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.3px;
  color: #fff;
  margin-bottom: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ins_Link {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: auto;
  font-size: 15.5px; font-weight: 600;
  color: var(--accent-soft);
  cursor: pointer;
  align-self: flex-start;
  transition: gap 0.25s;
  white-space: nowrap;
}
.ins_Link:hover { gap: 14px; color: var(--accent-soft); }
.ins_Link img { width: 16px; height: auto;  filter: brightness(0) invert(1);}



/* ==========================================================================
   LEADERSHIP
   ========================================================================== */
.leadership_Sec {
  padding: 100px 0;
  color: #fff;
  background: linear-gradient(#050506 0%, #0b0b0d 55%, #050506 100%);
}
.leadership_Decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.leadership_Decor .glow {
  position: absolute; width: 700px; height: 700px; left: -260px; top: -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 88, 253, 0.22), transparent 62%);
  filter: blur(70px);
}
.leadership_Sec .sec_Head {  margin: 0 auto 56px; }
.leadership_Sec .eyebrow { color: var(--accent-soft); }
.leadership_Sec .sec_Title .grad_Text { background: linear-gradient(95deg, #a18aff, #54d2ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* .leader_Card {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 44px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
} */
.leader_Photo { position: relative; height: auto; }
.leader_Photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px; }
.leader_Name { font-size: clamp(32px, 2.8vw, 44px); font-weight: 400; letter-spacing: -1px; line-height: 1.15; }
.leader_Role { font-size: clamp(17px, 1.3vw, 19.5px); font-weight: 500; color: var(--accent-soft); margin-top: 10px; }
.leader_Bio {
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.75;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 20px;
  max-width: 100%;
}
.leader_Link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px;
  color: #fff;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 500;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  transition: 0.2s;
}
.leader_Link:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: rgba(124, 88, 253, 0.2); }
.leader_Link .li_Badge {
  width: 22px; height: 22px; border-radius: 5px;
  background: #0a66c2;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
@media (max-width:576px){
  .leader_Name{
    padding-top: 1rem;
  }
}
/* ==========================================================================
   CTA
   ========================================================================== */
.cta_Sec { padding: 90px 0; }
.cta_Card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 56px 60px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.cta_Bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta_Inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; color: #fff; }
.cta_Inner .eyebrow { color: #bcaaff; margin-bottom: 18px; }
.cta_Title {
  font-size: clamp(42px, 4.6vw, 62px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -2px;
  max-width: 620px;
  color: #fff;
}
.cta_Title strong { font-weight: 700; }
@media (max-width:576px){
.cta_Sec {
    padding: 0 0;
}
.hero_Cta .btn{
  font-size: 0.8rem!important;
}
.cta_Sec .container{
     padding-left: 0;
    padding-right: 0;
}
.cta_Sec .cta_Card{
     border-radius: 0;
    padding: 56px 20px;
}
}
/* ==========================================================================
   ACCELERATORS (sticky stack cards)
   ========================================================================== */
.accelarator_Sec { padding: 40px 0 30px; }
.accelarator_Sec .sec_Head { margin-bottom: 56px; }


.accelarator_Card {
  position: sticky;
  margin-bottom: 26px;
  background: var(--dark);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  padding: 48px 52px;
  overflow: hidden;
  will-change: transform;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: border-color .35s ease;
}
.accelarator_Card:hover { border-color: rgba(178, 158, 255, 0.45); }
.accelarator_Card:nth-child(1) { top: 110px; 
background: url(../images/abstract/accelarator_1.png);
}
.accelarator_Card:nth-child(2) { top: 126px; background: url(../images/abstract/accelarator_2.png); }
.accelarator_Card:nth-child(3) { top: 142px; background: url(../images/abstract/accelarator_3.png); }
.accelarator_Card:nth-child(4) { top: 158px;background: url(../images/abstract/accelarator_4.png); }
.accel_Tint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, rgba(6, 4, 16, 0.55), rgba(6, 4, 16, 0.18)); }
.accel_Shade { position: absolute; inset: 0; z-index: 3; background: var(--darker); opacity: 0; pointer-events: none; }
.accel_Card_Row { position: relative; z-index: 2; align-items: center; }
.accel_Num_Row { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.accel_Num { font-size: clamp(40px, 3.6vw, 56px); font-weight: 200; color: rgba(255, 255, 255, 0.3); letter-spacing: -1px; }
.accel_Rule { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(178, 158, 255, 0.4), transparent); }
.accel_Title {
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: #fff;
}
.accel_Desc {
  font-size: clamp(12px, 1.4vw, 18px);
  line-height: 1.75;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.66);
  max-width: 560px;
}
.accel_Tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.accel_Tags span {
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.accelarator_Card:hover .accel_Tags span {
  border-color: rgba(178, 158, 255, 0.55);
  background: rgba(124, 88, 253, 0.14);
  color: #fff;
}
.accel_Media { height: 280px; border-radius: 18px; overflow: hidden; position: relative; z-index: 2; }
.accel_Media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.accelarator_Card:hover .accel_Media img { transform: scale(1.06); }
.accel_Media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(124, 88, 253, 0.22), transparent 60%); }
@media (max-width:576px){
  .accelarator_Card .accel_Media{
    display: none;
  }
}
/* Lenis required CSS */
  html.lenis,
  html.lenis body {
    height: auto;
  }

  .lenis.lenis-smooth {
    scroll-behavior: auto !important;
  }

  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
  }

  .lenis.lenis-stopped {
    overflow: hidden;
  }

  /* ============================
     2. SCROLL PROGRESS BAR
  ============================ */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: #6b25ff;
    z-index: 999;
    transition: width 0.1s linear;
  }

  /* ============================
     3. NAVBAR
  ============================ */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1.25rem 0;
    transition: background 0.4s ease, padding 0.4s ease;
  }

  .navbar.scrolled {
    background: rgba(10, 10, 12, 0.75);
    backdrop-filter: blur(14px);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--clr-line);
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
  }

  .brand span {
    color: var(--clr-accent);
  }

  .nav-links {
    display: none;
    gap: 2rem;
    list-style: none;
  }

  .nav-links a {
    font-size: 0.92rem;
    color: var(--clr-muted);
    transition: color 0.3s;
  }

  .nav-links a:hover {
    color: var(--clr-text);
  }


  @media (min-width: 768px) {
    .nav-links {
      display: flex;
    }
  }

  /* ============================
     4. HERO
  ============================ */
  .hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 8rem 0 4rem;
    position: relative;
    overflow: hidden;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--clr-muted);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
  }

  .hero-eyebrow .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-accent);
    box-shadow: 0 0 12px var(--clr-accent);
    animation: pulse 2s infinite;
  }

  @keyframes pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.4;
    }
  }

  .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 6.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: 2rem;
  }

  .hero h1 .word {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 0.08em;
    /* prevents descender clip on g, y */
    line-height: inherit;
    margin-right: 0.25em;
  }

  .hero h1 .word>span {
    display: inline-block;
    transform: translateY(120%);
  }

  .hero h1 em {
    font-style: italic;
    color: var(--clr-accent);
    font-weight: 500;
  }

  .hero p {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    color: var(--clr-muted);
    max-width: 560px;
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(20px);
  }

  .hero-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
  }



  /* Floating shapes (parallax) */
  .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    pointer-events: none;
  }

  .shape-1 {
    width: 400px;
    height: 400px;
    background: var(--clr-accent);
    top: 10%;
    right: -100px;
  }

  .shape-2 {
    width: 300px;
    height: 300px;
    background: var(--clr-accent-2);
    bottom: 5%;
    left: -80px;
    opacity: 0.25;
  }

  /* ============================
     5. MARQUEE
  ============================ */
  .marquee {
    border-top: 1px solid var(--clr-line);
    border-bottom: 1px solid var(--clr-line);
    padding: 1.75rem 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .marquee-track {
    display: inline-flex;
    gap: 3rem;
    will-change: transform;
  }

  .marquee-item {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--clr-muted);
    display: inline-flex;
    align-items: center;
    gap: 3rem;
  }

  .marquee-item::after {
    content: '✦';
    color: var(--clr-accent);
    font-size: 0.7em;
  }

  /* ============================
     6. SERVICES SECTION
  ============================ */
  section.section {
    padding: 8rem 0;
    position: relative;
  }

  .section-head {
    max-width: 720px;
    margin-bottom: 4rem;
  }

  .section-tag {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-accent);
    margin-bottom: 1.25rem;
  }

  .section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .section-head p {
    color: var(--clr-muted);
    margin-top: 1.25rem;
    font-size: 1.05rem;
    max-width: 540px;
  }

  .service-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  @media (min-width: 900px) {
    .service-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .service-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-line);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s, transform 0.4s;
    cursor: pointer;
  }

  .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 91, 46, 0.15), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
  }

  .service-card:hover {
    border-color: rgba(255, 91, 46, 0.3);
    transform: translateY(-6px);
  }

  .service-card:hover::before {
    opacity: 1;
  }

  .service-card>* {
    position: relative;
    z-index: 1;
  }

  .service-num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--clr-accent);
    margin-bottom: 2rem;
    letter-spacing: 0.1em;
  }

  .service-card h3 {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
  }

  .service-card p {
    color: var(--clr-muted);
    font-size: 0.97rem;
    margin-bottom: 2rem;
  }

  .service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--clr-text);
    border-bottom: 1px solid var(--clr-line);
    padding-bottom: 0.4rem;
    transition: gap 0.3s, border-color 0.3s;
  }

  .service-card:hover .service-link {
    gap: 0.85rem;
    border-color: var(--clr-accent);
  }
  .bsf-scroll-slider .common_Title{
    text-align: left;

  }
  /* ============================
     7. HORIZONTAL PINNED SECTION
  ============================ */
  .horizontal {
    overflow: hidden;
    background: var(--clr-surface);
  }

  .horizontal-track {
    display: flex;
    width: max-content;
    padding: 0 1.5rem;
    gap: 2rem;
  }

  .h-panel {
    flex: 0 0 auto;
    width: 80vw;
    max-width: 480px;
    padding: 3rem;
    border-radius: var(--radius);
    background: var(--clr-bg);
    border: 1px solid var(--clr-line);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 60vh;
  }

  .h-panel-num {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 800;
    color: var(--clr-accent);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .h-panel h4 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 1rem;
    line-height: 1.2;
  }

  .h-panel p {
    color: var(--clr-muted);
    margin-top: 1rem;
    font-size: 0.97rem;
  }

  /* ============================
     8. STATS
  ============================ */
  .stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    border-top: 1px solid var(--clr-line);
    padding-top: 4rem;
    margin-top: 4rem;
  }

  @media (min-width: 768px) {
    .stats {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .stat .num {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--clr-text);
  }

  .stat .num .suffix {
    color: var(--clr-accent);
  }

  .stat .label {
    color: var(--clr-muted);
    font-size: 0.92rem;
    margin-top: 0.75rem;
  }

  /* ============================
     9. BIG TEXT REVEAL
  ============================ */


  /* ============================
     10. CTA
  ============================ */
  .cta {
    text-align: center;
    background: var(--clr-surface);
    padding: 7rem 1.5rem;
    border-radius: var(--radius);
    margin: 0 1.5rem 4rem;
    position: relative;
    overflow: hidden;
  }

  .cta h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
  }

  .cta p {
    color: var(--clr-muted);
    max-width: 540px;
    margin: 0 auto 2.5rem;
  }

  /* ============================
     11. FOOTER
  ============================ */
  footer {
    border-top: 1px solid var(--clr-line);
    padding: 3rem 0;
    color: var(--clr-muted);
    font-size: 0.9rem;
  }

  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* ============================
     12. REVEAL ANIMATION HELPERS
  ============================ */
  .fade-up {
    opacity: 0;
    transform: translateY(40px);
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
  .eyebrow{
    display: none;
  }
  .swiper-slide{
        background: #000;
    border-radius: 12px;
  }
  p.head_Note {
       color: #010101;
    font-size: 1.1rem;
    line-height: 1.8;
}
.yashPerspectives  .commonTag::before{
  display: none;
}
.cases_Sec .btn.btn-primary{
      padding: 12px 24px;
}

/* .grad_Text{
  color: #5a00fa;
} */
 .page_Navigation {
  position: sticky;
  top: 0;
  z-index: 999;
   /* so sections don't show through when stuck */
}
.page_Navigation .tabSec .nav-tabs .nav-link.active{
  border-bottom: 1px solid #5a00fa;
}
.hero_Cta {
    display: block;
    width: 100%;
    position: relative;
    margin-top: 3rem;
}

/* ---------- Journey section: responsive shell ---------- */
  .journey-section  { padding:40px 64px 60px }
  .journey-inner    { max-width:1240px; }

  .journey-head     { margin-bottom:6px; gap:16px; }
  .journey-eyebrow  { font-size:17px; font-weight:600; letter-spacing:3px; color:rgba(0,0,0,0.72); }
  .journey-route    { font-size:16px; font-weight:400; color:rgba(0,0,0,0.6); white-space:nowrap; }

  /* Which of the two graphics is live. Desktop is the default. */
  .journey-mobile   { display:none; }
  .journey-desktop  { display:block; }

  /* Tablet: the horizontal track still fits, just relax the gutters. */
  @media (max-width: 1100px) {
    .journey-section { padding:24px 32px 8px; }
  }

  /* Phone: swap to the vertical track and stack the header. */
  @media (max-width: 900px) {
    .journey-section  { padding:24px 20px 8px; }
    .journey-head     { flex-direction:column; align-items:flex-start !important; gap:6px; margin-bottom:18px; }
    .journey-eyebrow  { font-size:13px; letter-spacing:2px; line-height:1.45; }
    .journey-route    { font-size:14px; white-space:normal; }
    .journey-desktop  { display:none; }
    .journey-mobile   { display:block; }
  }

  /* Very narrow phones: give the labels a little more room. */
  @media (max-width: 360px) {
    .journey-section { padding:20px 14px 8px; }
  }

  /* Respect the OS "reduce motion" setting. */
  @media (prefers-reduced-motion: reduce) {
    [data-journey-dot], [data-journey-dot-glow] { display:none; }
  }

  /* S Marquee */
  
  /* ---------- Marquee ---------- */
  .marquee-swiper {
    overflow:hidden;
    padding:26px 0;
    border-top:1px solid rgba(0,0,0,0.12);
    border-bottom:1px solid rgba(0,0,0,0.12);
  }

  /* These two rules are what make it read as a marquee rather than a carousel:
     linear timing kills Swiper's ease, auto width lets each label size itself. */
  .marquee-swiper .swiper-wrapper { transition-timing-function:linear !important; align-items:center; }
  .marquee-swiper .swiper-slide   { width:auto; }

  .marquee-slide { gap:56px; padding-right:56px; }

  .marquee-link {
    font-size:17px;
    font-weight:400;
    letter-spacing:3px;
    color:rgba(0,0,0,0.5);
    white-space:nowrap;
    text-decoration:none;
    transition:color .2s;
  }
  .marquee-link:hover,
  .marquee-link:focus-visible { color:#000000; }

  .marquee-star { color:#54D2FF; font-size:11px; }

  /* Soft fade at both edges so labels dissolve instead of clipping. */
  .marquee-swiper::before,
  .marquee-swiper::after {
    content:"";
    position:absolute; top:0; bottom:0; width:80px;
    pointer-events:none; z-index:2;
  }
  .marquee-swiper::before { left:0;  background:linear-gradient(90deg,#ffffff,rgba(250,247,246,0)); }
  .marquee-swiper::after  { right:0; background:linear-gradient(270deg,#ffffff,rgba(250,247,246,0)); }

  /* Tablet */
  @media (max-width: 900px) {
    .marquee-swiper { padding:20px 0; }
    .marquee-slide  { gap:36px; padding-right:36px; }
    .marquee-link   { font-size:15px; letter-spacing:2.4px; }
    .marquee-swiper::before,
    .marquee-swiper::after { width:48px; }
  }

  /* Phone */
  @media (max-width: 560px) {
    .marquee-swiper { padding:16px 0; }
    .marquee-slide  { gap:24px; padding-right:24px; }
    .marquee-link   { font-size:13px; letter-spacing:1.8px; }
    .marquee-star   { font-size:9px; }
    .marquee-swiper::before,
    .marquee-swiper::after { width:32px; }
  }

  /* Touch devices have no hover, so keep the resting colour readable. */
  @media (hover: none) {
    .marquee-link { color:rgba(0,0,0,0.62); }
  }

  /* Reduced motion: stop the scroll, let the row wrap and sit still. */
  @media (prefers-reduced-motion: reduce) {
    .marquee-swiper .swiper-wrapper { flex-wrap:wrap; justify-content:center; transform:none !important; }
    .marquee-swiper::before, .marquee-swiper::after { display:none; }
  }

  /* Lifecycle */
  
  /* ---------- Shell ---------- */
  .lc-section { padding:30px 64px 80px; color:#000000; }
  .lc-decor   { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
  .lc-dots {
    position:absolute; width:300px; height:300px; left:40px; top:60px;
    background-image:radial-gradient(rgba(124,88,253,0.2) 1.5px, transparent 1.5px);
    background-size:24px 24px;
    -webkit-mask-image:radial-gradient(circle, black, transparent 70%);
            mask-image:radial-gradient(circle, black, transparent 70%);
  }
  .lc-glow {
    position:absolute; width:520px; height:520px; right:-190px; bottom:-160px; border-radius:50%;
    background:radial-gradient(circle, rgba(123,77,255,0.12), transparent 62%); filter:blur(50px);
  }

  .lc-grid {
    max-width:1240px;
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:start;
  }

  /* ---------- Left column (sticky) ---------- */
  .lc-sticky   { position:sticky; top:130px; }
  .lc-eyebrow  { font-size:14.5px; font-weight:500; letter-spacing:3px; color:var(--sapAccent); margin-bottom:16px; }
  .lc-title    { font-size:clamp(42px,4.5vw,62px); font-weight:300; margin:0; line-height:1.1; letter-spacing:-1.6px; }
  .lc-title em {
    font-style:normal; font-weight:500;
    background:linear-gradient(95deg,#7c58fd,#6A35E8);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .lc-lede     { font-size:18px; line-height:1.75; font-weight:300; color:rgba(0,0,0,0.62); margin:22px 0 0; max-width:420px; }

  .lc-cta {
    gap:10px; margin-top:30px; color:var(--sapAccent); text-decoration:none;
    font-size:17px; font-weight:500; transition:gap .22s, color .22s;
  }
  .lc-cta:hover, .lc-cta:focus-visible { gap:15px; color:#000000; }
  .lc-cta svg { width:20px; height:auto; opacity:0.85; flex:none; }

  /* ---------- Right column (timeline) ---------- */
  .lc-track      { padding-left:44px; }
  .lc-rail       { position:absolute; left:13px; top:8px; bottom:8px; width:1px; background:rgba(0,0,0,0.16); }
  .lc-rail-fill  { position:absolute; left:13px; top:8px; width:1px; height:0;
                   background:linear-gradient(180deg, var(--sapAccent,#7c58fd), #8F6FFF); }

  .lc-step  { padding-bottom:36px; }
  .lc-badge {
    position:absolute; left:-44px; top:4px; width:29px; height:29px; border-radius:50%;
    background:rgba(0,0,0,0.9); border:1px solid rgba(178,158,255,0.5);
    display:grid; place-items:center; font-size:13.5px; font-weight:500; color:#BCAAFF;
  }
  .lc-card {
    background:#FFFFFF; border:1px solid rgba(0,0,0,0.12); border-radius:16px;
    padding:28px 30px; box-shadow:0 10px 28px rgba(0,0,0,0.1); transition:all .25s;
  }
  .lc-card:hover {
    border-color:rgba(124,88,253,0.5); background:#F7F3FF; transform:translateX(6px);
  }
  .lc-card-title { font-size:23px; font-weight:500; margin:0 0 9px; letter-spacing:-0.2px; color:#000000; }
  .lc-card-desc  { font-size:16.5px; line-height:1.7; font-weight:300; color:rgba(0,0,0,0.62); margin:0; }

  /* ---------- Tablet ---------- */
  @media (max-width: 1100px) {
    .lc-section { padding:28px 32px 64px; }
    .lc-grid    { gap:48px; }
    .lc-lede    { max-width:none; }
  }

  /* ---------- Phone: collapse to one column, drop the sticky rail ---------- */
  @media (max-width: 900px) {
    .lc-section  { padding:24px 20px 56px; }
    .lc-grid     { grid-template-columns:1fr; gap:36px; }
    .lc-sticky   { position:static; top:auto; }
    .lc-title    { letter-spacing:-0.8px; }
    .lc-lede     { font-size:16.5px; margin-top:18px; }
    .lc-cta      { font-size:16px; margin-top:24px; }

    .lc-track      { padding-left:40px; }
    .lc-badge      { left:-40px; width:26px; height:26px; font-size:12.5px; top:3px; }
    .lc-rail,
    .lc-rail-fill  { left:12.5px; }
    .lc-step       { padding-bottom:26px; }
    .lc-card       { padding:20px 18px; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,0.08); }
    .lc-card-title { font-size:19px; }
    .lc-card-desc  { font-size:15.5px; line-height:1.65; }

    /* Decor is sized for a wide canvas; shrink it so it does not dominate. */
    .lc-dots { width:180px; height:180px; left:-20px; top:20px; }
    .lc-glow { width:340px; height:340px; right:-150px; bottom:-120px; }
  }

  /* Touch devices get no hover, so drop the nudge and keep cards static. */
  @media (hover: none) {
    .lc-card:hover { border-color:rgba(0,0,0,0.12); background:#FFFFFF; transform:none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .lc-card { transition:none; }
  }

  /* Piller CSS */
  
  /* ---------- Shell ---------- */
  .pl-section { padding:90px 64px 100px; color:#000000; }
  .pl-decor   { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
  .pl-ring    { position:absolute; width:640px; height:640px; left:-240px; top:-200px; border-radius:50%; border:1px solid rgba(124,88,253,0.13); }
  .pl-glow    { position:absolute; width:700px; height:520px; right:-260px; bottom:-200px; border-radius:50%;
                background:radial-gradient(circle, rgba(124,88,253,0.12), transparent 62%); filter:blur(60px); }
  .pl-inner   { max-width:1240px; }

  .pl-head    { display:flex; justify-content:space-between; align-items:flex-end; gap:60px; margin-bottom:44px; }
  .pl-eyebrow { font-size:14.5px; font-weight:500; letter-spacing:3px; color:var(--sapAccent); margin-bottom:16px; }
  .pl-title   { font-size:clamp(42px,4.5vw,62px); font-weight:300; margin:0; line-height:1.1; letter-spacing:-1.6px; }
  .pl-title em {
    font-style:normal; font-weight:500;
    background:linear-gradient(95deg,#7c58fd,#6A35E8);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .pl-lede    { font-size:17px; line-height:1.7; font-weight:300; color:rgba(0,0,0,0.62); max-width:440px; margin:0 0 6px; }

  /* ---------- Accordion row ---------- */
  .pillars-row { display:flex; align-items:stretch; gap:12px; height:460px; }

  .pillar {
    position:relative; flex:1 1 0%; min-width:0;
    border:1px solid rgba(0,0,0,0.16); border-radius:20px; background:#FFFFFF;
    overflow:hidden; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,0.1);
    padding:0; margin:0; font:inherit; color:inherit; text-align:left; appearance:none;
    transition:flex .6s cubic-bezier(0.22,1,0.36,1), border-color .5s ease, box-shadow .3s ease;
  }
  .pillar.is-open { flex:4.6 1 0%; border-color:var(--border-hov); }
  .pillar:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

  /* The one brand-coloured card */
  .pillar--highlight {
    background:linear-gradient(150deg,#7c58fd 0%,#7B4DFF 70%,#8F5BFF 100%);
    border-color:rgba(255,255,255,0.45);
    --accent:#FFFFFF; --icon-bg:rgba(255,255,255,0.18); --border-hov:rgba(255,255,255,0.45);
  }
  .pillar--highlight .pillar-num   { color:rgba(255,255,255,0.6); }
  .pillar--highlight .pillar-name-v,
  .pillar--highlight .pillar-title { color:#FFFFFF; }
  .pillar--highlight .pillar-desc  { color:rgba(255,255,255,0.82); }
  .pillar--highlight .pillar-link  { color:#FFFFFF; }

  /* Collapsed rail */
  .pillar-rail {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:space-between; padding:24px 0;
    opacity:1; transition:opacity .3s ease;
  }
  .pillar.is-open .pillar-rail { opacity:0; }

  .pillar-num    { font-size:14px; font-weight:500; color:rgba(0,0,0,0.35); letter-spacing:1px; }
  .pillar-name-v { writing-mode:vertical-rl; transform:rotate(180deg); font-size:20px; font-weight:500;
                   color:#000000; max-height:320px; overflow:hidden; text-align:center; }
  .pillar-glyph  { width:42px; height:42px; border-radius:12px; background:var(--icon-bg);
                   display:grid; place-items:center; color:var(--accent); font-size:18px; flex:none; }
  .pillar-glyph--lg { width:48px; height:48px; border-radius:13px; font-size:20px; }

  /* Open panel */
  .pillar-panel {
    position:absolute; inset:0; display:flex; flex-direction:column;
    padding:30px 28px 26px; opacity:0; pointer-events:none; transition:opacity .4s ease .1s;
  }
  .pillar.is-open .pillar-panel { opacity:1; }
  .pillar-panel-head { display:flex; align-items:center; justify-content:space-between; }

  .pillar-title {
    font-size:clamp(22px,1.8vw,27px); font-weight:500; margin:24px 0 0;
    letter-spacing:-0.4px; line-height:1.25; color:#000000;
    /* REFINED: was nowrap + ellipsis, which truncated the longest pillar name.
       Now wraps to at most two lines instead of cutting mid-word. */
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .pillar-desc {
    font-size:16.5px; line-height:1.68; font-weight:400; color:rgba(0,0,0,0.62);
    margin:14px 0 0; min-width:290px;
  }
  .pillar-link {
    display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:500;
    color:var(--accent); margin-top:auto; white-space:nowrap;
  }
  .pillar-arrow { width:18px; height:auto; opacity:0.85; flex:none; }
  .pillar.is-open:hover .pillar-arrow { transform:translateX(3px); }
  .pillar-arrow { transition:transform .25s ease; }

  /* ---------- Tablet ---------- */
  @media (max-width: 1100px) {
    .pl-section  { padding:70px 32px 80px; }
    .pl-head     { gap:36px; margin-bottom:36px; }
    .pillars-row { height:420px; gap:10px; }
    .pillar-panel { padding:24px 22px 22px; }
    .pillar-desc { min-width:0; font-size:15.5px; }
  }

  /* ---------- Phone: horizontal accordion becomes a vertical one ---------- */
  @media (max-width: 900px) {
    .pl-section { padding:56px 20px 64px; }
    .pl-head    { flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:28px; }
    .pl-title   { letter-spacing:-0.8px; }
    .pl-lede    { max-width:none; font-size:16px; margin:0; }

    .pillars-row { flex-direction:column; height:auto; gap:10px; }

    .pillar {
      flex:none; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,0.07);
      transition:border-color .3s ease, box-shadow .3s ease;
    }
    .pillar.is-open { flex:none; box-shadow:0 10px 26px rgba(0,0,0,0.12); }

    /* Rail becomes a permanent horizontal header row. */
    .pillar-rail {
      position:static; flex-direction:row; align-items:center; justify-content:flex-start;
      gap:14px; padding:16px 18px; opacity:1 !important;
    }
    .pillar-num    { order:1; min-width:24px; }
    .pillar-name-v {
      order:2; writing-mode:horizontal-tb; transform:none; max-height:none;
      font-size:17px; line-height:1.3; text-align:left; flex:1;
    }
    .pillar-glyph  { order:3; width:36px; height:36px; border-radius:10px; font-size:16px; }

    /* Panel drops below the header and expands instead of cross-fading. */
    .pillar-panel {
      position:static; padding:0 18px; opacity:1; pointer-events:auto;
      max-height:0; overflow:hidden;
      transition:max-height .42s cubic-bezier(0.22,1,0.36,1), padding-bottom .42s ease;
    }
    .pillar.is-open .pillar-panel { max-height:260px; padding-bottom:20px; }
    .pillar-panel-head,
    .pillar-title { display:none; }          /* already shown in the header row */
    .pillar-desc  { margin:0; min-width:0; font-size:15.5px; line-height:1.6; }
    .pillar-link  { margin-top:14px; font-size:15px; }

    .pl-ring { width:360px; height:360px; left:-160px; top:-120px; }
    .pl-glow { width:420px; height:340px; right:-200px; bottom:-140px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .pillar, .pillar-rail, .pillar-panel, .pillar-arrow { transition:none !important; }
  }

  /* Proof Section */
  
  /* ---------- Shell: this section is light-on-dark ---------- */
  .pf-section {
    position:relative; z-index:1; padding:100px 64px; color:#fff;
    background:linear-gradient(180deg,#050506 0%,#0B0B0D 55%,#050506 100%);
  }
  .pf-inner { max-width:1240px; margin:0 auto; }

  .pf-head    { max-width:780px; margin:0 auto 20px; text-align:center; }
  .pf-eyebrow { font-size:14.5px; font-weight:500; letter-spacing:3px; color:#B3A1FF; margin-bottom:16px; }
  .pf-title   { font-size:clamp(42px,4.5vw,62px); font-weight:300; margin:0; line-height:1.1; letter-spacing:-1.6px; }
  .pf-title em {
    font-style:normal; font-weight:500;
    background:linear-gradient(95deg,#A18AFF,#54D2FF);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }

  /* ---------- Three-column stage ---------- */
  .pf-stage { display:grid; grid-template-columns:1fr 470px 1fr; gap:24px; align-items:center; }

  .pf-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }

  .pf-card {
    display:flex; align-items:center; gap:14px;
    border:1px solid rgba(255,255,255,0.09); border-radius:16px; padding:22px 24px;
    background:rgba(255,255,255,0.025); backdrop-filter:blur(6px);
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .pf-card--left  { justify-content:flex-end; text-align:right; }
  .pf-card--right { justify-content:flex-start; text-align:left; }

  .pf-card:hover      { background:rgba(124,88,253,0.09); border-color:rgba(161,138,255,0.5); }
  .pf-card--left:hover  { transform:translateX(4px); }
  .pf-card--right:hover { transform:translateX(-4px); }

  .pf-card-text { font-size:16px; line-height:1.65; font-weight:300; color:rgba(255,255,255,0.72); margin:0; }
  .pf-card-text strong { font-weight:500; color:#fff; }

  .pf-dot {
    width:9px; height:9px; border-radius:50%; flex:none;
    background:var(--dot); box-shadow:0 0 12px var(--dot);
  }

  /* ---------- Globe ---------- */
  .pf-globe { position:relative; display:grid; place-items:center; }
  .pf-globe-stat {
    display:flex; align-items:baseline; gap:10px; white-space:nowrap;
    position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  }
  .pf-stat-num {
    font-size:clamp(36px,3.2vw,50px); font-weight:200; letter-spacing:-1.5px;
    background:linear-gradient(95deg,#fff,#B3A1FF);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .pf-stat-label { font-size:15px; font-weight:300; color:rgba(255,255,255,0.5); }

  @keyframes globeSpin  { to { transform:rotate(360deg) } }
  @keyframes globeDash  { to { stroke-dashoffset:-200 } }
  @keyframes globePulse { 0%,100% { opacity:0.35 } 50% { opacity:0.8 } }
  @keyframes ringGlow   { 0%,100% { opacity:0.5; transform:scale(1) } 50% { opacity:1; transform:scale(1.04) } }

  /* ---------- Industry chips ---------- */
  .pf-industries {
    list-style:none; margin:56px 0 0; padding:0;
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;
  }
  .pf-industries-label { font-size:14px; font-weight:500; letter-spacing:2.5px; color:rgba(255,255,255,0.4); margin-right:8px; }
  .pf-chip {
    font-size:15px; font-weight:400; padding:9px 20px; border-radius:999px;
    border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.7);
    transition:border-color .25s ease, color .25s ease;
  }
  .pf-chip:hover { border-color:rgba(161,138,255,0.5); color:#fff; }

  /* ---------- Tablet: globe on top, claims in two columns beneath ---------- */
  @media (max-width: 1100px) {
    .pf-section { padding:80px 32px; }
    .pf-stage {
      grid-template-columns:1fr 1fr;
      grid-template-areas:"globe globe" "left right";
      gap:20px 24px; align-items:start;
    }
    .pf-globe { grid-area:globe; max-width:420px; margin:0 auto 34px; width:100%; }
    .pf-list--left  { grid-area:left; }
    .pf-list--right { grid-area:right; }

    /* Mirrored alignment only makes sense flanking the globe. */
    .pf-card--left  { justify-content:flex-start; text-align:left; flex-direction:row-reverse; }
    .pf-card--left:hover { transform:translateX(-4px); }
  }

  /* ---------- Phone: one column ---------- */
  @media (max-width: 780px) {
    .pf-section { padding:56px 20px 64px; }
    .pf-title   { letter-spacing:-0.8px; }
    .pf-head    { margin-bottom:28px; }

    .pf-stage {
      grid-template-columns:1fr;
      grid-template-areas:"globe" "left" "right";
      gap:14px;
    }
    .pf-globe { max-width:300px; margin:0 auto 30px; }
    .pf-list  { gap:14px; }

    .pf-card       { padding:18px 18px; border-radius:14px; gap:12px; }
    .pf-card-text  { font-size:15px; line-height:1.6; }
    .pf-dot        { align-self:flex-start; margin-top:7px; }

    /* Dots read better leading every row once the mirror is gone. */
    .pf-card--left  { flex-direction:row-reverse; }
    .pf-card--right { flex-direction:row-reverse; }

    .pf-globe-stat  { position:static; transform:none; justify-content:center; margin-top:14px; flex-wrap:wrap; white-space:normal; }
    .pf-stat-label  { font-size:13.5px; }

    .pf-industries       { margin-top:36px; gap:9px; }
    .pf-industries-label { width:100%; text-align:center; margin:0 0 6px; font-size:13px; }
    .pf-chip             { font-size:13.5px; padding:8px 15px; }
  }

  /* Touch devices: no hover, so keep cards at rest. */
  @media (hover: none) {
    .pf-card:hover { background:rgba(255,255,255,0.025); border-color:rgba(255,255,255,0.09); transform:none; }
  }

  /* The globe is entirely CSS/SMIL animation — freeze it on request. */
  @media (prefers-reduced-motion: reduce) {
    .pf-globe svg * { animation:none !important; }
    .pf-card, .pf-chip { transition:none; }
  }
/* CTA */




  /* ---------- Shell ---------- */
  .cta-section { position:relative; z-index:1;  }

  .cta-card {
    position:relative; overflow:hidden; text-align:center;
    max-width:1240px; margin:0 auto;
    border:1px solid rgba(255,255,255,0.1); border-radius:32px;
    padding:96px 64px;
    background:linear-gradient(160deg,#0B0B0D 0%,#050506 100%);
    box-shadow:0 30px 80px rgba(0,0,0,0.3);
  }

  .cta-card[data-zoom-wrap] {
  max-width: none;   /* let the scroll animation control the width, not this cap */
  width: 62%;        /* starting/"calm" state before the user scrolls in */
}
@media (max-width: 991px) {
  .cta-card[data-zoom-wrap] { width: 100%; }  /* skip the squeeze on tablet/mobile — 62% reads as too cramped there */
}

/* Hero Zoom */
/* Banner zoom-on-scroll: starts as an inset rounded card, expands to full width
   as the page is first scrolled. Same width/border-radius mechanic as .cta-card. */
.banner[data-zoom-wrap] {
  --hero-gap: 4vw;                                  /* one value, all four sides */
  position: relative;
  width: calc(100% - (var(--hero-gap) * 2));
  height: calc(100vh - (var(--hero-gap) * 2));
  max-width: none;
  margin: var(--hero-gap) auto;
  border-radius: 28px;
  overflow: hidden;
}

@media (max-width: 991px) {
  .banner[data-zoom-wrap] {
    --hero-gap: 0px;
    height: auto;
    border-radius: 0;
  }
}
  /* Aurora blobs */
  .cta-aurora-a {
    position:absolute; width:700px; height:700px; left:50%; top:-420px; margin-left:-350px;
    border-radius:50%; background:radial-gradient(circle, rgba(124,88,253,0.32), transparent 62%);
    filter:blur(70px); pointer-events:none;
    animation:auroraC 18s ease-in-out infinite alternate;
  }
  .cta-aurora-b {
    position:absolute; width:500px; height:500px; right:-180px; bottom:-280px;
    border-radius:50%; background:radial-gradient(circle, rgba(56,189,248,0.2), transparent 62%);
    filter:blur(60px); pointer-events:none;
  }
  @keyframes auroraC { 0% { transform:translate(0,0) } 100% { transform:translate(60px,-70px) } }

  .cta-body { position:relative; display:flex; flex-direction:column; align-items:center; color:#fff; }

  .cta-eyebrow { font-size:14.5px; font-weight:500; letter-spacing:3px; color:#BCAAFF; margin-bottom:20px; }
  .cta-title   { font-size:clamp(46px,5vw,68px); font-weight:300; line-height:1.1; margin:0; letter-spacing:-2px; max-width:920px; }
  .cta-title em {
    font-style:normal; font-weight:500;
    background:linear-gradient(95deg,#A18AFF,#9D7BFF,#54D2FF);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .cta-lede { font-size:19px; line-height:1.75; font-weight:300; color:rgba(255,255,255,0.58); margin:24px auto 0; max-width:600px; }

  /* ---------- Buttons ---------- */
  .cta-actions { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:42px; flex-wrap:wrap; }

  .cta-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:11px;
    text-decoration:none; font-size:17.5px; padding:17px 34px; border-radius:999px;
    transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  }
  .cta-btn svg:not(.yt_Arrow) { height:auto; flex:none; }

  .cta-btn--primary { background:#fff; color:#000000; font-weight:500; border:1px solid transparent; }
  .cta-btn--primary svg:not(.yt_Arrow) { width:22px; }
  .cta-btn--primary:hover,
  .cta-btn--primary:focus-visible { transform:translateY(-2px); box-shadow:0 16px 40px rgba(255,255,255,0.18); color:#000000; }

  .cta-btn--ghost { color:#fff; font-weight:400; border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.04); }
  .cta-btn--ghost svg:not(.yt_Arrow) { width:15px; }
  .cta-btn--ghost:hover,
  .cta-btn--ghost:focus-visible { background:rgba(255,255,255,0.1); transform:translateY(-2px); color:#fff; }

  .cta-btn:focus-visible { outline:2px solid #A18AFF; outline-offset:3px; }

  /* ---------- Trust row ---------- */
  .cta-trust {
    list-style:none; margin:36px 0 0; padding:0;
    display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap;
    font-size:15px; font-weight:300; color:rgba(255,255,255,0.45);
  }
  .cta-trust-item { display:inline-flex; align-items:center; gap:7px; }
  .cta-check { color:#54D2FF; }

  /* ---------- Tablet ---------- */
  @media (max-width: 1100px) {
    .cta-section { padding:10px 32px 72px; }
    .cta-card    { padding:72px 40px; border-radius:28px; }
    .cta-lede    { font-size:18px; }
  }

  /* ---------- Phone ---------- */
  @media (max-width: 780px) {
    .cta-section { padding:10px 16px 56px; }
    .cta-card    { padding:52px 22px; border-radius:24px; box-shadow:0 18px 44px rgba(0,0,0,0.32); }

    .cta-eyebrow { font-size:13px; letter-spacing:2.4px; margin-bottom:14px; }
    .cta-title   { letter-spacing:-1px; }
    .cta-lede    { font-size:16.5px; line-height:1.65; margin-top:18px; }

    /* Side-by-side pills do not fit; stack them full width so both are
       equally tappable rather than letting the second wrap awkwardly. */
    .cta-actions { flex-direction:column; align-items:stretch; gap:12px; margin-top:32px; width:100%; }
    .cta-btn     { width:100%; font-size:16.5px; padding:16px 22px; }

    .cta-trust   { flex-direction:column; align-items:center; gap:12px; margin-top:28px; font-size:14.5px; }

    /* Blobs are sized for a 1240px card; shrink so they stay inside it. */
    .cta-aurora-a { width:420px; height:420px; margin-left:-210px; top:-260px; filter:blur(50px); }
    .cta-aurora-b { width:320px; height:320px; right:-120px; bottom:-180px; filter:blur(45px); }
  }

  /* Touch: no hover, so keep buttons at rest. */
  @media (hover: none) {
    .cta-btn--primary:hover { transform:none; box-shadow:none; }
    .cta-btn--ghost:hover   { transform:none; background:rgba(255,255,255,0.04); }
  }

  @media (prefers-reduced-motion: reduce) {
    .cta-aurora-a { animation:none; }
    .cta-btn { transition:none; }
  }

  /* CS */
   .cs_Swiper .swiper-slide        { filter:none; opacity:0.55; transform:none; }
    .cs_Swiper .swiper-slide-active { opacity:1; transform:none; }


    .overview_Infographic{
      background: url(../images/sap/overview_background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
    }
.overview,
.overview_Sec{
 
      padding: 3rem 0;
}
.overview_Sec p{
      font-size: 1.5rem;
    line-height: 1.7;
    color: #000;
    font-weight: 400;
}
.overview_Sec .common_Title{
   border-left: 2px solid var(--accent);
    padding-left: 10px;
}
.overview_Sec .card{
      box-shadow: 0 20px 45px -25px rgba(43,31,140,0.35);
          background: #fff;
    border: 1px solid #E4E3F4;
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
}
.overview_Sec .card h4{
     font-size: 1.5rem;
    color: #000;
    font-weight: 700;
}
.card_Image{
      flex: 0 0 56px;}
.card_Icon{
      flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #ECEBFB;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card_Icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--accent);
}
/* S Rail process Business AI */

  .rail-panel{
    width:100%;
    padding:64px clamp(24px,6vw,90px);
  }

  .rail-frame{
    max-width:1360px;
    margin:0 auto;
    background:#fff;
    border:1px solid var(--line);
    border-radius:28px;
    padding:clamp(36px,4vw,54px) clamp(24px,5vw,64px) 44px;
    box-shadow:0 40px 80px -48px rgba(43,31,140,0.28);
    position:relative;
    overflow:hidden;
  }

  .rail-frame::before{
    content:"";
    position:absolute;
    top:-120px; right:-120px;
    width:320px; height:320px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(75,52,214,0.10), transparent 70%);
    pointer-events:none;
  }

  .rail-kicker{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:44px;
    flex-wrap:wrap;
    gap:10px;
    position:relative;
  }

  .rail-kicker h2{
    font-weight:600;
    font-size:1.3rem;
    margin:0;
  }

  .rail-kicker span{
    font-size:0.9rem;
    color:var(--muted);
  }

  .rail-track-wrap{
    position:relative;
  }

  .rail-track-svg{
    position:absolute;
    top:33px;
    left:0;
    width:100%;
    height:6px;
    overflow:visible;
    z-index:0;
  }

  .rail-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:6px;
    position:relative;
    z-index:1;
  }

  .rail-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    flex:1 1 0;
    min-width:96px;
    cursor:default;
  }

  .rail-icon{
    width:68px;
    height:68px;
    border-radius:50%;
    background:#fff;
    border:1.5px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    box-shadow:0 14px 28px -16px rgba(43,31,140,0.35);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  }

  .rail-step:hover .rail-icon{
    transform:translateY(-6px);
    border-color:var(--accent);
    box-shadow:0 22px 36px -16px rgba(43,31,140,0.42);
  }

  .rail-icon.is-ai{
    width:80px;
    height:80px;
    background:linear-gradient(150deg,var(--accent),var(--accent-deep));
    border:none;
    box-shadow:0 18px 34px -14px rgba(46,31,140,0.55);
  }

  .rail-step:hover .rail-icon.is-ai{
    transform:translateY(-8px);
    box-shadow:0 26px 42px -14px rgba(46,31,140,0.6);
  }

  .rail-icon svg{
    width:26px;
    height:26px;
    stroke:var(--accent);
  }

  .rail-icon.is-ai span{
    font-weight:700;
    font-size:1.15rem;
    color:#fff;
  }

  .rail-tag{
    font-size:0.68rem;
    font-weight:600;
    letter-spacing:0.06em;
    color:var(--accent);
    opacity:0.7;
    margin-bottom:6px;
  }

  .rail-step label{
    font-weight:600;
    font-size:0.92rem;
    line-height:1.3;
    color: #000;
  }

  .rail-step.is-ai label{
    font-size:0.98rem;
  }

  @media (max-width:900px){
    .rail-track-svg{ display:none; }
    .rail-row{
      flex-wrap:wrap;
      row-gap:32px;
      justify-content:center;
    }
    .rail-step{
      min-width:110px;
      flex:0 0 28%;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .rail-step, .rail-icon{ transition:none !important; }
  }

  @media only screen and (max-width: 1600px) {
    main.mainContent {
        padding-top: 33px;
    }
}

/* CS  */

/* CS Sec */
.cs_Sec {
    padding: 3rem 0;
    background: #000;
}
.cs_Sec  .common_Title{
  margin-bottom: 2rem;
  color: #fff;
}
.cs_Content{padding-top: 1rem;}
.cs_Content .cs_Cat{     display: flex;}
.cs_Content .cs_Cat span{     border: 1px solid var(--accent);
    border-radius: 20px;
    margin-right: 15px;   color: var(--yt_Color_Dark); font-size: 0.9rem; padding: 0.3rem 1.2rem;
      background: #ffffff;}
.cs_Content .cs_Main_Title{        
  margin-top: 1rem;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 1.3;
    font-size: 2rem;}
.cs_Content .read_More{}
.cs_Content .read_More svg{ max-width: 20px;}
.cs_points {
           background: #fff;
    position: absolute;
    bottom: 39px;
    backdrop-filter: blur(20px);
    padding: 5px 11px;
    left: 40px;
    font-size: 1rem;
}
.cs_points  span{
  font-size: 2rem;
}
.client_logo img{
  max-width: 60px;
  height: auto;
}
.client_logo {
  margin-right: 10px;
      font-size: 0.8rem;
}
.cs_Swiper .swiper-slide {
  filter: blur(3px);
  opacity: 0.45;
  transition: filter 0.5s ease, opacity 0.5s ease;
}
.cs_Swiper .swiper-slide-active {
  filter: none;
  opacity: 1;
}


.cs_Swiper .swiper-slide {
  filter: blur(3px);
  opacity: 0.45;
  transform: scale(0.97);
  transform-origin: center center;
  transition: filter 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
  background: #fff;
    padding: 2rem;
    border-radius: 12px;
}

.cs_Swiper .swiper-slide-active {
  filter: none;
  opacity: 1;
  transform: scale(1);
}

/* A blurred slide is decorative, not readable — take its links out of the tab
   order visually and stop hover states firing on something the user can't read. */
.cs_Swiper .swiper-slide:not(.swiper-slide-active) {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cs_Swiper .swiper-slide {
    transition: none;
    transform: none;
  }
}


/* ---------------------------------------------------------------------------
   2. CASE STUDY CAROUSEL — badge anchoring

   .cs_points is position:absolute but .cs_Img had no positioned ancestor, so
   the client-logo badge was anchoring to a container much further up the tree.
   --------------------------------------------------------------------------- */

.cs_Img {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.cs_Img img {
  display: block;
  width: 100%;
  height: auto;
}


/* ---------------------------------------------------------------------------
   3. CASE STUDY CAROUSEL — arrow row

   .insights_Nav is display:flex already; this just gives it breathing room and
   right-aligns the pair under the carousel.
   --------------------------------------------------------------------------- */

.cs_Sec .cs_Nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 576px) {
  .cs_Sec .cs_Nav {
    justify-content: center;
  }
}

.cs_Swiper .row .col-sm-6:nth-child(1) {
    order: 2;
}

.banner[data-zoom-wrap] {
  position: relative;
  width: 92%;
  height: 92vh;      /* was 92% */
  max-width: none;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
}
@media (max-width: 991px) {
  .banner[data-zoom-wrap] {
    width: 100%;
    height: auto;    /* don't force viewport height on mobile */
    border-radius: 0;
  }
}
.sap.inner-page .overview, .overview_Sec, .infographics {
 background: transparent;
}
.overview_Sec  .card_Content p{
  margin-bottom: 0;
  font-size: 1.1rem;
  color: var(--para_Text_Dark);
}
.sap.inner-page .accelarator_Card .accel_Num_Row{
  display: none;
}
.sap.inner-page  .accelarator_Card{
 background: #000!important;
}
.sec_Head_Row{
  display: flex;
  align-items: center;
}
.sec_Head_Row p{
  font-size: 1.1rem;
  font-weight: 300;
  color: #000;
}


/* ============================================================
   2. SECTION STYLES  —  palette follows the SAP Business AI board
   ============================================================ */
:root{
  --ink:#0C1633;          /* headline navy */
  --ink-soft:#55608A;     /* body copy */
  --plate:#FFFFFF;
  --rule:#E4E7F4;
  --violet:#6C3CE9;       /* primary brand accent (CTA violet) */
  --blue:#23A9E8;         /* secondary accent */
  --draw:#2C3E86;         /* diagram structure lines */
  --draw-ghost:#AEB8DC;   /* the unseen / duplicated / obsolete */
  --signal:#6C3CE9;
  --shadow:0 2px 26px rgba(20,28,80,.07);
  --shadow-lift:0 14px 38px rgba(63,38,150,.14);
  --wash:linear-gradient(180deg,#FFFFFF 0%,#F5F4FE 100%);
  --glow-a:rgba(108,60,233,.11);
  --glow-b:rgba(35,169,232,.11);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EAEEFB;--ink-soft:#97A2C8;
    --plate:#101736;--rule:rgba(160,180,255,.16);
    --violet:#8B5CFF;--blue:#3FC1F0;
    --draw:#9DBEF5;--draw-ghost:#4D5C90;--signal:#9B7BFF;
    --shadow:0 2px 26px rgba(0,0,0,.35);
    --shadow-lift:0 16px 40px rgba(0,0,0,.5);
    --wash:linear-gradient(180deg,#070C24 0%,#0B1130 100%);
    --glow-a:rgba(124,77,255,.22);--glow-b:rgba(35,169,232,.16);
  }
}
:root[data-theme="dark"]{
  --ink:#EAEEFB;--ink-soft:#97A2C8;
  --plate:#101736;--rule:rgba(160,180,255,.16);
  --violet:#8B5CFF;--blue:#3FC1F0;
  --draw:#9DBEF5;--draw-ghost:#4D5C90;--signal:#9B7BFF;
  --shadow:0 2px 26px rgba(0,0,0,.35);
  --shadow-lift:0 16px 40px rgba(0,0,0,.5);
  --wash:linear-gradient(180deg,#070C24 0%,#0B1130 100%);
  --glow-a:rgba(124,77,255,.22);--glow-b:rgba(35,169,232,.16);
}



.sprawl{
  position:relative;overflow:hidden;
  padding:clamp(4.5rem,11vw,9rem) 0 clamp(4.5rem,10vw,8rem);
  background:
    radial-gradient(880px 520px at 10% -12%,var(--glow-a),transparent 62%),
    radial-gradient(760px 480px at 92% 4%,var(--glow-b),transparent 64%),
    var(--wash);
}
/* flowing line motif */
.sprawl__waves{position:absolute;inset:-6% -10% auto -10%;height:120%;pointer-events:none;opacity:.5}
.sprawl__waves svg{width:100%;height:100%}
.sprawl__waves .s0{stop-color:var(--violet);stop-opacity:0}
.sprawl__waves .s1{stop-color:var(--violet);stop-opacity:.55}
.sprawl__waves .s2{stop-color:var(--blue);stop-opacity:.45}
.sprawl__waves .s3{stop-color:var(--blue);stop-opacity:0}
.sprawl .container{position:relative}

/* ---- header ---- */
.sprawl__eyebrow{
  display:inline-block;margin:0 0 .95rem;
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);
}
.sprawl__title{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1.08;letter-spacing:-.02em;
  margin:0 0 clamp(1rem,2.2vw,1.5rem);max-width:25ch;
}
.sprawl__lead{
  font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.62;color:var(--ink-soft);
  max-width:54ch;margin:0 0 clamp(2.4rem,4.6vw,3.5rem);
}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.w > span{display:inline-block;will-change:transform}

/* ---- the four cards ---- */
.plate{
  height:100%;border:1px solid var(--rule);
  background:var(--plate);
  padding:clamp(1.5rem,2.5vw,2rem) clamp(1.4rem,2.2vw,1.85rem) clamp(1.7rem,2.8vw,2.1rem);
  display:flex;flex-direction:column;gap:1.35rem;position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.22,.7,.3,1),box-shadow .4s ease,border-color .4s ease;
}
/* gradient hairline across the top, brand violet → blue */
.plate::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--blue));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,.7,.3,1);
}
.plate__fig{display:block;width:100%;height:auto;max-width:224px}
.plate__fig .ln{fill:none;stroke:var(--draw);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s ease}
.plate__fig .ghost{stroke:var(--draw-ghost)}
.plate__fig .dot{fill:var(--draw);stroke:none}
.plate__fig .dot-ghost{fill:var(--draw-ghost);stroke:none;transition:fill .35s ease}
.plate__fig .mark{stroke:var(--signal);stroke-width:1.6}
.plate__body{margin-top:auto}
.plate__label{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:600;
  font-size:clamp(1.06rem,1.3vw,1.19rem);line-height:1.25;letter-spacing:-.008em;
  margin:0 0 .5rem;
}
.plate__text{margin:0;font-size:.965rem;line-height:1.58;color:var(--ink-soft);max-width:34ch}

/* hover surfaces what the diagram is about — the only hover motion */
@media (hover:hover){
  .plate:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:transparent}
  .plate:hover::before{transform:scaleX(1)}
  .plate:hover .plate__fig .ghost{stroke:var(--signal)}
  .plate:hover .plate__fig .dot-ghost{fill:var(--signal)}
}

@media (prefers-reduced-motion:reduce){
  .w > span{transform:none !important}
  .plate__fig *{stroke-dashoffset:0 !important;opacity:1 !important}
  .plate{transition:none}
}

/* ==========================================================================
   Append to sap.css
   1. Custom cursor (dot + trailing ring)
   2. .animated_Ico — starts at top of section, parks at bottom on scroll
   ========================================================================== */


/* ==========================================================================
   1. CUSTOM CURSOR
   The #cursorDot / #cursorRing divs and the GSAP quickTo script already exist
   in the page, but no rules were ever written for them — so they render as
   0×0, static, transparent divs. These rules give them size, fixed
   positioning and a stacking context.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

  .cursor-dot,
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;          /* never swallow clicks */
    z-index: 100000;               /* above header (9999) and modals */
    opacity: 0;                    /* hidden until the first mousemove */
    will-change: transform;
  }

  /* the ring transitions size/colour on hover — never transform,
     that belongs to GSAP's quickTo */
  .cursor-ring {
    transition: width .28s cubic-bezier(.4, 0, .2, 1),
                height .28s cubic-bezier(.4, 0, .2, 1),
                background-color .28s ease,
                border-color .28s ease;
  }

  .cursor-dot.is-ready,
  .cursor-ring.is-ready {
    opacity: 1;
  }

  .cursor-dot {
    width: 7px;
    height: 7px;
    background: var(--yt_Color, #5a00fa);
  }

  .cursor-ring {
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(90, 0, 250, .55);
  }

  /* over links, buttons, accordion headers */
  .cursor-ring.is-hover {
    width: 62px;
    height: 62px;
    background-color: rgba(90, 0, 250, .10);
    border-color: var(--yt_Color, #5a00fa);
  }

  /* mousedown */
  .cursor-ring.is-click {
    width: 26px;
    height: 26px;
    background-color: rgba(90, 0, 250, .18);
  }

  /* ---- Optional: hide the native arrow so only the custom cursor shows.
     Leave the text/pointer overrides in if you enable it. ----
  body { cursor: none; }
  a, button, input, textarea, select, [role="button"] { cursor: none; }
  */

  /* ---- Optional: makes the cursor readable on the dark hero AND on the
     white sections, instead of purple-on-purple. Swap in if you prefer. ----
  .cursor-dot  { background: #fff; mix-blend-mode: difference; }
  .cursor-ring { border-color: #fff; mix-blend-mode: difference; }
  */
}

@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-ring { display: none; }
}


/* ==========================================================================
   2. .animated_Ico — travelling section watermark
   The icon is absolutely positioned but the section was never a positioned
   ancestor, so it anchored to whatever container happened to be relative.
   Pin the section, start the icon at the top, and let GSAP move it down.
   ========================================================================== */

.inner_Services,
.bsf-scroll-slider {
  position: relative;
  background: var(--light_Blue);
}

.animated_Ico {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Beats .animated_Ico.bottom { bottom: 0 } — the icon now begins at the
   top of the section and GSAP translates it down to the bottom. */
.inner_Services > .animated_Ico.bottom {
  top: 0;
  bottom: auto;
  will-change: transform;
}

.inner_Services > .animated_Ico.left  { left: 0;      display: flex;
    align-items: end; bottom: 0;}
.inner_Services > .animated_Ico.right { right: 0; }

/* The existing .animated_Ico img rule sets opacity: .1, which is almost
   invisible on white. Raise it a little for this section.

   transform-origin is the important bit: the image scales up from its
   bottom-left corner, so the bottom edge stays pinned to the wrapper. That
   keeps the travel distance correct no matter how large it grows — it lands
   flush with the section's bottom instead of spilling past it. */
.inner_Services > .animated_Ico img {
  opacity: .14;
  width: 160px;
  height: auto;
  transform-origin: left bottom;
  will-change: transform, opacity;
}

@media (max-width: 991px) {
  .inner_Services > .animated_Ico img { width: 100px; }
}


/* ==========================================================================
   GLASS — .glass_Btn (pill) and .glass_Surface (panel / card / media box)

   .glass_Btn is a surface only. Keep the sizing class next to it
   (.btn, .yt_Btn or .cta-btn) and DROP the fill classes — .btn-primary,
   .btn-white, .cta-btn--ghost — or they paint over the glass.

     <a class="btn glass_Btn">…</a>
     <a class="btn glass_Btn glass_Btn--Dark">…</a>     smoked, for light art
     <a class="btn glass_Btn glass_Btn--Violet">…</a>   brand tint
     <div class="glass_Surface" style="--glass-radius:24px">…</div>

   Everything is a --glass-* variable, so a one-off is one declaration.
   Glass needs artwork behind it; over a flat fill it reads as a plain
   translucent pill.
   ========================================================================== */
.glass_Btn,
.glass_Surface {
  --glass-bg:           rgba(255, 255, 255, 0.07);
  --glass-bg-hover:     rgba(255, 255, 255, 0.14);
  --glass-blur:         19px;
  --glass-border:       rgba(255, 255, 255, 0.30);
  --glass-border-hover: rgba(255, 255, 255, 0.55);
  --glass-edge:         rgba(255, 255, 255, 0.80);
  --glass-glow:         rgba(255, 255, 255, 0.40);
  --glass-radius:       20px;

  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 8px 4px var(--glass-glow);
  overflow: hidden;
  transition: background .28s ease, border-color .28s ease,
              box-shadow .28s ease, transform .22s ease;
}

/* top edge catch */
.glass_Btn::before,
.glass_Surface::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-edge), transparent);
  pointer-events: none;
}

/* left edge catch */
.glass_Btn::after,
.glass_Surface::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, var(--glass-edge), transparent, rgba(255, 255, 255, 0.30));
  pointer-events: none;
}

/* keep label and arrow above both edge highlights */
.glass_Btn > *,
.glass_Surface > * { position: relative; z-index: 1; }

.glass_Btn {
  /* a 4px inner glow reads as a soft bevel on a tall card but swamps a
     56px pill, so pills run it lighter */
  --glass-glow: rgba(255, 255, 255, 0.22);
  --glass-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
}

.glass_Btn:hover,
.glass_Btn:focus-visible {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 10px 4px rgba(255, 255, 255, 0.30);
}
.glass_Btn:active { transform: translateY(0); }
.glass_Btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 3px; }

/* smoked — for light or busy photographic backgrounds */
.glass_Btn--Dark,
.glass_Surface--Dark {
  --glass-bg: rgba(12, 10, 24, 0.30);
  --glass-bg-hover: rgba(12, 10, 24, 0.46);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-border-hover: rgba(255, 255, 255, 0.42);
  --glass-edge: rgba(255, 255, 255, 0.55);
  --glass-glow: rgba(255, 255, 255, 0.10);
}

/* brand tint */
.glass_Btn--Violet,
.glass_Surface--Violet {
  --glass-bg: rgba(90, 0, 250, 0.22);
  --glass-bg-hover: rgba(90, 0, 250, 0.36);
  --glass-border: rgba(178, 158, 255, 0.45);
  --glass-border-hover: rgba(178, 158, 255, 0.85);
  --glass-edge: rgba(224, 212, 255, 0.85);
  --glass-glow: rgba(178, 158, 255, 0.22);
}

/* Firefox < 103 and older Safari ignore backdrop-filter; opaque-up so the
   label stays legible instead of sitting on near-transparent glass */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .glass_Btn, .glass_Surface { --glass-bg: rgba(255, 255, 255, 0.20); --glass-bg-hover: rgba(255, 255, 255, 0.32); }
  .glass_Btn--Dark, .glass_Surface--Dark { --glass-bg: rgba(12, 10, 24, 0.62); --glass-bg-hover: rgba(12, 10, 24, 0.78); }
  .glass_Btn--Violet, .glass_Surface--Violet { --glass-bg: rgba(64, 0, 178, 0.62); --glass-bg-hover: rgba(64, 0, 178, 0.78); }
}

.sap.inner-page .banner .container{
 padding-right: 0;
}
/*  */
.sap.inner-page .marquee-link{ 
  color: #000;
  font-size: 1.3rem; 
  letter-spacing: 1px;
  }
 .sap.inner-page .marquee-swiper   .swiper-slide{
      background:transparent;
    }
 .sap.inner-page .marquee-swiper{
      background: #e1daff;
      border-top: 0;
    border-bottom: 0;
}
 .sap.inner-page .marquee-star{
  font-size: 2rem;
  color: #5a00fa;
 }
 .bg_Dark_Img{
  background: url(../images/sap/ehs_BG_1.jpg);
  padding: 4rem 0 0 0;
      background-size: cover;
    background-repeat: no-repeat;
 }
 .sap-walkme .bg_Dark_Img{
    background: url(../images/sap/differentiator_BG.jpg);
        background-size: cover;
    background-repeat: no-repeat;
 }
  .sap-cloud-erp-private .bg_Dark_Img{
    background: url(../images/sap/warehouse_data.jpg);
        background-size: cover;
    background-repeat: no-repeat;
        background-position: bottom;
 }

.sap-rise-migration .bg_Dark_Img{
    background: url(../images/sap/why_YASH_BG_1.jpg);
        background-size: cover;
    background-repeat: no-repeat;
        background-position: center;
 }
  .sap-rise-migration .dark_Card{
   background: #000;
 }
 .sap-rise-migration ul.yt_Listing li{
  font-size: 1.05rem;
    margin-bottom: 1rem;
 }
 .dark_Card{
  background: #000;
      background: rgb(0 0 0 / 76%);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgb(0 0 0 / 39%);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    color: #fff;
        padding: 2rem;
 }
 .dark_Card .common_Title{
  font-size: 3rem;
  font-weight: 400;
 }
  .dark_Card p{
    color:var(--light-gray-text);
        font-size: 1.1rem;
        font-weight: 300;
        line-height: 1.7;
  }
  .moreInformation,
  .sub-top-fotter{
    display: none;
  }
  .commonBreadcrumb--gray .breadcrumb-item a{
    font-size: 1.1rem;
  }
  .sap_Home .bsf-tab{
   margin-bottom: 5px;
       padding: 1rem 0.5rem;
  }
.sap_Home  .bsf-tab__label h3{
        font-size: 1.15rem;
  }
/* Pillars are <a> links now (were <button>) — neutralise default link styling */
a.pillar,
a.pillar:hover,
a.pillar:focus,
a.pillar:visited {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.pillar * { text-decoration: none; }
.sap-business-ai .overview_Sec p,
.sap-signavio-services .overview_Sec p,
.sap-walkme .overview_Sec p,
.sap-rise-migration .overview_Sec p,
.sap-cloud-erp .overview_Sec p{
      font-size: 1.1rem;
}
.sap-business-ai .overview_Sec .card_Content p {
    margin-bottom: 0;
    font-size: 1rem;
    color: var(--para_Text_Dark);
}
.sap-walkme .inner_Services.bsf-scroll-slider{
 display: none;
}

    /* ==========================================================================
       SHARED TILE RECIPE — from the bento grids in the component file.
       Radii step down with depth: tile 28px → chip 999px.
       ========================================================================== */
    .bt {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      isolation: isolate;
      min-width: 0;
    }
    .bt h4 { font-size: clamp(1.1rem, 1.35vw, 1.4rem); font-weight: 600; letter-spacing: -0.3px; line-height: 1.25; margin: 0 0 8px; }
    .bt p { font-size: 0.95rem; line-height: 1.6; margin: 0; }

    /* ==========================================================================
       WHY YASH — Spotlight bento on the dark canvas.
       One pointer light catches every tile edge; the two figures count up once.
       ========================================================================== */
    .why_Sec {
      background: #000;
      padding: 110px 0;
      overflow: hidden;
    }
    .why_Sec .common_Title {
      color: #fff;
      max-width: 24ch;
      margin: 0 0 56px;
      text-wrap: balance;
    }

    .why_Grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(250px, auto));
      grid-template-areas:
        "labs labs msp   msp"
        "labs labs cert  trust";
      gap: 14px;
    }
    .why_Labs  { grid-area: labs; }
    .why_Msp   { grid-area: msp; }
    .why_Cert  { grid-area: cert; }
    .why_Trust { grid-area: trust; }

    .why_Grid .bt {
      --mx: -500px; --my: -500px;
      background: linear-gradient(160deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.015));
      border: 1px solid rgb(255 255 255 / 0.09);
      padding: 28px 30px;
      color: #fff;
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      display: flex; flex-direction: column; justify-content: flex-end;
    }
    /* Border light — a radial fill masked down to a 1px ring */
    .why_Grid .bt::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2;
      background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    /* Surface wash under the pointer */
    .why_Grid .bt::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    @media (hover: hover) {
      .why_Grid:hover .bt::before, .why_Grid:hover .bt::after { opacity: 1; }
    }
    .why_Grid .bt p { color: rgb(255 255 255 / 0.66); max-width: 44ch; }

    /* Figures */
    .why_Figure {
      display: block;
      font-weight: 200;
      line-height: 0.9;
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
      margin: 0 0 auto;
      padding-bottom: 28px;
    }
    .why_Figure sup { font-size: 0.5em; top: -0.72em; margin-left: 0.04em; font-weight: 300; }

    /* 900+ — the anchor tile. The figure is the one oversized element. */
    .why_Labs {
      background:
        radial-gradient(120% 90% at 100% 0%, rgb(var(--yt-600-rgb) / 0.38), transparent 60%),
        linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015)) !important;
      padding: 36px 40px !important;
    }
    .why_Labs .why_Figure {
      font-size: clamp(6rem, 7vw, 7.5rem);
      color: #fff; 
    }
    .why_Labs .why_Figure sup { color: var(--yt-400); }
    .why_Labs p {
      font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
      font-weight: 300;
      line-height: 1.55 !important;
      color: rgb(255 255 255 / 0.82) !important;
      max-width: 38ch !important;
    }

    /* Recognized Services Provider */
    .why_Msp h4 {
      font-size: clamp(1.4rem, 1.9vw, 1.9rem);
      font-weight: 400;
      letter-spacing: -0.6px;
      margin-bottom: 12px;
      max-width: 18ch;
    }

    /* 600+ — the brand-filled tile */
    .why_Cert {
      background: var(--yt-ramp-gradient) !important;
      border-color: transparent !important;
    }
    .why_Cert .why_Figure { font-size: clamp(3.4rem, 5vw, 5rem); color: #fff; }
    .why_Cert .why_Figure sup { color: var(--yt-300); }
    .why_Cert p { color: rgb(255 255 255 / 0.84) !important; }

    /* Trusted Partner */
    .why_Trust h4 { font-weight: 500; }
    .why_Trust p { font-size: 0.92rem !important; }

    @media (max-width: 1199px) {
      .why_Grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        grid-template-areas:
          "labs labs"
          "msp  msp"
          "cert trust";
      }
      .why_Labs { min-height: 420px; }
      .why_Grid .bt { min-height: 240px; }
    }
    @media (max-width: 576px) {
      .why_Sec { padding: 72px 0; }
      .why_Sec .common_Title { margin-bottom: 36px; }
      .why_Grid {
        grid-template-columns: 1fr;
        grid-template-areas: "labs" "msp" "cert" "trust";
      }
      .why_Labs { min-height: 360px; padding: 28px 26px !important; }
      .why_Grid .bt { padding: 26px 24px; min-height: 200px; }
    }


    /* ==========================================================================
       AMBIENT BACKGROUND — slow brand-ramp aurora, a dot field with a light
       that sweeps across it, and a faint horizon glow. Pure CSS, GPU-only
       properties (transform / opacity), and all of it stops for reduced motion.
       ========================================================================== */
    .why_Sec { position: relative; isolation: isolate; }
    .why_Sec > .container { position: relative; z-index: 1; }

    .why_Bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

    .why_Blob {
      position: absolute; border-radius: 50%;
      filter: blur(90px); opacity: 0.55; will-change: transform;
    }
    .why_Blob--a {
      width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
      top: -18%; right: -10%;
      background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
      animation: whyDriftA 26s ease-in-out infinite alternate;
    }
    .why_Blob--b {
      width: 38vw; height: 38vw; max-width: 600px; max-height: 600px;
      bottom: -22%; left: -12%;
      background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
      animation: whyDriftB 32s ease-in-out infinite alternate;
    }
    .why_Blob--c {
      width: 28vw; height: 28vw; max-width: 440px; max-height: 440px;
      top: 38%; left: 42%;
      background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
      animation: whyDriftC 38s ease-in-out infinite alternate;
    }
    @keyframes whyDriftA { to { transform: translate(-14vw, 18vh) scale(1.15); } }
    @keyframes whyDriftB { to { transform: translate(18vw, -14vh) scale(0.9); } }
    @keyframes whyDriftC { to { transform: translate(-22vw, -10vh) scale(1.25); } }

    /* Dot field, faded out toward the edges */
    .why_Dots {
      position: absolute; inset: 0;
      background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
      background-size: 28px 28px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
    }
    /* A brighter copy of the dots, revealed only inside a travelling band */
    .why_Dots--lit {
      background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
      -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
              mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
      -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
      animation: whySweep 9s linear infinite;
      opacity: 0.6;
    }
    @keyframes whySweep {
      from { -webkit-mask-position: 150% 0; mask-position: 150% 0; }
      to   { -webkit-mask-position: -50% 0; mask-position: -50% 0; }
    }

    /* Horizon line under the grid */
    .why_Horizon {
      position: absolute; left: 50%; bottom: 0; width: 120%; height: 1px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
      box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
      animation: whyBreathe 6s ease-in-out infinite;
    }
    @keyframes whyBreathe { 50% { opacity: 0.45; } }

    /* ==========================================================================
       TILE ELEMENTS
       ========================================================================== */
    /* 900+ — four lab nodes on a slow orbit, linked to a data core */
    .why_Orbit {
      position: absolute; top: 28px; right: 28px; z-index: -1;
      width: clamp(180px, 22vw, 300px); height: auto; overflow: visible;
    }
    .why_Orbit_Spin { transform-origin: 150px 150px; animation: whySpin 40s linear infinite; }
    .why_Orbit_Ring { fill: none; stroke: rgb(var(--yt-400-rgb) / 0.28); stroke-width: 1; stroke-dasharray: 3 7; }
    .why_Orbit_Ring--in { stroke: rgb(var(--yt-400-rgb) / 0.16); stroke-dasharray: none; }
    .why_Orbit_Link { stroke: rgb(var(--yt-400-rgb) / 0.35); stroke-width: 1; stroke-dasharray: 4 6; animation: whyFlow 2.4s linear infinite; }
    .why_Orbit_Node { fill: var(--yt-400); }
    .why_Orbit_Halo { fill: rgb(var(--yt-400-rgb) / 0.25); transform-box: fill-box; transform-origin: center; animation: whyPulse 3.2s ease-out infinite; }
    .why_Orbit_Halo:nth-of-type(2) { animation-delay: .8s; }
    .why_Orbit_Halo:nth-of-type(3) { animation-delay: 1.6s; }
    .why_Orbit_Halo:nth-of-type(4) { animation-delay: 2.4s; }
    .why_Orbit_Core { fill: #fff; }
    .why_Orbit_Core_Glow { fill: rgb(var(--yt-600-rgb) / 0.5); filter: blur(10px); }
    @keyframes whySpin  { to { transform: rotate(360deg); } }
    @keyframes whyFlow  { to { stroke-dashoffset: -20; } }
    @keyframes whyPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }

    /* Recognized Services Provider — a scan line that crosses the tile */
        .why_Scan {
      position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.12) 48%, rgb(var(--yt-400-rgb) / 0.35) 50%, transparent 52%);
      transform: translateX(-100%);
      animation: whyScan 7s cubic-bezier(.6,0,.4,1) infinite;
    }
    @keyframes whyScan { 0%, 15% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }

    /* 600+ — a ring of ticks, one per certification band, turning slowly */
    .why_Ticks {
      position: absolute; right: -60px; top: -60px; z-index: -1;
      width: 220px; height: 220px; opacity: 0.35;
      animation: whySpin 60s linear infinite reverse;
    }
    .why_Ticks line { stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }

    /* Trusted Partner — industries as a slowly filling constellation */
    .why_Net {
      position: absolute; right: 20px; top: 22px; z-index: -1;
      width: 120px; height: 80px; overflow: visible;
    }
    .why_Net line { stroke: rgb(var(--yt-400-rgb) / 0.3); stroke-width: 1; }
    .why_Net circle { fill: var(--yt-400); animation: whyTwinkle 4s ease-in-out infinite; }
    .why_Net circle:nth-child(odd)  { animation-delay: 1.3s; }
    .why_Net circle:nth-child(3n)   { animation-delay: 2.6s; }
    @keyframes whyTwinkle { 50% { opacity: 0.25; } }

    @media (max-width: 576px) {
      .why_Orbit { width: 150px; top: 20px; right: 16px; }
      .why_Blob { filter: blur(60px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .why_Bg *, .why_Grid svg, .why_Grid svg *, .why_Scan { animation: none !important; }
      .why_Dots--lit, .why_Scan { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    /* ==========================================================================
       PROVEN IMPACT — Spotlight bento on black
       ========================================================================== */
    .pi_Sec {
      position: relative; isolation: isolate;
      background: var(--black);
      padding: 110px 0;
      overflow: hidden;
    }
    .pi_Sec > .container { position: relative; z-index: 1; }

    .pi_Grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(3, minmax(250px, auto));
      grid-template-areas:
        "hero  hero  hire  hire"
        "hero  hero  dso   cycle"
        "value value cost  cost";
      gap: 14px;
    }
    .pi_Hero  { grid-area: hero; }
    .pi_Hire  { grid-area: hire; }
    .pi_Dso   { grid-area: dso; }
    .pi_Cycle { grid-area: cycle; }
    .pi_Value { grid-area: value; }
    .pi_Cost  { grid-area: cost; }

    .pi_Grid .bt {
      --mx: -500px; --my: -500px;
      background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
      border: 1px solid rgb(255 255 255 / 0.09);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      padding: 28px 30px;
      color: #fff;
      display: flex; flex-direction: column;
    }
    /* Border light — a radial fill masked down to a 1px ring */
    .pi_Grid .bt::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3;
      background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    /* Surface wash under the pointer */
    .pi_Grid .bt::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    @media (hover: hover) {
      .pi_Grid:hover .bt::before, .pi_Grid:hover .bt::after { opacity: 1; }
    }
    .pi_Grid .bt p { color: rgb(255 255 255 / 0.66); max-width: 40ch; }

    /* Top row of each stat tile: icon chip left, live visual right */
    .pi_Top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: auto; padding-bottom: 24px; }
    .pi_Icon {
      flex: none; width: 52px; height: 52px; border-radius: 999px;
      display: grid; place-items: center;
      background: rgb(var(--yt-600-rgb) / 0.18);
      border: 1px solid rgb(var(--yt-400-rgb) / 0.35);
      color: var(--yt-300);
    }
    .pi_Icon svg { width: 24px; height: 24px; }

    .pi_Figure {
      display: block;
      font-weight: 200;
      font-size: clamp(3rem, 4.4vw, 4.6rem);
      line-height: 0.95;
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
      margin: 0 0 12px;
      white-space: nowrap;
    }
    .pi_Figure sup { font-size: 0.48em; top: -0.8em; margin-left: 0.04em; font-weight: 300; color: var(--yt-400); }
    .pi_Figure small { font-size: 0.42em; font-weight: 300; letter-spacing: -0.01em; margin-left: 0.18em; color: var(--yt-400); }

    /* ---------- Hero: photo tile carrying the section title */
    .pi_Hero { padding: 0 !important; justify-content: flex-end; min-height: 520px; }
    .pi_Hero .bt_Img { animation: piKenBurns 24s ease-in-out infinite alternate; transform-origin: 60% 40%; }
    .pi_Hero_Shade {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(200deg, rgb(var(--yt-600-rgb) / 0.35) 0%, transparent 45%),
        linear-gradient(180deg, transparent 30%, rgb(0 0 0 / 0.88));
    }
    .pi_Hero_Body { padding: 36px 40px; position: absolute; z-index: 2; }
    .pi_Hero .common_Title { color: #fff; margin: 0; font-size: clamp(2.6rem, 5vw, 5.4rem); letter-spacing: -2px; line-height: 1; }
    .pi_Hero_Rule { display: block; height: 2px; width: 120px; margin-top: 22px; border-radius: 2px; background: rgb(255 255 255 / 0.18); overflow: hidden; position: relative; }
    .pi_Hero_Rule::after {
      content: ""; position: absolute; inset: 0; width: 40%;
      background: linear-gradient(90deg, transparent, var(--yt-400), transparent);
      animation: piSlide 2.8s ease-in-out infinite;
    }
    @keyframes piKenBurns { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-2%, -1%); } }
    @keyframes piSlide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

    /* ---------- 40-50%: requisition → on-board track */
    .pi_Track { flex: 1; max-width: 340px; padding-top: 8px; }
    .pi_Track_Bar { position: relative; height: 8px; border-radius: 999px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
    .pi_Track_Fill {
      position: absolute; inset: 0 auto 0 0; width: 50%; border-radius: inherit;
      background: linear-gradient(90deg, rgb(var(--yt-600-rgb) / 0.5) 0 80%, var(--yt-400) 80% 100%);
      transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
    }
    .pi_Track_Fill::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.6), transparent);
      width: 30%; animation: piShimmer 2.6s ease-in-out infinite;
    }
    @keyframes piShimmer { from { transform: translateX(-120%); } to { transform: translateX(380%); } }
    .pi_Track_Dots { position: relative; height: 22px; margin-top: 12px; }
    .pi_Track_Dots::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgb(var(--yt-400-rgb) / 0.3); }
    .pi_Track_Dots i {
      position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
      background: var(--yt-400); box-shadow: 0 0 10px rgb(var(--yt-400-rgb) / 0.9);
      animation: piTravel 4.2s linear infinite;
    }
    .pi_Track_Dots i:nth-child(2) { animation-delay: 1.4s; }
    .pi_Track_Dots i:nth-child(3) { animation-delay: 2.8s; }
    .pi_Track_Dots b {
      position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
      border: 1.5px solid var(--yt-400); background: var(--black);
    }
    .pi_Track_Dots b:first-of-type { left: 0; }
    .pi_Track_Dots b:last-of-type  { right: 0; background: var(--yt-400); }
    @keyframes piTravel { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

    /* ---------- 2 Days: a week strip with the two days taken out */
    .pi_Dso { background: var(--yt-ramp-gradient) !important; border-color: transparent !important; }
    .pi_Dso .pi_Icon { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.3); color: #fff; }
    .pi_Dso .pi_Figure small { color: var(--yt-300); }
    .pi_Dso p { color: rgb(255 255 255 / 0.84) !important; }
    .pi_Week { display: flex; gap: 4px; padding-top: 6px; }
    .pi_Week i { width: 12px; height: 26px; border-radius: 4px; background: rgb(255 255 255 / 0.55); }
    .pi_Week i.is_Cut {
      background: transparent; border: 1px dashed rgb(255 255 255 / 0.7);
      animation: piBlink 2.4s ease-in-out infinite;
    }
    .pi_Week i.is_Cut + i.is_Cut { animation-delay: .3s; }
    @keyframes piBlink { 50% { opacity: 0.25; transform: translateY(-3px); } }

    /* ---------- 20%: ring gauge */
    .pi_Gauge { width: 64px; height: 64px; transform: rotate(-90deg); }
    .pi_Gauge circle { fill: none; stroke-width: 5; }
    .pi_Gauge_Track { stroke: rgb(255 255 255 / 0.1); }
    .pi_Gauge_Arc {
      stroke: var(--yt-400); stroke-linecap: round;
      stroke-dasharray: 163.36; stroke-dashoffset: 130.69; /* 20% of 2πr, r = 26 */
      transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .2s;
    }
    .pi_Gauge_Orbit { transform-origin: 32px 32px; animation: piSpin 6s linear infinite; }
    .pi_Gauge_Orbit circle { fill: #fff; stroke: none; }
    @keyframes piSpin { to { transform: rotate(360deg); } }

    /* ---------- 25%: rising line */
    .pi_Spark { width: min(260px, 55%); height: auto; overflow: visible; }
    .pi_Spark_Line {
      fill: none; stroke: var(--yt-400); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
      stroke-dasharray: 320; stroke-dashoffset: 0;
      transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .2s;
    }
    .pi_Spark_Area { fill: url(#piSparkFill); transition: opacity 1s ease .9s; }
    .pi_Spark_End { fill: #fff; }
    .pi_Spark_Halo { fill: rgb(var(--yt-400-rgb) / 0.35); transform-box: fill-box; transform-origin: center; animation: piPulse 2.4s ease-out infinite; }
    @keyframes piPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }

    /* ---------- 15%: cost bars, the last one trimmed */
    .pi_Bars { display: flex; align-items: flex-end; gap: 8px; height: 72px; }
    .pi_Bars i {
      width: 16px; border-radius: 6px 6px 3px 3px; background: rgb(255 255 255 / 0.16);
      transform-origin: bottom; transition: transform 1s cubic-bezier(.2,.7,.2,1);
    }
    .pi_Bars i:nth-child(1) { height: 100%; }
    .pi_Bars i:nth-child(2) { height: 96%; transition-delay: .08s; }
    .pi_Bars i:nth-child(3) { height: 92%; transition-delay: .16s; }
    .pi_Bars i:nth-child(4) { height: 89%; transition-delay: .24s; }
    .pi_Bars i:nth-child(5) { height: 85%; transition-delay: .32s; background: var(--yt-400); position: relative; }
    .pi_Bars i:nth-child(5)::before {
      content: ""; position: absolute; left: -3px; right: -3px; bottom: 100%; height: 17.6%;
      border: 1px dashed rgb(var(--yt-400-rgb) / 0.8); border-bottom: 0; border-radius: 6px 6px 0 0;
      animation: piBreathe 2.4s ease-in-out infinite;
    }
    @keyframes piBreathe { 50% { opacity: 0.3; } }

    /* ---------- Reveal: JS adds .pi_Anim (start state), then .is_In.
       Without JS the visuals simply show their final state. */
    .pi_Anim .pi_Track_Fill { transform: scaleX(0); }
    .pi_Anim .pi_Gauge_Arc  { stroke-dashoffset: 163.36; }
    .pi_Anim .pi_Spark_Line { stroke-dashoffset: 320; }
    .pi_Anim .pi_Spark_Area { opacity: 0; }
    .pi_Anim .pi_Bars i     { transform: scaleY(0); }
    .pi_Anim.is_In .pi_Track_Fill { transform: none; }
    .pi_Anim.is_In .pi_Gauge_Arc  { stroke-dashoffset: 130.69; }
    .pi_Anim.is_In .pi_Spark_Line { stroke-dashoffset: 0; }
    .pi_Anim.is_In .pi_Spark_Area { opacity: 1; }
    .pi_Anim.is_In .pi_Bars i     { transform: none; }

    /* ==========================================================================
       AMBIENT BACKGROUND — same recipe as the Why YASH section
       ========================================================================== */
    .pi_Bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .pi_Blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; }
    .pi_Blob--a {
      width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; top: -20%; left: -12%;
      background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
      animation: piDriftA 28s ease-in-out infinite alternate;
    }
    .pi_Blob--b {
      width: 38vw; height: 38vw; max-width: 600px; max-height: 600px; bottom: -22%; right: -10%;
      background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
      animation: piDriftB 34s ease-in-out infinite alternate;
    }
    .pi_Blob--c {
      width: 28vw; height: 28vw; max-width: 440px; max-height: 440px; top: 40%; left: 50%;
      background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
      animation: piDriftC 40s ease-in-out infinite alternate;
    }
    @keyframes piDriftA { to { transform: translate(16vw, 20vh) scale(1.15); } }
    @keyframes piDriftB { to { transform: translate(-18vw, -14vh) scale(0.9); } }
    @keyframes piDriftC { to { transform: translate(-24vw, -12vh) scale(1.25); } }

    .pi_Dots {
      position: absolute; inset: 0;
      background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
      background-size: 28px 28px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
    }
    .pi_Dots--lit {
      background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
      -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
              mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
      -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
      animation: piSweep 9s linear infinite; opacity: 0.6;
    }
    @keyframes piSweep {
      from { -webkit-mask-position: 150% 0; mask-position: 150% 0; }
      to   { -webkit-mask-position: -50% 0; mask-position: -50% 0; }
    }
    .pi_Horizon {
      position: absolute; left: 50%; bottom: 0; width: 120%; height: 1px; transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
      box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
      animation: piFade 6s ease-in-out infinite;
    }
    @keyframes piFade { 50% { opacity: 0.45; } }

    /* ==========================================================================
       RESPONSIVE
       ========================================================================== */
    @media (max-width: 1199px) {
      .pi_Grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        grid-template-areas:
          "hero  hero"
          "hire  hire"
          "dso   cycle"
          "value value"
          "cost  cost";
      }
      .pi_Grid .pi_Hero { min-height: 420px; }
      .pi_Grid .bt { min-height: 240px; }
    }
    @media (max-width: 576px) {
      .pi_Sec { padding: 72px 0; }
      .pi_Grid {
        grid-template-columns: 1fr;
        grid-template-areas: "hero" "hire" "dso" "cycle" "value" "cost";
      }
      .pi_Grid .pi_Hero { min-height: 340px; }
      .pi_Hero_Body { padding: 26px 24px; }
      .pi_Grid .bt { padding: 26px 24px; min-height: 220px; }
      .pi_Blob { filter: blur(60px); }
      .pi_Track { max-width: 60%; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      .pi_Dots--lit { display: none; }
    }

    /* ==========================================================================
       ARCHITECTURE DATA — Spotlight bento on black
       ========================================================================== */
    .ea_Sec {
      position: relative; isolation: isolate;
      background: var(--black);
      padding: 110px 0;
      overflow: hidden;
    }
    .ea_Sec > .container { position: relative; z-index: 1; }
    .ea_Sec .common_Title {
      color: #fff;
      max-width: 34ch;
      margin: 0 0 56px;
      text-wrap: balance;
    }

    .ea_Grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(250px, auto)) auto;
      grid-template-areas:
        "body body cons cert"
        "body body eng  tech"
        "out  out  out  out";
      gap: 14px;
    }
    .ea_Body   { grid-area: body; }
    .ea_Cons   { grid-area: cons; }
    .ea_Cert   { grid-area: cert; }
    .ea_Out    { grid-area: out; }
    .ea_Eng    { grid-area: eng; }
    .ea_Tech   { grid-area: tech; }

    .ea_Grid .bt {
      --mx: -500px; --my: -500px;
      background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
      border: 1px solid rgb(255 255 255 / 0.09);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      padding: 28px 30px;
      color: #fff;
      display: flex; flex-direction: column;
    }
    .ea_Grid .bt::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3;
      background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    .ea_Grid .bt::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    @media (hover: hover) {
      .ea_Grid:hover .bt::before, .ea_Grid:hover .bt::after { opacity: 1; }
    }
    .ea_Grid .bt p { color: rgb(255 255 255 / 0.68); }

    /* ---------- Body copy tile: photo on top, narrative below */
    .ea_Body { padding: 14px 14px 32px !important; }
    .ea_Photo {
      position: relative; height: 220px; border-radius: 18px; overflow: hidden;
      margin-bottom: 28px; isolation: isolate; background: var(--yt-950);
    }
    .ea_Photo img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
      animation: eaKenBurns 24s ease-in-out infinite alternate; transform-origin: 40% 50%;
    }
    .ea_Photo::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background:
        linear-gradient(200deg, rgb(var(--yt-600-rgb) / 0.4), transparent 55%),
        linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.55));
    }
    /* A LeanIX-style fact-sheet grid scanning across the photo */
    .ea_Photo_Scan {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgb(var(--yt-300-rgb) / 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgb(var(--yt-300-rgb) / 0.18) 1px, transparent 1px);
      background-size: 32px 32px;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 55%, transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 55%, transparent 100%);
      -webkit-mask-size: 45% 100%; mask-size: 45% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      animation: eaScan 6s cubic-bezier(.6,0,.4,1) infinite;
    }
    @keyframes eaScan {
      0%   { -webkit-mask-position: -80% 0; mask-position: -80% 0; }
      100% { -webkit-mask-position: 180% 0; mask-position: 180% 0; }
    }
    @keyframes eaKenBurns { from { transform: scale(1.02); } to { transform: scale(1.14) translate(2%, -1%); } }
    .ea_Body p {
      padding: 0 18px;
      font-size: clamp(1rem, 1.05vw, 1.08rem) !important;
      line-height: 1.75 !important;
      color: rgb(255 255 255 / 0.74) !important;
      max-width: 62ch;
    }

    /* ---------- Outcome: brand tile over a live dependency graph */
    .ea_Out {
      background: var(--yt-ramp-gradient) !important;
      border-color: transparent !important;
      justify-content: flex-end;
      padding: 34px 36px !important;
    }
    .ea_Out p {
      position: relative;
      font-size: clamp(1.25rem, 1.75vw, 1.75rem) !important;
      font-weight: 300;
      line-height: 1.4 !important;
      letter-spacing: -0.3px;
      color: #fff !important;
      max-width: 46ch;
    }
    .ea_Out { min-height: 260px; }
    .ea_Graph { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.55; }
    .ea_Graph line { stroke: rgb(255 255 255 / 0.35); stroke-width: 1; stroke-dasharray: 3 6; animation: eaFlow 2.2s linear infinite; }
    .ea_Graph circle { fill: #fff; }
    .ea_Graph circle.is_Hub { fill: var(--yt-300); }
    .ea_Graph .ea_Ping { fill: rgb(255 255 255 / 0.35); transform-box: fill-box; transform-origin: center; animation: eaPulse 3s ease-out infinite; }
    .ea_Graph .ea_Ping:nth-of-type(2) { animation-delay: 1s; }
    .ea_Graph .ea_Ping:nth-of-type(3) { animation-delay: 2s; }
    @keyframes eaFlow  { to { stroke-dashoffset: -18; } }
    @keyframes eaPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
    .ea_Out .ea_Icon { position: relative; margin-bottom: auto; background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.3); color: #fff; }

    /* ---------- Stat tiles */
    .ea_Stat { justify-content: space-between; container-type: inline-size; }
    .ea_Stat_Top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
    .ea_Icon {
      flex: none; width: 52px; height: 52px; border-radius: 999px;
      display: grid; place-items: center; position: relative;
      background: rgb(var(--yt-600-rgb) / 0.18);
      border: 1px solid rgb(var(--yt-400-rgb) / 0.35);
      color: var(--yt-300);
    }
    .ea_Icon svg { width: 24px; height: 24px; }
    .ea_Figure {
      display: block;
      font-weight: 200;
      font-size: clamp(2.6rem, 26cqi, 4.4rem);
      line-height: 0.95;
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
      margin: 0 0 10px;
      white-space: nowrap;
    }
    .ea_Figure--long { font-size: clamp(2rem, 17cqi, 3.4rem); }
    .ea_Figure sup { font-size: 0.5em; top: -0.72em; margin-left: 0.04em; font-weight: 300; color: var(--yt-400); }

    /* 15+ consultants — avatar stack that breathes in */
    .ea_Avatars { display: flex; }
    .ea_Avatars i {
      width: 26px; height: 26px; border-radius: 50%; margin-left: -8px;
      border: 2px solid #0b0716;
      background: linear-gradient(160deg, var(--yt-400), var(--yt-700));
      animation: eaRise 3.6s ease-in-out infinite;
    }
    .ea_Avatars i:nth-child(2) { animation-delay: .25s; background: linear-gradient(160deg, var(--yt-300), var(--yt-600)); }
    .ea_Avatars i:nth-child(3) { animation-delay: .5s;  background: linear-gradient(160deg, var(--yt-500), var(--yt-800)); }
    .ea_Avatars i:nth-child(4) {
      animation-delay: .75s; background: rgb(255 255 255 / 0.08);
      display: grid; place-items: center; font-style: normal; font-size: 0.7rem; color: var(--yt-300);
    }
    @keyframes eaRise { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }

    /* 23+ certifications — rotating seal ring around the icon */
    .ea_Seal::after {
      content: ""; position: absolute; inset: -7px; border-radius: 50%;
      background: conic-gradient(from 0deg, transparent 0 70%, var(--yt-400) 85%, transparent 100%);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
              mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
      animation: eaSpin 3.5s linear infinite;
    }
    .ea_Badges { display: flex; gap: 5px; }
    .ea_Badges i {
      width: 18px; height: 22px; background: rgb(var(--yt-400-rgb) / 0.25);
      clip-path: polygon(50% 0, 100% 22%, 100% 70%, 50% 100%, 0 70%, 0 22%);
      animation: eaGlint 3s ease-in-out infinite;
    }
    .ea_Badges i:nth-child(2) { animation-delay: .4s; }
    .ea_Badges i:nth-child(3) { animation-delay: .8s; }
    @keyframes eaGlint { 0%, 70%, 100% { background: rgb(var(--yt-400-rgb) / 0.25); } 35% { background: var(--yt-400); } }
    @keyframes eaSpin { to { transform: rotate(360deg); } }

    /* 200+ engagements globally — spinning wireframe globe */
    .ea_Globe { width: 58px; height: 58px; }
    .ea_Globe ellipse, .ea_Globe circle.ea_Globe_Rim, .ea_Globe path { fill: none; stroke: rgb(var(--yt-400-rgb) / 0.55); stroke-width: 1; }
    .ea_Globe .ea_Meridian { transform-origin: 29px 29px; animation: eaMeridian 4s linear infinite; }
    .ea_Globe .ea_Meridian:nth-of-type(2) { animation-delay: -2s; }
    .ea_Globe .ea_Pin { fill: var(--yt-300); animation: eaBlinkDot 2.4s ease-in-out infinite; }
    .ea_Globe .ea_Pin:nth-of-type(2) { animation-delay: .8s; }
    .ea_Globe .ea_Pin:nth-of-type(3) { animation-delay: 1.6s; }
    @keyframes eaMeridian { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.05); } 100% { transform: scaleX(1); } }
    @keyframes eaBlinkDot { 50% { opacity: 0.2; } }

    /* 262,000+ technologies — lifecycle strip with a moving "now" marker */
    .ea_Life { position: relative; width: 110px; height: 10px; display: flex; gap: 3px; }
    .ea_Life i { flex: 1; border-radius: 3px; }
    .ea_Life i:nth-child(1) { background: rgb(var(--yt-400-rgb) / 0.35); }
    .ea_Life i:nth-child(2) { background: var(--yt-400); }
    .ea_Life i:nth-child(3) { background: var(--yt-500); }
    .ea_Life i:nth-child(4) { background: rgb(255 255 255 / 0.12); border: 1px dashed rgb(var(--yt-400-rgb) / 0.6); }
    .ea_Life::after {
      content: ""; position: absolute; top: -6px; bottom: -6px; width: 2px; border-radius: 2px;
      background: #fff; box-shadow: 0 0 10px #fff;
      animation: eaNow 5s ease-in-out infinite alternate;
    }
    @keyframes eaNow { from { left: 0; } to { left: calc(100% - 2px); } }

    /* ==========================================================================
       AMBIENT BACKGROUND — same recipe as the other sections
       ========================================================================== */
    .ea_Bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .ea_Blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; }
    .ea_Blob--a {
      width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; top: -16%; right: -12%;
      background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
      animation: eaDriftA 28s ease-in-out infinite alternate;
    }
    .ea_Blob--b {
      width: 38vw; height: 38vw; max-width: 600px; max-height: 600px; bottom: -20%; left: -10%;
      background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
      animation: eaDriftB 34s ease-in-out infinite alternate;
    }
    .ea_Blob--c {
      width: 28vw; height: 28vw; max-width: 440px; max-height: 440px; top: 44%; left: 40%;
      background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
      animation: eaDriftC 40s ease-in-out infinite alternate;
    }
    @keyframes eaDriftA { to { transform: translate(-16vw, 20vh) scale(1.15); } }
    @keyframes eaDriftB { to { transform: translate(18vw, -14vh) scale(0.9); } }
    @keyframes eaDriftC { to { transform: translate(-20vw, -12vh) scale(1.25); } }
    .ea_Dots {
      position: absolute; inset: 0;
      background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
      background-size: 28px 28px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
    }
    .ea_Dots--lit {
      background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
      -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
              mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
      -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
      animation: eaDotSweep 9s linear infinite; opacity: 0.6;
    }
    @keyframes eaDotSweep {
      from { -webkit-mask-position: 150% 0; mask-position: 150% 0; }
      to   { -webkit-mask-position: -50% 0; mask-position: -50% 0; }
    }
    .ea_Horizon {
      position: absolute; left: 50%; bottom: 0; width: 120%; height: 1px; transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
      box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
      animation: eaFade 6s ease-in-out infinite;
    }
    @keyframes eaFade { 50% { opacity: 0.45; } }

    /* ==========================================================================
       RESPONSIVE
       ========================================================================== */
    @media (max-width: 1199px) {
      .ea_Grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        grid-template-areas:
          "body body"
          "cons cert"
          "eng  tech"
          "out  out";
      }
      .ea_Grid .ea_Stat { min-height: 220px; }
      .ea_Grid .ea_Out { min-height: 300px; }
    }
    @media (max-width: 576px) {
      .ea_Sec { padding: 72px 0; }
      .ea_Sec .common_Title { margin-bottom: 36px; }
      .ea_Grid {
        grid-template-columns: 1fr;
        grid-template-areas: "body" "cons" "cert" "eng" "tech" "out";
      }
      .ea_Grid .bt { padding: 26px 24px; }
      .ea_Body { padding: 10px 10px 26px !important; }
      .ea_Body p { padding: 0 14px; }
      .ea_Photo { height: 180px; }
      .ea_Grid .ea_Stat { min-height: 200px; }
      .ea_Blob { filter: blur(60px); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      .ea_Dots--lit, .ea_Photo_Scan { display: none; }
    }

    .sap-leanix .infographics_PostAdhoc{
          padding: 4rem 0 0;
    }
    .sap-leanix .infographics_PostAdhoc .marquee-swiper{
          margin-top: 2rem;
    }

    /* ==========================================================================
       WALKME PARTNER — Spotlight bento on black
       ========================================================================== */
    .wm_Sec {
      position: relative; isolation: isolate;
      background: var(--black);
      padding: 110px 0;
      overflow: hidden;
    }
    .wm_Sec > .container { position: relative; z-index: 1; }
    .wm_Sec .common_Title {
      color: #fff;
      max-width: 30ch;
      margin: 0 0 56px;
      text-wrap: balance;
    }

    .wm_Grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: auto minmax(240px, auto) minmax(250px, auto) auto;
      grid-template-areas:
        "intro intro ui    ui"
        "s30   s20   ui    ui"
        "fric  fric  track track"
        "cta   cta   cta   cta";
      gap: 14px;
    }
    .wm_Intro { grid-area: intro; }
    .wm_Ui    { grid-area: ui; }
    .wm_S30   { grid-area: s30; }
    .wm_S20   { grid-area: s20; }
    .wm_Fric  { grid-area: fric; }
    .wm_Track { grid-area: track; }
    .wm_Cta   { grid-area: cta; }

    .wm_Grid .bt {
      --mx: -500px; --my: -500px;
      background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
      border: 1px solid rgb(255 255 255 / 0.09);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      padding: 28px 30px;
      color: #fff;
      display: flex; flex-direction: column;
    }
    .wm_Grid .bt::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3;
      background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    .wm_Grid .bt::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    @media (hover: hover) {
      .wm_Grid:hover .bt::before, .wm_Grid:hover .bt::after { opacity: 1; }
    }
    .wm_Grid .bt p { color: rgb(255 255 255 / 0.68); }

    .wm_Icon {
      flex: none; width: 52px; height: 52px; border-radius: 999px;
      display: grid; place-items: center; position: relative;
      background: rgb(var(--yt-600-rgb) / 0.18);
      border: 1px solid rgb(var(--yt-400-rgb) / 0.35);
      color: var(--yt-300);
    }
    .wm_Icon svg { width: 24px; height: 24px; }
    .wm_Icon--sm { width: 40px; height: 40px; }
    .wm_Icon--sm svg { width: 19px; height: 19px; }

    /* ---------- Intro */
    .wm_Intro { justify-content: center; padding: 34px 36px !important; }
    .wm_Intro p {
      font-size: clamp(1.1rem, 1.35vw, 1.35rem) !important;
      font-weight: 300;
      line-height: 1.6 !important;
      color: rgb(255 255 255 / 0.84) !important;
      max-width: 52ch;
    }
    .wm_Intro_Mark {
      display: block; width: 44px; height: 3px; border-radius: 3px; margin-bottom: 22px;
      background: linear-gradient(90deg, var(--yt-600), var(--yt-400));
    }

    /* ---------- SAP screen with a WalkMe guide walking through it */
    .wm_Ui { padding: 22px !important; background:
      radial-gradient(90% 70% at 100% 0%, rgb(var(--yt-600-rgb) / 0.3), transparent 60%),
      linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015)) !important; }
    .wm_Screen {
      position: relative; flex: 1; min-height: 360px;
      border-radius: 18px; overflow: hidden;
      background: #0c0817;
      border: 1px solid rgb(255 255 255 / 0.08);
      box-shadow: 0 30px 60px -30px rgb(var(--yt-600-rgb) / 0.6);
      display: flex; flex-direction: column;
    }
    .wm_Chrome { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid rgb(255 255 255 / 0.06); flex: none; }
    .wm_Chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 0.16); }
    .wm_Chrome b { flex: 1; max-width: 220px; height: 14px; margin-left: 12px; border-radius: 999px; background: rgb(255 255 255 / 0.06); }
    .wm_App { flex: 1; display: grid; grid-template-columns: 56px 1fr; min-height: 0; }
    .wm_Side { border-right: 1px solid rgb(255 255 255 / 0.06); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
    .wm_Side i { width: 22px; height: 22px; border-radius: 7px; background: rgb(255 255 255 / 0.07); }
    .wm_Side i:first-child { background: rgb(var(--yt-600-rgb) / 0.6); }
    .wm_Main { padding: 22px 24px; position: relative; }
    .wm_Head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
    .wm_Head i { height: 12px; border-radius: 999px; background: rgb(255 255 255 / 0.2); width: 38%; }
    .wm_Head b { height: 12px; border-radius: 999px; background: rgb(255 255 255 / 0.07); width: 18%; }

    .wm_Form { position: relative; }
    .wm_Row { display: flex; align-items: center; gap: 12px; height: 48px; }
    .wm_Row i { width: 24%; height: 8px; border-radius: 999px; background: rgb(255 255 255 / 0.12); flex: none; }
    .wm_Row b { flex: 1; height: 32px; border-radius: 8px; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.08); }

    /* Highlight ring + balloon + cursor move through fields 1 → 2 → 3 */
    .wm_Ring, .wm_Balloon, .wm_Cursor { position: absolute; animation: wmStep 9s cubic-bezier(.6,0,.3,1) infinite; }
    .wm_Ring {
      top: 6px; left: calc(24% + 12px); right: 0; height: 36px; border-radius: 10px;
      border: 1.5px solid var(--yt-400);
      box-shadow: 0 0 0 4px rgb(var(--yt-600-rgb) / 0.25), 0 0 24px rgb(var(--yt-600-rgb) / 0.55);
    }
    .wm_Balloon {
      top: 50px; left: calc(24% + 12px); width: min(210px, 70%);
      padding: 12px 14px; border-radius: 12px;
      background: #fff; box-shadow: 0 16px 30px -10px rgb(0 0 0 / 0.6);
      animation-name: wmStep, wmFade; z-index: 2;
    }
    .wm_Balloon::before {
      content: ""; position: absolute; top: -6px; left: 22px; width: 12px; height: 12px;
      background: #fff; transform: rotate(45deg); border-radius: 2px;
    }
    .wm_Balloon i { display: block; height: 7px; border-radius: 999px; background: var(--yt-200); margin-bottom: 7px; }
    .wm_Balloon i:nth-child(2) { width: 70%; }
    .wm_Balloon span { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
    .wm_Balloon span em { display: flex; gap: 4px; }
    .wm_Balloon span em u { width: 6px; height: 6px; border-radius: 50%; background: var(--yt-200); }
    .wm_Balloon span em u:nth-child(1) { animation: wmDot1 9s steps(1) infinite; }
    .wm_Balloon span em u:nth-child(2) { animation: wmDot2 9s steps(1) infinite; }
    .wm_Balloon span em u:nth-child(3) { animation: wmDot3 9s steps(1) infinite; }
    .wm_Balloon span b { width: 44px; height: 18px; border-radius: 999px; background: var(--yt-600); }
    .wm_Cursor {
      top: 20px; right: 18%; width: 18px; height: 18px; z-index: 3;
      animation-name: wmStep, wmClick;
    }
    @keyframes wmStep {
      0%, 28%   { transform: translateY(0); }
      33%, 61%  { transform: translateY(48px); }
      66%, 94%  { transform: translateY(96px); }
      100%      { transform: translateY(0); }
    }
    @keyframes wmFade {
      0%, 3% { opacity: 0; } 7%, 27% { opacity: 1; } 31%, 36% { opacity: 0; }
      40%, 60% { opacity: 1; } 64%, 69% { opacity: 0; } 73%, 93% { opacity: 1; } 97%, 100% { opacity: 0; }
    }
    @keyframes wmClick {
      0%, 14% { scale: 1; } 17% { scale: 0.8; } 20%, 47% { scale: 1; } 50% { scale: 0.8; } 53%, 80% { scale: 1; } 83% { scale: 0.8; } 86%, 100% { scale: 1; }
    }
    @keyframes wmDot1 { 0% { background: var(--yt-600); } 33% { background: var(--yt-200); } }
    @keyframes wmDot2 { 0% { background: var(--yt-200); } 33% { background: var(--yt-600); } 66% { background: var(--yt-200); } }
    @keyframes wmDot3 { 0% { background: var(--yt-200); } 66% { background: var(--yt-600); } }

    /* WalkMe launcher in the corner */
    .wm_Launch {
      position: absolute; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%;
      background: var(--yt-600); display: grid; place-items: center; color: #fff;
      box-shadow: 0 10px 24px -6px rgb(var(--yt-600-rgb) / 0.8);
    }
    .wm_Launch svg { width: 20px; height: 20px; }
    .wm_Launch::after {
      content: ""; position: absolute; inset: 0; border-radius: 50%;
      border: 2px solid var(--yt-400); animation: wmRipple 2.4s ease-out infinite;
    }
    @keyframes wmRipple { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }

    /* ---------- Stat tiles */
    .wm_Stat { justify-content: space-between; container-type: inline-size; }
    .wm_Stat_Top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
    .wm_Figure {
      display: block;
      font-weight: 200;
      font-size: clamp(2.8rem, 28cqi, 4.6rem);
      line-height: 0.95;
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
      margin: 0 0 10px;
    }
    .wm_Figure sup { font-size: 0.5em; top: -0.72em; margin-left: 0.04em; font-weight: 300; color: var(--yt-400); }

    /* 30+ — change curve: a dip, then adoption climbs */
    .wm_Curve { width: 96px; height: 40px; overflow: visible; }
    .wm_Curve path { fill: none; stroke: var(--yt-400); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 130; animation: wmDraw 4s ease-in-out infinite; }
    .wm_Curve circle { fill: #fff; offset-path: path("M2 14 C 20 14, 26 36, 44 34 S 76 6, 94 4"); animation: wmRide 4s ease-in-out infinite; }
    @keyframes wmDraw { 0% { stroke-dashoffset: 130; } 60%, 100% { stroke-dashoffset: 0; } }
    @keyframes wmRide { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 60% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

    /* 20+ — build blocks stacking */
    .wm_Blocks { display: grid; grid-template-columns: repeat(3, 14px); grid-auto-rows: 14px; gap: 4px; transform: rotate(180deg); }
    .wm_Blocks i { border-radius: 4px; background: rgb(var(--yt-400-rgb) / 0.2); animation: wmBuild 4.5s ease-in-out infinite; }
    .wm_Blocks i:nth-child(2) { animation-delay: .25s; }
    .wm_Blocks i:nth-child(3) { animation-delay: .5s; }
    .wm_Blocks i:nth-child(4) { animation-delay: .75s; }
    .wm_Blocks i:nth-child(5) { animation-delay: 1s; }
    .wm_Blocks i:nth-child(6) { animation-delay: 1.25s; }
    @keyframes wmBuild { 0%, 10% { background: rgb(var(--yt-400-rgb) / 0.2); } 25%, 75% { background: var(--yt-400); } 90%, 100% { background: rgb(var(--yt-400-rgb) / 0.2); } }
    .wm_Gear svg { animation: wmSpin 10s linear infinite; }
    @keyframes wmSpin { to { transform: rotate(360deg); } }

    /* ---------- Friction points, not a feature list */
    .wm_Fric { flex-direction: row !important; align-items: stretch; gap: 26px; }
    .wm_Fric_Copy { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
    .wm_Fric_Copy h4 { font-size: clamp(1.3rem, 1.75vw, 1.75rem); font-weight: 400; letter-spacing: -0.5px; line-height: 1.3; margin: 0; max-width: 20ch; }
    .wm_Fric_Vis { flex: none; width: 46%; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
    .wm_Feat { display: flex; align-items: center; gap: 10px; position: relative; width: calc(100% - 96px); }
    .wm_Feat i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgb(255 255 255 / 0.25); flex: none; }
    .wm_Feat b { height: 8px; border-radius: 999px; background: rgb(255 255 255 / 0.14); }
    .wm_Feat::after {
      content: ""; position: absolute; left: 0; top: 50%; height: 1.5px; width: 100%;
      background: rgb(var(--yt-400-rgb) / 0.7); transform-origin: left; transform: scaleX(0);
      animation: wmStrike 6s ease-in-out infinite;
    }
    .wm_Feat:nth-child(1) b { width: 70%; } .wm_Feat:nth-child(1)::after { width: calc(70% + 24px); }
    .wm_Feat:nth-child(2) b { width: 55%; } .wm_Feat:nth-child(2)::after { width: calc(55% + 24px); animation-delay: .35s; }
    .wm_Feat:nth-child(3) b { width: 80%; } .wm_Feat:nth-child(3)::after { width: calc(80% + 24px); animation-delay: .7s; }
    .wm_Feat:nth-child(4) b { width: 48%; } .wm_Feat:nth-child(4)::after { width: calc(48% + 24px); animation-delay: 1.05s; }
    @keyframes wmStrike { 0%, 10% { transform: scaleX(0); } 25%, 80% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
    /* The one real friction point, targeted */
    .wm_Target { position: absolute; right: 4%; top: 50%; width: 64px; height: 64px; margin-top: -32px; }
    .wm_Target::before, .wm_Target::after {
      content: ""; position: absolute; inset: 0; border-radius: 50%;
      border: 1.5px solid var(--yt-400); animation: wmRipple 2.4s ease-out infinite;
    }
    .wm_Target::after { animation-delay: 1.2s; }
    .wm_Target span {
      position: absolute; inset: 20px; border-radius: 50%; background: var(--yt-400);
      box-shadow: 0 0 20px rgb(var(--yt-400-rgb) / 0.9);
    }

    /* ---------- Track record: adoption up, tickets down, ROI up */
    .wm_Track { justify-content: space-between; gap: 24px; }
    .wm_Kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .wm_Kpi {
      border-radius: 18px; padding: 14px; background: rgb(255 255 255 / 0.03);
      border: 1px solid rgb(255 255 255 / 0.07);
      display: flex; flex-direction: column; gap: 14px;
    }
    .wm_Kpi svg.wm_Chart { width: 100%; height: 44px; overflow: visible; }
    .wm_Chart .ln { fill: none; stroke: var(--yt-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; animation: wmDraw 5s ease-in-out infinite; }
    .wm_Chart .ar { fill: url(#wmFill); }
    .wm_Chart rect { fill: rgb(var(--yt-400-rgb) / 0.35); transform-box: fill-box; transform-origin: bottom; animation: wmShrink 5s ease-in-out infinite; }
    .wm_Chart rect:last-of-type { fill: var(--yt-400); }
    .wm_Chart rect:nth-of-type(2) { animation-delay: .15s; } .wm_Chart rect:nth-of-type(3) { animation-delay: .3s; }
    .wm_Chart rect:nth-of-type(4) { animation-delay: .45s; } .wm_Chart rect:nth-of-type(5) { animation-delay: .6s; }
    @keyframes wmShrink { 0% { transform: scaleY(0); } 25%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
    .wm_Chart .coin { fill: var(--yt-400); animation: wmCoin 2.6s ease-in-out infinite; transform-box: fill-box; }
    .wm_Chart .coin:nth-of-type(2) { animation-delay: .35s; } .wm_Chart .coin:nth-of-type(3) { animation-delay: .7s; }
    @keyframes wmCoin { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-5px); opacity: 1; } }
    .wm_Track p { max-width: 52ch; }

    /* ---------- CTA banner */
    .wm_Cta {
      background: var(--yt-ramp-gradient) !important;
      border-color: transparent !important;
      flex-direction: row !important; align-items: center; justify-content: space-between; gap: 28px;
      padding: 38px 40px !important;
      text-decoration: none;
    }
    .wm_Cta p {
      font-size: clamp(1.25rem, 1.9vw, 1.9rem) !important;
      font-weight: 300; line-height: 1.35 !important; letter-spacing: -0.4px;
      color: #fff !important; max-width: 40ch;
    }
    .wm_Cta_Go {
      flex: none; position: relative; width: 72px; height: 72px; border-radius: 50%;
      background: #fff; color: var(--yt-700); display: grid; place-items: center;
      transition: transform .35s cubic-bezier(.2,.8,.2,1);
    }
    .wm_Cta_Go svg { width: 26px; height: 26px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
    .wm_Cta_Go::before, .wm_Cta_Go::after {
      content: ""; position: absolute; inset: 0; border-radius: 50%;
      border: 1.5px solid rgb(255 255 255 / 0.6); animation: wmRipple 2.8s ease-out infinite;
    }
    .wm_Cta_Go::after { animation-delay: 1.4s; }
    .wm_Cta:hover .wm_Cta_Go, .wm_Cta:focus-visible .wm_Cta_Go { transform: scale(1.06); }
    .wm_Cta:hover .wm_Cta_Go svg, .wm_Cta:focus-visible .wm_Cta_Go svg { transform: translateX(4px); }
    .wm_Cta:focus-visible { outline: 2px solid var(--yt-300); outline-offset: 4px; }
    /* Flowing lines behind the CTA */
    .wm_Waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.35; }
    .wm_Waves path { fill: none; stroke: #fff; stroke-width: 1; stroke-dasharray: 6 10; animation: wmFlow 3s linear infinite; }
    .wm_Waves path:nth-child(2) { opacity: .6; animation-duration: 4s; }
    .wm_Waves path:nth-child(3) { opacity: .35; animation-duration: 5s; }
    @keyframes wmFlow { to { stroke-dashoffset: -32; } }

    /* ==========================================================================
       AMBIENT BACKGROUND — same recipe as the other sections
       ========================================================================== */
    .wm_Bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .wm_Blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; }
    .wm_Blob--a {
      width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; top: -16%; right: -12%;
      background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
      animation: wmDriftA 28s ease-in-out infinite alternate;
    }
    .wm_Blob--b {
      width: 38vw; height: 38vw; max-width: 600px; max-height: 600px; bottom: -20%; left: -10%;
      background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
      animation: wmDriftB 34s ease-in-out infinite alternate;
    }
    .wm_Blob--c {
      width: 28vw; height: 28vw; max-width: 440px; max-height: 440px; top: 44%; left: 40%;
      background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
      animation: wmDriftC 40s ease-in-out infinite alternate;
    }
    @keyframes wmDriftA { to { transform: translate(-16vw, 20vh) scale(1.15); } }
    @keyframes wmDriftB { to { transform: translate(18vw, -14vh) scale(0.9); } }
    @keyframes wmDriftC { to { transform: translate(-20vw, -12vh) scale(1.25); } }
    .wm_Dots {
      position: absolute; inset: 0;
      background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
      background-size: 28px 28px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
    }
    .wm_Dots--lit {
      background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
      -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
              mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
      -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
      animation: wmDotSweep 9s linear infinite; opacity: 0.6;
    }
    @keyframes wmDotSweep {
      from { -webkit-mask-position: 150% 0; mask-position: 150% 0; }
      to   { -webkit-mask-position: -50% 0; mask-position: -50% 0; }
    }
    .wm_Horizon {
      position: absolute; left: 50%; bottom: 0; width: 120%; height: 1px; transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
      box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
      animation: wmFade2 6s ease-in-out infinite;
    }
    @keyframes wmFade2 { 50% { opacity: 0.45; } }

    /* ==========================================================================
       RESPONSIVE
       ========================================================================== */
    @media (max-width: 1199px) {
      .wm_Grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        grid-template-areas:
          "intro intro"
          "ui    ui"
          "s30   s20"
          "fric  fric"
          "track track"
          "cta   cta";
      }
      .wm_Grid .wm_Stat { min-height: 220px; }
    }
    @media (max-width: 576px) {
      .wm_Sec { padding: 72px 0; }
      .wm_Sec .common_Title { margin-bottom: 36px; }
      .wm_Grid {
        grid-template-columns: 1fr;
        grid-template-areas: "intro" "ui" "s30" "s20" "fric" "track" "cta";
      }
      .wm_Grid .bt { padding: 26px 24px; }
      .wm_Intro { padding: 28px 24px !important; }
      .wm_Ui { padding: 12px !important; }
      .wm_App { grid-template-columns: 40px 1fr; }
      .wm_Main { padding: 18px 16px; }
      .wm_Fric { flex-direction: column !important; }
      .wm_Fric_Vis { width: 100%; min-height: 130px; }
      .wm_Kpis { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
      .wm_Kpi { padding: 10px; }
      .wm_Kpi .wm_Icon--sm { width: 34px; height: 34px; }
      .wm_Cta { flex-direction: column !important; align-items: flex-start; padding: 30px 26px !important; }
      .wm_Grid .wm_Stat { min-height: 200px; }
      .wm_Blob { filter: blur(60px); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      .wm_Dots--lit { display: none; }
      .wm_Feat::after { transform: scaleX(1); }
    }

    /* ==========================================================================
       SHARED TILE RECIPE — from the bento grids in the component file.
       Radii step down with depth: tile 28px → photo/stage 18px → icon chip 999px.
       ========================================================================== */
    .bt {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      isolation: isolate;
      min-width: 0;
    }
    .bt p { font-size: 0.95rem; line-height: 1.6; margin: 0; }

    /* ==========================================================================
       THE YASH ADVANTAGE — Spotlight bento on black
       ========================================================================== */
    .yd_Sec {
      position: relative; isolation: isolate;
      background: var(--black);
      padding: 110px 0;
      overflow: hidden;
    }
    .yd_Sec > .container { position: relative; z-index: 1; }
    .yd_Sec .common_Title { color: #fff; margin: 0 0 56px; }

    .yd_Grid {
      list-style: none; margin: 0; padding: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(2, auto);
      grid-template-areas:
        "top  top  roll adv"
        "top  top  core core";
      gap: 14px;
    }
    .yd_Top  { grid-area: top; }
    .yd_Roll { grid-area: roll; }
    .yd_Adv  { grid-area: adv; }
    .yd_Core { grid-area: core; }

    .yd_Grid .bt {
      --mx: -500px; --my: -500px;
      background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
      border: 1px solid rgb(255 255 255 / 0.09);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      padding: 28px 30px;
      color: #fff;
      display: flex; flex-direction: column;
    }
    .yd_Grid .bt::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3;
      background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    .yd_Grid .bt::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    @media (hover: hover) {
      .yd_Grid:hover .bt::before, .yd_Grid:hover .bt::after { opacity: 1; }
    }
    /* One text size for every card */
    .yd_Grid .bt p {
      color: rgb(255 255 255 / 0.8);
      font-size: clamp(1rem, 1.1vw, 1.1rem) !important;
      font-weight: 400 !important;
      line-height: 1.55 !important;
      letter-spacing: -0.1px !important;
    }

    /* ---------- 1 · Top 25 — photo band + statement */
    .yd_Top { padding: 14px 14px 26px !important; }
    .yd_Photo {
      position: relative; flex: 1; min-height: 200px; border-radius: 18px; overflow: hidden;
      margin-bottom: 22px; isolation: isolate; background: var(--yt-950);
    }
    .yd_Photo img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
      animation: ydKenBurns 24s ease-in-out infinite alternate; transform-origin: 40% 50%;
    }
    .yd_Photo::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background:
        linear-gradient(200deg, rgb(var(--yt-600-rgb) / 0.4), transparent 55%),
        linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.6));
    }
    @keyframes ydKenBurns { from { transform: scale(1.02); } to { transform: scale(1.14) translate(2%, -1%); } }
    /* Ranking grid floating on the photo: 25 cells, one lit */
    .yd_Rank {
      position: absolute; right: 20px; bottom: 20px;
      display: grid; grid-template-columns: repeat(5, 14px); grid-auto-rows: 14px; gap: 6px;
      padding: 12px; border-radius: 14px;
      background: rgb(0 0 0 / 0.35); border: 1px solid rgb(255 255 255 / 0.14);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    }
    .yd_Rank i {
      border-radius: 4px; background: rgb(255 255 255 / 0.12);
      animation: ydWave 4.8s ease-in-out infinite; animation-delay: calc(var(--d) * 0.09s);
    }
    .yd_Rank i.is_Us { background: var(--yt-400); animation: none; box-shadow: 0 0 12px rgb(var(--yt-400-rgb) / 0.9); position: relative; }
    .yd_Rank i.is_Us::after { content: ""; position: absolute; inset: -1px; border-radius: 5px; border: 1.5px solid var(--yt-300); animation: ydRipple 2.4s ease-out infinite; }
    @keyframes ydWave { 0%, 60%, 100% { background: rgb(255 255 255 / 0.12); } 25% { background: rgb(var(--yt-400-rgb) / 0.45); } }
    @keyframes ydRipple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
    .yd_Top_Body { padding: 0 16px; }
    .yd_Top p {
      max-width: 52ch;
    }
    .yd_Hl { font-weight: 600; color: var(--yt-300); font-variant-numeric: tabular-nums; white-space: nowrap; }

    /* ---------- Shared layout for the two right-hand tiles */
    .yd_Side { justify-content: flex-start; gap: 18px; padding: 18px 18px 22px !important; }
    .yd_Stage {
      position: relative; flex: none; height: 150px; border-radius: 18px; overflow: hidden; box-sizing: border-box;
      background: rgb(255 255 255 / 0.025); border: 1px solid rgb(255 255 255 / 0.06);
      display: grid; place-items: center;
    }
    .yd_Side_Body { padding: 0 4px; }
    .yd_Side_Body p { max-width: 46ch; }

    /* ---------- 2 · Global roll-outs — hub arcing out to regions */
    .yd_Roll .yd_Stage {
      background:
        radial-gradient(rgb(var(--yt-400-rgb) / 0.18) 1.1px, transparent 1.5px) 0 0 / 14px 14px,
        radial-gradient(90% 90% at 50% 50%, rgb(var(--yt-600-rgb) / 0.18), transparent 70%);
    }
    .yd_Map { width: 100%; height: 100%; max-height: 140px; }
    .yd_Map .arc { fill: none; stroke: var(--yt-400); stroke-width: 1.5; stroke-dasharray: 4 6; animation: ydFlow 1.8s linear infinite; opacity: .8; }
    .yd_Map .pin { fill: #0b0716; stroke: var(--yt-300); stroke-width: 2; }
    .yd_Map .ping { fill: rgb(var(--yt-400-rgb) / 0.35); transform-box: fill-box; transform-origin: center; animation: ydPing 3s ease-out infinite; }
    .yd_Map .ping:nth-of-type(2) { animation-delay: .6s; }
    .yd_Map .ping:nth-of-type(3) { animation-delay: 1.2s; }
    .yd_Map .ping:nth-of-type(4) { animation-delay: 1.8s; }
    .yd_Map .ping:nth-of-type(5) { animation-delay: 2.4s; }
    .yd_Map .hub { fill: #fff; filter: drop-shadow(0 0 8px rgb(var(--yt-400-rgb) / 0.9)); }
    .yd_Map .hubRing { fill: none; stroke: var(--yt-400); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .6; transform-box: fill-box; transform-origin: center; animation: ydSpin 12s linear infinite; }
    @keyframes ydFlow { to { stroke-dashoffset: -20; } }
    @keyframes ydPing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
    @keyframes ydSpin { to { transform: rotate(360deg); } }

    /* ---------- 3 · Advisory — layered landscapes under a shield */
    .yd_Layers { position: relative; width: min(200px, 66%); height: 124px; transform: scale(.92); }
    .yd_Layer {
      position: absolute; left: 0; right: 0; height: 64px; border-radius: 12px; box-sizing: border-box;
      background: #120c22; border: 1px solid rgb(var(--yt-400-rgb) / 0.22);
      padding: 11px 14px; display: flex; flex-direction: column; gap: 7px;
      animation: ydFloat 6s ease-in-out infinite;
    }
    .yd_Layer:nth-child(1) { top: 0;    transform: translateX(-16px) scale(.9); opacity: .55; }
    .yd_Layer:nth-child(2) { top: 30px; transform: translateX(-6px) scale(.95); opacity: .8; animation-delay: .4s; }
    .yd_Layer:nth-child(3) { top: 60px; animation-delay: .8s; }
    .yd_Layer span { display: flex; align-items: center; gap: 8px; }
    .yd_Layer u { width: 9px; height: 9px; border-radius: 50%; flex: none; }
    .yd_Layer:nth-child(1) u { background: var(--yt-300); }
    .yd_Layer:nth-child(2) u { background: var(--yt-500); }
    .yd_Layer:nth-child(3) u { background: var(--yt-400); box-shadow: 0 0 8px var(--yt-400); }
    .yd_Layer b { height: 6px; border-radius: 999px; background: rgb(255 255 255 / 0.22); width: 58%; }
    .yd_Layer i { height: 5px; border-radius: 999px; background: rgb(255 255 255 / 0.1); width: 80%; }
    @keyframes ydFloat { 50% { translate: 0 -4px; } }
    .yd_Shield { position: absolute; right: -22px; bottom: -12px; width: 56px; height: 56px; z-index: 2; filter: drop-shadow(0 10px 18px rgb(var(--yt-600-rgb) / 0.7)); }
    .yd_Shield .s { fill: var(--yt-600); stroke: var(--yt-400); stroke-width: 1.5; }
    .yd_Shield .c { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; animation: ydCheck 4s ease-in-out infinite; }
    @keyframes ydCheck { 0%, 15% { stroke-dashoffset: 24; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 24; } }
    .yd_Gear { position: absolute; left: -22px; top: -14px; width: 34px; height: 34px; color: var(--yt-400); animation: ydSpin 10s linear infinite; }

    /* ---------- 4 · Clean core — full-width brand banner */
    .yd_Core {
      background: var(--yt-ramp-gradient) !important;
      border-color: transparent !important;
      flex-direction: row !important; align-items: center; justify-content: space-between; gap: 20px;
      padding: 22px 26px !important;
    }
    .yd_Core_Body { flex: 1; min-width: 0; }
    .yd_Core p {
      color: #fff !important; max-width: 40ch;
    }
    .yd_Orbit { position: relative; width: 220px; height: 220px; flex: none; transform: scale(.68); margin: -35px; }
    .yd_Orbit > span { position: absolute; inset: 0; border-radius: 50%; }
    .yd_Orbit .yd_Ring1 { inset: 46px; border: 1px solid rgb(255 255 255 / 0.25); }
    .yd_Orbit .yd_Ring2 { border: 1px dashed rgb(255 255 255 / 0.3); animation: ydSpin 30s linear infinite; }
    .yd_Orbit .yd_Ring3 { inset: 20px; animation: ydSpin 14s linear infinite reverse; }
    .yd_Orbit .yd_Heart {
      inset: 80px; background: #fff; display: grid; place-items: center; color: var(--yt-700);
      box-shadow: 0 0 0 10px rgb(255 255 255 / 0.1), 0 0 40px rgb(255 255 255 / 0.5);
      animation: ydBreathe 4s ease-in-out infinite;
    }
    .yd_Heart svg { width: 26px; height: 26px; }
    @keyframes ydBreathe { 50% { box-shadow: 0 0 0 16px rgb(255 255 255 / 0.06), 0 0 60px rgb(255 255 255 / 0.6); } }
    .yd_Sat {
      position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 10px;
      background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.35);
      display: grid; place-items: center; color: #fff;
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .yd_Sat svg { width: 15px; height: 15px; }
    .yd_Ring2 .yd_Sat { animation: ydSpin 30s linear infinite reverse; }
    .yd_Ring3 .yd_Sat { animation: ydSpin 14s linear infinite; }
    .yd_Sat--ai { background: #fff; color: var(--yt-600); border-color: #fff; box-shadow: 0 0 22px rgb(255 255 255 / 0.8); }
    .yd_Sat--ai svg { animation: ydTwinkle 2.4s ease-in-out infinite; }
    @keyframes ydTwinkle { 50% { transform: scale(.75) rotate(20deg); } }
    /* Flowing lines behind the banner */
    .yd_Waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.3; }
    .yd_Waves path { fill: none; stroke: #fff; stroke-width: 1; stroke-dasharray: 6 10; animation: ydWaveFlow 3s linear infinite; }
    .yd_Waves path:nth-child(2) { opacity: .6; animation-duration: 4s; }
    .yd_Waves path:nth-child(3) { opacity: .35; animation-duration: 5s; }
    @keyframes ydWaveFlow { to { stroke-dashoffset: -32; } }

    /* ==========================================================================
       AMBIENT BACKGROUND — same recipe as the LeanIX section
       ========================================================================== */
    .yd_Bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .yd_Blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; }
    .yd_Blob--a {
      width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; top: -16%; right: -12%;
      background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
      animation: ydDriftA 28s ease-in-out infinite alternate;
    }
    .yd_Blob--b {
      width: 38vw; height: 38vw; max-width: 600px; max-height: 600px; bottom: -20%; left: -10%;
      background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
      animation: ydDriftB 34s ease-in-out infinite alternate;
    }
    .yd_Blob--c {
      width: 28vw; height: 28vw; max-width: 440px; max-height: 440px; top: 44%; left: 40%;
      background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
      animation: ydDriftC 40s ease-in-out infinite alternate;
    }
    @keyframes ydDriftA { to { transform: translate(-16vw, 20vh) scale(1.15); } }
    @keyframes ydDriftB { to { transform: translate(18vw, -14vh) scale(0.9); } }
    @keyframes ydDriftC { to { transform: translate(-20vw, -12vh) scale(1.25); } }
    .yd_Dots {
      position: absolute; inset: 0;
      background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
      background-size: 28px 28px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
    }
    .yd_Dots--lit {
      background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
      -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
              mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
      -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
      animation: ydDotSweep 9s linear infinite; opacity: 0.6;
    }
    @keyframes ydDotSweep {
      from { -webkit-mask-position: 150% 0; mask-position: 150% 0; }
      to   { -webkit-mask-position: -50% 0; mask-position: -50% 0; }
    }
    .yd_Horizon {
      position: absolute; left: 50%; bottom: 0; width: 120%; height: 1px; transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
      box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
      animation: ydFade 6s ease-in-out infinite;
    }
    @keyframes ydFade { 50% { opacity: 0.45; } }

    /* ==========================================================================
       RESPONSIVE
       ========================================================================== */
    @media (max-width: 1199px) {
      .yd_Grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        grid-template-areas:
          "top  top"
          "roll adv"
          "core core";
      }

    }
    @media (max-width: 767px) {
      .yd_Grid { grid-template-columns: 1fr; grid-template-areas: "top" "roll" "adv" "core"; }
      .yd_Core { flex-direction: column !important; align-items: flex-start; }
      .yd_Orbit { align-self: center; margin: -35px; }
    }
    @media (max-width: 576px) {
      .yd_Sec { padding: 72px 0; }
      .yd_Sec .common_Title { margin-bottom: 36px; }
      .yd_Grid .bt { padding: 26px 22px; }
      .yd_Top { padding: 10px 10px 26px !important; }
      .yd_Top_Body { padding: 0 12px; }
      .yd_Photo { min-height: 180px; }
      .yd_Core { padding: 28px 24px !important; }
      .yd_Orbit { transform: scale(.68); }
      .yd_Blob { filter: blur(60px); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      .yd_Dots--lit { display: none; }
    }

    /* ==========================================================================
       WHAT THIS MEANS FOR — Spotlight bento on black
       Left half = CFOs, right half = CIOs. Each half: a tall photo tile
       carrying the role, and its three points stacked beside it.
       ========================================================================== */
    .wf_Sec {
      position: relative; isolation: isolate;
      background: var(--black);
      padding: 110px 0;
      overflow: hidden;
    }
    .wf_Sec > .container { position: relative; z-index: 1; }
    .wf_Sec .common_Title { color: #fff; margin: 0 0 56px; }

    .wf_Grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(3, auto);
      grid-template-areas:
        "cfo c1 cio i1"
        "cfo c2 cio i2"
        "cfo c3 cio i3";
      gap: 14px;
    }
    /* The <ul>s step aside so their <li>s sit directly in the grid */
    .wf_List { display: contents; list-style: none; margin: 0; padding: 0; }
    .wf_Cfo { grid-area: cfo; }
    .wf_Cio { grid-area: cio; }
    .wf_C1 { grid-area: c1; } .wf_C2 { grid-area: c2; } .wf_C3 { grid-area: c3; }
    .wf_I1 { grid-area: i1; } .wf_I2 { grid-area: i2; } .wf_I3 { grid-area: i3; }

    .wf_Grid .bt {
      --mx: -500px; --my: -500px;
      background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
      border: 1px solid rgb(255 255 255 / 0.09);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      color: #fff;
    }
    .wf_Grid .bt::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3;
      background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    .wf_Grid .bt::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    @media (hover: hover) {
      .wf_Grid:hover .bt::before, .wf_Grid:hover .bt::after { opacity: 1; }
    }

    /* ---------- Role tiles: full-bleed photo, role name at the foot */
    .wf_Role { display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 26px 24px; min-height: 420px; }
    .wf_Role img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
      animation: wfKenBurns 26s ease-in-out infinite alternate;
    }
    .wf_Cio img { animation-direction: alternate-reverse; transform-origin: 70% 40%; }
    @keyframes wfKenBurns { from { transform: scale(1.03); } to { transform: scale(1.15) translate(-1.5%, -1%); } }
    .wf_Role_Shade {
      position: absolute; inset: 0; z-index: -1;
      background:
        linear-gradient(200deg, rgb(var(--yt-600-rgb) / 0.4) 0%, transparent 50%),
        linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 0.9));
    }
    .wf_Cio .wf_Role_Shade {
      background:
        linear-gradient(160deg, rgb(var(--yt-600-rgb) / 0.4) 0%, transparent 50%),
        linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 0.9));
    }
    .wf_Role h3 { margin: 0; font-size: clamp(1.8rem, 2.4vw, 2.6rem); font-weight: 600; letter-spacing: -1px; line-height: 1.05; color: #fff; }
    .wf_Role_Rule { display: block; height: 2px; width: 72px; margin-top: 16px; border-radius: 2px; background: rgb(255 255 255 / 0.2); overflow: hidden; position: relative; }
    .wf_Role_Rule::after {
      content: ""; position: absolute; inset: 0; width: 45%;
      background: linear-gradient(90deg, transparent, var(--yt-400), transparent);
      animation: wfSlide 2.8s ease-in-out infinite;
    }
    @keyframes wfSlide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

    /* Floating glass panel on each role photo */
    .wf_Glass {
      position: absolute; top: 20px; left: 20px; right: 20px;
      padding: 14px 16px; border-radius: 16px;
      background: rgb(0 0 0 / 0.32); border: 1px solid rgb(255 255 255 / 0.14);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      animation: wfBob 6s ease-in-out infinite;
    }
    .wf_Cio .wf_Glass { animation-delay: -3s; }
    @keyframes wfBob { 50% { transform: translateY(-5px); } }
    /* CFO: ledger bars settling into a steady line */
    .wf_Ledger { display: flex; align-items: flex-end; gap: 6px; height: 54px; }
    .wf_Ledger i { flex: 1; border-radius: 4px 4px 2px 2px; background: rgb(var(--yt-400-rgb) / 0.35); animation: wfSteady 5s ease-in-out infinite; transform-origin: bottom; }
    .wf_Ledger i:nth-child(1) { --h0: .9;  animation-delay: 0s; }
    .wf_Ledger i:nth-child(2) { --h0: .35; animation-delay: .1s; }
    .wf_Ledger i:nth-child(3) { --h0: 1;   animation-delay: .2s; }
    .wf_Ledger i:nth-child(4) { --h0: .45; animation-delay: .3s; }
    .wf_Ledger i:nth-child(5) { --h0: .8;  animation-delay: .4s; }
    .wf_Ledger i:nth-child(6) { --h0: .3;  animation-delay: .5s; }
    .wf_Ledger i:nth-child(7) { --h0: .95; animation-delay: .6s; background: var(--yt-400); }
    .wf_Ledger i { height: 100%; }
    @keyframes wfSteady { 0%, 100% { transform: scaleY(var(--h0)); } 40%, 75% { transform: scaleY(.62); } }
    /* CIO: a live system pulse that never drops */
    .wf_Pulse { display: block; width: 100%; height: 54px; overflow: visible; }
    .wf_Pulse path { fill: none; stroke: var(--yt-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60 240; animation: wfBeat 2.6s linear infinite; }
    .wf_Pulse .base { stroke: rgb(255 255 255 / 0.14); stroke-dasharray: none; animation: none; }
    .wf_Pulse circle { fill: #7ee2a8; animation: wfLive 1.4s ease-in-out infinite; }
    @keyframes wfBeat { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
    @keyframes wfLive { 50% { opacity: .3; } }

    /* ---------- Point tiles */
    .wf_Point { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; }
    .wf_Point p {
      margin: 0;
      font-size: clamp(0.98rem, 1.05vw, 1.06rem); font-weight: 400; line-height: 1.55; letter-spacing: -0.1px;
      color: rgb(255 255 255 / 0.8);
    }
    .wf_Mini { display: block; height: 36px; width: 115px; overflow: visible; color: var(--yt-400); flex: none; }
    .wf_Mini * { vector-effect: non-scaling-stroke; }

    /* c1 — audit checklist ticking */
    .wf_Audit rect { fill: rgb(255 255 255 / 0.1); }
    .wf_Audit path { fill: none; stroke: var(--yt-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; animation: wfTick 5s ease-in-out infinite; }
    .wf_Audit path:nth-of-type(2) { animation-delay: .4s; }
    .wf_Audit path:nth-of-type(3) { animation-delay: .8s; }
    @keyframes wfTick { 0%, 10% { stroke-dashoffset: 12; } 25%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 12; } }
    /* c2 — a jagged cost line smoothing out */
    .wf_Cost path { fill: none; stroke: var(--yt-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .wf_Cost .jag { stroke: rgb(255 255 255 / 0.2); animation: wfFadeOut 5s ease-in-out infinite; }
    .wf_Cost .flat { stroke-dasharray: 100; animation: wfDraw 5s ease-in-out infinite; }
    @keyframes wfFadeOut { 0%, 30% { opacity: 1; } 55%, 85% { opacity: .2; } 100% { opacity: 1; } }
    @keyframes wfDraw { 0%, 20% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
    /* c3 — exposure gauge swinging to low */
    .wf_Gauge .trk { fill: none; stroke: rgb(255 255 255 / 0.14); stroke-width: 4; stroke-linecap: round; }
    .wf_Gauge .ndl { transform-origin: 20px 26px; animation: wfNeedle 5s ease-in-out infinite; }
    .wf_Gauge .ndl line { stroke: var(--yt-400); stroke-width: 2.5; stroke-linecap: round; }
    .wf_Gauge .ndl circle { fill: #fff; }
    .wf_Gauge .dn { fill: none; stroke: var(--yt-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: wfDrop 5s ease-in-out infinite; }
    @keyframes wfNeedle { 0%, 10% { transform: rotate(70deg); } 45%, 85% { transform: rotate(-70deg); } 100% { transform: rotate(70deg); } }
    @keyframes wfDrop { 0%, 20% { transform: translateY(-3px); opacity: .3; } 45%, 85% { transform: none; opacity: 1; } 100% { transform: translateY(-3px); opacity: .3; } }
    /* i1 — shared accountability: two parties, signal both ways */
    .wf_Share line { stroke: rgb(255 255 255 / 0.18); stroke-width: 2; stroke-dasharray: 3 4; }
    .wf_Share .end { fill: none; stroke: var(--yt-400); stroke-width: 2; }
    .wf_Share .end.b { fill: var(--yt-400); }
    .wf_Share .pk { fill: #fff; animation: wfShuttle 2.8s ease-in-out infinite; }
    .wf_Share .pk.b { fill: var(--yt-300); animation-delay: -1.4s; }
    @keyframes wfShuttle { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(46px); } }
    /* i2 — live system: heartbeat never breaks */
    .wf_Live path { fill: none; stroke: var(--yt-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40 160; animation: wfBeat2 2.2s linear infinite; }
    .wf_Live .base { stroke: rgb(255 255 255 / 0.14); stroke-dasharray: none; animation: none; }
    .wf_Live circle { fill: #7ee2a8; animation: wfLive 1.4s ease-in-out infinite; }
    @keyframes wfBeat2 { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
    /* i3 — controlled pace, step by step, to a future-ready spark */
    .wf_Pace .trk { fill: none; stroke: rgb(255 255 255 / 0.16); stroke-width: 2; stroke-dasharray: 3 4; }
    .wf_Pace .run { fill: none; stroke: var(--yt-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; animation: wfClimb 6s ease-in-out infinite; }
    .wf_Pace .spark { fill: #fff; transform-box: fill-box; transform-origin: center; animation: wfSpark 6s ease-in-out infinite; }
    @keyframes wfClimb { 0% { stroke-dashoffset: 120; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 120; } }
    @keyframes wfSpark { 0%, 50% { transform: scale(.4); opacity: .3; } 60% { transform: scale(1.25); opacity: 1; } 66%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.4); opacity: .3; } }

    /* ==========================================================================
       AMBIENT BACKGROUND — same recipe as the LeanIX section
       ========================================================================== */
    .wf_Bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .wf_Blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; }
    .wf_Blob--a {
      width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; top: -16%; right: -12%;
      background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
      animation: wfDriftA 28s ease-in-out infinite alternate;
    }
    .wf_Blob--b {
      width: 38vw; height: 38vw; max-width: 600px; max-height: 600px; bottom: -20%; left: -10%;
      background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
      animation: wfDriftB 34s ease-in-out infinite alternate;
    }
    .wf_Blob--c {
      width: 28vw; height: 28vw; max-width: 440px; max-height: 440px; top: 44%; left: 40%;
      background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
      animation: wfDriftC 40s ease-in-out infinite alternate;
    }
    @keyframes wfDriftA { to { transform: translate(-16vw, 20vh) scale(1.15); } }
    @keyframes wfDriftB { to { transform: translate(18vw, -14vh) scale(0.9); } }
    @keyframes wfDriftC { to { transform: translate(-20vw, -12vh) scale(1.25); } }
    .wf_Dots {
      position: absolute; inset: 0;
      background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
      background-size: 28px 28px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
    }
    .wf_Dots--lit {
      background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
      -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
              mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
      -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
      animation: wfDotSweep 9s linear infinite; opacity: 0.6;
    }
    @keyframes wfDotSweep {
      from { -webkit-mask-position: 150% 0; mask-position: 150% 0; }
      to   { -webkit-mask-position: -50% 0; mask-position: -50% 0; }
    }
    .wf_Horizon {
      position: absolute; left: 50%; bottom: 0; width: 120%; height: 1px; transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
      box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
      animation: wfFade 6s ease-in-out infinite;
    }
    @keyframes wfFade { 50% { opacity: 0.45; } }

    /* ==========================================================================
       RESPONSIVE
       ========================================================================== */
    @media (max-width: 1199px) {
      .wf_Grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        grid-template-areas:
          "cfo c1"
          "cfo c2"
          "cfo c3"
          "cio i1"
          "cio i2"
          "cio i3";
      }
      .wf_Role { min-height: 380px; }
    }
    @media (max-width: 767px) {
      .wf_Grid {
        grid-template-columns: 1fr;
        grid-template-areas: "cfo" "c1" "c2" "c3" "cio" "i1" "i2" "i3";
      }
      .wf_Role { min-height: 300px; }
      .wf_Cio { margin-top: 18px; }
    }
    @media (max-width: 576px) {
      .wf_Sec { padding: 72px 0; }
      .wf_Sec .common_Title { margin-bottom: 36px; }
      .wf_Blob { filter: blur(60px); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      .wf_Dots--lit { display: none; }
    }