.section-hero{background:#000022; position: relative; padding: var(--section-gap-medium) 0px 122vh 0px;}
/* .section-hero:after{
content: '';
position: absolute;
display: inline-block;
width: 100%;
background: url('../images/connected-exp/hero-shape.svg') no-repeat center bottom;
background-size: contain;
height: 100%;
left: 0px;
bottom:0px;
} */

.section-hero p{color:#AEAEB8}
.caption-title {color:#A594FD; letter-spacing: 1px;}

.hero-btn-group .btn-journey,
.hero-btn-group .btn-explore{padding: 0.813rem 2rem;    transition: background-color .3s ease, color .3s ease;}
.hero-btn-group .btn-journey{background: #0000ff;}
.hero-btn-group .btn-journey:hover{background: linear-gradient(180deg, #FFFFFF 0%, #E5E5E8 100%);color: var(--BlackClr)!important;}

.hero-btn-group .btn-explore{background: linear-gradient(180deg, #FFFFFF 0%, #E5E5E8 100%);}
.hero-btn-group .btn-explore:hover{background: #0000ff; color: var(--WhiteClr)!important;}

.resolve-image{background:#F8F6FC; border-radius: var(--BorderRadius);}
.resolve-image:before{padding-top: 100%;}
/* Inset the graphic from the box edge so it isn't flush to the rounded corners */
.resolve-image img{object-fit: contain; top: 16px; left: 16px; width: calc(100% - 32px); height: calc(100% - 32px);}

.resolve-Swiper{padding-top: var(--section-gap-large);}
.resolve-Swiper p{font-size: 14px;}

.decide-cards{padding-top: var(--section-gap-medium);}
.decide-cards p{font-size: 14px;}

.section-personalize{background: #010101;}
.section-personalize .group-heading .caption-title{background:#937DFFBD; letter-spacing: 0px;}

  .section-personalize .group-heading h2{color: #F1F1EF; font-size: clamp(36px, 6vw, 80px);}
  .section-personalize .group-heading p{color: #AEAEB8;}

.nav-pill{padding: 10px 32px; font-size:18px; line-height:28px; color: #AEAEB8; border-radius:15px; background: #252137; border:1px solid #252137!important; transition:all 0.5s ease;}
.nav-pill.active{border-color: #A962FF!important; color: #ffffff;}

.personalize-cards{padding-top: var(--section-gap-medium);}
.personalize-card{ max-width: 237px;}

.pc-inner{border-color: #343434!important; border-radius: calc(var(--BorderRadius) - 5px); overflow: hidden; transition:all 0.5s ease;}
.pc-inner:after{content:'';background:#010101;position: absolute;top: 20%;left: 1px;width: 99%;height: 50%;border-radius: 30px;}

.pc-inner:hover,
.pc-inner.active,
.personalize-card.active .pc-inner{opacity: 1;box-shadow: -1px -7px 41.8px 0px #A594FD82; border-color:#A594FD!important;}

.pc-inner:hover figure,
.pc-inner:hover .pc-meta,
.personalize-card.active .pc-inner figure,
.personalize-card.active .pc-inner .pc-meta{opacity:1;}

.pc-inner figure{opacity: 0.5; position: relative; z-index: 2;}
.pc-meta{opacity: 0.8; position: relative; z-index: 2;}

.personalize-card:after{content: ''; width: 8px; height: 8px; background:#FFFFFF6B; border-radius: 50%; position: absolute; top: 50%; right:-15px}
.personalize-card:before{content: ''; width: 100%; height: 2px; position:absolute; top:51%; right: -255px; border-top:dashed 2px #FFFFFF6B}

.personalize-card:last-child:before,
.personalize-card:last-child:after{display: none;}

.personalize-caption{max-width: 720px; margin: var(--section-gap-medium) auto 0; color: #C7C5D6; font-size: 20px; line-height: 1.5; transition: opacity .35s ease;}
.personalize-caption.is-swapping{opacity: 0;}
.personalize-navs{padding-top: var(--section-gap-small, 1.25rem);}
.personalise-bio{background: #181727; opacity: 0.95; border: 1px solid #343434; border-radius: 14px;}
.personalise-bio ul{list-style:none;}
.personalise-bio ul li{font-size: 12px; padding-left: 12px;}
.personalise-bio ul li:before{content: ''; position:absolute; top:7px; left: 0px; background:#A962FF; width: 5px; height: 5px; border-radius: 50%;}
.personalise-label{padding: 2px 11px; background: #181727; border: 1px solid #343434; font-size: 12px; min-width: 150px;}

.resul-experience{background: linear-gradient(180deg, #000019 0%, #000000 100%);}
.exp-cards{row-gap: 3rem; margin-top: var(--section-gap-large);}
.exp-card{max-width: 340px; width: 33%;}
.exp-card h3{font-size: 20px; max-width:70%; line-height: 29px;}
.exp-card p{color:#828282; font-size: 14px;}


/* .group-heading-exp h2{max-width: 700px;} */
.section-opportunity{background: #010101;}

.section-opportunity .group-heading h2{color: #F1F1EF; font-size: clamp(28px, 4.5vw, 56px);}
.section-opportunity .group-heading p{color: #AEAEB8;}


.section-opportunity .group-heading .caption-title{background: linear-gradient(90.83deg,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%);}
.section-opportunity .group-heading .caption-title::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.1), rgba(229,229,232,.1));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}


.section-online{background: #FAF9FF;}
.section-online .group-heading p{max-width:960px}

.of-tabs{margin-top:var(--section-gap-medium);}
.of-tabs ul{list-style: none; padding: 0px; margin: 0px; margin-bottom:var(--section-gap-medium);}
.of-tab-pill li{border-radius: 15px; background: #040730; color: #D6D6E7; padding:10px 1.5rem; cursor:pointer;transition:all 0.5s ease;}
.of-tab-pill li.active{border-color: #6A55F2!important; background:#ffffff; color: #6A55F2; box-shadow: 0px 4px 4px 0px #6A55F229;}
.of-tabs-content > div {display: none; opacity: 0; transition: opacity .4s ease;}
.of-tabs-content > div.active {display: block; opacity: 1;}

.moment-cards{margin-top: -19rem;}


@media all and (min-width:960px){
  .section-resolve .group-heading p{max-width:76%; line-height: 160%;}
  .section-decide .group-heading p{max-width:90%; line-height: 160%;}
  .resolve-Swiper p,
  .decide-cards p{max-width: 95%;}

  .section-personalize .group-heading h2{max-width: 800px;}
  .section-personalize .group-heading p{max-width:635px;}
  .section-opportunity .group-heading h2{max-width: 800px;}
  .section-opportunity .group-heading p{max-width:570px;}
}

@media all and (max-width:1500px){
  .section-hero {padding: var(--section-gap-medium) 0px 100vh 0px;}
}

@media all and (max-width:1200px){
  .personalize-card{width: 23%;}
}

@media all and (max-width:960px){
  .of-tab-pill li{padding: 10px 1rem;}
  .moment-cards {margin-top:2rem}
}


@media all and (max-width:767px){
  /* personalize cards: one after the other on mobile (no 2x2 cram) */
  .personalize-cards{flex-direction: column; align-items: center; row-gap: 1.25rem;}
  .personalize-card{width: 100%; max-width: 340px;}

  /* Every Moment bento → 2-column masonry on mobile (was 7 full-width cards ≈ 2000px of scroll) */
  .moment-cards{margin: 2rem 0 0; display: block; column-count: 2; column-gap: .7rem;}
  .moment-cards > [class*="col-"]{display: contents !important;}
  .moment-cards img{width: 100%; display: block; margin: 0 0 .7rem; break-inside: avoid;}

  /* Personalize: selector + sentence up top (tabs), one card at a time — sentence no longer buried below 4 cards */
  .personalize-outer{display: flex; flex-direction: column;}
  .personalize-navs{order: -2; margin-bottom: 1.1rem;}
  .personalize-caption{order: -1; max-width: 100%; margin: 0 auto 1.4rem; font-size: 18px;}
  .personalize-cards{order: 0; margin-top: 0;}
  .personalize-card{display: none;}
  .personalize-card.active{display: block;}
  .personalize-card:before, .personalize-card:after{display: none;}
  .section-hero {padding: var(--section-gap-medium) 0px 60vh 0px;}
  .exp-card {width: 100%; max-width: 80%; margin: 0 auto; text-align: center;}
  .exp-card h3{max-width: 85%; margin: 0 auto;}
}


.jb-foot {
    left: 2.6cqw;
    bottom: 2.6cqw;
    width: 55cqw;
    border-radius: 2.4cqw;
    padding: 2.2cqw 2.6cqw;
    display: flex;
    align-items: center;
    display: none !important;
    gap: 2cqw;
}

.journey-board-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 500 !important;
    container-type: inline-size;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(123, 97, 255, 0.22);
    background: rgb(11, 9, 32);
    box-shadow: rgba(123, 97, 255, 0.5) 0px 60px 150px -50px, rgba(0, 0, 0, 0.85) 0px 30px 80px -40px;
}

/* Resolve cards fill the 4-up row on desktop, so Swiper locks the slider
   (nothing to scroll to). Don't show a grab cursor that implies it's
   draggable. Mobile still swipes, where the cards don't all fit. */
@media (min-width: 640px) {
    .resolve-Swiper,
    .resolve-Swiper:active,
    .resolve-Swiper.swiper-grabbing {
        cursor: default !important;
    }
    /* Static 4-up on desktop — no carousel, so hide the pagination dots */
    .resolve-Swiper .resolve-pagination {
        display: none !important;
    }
}