@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

*{
    padding: 0; margin: 0;
    box-sizing: border-box; text-transform: capitalize;
    transition: .4s linear;
    outline: none; border: none; text-decoration: none;
    text-transform: unset!important;
    font-family: 'inter', sans-serif;
}

:root{
    --main-color: #029A85;
    --main-color2: #FE8008;
    --dark-black-color: #010F1C;
    --heading-color: #0f172a;
    --paragraph-color: #475569;
    --white-color: #fff;
    --font-heading:  "Oswald", sans-serif;

/*HEADER*/
    --accent: #596CF6;
    --accent-dark: #4552d6;
    --glow-2: #67E8F6;
    --glow-3: #F472B6;
    --ink: #10121C;
    --ink-soft: #4B4F63;
    --muted: #7A7E93;
    --bg-page: #F6F7FB;
    --white: #FFFFFF;
    --border-soft: #E7E8F2;
    --header-dark: #0C0E17;
    --header-dark-2: #14172B;
    --nav-h: 68px;
    --angle: 0deg;
}

ol, ul{
    padding-left: 0;
}

 @property --angle{
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }

  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }

html{
    font-size: 65.5%;
    scroll-behavior: smooth;
    transition: .10s all;
}

body{
    overflow-x: hidden;
    background: var(--white-color);
}

a{
    text-decoration: none!important;
}

::-webkit-scrollbar{
    width: .6rem;
}

::-webkit-scrollbar-track{
    background: var(--white-color);
}

::-webkit-scrollbar-thumb{
    background: #F4F5F6;
}

/*Start header+Hero section ui*/
.header-shell{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1000;
  }

  /*.header-shell::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius: inherit;
    background: conic-gradient(from var(--angle), transparent 0deg, transparent 250deg, var(--glow-3) 285deg, var(--accent) 320deg, var(--glow-2) 345deg, transparent 360deg);
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
  }
  .header-shell.glow-on::before{
    opacity: 1;
    animation: spin-angle 3.2s linear infinite;
  }*/
