/* .why-resul-hero{height: calc(100vh - 100px); background: url('../images/why-resul/hero-bg.jpg') no-repeat center bottom; background-size: cover;   padding:3rem 0px;}
.why-resul-hero:before{ content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(0deg, #000024, #000024), linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)); opacity: 0.1;}
 */

 .why-resul-hero{ padding:3rem 0px;}


.why-resul-hero .caption-title{color: #4EA1FF;}
.why-resul-hero h1{max-width:1000px; font-size: clamp(2rem, 3.5vw, 54px);}
.why-resul-hero h1 span{color: #0A62FF;}
.why-resul-hero p{max-width:1000px;}

.outline-border{background: transparent; border-color: #ffffff!important;}
.outline-border:hover{background: #ffffff; color: #000024!important;}

.section-growth .caption-title{color:#7D5CFF;}
.section-growth .group-hd h2{max-width: 560px;}
.section-growth .group-hd h2 span{color: #1241FF;}
.section-growth .group-hd p{max-width:880px; color:#16234A;}


.why-resul-cta{background: url('../images/why-resul/cta-bg.jpg') no-repeat center bottom; background-size: cover;}
.why-resul-cta h2{max-width: 780px;}
.why-resul-cta p{max-width:800px;}
.resul-tabs .nav-pills{border-color: #D5DFFF!important; }
.resul-tabs .nav-pills .nav-link{font-size: 16px; min-width: 150px; color: #1E1E1E; padding:0.7rem 0px;}
.resul-tabs .nav-pills .nav-link.active, 
.resul-tabs .nav-pills .show>.nav-link{background: #1C02A5; color:#ffffff;}

.growth-footer p{color: #41507E; line-height: 180%; max-width: 900px;}
.resul-tabs .tab-pane .growth-footer p{opacity: 0;}
.resul-tabs .tab-pane.show .growth-footer p{animation: growthFadeUp 0.6s ease-out 0.3s both;}
@keyframes growthFadeUp{
  from{opacity: 0; transform: translateY(12px);}
  to{opacity: 1; transform: translateY(0);}
}

/* Identity puzzle scenes — layer positions are % of the exported Figma frames.
   Today (1221x724): the unified profile breaks apart into mismatched fragments.
   With RESUL (1682x724): the same fragments come together, then the unified profile card appears. */
.puzzle-scene{position: relative; max-width: 1000px;}
.puzzle-scene .puzzle-bg{display: block; width: 100%; height: auto; opacity: 0;}
.puzzle-circle{position: absolute; left: 33.74%; top: 5.8%; width: 32.35%; aspect-ratio: 1/1; background: #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(28, 2, 165, 0.05), 0 24px 60px rgba(28, 2, 165, 0.14); opacity: 0;}
.puzzle-piece{position: absolute; height: auto; opacity: 0; will-change: transform;}
/* --dx/--dy: assembled start (toward circle center); --rx/--ry/--rr: broken resting offset + tilt */
.pp-1{left: 34.92%; top: 13.39%; width: 14.82%; --dx: 65px; --dy: 14px; --rx: -14px; --ry: 4px; --rr: -3deg; --d: 0.35s;}
.pp-2{left: 36.98%; top: 4.23%; width: 15.25%; --dx: 45px; --dy: 113px; --rx: -6px; --ry: -16px; --rr: 2.5deg; --d: 0.42s;}
.pp-3{left: 49.96%; top: 8.29%; width: 12.55%; --dx: -54px; --dy: 84px; --rx: 14px; --ry: -12px; --rr: 3deg; --d: 0.49s;}
.pp-4{left: 31.86%; top: 41.57%; width: 17.45%; --dx: 80px; --dy: -86px; --rx: -12px; --ry: 16px; --rr: -2.5deg; --d: 0.7s;}
.pp-5{left: 49.96%; top: 35.64%; width: 14.18%; --dx: -61px; --dy: -71px; --rx: 16px; --ry: 14px; --rr: 3.5deg; --d: 0.63s;}
.pp-6{left: 49.14%; top: 20.3%; width: 18.57%; --dx: -73px; --dy: 9px; --rx: 18px; --ry: -4px; --rr: -3deg; --d: 0.56s;}
.puzzle-scene.is-in .puzzle-bg{animation: layerFade 0.6s ease-out both;}
.puzzle-scene.is-in .puzzle-circle{animation: circleIn 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.1) 0.1s both;}
.puzzle-scene.is-in .puzzle-piece{animation: pieceBreak 1s cubic-bezier(0.26, 1, 0.4, 1.18) var(--d, 0.35s) both;}
@keyframes pieceBreak{
  from{opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(0deg) scale(0.95);}
  55%{opacity: 1;}
  to{opacity: 1; transform: translate(var(--rx, 0px), var(--ry, 0px)) rotate(var(--rr, 0deg)) scale(1);}
}

/* With RESUL scene */
.resul-scene{position: relative; max-width: 1150px; aspect-ratio: 1682/724;}
.resul-scene .resul-bg{position: absolute; left: 0; top: 0; width: 72.533%; height: auto; opacity: 0;}
.resul-circle{position: absolute; left: 24.4947%; top: 5.8011%; width: 23.4839%; aspect-ratio: 1/1; background: #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(28, 2, 165, 0.05), 0 24px 60px rgba(28, 2, 165, 0.14); opacity: 0;}
.resul-piece{position: absolute; height: auto; opacity: 0; will-change: transform;}
.rp-1{left: 25.3523%; top: 13.3862%; width: 10.7604%; --sx: -83px; --sy: -18px; --r0: -7deg; --d: 0.2s;}
.rp-2{left: 27.1696%; top: 7.604%; width: 11.4789%; --sx: -50px; --sy: -129px; --r0: 6deg; --d: 0.32s;}
.rp-3{left: 36.2685%; top: 8.2862%; width: 9.113%; --sx: 69px; --sy: -108px; --r0: -6deg; --d: 0.44s;}
.rp-4{left: 26.0058%; top: 41.4772%; width: 12.6707%; --sx: -59px; --sy: 110px; --r0: 8deg; --d: 0.68s;}
.rp-5{left: 36.2701%; top: 35.637%; width: 10.2946%; --sx: 78px; --sy: 91px; --r0: -8deg; --d: 0.56s;}
.rp-6{left: 33.7217%; top: 19.2999%; width: 13.4809%; --sx: 64px; --sy: -18px; --r0: 5deg; --d: 0.8s;}
.resul-profile{position: absolute; left: 79.6076%; top: 0; width: 20.3924%; height: auto; opacity: 0;}
.resul-scene.is-in .resul-bg{animation: layerFade 0.5s ease-out both;}
.resul-scene.is-in .resul-circle{animation: circleIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.1) 0.05s both, circlePulse 0.9s ease-out 1.7s 1;}
.resul-scene.is-in .resul-piece{animation: pieceJoin 0.85s cubic-bezier(0.25, 0.9, 0.3, 1.08) var(--d, 0.2s) both;}
.resul-scene.is-in .resul-profile{animation: profileIn 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) 0.2s both;}
@keyframes pieceJoin{
  from{opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--r0, 0deg)) scale(1.06);}
  45%{opacity: 1;}
  to{opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1);}
}
@keyframes profileIn{
  from{opacity: 0; transform: translateX(36px);}
  to{opacity: 1; transform: translateX(0);}
}
@keyframes circlePulse{
  0%{box-shadow: 0 0 0 0 rgba(28, 2, 165, 0.35), 0 24px 60px rgba(28, 2, 165, 0.14);}
  100%{box-shadow: 0 0 0 26px rgba(28, 2, 165, 0), 0 24px 60px rgba(28, 2, 165, 0.14);}
}
@keyframes layerFade{
  from{opacity: 0; transform: translateY(14px);}
  to{opacity: 1; transform: translateY(0);}
}
@keyframes circleIn{
  from{opacity: 0; transform: scale(0.85);}
  to{opacity: 1; transform: scale(1);}
}

@media (prefers-reduced-motion: reduce){
  .puzzle-scene .puzzle-bg, .puzzle-circle, .puzzle-piece,
  .resul-scene .resul-bg, .resul-circle, .resul-piece, .resul-profile,
  .resul-tabs .tab-pane .growth-footer p{animation: none !important; opacity: 1; transform: none;}
}

.section-cloud{background: linear-gradient(252.85deg, #271997 38.21%, #150D59 95.11%);}
.platform-card{
  position: sticky;
  top: 200px;
  transform-origin:top center;
  height: 230px;
}
.section-platform{background:#010422}
.platform-steps{max-width: 1000px; }
.platform-step{padding:2rem 0px; background: #17122B; border: 1px solid #A68CFF4D; border-radius: var(--BorderRadius); box-shadow: 0px 18px 50px -18px #452E9980;  will-change: transform, filter; overflow: hidden;}
.step-no{color: #1241FF; min-width: 100px;}
.platform-step p{color:#C4D0FF; }


.platform-card:nth-child(0) {
  transform: translateY(0px);
}
.platform-card:nth-child(1) {
  transform: translateY(16px);
}
.platform-card:nth-child(2) {
  transform: translateY(32px);
}
.platform-card:nth-child(3) {
  transform: translateY(48px);
}
.platform-card:nth-child(4) {
  transform: translateY(64px);
}
.platform-card:nth-child(5) {
  transform: translateY(80px);
}

.section-diffrent{background: #010422;}
.diffrent-card{background: #17122B; border-color:#A68CFF4D!important; box-shadow: 0px 18px 20px -18px #452E9980; border-radius: var(--BorderRadius); transition:all 0.7s ease;}
.diffrent-card:hover{box-shadow: 0px 10px 20px #553ab780; transform: translateY(-5px);}
.diffrent-card p{font-size: 14px; color: #D9DFF7; font-weight: 400; line-height: 160%;}
/* Card link arrows (same component as solutions pages, compact size) */
.diffrent-card .arrow-button a{width: 2.4rem; height: 2.4rem;}
.diffrent-card .arrow-button a span img{max-height: 12px;}

/* Attribution card artwork: in-flow below the text, full width, pinned to the card bottom */
.card-1-wap{overflow: hidden; display: flex; flex-direction: column;}
.card-1-wap p{margin-bottom: 1.5rem !important;}
.card-1-wap::after{content: ""; display: block; margin: auto -1.5rem -1.5rem; width: calc(100% + 3rem); aspect-ratio: 1459/1111; background: url('../images/why-resul/card1.jpg') no-repeat center bottom; background-size: contain; pointer-events: none;}

.section-signal{background: #010422;}
.section-signal .group-hd .caption-title{color: #7D5CFF;}
.section-signal .group-hd p{max-width: 1000px;}

.built-business-left p{color: #3D404B;}
.built-gallery{display: grid; grid-template-columns: 1fr 1fr; gap:10px}

.marquee-inner div{height:380px; overflow: hidden; border-radius: 10px; row-gap: 1rem; margin-bottom: 1rem;}
.marquee-block{
  height: 600px;
  overflow: hidden;
  position: relative;
}
.marquee-inner{
  display: block;
  height: 100%;
  position: absolute;
}
.brand-logos{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap:3rem}
.brand-logos div{text-align: center; transition:all 0.7s ease;}
.brand-logos img{max-height: 40px; max-width: 150px;transition:all 0.7s ease;}
.brand-logos div:hover img{transform: scale(1.2);}
.bg-video-cta {min-width:100%; height: 16 / 9; opacity: 0.15;}

@media(min-width:991px){
  .growth-card p{max-width: 90%;}
  .section-diffrent .growth-card p{max-width:100%;}
  .platform-step p{max-width: 95%;}
  .w-wap-50{max-width: 70%;}
}

@media(max-width:991px){
  .platform-card{top: 100px;}
  .brand-logos{grid-template-columns: 1fr 1fr 1fr;  gap: 0; row-gap: 2rem;}
  .brand-logos img{max-height:20px; max-width: 100px;}
  .why-resul-hero video {
        aspect-ratio: 3 / 4;
    }
}

@media(max-width:767px){
.why-resul-hero {height: auto;}
.marquee-block{height: 400px;}
.marquee-inner img{height: 100%; object-fit: cover;}
.marquee-inner div{height: auto;}
}



  /* PIPELINE — the kept centerpiece */
.pipeline{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;z-index:1}
.pipe-track{position:absolute;top:35px;left:7%;right:7%;height:2px;background:rgba(82, 159, 252, 0.16);}
.pipe-fill{position:absolute;top:35px;left:7%;height:2px;width:0;transition:width .4s linear; background:#1241FF;}

.pipe-node{position:relative;flex:1;text-align:center;z-index:2}
.pipe-dot{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:rgba(6,17,49,.9);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--muted);transition:.45s}
.pipe-node.lit .pipe-dot{background: #1F50FF; border: 1px solid #0A62F5;}

.pipe-node h4{font-size:14px;font-weight:600;margin-bottom:6px}
.pipe-node p{font-size:12px;font-weight:300;color:var(--muted);line-height:1.5;max-width:150px;margin:0 auto}

.signal-ball{position:absolute;top:21px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,var(--cyan));box-shadow:0 0 24px var(--neon);left:7%;opacity:0;transition:opacity .3s;z-index:5;pointer-events:none}
.pipe-replay{margin-top:46px;display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line-2);color:var(--txt-2);padding:11px 20px;border-radius:999px;font-weight:500;font-size:13px;cursor:pointer;transition:.25s;position:relative;font-family:inherit}
.pipe-replay:hover{border-color:var(--cyan);color:var(--cyan)}

@media (max-width:880px){
  .pipe-wrap{padding:30px 10px}
  .pipeline{gap:20px; flex-wrap: wrap;}
  .pipe-track,.pipe-fill,.signal-ball{display:none}
  .pipe-node p{max-width:none}
  .step-no {min-width: 60px;}
}