/* ----- HERO: copy + full-width banner carousel + curve ----- */
.wb2hero{position:relative;padding:calc(var(--h-head) + 44px) 0 110px;background:linear-gradient(180deg,#fff 0%,#f4f8ff 100%);overflow:hidden;min-height:100vh;display:flex;align-items:center}
.wb2hero .hero-mesh .h1b{top:-220px;right:-40px}.wb2hero .hero-mesh .h2b{bottom:-160px;left:-80px}
.wb2-inner{position:relative;z-index:2;width:100%}
.wb2-copy{max-width:640px;margin-bottom:34px}
.wb2-copy .eyebrow{margin-bottom:14px}
.wb2-copy h1{font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.07;letter-spacing:-.02em;margin-bottom:16px}
.wb2-copy .sub{color:var(--slate);font-size:1.06rem;max-width:560px;margin-bottom:24px}
.wb2-cta{display:flex;gap:13px;flex-wrap:wrap}
/* banner carousel */
.wb2-carousel{position:relative;border-radius:22px;aspect-ratio:10/5;box-shadow:0 30px 70px rgba(24,104,251,.22);isolation:isolate;max-width:1100px;margin:0 auto}
.wb2-carousel::before{content:"";position:absolute;inset:-14px;border-radius:30px;background:radial-gradient(closest-side,var(--blue-18),transparent);z-index:-1;filter:blur(14px)}
.wb2-slide{position:absolute;inset:0;opacity:0;transform:translateX(36px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.wb2-slide.active{opacity:1;transform:none;pointer-events:auto}
.wb2-slide .img-frame{width:100%;height:100%;border-radius:22px}
.wb2-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.wb2-dot{width:9px;height:9px;border-radius:999px;background:var(--blue-18);border:none;cursor:pointer;transition:.3s;padding:0}
.wb2-dot.on{width:26px;background:var(--blue)}
/* curved divider */
.wb2-curve{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:3}
.wb2-curve svg{width:100%;height:74px;display:block}

/* ----- STORY: 3 alternating layers ----- */
.wbstory .wbs-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:54px 0}
.wbstory .wbs-row+.wbs-row{border-top:1px solid var(--line)}
.wbs-copy .eyebrow{margin-bottom:12px}
.wbs-copy h2{font-size:clamp(1.65rem,3.2vw,2.35rem);margin-bottom:14px}
.wbs-copy>p{color:var(--slate);font-size:1.02rem;margin-bottom:22px}
.wbs-cta{display:flex;gap:13px;flex-wrap:wrap}
.wbs-img .img-frame{aspect-ratio:16/11;animation:floaty 6.5s ease-in-out infinite;box-shadow:0 24px 60px rgba(24,104,251,.16)}
.wbs-row.rev .wbs-img{order:-1}
.wbs-mini{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.wbs-mini .mi{display:flex;gap:13px;align-items:flex-start}
.wbs-mini .mi .ic{width:40px;height:40px;flex:0 0 auto;border-radius:11px;background:var(--blue-08);color:var(--blue);display:grid;place-items:center}
.wbs-mini .mi .ic svg{width:20px;height:20px}
.wbs-mini .mi b{display:block;font-size:.98rem}
.wbs-mini .mi span{font-size:.85rem;color:var(--slate)}
.wbs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.wbs-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 14px;transition:.25s}
.wbs-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-blue);border-color:var(--blue-18)}
.wbs-card .ic{width:38px;height:38px;border-radius:10px;background:var(--blue-08);color:var(--blue);display:grid;place-items:center;margin-bottom:10px}
.wbs-card .ic svg{width:19px;height:19px}
.wbs-card b{display:block;font-size:.9rem;margin-bottom:4px}
.wbs-card span{font-size:.78rem;color:var(--slate)}

/* ----- FEATURE LAYER: 3 boxes + connected detail ----- */
.wbfeat{background:var(--bg-tint)}
.f3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.f3-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px;cursor:pointer;transition:.28s;position:relative}
.f3-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-blue);border-color:var(--blue-18)}
.f3-card.active{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--shadow-blue);transform:translateY(-4px)}
.f3-card .fimg{aspect-ratio:16/10;margin-bottom:16px}
.f3-card h4{font-size:1.06rem;margin-bottom:7px}
.f3-card p{font-size:.87rem;color:var(--slate)}
.f3-more{display:inline-flex;align-items:center;gap:6px;margin-top:13px;font-size:.82rem;font-weight:700;color:var(--blue);transition:gap .2s}
.f3-card:hover .f3-more,.f3-card.active .f3-more{gap:10px}
.f3-card.active .f3-more svg{transform:rotate(90deg)}
.f3-more svg{transition:transform .25s}
.f3-acc{display:none}
.f3-panel{grid-column:1 / -1;position:relative;background:#fff;border:1px solid var(--blue-12);border-radius:var(--r-card);box-shadow:var(--shadow-blue);overflow:hidden;max-height:0;opacity:0;transition:max-height .45s ease,opacity .35s,margin .3s}
.f3-panel.open{max-height:620px;opacity:1;margin-top:4px}
.f3-panel .pt{position:absolute;top:-9px;width:18px;height:18px;background:#fff;border-left:1px solid var(--blue-12);border-top:1px solid var(--blue-12);transform:rotate(45deg);transition:left .4s}
.f3-panel .inner{display:grid;grid-template-columns:310px 1fr;gap:24px;padding:26px}
.f3-panel .pimg{aspect-ratio:4/3}
.f3-panel h3{font-size:1.3rem;margin-bottom:10px}
.f3-panel p{color:var(--slate);font-size:.95rem;margin-bottom:12px}
.f3-uc{display:flex;gap:9px;align-items:flex-start;background:var(--bg-tint);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.86rem;color:var(--ink);margin-bottom:16px}
.f3-uc svg{width:18px;height:18px;color:var(--blue);flex:0 0 auto;margin-top:2px}
.f3-pcta{display:flex;gap:12px;flex-wrap:wrap}

/* ----- USE CASES: center phone + moving side stacks ----- */
.wbuse{overflow:hidden}
.wbu-stage{display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:center}
.wbu-side{display:flex;flex-direction:column;gap:18px}
.wbu-side.l{align-items:flex-end}
.wbu-side.r{align-items:flex-start}
.wbu-frame{width:150px;aspect-ratio:9/16;background:#fff;border:1px solid var(--blue-12);border-radius:16px;box-shadow:0 14px 34px rgba(24,104,251,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--blue);transition:transform .5s ease,opacity .5s ease;opacity:.85}
.wbu-frame:nth-child(2){transform:translateX(26px) scale(1.04);opacity:1}
.wbu-side.r .wbu-frame:nth-child(2){transform:translateX(-26px) scale(1.04)}
.wbu-frame.swap{animation:wbuIn .55s ease}
@keyframes wbuIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:.85;transform:none}}
.wbu-frame svg{width:30px;height:30px;opacity:.6}
.wbu-frame span{font-size:.66rem;font-weight:700;color:var(--slate);text-align:center;padding:0 10px}
.wbu-phone{position:relative;z-index:3}
.wbu-phone::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--blue-12),transparent 68%);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}
.wbu-phone .phone-body{width:264px;animation:floaty 6s ease-in-out infinite}
.wbu-screen{border-radius:34px;overflow:hidden;aspect-ratio:1290/2796;background:#fff;display:flex;flex-direction:column}
.wbu-active{flex:1;margin:0;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,var(--blue-08),#e4edff);color:var(--blue);position:relative;overflow:hidden}
.wbu-active.swap{animation:wbuCenter .6s ease}
@keyframes wbuCenter{0%{opacity:0;transform:translateX(46px)}100%{opacity:1;transform:none}}
.wbu-active svg{width:52px;height:52px;opacity:.65}
.wbu-active b{font-family:var(--font-head);font-size:1rem;color:var(--ink);text-align:center;padding:0 18px}
.wbu-active span{font-size:.74rem;color:var(--slate);text-align:center;padding:0 20px}
.wbu-active .ph-note{position:absolute;bottom:12px;left:50%;transform:translateX(-50%)}
.wbu-mobile{display:none}

/* hero centered */
.wb2-copy{max-width:780px;margin:0 auto 34px;text-align:center}
.wb2-copy .sub{margin-left:auto;margin-right:auto}
.wb2-cta{justify-content:center}

/* ----- USE CASES v2 (jiocx-style flow cards) ----- */
.uc2-title{font-family:var(--font-head);font-weight:800;font-style:italic;font-size:clamp(1.25rem,2.6vw,1.8rem);text-align:center;margin:6px 0 34px;color:var(--ink)}
.uc2-title.swap{animation:uc2t .5s ease}
@keyframes uc2t{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.uc2-stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:46px 0 30px;isolation:isolate}
.uc2-stage::before{content:"";position:absolute;width:min(760px,86%);aspect-ratio:1;border-radius:50%;z-index:-1}
.uc2-side{display:flex;gap:12px;align-items:center}
.uc2-side.l{justify-content:flex-end}
.uc2-side.r{justify-content:flex-start}
.uc2-side.l .wfc:first-child{transform:translateY(-40px);opacity:1}
.uc2-side.l .wfc:last-child{transform:none;opacity:1}
.uc2-side.r .wfc:first-child{transform:none;opacity:1}
.uc2-side.r .wfc:last-child{transform:translateY(-40px);opacity:1}
/* flow card */
.wfc{width:270px;aspect-ratio:9/11;background:transparent;border:none;border-radius:16px;box-shadow:none;padding:0;display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.wfc.swap{animation:none!important}
.wfc-h{display:flex;align-items:center;gap:8px}
.wfc-h .x,.wfc-h .d{color:var(--slate-light);font-size:.9rem;line-height:1}
.wfc-h b{flex:1;text-align:center;font-size:.68rem;line-height:1.25}
.wfc-img{aspect-ratio:16/10;border-radius:10px}
.wfc-img .ph-art svg{width:26px;height:26px}
.wfc-img .ph-note{font-size:.52rem;padding:2px 7px}
.wfc-f{display:flex;flex-direction:column;gap:3px}
.wfc-f label{font-size:.52rem;color:var(--slate-light);font-weight:600}
.wfc-f span{border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:.6rem;color:var(--ink);background:#fff}
.wfc-t{font-size:.48rem;color:var(--slate-light);text-align:center}
.wfc-t i{color:#128C7E;font-style:normal}
.wfc-btn{border:none;cursor:pointer;background:#0a8d68;color:#fff;font-weight:700;font-size:.66rem;border-radius:999px;padding:8px 12px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-body)}
.wfc-btn svg{width:12px;height:12px}
.wfc-bar{height:3px;width:44%;margin:2px auto 0;border-radius:3px;background:var(--line)}
/* center phone */
.uc2-phone{position:relative;z-index:3}
.uc2-phone .phone-body{width:260px;animation:floaty 6s ease-in-out infinite}
.uc2-screen{border-radius:34px;overflow:hidden;aspect-ratio:1290/2796;background:#e7ded4;display:flex;flex-direction:column;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black)}
.uc2-holder{flex:1;position:relative;width:100%;height:100%}
.uc2-holder .wfc{position:absolute;left:0;top:0;width:100%;height:100%;aspect-ratio:auto!important;transform-origin:center center;box-shadow:0 -8px 30px rgba(15,23,42,.18)}
.uc2-holder .wfc-h b{font-size:.76rem}
.uc2-holder .wfc-img{width:100%;height:100%;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black);border-radius:0}
.uc2-holder .wfc-img .ph-art svg{width:34px;height:34px}
.uc2-holder .wfc-f label{font-size:.58rem}
.uc2-holder .wfc-f span{font-size:.68rem;padding:7px 9px}
.uc2-holder .wfc-t{font-size:.52rem}
.uc2-holder .wfc-btn{font-size:.74rem;padding:10px 14px}
.uc2-mobile{display:none}
@media(max-width:1180px){.uc2-side .wfc:first-child{display:none}.uc2-side.r .wfc:first-child{display:flex}.uc2-side.r .wfc:last-child{display:none}}
@media(max-width:1024px){
  .uc2-stage{display:none}
  .uc2-mobile{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 18px;-ms-overflow-style:none;scrollbar-width:none}
  .uc2-mobile::-webkit-scrollbar{display:none}
  .uc2-mobile .wfc{flex:0 0 85%;max-width:340px;scroll-snap-align:center;aspect-ratio:9/11}
}

/* ===== uc2 conveyor motion — GPU-accelerated, no conditional mount flicker ===== */
.uc2-stage{overflow:hidden}
/* (Overrides removed so triangle translateY works correctly) */
/* Base: all cards have no transition so resets are instant */
.wfc{animation:none!important;transition:none;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* When .go is active, only slide-relevant wfcs transition */
.uc2-stage.go .uc2-side .wfc{transition:transform .6s cubic-bezier(0.25,0.46,0.45,0.94);transform:translateX(282px)}
.uc2-stage.go .uc2-side.l .wfc:first-child{transform:translate(282px, -40px)}
.uc2-stage.go .uc2-side.r .wfc:last-child{transform:translate(282px, -40px)}
/* ---- holder: all 7 cards always in DOM (pre-loaded images, no flicker) ---- */
.uc2-holder{position:relative}
.uc2-holder .wfc{position:absolute;left:10px;bottom:10px;width:calc(100% - 20px);transform-origin:center bottom}
/* hidden: off-screen, no transition so they snap instantly without animating */
.uc2-holder .wfc.hidden{transform:translateX(-300%) scale(0.88);opacity:0;pointer-events:none;transition:none!important;filter:none}
/* incoming card: waiting at left, slightly scaled-down */
.uc2-holder .wfc.in{transform:translateX(-108%) scale(0.93);opacity:0;filter:blur(1px);pointer-events:none;box-shadow:none}
/* current card: center, fully visible */
.uc2-holder .wfc.cur{transform:translateX(0) scale(1);opacity:1;filter:none;pointer-events:auto;box-shadow:0 16px 40px rgba(24,104,251,.16)}
/* .go: smooth slide — cur exits right, in enters center */
.uc2-stage.go .uc2-holder .wfc.cur,.uc2-stage.go .uc2-holder .wfc.in{transition:transform .6s cubic-bezier(0.25,0.46,0.45,0.94),opacity .55s ease,filter .55s ease,box-shadow .55s ease}
.uc2-stage.go .uc2-holder .wfc.cur{transform:translateX(108%) scale(0.93);opacity:0;filter:blur(1px);box-shadow:none}
.uc2-stage.go .uc2-holder .wfc.in{transform:translateX(0) scale(1);opacity:1;filter:none;box-shadow:0 16px 40px rgba(24,104,251,.16)}
@media(max-width:1024px){.uc2-mobile .wfc{position:static;width:auto;will-change:auto}}

/* ----- pricing ----- */
.wbprice .price-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--blue-12);border-radius:20px;box-shadow:var(--shadow-blue);padding:42px;text-align:center}
.wbprice .price-card h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px}
.wbprice .price-card>p{color:var(--slate);font-size:1rem;max-width:600px;margin:0 auto 24px}
.wbprice .note{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--blue);background:var(--blue-08);border-radius:999px;padding:7px 15px;margin-bottom:20px}
.wbprice .note svg{width:15px;height:15px}
.wbprice .price-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ----- responsive ----- */
@media(max-width:1024px){
  .wb2hero{min-height:0;padding-bottom:96px}
  .wb2-carousel{aspect-ratio:4/3}
  .wbstory .wbs-row{grid-template-columns:1fr;gap:26px;padding:40px 0}
  .wbs-row.rev .wbs-img{order:0}
  .wbs-cards{grid-template-columns:1fr}
  .f3-grid{grid-template-columns:1fr}
  .f3-panel{display:none!important}
  .f3-acc{display:block;overflow:hidden;max-height:0;opacity:0;transition:max-height .4s,opacity .3s,margin .3s}
  .f3-acc.open{max-height:720px;opacity:1;margin-top:14px}
  .wbu-stage{display:none}
  .wbu-mobile{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 16px;-ms-overflow-style:none;scrollbar-width:none}
  .wbu-mobile::-webkit-scrollbar{display:none}
  .wbu-mcard{flex:0 0 62%;max-width:230px;scroll-snap-align:center;aspect-ratio:9/15;background:#fff;border:1px solid var(--blue-12);border-radius:18px;box-shadow:0 14px 34px rgba(24,104,251,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--blue)}
  .wbu-mcard svg{width:38px;height:38px;opacity:.6}
  .wbu-mcard b{font-family:var(--font-head);font-size:.92rem;color:var(--ink);text-align:center;padding:0 14px}
  .wbu-mcard span{font-size:.72rem;color:var(--slate);text-align:center;padding:0 16px}
}
@media(max-width:600px){
  .wb2-carousel{aspect-ratio:3/3.4}
  .wb2-curve svg{height:44px}
  .wbprice .price-card{padding:28px 20px}
}