/*  @keyframes spin-angle{ to{ --angle: 360deg; } }*/

  .header-inner{
    position: relative;
    z-index: 1; width: 100%;
    height: var(--nav-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 20px;
    padding: 0 8%;
    background: var(--header-dark);
    background: var(--white);
    transition: background-color .55s ease, background-image .55s ease,
                border-radius .6s cubic-bezier(.4,0,.2,1), box-shadow .55s ease;
/*    box-shadow: 0 10px 30px -12px rgba(10,12,25,.45);*/
  }
  .header-shell.scrolled .header-inner{
    background: rgba(255,255,255,.72);
    background-image: none;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 8px 24px -12px rgba(20,23,50,.12);
    border-bottom: 1px solid rgba(20,23,50,.06);
  }

  /* ---- logo (two image variants that crossfade based on header state) ---- */
  .brand-logo{
    position:relative;
    width: 148px;
    height: 42px;
    flex-shrink:0;
  }
  .brand-logo img{
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    object-fit:contain;
    object-position:left center;
    transition: opacity .5s ease;
  }
  .brand-logo .logo-for-dark{ opacity:1; }
  .brand-logo .logo-for-light{ opacity:0; }
  .header-shell.scrolled .brand-logo .logo-for-dark{ opacity:0; }
  .header-shell.scrolled .brand-logo .logo-for-light{ opacity:1; }

  /* ---- desktop nav ---- */
  .primary-nav{ display:flex; align-items:center; gap:2px; }
  .nav-item{ position:relative; }
  .nav-link{
    display:flex; align-items:center; gap:6px;
    padding: 10px 16px;
    border:none; background:transparent;
    font-size: 16px; font-weight: 600;
    color: #4B4F63;
    border-radius: 999px;
    transition: color .5s ease, background-color .25s ease;
    white-space:nowrap; 
  }
  .header-shell.scrolled .nav-link{ color: var(--ink-soft); }
  .nav-link:hover{ background: rgba(255,255,255,.08); color: #10121C; }
  .header-shell.scrolled .nav-link:hover{ background: rgb(89 246 100 / 10%);
    color: var(--main-color); }
  .nav-link .chev{ width:12px; height:12px; transition: transform .3s ease; flex-shrink:0; }
  .nav-item.open .nav-link .chev{ transform: rotate(180deg); }
  .nav-item.open .nav-link{ background: rgba(255,255,255,.1); color: var(--main-color); }
  .header-shell.scrolled .nav-item.open .nav-link{ background: rgb(89 246 100 / 10%);
    color: var(--main-color); }

  /* ---- dropdown panels ---- */
  .dropdown{
    position:absolute;
    top: calc(100% + 14px);
    left:50%;
    transform: translateX(-50%) translateY(10px) scale(.96);
    transform-origin: top center;
    background:#fff;
    border-radius:18px;
    border:1px solid var(--border-soft);
    box-shadow: 0 24px 48px -18px rgba(20,23,50,.28);
    padding:14px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: opacity .4s cubic-bezier(.16,1,.3,1),
                transform .4s cubic-bezier(.16,1,.3,1),
                visibility .4s;
    z-index: 40;
  }
  .nav-item.open .dropdown{
    opacity:1; visibility:visible; pointer-events:auto;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  .dropdown.simple{ width: 220px; }
  .dropdown.grid{ width: min(640px, 84vw); }

  .dropdown-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:4px;
  }
  .dd-item{
    display:flex; gap:12px; align-items:flex-start;
    padding:12px; border-radius:12px;
    transition: background-color .2s ease;
  }
  .dd-item:hover{ background: #fefcee; }
  .dd-icon{
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    background: #fefaee; color: var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .dd-icon img{ width: 24px; }
  .dd-title{ font-size: 1.6rem; font-weight:600; color:var(--ink); margin-bottom:3px; }
  .dd-desc{ font-size: 1.4rem; color:var(--muted); line-height:1.45; }

  .dropdown.simple .dd-link{
    display:block; padding:10px 12px; border-radius:10px;
    font-size:14px; font-weight:500; color: var(--ink-soft);
    transition: background-color .2s ease, color .2s ease;
  }
  .dropdown.simple .dd-link:hover{ background:#F3F4FE; color: var(--accent-dark); }

  /* ---- right actions ---- */
  .header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    font-size: 16px; font-weight:600; white-space:nowrap;
    padding: 10px 18px; border-radius:999px; border:none;
    transition: all .25s ease; 
  }
  .btn-ghost{ background:transparent; color: #10121C; }
  .btn-ghost:hover{ background: rgba(255,255,255,.1); color: var(--white);}
  .header-shell.scrolled .btn-ghost{ color: var(--ink); }
  .header-shell.scrolled .btn-ghost:hover{ background: rgba(15,18,35,.06); color:var(--dark-black-color); }
  .btn-solid{
    background: var(--main-color); color:#fff;
    }
  .btn-solid:hover{ background: var(--accent-dark); transform: translateY(-1px); color: var(--white);}

  /* ---- hamburger ---- */
  .hamburger{
    display:none;
    width:40px; height:40px; border-radius:999px;
    border:none; background: #F3F4FE;
    align-items:center; justify-content:center;
    flex-shrink:0; position:relative;
    z-index: 1201;
  }
  .header-shell.scrolled .hamburger{ background: #6d47fe; }
  .header-shell.mobile-open .hamburger{ background: #10121C; }
  .hamburger span{
    position:absolute; left:11px; width:18px; height:2px; border-radius:2px;
    background: #10121C; transition: all .3s ease;
  }
  .header-shell.scrolled .hamburger span{ background: #fff; }
  .header-shell.mobile-open .hamburger span{ background: var(--accent-dark) !important; }
  .hamburger span:nth-child(1){ top:14px; }
  .hamburger span:nth-child(2){ top:19px; }
  .hamburger span:nth-child(3){ top:24px; }
  .hamburger.active span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
  .hamburger.active span:nth-child(2){ opacity:0; }
  .hamburger.active span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

  /* ---- mobile drawer overlay ---- */
  .mobile-overlay{
    position:fixed; inset:0; background: rgba(10,12,25,.45);
    backdrop-filter: blur(2px);
    opacity:0; visibility:hidden;
    transition: opacity .45s ease, visibility .45s;
    z-index: 1190;
  }
  .header-shell.mobile-open ~ .mobile-overlay,
  .mobile-overlay.show{ opacity:1; visibility:visible; }

  /* ---- mobile menu: slide-in drawer from the right ---- */
  .mobile-menu{
    position:fixed; top:0; right:0; height:100dvh;
    width: min(340px, 84vw);
    background:#fff;
    box-shadow: -18px 0 48px -18px rgba(20,23,50,.35);
    transform: translateX(100%);
    transition: transform .48s cubic-bezier(.16,1,.3,1);
    z-index: 1195;
    display:flex; flex-direction:column;
    overflow:hidden; 
  }
  .header-shell.mobile-open ~ .mobile-menu{ transform: translateX(0); }

  .mobile-menu-head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 18px;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink:0;
  }
  .mobile-menu-head .brand{ color: var(--ink); font-size:17px; }
  .mobile-close{
    width:36px; height:36px; border-radius:999px; border:none;
    background:#F3F4FE; color: var(--ink); display:flex; align-items:center; justify-content:center;
  }
  .mobile-close svg{ width:16px; height:16px; }

  .mobile-menu-inner{ padding:8px 12px 16px; overflow-y:auto; flex:1; }
  .m-item{ border-bottom:1px solid var(--border-soft); }
  .m-item:last-child{ border-bottom:none; }
  .m-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:none; border:none; padding:16px 10px;
    font-size:15.5px; font-weight:600; color:var(--ink);
  }
  .m-toggle .chev{ width:14px; height:14px; transition: transform .35s cubic-bezier(.4,0,.2,1); color:var(--muted); }
  .m-item.open .m-toggle .chev{ transform: rotate(180deg); color: var(--accent); }
  .m-item.open .m-toggle{ color: var(--accent-dark); }

  /* smooth height animation via grid-template-rows, no max-height guessing */
  .m-panel-wrap{
    display:grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .42s cubic-bezier(.4,0,.2,1);
  }
  .m-item.open .m-panel-wrap{ grid-template-rows: 1fr; }
  .m-panel{ min-height:0; overflow:hidden; }
  .m-panel-content{ padding: 2px 4px 14px; }

  .m-panel a, .m-plain-link{
    display:block; padding:12px; font-size:14.5px; color: var(--ink-soft); border-radius:12px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
  }
  .m-plain-link{ font-weight:600; color: var(--ink); }
  .m-panel a:active, .m-plain-link:active{ transform: scale(.98); }
  .m-panel a:hover{ background:#F3F4FE; color: var(--accent-dark); }

  /* solutions items inside mobile drawer, same visual language as desktop grid */
  .m-panel .dd-item{ padding:10px; border-radius:12px; }
  .m-panel .dd-item:active{ transform: scale(.98); }

  .m-actions{ display:flex; flex-direction:column; gap:10px; padding:18px 10px 6px; margin-top:auto; }
  .m-actions .btn{ width:100%; padding:13px 18px; }
  .m-actions .btn-ghost{ color: var(--ink); background:#F3F4FE; }
  .m-actions .btn-ghost:hover{ background:#E9EBFC; }

  /* ================= HERO ================= */
  .heading-section{
    text-align: center;
    padding: 6.4rem 2.4rem;
    border-radius: 1.6rem;
    max-width: 96rem;
    margin: 0 auto;
  }
 
  .heading-section__badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #ecfdf9;
    color: var(--main-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 22px;
  }
 
  .heading-section__title{
    font-size: 5rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #14142B;
    margin-bottom: 18px;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase !important;
  }

  .heading-section__title span{
    color: var(--main-color);
    font-family: "Oswald", sans-serif;
  }
 
  .heading-section__desc{
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    color: #8A8AA3;
    max-width: 520px;
    margin-bottom: 4rem;
    margin: auto;
    text-align: center;
  }

  /* ============================= */
  /* heading-section-left component */
  /* ============================= */
 
  .heading-section-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 640px;
  }
 
  .heading-section-left .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #ecfdf9;
    color: var(--main-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 22px;
  }
 
  .heading-section-left .badge svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
 
  .heading-section-left .heading {
    font-size: 5rem;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #14142B;
    margin-bottom: 18px;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase!important;
  }
 
  .heading-section-left .heading .accent {
    color: var(--main-color); font-family: "Oswald", sans-serif;
    text-transform: uppercase!important;
  }
 
  .heading-section-left .description {
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    color: #8A8AA3;
    max-width: 520px;
    margin-bottom: 4rem;
  }
  .home_section{
    position:relative;
    padding-top: calc(var(--nav-h) + 76px);
    padding-left: clamp(16px, 4.5vw, 56px);
    padding-right: clamp(16px, 4.5vw, 56px);
    padding-bottom: 0;
    overflow: hidden;
    background:
      radial-gradient(720px 420px at 12% 8%, rgba(89,108,246,.10), transparent 60%),
      radial-gradient(620px 380px at 88% 4%, rgba(103,232,246,.14), transparent 60%),
      var(--bg-page);
      background: url(https://cgpe-docs.s3.ap-south-1.amazonaws.com/cgpey/new_cgpey/hm1.png);
      background-size: cover; background-position: center;
  }
  .home_section .home-content{
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
    text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:22px;
  }
  .home-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 16px; border-radius:999px;
    background:#fff; border:1px solid var(--border-soft);
    font-size:13px; font-weight:600; color: var(--main-color);
    box-shadow: 0 6px 16px -10px rgba(20,23,50,.2);
  }
  .home-eyebrow span.dot{ width:6px; height:6px; border-radius:50%; background: var(--main-color); }

  .home_section h1{
    font-size: 6rem;
    line-height: 1.3;
    font-weight: 900;
    color: var(--ink);
    font-family: var(--font-heading);
    text-transform: uppercase!important;
    letter-spacing: -1.5px;
  }
  .home_section h1 .accent-word{
    background: var(--main-color);
    -webkit-background-clip: text; background-clip:text; color:transparent;
    font-family: var(--font-heading);
  }
  .home_section .home-sub{
    font-size: clamp(15.5px, 2vw, 18px);
    line-height:1.6;
    color: var(--muted);
    max-width: 560px;
  }
  .home-cta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
  .home-cta-row .btn-solid{ padding:14px 26px; font-size:15px; }
  .home-cta-row .btn-outline{
    padding:14px 26px; font-size:15px; border-radius:999px;
    background:#fff; color:var(--ink); border:1px solid var(--border-soft);
  }
  .home-cta-row .btn-outline:hover{ border-color: var(--accent); color: var(--accent-dark); }

  /* floating vector shapes */
  .float-shape{
    position:absolute; z-index:1; color: var(--accent);
    filter: drop-shadow(0 10px 20px rgba(89,108,246,.25));
    display: none;
  }
  .float-shape svg{ width:100%; height:100%; display:block; }
  .shape-rocket{ top:14%; left:7%; width:54px; height:54px; animation: float-a 6s ease-in-out infinite; }
  .shape-triangle{ top:20%; right:9%; width:38px; height:38px; color:var(--glow-2); animation: float-b 7s ease-in-out infinite; }
  .shape-ring{ bottom:34%; left:4%; width:44px; height:44px; color:#F472B6; opacity:.85; animation: float-c 8s ease-in-out infinite; }
  .shape-dot{ bottom:38%; right:6%; width:16px; height:16px; background:var(--accent); border-radius:50%; animation: float-a 5s ease-in-out infinite; }

  @keyframes float-a{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-16px) rotate(8deg); } }
  @keyframes float-b{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(14px) rotate(-12deg); } }
  @keyframes float-c{ 0%,100%{ transform: translate(0,0) rotate(0deg); } 50%{ transform: translate(8px,-10px) rotate(15deg); } }

  /* bottom flush image with infinite rotating border, clipped at bottom */
  .home-visual{
    position:relative;
    margin: auto;
    margin-top: 4rem;
    width:100%; max-width: 75%;
  }
  .home-visual-clip{
    position:relative;
    width:100%;
    overflow:hidden; 
  }
  .home-visual-glow{
    position:absolute;
    inset: -3px -3px 0 -3px; 
    height: calc(100% + 3px);
    border-radius: 26px 26px 0 0;
/*    background: conic-gradient(from var(--angle), var(--accent), var(--glow-3), var(--glow-2), var(--accent));*/
    animation: spin-angle 6s linear infinite;
/*    background: gray;*/
  }
  .home-visual-inner{
    position:relative;
    outline: 1px solid #c2c2c2;
    margin: 3px 3px 0 3px;
    border-radius: 34px 34px 0 0;
    overflow:hidden; 
/*    background: linear-gradient(160deg, #12142A, #1B1E3B 55%, #0F1122);*/
  }

  .home-visual-img{
    display:block;
    width:100%;
    border: 15px solid #f1f1f1; border-bottom: none;
    height:auto;border-radius: 34px 34px 0 0;
  }

  /* ================= WHATSAPP FLOATING BUTTON ================= */
  .wp-float{
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 900;
    width: 58px; height: 58px;
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    background: #25D366;
    box-shadow: 0 12px 26px -8px rgba(37,211,102,.55);
    border: none;
  }
  .wp-float svg{ width:28px; height:28px; position:relative; z-index:2; }
  .wp-float::before,
  .wp-float::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#25D366;
    opacity:.55;
    animation: wp-pulse 2.6s ease-out infinite;
  }
  .wp-float::after{ animation-delay: 1.3s; }
  @keyframes wp-pulse{
    0%{ transform: scale(1); opacity:.5; }
    100%{ transform: scale(1.9); opacity:0; }
  }
  .wp-float:hover{ filter: brightness(1.05); }
/*End header+hero section ui*/

/* =========================================================
     MULTI BANK DASHBOARD SECTION
     All classes below are prefixed with "mbd-" to avoid
     any collision / override with other sections on a page.
  ========================================================= */

  .mbd-section{
    width: 100%;
    padding: 6rem 5%;
    background: #f8fcfa;
    overflow: hidden;
  }

  .mbd-container{
    max-width: 132rem;
    margin: 0 auto;
  }

  /* ---------- Section heading ---------- */
  .mbd-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5b4fe9;
    background: #edebfd;
    padding: 0.7rem 1.6rem;
    border-radius: 99px;
    margin-bottom: 2rem;
  }

  .mbd-eyebrow i{
    font-size: 1.1rem;
  }

  .mbd-heading{
    font-weight: 700;
    font-size: 4rem;
    line-height: 1.15;
    color: #14142b;
    margin: 0 0 1.4rem 0;
    max-width: 60rem;
  }

  .mbd-heading span{
    color: #5b4fe9;
  }

  .mbd-subheading{
    font-family: 'Inter', sans-serif;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #6e7191;
    max-width: 58rem;
    margin: 0 0 5rem 0;
  }

  /* =========================================================
     DESKTOP TAB LAYOUT  (visible >= lg breakpoint)
  ========================================================= */

  .mbd-desktop-layout{
    display: none;
  }

  /* ----- left rail ----- */
  .mbd-tab-rail{
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 2.4rem;
  }

  .mbd-rail-track{
    position: absolute;
    left: 0;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 0.3rem;
    background: #f5f1e6;
    border-radius: 99px;
  }

  .mbd-rail-indicator{
    position: absolute;
    left: 0;
    width: 0.3rem;
    background: var(--main-color2);
    border-radius: 99px;
    transition: top 0.45s cubic-bezier(.65,0,.35,1), height 0.45s cubic-bezier(.65,0,.35,1);
  }

  .mbd-tab-btn{
    display: flex;
    align-items: center;
    gap: 1.6rem;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 1.8rem 1.6rem;
    cursor: pointer;
    border-radius: 1.2rem;
    transition: background 0.3s ease;
    margin-bottom: 0.4rem;
  }

  .mbd-tab-btn:hover{
    background: #ffffff;
  }

  .mbd-tab-btn.mbd-active{
    background: #ffffff;
    box-shadow: 0 0.8rem 2.4rem rgba(20,20,43,0.06);
  }

  .mbd-tab-icon{
    flex-shrink: 0;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: background 0.3s ease, transform 0.3s ease;
  }

  .mbd-tab-btn.mbd-active .mbd-tab-icon{
    background: var(--main-color2);
    transform: scale(1.05);
  }

  .mbd-tab-icon-img{
    width: 2.8rem;
    height: 2.8rem;
    /* forces the source icon to pure white, then dims it by default */
/*    filter: brightness(0) invert(1) brightness(0.65);*/
    transition: filter 0.3s ease;
  }

  .mbd-tab-btn.mbd-active .mbd-tab-icon-img{
    /* active tab: image brightness back to 100% */
    filter: brightness(0) invert(1) brightness(1);
  }

  .mbd-tab-text-group{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.4rem;
  }

  .mbd-tab-title{
    font-weight: 600;
    font-size: 1.8rem;
    color: #14142b;
  }

  .mbd-tab-caption{
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    color: #9795b5;
  }

  /* ----- right content panel ----- */
  .mbd-panel-frame{
    position: relative;
    background: #ffffff;
    border: 1px solid #ececf5;
    border-radius: 2.4rem;
    padding: 4.4rem;
    min-height: 56rem;
    overflow: hidden;
  }

  .mbd-panel{
    display: none;
    animation: mbdFadeIn 0.55s cubic-bezier(.4,0,.2,1);
  }

  .mbd-panel.mbd-panel-active{
    display: block;
  }

  @keyframes mbdFadeIn{
    from{
      opacity: 0;
      transform: translateY(1.6rem);
    }
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mbd-panel-title{
    font-weight: 700;
    font-size: 2.8rem;
    color: #14142b;
    margin: 0 0 1.6rem 0;
  }

  .mbd-panel-para{
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #6e7191;
    max-width: 56rem;
    margin: 0 0 2.8rem 0;
  }

  .mbd-checklist{
    list-style: none;
    margin: 0 0 3.6rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 3.2rem;
  }

  .mbd-checklist li{
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #14142b;
  }

  .mbd-checklist i{
    color: #12b76a;
    font-size: 1.9rem;
  }

  .mbd-video-frame{
    width: 100%;
    border-radius: 1.8rem;
    overflow: hidden;
    line-height: 0;
    border: 1px solid #ececf5;
  }

  .mbd-video-frame video{
    width: 100%;
    height: auto;
    max-height: 34rem;
    object-fit: cover;
    display: block;
  }

  .mbd-video-frame img{
    width: 100%;
  }

  /* =========================================================
     MOBILE / TABLET ACCORDION LAYOUT (visible < lg breakpoint)
  ========================================================= */

  .mbd-accordion-layout{
    display: block;
  }

  .mbd-acc-item{
    background: #ffffff;
    border: 1px solid #ececf5;
    border-radius: 18px;
    margin-bottom: 1.6rem;
    overflow: hidden;
  }

  .mbd-acc-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    width: 100%;
    background: transparent;
    border: none;
    padding: 1.8rem 2rem;
    cursor: pointer;
    text-align: left;
  }

  .mbd-acc-header-left{
    display: flex;
    align-items: center;
    gap: 1.4rem;
  }

  .mbd-acc-icon{
    flex-shrink: 0;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5b4fe9;
    transition: background 0.3s ease;
  }

  .mbd-acc-icon-img{
    width: 2.6rem;
    height: 2.6rem;
    filter: brightness(100);
    transition: filter 0.3s ease;
  }

  .mbd-acc-item.mbd-acc-open .mbd-acc-icon-img{
    /* open/active accordion item: image brightness back to 100% */
/*    filter: brightness(100);*/
  }

  .mbd-acc-title{
    font-weight: 600;
    font-size: 2rem;
    color: #14142b;
  }

  .mbd-acc-toggle{
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: #f2f1fb;
    color: #5b4fe9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: transform 0.4s cubic-bezier(.65,0,.35,1), background 0.3s ease, color 0.3s ease;
  }

  .mbd-acc-item.mbd-acc-open .mbd-acc-icon{
    background: #5b4fe9;
    color: #ffffff;
  }

  .mbd-acc-item.mbd-acc-open .mbd-acc-toggle{
    transform: rotate(135deg);
    background: #5b4fe9;
    color: #ffffff;
  }

  .mbd-acc-body-wrap{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.55s cubic-bezier(.65,0,.35,1);
  }

  .mbd-acc-body{
    padding: 0 2rem 2.4rem 2rem;
  }

  .mbd-acc-para{
    font-size: 1.6rem;
    line-height: 1.7;
    color: #6e7191;
    margin: 0 0 2rem 0;
  }

  .mbd-acc-checklist{
    list-style: none;
    margin: 0 0 2.2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .mbd-acc-checklist li{
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #14142b;
  }

  .mbd-acc-checklist i{
    color: #12b76a;
    font-size: 1.7rem;
  }

  .mbd-acc-video-frame{
    width: 100%;
    border-radius: 1.4rem;
    overflow: hidden;
    line-height: 0;
    border: 1px solid #ececf5;
  }

  .mbd-acc-video-frame video{
    width: 100%;
    height: auto;
    max-height: 22rem;
    object-fit: cover;
    display: block;
  }

  .mbd-acc-video-frame img{
    width: 100%;
  }
/*  END MBD Section*/

/* =====================================================
     BANK-FEATURES SECTION — all classes scoped with "bf-"
     ===================================================== */

  .bf-section{
    --bf-ink:#14132B;
    --bf-ink-soft:#5D5C7D;
    --bf-surface:#F5F4FC;
    --bf-surface-strong:#EAE6FA;
    --bf-white:#FFFFFF;
    --bf-accent:#5B4FE8;
    --bf-accent-dark:#4636C9;
    --bf-accent-light:#8A7FF5;
    --bf-accent-soft:#EDE9FE;
    --bf-coral:#FF6B4A;
    --bf-coral-light:#FF9478;
    --bf-green:#22B573;
    --bf-green-light:#5CD79B;
    --bf-line:#E3E0F7;

    position:relative;
    padding: 6rem 5%;
    color: var(--bf-ink);
    background: var(--bf-white);
    overflow:hidden;
    /*background: url(https://cgpe-docs.s3.ap-south-1.amazonaws.com/cgpey/new_cgpey/home_bg2.png);
    background-size: cover; background-position: center;*/
    isolation:isolate;
  }

  /* ambient depth blobs */
  .bf-section::before,
  .bf-section::after{
    content:'';
    position:absolute;
    width:46rem;
    height:46rem;
    border-radius:50%;
    filter: blur(9rem);
    opacity:.16;
    z-index:-1;
    pointer-events:none;
    display: none;
  }
  .bf-section::before{
    background: var(--bf-accent);
    top:-14rem;
    left:-10rem;
  }
  .bf-section::after{
    background: var(--bf-coral);
    bottom:-16rem;
    right:-8rem;
    opacity:.1;
  }

  .bf-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.8rem;
    font-size:1.2rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--bf-accent-dark);
    background:var(--bf-accent-soft);
    padding:.7rem 1.5rem;
    border-radius:999px;
    margin-bottom:1.8rem;
  }
  .bf-eyebrow i{ font-size:1.1rem; }

  .bf-heading-row{
    margin-bottom:4.4rem;
    max-width:72rem;
  }

  .bf-heading-row h1{
    font-family:'Inter', sans-serif;
    font-weight:800;
    font-size:3.8rem;
    line-height:1.15;
    margin:0 0 1.3rem;
    letter-spacing:-.03em;
    color: var(--bf-ink);
  }

  .bf-heading-row p{
    font-size:1.65rem;
    line-height:1.65;
    color:var(--bf-ink-soft);
    margin:0;
    font-weight:400;
  }

  /* ---------- generic card shell ---------- */
  .bf-card{
    position:relative;
    background: #f7f7f9;
    border-radius:2.6rem;
    padding:3.8rem 3.4rem;
    height:100%;
    opacity:0;
    transform:translateY(3.2rem);
    transition: opacity .7s ease, transform .7s ease, box-shadow .4s ease, border-color .4s ease;
    border:.1rem solid #E5E5E9;
    box-shadow: 0 .1rem 0 rgba(255,255,255,.6) inset;
  }
  .bf-card.bf-in-view{ opacity:1; transform:translateY(0); }
  .bf-card:hover{
    box-shadow: 0 3rem 6rem -3rem rgba(20,19,43,.28), 0 .1rem 0 rgba(255,255,255,.6) inset;
    border-color: var(--main-color2);
  }

  .bf-title{
    font-weight: 700;
    font-size: 3.4rem;
    margin:0 0 1.2rem;
    color: var(--bf-ink);
  }

  .bf-text{
    font-size:1.6rem;
    line-height:1.8;
    color:var(--bf-ink-soft);
    margin:0 0 2.2rem;
    max-width:44rem;
    font-weight:400;
  }

  .bf-link{
    display:inline-flex;
    align-items:center;
    gap:.9rem;
    font-weight:700;
    font-size:1.5rem;
    color: #034237;
    text-decoration:none;
    position:relative;
  }
  .bf-link::after{
    content:'';
    position:absolute;
    left:0; bottom:-.3rem;
    width:100%;
    height:.2rem;
    background: var(--main-color);
    transform: scaleX(0);
    transform-origin:left;
    transition: transform .35s ease;
  }
  .bf-link i{ font-size:1.3rem; transition: transform .3s ease; }
  .bf-link:hover{ color:var(--main-color); }
  .bf-link:hover::after{ transform: scaleX(1); }
  .bf-link:hover i{ transform:translateX(.5rem); }

  /* =========================================================
     LEFT CARD — Connected Transaction Banking
     ========================================================= */
  .bf-card-connect{ display:flex; flex-direction:column; }

  .bf-bank-visual{
    margin-top:3.6rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
  }

  .bf-chip-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.2rem;
    width:100%;
  }

  .bf-chip{
    display:flex;
    align-items:center;
    gap:1.1rem;
    background:var(--bf-white);
    border:.1rem solid var(--bf-line);
    border-radius:999px;
    padding:.9rem 1.7rem .9rem .9rem;
    box-shadow: 0 1rem 2.2rem -1.2rem rgba(20,19,43,.2);
    animation: bf-float 4.5s ease-in-out infinite;
    transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
  }
  .bf-chip:hover{
    box-shadow: 0 1.4rem 2.6rem -1.2rem rgba(91,79,232,.35);
    border-color: var(--bf-accent-light);
    transform: translateY(-.3rem);
  }
  .bf-chip:nth-child(1){ animation-delay:0s; }
  .bf-chip:nth-child(2){ animation-delay:.5s; }
  .bf-chip:nth-child(3){ animation-delay:1s; }

  @keyframes bf-float{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-.6rem); }
  }

  .bf-chip-icon{
    width:3.3rem;
    height:3.3rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.3rem;
    flex-shrink:0;
    box-shadow: 0 .5rem 1rem -.3rem rgba(20,19,43,.35);
  }

  .bf-chip-icon img{
    width: 2.4rem;
    border-radius: 50%;
  }

  /*.bf-chip-icon.bf-icon-1{ background: linear-gradient(135deg, var(--bf-coral-light), var(--bf-coral)); }
  .bf-chip-icon.bf-icon-2{ background: linear-gradient(135deg, var(--bf-accent-light), var(--bf-accent-dark)); }
  .bf-chip-icon.bf-icon-3{ background: linear-gradient(135deg, #3B3A5C, var(--bf-ink)); }*/

  .bf-chip-label{ font-size:1.36rem; color:var(--bf-ink-soft); white-space:nowrap; font-weight:500; }
  .bf-chip-label b{ color:var(--bf-ink); font-weight:700; font-variant-numeric: tabular-nums; }

  .bf-connector{
    position:relative;
    width:.2rem;
    height:5.2rem;
    background: repeating-linear-gradient(to bottom, var(--bf-line) 0 .6rem, transparent .6rem 1.2rem);
  }
  .bf-connector .bf-pulse{
    position: absolute;
    left: 50%;
    top: 0;
    width: .9rem;
    height: .9rem;
    margin-left: -.45rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f5f07f, #fe8008);
    box-shadow: 0 0 0 .5rem #fefee9, 0 0 1.6rem rgb(232 147 79 / 50%);
  }
  @keyframes bf-travel{
    0%{ top:0; opacity:0; }
    10%{ opacity:1; }
    90%{ opacity:1; }
    100%{ top:100%; opacity:0; }
  }

  .bf-total-box{
    position: relative;
    background: linear-gradient(180deg, var(--bf-white), #fefde9);
    border: .15rem solid var(--main-color2);
    border-radius: 2rem;
    padding: 1.8rem 3.2rem;
    text-align: center;
    box-shadow: 0 2rem 3.6rem -1.6rem rgb(232 220 79 / 50%);
  }
  .bf-total-label{
    display:block;
    font-size:1.2rem;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--bf-ink-soft);
    margin-bottom:.5rem;
  }

  .bf-total-amount{
    display:block;
    font-weight:800;
    font-size:2.4rem;
    letter-spacing:-.02em;
    font-variant-numeric: tabular-nums;
    color: var(--main-color2);
  }

  .bf-wallet-btn{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:1rem;
    border:none;
    cursor:pointer;
    background: var(--main-color);
    color:#fff;
    font-weight:700;
    font-size:1.5rem;
    padding:1.35rem 2.9rem;
    border-radius:999px;
/*    box-shadow: 0 1.6rem 3rem -1.4rem rgba(70,54,201,.65);*/
    transition: transform .3s ease, box-shadow .3s ease;
  }

  .bf-wallet-btn img{
    width: 20px;
  }

  .bf-wallet-btn i{ font-size:1.4rem; }
  .bf-wallet-btn::after{
    content:'';
    position:absolute;
    top:0; left:-60%;
    width:40%; height:100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg);
    transition: left .7s ease;
  }
  .bf-wallet-btn:hover{
    transform: translateY(-.35rem);
  }
  .bf-wallet-btn:hover::after{ left:130%; }

  /* =========================================================
     TOP-RIGHT CARD — Developer-First Banking Infrastructure
     ========================================================= */
  .bf-api-grid{ margin-top:3.2rem !important; }

  .bf-api-pill{
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;
    gap: 10px;
    background:var(--bf-white);
    border:.1rem solid var(--bf-line);
    border-radius:1.8rem;
    padding:2.1rem 1.9rem;
    min-height:11.5rem;
    overflow:hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .bf-api-pill::before{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(135deg, var(--bf-accent-soft), transparent 60%);
    opacity:0;
    transition: opacity .35s ease;
  }
  .bf-api-pill:hover{
    transform: translateY(-.7rem);
    box-shadow: 0 2rem 3.4rem -1.6rem rgba(20,19,43,.28);
    border-color: var(--bf-accent);
  }
  .bf-api-pill:hover::before{ opacity:1; }


  .bf-api-icon img{
    width: 55px;
  }

  .bf-api-pill:hover .bf-api-icon{ transform: rotate(-8deg) scale(1.1); }

  .bf-api-pill span{
    position:relative; z-index:1;
    font-weight:700;
    font-size:1.42rem;
    color:var(--bf-ink);
  }

  .bf-api-pill.bf-api-code{ background: var(--bf-ink); border-color: var(--bf-ink); }
  .bf-api-pill.bf-api-code::before{ background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 60%); }
  .bf-api-pill.bf-api-code .bf-api-icon{
    background: rgba(255,255,255,.08);
    color: var(--bf-coral-light);
    box-shadow:none;
  }
  .bf-api-pill.bf-api-code span{
    color:#fff;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:1.32rem;
    font-variant-numeric: tabular-nums;
  }
  .bf-term-dots{ display:flex; gap:.5rem; position:relative; z-index:1; }
  .bf-term-dots span{ width:.8rem; height:.8rem; border-radius:50%; }
  .bf-term-dots span:nth-child(1){ background:#FF5F57; }
  .bf-term-dots span:nth-child(2){ background:#FEBC2E; }
  .bf-term-dots span:nth-child(3){ background:#28C840; }

  .bf-cursor{
    display:inline-block;
    width:.8rem; height:1.4rem;
    background:var(--bf-coral-light);
    margin-left:.3rem;
    vertical-align:middle;
    animation: bf-blink 1s step-end infinite;
  }
  @keyframes bf-blink{ 0%, 100%{ opacity:1; } 50%{ opacity:0; } }

  /* =========================================================
     BOTTOM-RIGHT CARD — Intelligent Business Operations
     ========================================================= */
  .bf-ops-body{
    margin-top:3rem;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:3.4rem;
  }

  .bf-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.7rem; }
  .bf-legend li{
    display:flex;
    align-items:center;
    gap:1.2rem;
    font-size:1.44rem;
    font-weight:600;
    color:var(--bf-ink);
    cursor:default;
    padding:.5rem .7rem;
    border-radius:1rem;
    transition: background .25s ease, transform .25s ease;
  }
  .bf-legend li:hover,
  .bf-legend li.bf-legend-active{
    background: var(--bf-surface-strong);
    transform: translateX(.4rem);
  }
  .bf-dot{ width:1.2rem; height:1.2rem; border-radius:50%; flex-shrink:0; box-shadow: 0 0 0 .4rem transparent; transition: box-shadow .25s ease; }
  .bf-legend li:hover .bf-dot,
  .bf-legend li.bf-legend-active .bf-dot{ box-shadow: 0 0 0 .4rem currentColor22; }
  .bf-dot-coral{ background:var(--bf-coral); }
  .bf-dot-accent{ background:var(--bf-accent); }
  .bf-dot-green{ background:var(--bf-green); }
  .bf-legend-pct{ margin-left:auto; font-weight:700; color:var(--bf-ink-soft); font-variant-numeric: tabular-nums; font-size:1.3rem; }

  .bf-donut-wrap{
    position:relative;
    width:21rem;
    height:21rem;
    margin-left:auto;
    flex-shrink:0;
    filter: drop-shadow(0 1.8rem 3rem rgba(20,19,43,.14));
  }
  .bf-donut-wrap svg{
    width:100%;
    height:100%;
    transform-origin:50% 50%;
    transform: rotate(-90deg) scale(.7);
    opacity:0;
    transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1.1s ease;
  }
  .bf-in-view .bf-donut-wrap svg{ transform: rotate(-90deg) scale(1); opacity:1; }

  .bf-donut-wrap circle{ fill:none; stroke-width:2.5rem; }
  .bf-track{ stroke: var(--bf-surface-strong); stroke-width:2.5rem; }

  .bf-seg{
    stroke-linecap:round;
    cursor:pointer;
    transition: stroke-width .25s ease, opacity .25s ease;
  }
  .bf-seg-coral{  stroke: url(#bf-grad-coral);  stroke-dasharray: 62 377.8;  stroke-dashoffset: 2; }
  .bf-seg-accent{ stroke: url(#bf-grad-accent); stroke-dasharray: 193.9 245.9; stroke-dashoffset: -68; }
  .bf-seg-green{  stroke: url(#bf-grad-green);  stroke-dasharray: 171.9 267.9; stroke-dashoffset: -265.9; }

  .bf-ops-body.bf-hovering .bf-seg{ opacity:.35; }
  .bf-ops-body.bf-hovering .bf-seg.bf-seg-hot{ opacity:1; stroke-width:2.9rem; }

  .bf-donut-center{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:.4rem;
  }
  .bf-donut-center small{ font-size:1.22rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--bf-ink-soft); }
  .bf-donut-center strong{
    font-family:'Inter', sans-serif;
    font-weight:800;
    font-size:2rem;
    letter-spacing:-.02em;
    color:var(--bf-ink);
    font-variant-numeric: tabular-nums;
  }
  .bf-donut-center em{ font-style:normal; font-size:1.18rem; font-weight:500; color:var(--bf-ink-soft); }
/*  END BF DONUT SECTION*/

/* ===================== INDUSTRY SOLUTIONS SECTION ===================== */
  .indsol-section{
    padding: 6rem 5%;
    background: #f8fcfa;
    overflow:hidden;
  }

  .indsol-wrapper{
    max-width: 132rem;
    margin: 0 auto;
  }

  .indsol-eyebrow{
    display:inline-flex;
    align-items:center;
    gap: 0.8rem;
    font-size:1.3rem;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:#5B4FE8;
    margin-bottom:1.2rem;
  }
  .indsol-eyebrow::before{
    content:"";
    width: 2.4rem;
    height: 0.2rem;
    background:#5B4FE8;
    border-radius: 1rem;
  }

  .indsol-heading{
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing:-0.02em;
    color:#14121F;
    margin-bottom: 1.2rem;
  }

  .indsol-subheading{
    font-size:1.6rem;
    color:#64607A;
    max-width: 60rem;
    margin-bottom: 4rem;
    line-height:1.6;
  }

  /* ---------- TABS ---------- */
  .indsol-tabs-outer{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -ms-overflow-style:none;
    scrollbar-width:none;
    margin-bottom: 4rem;
    padding-bottom: 0.4rem;
  }
  .indsol-tabs-outer::-webkit-scrollbar{ display:none; }

  .indsol-tabs{
    display:flex;
    gap:1rem;
    width:max-content;
  }

  .indsol-tab-btn{
    flex:0 0 auto;
    white-space:nowrap;
    font-family:inherit;
    font-size:1.6rem;
    font-weight:600;
    color:#14121F;
    background:#FFFFFF;
    border:0.1rem solid #E5E3F3;
    padding: 1.3rem 2.4rem;
    border-radius: 999px;
    cursor:pointer;
    transition: background .35s ease, color .35s ease, border-color .35s ease, transform .25s ease;
  }
  .indsol-tab-btn:hover{
    border-color: var(--main-color);
    color: var(--main-color);
  }
  .indsol-tab-btn.is-active{
    background:#14121F;
    color:#FFFFFF;
    border-color:#14121F;
/*    transform: scale(1.03);*/
  }
  .indsol-tab-btn:active{ transform: scale(0.97); }

  /* ---------- PANELS ---------- */
  .indsol-panels{ position:relative; }

  .indsol-panel{
    display:none;
    background:#FFFFFF;
    border-radius: 2.4rem;
    padding: 4rem;
    box-shadow: 0 2rem 5rem -2.5rem rgba(20,18,31,0.25);
  }

  .indsol-panel.is-active{
    display:block;
    animation: indsolPanelIn .55s cubic-bezier(.22,.9,.32,1);
  }

  @keyframes indsolPanelIn{
    from{ opacity:0; transform: translateY(1.6rem); }
    to{ opacity:1; transform: translateY(0); }
  }

  /* ---------- SHAPE / FLOW ROW ---------- */
  .indsol-flow{ --indsol-row-min-h: 34rem; }

  .indsol-shape-col{
    display:flex;
    margin-bottom: 2.5rem;
  }

  .indsol-shape-card{
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #f9fffd 0%, #f1fef9 100%);
    border: 0.1rem solid #cbded6;
    border-radius: 1.8rem;
    padding: 3.4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 30rem;
    clip-path: polygon(0 0, 78% 0, 100% 18%, 100% 100%, 0 100%);
  }

  .indsol-shape-title{
    font-size:2.6rem;
    font-weight:800;
    line-height:1.28;
    letter-spacing:-0.01em;
    color:#14121F;
    text-transform:uppercase;
  }
  .indsol-shape-title span{ color: var(--main-color); }

  .indsol-shape-tagline{
    font-size:1.7rem;
    font-weight:700;
    color:#1E1B2E;
    line-height:1.45;
    margin-top: 2.4rem;
  }

  /* ---------- CONNECTOR (desktop only) ---------- */
  .indsol-connector-col{
    display:flex;
    align-items:stretch;
    position:relative;
  }

  .indsol-connector{
    position:relative;
    width:100%;
    height:100%;
    min-height: 30rem;
  }

  .indsol-line{ position:absolute; background-repeat:repeat-x; }

  /* single line from shape to trunk, at the level of the middle card */
  .indsol-line-shape{
    left:0;
    top:50%;
    width:50%;
    height: 0.2rem;
    transform: translateY(-50%);
    background-image: repeating-linear-gradient(to right, #b2f0d6 0 0.8rem, transparent 0.8rem 1.6rem);
    background-size: 3.2rem 100%;
    animation: indsolFlowX 1.1s linear infinite;
  }

  /* vertical trunk connecting the three branch levels */
  .indsol-line-trunk{
    left:50%;
    top:16.66%;
    width:0.2rem;
    height:66.68%;
    transform: translateX(-50%);
    background-repeat: repeat-y;
    background-image: repeating-linear-gradient(to bottom, #b2f0d6 0 0.8rem, transparent 0.8rem 1.6rem);
    background-size: 100% 3.2rem;
    animation: indsolFlowY 1.1s linear infinite;
  }

  .indsol-branch{
    left:50%;
    width:50%;
    height:0.2rem;
    background-image: repeating-linear-gradient(to bottom, #b2f0d6 0 0.8rem, transparent 0.8rem 1.6rem);
    background-size: 3.2rem 100%;
    animation: indsolFlowX 1.1s linear infinite;
  }
  .indsol-branch-1{ top:16.66%; }
  .indsol-branch-2{ top:50%; }
  .indsol-branch-3{ top:83.33%; }

  @keyframes indsolFlowX{
    from{ background-position-x: 0; }
    to{ background-position-x: -3.2rem; }
  }
  @keyframes indsolFlowY{
    from{ background-position-y: 0; }
    to{ background-position-y: -3.2rem; }
  }

  /* pulsing node at the end of each branch, replaces an arrow icon */
  .indsol-node{
    position:absolute;
    right:-0.1rem;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--main-color);
    border-radius:50%;
    transform: translate(50%,-50%);
  }
  .indsol-node::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border: 0.15rem solid var(--main-color);
    animation: indsolPulse 1.6s ease-out infinite;
  }
  .indsol-node-1{ top:16.66%; }
  .indsol-node-2{ top:50%; }
  .indsol-node-3{ top:83.33%; }
  .indsol-node-2::before{ animation-delay:.35s; }
  .indsol-node-3::before{ animation-delay:.7s; }

  @keyframes indsolPulse{
    0%{ transform:scale(1); opacity:0.9; }
    100%{ transform:scale(2.4); opacity:0; }
  }

  /* mobile connector (simple vertical) */
  .indsol-connector-mobile{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin: -0.6rem 0 1.4rem;
  }
  .indsol-connector-mobile .indsol-vline{
    width:0.2rem;
    height:3.2rem;
    background-image: repeating-linear-gradient(to bottom, #B9B2F0 0 0.8rem, transparent 0.8rem 1.6rem);
    background-size: 100% 3.2rem;
    animation: indsolFlowY 1.1s linear infinite;
  }
  .indsol-connector-mobile .indsol-node{
    position:relative;
    right:auto;
    transform:none;
  }

  /* ---------- FEATURE CARDS ---------- */
  .indsol-features-col{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap: 1.6rem;
    height:100%;
  }

  .indsol-feature-item{
    display: flex;
    align-items: flex-start;
    gap: 1.8rem;
    background: #f5fffb;
    border-radius: 18px;
    border: 1px solid #cbded6;
    padding: 2rem 2.2rem;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
  }
  

  .indsol-feature-icon{
    flex:0 0 auto;
    width: 5rem;
    height: 5rem;
    border-radius:18px;
    background: var(--main-color);
    color:#5B4FE8;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.9rem;
  }

  .indsol-feature-icon img{
    width: 2.5rem; filter: brightness(100);
  }

  .indsol-feature-text h4{
    font-size:1.7rem;
    font-weight:700;
    color:#14121F;
    margin-bottom:0.5rem;
  }
  .indsol-feature-text p{
    font-size:1.4rem;
    color:#65607D;
    line-height:1.55;
  }

  /* ---------- CTA ---------- */
  .indsol-cta-wrap{
    display:flex;
    justify-content:center;
    margin-top: 3.6rem;
  }

  .indsol-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:1rem;
    font-size:1.5rem;
    font-weight:600;
    color:#14121F;
    background:#FFFFFF;
    border:0.1rem solid #E1DEF3;
    padding: 1.4rem 2.6rem;
    border-radius:999px;
    text-decoration:none;
    transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
  }
  .indsol-cta-btn i{ transition: transform .3s ease; }
  .indsol-cta-btn:hover{
    background:#14121F;
    color:#FFFFFF;
    border-color:#14121F;
    transform: translateY(-0.2rem);
  }
  .indsol-cta-btn:hover i{ transform: translateX(0.4rem); }
/*  INDSOL feature section end*/
/* ================= INFRA HERO SECTION ================= */
  .infra-hero{
    position: relative;
    width: 100%;
    padding: 6rem 5%;
    overflow: hidden;
    background-color: #034239;
    isolation: isolate;
  }

  .infra-hero__video-wrap{
    position:absolute;
    inset:0;
    z-index:-2;
    overflow:hidden;
  }

  .infra-hero__video{
    position:absolute;
    top:50%; left:50%;
    min-width:100%; min-height:100%;
    width:auto; height:auto;
    transform:translate(-50%,-50%);
    object-fit:cover;
    filter:saturate(0.9) brightness(0.6);
  }


  .infra-hero__content{
    position:relative;
    max-width:112rem;
    margin:0 auto;
    text-align:center;
    color:#fff;
  }

  .infra-hero__title{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-size:clamp(3.2rem, 5.2vw, 5.8rem);
    line-height:1.08;
    margin-bottom:2.4rem;
  }

  .infra-hero__title span{
    display:block;
  }

  .infra-hero__subtext{
    font-size:1.7rem;
    font-weight:400;
    line-height:1.6;
    color:rgba(255,255,255,0.88);
    max-width:78rem;
    margin:0 auto 1.6rem;
  }

  .infra-hero__tagline{
    font-size:1.7rem;
    font-weight:700;
    margin-bottom:3.4rem;
  }

  .infra-hero__tagline .fa-arrow-right{
    margin:0 0.6rem;
    font-size:1.4rem;
    vertical-align:middle;
  }

  /* ---------- Tabs ---------- */
  .infra-hero__tabs{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.4rem;
    margin-bottom:4.8rem;
  }

  .infra-hero__tab{
    appearance:none;
    border:1.5px solid rgba(255,255,255,0.55);
    background:transparent;
    color:#fff;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:1.5rem;
    padding:1.1rem 2.6rem;
    border-radius:999px;
    cursor:pointer;
    transition: all 0.35s ease;
    white-space:nowrap;
  }

  .infra-hero__tab:hover{
    border-color:#fff;
    background:rgba(255,255,255,0.08);
  }

  .infra-hero__tab.is-active{
    background:#fff;
    color:#034239;
    border-color:#fff;
    box-shadow:0 0.8rem 2rem rgba(0,0,0,0.25);
  }

  /* ---------- Tab Panel / Image Card ---------- */
  .infra-hero__panel-wrap{
    position:relative;
    max-width:82rem;
    margin:0 auto;
  }

  .infra-hero__card{
    position:relative;
    overflow:hidden;
    background: transparent;
    aspect-ratio: 16 / 10;
  }

  .infra-hero__card::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgb(6 36 14 / 65%) 100%);
    pointer-events:none;
  }

  .infra-hero__panel{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transform:translateX(6rem);
    transition: transform 0.55s cubic-bezier(.22,.9,.32,1), opacity 0.5s ease;
  }

  .infra-hero__panel.is-active{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
    z-index:2;
  }

  .infra-hero__panel-img{
    width:100%;
  }

  .infra-hero__panel-label{
    position:absolute;
    left:2.4rem;
    bottom:2.2rem;
    z-index:3;
    color:#fff;
    font-size:1.5rem;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:1rem;
    background: rgb(3 66 57 / 45%);
    padding:0.9rem 1.6rem;
    border-radius:999px;
    backdrop-filter:blur(6px);
  }

  .infra-hero__panel-label i{
    color: var(--main-color);
  }

  .infra-hero__glow{
    position:absolute;
    width:70%;
    height:70%;
    left:15%;
    top:20%;
    background:radial-gradient(circle, rgba(139,92,246,0.55), transparent 70%);
    filter:blur(6rem);
    z-index:0; display: none;
    pointer-events:none;
  }
/*  End infra video section*/

/* =========================================================
     SECTION: witty-finance
     Every class in this page is prefixed with "witty-finance"
     so nothing here leaks out or gets overridden elsewhere.
  ========================================================= */

  .witty-finance{
    position:relative;
    width:100%;
    padding:6rem 5%;
    overflow:hidden;
  }

  .witty-finance__inner{
    position:relative;
    max-width:136rem;
    margin:0 auto;
  }

  /* ---------- ambient background texture ---------- */
  .witty-finance__glow-one{
    position:absolute;
    top:-12rem;
    right:-8rem;
    width:45rem;
    height:45rem;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%);
    pointer-events:none;
  }
  .witty-finance__glow-two{
    position:absolute;
    bottom:-10rem;
    left:-10rem;
    width:40rem;
    height:40rem;
    background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 70%);
    pointer-events:none;
  }

  /* ============ HERO PANEL ============ */
  .witty-finance__hero{
    position: relative;
    border-radius: 2.4rem;
    padding: 1.5rem;
/*    box-shadow: 0 3rem 6rem rgba(10, 6, 50, 0.35);*/
    overflow: hidden;
    /*background: url(https://cgpe-docs.s3.ap-south-1.amazonaws.com/cgpey/new_cgpey/card_bg.jpg);
    background-size: contain;
    background-attachment: fixed;
    background-position: center;*/
    background: #f1f1f7;
  }

  /* top bar: CTA pill + avatar */
  .witty-finance__topbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:1.6rem;
    margin-bottom:3.2rem;
  }

  .witty-finance__cta-pill{
    font-weight:700;
    font-size:1.4rem;
    color: #7984a5;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgb(188 192 198);
    padding:1.2rem 2.4rem;
    border-radius:5rem;
    cursor:pointer;
    letter-spacing:0.01em;
    backdrop-filter: blur(6px);
    transition: transform .25s ease, background .25s ease;
  }
  .witty-finance__cta-pill:hover{
    background: rgba(255,255,255,0.26);
    transform: translateY(-0.2rem);
  }
  .witty-finance__cta-pill:focus-visible{
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
  }

  .witty-finance__avatar{
    width:5.6rem;
    height:5.6rem;
    border-radius:50%;
    overflow:hidden;
    border:2px solid rgba(255,255,255,0.6);
    flex-shrink:0;
  }
  .witty-finance__avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* chat row: logo + live message bubble */
  .witty-finance__chat-row{
    display:flex;
    align-items:center;
    gap:1.6rem;
    margin-bottom:3.2rem;
  }

  .witty-finance__logo{
    width:6.4rem;
    height:6.4rem;
    min-width:6.4rem;
    border-radius:50%;
    background:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 0.8rem 1.6rem rgba(10,6,50,0.25);
  }
  .witty-finance__logo img{
    width: 30px;
  }

  .witty-finance__bubble{
    position:relative;
    background:#FFFFFF;
    color:#241A5E;
    font-size:1.5rem;
    line-height:1.5;
    font-weight:500;
    padding:1.8rem 2.6rem;
    border-radius:1.6rem;
    box-shadow: 0 1.2rem 2.4rem rgba(10,6,50,0.2);
    max-width:70rem;
  }
  .witty-finance__bubble b{
    font-weight:700;
  }
  .witty-finance__bubble-pulse{
    display:inline-block;
    width:0.8rem;
    height:0.8rem;
    border-radius:50%;
    background:#22C57B;
    margin-right:0.8rem;
    box-shadow: 0 0 0 rgba(34,197,123,0.6);
    animation: witty-finance-pulse 1.8s infinite;
  }
  @keyframes witty-finance-pulse{
    0%{ box-shadow: 0 0 0 0 rgba(34,197,123,0.55); }
    70%{ box-shadow: 0 0 0 0.9rem rgba(34,197,123,0); }
    100%{ box-shadow: 0 0 0 0 rgba(34,197,123,0); }
  }

  /* intro card (white) */
  .witty-finance__intro{
    position:relative;
    background:#FFFFFF;
    border-radius:2rem;
    padding:3.6rem;
    display:flex;
    align-items:center;
    gap:3.2rem;
  }

  .witty-finance__intro-left{
    flex:0 0 auto;
  }
  .witty-finance__title{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:3.2rem;
    line-height:1.2;
    color:#161029;
    max-width:32rem;
  }

  .witty-finance__divider{
    width:1px;
    align-self:stretch;
    background:#E3E1F0;
    flex-shrink:0;
  }

  .witty-finance__intro-right{
    flex:1 1 auto;
    min-width:0;
  }
  .witty-finance__desc{
    font-size:1.55rem;
    line-height:1.65;
    color:#4A4664;
    font-weight:500;
    margin-bottom:2.4rem;
  }

  .witty-finance__badges{
    display:flex;
    flex-wrap:wrap;
    gap:1.2rem;
    list-style:none;
  }
  .witty-finance__badge{
    display:flex;
    align-items:center;
    gap:0.9rem;
    background:#E4F6EE;
    color:#1C3A2C;
    font-size:1.35rem;
    font-weight:600;
    padding:1rem 1.8rem;
    border-radius:5rem;
    white-space:nowrap;
  }
  .witty-finance__badge i{
    color:#1DAA6D;
    font-size:1.5rem;
  }

  /* ============ FEATURE CARDS ROW ============ */
  .witty-finance__features{
    margin-top:2.4rem;
  }

  .witty-finance__feature-col{
    margin-bottom:2.4rem;
  }

  .witty-finance__feature{
    position:relative;
    height:100%;
    border-radius:2.4rem;
    padding:.5rem;
    overflow:hidden;
    background: #f1f1f7;
  }
  .witty-finance__feature--esg{
    background: #f1f1f7;
  }

  .witty-finance__feature-deco{
    position:absolute;
    top:4rem;
    right:3.4rem;
    width:12rem;
    height:9rem;
    opacity:0.55;
    pointer-events:none;
  }

  .witty-finance__feature-card{
    background:#FFFFFF;
    border-radius:2rem;
    padding: 2rem;
/*    box-shadow: 0 -1.2rem 3rem rgba(10,6,50,0.18);*/
    height: 100%;
  }

  .witty-finance__feature-heading{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:2.4rem;
    color:#161029;
    margin-bottom:1.6rem;
  }

  .witty-finance__feature-text{
    font-size:1.45rem;
    line-height:1.65;
    color:#4A4664;
    font-weight:500;
    margin-bottom:2.4rem;
  }

  .witty-finance__feature-list{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    background:#E4F6EE;
    border-radius:1.6rem;
    padding:1.8rem 2rem;
    gap:1.2rem 2.8rem;
  }
  .witty-finance__feature-list li{
    display:flex;
    align-items:center;
    gap:0.9rem;
    font-size:1.35rem;
    font-weight:600;
    color:#1C3A2C;
    flex:1 1 20rem;
  }
  .witty-finance__feature-list i{
    color:#1DAA6D;
    font-size:1.5rem;
    flex-shrink:0;
  }
/*End witty finance section*/

/*Security trust section*/
/* ============ SECURITY-TRUST SECTION ============ */
  .security-trust-section{
    --st-bg: #05080b;
    --st-accent: #8a2be2;
    --st-accent-soft: rgba(138,43,226,0.16);
    --st-accent-glow: rgba(138,43,226,0.5);
    --st-text-primary: #f4f7f7;
    --st-text-secondary: #9baab0;
    --st-text-muted: #6b787d;
    --st-divider: rgba(255,255,255,0.09);
    --st-card-bg: rgba(255,255,255,0.035);
    --st-card-border: rgba(255,255,255,0.09);

    position: relative;
    width: 100%;
    padding: 6rem 5%;
    background: var(--st-bg);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    isolation: isolate;
  }

  .security-trust-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    opacity:0.55;
  }

  .security-trust-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(138,43,226,0.10), transparent 60%),
      linear-gradient(115deg, rgba(4,6,10,0.97) 20%, rgba(4,6,10,0.88) 55%, rgba(4,6,10,0.7) 100%),
      rgba(4,6,10,0.55);
  }

  .security-trust-grid-lines{
    position:absolute;
    inset:0;
    z-index:1;
    background-image:
      linear-gradient(rgba(138,43,226,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(138,43,226,0.05) 1px, transparent 1px);
    background-size: 4.4rem 4.4rem;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 40%, black 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 65% 40%, black 10%, transparent 75%);
  }

  .security-trust-inner{
    position:relative;
    z-index:2;
    max-width: 132rem;
    margin: 0 auto;
  }

  /* ---------- Header ---------- */
  .security-trust-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:0.8rem;
    font-family:'Inter', sans-serif;
    font-size:1.2rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color: var(--main-color);
    margin-bottom:2rem;
    opacity:0;
    animation: st-fade-up 0.7s ease forwards;
  }
  .security-trust-eyebrow::before{
    content:"";
    width:2.6rem;
    height:1px;
    background: var(--main-color);
  }
  .security-trust-eyebrow .st-pulse-dot{
    width:0.6rem; height:0.6rem;
    border-radius:50%;
    background: var(--main-color);
    box-shadow: 0 0 0 0 var(--st-accent-glow);
    animation: st-dot-pulse 2s infinite;
  }

  .security-trust-title{
    font-weight:800;
    text-transform:uppercase;
    font-size: 5rem
    line-height:1.18;
    color: var(--st-text-primary);
    margin-bottom:2.2rem;
    opacity:0;
    animation: st-fade-up 0.7s ease 0.1s forwards;
  }
  .security-trust-title span{
    color: var(--main-color);
    -webkit-text-stroke: 0.1rem transparent;
  }

  .security-trust-desc{
    font-size:1.65rem;
    line-height:1.6;
    color: var(--st-text-secondary);
    max-width: 46rem;
    margin-bottom:4.4rem;
    opacity:0;
    animation: st-fade-up 0.7s ease 0.2s forwards;
  }

  /* ---------- Feature grid ---------- */
  .security-trust-features{
    --st-row-gap: 3.2rem;
    opacity:0;
    animation: st-fade-up 0.7s ease 0.3s forwards;
  }

  .security-trust-feature{
    display:flex;
    gap:1.6rem;
    padding: 2.2rem 0;
    position:relative;
  }

  .security-trust-feature-icon{
    flex-shrink:0;
    width:4.2rem;
    height:4.2rem;
    border-radius:0.9rem;
    display:flex;
    align-items:center;
    justify-content:center;
    background: var(--st-accent-soft);
    border: 1px solid rgba(138,43,226,0.3);
    color: var(--main-color);
    font-size:1.7rem;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .security-trust-feature:hover .security-trust-feature-icon{
    transform: translateY(-0.3rem);
    box-shadow: 0 0.6rem 1.8rem -0.4rem var(--st-accent-glow);
  }

  .security-trust-feature-title{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:1.78rem;
    letter-spacing:0.01em;
    color: var(--st-text-primary);
    margin-bottom:0.6rem;
  }

  .security-trust-feature-text{
    font-size:1.42rem;
    line-height:1.55;
    color: var(--st-text-secondary);
  }

  .security-trust-feature-row{
    border-bottom: 1px dashed var(--st-divider);
  }
  .security-trust-feature-row:last-child{
    border-bottom:none;
  }

  .security-trust-col-divider{
    border-left: 1px solid var(--st-divider);
  }
  @media (max-width: 767px){
    .security-trust-col-divider{ border-left:none; border-top:1px solid var(--st-divider); }
  }

  /* ---------- Badges ---------- */
  .security-trust-badges{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:1.4rem;
    margin-top:4.8rem;
    padding-top:3.6rem;
    border-top: 1px solid var(--st-divider);
    opacity:0;
    animation: st-fade-up 0.7s ease 0.4s forwards;
  }

  .security-trust-badge{
    display:flex;
    align-items:center;
    gap:0.8rem;
    padding:0.9rem 1.6rem;
    border-radius:0.7rem;
    background: var(--st-card-bg);
    border: 1px solid var(--st-card-border);
    font-family:'Inter', sans-serif;
    font-size:1.15rem;
    letter-spacing:0.05em;
    color: var(--st-text-secondary);
    transition: border-color 0.3s ease, color 0.3s ease;
  }
  .security-trust-badge:hover{
    border-color: rgba(138,43,226,0.5);
    color: var(--st-text-primary);
  }
  .security-trust-badge i{ color: var(--main-color); font-size:1.4rem; }

  .security-trust-badge-brand{
    font-family:'Inter', sans-serif;
    font-size:1.9rem;
    font-weight:600;
    color: var(--st-text-primary);
    letter-spacing:0.02em;
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:0.7rem;
    display: none;
    opacity:0.85;
  }
  .security-trust-badge-brand i{ color: var(--main-color); font-size:1.7rem; }

  /* ---------- Signature: live console ---------- */
  .security-trust-console-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    opacity:0;
    animation: st-fade-up 0.8s ease 0.35s forwards;
  }

  .security-trust-console{
    position:relative;
    width:100%;
    max-width:38rem;
    border-radius:1.6rem;
    background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    border: 1px solid var(--st-card-border);
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    padding:2.8rem 2.8rem 3.2rem;
    box-shadow: 0 3rem 6rem -2rem rgba(0,0,0,0.6);
  }

  .security-trust-console::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:1.6rem;
    padding:1px;
    background: linear-gradient(140deg, rgba(138,43,226,0.5), transparent 40%, transparent 70%, rgba(138,43,226,0.25));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events:none;
  }

  .security-trust-console-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:2.4rem;
  }

  .security-trust-console-title{
    font-family:'Inter', sans-serif;
    font-size:1.2rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color: var(--st-text-muted);
  }

  .security-trust-console-live{
    display:flex;
    align-items:center;
    gap:0.7rem;
    font-family:'Inter', sans-serif;
    font-size:1.15rem;
    color: var(--main-color);
  }
  .security-trust-console-live .st-pulse-dot{
    width:0.7rem; height:0.7rem; border-radius:50%;
    background: var(--main-color);
    box-shadow: 0 0 0 0 var(--st-accent-glow);
    animation: st-dot-pulse 1.8s infinite;
  }

  .security-trust-console-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.5rem 0;
    border-bottom:1px solid var(--st-divider);
  }
  .security-trust-console-row:last-of-type{ border-bottom:none; }

  .security-trust-console-label{
    display:flex;
    align-items:center;
    gap:1rem;
    font-size:1.42rem;
    color: var(--st-text-secondary);
  }
  .security-trust-console-label i{ color: var(--main-color); font-size:1.5rem; width:1.8rem; }

  .security-trust-console-value{
    font-family:'Inter', sans-serif;
    font-size:1.28rem;
    color: var(--st-text-primary);
  }
  .security-trust-console-value.st-ok{ color: var(--main-color); }

  .security-trust-scanbar{
    position:relative;
    width:8rem;
    height:0.5rem;
    border-radius:0.4rem;
    background: rgba(255,255,255,0.08);
    overflow:hidden;
  }
  .security-trust-scanbar::after{
    content:"";
    position:absolute;
    top:0; left:-40%;
    width:40%; height:100%;
    background: linear-gradient(90deg, transparent, var(--main-color), transparent);
    animation: st-scan 1.8s linear infinite;
  }

  .security-trust-console-footer{
    margin-top:2.2rem;
    padding-top:2rem;
    border-top:1px solid var(--st-divider);
    font-family:'Inter', sans-serif;
    font-size:1.12rem;
    color: var(--st-text-muted);
    display:flex;
    justify-content:space-between;
  }

  /* ---------- animations ---------- */
  @keyframes st-fade-up{
    from{ opacity:0; transform:translateY(1.6rem); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes st-dot-pulse{
    0%{ box-shadow:0 0 0 0 var(--st-accent-glow); }
    70%{ box-shadow:0 0 0 0.8rem rgba(138,43,226,0); }
    100%{ box-shadow:0 0 0 0 rgba(138,43,226,0); }
  }
  @keyframes st-scan{
    0%{ left:-40%; }
    100%{ left:100%; }
  }
/*End security section*/
/* ================================================================
     PW-HERO  ("Start Simplifying Your Payment Infrastructure")
     ================================================================ */
  .pw-hero{
    position:relative;
    padding:6rem 5%;
    background: #034239;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:62rem;
  }

  /* --- decorative signature: payment-rail network --- */
  .pw-hero-network{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
  }
  .pw-hero-network svg{
    width:100%;
    height:100%;
  }
  .pw-hero-network .pw-hero-rail{
    fill:none;
    stroke: rgb(160 255 237 / 35%);
    stroke-width:1;
    stroke-dasharray:6 10;
    animation: pw-hero-flow 9s linear infinite;
  }
  .pw-hero-network .pw-hero-rail-2{
    stroke:rgba(180,160,255,0.22);
    animation-duration:13s;
    animation-direction:reverse;
  }
  @keyframes pw-hero-flow{
    to{ stroke-dashoffset:-320; }
  }
  .pw-hero-glow{
    position:absolute;
    width:46rem;
    height:46rem;
    border-radius:50%;
    background: rgb(110 255 164 / 35%);
    top:-14rem;
    right:-10rem;
    filter:blur(6rem);
    z-index:0;
  }

  .pw-hero-container{
    position:relative;
    z-index:2;
    max-width:92rem;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2.4rem;
  }

  .pw-hero-badge{
    display:inline-flex;
    align-items:center;
    gap:0.8rem;
    padding:0.7rem 1.8rem;
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.2);
    color: #cffff9;
    font-size:1.3rem;
    font-weight:600;
    letter-spacing:0.03em;
  }
  .pw-hero-badge i{ color: #cffff9; font-size:0.9rem; }

  .pw-hero-title{
    font-weight: 800;
    text-transform: uppercase !important;
    color: #ffffff;
    font-size: 5rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-family: "Oswald", sans-serif;
  }
  .pw-hero-title-accent{
    font-weight: 800;
    text-transform: uppercase !important;
    color: #ffffff;
    font-size: 5rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-family: "Oswald", sans-serif;
  }

  .pw-hero-subtitle{
    max-width:62rem;
    color: rgb(226 255 244 / 85%);
    font-size:clamp(1.5rem, 1rem + 0.7vw, 1.8rem);
    font-weight:400;
  }

  .pw-hero-cta{
    margin-top:1rem;
    display:inline-flex;
    align-items:center;
    gap:1rem;
    background:#ffffff;
    color: #034239;
    font-weight:700;
    font-size:1.5rem;
    padding:1.3rem 2.8rem;
    border-radius:999px;
    box-shadow:0 1.2rem 3rem rgba(20,10,70,0.35);
    transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  }
  .pw-hero-cta i{
    font-size:1.2rem;
    transition:transform 0.25s ease;
  }
  .pw-hero-cta:hover{
    background: var(--main-color2);
    color: var(--white);
    transform:translateY(-0.3rem);
    box-shadow:0 1.6rem 3.6rem rgba(20,10,70,0.45);
  }
  .pw-hero-cta:hover i{ transform:translateX(0.4rem); }

  @media (max-width:768px){
    .pw-hero{ min-height:auto; padding:6rem 6%; }
    .pw-hero-title{ font-size:5rem }
  }

  /* ================================================================
     PW-FOOTER
     ================================================================ */
  .pw-footer{
    padding:6rem 5%;
    background:#fdfcff;
    color:#57536f;
    border-top: 2px solid #f7f7fa;
  }
  .pw-footer-container{
    max-width:130rem;
    margin:0 auto;
  }

  .pw-footer-row{
    row-gap:4rem;
  }

  /* brand column */
  .pw-footer-brand-logo{
    display:flex;
    align-items:center;
    gap:0.9rem;
    margin-bottom:1.6rem;
  }

  .pw-footer-brand-logo img{
    width: 150px;
  }

  .pw-footer-brand-logo .pw-footer-logo-mark{
    width:3.6rem;
    height:3.6rem;
    border-radius:1rem;
    background:linear-gradient(135deg, #6a4bff, #2c1f8c);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-family:'Archivo Black', sans-serif;
    font-size:1.8rem;
  }
  .pw-footer-brand-logo span{
    font-family:'Archivo Black', sans-serif;
    font-size:2.2rem;
    color:#161233;
    letter-spacing:-0.01em;
  }
  .pw-footer-brand-desc{
    font-size:1.45rem;
    line-height:1.7;
    color:#6d6987;
    max-width:34rem;
    margin-bottom:2.4rem;
  }
  .pw-footer-badges{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    align-items:center;
  }
  .pw-footer-badges img{
    height: auto;
    width: 200px;
    opacity: 0.85;
  }

  /* link columns */
  .pw-footer-heading{
    font-size:1.5rem;
    font-weight:700;
    color:#161233;
    margin-bottom:1.8rem;
  }
  .pw-footer-links li{ margin-bottom:1.3rem; list-style: none;}
  .pw-footer-links a{
    font-size:1.45rem;
    color:#6d6987;
    transition:color 0.2s ease, padding-left 0.2s ease;
  }
  .pw-footer-links a:hover{
    color:#5738e0;
    padding-left:0.3rem;
  }

  /* reach us */
  .pw-footer-reach-item{
    display:flex;
    align-items:flex-start;
    gap:1.1rem;
    margin-bottom:1.8rem;
  }
  .pw-footer-reach-icon{
    width:3.4rem;
    height:3.4rem;
    min-width:3.4rem;
    border-radius:50%;
    background: #fffaea;
    color: var(--main-color2);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
  }
  .pw-footer-reach-label{
    display:block;
    font-size:1.3rem;
    color:#9490a8;
    margin-bottom:0.2rem;
  }
  .pw-footer-reach-value{
    font-size:1.45rem;
    color:#3b3757;
    font-weight:600;
  }
  .pw-footer-reach-value a{
    color:inherit;
  }
  .pw-footer-reach-value a:hover{ color:#5738e0; }

  /* newsletter */
  .pw-footer-newsletter{
    margin-top:5rem;
    background:#fffaea;
    border:1px solid #ffebde;
    border-radius:2rem;
    padding:3.2rem 4rem;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:2.4rem;
  }
  .pw-footer-newsletter-text h3{
    font-size:2rem;
    color:#161233;
    margin-bottom:0.6rem;
  }
  .pw-footer-newsletter-text p{
    font-size:1.4rem;
    color:#6d6987;
  }
  .pw-footer-newsletter-form{
    display:flex;
    background:#ffffff;
    border-radius:999px;
    padding:0.5rem;
    border: 1px solid #ffeade;
    min-width:34rem;
    flex:1 1 34rem;
    max-width:44rem;
  }
  .pw-footer-newsletter-form i{
    align-self:center;
    color:#9490a8;
    padding-left:1.4rem;
    font-size:1.4rem;
  }
  .pw-footer-newsletter-form input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    padding:1rem 1rem;
    font-size:1.4rem;
    font-family:inherit;
    color:#3b3757;
  }
  .pw-footer-newsletter-form button{
    border:none;
    background: var(--main-color2);
    color:#fff;
    font-weight:700;
    font-size:1.4rem;
    padding:0 2.2rem;
    border-radius:999px;
    cursor:pointer;
    transition:background 0.2s ease;
  }
  .pw-footer-newsletter-form button:hover{ background:#4527c9; }

  /* legal row */
  .pw-footer-legal{
    margin-top:4rem;
    padding-top:3rem;
    border-top:1px solid #ece9f7;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:2.6rem;
  }
  .pw-footer-legal a{
    font-size:1.35rem;
    color:#8985a1;
    transition:color 0.2s ease;
  }
  .pw-footer-legal a:hover{ color:#5738e0; }

  /* bottom bar */
  .pw-footer-base{
    margin-top:2.6rem;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1.6rem;
  }
  .pw-footer-copyright{
    font-size:1.3rem;
    color:#9490a8;
  }
  .pw-footer-social{
    display:flex;
    gap:1rem;
  }
  .pw-footer-social a{
    width:3.6rem;
    height:3.6rem;
    border-radius:50%;
    background: var(--main-color2);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .pw-footer-social a:hover{
    background:#2c1f8c;
    transform:translateY(-0.25rem);
  }
/*  End footer*/

/* ===================== CLIENT SECTION ===================== */
  .client-section {
    padding: 6rem 5%;
    background-color: #fafafa;
    overflow: hidden;
    position: relative;
  }

  .client-section__container {
    max-width: 132rem;
    margin: 0 auto;
  }

  /* Subtitle */
  .client-section__subtitle {
    text-align: center;
    font-size: 1.7rem;
    font-weight: 500;
    color: #171717;
    max-width: 60rem;
    margin: 0 auto 5rem auto;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }

  /* ===================== LOGO SLIDER ===================== */
  .client-section__slider-row {
    row-gap: 0;
  }

  .border_img img{
    width: 100%;
  }

  .client-section__slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
  }

  .client-section__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: client-section-scroll 28s linear infinite;
  }

  .client-section__slider:hover .client-section__track {
    animation-play-state: paused;
  }

  @keyframes client-section-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  .client-section__logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 4.5rem;
  }

  .client-section__logo-img {
    height: 2.8rem;
    width: auto;
    max-width: 14rem;
    object-fit: contain;
/*    filter: grayscale(100%);*/
    opacity: 0.55;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  }

  .client-section__logo-item:hover .client-section__logo-img {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-0.2rem);
  }

  /* ===================== VISUAL / DUMMY IMAGE ===================== */
  .client-section__visual-row {
    margin-top: 6rem;
    display: flex;
    justify-content: center;
  }

  .client-section__visual-wrap {
    position: relative;
    width: 100%;
    max-width: 40rem;
    margin: auto;
  }

  .client-section__visual-frame {
    position: relative;
    border-radius: 1.6rem;
    padding: 1rem;
  }

  .client-section__visual-img {
    width: 100%;
    display: block;
    border-radius: 1rem;
    object-fit: cover;
/*    aspect-ratio: 16 / 7;*/
  }

  .client-section__connector {
    position: absolute;
    left: 50%;
    bottom: -3.4rem;
    transform: translateX(-50%);
    width: 6.4rem;
    height: 6.4rem;
  }

  .client-section__connector-core {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3; box-shadow: 0 1rem 2.2rem -1.2rem rgba(20,19,43,.2);
  }

  .client-section__connector-core img {
    width: 30px;
  }

  .client-section__connector-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #fe8f1b;
    opacity: 0;
    animation: client-section-wave-ripple 2.6s ease-out infinite;
  }

  .client-section__connector-ring--two {
    border-color: #eed268;
    animation-delay: 1.3s;
  }

  @keyframes client-section-wave-ripple {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    100% {
      transform: scale(1.9);
      opacity: 0;
    }
  }
/*  End client section*/

 /* ============ SECTION SHELL ============ */
  .sec-trust {
    padding: 6rem 5%;
    background-color: #f8fcfa;
    position: relative;
    overflow: hidden;
    color: #15132B;
  }

  .sec-trust__inner {
    max-width: 132rem;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  /* subtle circuit-line texture behind content */
  .sec-trust__texture {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.5;
    background-image:
      linear-gradient(90deg, rgba(91,61,245,0.05) 1px, transparent 1px),
      linear-gradient(rgba(91,61,245,0.05) 1px, transparent 1px);
    background-size: 4.8rem 4.8rem;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0) 75%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0) 75%);
    pointer-events: none;
  }

  /* ============ HEADER / COPY BLOCK ============ */
  .sec-trust__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--main-color);
    margin-bottom: 2.4rem;
  }

  .sec-trust__eyebrow::before {
    content: "";
    width: 3.2rem;
    height: 0.15rem;
    background: #5B3DF5;
    display: none;
  }

  .sec-trust__eyebrow-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #5B3DF5;
    display: none;
  }

  .sec-trust__heading {
    font-weight: 800;
    font-size: 4.6rem;
    line-height: 1.22;
    color: #15132B;
    margin-bottom: 2rem;
  }

  .sec-trust__heading-accent {
    color: var(--main-color);
    position: relative;
    white-space: nowrap;
  }

  .sec-trust__subtext {
    font-size: 1.75rem;
    line-height: 1.65;
    color: #5B5A72;
    max-width: 46rem;
    margin-bottom: 4.8rem;
  }

  /* ============ FEATURE GRID ============ */
  .sec-trust__grid {
    row-gap: 0.4rem;
  }

  .sec-trust__feature {
    display: flex;
    gap: 1.8rem;
    padding: 2.2rem 1.6rem 2.2rem 0;
    border-bottom: 0.1rem solid #E7E5F5;
  }

  .sec-trust__feature-icon {
    /*flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    border-radius: 1.4rem;
    background: linear-gradient(150deg, #5B3DF5 0%, #7B5CFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.8rem 1.8rem -0.6rem rgba(91,61,245,0.55);*/
  }

  .sec-trust__feature-icon img{
    width: 80px;
  }

  .sec-trust__feature-title {
    font-weight: 600;
    font-size: 2rem;
    color: #15132B;
    margin-bottom: 0.6rem;
  }

  .sec-trust__feature-desc {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #6B6A82;
  }

  /* remove bottom border on last row items (bootstrap col pairs) */
  .sec-trust__grid .col-md-6:nth-last-child(-n+2) .sec-trust__feature {
    border-bottom: none;
  }

  /* ============ STATUS CARD (signature element) ============ */
  .sec-trust__status-wrap {
    position: sticky;
    top: 4rem;
  }

  .sec-trust__status-card {
    background: #FFFFFF;
    border: 0.1rem solid #e5f5ea;
    border-radius: 2.4rem;
    padding: 3.2rem 3rem;
    box-shadow: 0 3rem 6rem -3rem rgba(21, 19, 43, 0.25), 0 1rem 2.5rem -1.5rem rgb(61 245 73 / 18%);
    position: relative;
    overflow: hidden;
  }

  @keyframes sec-trust-shimmer {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
  }

  .sec-trust__status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.8rem;
  }

  .sec-trust__status-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8B899E;
  }

  .sec-trust__status-live {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #16A34A;
    background: #EAFBF1;
    padding: 0.5rem 1.1rem;
    border-radius: 10rem;
  }

  .sec-trust__status-live-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #16A34A;
    box-shadow: 0 0 0 0 rgba(22,163,74,0.6);
    animation: sec-trust-pulse 1.8s ease-out infinite;
  }

  @keyframes sec-trust-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
    70%  { box-shadow: 0 0 0 0.8rem rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
  }

  .sec-trust__status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.7rem 0;
    border-bottom: 0.1rem solid #F0EFF9;
  }

  .sec-trust__status-row:last-of-type {
    border-bottom: none;
  }

  .sec-trust__status-left {
    display: flex;
    align-items: center;
    gap: 1.4rem;
  }

  .sec-trust__status-icon img {
    width: 30px;
  }

  .sec-trust__status-label {
    font-size: 1.55rem;
    font-weight: 500;
    color: #34324B;
  }

  .sec-trust__status-value {
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #15132B;
    white-space: nowrap;
  }

  .sec-trust__status-value--accent {
    color: var(--main-color2);
  }

  .sec-trust__status-scan {
    width: 9rem;
    height: 0.5rem;
    border-radius: 10rem;
    background: #fbffec;
    overflow: hidden;
    position: relative;
  }

  .sec-trust__status-scan-bar {
    position: absolute;
    top: 0; left: -40%;
    width: 40%;
    height: 100%;
    border-radius: 10rem;
    background: linear-gradient(90deg, transparent, #f5aa3d, transparent);
    animation: sec-trust-scan 2.2s ease-in-out infinite;
  }

  @keyframes sec-trust-scan {
    0%   { left: -40%; }
    100% { left: 100%; }
  }

  .sec-trust__status-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin-top: 2.4rem;
    padding-top: 2.2rem;
    border-top: 0.1rem dashed #E7E5F5;
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    color: #9694A8;
    letter-spacing: 0.03em;
  }

  /* ============ DIVIDER + BADGES ============ */
  .sec-trust__divider {
    border: none;
    border-top: 0.1rem solid #E7E5F5;
    margin: 5.6rem 0 3.6rem;
  }

  .sec-trust__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
  }

  .sec-trust__badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 2rem;
    background: #FFFFFF;
    border: 0.1rem solid #E7E5F5;
    border-radius: 1.2rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #4B4966;
  }

  .sec-trust__badge i {
    color: #5B3DF5;
    font-size: 1.4rem;
  }

