/* BILAPI public site: visual upgrade layer (no content changes). Matches the console's Refined Dark.
   Loaded last on the homepage, /services and /service/* so it overrides the page styles.
   Remove this one <link> to undo everything. */
:root{
  --bg:#0A101B!important; --bg2:#0D1522!important; --panel:#111A28!important; --card:#111A28!important;
  --line:#1E2A3C!important; --line2:#18233A!important;
  --cyan:#4D8DFF!important; --blue:#4D8DFF!important; --blue2:#3B76E0!important; --violet:#4D8DFF!important; --green:#3CC48F!important;
  --gold1:#E8B84A!important; --gold2:#D9A532!important;
  --txt:#E7EDF6!important; --mut:#8A98AE!important; --mut2:#66768F!important;
  --grad:linear-gradient(135deg,#6A9FFF,#4D8DFF)!important; --grad3:linear-gradient(135deg,#6A9FFF,#4D8DFF)!important;
  --gold:linear-gradient(90deg,#E8B84A,#FFE7A6 50%,#E8B84A)!important;
}
/* 1. One typeface */
body,button,input,select,textarea{font-family:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif!important}
.font-exo,h1,h2,h3,h4{font-family:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif!important;letter-spacing:-.02em}
code,pre,kbd,.mono,[style*="JetBrains"],[style*="monospace"]{font-family:"IBM Plex Mono",Consolas,monospace!important}
h1{font-weight:600!important}
h2,.h2{font-weight:600!important}
body{background:#0A101B!important}

/* 2. One accent: blue, gold for the highlight words */
.grad{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:#6A9FFF!important}
.statgrid h3,.statgrid h3 *{background:none!important;-webkit-background-clip:initial!important;color:#E7EDF6!important;-webkit-text-fill-color:#E7EDF6!important;font-family:"IBM Plex Mono",monospace!important;font-weight:500!important}
.statgrid p{color:#8A98AE!important;font-weight:500!important}

/* 3. Background */
#cbgx,.iso canvas{opacity:.28!important}
.auroras{opacity:.35!important}
.cur-dot,.cur-ring{display:none!important} /* no custom cursor */
html,body,a,button{cursor:auto}
a,button,[role=button]{cursor:pointer}
.gridwash{opacity:.4!important}

/* 4. Consistent buttons */
.btn{border-radius:8px!important;padding:12px 22px!important;font-size:15px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;text-shadow:none!important}
.btn-neon{background:transparent!important;border:1px solid #2C3B53!important;box-shadow:none!important;color:#E7EDF6!important}
.btn-neon:hover{background:rgba(77,141,255,.10)!important;border-color:#4D8DFF!important}
.btn-solid,.btn.primary{background:linear-gradient(110deg,#3B76E0,#6A9FFF,#3B76E0)!important;background-size:200% auto!important;border-color:#4D8DFF!important;box-shadow:0 10px 26px -14px rgba(77,141,255,.8)!important;animation:blmFlow 6s linear infinite!important}
.btn-solid:hover,.btn.primary:hover{filter:brightness(1.1)}
@keyframes blmFlow{to{background-position:200% center}}

/* 5. Slimmer, cleaner header */
.nav{height:84px!important}
.nav .logo img,.top .logo img{height:64px!important;filter:brightness(0) invert(1)!important}
@media(max-width:720px){.nav{height:72px!important}.nav .logo img,.top .logo img{height:48px!important}}
header.top.scrolled{background:rgba(10,16,27,.85)!important;backdrop-filter:blur(12px)!important}
.pillnav{border-color:#1E2A3C!important;background:#111A28!important;box-shadow:none!important}
.hero-kicker,.live-chip{border-color:#26354B!important;background:#111A28!important;box-shadow:none!important}

/* 6. Even cards: same radius, border and surface everywhere */
.glass,.acard,.code,.pg,.faq,.indus,.step,.statgrid,.trustbar,.mega{background:#111A28!important;border:1px solid #1E2A3C!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:12px!important}
.statgrid{background:#0D1522!important}
.glass:hover,.acard:hover,.indus:hover{border-color:#2C3B53!important}
.faq.on{border-color:rgba(77,141,255,.45)!important;box-shadow:none!important}
.faq:hover .q h3{color:#E7EDF6!important}
.indus{border-left:1px solid #1E2A3C!important}
.indus i{font-style:normal;width:42px;height:42px;border-radius:10px;background:rgba(77,141,255,.14)!important;display:grid!important;place-items:center;color:#6A9FFF}
.indus i svg{width:20px;height:20px}

/* 7. Hero product cards: dark, same content */
.fcard{background:#111A28!important;border:1px solid #26354B!important;color:#E7EDF6!important;box-shadow:0 20px 44px -26px rgba(0,0,0,.9)!important;border-radius:14px!important}
.fcard::before{opacity:.22!important}
.fcard h3{color:#E7EDF6!important;font-weight:600!important}
.fbody{background:#0D1522!important;border:1px solid #1E2A3C!important;border-radius:10px!important}
.fcard [style*="background:#fff"],.fcard [style*="background: #fff"],.fcard [style*="background:#f8fafc"],.fcard [style*="background:#dbe3ee"],.fcard [style*="background:#f1f5f9"],.fcard [style*="background:#eef2f7"],.fcard [style*="background:#e2e8f0"]{background:#152033!important;border-color:#26354B!important}
.fcard [style*="color:#0"],.fcard [style*="color:#1e293b"],.fcard [style*="color:#334155"],.fcard [style*="color:#111"],.fcard [style*="color:#00268d"]{color:#E7EDF6!important}
.fcard [style*="color:#64748b"],.fcard [style*="color:#94a3b8"],.fcard [style*="color:#475569"]{color:#8A98AE!important}
.fcard [style*="background:#0f172a"],.fcard [style*="background:#111827"]{background:#0A101B!important}

/* 8. Animations: all original effects on (custom cursor stays off) */
.hubbox{animation-duration:9s!important}
.hero h1{text-shadow:none!important}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Services + service pages */
.fgrid .fcard,.cards>*,.rel>*,.steps>*{border-radius:12px!important}
/* API pages only: the footer also uses .fgrid, so match grids made of .fcard items */
.fgrid:has(> .fcard){grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:860px){.fgrid:has(> .fcard){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.fgrid:has(> .fcard){grid-template-columns:1fr!important}}
.fgrid .fcard{background:#111A28!important;padding:22px!important}
.fgrid .fcard .ic,.ic{background:rgba(77,141,255,.14)!important;border-color:rgba(77,141,255,.3)!important;color:#6A9FFF!important}
[class*="badge"],[class*="tag"]{border-radius:999px}
footer{background:#0D1522!important}
/* Hero: one clear primary action */
.hero-cta .btn{padding:13px 26px!important;font-size:15px!important;letter-spacing:0!important;text-transform:none!important}
.hero-cta .btn-neon{background:#4D8DFF!important;border-color:#4D8DFF!important;color:#fff!important;box-shadow:0 10px 26px -14px rgba(77,141,255,.8)!important;animation:blmNeon 3.2s ease-in-out infinite!important}
@keyframes blmNeon{0%,100%{box-shadow:0 0 12px rgba(77,141,255,.45),0 10px 26px -14px rgba(77,141,255,.8)}50%{box-shadow:0 0 28px rgba(77,141,255,.85),0 0 4px rgba(255,255,255,.4) inset}}
.hero-cta .btn-neon:hover{background:#6A9FFF!important}
/* "Where it's used" has 4 items: show them as one even row instead of 3 + 1 */
.fgrid:has(> .fcard:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:860px){.fgrid:has(> .fcard:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.fgrid:has(> .fcard:nth-child(4):last-child){grid-template-columns:1fr!important}}
/* Header: calm console button */
.pillnav a.console-link{background:#152033!important;border:1px solid #2C3B53!important;box-shadow:none!important;font-weight:600!important}
.pillnav a{font-weight:500}
/* Footer: keep the bottom line clear of the fixed chat widget */
footer{padding-bottom:150px!important}

/* 9. Motion layer (with assets/site-motion.js). Transform/opacity only; off for reduced motion. */
/* Scroll reveal with stagger */
.blm .blm-r{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--blm-d,0ms),transform .7s cubic-bezier(.16,1,.3,1) var(--blm-d,0ms)}
.blm .blm-r.blm-in{opacity:1;transform:none}
/* Hero headline words rise in */
.blm .blm-w{display:inline-block;opacity:0;transform:translateY(.45em)}
.blm h1.blm-go .blm-w{animation:blmWord .8s cubic-bezier(.16,1,.3,1) var(--blm-d,0ms) forwards}
@keyframes blmWord{to{opacity:1;transform:none}}
/* Gold highlight words: flowing gold shimmer */
.gold{background:linear-gradient(90deg,#E8B84A,#FFE7A6,#E8B84A,#FFE7A6,#E8B84A)!important;background-size:200% auto!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;animation:blmFlow 5.4s linear infinite!important}
/* Card spotlight + lift */
/* the floating demo widgets (.demo.glass) are absolutely positioned: leave them alone */
.fcard,.feature,.card,.stat,.acard,.indus,.step,.scard,.glass:not(.demo),.statgrid,.faq{position:relative;isolation:isolate}
.fcard::after,.indus::after,.step::after,.scard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),rgba(77,141,255,.14),transparent 70%);z-index:-1;animation:none!important}
.fcard:hover::after,.indus:hover::after,.step:hover::after,.scard:hover::after{opacity:1}
.fgrid>.fcard,.feature,.card,.indus,.step,.scard,.acard{transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .35s}
.fgrid>.fcard:hover,.feature:hover,.card:hover,.indus:hover,.step:hover,.scard:hover,.acard:hover{transform:translateY(-4px);border-color:rgba(77,141,255,.45)!important;box-shadow:0 18px 40px -24px rgba(77,141,255,.55)!important}
.fgrid>.fcard .ic,.feature .ico,.card .ico,.indus i{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.fgrid>.fcard:hover .ic,.feature:hover .ico,.card:hover .ico,.indus:hover i{transform:scale(1.08) rotate(-4deg)}
/* Hero product cards float gently, out of step with each other */
.flow .fcard{animation:blmFloat 7s ease-in-out infinite!important}
.flow .fcard:nth-child(2n){animation-delay:-2.3s!important}
.flow .fcard:nth-child(3n){animation-delay:-4.6s!important}
.flow .fcard:hover{animation-play-state:paused!important;transform:translateY(-8px)!important}
@keyframes blmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* Buttons: light sweep on hover, arrow nudge */
.btn,.btn-solid,.btn.primary,.hero-cta a,.cta a{position:relative;overflow:hidden}
.btn-solid::after,.btn.primary::after,.hero-cta .btn-neon::after{content:""!important;display:block!important;position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.btn-solid:hover::after,.btn.primary:hover::after,.hero-cta .btn-neon:hover::after{left:130%}
.btn:hover{transform:translateY(-2px)}
a:hover>svg:last-child{transition:transform .25s}
.btn:hover>svg:last-child,.lnk:hover{transform:translateX(3px)}
/* Background: slow drift of the soft glows and moderate marquees */
.auroras i{animation:blmDrift 28s ease-in-out infinite alternate!important}
.auroras i:nth-child(2){animation-duration:34s!important;animation-delay:-8s!important}
.auroras i:nth-child(3){animation-duration:40s!important;animation-delay:-15s!important}
@keyframes blmDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(60px,40px,0) scale(1.12)}}
.hero-strip-track,.mq-t{animation-duration:38s!important}
.hero-strip:hover .hero-strip-track{animation-play-state:paused}
/* Underline under the hero headline draws in */
.h1-underline{width:min(320px,60%)!important;transform-origin:center;animation:blmLine 1.1s cubic-bezier(.16,1,.3,1) .6s both,blmFlow 4s linear infinite!important;background:linear-gradient(90deg,#4D8DFF,#E8B84A,#6A9FFF,#4D8DFF)!important;background-size:200% auto!important;box-shadow:0 0 18px rgba(77,141,255,.45)!important}
@keyframes blmLine{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
/* Live dots breathe */
.dot,.live-chip i,.hero-kicker i{animation:blmBreath 2.4s ease-in-out infinite!important}
@keyframes blmBreath{0%,100%{box-shadow:0 0 0 0 rgba(60,196,143,.45)}50%{box-shadow:0 0 0 6px rgba(60,196,143,0)}}
/* Header shadow once scrolled */
header.blm-scrolled,header.top.blm-scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.9)}
/* FAQ answer slides open smoothly (existing toggle) */
.faq .a{transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s!important}
@media (prefers-reduced-motion: reduce){.blm .blm-r,.blm .blm-w{opacity:1!important;transform:none!important;filter:none!important}}

/* 10. Homepage extras (with site-motion.js section 6) */
@property --blm-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
/* Hero halo: a slow, softly breathing blue glow behind the headline that drifts with the pointer */
section.hero{position:relative}
.blm-halo{position:absolute;left:50%;top:180px;width:min(980px,90vw);height:520px;pointer-events:none;z-index:0;
  transform:translate(calc(-50% + var(--hx,0)*60px),calc(var(--hy,0)*40px + var(--hs,0)*.25px));
  background:radial-gradient(closest-side,rgba(77,141,255,.22),rgba(77,141,255,.06) 55%,transparent 75%);
  filter:blur(10px);animation:blmHalo 9s ease-in-out infinite}
@keyframes blmHalo{0%,100%{opacity:.75}50%{opacity:1}}
section.hero>*:not(.blm-halo){position:relative;z-index:1}
/* Hero product cards: entrance, float (uses `translate` so `transform` is free for tilt) */
.flow .fcard{animation:blmCardIn .9s cubic-bezier(.16,1,.3,1) both,blmFloat2 7s ease-in-out 1s infinite!important}
.flow .fcard:nth-child(1){animation-delay:.15s,1s!important}
.flow .fcard:nth-child(3){animation-delay:.3s,-1.5s!important}
.flow .fcard:nth-child(5){animation-delay:.45s,-3s!important}
.flow .fcard:nth-child(7){animation-delay:.6s,-4.5s!important}
@keyframes blmCardIn{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes blmFloat2{0%,100%{translate:0 0}50%{translate:0 -8px}}
.flow .fcard:hover{animation-play-state:running,paused!important}
.flow{transform:translate(calc(var(--hx,0)*-14px),calc(var(--hy,0)*-8px))}
/* 3D tilt */
.blm-tilt{transform-style:preserve-3d;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s!important}
.flow .fcard.blm-tilt:hover,.cards3 .acard.blm-tilt:hover{transform:perspective(900px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateY(-6px)!important}
/* Animated glowing border: data-stack cards on hover, stats panel always (slow) */
.cards3 .acard::before,.statgrid::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--blm-ang),transparent 0 70%,#4D8DFF 80%,#E8B84A 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s;animation:blmSpin 4s linear infinite}
.cards3 .acard:hover::before{opacity:1}
.statgrid::before{opacity:.9;animation-duration:9s}
@keyframes blmSpin{to{--blm-ang:360deg}}
/* Hub: soft ripple rings around the centre logo */
.hubbox{position:relative}
.hubbox::before,.hubbox::after{content:"";position:absolute;inset:-14px;border-radius:inherit;border:1px solid rgba(77,141,255,.45);animation:blmRipple 3.6s ease-out infinite;pointer-events:none}
.hubbox::after{animation-delay:1.8s}
@keyframes blmRipple{from{transform:scale(.9);opacity:.8}to{transform:scale(1.6);opacity:0}}
/* Magnetic hero buttons */
.hero-cta .btn,.hero-actions .btn{translate:var(--mxp,0px) var(--myp,0px);transition:translate .25s cubic-bezier(.16,1,.3,1),background .2s,box-shadow .3s!important}
/* Rows appearing one by one */
.blm .blm-row{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--blm-d,0ms),transform .6s cubic-bezier(.16,1,.3,1) var(--blm-d,0ms)}
.blm .blm-row-l{transform:translateX(-28px)}.blm .blm-row-r{transform:translateX(28px)}
.blm .blm-row.blm-in{opacity:1;transform:none}
table.cmp td:nth-child(2),table.cmp th:nth-child(2){position:relative;background:rgba(77,141,255,.07)}
table.cmp tbody tr:hover td{background:rgba(77,141,255,.05)}
/* Top scroll progress bar in the accent colour */
#prog{background:linear-gradient(90deg,#4D8DFF,#E8B84A)!important;box-shadow:0 0 12px rgba(77,141,255,.6)!important}
@media (prefers-reduced-motion: reduce){.blm-halo,.flow .fcard,.cards3 .acard::before,.statgrid::before,.hubbox::before,.hubbox::after{animation:none!important}.blm .blm-row{opacity:1!important;transform:none!important}.flow{transform:none!important}}
/* Mid-size screens (small laptops/tablets landscape): shrink the floating demo widgets so they don't touch */
@media (min-width:901px) and (max-width:1180px){.hubwrap .demo{scale:.8}}
@media (min-width:901px) and (max-width:1000px){.hubwrap .demo{scale:.68}}
@media (min-width:901px) and (max-width:960px){.hubwrap .demo{scale:.6}}

/* PAN Verification widget: the card being scanned looks like a PAN card (light, sample data, no emblem) */
.pancard{position:relative;width:206px;height:124px;border-radius:9px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;overflow:hidden;
  color:#12284f;font-family:"IBM Plex Sans",Arial,sans-serif;text-align:left;
  background:linear-gradient(135deg,#dcecfb 0%,#eef5fd 45%,#fbf1dd 100%);
  border:2px solid rgba(255,255,255,.7);box-shadow:0 10px 26px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.8)}
.pancard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(120deg,rgba(29,59,110,.06) 0 2px,transparent 2px 7px)}
.pancard>*{position:relative}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-bottom:4px;border-bottom:1px solid rgba(29,59,110,.18)}
.pc-t1{font-size:7.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1d3b6e}
.pc-holo{width:16px;height:16px;border-radius:50%;flex:none;background:conic-gradient(from 0deg,#9ee7ff,#f7b8ff,#fff3a8,#9effc9,#9ee7ff);opacity:.85;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.pc-mid{display:flex;gap:8px;align-items:flex-start}
.pc-photo{width:30px;height:36px;border-radius:4px;flex:none;display:grid;place-items:center;background:#e6ecf5;border:1px solid rgba(29,59,110,.2)}
.pc-fields{display:grid;gap:0;line-height:1.15}
.pc-l{font-size:6.5px;color:#5a6f92;text-transform:uppercase;letter-spacing:.05em}
.pc-fields b{font-size:9px;font-weight:700;color:#12284f;margin-bottom:3px}
.pc-bot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between}
.pc-no{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;letter-spacing:.14em;color:#0b1b3a}
.pc-sign{opacity:.85}