/*  START SOLUTION DROPODOWN PAGES UI*/
.solution_hero_section {
    width: 100%;
    padding: 6rem 8%;
    background-color: #f2fef8;
    overflow: hidden;
  }

  .solution_hero_section__container {
    padding-top: 5rem;
  }

  .solution_hero_section .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -1.5rem;
    row-gap: 4rem;
  }

  .solution_hero_section [class^="col-"] {
    padding: 0 1.5rem;
    width: 100%;
  }

  .solution_hero_section .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .solution_hero_section__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .solution_hero_section__badge {
    display: inline-block;
    background-color: #029a8512;
    color: var(--main-color);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
    text-transform: uppercase !important;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    margin-bottom: 2rem;
  }

  .solution_hero_section__title {
    font-size: 4.8rem;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase!important;
    color: var(--ink); font-family: var(--font-heading);
    margin-bottom: 2rem;
  }

  .solution_hero_section__title-highlight {
    text-transform: uppercase!important;
    font-family: var(--font-heading);
    color: var(--main-color);
  }

  .solution_hero_section__desc {
    font-size: 1.7rem;
    line-height: 1.7;
    font-weight: 400;
    color: #6b6b76;
    max-width: 52rem;
    margin-bottom: 3.2rem;
  }

  .solution_hero_section__buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.6rem;
  }

  .solution_hero_section__btn-primary,
  .solution_hero_section__btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    padding: 1.4rem 2.6rem;
    border-radius: 999px;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
  }

  .solution_hero_section__btn-primary {
    background-color: #5b3df6;
    color: #ffffff;
    border: 0.1rem solid #5b3df6;
  }

  .solution_hero_section__btn-primary:hover {
    background-color: #4a2fe0;
    border-color: #4a2fe0;
    transform: translateY(-0.2rem);
    color: #ffffff;
  }

  .solution_hero_section__btn-secondary {
    background-color: #ffffff;
    color: #171321;
    border: 0.1rem solid #e2e0ef;
  }

  .solution_hero_section__btn-secondary:hover {
    border-color: #5b3df6;
    color: #5b3df6;
    transform: translateY(-0.2rem);
  }

  .solution_hero_section__btn-icon {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
  }

  .solution_hero_section__btn-icon path,
  .solution_hero_section__btn-icon circle {
    stroke: currentColor;
  }

  /* -------- Right visual -------- */

  .solution_hero_section__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .solution_hero_section__image {
    width: 100%;
    max-width: 56rem;
    height: auto;
    display: block;
  }
   :root {
    --pc-ink: #1B2036;
    --pc-body: #5B6178;
    --pc-accent: #4F46E5;
    --pc-accent-soft: #ECEBFC;
    --pc-card-bg: #F7F7FA;
    --pc-card-border: #EBEBF1;
    --pc-page-bg: #FFFFFF;
  }
  /* ============ PAYMENT CHALLENGES SECTION ============ */

  .payment-challenges-section {
    padding: 6rem 8%;
    background: var(--pc-page-bg);
  }

  .payment-challenges-container {
    max-width: 128rem;
    margin: 0 auto;
  }

  .payment-challenges-header {
    max-width: 62rem;
    margin: 0 0 4.4rem 0;
  }

  .payment-challenges-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    font-weight: 600; text-transform: uppercase!important;
    color: var(--main-color2);
    margin-bottom: 1.4rem;
  }

  .payment-challenges-eyebrow::before {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--main-color2);
    display: inline-block;
  }

  .payment-challenges-title {
    font-size: 3.6rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.02rem;
    color: var(--ink);
    margin-bottom: 1.6rem;
    font-family: var(--font-heading);
    text-transform: uppercase !important;
  }

  .payment-challenges-subtitle {
    font-size: 1.7rem;
    line-height: 1.6;
    font-weight: 400;
    color: var(--pc-body);
  }
  .payment-challenges-col {
    display: flex;
    margin-bottom: 2.4rem;
  }

  .payment-challenges-card {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
    height: 100%;
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-card-border);
    border-radius: 1.6rem;
    padding: 3.2rem 3rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }

  .payment-challenges-card:hover {
    border-color: var(--main-color);
    transform: translateY(-0.3rem);
  }

  .payment-challenges-icon-wrap img {
    width: 75px;
  }

  .payment-challenges-content {
    flex: 1 1 auto;
    min-width: 0;
  }

  .payment-challenges-card-title {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pc-ink);
    margin-bottom: 0.9rem;
  }

  .payment-challenges-card-text {
    font-size: 1.5rem;
    line-height: 1.65;
    font-weight: 400;
    color: var(--pc-body);
  }

  /* ===================== BANKING FEATURES SECTION ===================== */

  .banking-features-section {
    padding: 6rem 8%;
    background-color: #f8fcfa;
  }

  .banking-features-col {
    margin-bottom: 2.4rem;
  }

  .banking-features-card {
    background-color: #ffffff;
    border: 1px solid #e9e9f0;
    border-radius: 1.6rem;
    padding: 3.2rem 2.8rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }

  .banking-features-card:hover {
    box-shadow: 0 1.2rem 2.8rem rgba(20, 20, 31, 0.08);
    transform: translateY(-0.4rem);
    border-color: #d8d3f7;
  }

  .banking-features-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--main-color2);
    background-color: #fafbe9;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    margin-bottom: 2rem;
  }

  .banking-features-tag i {
    font-size: 1.1rem;
  }

  .banking-features-card-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: #14141f;
    margin-bottom: 1.2rem;
    line-height: 1.35;
  }

  .banking-features-card-text {
    font-size: 1.5rem;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.7;
  }

  /* ===== Impact Metrics Section ===== */
  .impact-metrics {
    padding: 6rem 8%;
    background-color: #ffffff;
  }

  .impact-metrics__container {
    max-width: 136rem;
    margin: 0 auto;
  }

  .impact-metrics__row {
    row-gap: 2.4rem;
  }

  .impact-metrics__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #f7f7fa;
    border: 1px solid #ececf3;
    border-radius: 26px;
    padding: 3.2rem 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }

  .impact-metrics__icon img {
    width: 75px;
  }

  .impact-metrics__value {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    margin-top: 1rem;
    margin-bottom: 0.8rem;
  }

  .impact-metrics__label {
    font-size: 1.5rem;
    font-weight: 500;
    color: #5f6272;
    line-height: 1.4;
  }

  .cg-cta-section {
    padding: 6rem 8%;
    background-color: #f6f6f9;
    overflow: hidden;
  }

  .pcs-container {
    max-width: 128rem;
    margin: 0 auto;
  }

  .pcs-hero {
    text-align: center;
    max-width: 88rem;
    margin: 0 auto 7.2rem;
  }

  .pcs-heading {
    font-size: 5rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #14142B;
    margin-bottom: 18px;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase !important;
  }

  .pcs-heading__accent {
    color: var(--main-color);
    font-family: "Oswald", sans-serif;
  }

  .pcs-subtext {
    margin-top: 2rem;
    font-size: 1.8rem;
    line-height: 1.6;
    font-weight: 400;
    color: #5b5b68;
    max-width: 62rem;
    margin-left: auto;
    margin-right: auto;
  }

  .pcs-actions {
    margin-top: 3.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
  }

  .pcs-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 1.5rem 2.8rem;
    border-radius: 100px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
  }

  .pcs-btn i {
    font-size: 1.4rem;
  }

  .pcs-btn--primary {
    background-color: #12121a;
    color: #ffffff;
    border: 1px solid #12121a;
  }

  .pcs-btn--primary:hover {
    background-color: #2b2b38;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18, 18, 26, 0.22);
  }

  .pcs-btn--secondary {
    background-color: #ffffff;
    color: #12121a;
    border: 1px solid #d6d6e0;
  }

  .pcs-btn--secondary:hover {
    background-color: #ffffff;
    border-color: #12121a;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18, 18, 26, 0.08);
  }

  /* ---------- Related resources block ---------- */
  .pcs-resources{
    padding: 4rem 8%;
  }
  .pcs-resources__title {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    color: #14142B;
    margin-bottom: 4rem;
  }

  .pcs-card {
    background-color: #ffffff;
    border: 1px solid #e7e7ee;
    border-radius: 1.6rem;
    padding: 3.2rem 2.8rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  .pcs-card:hover {
    border-color: var(--main-color);
    transform: translateY(-4px);
/*    box-shadow: 0 16px 32px rgba(18, 18, 26, 0.08);*/
  }

  .pcs-card__icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.2rem;
    background-color: #efebff;
    color: #5b3df0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    margin-bottom: 2rem;
  }

  .pcs-card__title {
    font-size: 1.9rem;
    font-weight: 700;
    color: #12121a;
    margin-bottom: 1rem;
  }

  .pcs-card__desc {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #64646f;
    flex-grow: 1;
    margin-bottom: 2.4rem;
  }

  .pcs-card__link {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--main-color);
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    transition: gap 0.2s ease;
  }

  .pcs-card__link i {
    font-size: 1.3rem;
    transition: transform 0.2s ease;
  }

  .pcs-card__link:hover {
    color: var(--main-color2);
  }

  .pcs-card__link:hover i {
    transform: translateX(3px);
  }
/*END SOLUTION DROPDOWN PAGES UI*/





















/*Media quaries*/
@media screen and (max-width: 991px){
html{
    font-size: 55%;
}
.mbd-section{
      padding: 5rem 5%;
    }
    .mbd-heading{
      font-size: 3.2rem;
    }
    .mbd-subheading{
      font-size: 1.55rem;
      margin-bottom: 3.6rem;
    }

    .bf-heading-row h1{ font-size:3.1rem; }
    .bf-donut-wrap{ margin:0 auto; }
    .bf-ops-body{ justify-content:center; text-align:center; }
    .bf-legend{ align-items:center; width:100%; }
    .bf-legend li{ justify-content:center; }
    .bf-legend-pct{ margin-left:.6rem; }

    .indsol-panel{ padding: 3rem 2.4rem; }
    .indsol-shape-card{ min-height:auto; clip-path:none; padding: 2.8rem 2.4rem; }
    .indsol-heading{ font-size:2.8rem; }

    .witty-finance__intro{
      flex-direction:column;
      align-items:flex-start;
      gap:2rem;
    }
    .witty-finance__divider{
      width:100%;
      height:1px;
    }
    .witty-finance__title{
      max-width:100%;
      font-size:2.8rem;
    }
    .witty-finance__topbar{
      flex-wrap:wrap;
      justify-content:space-between;
    }

    .security-trust-section{ padding: 5rem 6%; }
    .security-trust-console-wrap{ margin-top:4.4rem; }

    .sec-trust__heading { font-size: 3.6rem; }
    .sec-trust__status-wrap { position: static; margin-top: 4.8rem; }

    .solution_hero_section__content {
      align-items: center;
      text-align: center;
    }

    .solution_hero_section__desc {
      max-width: 100%;
    }

    .solution_hero_section__buttons {
      justify-content: center;
    }

    .solution_hero_section .row {
      flex-direction: column-reverse;
    }

    .pcs-card {
      margin-bottom: 0;
    }
}

@media screen and (max-width: 1200px){ 
    
}

@media screen and (max-width: 980px){
    .primary-nav, .header-actions .btn{ display:none; }
    .hamburger{ display:flex; }
    .header-shell{ top:14px; }
    .header-inner{ padding: 0 8px 0 16px; }
    .header-actions{ position:relative; }
}

@media screen and (max-width: 768px){
   .bf-card{ padding:2.9rem 2.3rem; }
    .bf-title{ font-size:2.5rem; }
/*    .bf-chip-row{ flex-direction:column; align-items:stretch; }*/
    .bf-chip{ justify-content:center; }
    .bf-donut-wrap{ width:17.5rem; height:17.5rem; }

    .infra-hero__title{ font-size:clamp(2.6rem, 7vw, 3.6rem); }
    .infra-hero__subtext{ font-size:1.5rem; }
    .infra-hero__tabs{ gap:1rem; }
    .infra-hero__card{ aspect-ratio: 4 / 4.2; }

    .witty-finance__hero{
      padding:2.4rem 2rem 3.2rem;
      border-radius:2rem;
    }
    .witty-finance__topbar{
      flex-direction:column-reverse;
      align-items:flex-start;
      gap:1.6rem;
    }
    .witty-finance__cta-pill{
      width:100%;
      text-align:center;
    }
    .witty-finance__chat-row{
      flex-direction:column;
      align-items:flex-start;
    }
    .witty-finance__bubble{
      font-size:1.4rem;
    }
    .witty-finance__intro{
      padding:2.4rem;
    }
    .witty-finance__title{
      font-size:2.4rem;
    }
    .witty-finance__feature{
      padding:3.6rem 2rem 0;
    }
    .witty-finance__feature-card{
      padding:2rem;
    }
    .witty-finance__feature-heading{
      font-size:2rem;
    }
    .witty-finance__feature-deco{
      width:8rem;
      height:6rem;
      top:2.6rem;
      right:2rem;
    }
    .witty-finance__feature-list{
      flex-direction:column;
      flex-wrap:nowrap;
      align-items:flex-start;
      gap:1.2rem;
    }
    .witty-finance__feature-list li{
      flex:1 1 auto;
      width:100%;
    }

    .pw-footer-newsletter{ padding:2.6rem; }
    .pw-footer-newsletter-form{ min-width:100%; max-width:100%; }
    .home-visual {width: 100%; max-width: 100%}
    .pw-footer-base{ justify-content:center; text-align:center; }

    .payment-challenges-col {
      margin-bottom: 2rem;
    }

    .payment-challenges-col:last-child {
      margin-bottom: 0;
    }

    .payment-challenges-title {
      font-size: 2.6rem;
    }

    .payment-challenges-subtitle {
      font-size: 1.6rem;
    }

    .payment-challenges-card {
      padding: 2.6rem 2.2rem;
      gap: 1.6rem;
    }

    .payment-challenges-icon-wrap {
      width: 4.6rem;
      height: 4.6rem;
      border-radius: 1rem;
    }

    .payment-challenges-icon-wrap i {
      font-size: 1.8rem;
    }

    .payment-challenges-card-title {
      font-size: 1.75rem;
    }

    .banking-features-card {
      padding: 2.8rem 2.4rem;
    }

    .banking-features-col {
      margin-bottom: 2rem;
    }

    .pcs-hero {
      margin-bottom: 5.2rem;
    }

    .pcs-heading {
      font-size: 2.8rem;
    }

    .pcs-subtext {
      font-size: 1.6rem;
      margin-top: 1.6rem;
    }

    .pcs-actions {
      margin-top: 2.8rem;
      flex-direction: column;
      align-items: stretch;
    }

    .pcs-btn {
      justify-content: center;
      width: 100%;
    }

    .pcs-resources__title {
      font-size: 2.1rem;
      margin-bottom: 3rem;
    }

    .pcs-row > [class*="col-"] {
      margin-bottom: 2rem;
    }

    .pcs-row > [class*="col-"]:last-child {
      margin-bottom: 0;
    }
}

@media screen and (max-width: 650px){ 
    .home_section{ padding-top: calc(var(--nav-h) + 54px); }
    .shape-rocket{ width:38px; height:38px; top:8%; left:4%; }
    .shape-triangle{ width:28px; height:28px; top:12%; right:5%; }
    .shape-ring{ display:none; }
    .home-visual{ margin-top:38px; }
    .wp-float{ width:50px; height:50px; }
    .wp-float svg{ width:24px; height:24px; }

    .heading-section-left .heading {
      font-size: 32px;
    }
    .heading-section-left .description {
      font-size: 15px;
    }

    .home_section h1{
        font-size: 5rem;
    }

    .heading-section__title {
        font-size: 4rem;
    }

    .pw-hero-title{
        font-size: 4rem;
    }

    .pw-hero-title-accent{
        font-size: 4rem;
    }
    .sec-trust__status-row { flex-wrap: wrap; }

    .solution_hero_section__content {
      align-items: center;
      text-align: center;
    }

    .solution_hero_section__desc {
      max-width: 100%;
    }

    .solution_hero_section__buttons {
      justify-content: center;
    }

    .solution_hero_section .row {
      flex-direction: column-reverse;
    }

    .payment-challenges-card {
      flex-direction: column;
      align-items: flex-start;
    }

    .impact-metrics__value {
      font-size: 2.6rem;
    }
    .impact-metrics__icon {
      width: 5rem;
      height: 5rem;
    }
}

@media screen and (max-width: 450px){
html{
    font-size: 50%;
}
   
   .mbd-heading{
      font-size: 2.6rem;
    }
    .mbd-eyebrow{
      font-size: 1.15rem;
    }
  

     .bf-heading-row h1{ font-size:2.6rem; }
    .bf-total-amount{ font-size:1.95rem; }

    .indsol-heading{ font-size:2.4rem; }
    .indsol-subheading{ font-size:1.45rem; }
    .indsol-panel{ padding:2.4rem 1.8rem; border-radius:1.8rem; }

    .infra-hero__title{ letter-spacing:0; }
    .infra-hero__panel-label{ font-size:1.3rem; left:1.4rem; bottom:1.4rem; padding:0.7rem 1.2rem; }

    .witty-finance__badges{
      flex-direction:column;
      align-items:flex-start;
    }

    .witty-finance__badges{
      flex-direction:column;
      align-items:flex-start;
    }

    .security-trust-title{ font-size:3.4rem; }
    .security-trust-feature{ gap:1.2rem; padding:1.8rem 0; }
    .security-trust-badge-brand{ margin-left:0; margin-top:1rem; }
    .security-trust-console{ padding:2.2rem 2rem 2.6rem; }

    .client-section__logo-item {
      padding: 0 2.2rem;
    }

    .client-section__logo-img {
      height: 2.2rem;
      max-width: 10rem;
    }

    .client-section__visual-row {
      margin-top: 5rem;
    }

    .client-section__connector i {
      font-size: 2rem;
    }

    .home_section h1{
        font-size: 4rem;
    }
}

@media screen and (min-width: 981px){
    .mobile-menu, .hamburger{ display:none !important; }

    .mbd-desktop-layout{
      display: block;
    }
    .mbd-accordion-layout{
      display: none;
    }
}

 @media (prefers-reduced-motion: reduce){
    .bf-chip, .bf-pulse, .bf-cursor{ animation:none !important; }
    .bf-card{ transition:none; }

    .indsol-line, .indsol-node::before, .indsol-panel.is-active{ animation:none !important; }

    .infra-hero__panel{ transition:none; }
    .infra-hero__tab{ transition:none; }

    .security-trust-section *{ animation:none !important; opacity:1 !important; transform:none !important; }

    .client-section__track {
      animation: none;
    }
  }

  @media (min-width: 768px) {
    .solution_hero_section .col-md-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }

  @media (min-width: 992px) {
    .solution_hero_section .col-lg-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }

/*  Lx*/