/* Vazirmatn — local offline fonts */
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
  font-weight:500; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight:600; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight:800; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/vazirmatn/Vazirmatn-Black.woff2') format('woff2');
  font-weight:900; font-display:swap;
}

:root{
  --navy-950:#081120;
  --navy-900:#0b1a2e;
  --navy-800:#122744;
  --navy-700:#1a3a63;
  --blue-500:#327BBE;
  --blue-400:#67CAED;
  --blue-300:#9ADFF5;
  --ice-50:#eef2fa;
  --ice-100:#e4eaf5;
  --white:#ffffff;
  --ink-900:#0e1c30;
  --ink-600:#4a6178;
  --ink-400:#8497ab;
  --line:#e1e7f0;
  --green:#1fa971;
  --red:#e5484d;
  --type-h1:clamp(2.6rem,4.4vw,4.2rem);
  --type-h2:clamp(1.75rem,2.6vw,2.5rem);
  --type-cta:clamp(1.6rem,2.35vw,2.2rem);
  --shadow-soft:0 20px 50px -20px rgba(11,26,46,.25);
  --shadow-card:0 10px 30px -12px rgba(11,26,46,.15);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{scroll-behavior:smooth;scroll-padding-top:90px;}
body{
  font-family:'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
  background:var(--ice-50);
  color:var(--ink-900);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.market-modal-open,
body.nav-open{overflow:hidden;}
img,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{list-style:none;}
/* Prefer Bootstrap container when present; keep width guard for legacy */
.container{width:100%;max-width:1240px;margin-inline:auto;}
::selection{background:var(--blue-500);color:#fff;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:12px;right:12px;z-index:10000;
  background:var(--blue-500);color:#fff;font-weight:700;font-size:.9rem;
  padding:12px 18px;border-radius:12px;
  transform:translateY(-160%);transition:transform .25s var(--ease);
}
.skip-link:focus{transform:translateY(0);outline:3px solid #fff;outline-offset:3px;}
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid rgba(125,182,255,.95);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  padding:18px 0;
  transition:padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.site-header.scrolled{
  padding:10px 0;
  background:rgba(8,17,32,.72);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.5);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.18rem;color:#fff;letter-spacing:.2px;}
.brand .logo-mark,.brand img.logo-mark{width:18px;height:26px;flex-shrink:0;}
.nav-pill{
  display:flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px; padding:6px; backdrop-filter:blur(10px);
}
.nav-pill a{
  color:rgba(255,255,255,.72); font-size:.86rem; font-weight:500;
  padding:9px 16px; border-radius:999px; transition:.25s var(--ease);
  white-space:nowrap;
}
.nav-pill a:hover{color:#fff; background:rgba(255,255,255,.09);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:999px; font-size:.9rem; font-weight:600;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-primary{
  background:linear-gradient(180deg,var(--blue-400),var(--blue-500));
  color:#fff; box-shadow:0 10px 24px -8px rgba(24,116,247,.65);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(24,116,247,.8);}
.btn-primary svg{width:16px;height:16px;transition:transform .3s var(--ease);}
.btn-primary:hover svg{transform:translateX(-3px);}
.btn-ghost-dark{color:#fff;}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:999; background:#081120;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.preloader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.preloader svg{width:60px;height:32px;}
.preloader .pill-path{
  stroke-dasharray:190; stroke-dashoffset:190;
  animation:drawPill 1.15s var(--ease) infinite;
}
@keyframes drawPill{
  0%{stroke-dashoffset:190;}
  55%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:-190;}
}

/* ---------- Hero (cinematic scroll-zoom) ---------- */
@keyframes riseIn{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);}}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.7);}}

.hero-cinematic{position:relative; height:340vh; background:#081120;}
.hero-pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#081120;
}

/* atmosphere: blurred drifting clouds, sharpens on scroll */
.atmosphere{position:absolute; inset:-12%; z-index:1; filter:blur(34px); will-change:filter;}
.atmosphere .blob{position:absolute; border-radius:50%;}
.atmosphere .b1{width:58vw;height:58vw; top:-14%; right:-8%; background:radial-gradient(circle,#28497c,transparent 70%); animation:driftA 22s ease-in-out infinite;}
.atmosphere .b2{width:50vw;height:50vw; bottom:-18%; left:-8%; background:radial-gradient(circle,#1c3054,transparent 70%); animation:driftB 26s ease-in-out infinite;}
.atmosphere .b3{width:38vw;height:38vw; top:28%; left:22%; background:radial-gradient(circle,#3a5f9c,transparent 72%); opacity:.7; animation:driftC 19s ease-in-out infinite;}
.atmosphere::after{content:''; position:absolute; inset:0; background:radial-gradient(60% 55% at 50% 45%, transparent 0%, #081120 92%);}
@keyframes driftA{0%,100%{transform:translate(0,0);}50%{transform:translate(-4%,5%);}}
@keyframes driftB{0%,100%{transform:translate(0,0);}50%{transform:translate(5%,-4%);}}
@keyframes driftC{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-3%,-3%) scale(1.08);}}

.hero-noise-grid{
  position:absolute; inset:0; z-index:1; opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(65% 55% at 50% 40%, #000 25%, transparent 85%);
}

/* landscape reveal layer (second world, behind the zoomed phone) */
.landscape-bg{position:absolute; inset:0; z-index:0; opacity:0; will-change:opacity;
  background:
    radial-gradient(120% 70% at 50% 118%, #16233f 0%, #0a1424 55%, #060c18 100%),
    linear-gradient(180deg,#0d1c33,#081120 60%);
}
.landscape-bg .glow{position:absolute; width:66vw; height:66vw; border-radius:50%; left:50%; top:40%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(61,147,255,.26), transparent 68%); filter:blur(6px);}
.landscape-bg .ring{position:absolute; border:1px solid rgba(120,160,220,.14); border-radius:50%; left:50%; top:52%; transform:translate(-50%,-50%);}
.landscape-bg .ring.r1{width:42vw;height:42vw;}
.landscape-bg .ring.r2{width:62vw;height:62vw;}
.landscape-bg .ring.r3{width:84vw;height:84vw;}
.landscape-bg .particle{position:absolute; width:3px;height:3px;border-radius:50%;background:#9ADFF5; box-shadow:0 0 8px 1px rgba(125,182,255,.7); animation:floaty 6s ease-in-out infinite;}

/* copy */
.hero-copy{position:relative; z-index:3; text-align:center; display:flex; flex-direction:column; align-items:center; padding:0 20px; will-change:transform,opacity;}
.hero-copy .eyebrow{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  color:var(--blue-300); font-size:.82rem; font-weight:600;
  background:rgba(61,147,255,.1); border:1px solid rgba(61,147,255,.28);
  padding:7px 16px; border-radius:999px; margin-bottom:26px;
  opacity:0; animation:riseIn .8s var(--ease) .1s forwards;
}
.hero-copy .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(31,169,113,.25);}
.hero-copy h1{
  font-size:var(--type-h1); font-weight:800; color:#fff;
  line-height:1.12; letter-spacing:-1.5px; max-width:19ch;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  row-gap:.16em; column-gap:.32ch;
  text-shadow:0 10px 44px rgba(61,147,255,.25);
  position:relative; z-index:6;
  perspective:820px;
  transform-style:preserve-3d;
}
.hero-copy h1.is-engraving{overflow:visible;}

.hero-copy h1 .word{
  display:inline-block;
  position:relative;
  z-index:1;
  opacity:0;
  transform:translateZ(82px) scale(1.36);
  filter:blur(14px) brightness(1.25);
  transform-origin:50% 50%;
  will-change:transform,opacity,filter;
  transition:none;
  backface-visibility:hidden;
}
.hero-copy h1 .word.revealed{
  animation:wordEngraveStamp .58s cubic-bezier(.78,0,.96,.12) forwards;
}
.hero-copy h1 .word.is-settled{
  opacity:1 !important;
  transform:none !important;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.32)) drop-shadow(0 16px 36px rgba(61,147,255,.32)) !important;
  animation:none !important;
  will-change:auto;
}
.hero-copy h1 .neon-word.revealed{
  opacity:1 !important;
}
.hero-copy h1 .neon-word.is-settled.neon-lit,
.hero-copy h1 .neon-word.revealed.neon-lit{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  animation:neonGlyphShimmer 2.8s linear infinite;
}
@keyframes wordEngraveStamp{
  0%{
    opacity:0;
    transform:translateZ(82px) scale(1.36);
    filter:blur(14px) brightness(1.25);
  }
  62%{
    opacity:1;
    transform:translateZ(0) scale(1);
    filter:blur(0) brightness(1.38);
  }
  74%{
    opacity:1;
    transform:translateZ(-7px) scale(1.08, .88);
    filter:blur(0) brightness(1.55) drop-shadow(0 0 24px rgba(97,216,255,.6)) drop-shadow(0 3px 0 rgba(0,0,0,.38));
  }
  100%{
    opacity:1;
    transform:translateZ(0) scale(1);
    filter:drop-shadow(0 2px 0 rgba(0,0,0,.32)) drop-shadow(0 16px 36px rgba(61,147,255,.32));
  }
}

/* dust rising from the surface on each stamp */
.hero-copy h1 .engrave-dust{
  position:absolute;
  left:50%;
  bottom:-4px;
  width:0;
  height:0;
  pointer-events:none;
  z-index:0;
}
.hero-copy h1 .engrave-dust .dust-cloud{
  position:absolute;
  left:50%;
  bottom:0;
  width:var(--cloud-w, 140%);
  height:var(--cloud-h, 32px);
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%, rgba(220,234,252,.95) 0%, rgba(165,190,228,.62) 36%, rgba(130,160,205,.28) 55%, transparent 78%);
  opacity:0;
  filter:blur(5px);
  animation:dustCloudPuff 1.25s ease-out forwards;
  animation-delay:var(--cloud-d, 0ms);
}
.hero-copy h1 .engrave-dust .dust-cloud.heavy{
  height:calc(var(--cloud-h, 32px) * 1.45);
  background:radial-gradient(ellipse at 50% 100%, rgba(240,246,255,.85) 0%, rgba(180,205,240,.55) 42%, rgba(140,170,215,.2) 68%, transparent 82%);
  filter:blur(7px);
  animation-duration:1.45s;
  animation-delay:var(--cloud-d, 40ms);
}
.hero-copy h1 .engrave-dust .dust-cloud.burst{
  height:calc(var(--cloud-h, 32px) * 1.1);
  background:radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.7) 0%, rgba(190,210,240,.42) 40%, transparent 72%);
  filter:blur(3px);
  animation-duration:1.05s;
  animation-delay:var(--cloud-d, 55ms);
}
.hero-copy h1 .engrave-dust i{
  position:absolute;
  left:0;
  bottom:0;
  width:var(--grain, 5px);
  height:var(--grain, 5px);
  border-radius:999px;
  background:rgba(220,232,250,.98);
  box-shadow:0 0 10px rgba(185,205,235,.7);
  opacity:0;
  transform:translate(-50%, 0) scale(.5);
  animation:dustGrainRise var(--dur, 1.15s) ease-out forwards;
  animation-delay:var(--delay, 0ms);
}
.hero-copy h1 .engrave-dust i:nth-child(3n){
  background:rgba(175,198,228,.92);
  width:calc(var(--grain, 5px) + 3px);
  height:calc(var(--grain, 5px) - 1px);
  border-radius:40% 60% 50% 45%;
}
.hero-copy h1 .engrave-dust i:nth-child(3n+1){
  background:rgba(245,248,255,.9);
}
.hero-copy h1 .engrave-dust i:nth-child(5n){
  background:rgba(200,215,240,.95);
  box-shadow:0 0 12px rgba(165,190,230,.75);
}
@keyframes dustCloudPuff{
  0%{opacity:0; transform:translateX(-50%) scaleX(.2); filter:blur(7px);}
  12%{opacity:1; filter:blur(4px);}
  100%{opacity:0; transform:translateX(-50%) scaleX(1.7) translateY(-36px); filter:blur(14px);}
}
@keyframes dustGrainRise{
  0%{opacity:0; transform:translate(-50%, 6px) scale(.35);}
  12%{opacity:1;}
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--dx)), calc(-1 * var(--rise) + var(--dy, 0px))) scale(.1);
    filter:blur(2.5px);
  }
}

html:not(.js-ready) .hero-copy h1 .word{
  opacity:1;
  transform:none;
  filter:none;
  animation:none !important;
}
@media (prefers-reduced-motion: reduce){
  .hero-copy h1 .word,
  .hero-copy h1 .word.revealed,
  .hero-copy h1 .word.is-settled{
    opacity:1 !important;
    transform:none !important;
    filter:drop-shadow(0 10px 24px rgba(61,147,255,.2)) !important;
    animation:none !important;
  }
  .hero-copy h1 .engrave-dust{display:none !important;}
}
.hero-copy h1 em:not(.neon-word){
  font-style:normal; font-weight:800;
  background:linear-gradient(95deg,#9ADFF5,#5DBFE3 45%, #b79bff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(79,160,255,.45));
}
.hero-copy p{
  margin-top:20px; color:rgba(226,234,247,.68); font-size:clamp(1rem,1.4vw,1.1rem);
  max-width:32rem; line-height:1.9; font-weight:400;
  opacity:0; animation:riseIn .9s var(--ease) .36s forwards;
}
.hero-copy .hero-ctas{
  display:flex; gap:14px; margin-top:34px;
  opacity:0; animation:riseIn .9s var(--ease) .5s forwards;
}
.btn-outline-light{
  color:#fff; padding:11px 24px; border-radius:999px; border:1px solid rgba(255,255,255,.22);
  font-size:.9rem; font-weight:600; transition:.3s var(--ease);
}
.btn-outline-light:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4);}
.btn-lg{padding:14px 30px; font-size:.95rem;}

.scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:54px;
  color:rgba(226,234,247,.55); font-size:.76rem; font-weight:500;
  opacity:0; animation:riseIn .9s var(--ease) .74s forwards;
}
.cue-3d{width:22px; height:22px; position:relative; perspective:240px;}
.cue-3d i{
  position:absolute; inset:0; border:1.3px solid rgba(226,234,247,.75);
  transform-style:preserve-3d; animation:spin3d 5.5s linear infinite;
}
.cue-3d i::before{content:''; position:absolute; inset:5px; border:1px solid rgba(125,182,255,.6);}
@keyframes spin3d{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(180deg);}}

/* phone zoom stage — the giant scroll-driven zoom */
.phone-stage{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; perspective:1600px;}
.phone-zoom{position:relative; will-change:transform,opacity; opacity:0; transform:translateY(72px) scale(.92); transform-origin:center center;}
.phone-zoom .screen-fade{
  position:absolute; inset:12px; border-radius:28px; background:linear-gradient(160deg,#132844,#0a1830);
  opacity:0; transition:opacity .1s linear; z-index:6;
}
.phone-stage.is-front{z-index:6;}
.hero-copy.is-fading{pointer-events:none;}

/* final settled phone with live chat */
.phone-final{position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; will-change:transform,opacity; perspective:1000px;}
.phone-final .phone{transition:transform .35s ease-out; transform-style:preserve-3d;}
.chat-screen{padding:4px 2px; flex:1; display:flex; flex-direction:column; gap:9px; overflow:hidden;}
.chat-hey{font-size:1.05rem; font-weight:800; color:#0e1c30; margin:4px 2px 0;}
.chat-bubble{
  max-width:84%; font-size:.71rem; line-height:1.75; opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.chat-bubble.show{opacity:1; transform:translateY(0);}
.chat-bubble.user{
  align-self:flex-end; background:#eef2fa; color:#0e1c30; font-weight:600;
  padding:9px 13px; border-radius:14px; border-bottom-left-radius:4px;
}
.chat-bubble.assist{align-self:stretch; color:#4a6178; padding:0 2px;}
.chat-input{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#f2f5fb; border-radius:14px; padding:10px 13px; font-size:.65rem; color:#8497ab;
}
.chat-input svg{width:14px;height:14px; color:var(--blue-500); flex-shrink:0;}
.chat-nav{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:2px;}
.chat-nav .qa .ic.on{background:var(--blue-500); border-color:var(--blue-500);}
.chat-nav .qa .ic.on svg{color:#fff;}

@media (max-width:860px){
  .hero-cinematic{height:auto;}
  .hero-pin{position:relative; height:auto; min-height:100vh; padding:130px 0 70px; flex-direction:column;}
  .phone-stage{display:none;}
  .phone-final{position:relative; opacity:1 !important; pointer-events:auto; transform:none !important; margin-top:40px;}
  .landscape-bg{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .cue-3d i{animation:none;}
  .atmosphere .blob{animation:none;}
}

/* ---------- Phone mockups (pure CSS) ---------- */
.phone{
  width:280px; background:#0c1424; border-radius:38px; padding:12px;
  box-shadow:0 30px 60px -20px rgba(6,12,24,.55), 0 0 0 1px rgba(255,255,255,.04);
  position:relative;
}
.phone-screen{
  background:#fff; border-radius:28px; overflow:hidden; position:relative;
  aspect-ratio:280/560;
  display:flex; flex-direction:column;
}
.phone-notch{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:90px; height:22px; background:#0c1424; border-radius:14px; z-index:5;
}
.phone-status{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px 6px; font-size:.68rem; font-weight:600; color:#0e1c30;
}
.phone-body{padding:6px 16px 14px; flex:1; display:flex; flex-direction:column; gap:14px;}
.phone-topbar{display:flex; align-items:center; justify-content:space-between;}
.phone-topbar .plogo{display:flex;align-items:center;gap:6px; font-weight:800; font-size:.8rem;}
.phone-topbar .plogo .mark{width:11px;height:16px;}
.phone-topbar .porg{font-size:.72rem; font-weight:600; color:#4a6178;}
.balance-card{
  background:linear-gradient(135deg,#2a86ff,#1157d6);
  border-radius:18px; padding:16px 18px; color:#fff; position:relative; overflow:hidden;
}
.balance-card::after{
  content:''; position:absolute; width:140px;height:140px;border-radius:50%;
  background:rgba(255,255,255,.12); top:-60px; left:-40px;
}
.balance-card .row1{display:flex;justify-content:space-between;font-size:.62rem;opacity:.85;margin-bottom:10px;}
.balance-card .amount{font-size:1.26rem;font-weight:800;letter-spacing:.3px;}
.balance-card .row2{display:flex;justify-content:space-between;font-size:.62rem;opacity:.85;margin-top:12px;}
.quick-actions{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.qa{display:flex;flex-direction:column;align-items:center;gap:5px;}
.qa .ic{width:38px;height:38px;border-radius:12px;background:#f2f5fb;display:flex;align-items:center;justify-content:center;border:1px solid #e7ecf5;}
.qa .ic svg{width:16px;height:16px;color:var(--blue-500);}
.qa span{font-size:.6rem;color:#4a6178;font-weight:600;}
.tx-head{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;font-weight:700;color:#0e1c30;}
.tx-head span:last-child{color:var(--blue-500); font-weight:600; font-size:.62rem;}
.tx-list{display:flex;flex-direction:column;gap:8px;}
.tx-item{display:flex;align-items:center;justify-content:space-between;background:#f7f9fc;border-radius:12px;padding:9px 11px;}
.tx-item .left{display:flex;align-items:center;gap:8px;}
.tx-item .av{width:26px;height:26px;border-radius:50%;background:#e4ecfb;color:var(--blue-500);display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;}
.tx-item .meta b{display:block;font-size:.66rem;color:#0e1c30;}
.tx-item .meta span{font-size:.56rem;color:#8497ab;}
.tx-item .amt{font-size:.66rem;font-weight:700;}
.tx-item .amt.neg{color:var(--red);}
.tx-item .amt.pos{color:var(--green);}
.phone-tabbar{margin-top:auto;display:flex;justify-content:space-around;align-items:center;padding:12px 10px 4px;border-top:1px solid #eef1f6;}
.phone-tabbar svg{width:16px;height:16px;color:#b7c1cf;}
.phone-tabbar .active{width:34px;height:34px;border-radius:11px;background:var(--blue-500);display:flex;align-items:center;justify-content:center;}
.phone-tabbar .active svg{color:#fff;}

/* floating badge */
.float-badge{
  position:absolute; background:#fff; border-radius:14px; padding:10px 14px;
  box-shadow:var(--shadow-card); display:flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:700; color:#0e1c30;
  animation:floaty 5s ease-in-out infinite;
}
.float-badge .ic{width:26px;height:26px;border-radius:8px;background:#e9f6ee;display:flex;align-items:center;justify-content:center;}
.float-badge .ic svg{width:14px;height:14px;color:var(--green);}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

/* ---------- Section shell ---------- */
section{position:relative;}
.section-pad{padding:120px 0;}
.eyebrow-lt{
  display:inline-flex; align-items:center; gap:8px; color:var(--blue-500); font-weight:700; font-size:.8rem;
  background:rgba(24,116,247,.08); border:1px solid rgba(24,116,247,.18);
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.section-head{max-width:900px;}
.section-pad h2{font-size:var(--type-h2); font-weight:800; line-height:1.3; letter-spacing:-.65px; width:max-content; max-width:100%; white-space:nowrap;}
.section-head p{margin-top:16px; color:var(--ink-600); font-size:1.02rem; line-height:1.9;}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.14s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.23s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.32s;}

/* ---------- Feature split (credit decisions) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.feat-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:14px;
  margin-top:34px;
}
.feat-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  min-width:0;
}
.feat-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-card); border-color:transparent;}
.feat-card h3{font-size:.98rem; font-weight:700; margin-bottom:6px;}
.feat-card p{font-size:.82rem; color:var(--ink-600); line-height:1.75;}
.split .btn-primary{margin-top:30px;}

.device-stage{
  position:relative; display:flex; justify-content:center; align-items:center; min-height:520px;
}
.device-stage .blob{
  position:absolute; width:420px;height:420px;
  background:linear-gradient(135deg,#dbe7fb,#eef2fa);
  clip-path:polygon(20% 0%, 100% 10%, 90% 90%, 10% 100%);
  z-index:0;
}
.device-stage .phone{position:relative; z-index:1;}

/* transfer flow inner */
.flow-card{background:#f7f9fc; border-radius:14px; padding:12px; font-size:.62rem;}
.flow-status{display:flex;align-items:center;gap:6px;color:var(--green); font-weight:700; margin-bottom:8px;}
.flow-status .pulse{width:6px;height:6px;border-radius:50%;background:var(--green); animation:pulseDot 1.4s infinite;}
.flow-amount{font-size:1.05rem; font-weight:800; margin-bottom:4px;}
.flow-track{height:4px;background:#e4ecfb;border-radius:4px;overflow:hidden;margin:10px 0;}
.flow-track .bar{height:100%;background:linear-gradient(90deg,var(--blue-400),var(--blue-500)); width:0%; transition:width 1.4s var(--ease); border-radius:4px;}
.flow-btn{margin-top:6px;text-align:center;background:var(--blue-500);color:#fff;border-radius:10px;padding:9px;font-weight:700; font-size:.66rem;}

/* ---------- Checkmark cards (built for progress) ---------- */
.check-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:20px;
  margin-top:44px;
}
.check-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px;
  position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.check-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card);}
.check-card .tick{
  width:30px;height:30px;border-radius:50%;background:rgba(24,116,247,.1); color:var(--blue-500);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.check-card .tick svg{width:15px;height:15px;}
.check-card h3{font-size:1.02rem; font-weight:700; margin-bottom:8px; color:var(--ink-900);}
.check-card p{font-size:.85rem; color:var(--ink-600); line-height:1.8;}

/* ---------- dark section wrapper for steps ---------- */
.section-dark{
  background:linear-gradient(180deg,#0b1a2e, #081120);
  color:#fff;
}
.section-dark .section-head h2{color:#fff;}
.section-dark .section-head p{color:rgba(226,234,247,.6);}

.steps-row{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px;
  margin-top:48px;
}
.step-card{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:26px;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  min-width:0;
}
.step-card:hover{transform:translateY(-6px); background:rgba(255,255,255,.06); border-color:rgba(61,147,255,.4);}
.step-card .num{font-size:.82rem; font-weight:800; color:var(--blue-400); margin-bottom:22px; direction:ltr; display:inline-block;}
.step-card h3{font-size:1.02rem; font-weight:700; margin-bottom:10px; color:#fff;}
.step-card p{font-size:.83rem; color:rgba(226,234,247,.55); line-height:1.85;}

/* ---------- Credit Hub reveal (supply-chain isometric scene) ---------- */
.hub-wrap{margin-top:36px;}

/* step legend above the diagram */
.chain-legend{display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:28px; flex-wrap:wrap;}
.chain-step{display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 8px 8px 16px;}
.chain-step b{
  width:26px;height:26px;border-radius:50%; background:var(--ice-50); color:var(--blue-500);
  display:flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:800; flex-shrink:0;
}
.chain-step span{font-size:.82rem; font-weight:700; color:var(--ink-900); white-space:nowrap;}
.chain-step.active b{background:var(--blue-500); color:#fff;}
.chain-arrow{width:16px;height:16px; color:var(--ink-400); flex-shrink:0;}

.iso-panel{
  position:relative;
  background:radial-gradient(120% 100% at 50% 8%, #f3f7ff 0%, #eaf0fb 45%, #e3ebf9 100%);
  border-radius:26px; overflow:hidden; box-shadow:0 40px 90px -42px rgba(26,58,110,.28);
  aspect-ratio:1000/560; border:1px solid #e6ecf7;
}
.iso-floor{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(30deg, rgba(90,120,170,.10) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(150deg, rgba(90,120,170,.10) 0 1px, transparent 1px 54px);
  mask-image:radial-gradient(78% 85% at 50% 68%, #000 45%, transparent 94%);
}
.iso-spot{position:absolute; left:65%; top:52%; width:40%; height:56%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(61,120,224,.22), transparent 72%); filter:blur(6px); pointer-events:none;}
.iso-svg{position:absolute; inset:0; width:100%; height:100%;}

.iso-pipe{fill:none; stroke-linecap:round; stroke-dasharray:1100; stroke-dashoffset:1100; transition:stroke-dashoffset 1.1s var(--ease);}
.iso-pipe.base{stroke:#c9d3e4; stroke-width:9;}
.iso-pipe.shine{stroke:#f2f5fb; stroke-width:3.4;}
.iso-panel.in .iso-pipe{stroke-dashoffset:0;}
.iso-panel.in .iso-pipe.base{transition-delay:.05s;}
.iso-panel.in .iso-pipe.shine{transition-delay:.08s;}
.iso-panel.in .iso-pipe[data-seg="0"]{transition-delay:.05s;}
.iso-panel.in .iso-pipe[data-seg="1"]{transition-delay:.35s;}
.iso-panel.in .iso-pipe[data-seg="2"]{transition-delay:.4s;}
.iso-panel.in .iso-pipe[data-seg="3"]{transition-delay:.45s;}
.iso-panel.in .iso-pipe[data-seg="4"]{transition-delay:.75s;}
.iso-panel.in .iso-pipe[data-seg="5"]{transition-delay:.8s;}
.iso-panel.in .iso-pipe[data-seg="6"]{transition-delay:.85s;}

.iso-arrow{opacity:0; transform-box:fill-box; transform-origin:50% 50%; transition:opacity .4s var(--ease);}
.iso-panel.in .iso-arrow{opacity:1; transition-delay:1.15s;}

.iso-block{opacity:0; transform:scale(.6) translateY(14px); transform-box:fill-box; transform-origin:50% 100%;
  transition:opacity .6s var(--ease), transform .6s cubic-bezier(.34,1.56,.64,1);}
.iso-panel.in .iso-block{opacity:1; transform:scale(1) translateY(0);}
.iso-panel.in g[data-name="orgbuild"]{transition-delay:.02s;}
.iso-panel.in g[data-name="users"]{transition-delay:.1s;}
.iso-panel.in g[data-name="hub"]{transition-delay:.28s;}
.iso-panel.in g[data-name="vibe"]{transition-delay:.55s;}
.iso-panel.in g[data-name="kipa"]{transition-delay:.62s;}
.iso-panel.in g[data-name="tara"]{transition-delay:.69s;}
.iso-panel.in g[data-name="shop1"]{transition-delay:.95s;}
.iso-panel.in g[data-name="shop2"]{transition-delay:1.02s;}
.iso-panel.in g[data-name="shop3"]{transition-delay:1.09s;}

.hub-chip{opacity:0; transition:opacity .5s var(--ease) .9s;}
.iso-panel.in .hub-chip{opacity:1;}
.hub-glow-ring{opacity:0; transform-box:fill-box; transform-origin:50% 50%;}
.iso-panel.in .hub-glow-ring{animation:hubPulseSvg 2.4s ease-out 1s infinite;}
.hub-glow-ring.r2{animation-delay:1.5s !important;}
@keyframes hubPulseSvg{0%{opacity:.7; transform:scale(.8);} 100%{opacity:0; transform:scale(1.6);}}
.hub-orbit{opacity:0; transform-box:fill-box; transform-origin:50% 50%; transition:opacity .6s var(--ease) 1.1s;}
.iso-panel.in .hub-orbit{opacity:1; animation:orbitSpin 14s linear infinite;}
@keyframes orbitSpin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}

.iso-dot{opacity:0; transition:opacity .4s 1.1s;}
.iso-panel.in .iso-dot{opacity:1;}

.node-label{position:absolute; transform:translate(-50%,0); opacity:0; transition:opacity .6s var(--ease), transform .6s var(--ease); pointer-events:none;}
.iso-panel.in .node-label{opacity:1; transform:translate(-50%,4px);}
.node-pill{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:#fff; border:1px solid #e3e9f4; border-radius:10px; padding:6px 11px;
  font-size:.72rem; font-weight:700; color:var(--ink-900); box-shadow:0 10px 22px -12px rgba(26,58,110,.35);
}
.node-pill .dot{width:6px;height:6px;border-radius:50%; background:var(--blue-500); flex-shrink:0;}
.node-pill.amber .dot{background:#e0801a;}
.node-pill.hub{background:linear-gradient(160deg,#2f6fed,#1a4fc0); color:#fff; font-size:.86rem; padding:8px 18px; border:none;}
.node-pill.hub .dot{background:#fff;}
.node-pill.sub{font-size:.62rem; font-weight:600; color:var(--ink-400); background:transparent; box-shadow:none; border:none; padding:2px 4px;}

.stage-caption{position:absolute; z-index:3; font-size:.68rem; font-weight:700; color:#7c8aa3; letter-spacing:.2px; text-align:center; transform:translateX(-50%); white-space:nowrap;}

.hub-stats{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:16px;
  margin-top:20px;
}
.hub-stat{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; min-width:0;}
.hub-stat b{display:block; font-size:1.3rem; font-weight:800; color:var(--ink-900);}
.hub-stat span{font-size:.78rem; color:var(--ink-600); font-weight:500;}

/* ---------- Security section ---------- */
.sec-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:20px;
  margin-top:44px;
}
.sec-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px; transition:.35s var(--ease); min-width:0;}
.sec-card:hover{box-shadow:var(--shadow-card); transform:translateY(-6px);}
.sec-card .ic-wrap{width:42px;height:42px;border-radius:12px;background:rgba(24,116,247,.08); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--blue-500);}
.sec-card .ic-wrap svg{width:20px;height:20px;}
.sec-card h3{font-size:1rem; font-weight:700; margin-bottom:8px; color:var(--ink-900);}
.sec-card p{font-size:.85rem; color:var(--ink-600); line-height:1.8;}
.sec-card.featured{background:linear-gradient(160deg,#eef5ff,#e4edfc); border-color:transparent;}

/* ---------- FAQ ---------- */
.faq-list{margin-top:40px; display:flex; flex-direction:column; gap:12px;}
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item.open{border-color:rgba(24,116,247,.35); box-shadow:var(--shadow-card);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; font-size:.95rem; font-weight:700; text-align:right;
}
.faq-q .plus{
  width:26px;height:26px; border-radius:50%; border:1px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; position:relative; transition:.35s var(--ease);
}
.faq-item.open .plus{background:var(--blue-500); border-color:var(--blue-500); transform:rotate(135deg);}
.faq-q .plus::before, .faq-q .plus::after{content:''; position:absolute; background:var(--ink-900); transition:.3s;}
.faq-item.open .plus::before, .faq-item.open .plus::after{background:#fff;}
.faq-q .plus::before{width:10px;height:1.6px;}
.faq-q .plus::after{width:1.6px;height:10px;}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a > div{overflow:hidden; min-height:0;}
.faq-a p{padding:0 24px 22px; font-size:.86rem; color:var(--ink-600); line-height:1.9; max-width:60ch;}

/* ---------- CTA + footer ---------- */
.cta-band{
  background:linear-gradient(180deg,#0b1a2e,#081120); color:#fff; padding:100px 0 60px;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; width:600px;height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(61,147,255,.22), transparent 70%);
  top:-260px; right:-160px;
}
.cta-inner{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;}
.cta-inner h2{font-size:var(--type-cta); font-weight:800; line-height:1.4; letter-spacing:-.45px; max-width:24ch;}
.cta-inner p{margin-top:14px; color:rgba(226,234,247,.6); font-size:.95rem; max-width:34ch; line-height:1.8;}
.cta-inner .btn-primary{margin-top:24px;}

.footer-grid{
  position:relative; z-index:1; margin-top:80px; padding-top:50px; border-top:1px solid rgba(255,255,255,.08);
  display:grid !important;
  grid-template-columns:1.3fr 1fr 1.2fr !important;
  gap:40px;
  align-items:start;
}
.footer-brand .brand{margin-bottom:14px;}
.footer-brand p{color:rgba(226,234,247,.5); font-size:.85rem; line-height:1.9; max-width:32ch;}
.footer-col h4{font-size:.86rem; font-weight:700; margin-bottom:18px; color:rgba(226,234,247,.85);}
.footer-col ul{display:flex; flex-direction:column; gap:12px;}
.footer-col a{font-size:.84rem; color:rgba(226,234,247,.55); transition:.25s;}
.footer-col a:hover{color:#fff;}
.footer-col li{display:flex; align-items:center; gap:8px; font-size:.84rem; color:rgba(226,234,247,.55); line-height:1.7;}
.footer-col li svg{width:15px;height:15px; flex-shrink:0; color:var(--blue-400); margin-top:2px;}
.footer-bottom{
  position:relative; z-index:1; margin-top:50px; padding-top:24px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:.78rem; color:rgba(226,234,247,.4);
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav-pill{display:none;}
  .split{grid-template-columns:1fr; gap:48px;}
  .device-stage{min-height:420px;}
  .steps-row{grid-template-columns:repeat(4, minmax(0, 1fr)) !important;}
  .sec-grid,
  .hub-stats,
  .check-row{grid-template-columns:repeat(3, minmax(0, 1fr)) !important;}
  .footer-grid{grid-template-columns:1.2fr 1fr 1.2fr !important; gap:28px;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
  .node-pill{font-size:.64rem; padding:5px 9px; gap:5px;}
  .node-pill.hub{font-size:.7rem; padding:6px 13px;}
  .stage-caption{font-size:.58rem;}
  .chain-step span{display:none;}
  .chain-step{padding:6px;}
}
@media (max-width:620px){
  .sec-grid,
  .hub-stats,
  .check-row{grid-template-columns:1fr !important;}
  .steps-row{grid-template-columns:1fr 1fr !important;}
  .footer-grid{grid-template-columns:1fr !important; gap:32px;}
  .section-pad{padding:80px 0;}
  .phone{width:240px;}
  .iso-panel{aspect-ratio:1000/760;}
  .node-pill{font-size:.58rem; padding:4px 8px;}
  .node-pill .dot{width:5px;height:5px;}
  .stage-caption{display:none;}
  .chain-legend{gap:4px;}
  .chain-arrow{width:12px;height:12px;}
}

/* =========================================================
   SABAPAY UX OPTIMIZATION — 2026
   Conversion-first + accessibility + mobile-first layer
   ========================================================= */
:root{
  --ux-max:1280px;
  --ux-radius:24px;
  --ux-glass:rgba(255,255,255,.72);
}

/* Longer cinematic hero so phone zoom feels slower while scrolling */
.hero-cinematic{height:380vh;}
.site-header{padding:14px 0;}
.site-header .container{width:min(var(--ux-max),92%);}
.site-header.scrolled{background:rgba(8,17,32,.88);}

.section-lead{margin-top:16px;color:var(--ink-600);font-size:1.02rem;line-height:1.9;}
.ux-mobile-nav[hidden]{display:none !important;}
.ux-mobile-nav.open[hidden]{display:flex !important;}
.site-header .brand{order:1}
.site-header .nav-pill{order:2}
.site-header .ux-menu-btn{order:2}
.site-header .btn{order:3}
.transfer-amount{text-align:center;padding:22px 0 6px;}
.transfer-amount .value{font-size:1.4rem;font-weight:800;}
.transfer-amount .meta{font-size:.66rem;color:var(--ink-400);margin-top:4px;}
.transfer-note{margin-top:auto;text-align:center;font-size:.6rem;color:var(--ink-400);padding-top:20px;}
.float-badge.is-secure{top:8%; right:-2%;}
.section-surface{background:#fff;}
.faq-shell{max-width:1120px;}
.faq-shell .section-head{max-width:100%;}
.hub-head{max-width:680px;}
.how-eyebrow{color:var(--blue-300)!important;background:rgba(61,147,255,.12)!important;border-color:rgba(61,147,255,.28)!important;}
.footer-brand .brand{color:#fff;}

/* Scroll progress */
.ux-progress{
  position:fixed;top:0;right:0;left:0;height:3px;z-index:1001;
  transform-origin:right center;transform:scaleX(0);
  background:linear-gradient(90deg,#9ADFF5,#67CAED,#327BBE);
  box-shadow:0 0 18px rgba(61,147,255,.7);
}

/* Mobile navigation */
.ux-menu-btn{
  display:none;width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);color:#fff;
  align-items:center;justify-content:center;
}
.ux-menu-btn svg{width:20px;height:20px}
.ux-mobile-nav{
  position:fixed;inset:0;z-index:1000;
  background:rgba(5,12,24,.88);backdrop-filter:blur(22px);
  padding:88px 20px 28px;display:flex;flex-direction:column;
  transform:translateY(-110%);opacity:0;pointer-events:none;
  transition:transform .45s var(--ease),opacity .35s var(--ease);
}
.ux-mobile-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
.ux-mobile-nav a{
  color:#fff;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.09);
  font-size:1.05rem;font-weight:700;
}
.ux-mobile-nav .ux-mobile-cta{
  margin-top:22px;justify-content:center;border:0;
}

/* Stronger hero information hierarchy */
.hero-copy p{max-width:38rem;}
.hero-ctas .btn-primary{min-width:154px;justify-content:center;}
.hero-ctas .btn-outline-light{min-width:154px;text-align:center;}

/* Quick value proposition strip */
.ux-proof{
  background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.ux-proof-inner{
  width:min(var(--ux-max),92%);margin:auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.ux-proof-item{
  padding:24px 22px;display:flex;align-items:center;gap:13px;
  border-inline-start:1px solid var(--line);
}
.ux-proof-item:first-child{border-inline-start:0}
.ux-proof-icon{
  width:40px;height:40px;border-radius:13px;flex:none;
  display:grid;place-items:center;background:#eef5ff;color:#327BBE;
}
.ux-proof-icon svg{width:19px;height:19px}
.ux-proof-item b{display:block;font-size:.9rem;margin-bottom:3px}
.ux-proof-item span{display:block;font-size:.73rem;color:var(--ink-600);line-height:1.6}

/* Better section rhythm and scanability */
.section-pad{padding:104px 0;}
.section-head p{max-width:58ch;}
.feat-card,.check-card,.sec-card,.step-card,.faq-item{
  border-radius:22px;
}

/* Make cards feel interactive without over-animation */
.feat-card,.check-card,.sec-card,.step-card{
  will-change:transform;
}
.feat-card:hover,.check-card:hover,.sec-card:hover,.step-card:hover{
  transform:translateY(-4px);
}

/* Conversion card after explanation */
.ux-mini-cta{
  margin-top:28px;padding:18px 20px;border-radius:18px;
  background:linear-gradient(135deg,#f4f8ff,#edf4ff);
  border:1px solid #dbe8fb;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.ux-mini-cta p{font-size:.82rem;color:var(--ink-600);line-height:1.75}
.ux-mini-cta b{display:block;color:var(--ink-900);font-size:.9rem;margin-bottom:3px}
.ux-mini-cta .btn{flex:none}

/* FAQ is easier to scan */
.faq-q{min-height:64px;}
.faq-q span:first-child{line-height:1.8;}
.faq-a p{max-width:68ch;}

/* Floating mobile CTA: persistent but unobtrusive */
.ux-mobile-cta-bar{
  display:none;position:fixed;bottom:12px;right:12px;left:12px;z-index:900;
  padding:8px;background:rgba(8,17,32,.86);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;
  box-shadow:0 18px 45px rgba(0,0,0,.25);
}
.ux-mobile-cta-bar .btn{width:100%;justify-content:center;padding:13px 20px}

/* Back to top */
.ux-top{
  position:fixed;bottom:22px;left:22px;z-index:850;
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;background:#0b1a2e;color:#fff;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 12px 30px rgba(8,17,32,.2);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:.3s var(--ease);
}
.ux-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.ux-top svg{width:18px;height:18px}

/* Performance/accessibility */
@media (prefers-reduced-motion:reduce){
  .ux-mobile-nav{transition:none}
  .ux-top{transition:none}
}
@media (max-width:980px){
  .ux-proof-inner{grid-template-columns:repeat(2,1fr)}
  .ux-proof-item:nth-child(3){border-inline-start:0}
}
@media (max-width:860px){
  .site-header .container{position:relative}
  .site-header .nav-pill{display:none}
  .ux-menu-btn{display:flex}
  .site-header .container>.ux-menu-btn{order:2}
  .site-header .container>.btn{order:3}
  .site-header .brand{order:1}
  .site-header .btn{padding:10px 16px;font-size:.78rem}
  .hero-cinematic{height:auto}
  .ux-proof-inner{grid-template-columns:1fr 1fr}
  .ux-proof-item{padding:18px 14px}
  .ux-mini-cta{align-items:flex-start;flex-direction:column}
  .ux-mini-cta .btn{width:100%;justify-content:center}
  .ux-mobile-cta-bar{display:block}
  .ux-top{bottom:82px;left:14px}
}
@media (max-width:620px){
  .section-pad{padding:78px 0}
  .ux-proof-inner{grid-template-columns:1fr}
  .ux-proof-item{border-inline-start:0;border-top:1px solid var(--line)}
  .ux-proof-item:first-child{border-top:0}
  .hero-copy .hero-ctas{width:100%;flex-direction:column;gap:10px}
  .hero-copy .hero-ctas>*{width:100%;justify-content:center}
  .ux-top{display:none}
}


/* =========================================================
   SABAPAY PREMIUM DESIGN SYSTEM — FINAL PASS
   Fintech premium / editorial / product-led
   ========================================================= */
:root{
  --sp-bg:#06101d;
  --sp-bg2:#0a1728;
  --sp-blue:#67CAED;
  --sp-blue2:#9ADFF5;
  --sp-cyan:#67CAED;
  --sp-ink:#08111f;
  --sp-muted:#607086;
  --sp-surface:#ffffff;
  --sp-soft:#f5f8fc;
  --sp-border:rgba(10,31,54,.10);
  --sp-shadow:0 24px 80px rgba(6,20,38,.12);
  --sp-ease:cubic-bezier(.2,.75,.2,1);
}

/* ---------- Global premium rhythm ---------- */
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{overflow-x:hidden}
::selection{background:rgba(61,147,255,.22);color:inherit}
.container{width:min(1240px,92%)}
.section-pad{padding:clamp(80px,9vw,132px) 0}
.section-head{margin-bottom:46px}
.section-head p{font-size:1rem;max-width:62ch}

/* ---------- Header ---------- */
.site-header{
  z-index:1002;
  transition:background .35s var(--sp-ease),box-shadow .35s var(--sp-ease),transform .35s var(--sp-ease);
}
.site-header.scrolled{
  background:rgba(6,16,29,.82);
  box-shadow:0 12px 45px rgba(0,0,0,.16);
  backdrop-filter:blur(22px) saturate(150%);
}
.site-header .btn{
  box-shadow:0 8px 25px rgba(61,147,255,.22);
}
.nav-pill{
  border-color:rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.055)!important;
  backdrop-filter:blur(16px);
}
.nav-pill a{transition:background .25s var(--sp-ease),color .25s var(--sp-ease)}
.nav-pill a:hover{background:rgba(255,255,255,.12)!important}

/* ---------- Hero: premium product reveal ---------- */
.hero-cinematic{
  height:380vh!important;
  background:
    radial-gradient(circle at 50% 18%,rgba(61,147,255,.18),transparent 28%),
    radial-gradient(circle at 16% 55%,rgba(97,216,255,.09),transparent 24%),
    radial-gradient(circle at 88% 70%,rgba(91,77,255,.08),transparent 22%),
    #06101d!important;
}
.hero-pin{
  min-height:100vh;
  overflow:hidden;
}
.hero-noise-grid{
  opacity:.22;
  background-size:48px 48px!important;
  mask-image:linear-gradient(to bottom,black 0%,black 60%,transparent 100%);
}
.hero-copy{padding-top:2vh} /* superseded by sabapay-hero-fixes */
.hero-copy .eyebrow{
  border:1px solid rgba(125,182,255,.22)!important;
  background:rgba(61,147,255,.09)!important;
  box-shadow:0 0 35px rgba(61,147,255,.08);
  backdrop-filter:blur(12px);
}
.hero-copy h1 em:not(.neon-word){
  background:linear-gradient(100deg,#9ADFF5 0%,#67CAED 48%,#fff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.hero-copy p{
  font-size:clamp(1rem,1.6vw,1.2rem)!important;
  color:rgba(226,234,247,.74)!important;
  max-width:640px!important;
  line-height:1.95!important;
}
.hero-ctas{margin-top:28px!important}
.hero-ctas .btn{
  min-height:54px!important;
  border-radius:16px!important;
  font-size:.92rem!important;
  font-weight:800!important;
  transition:transform .3s var(--sp-ease),box-shadow .3s var(--sp-ease),background .3s var(--sp-ease)!important;
}
.hero-ctas .btn-primary{
  box-shadow:0 14px 38px rgba(61,147,255,.3)!important;
}
.hero-ctas .btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(61,147,255,.42)!important;
}
.hero-ctas .btn-outline-light:hover{transform:translateY(-3px)}

/* Product phone becomes a hero object rather than a decoration */
.phone-final .phone,
.phone-zoom .phone{
  border-radius:44px!important;
  box-shadow:
    0 70px 120px rgba(0,0,0,.45),
    0 18px 45px rgba(61,147,255,.13),
    inset 0 0 0 1px rgba(255,255,255,.2)!important;
}
.phone-final .phone:before,
.phone-zoom .phone:before{
  content:"";
  position:absolute;inset:-1px;border-radius:45px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.28),transparent 30%,transparent 70%,rgba(61,147,255,.18));
  mix-blend-mode:screen;
}

/* ---------- Hero floating proof cards ---------- */
.hero-pin:after{
  content:"";
  position:absolute;
  width:520px;height:520px;
  border-radius:50%;
  border:1px solid rgba(125,182,255,.09);
  box-shadow:0 0 100px rgba(61,147,255,.08);
  left:50%;top:62%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:1;
}
.premium-float{
  position:absolute;z-index:5;pointer-events:none;
  min-width:178px;padding:14px 16px;border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(12,27,45,.72);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 20px 55px rgba(0,0,0,.24);
  color:#fff;
}
.premium-float small{display:block;color:rgba(226,234,247,.55);font-size:.68rem;margin-bottom:5px}
.premium-float strong{display:block;font-size:.94rem;letter-spacing:-.2px}
.premium-float .live-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#52d99a;box-shadow:0 0 0 5px rgba(82,217,154,.12);margin-left:6px;
}
.premium-float.one{right:9%;top:42%;transform:translateY(-50%);animation:floatOne 6s ease-in-out infinite}
.premium-float.two{left:9%;top:58%;animation:floatTwo 7s ease-in-out infinite}
@keyframes floatOne{50%{transform:translateY(calc(-50% - 12px))}}
@keyframes floatTwo{50%{transform:translateY(10px)}}

/* ---------- Trust strip ---------- */
.ux-proof{
  position:relative;z-index:6;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
}
.ux-proof-inner{max-width:1240px}
.ux-proof-item{min-height:104px}
.ux-proof-icon{
  background:linear-gradient(145deg,#edf5ff,#f8fbff);
  box-shadow:inset 0 0 0 1px rgba(61,147,255,.08);
}

/* ---------- Product-led cards ---------- */
.feat-grid,.check-grid,.sec-grid,.steps-row{
  gap:18px!important;
}
.feat-card,.check-card,.sec-card,.step-card{
  position:relative;
  border:1px solid var(--sp-border)!important;
  background:linear-gradient(145deg,#fff,#f9fbfe)!important;
  box-shadow:0 12px 40px rgba(6,20,38,.055)!important;
  overflow:hidden;
  transition:transform .45s var(--sp-ease),box-shadow .45s var(--sp-ease),border-color .45s var(--sp-ease)!important;
}
.feat-card:before,.check-card:before,.sec-card:before,.step-card:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 90% 0%,rgba(61,147,255,.10),transparent 34%);
  opacity:0;transition:opacity .4s var(--sp-ease);
}
.feat-card:hover,.check-card:hover,.sec-card:hover,.step-card:hover{
  transform:translateY(-8px)!important;
  box-shadow:0 28px 70px rgba(6,20,38,.11)!important;
  border-color:rgba(61,147,255,.22)!important;
}
.feat-card:hover:before,.check-card:hover:before,.sec-card:hover:before,.step-card:hover:before{opacity:1}

/* ---------- Dark "how it works" becomes a premium product story ---------- */
.section-dark{
  background:
    radial-gradient(circle at 20% 20%,rgba(61,147,255,.12),transparent 25%),
    radial-gradient(circle at 80% 80%,rgba(97,216,255,.08),transparent 22%),
    #071321!important;
}
.step-card{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.09)!important;
  box-shadow:none!important;
}
.step-card:before{background:radial-gradient(circle at 90% 0%,rgba(97,216,255,.10),transparent 35%)}
.step-card h3{color:#fff !important}
.step-card p{color:rgba(226,234,247,.58) !important}
.step-card .num{color:#9ADFF5 !important}

/* ---------- Hub visualization ---------- */
#habits .hub-panel,
#habits .iso-panel{
  border-radius:30px!important;
  box-shadow:0 30px 100px rgba(6,20,38,.10)!important;
}

/* ---------- Security ---------- */
.sec-card.featured{
  background:linear-gradient(145deg,#07182b,#0c2541)!important;
  color:#fff;
  border-color:rgba(125,182,255,.16)!important;
}
.sec-card.featured p{color:rgba(226,234,247,.65)!important}
.sec-card.featured h3{color:#fff!important}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--sp-border)}
.faq-item{border-bottom:1px solid var(--sp-border)!important}
.faq-q{
  font-size:1rem!important;
  font-weight:800!important;
  padding:20px 4px!important;
}
.faq-a{color:var(--sp-muted)}
.faq-item.open .faq-q{color:#327BBE}

/* ---------- CTA ---------- */
.cta-band{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%,rgba(97,216,255,.18),transparent 28%),
    radial-gradient(circle at 80% 80%,rgba(61,147,255,.18),transparent 30%),
    #071321!important;
}
.cta-band:before{
  content:"";position:absolute;width:700px;height:700px;border-radius:50%;
  border:1px solid rgba(125,182,255,.08);left:50%;top:50%;
  transform:translate(-50%,-50%);pointer-events:none;
}
.cta-inner{position:relative;z-index:2}

/* ---------- Micro interactions ---------- */
.magnetic{will-change:transform}
.ux-cursor-glow{
  position:fixed;width:280px;height:280px;border-radius:50%;z-index:0;
  pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(61,147,255,.08),transparent 65%);
  transform:translate(-50%,-50%);
  transition:opacity .3s ease;
}
@media (pointer:fine){.ux-cursor-glow{opacity:1}}
[data-tilt]{transform-style:preserve-3d}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .premium-float.one{right:3%}
  .premium-float.two{left:3%}
}
@media (max-width:860px){
  .hero-cinematic{height:auto!important;min-height:100vh}
  .hero-pin{min-height:100vh!important;padding-top:110px!important}
  .hero-copy p{font-size:1rem!important}
  .premium-float{display:none}
  .hero-pin:after{width:330px;height:330px;top:76%}
  .phone-final{margin-top:48px!important}
}
@media (max-width:620px){
  .section-head{margin-bottom:34px}
  .ux-proof-item{min-height:82px}
  .phone-final .phone,.phone-zoom .phone{border-radius:34px!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .premium-float{animation:none!important}
  .feat-card,.check-card,.sec-card,.step-card,.hero-ctas .btn{transition:none!important}
}

.premium-hero-note{
  display:flex;align-items:center;gap:10px;margin-top:22px;
  color:rgba(226,234,247,.52);font-size:.72rem;font-weight:700;
}
.premium-hero-note i{width:3px;height:3px;border-radius:50%;background:rgba(125,182,255,.7)}
@media(max-width:620px){
  .premium-hero-note{flex-wrap:wrap;justify-content:center;gap:7px}
}


/* Progressive enhancement: content stays readable if JS fails */
.premium-float,.ux-proof-item,.feat-card,.check-card,.sec-card,.step-card{
  transition:opacity .65s var(--sp-ease),transform .65s var(--sp-ease),box-shadow .45s var(--sp-ease),border-color .45s var(--sp-ease);
}
.js-ready .premium-float,
.js-ready .ux-proof-item,
.js-ready .feat-card,
.js-ready .check-card,
.js-ready .sec-card,
.js-ready .step-card{opacity:0;transform:translateY(18px)}
.js-ready .premium-visible{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  .js-ready .premium-float,
  .js-ready .ux-proof-item,
  .js-ready .feat-card,
  .js-ready .check-card,
  .js-ready .sec-card,
  .js-ready .step-card{opacity:1!important;transform:none!important}
}

/* ===== next stylesheet block ===== */

/* =========================================================
   SABAPAY CREDIT HUB — 3D ECOSYSTEM / STORE NETWORK
   Inspired by 2026 platform & fintech UX patterns:
   product-led visualization, clear ecosystem paths, live motion,
   real-world marketplace/store cues.
   ========================================================= */
.iso-panel-premium{
  position:relative!important;
  min-height:680px;
  aspect-ratio:auto!important;
  background:
    radial-gradient(80% 70% at 72% 45%,rgba(61,147,255,.14),transparent 58%),
    radial-gradient(55% 60% at 18% 50%,rgba(97,216,255,.10),transparent 62%),
    linear-gradient(145deg,#f8fbff 0%,#edf4fd 52%,#e4edf9 100%)!important;
  border:1px solid rgba(125,164,215,.25)!important;
  box-shadow:0 42px 110px -45px rgba(23,62,120,.36)!important;
  overflow:hidden;
}
.iso-panel-premium::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 28%,rgba(255,255,255,.08));
}
.iso-bg-orb{position:absolute;border-radius:50%;filter:blur(35px);opacity:.55;pointer-events:none;z-index:0}
.iso-bg-orb.orb-a{width:380px;height:380px;right:14%;top:12%;background:rgba(74,143,255,.13);animation:hubFloatA 11s ease-in-out infinite}
.iso-bg-orb.orb-b{width:300px;height:300px;left:0;bottom:-10%;background:rgba(97,216,255,.12);animation:hubFloatB 14s ease-in-out infinite}
@keyframes hubFloatA{50%{transform:translate(-20px,18px) scale(1.08)}}
@keyframes hubFloatB{50%{transform:translate(28px,-16px) scale(.94)}}
.iso-grid{
  position:absolute;inset:0;z-index:0;opacity:.48;
  background-image:
    linear-gradient(rgba(75,113,166,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(75,113,166,.055) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(80% 85% at 50% 50%,#000 20%,transparent 90%);
}
.iso-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(80% 70% at 50% 45%,transparent 45%,rgba(216,229,246,.38) 100%)}

.hub-scene{position:absolute;inset:0;z-index:3;transform:translateZ(0)}
.hub-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-line{fill:none;stroke-linecap:round}
.hub-line.base{stroke:#c5d5ea;stroke-width:10;opacity:.7}
.hub-line.active{stroke:url(#flowBlue);stroke-width:3;stroke-dasharray:10 12;opacity:.82;filter:url(#flowGlow);animation:flowDash 1.8s linear infinite}
.hub-line.active.soft{stroke:url(#flowSoft);stroke-width:2.5;opacity:.7}
@keyframes flowDash{to{stroke-dashoffset:44}}
.packet{fill:#fff;stroke:#67CAED;stroke-width:2;filter:url(#flowGlow)}
.packet-soft{stroke:#8aa3c9}
.flow-marker circle{fill:#fff;stroke:#5b8fe2;stroke-width:1.5;filter:drop-shadow(0 5px 10px rgba(48,105,190,.18))}
.flow-marker path{fill:#4d82dd}
/* Chevron points toward stores (left) — org → hub → landtech → shop */

.scene-node{position:absolute;z-index:4}
.scene-label{
  position:absolute;white-space:nowrap;text-align:center;left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.84);border:1px solid rgba(134,161,198,.24);
  box-shadow:0 12px 28px -16px rgba(20,55,105,.35);backdrop-filter:blur(12px);
  border-radius:12px;padding:7px 13px;display:flex;flex-direction:column;gap:2px;
  transition:.4s cubic-bezier(.2,.75,.2,1);
}
.scene-label b{font-size:.76rem;color:#0b1a2e;font-weight:800}
.scene-label span{font-size:.58rem;color:#7b8ca5}
.scene-node:hover .scene-label{transform:translateX(-50%) translateY(-4px);border-color:rgba(61,147,255,.32);box-shadow:0 16px 34px -16px rgba(20,55,105,.45)}

.org-node{right:7.5%;top:34%;width:130px;height:190px}
.org-stack{position:relative;width:100%;height:145px;filter:drop-shadow(0 22px 15px rgba(33,67,116,.14))}
.org-stack-media{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px}
.hub-asset{display:block;max-width:100%;height:auto;pointer-events:none;user-select:none}
.hub-asset-building{width:108px;height:auto;object-fit:contain;border-radius:12px}
.hub-asset-users{width:100px;height:auto;margin-top:-8px;object-fit:contain;border-radius:12px}
.org-building{position:absolute;right:8px;top:4px;width:92px;height:108px;transform:skewY(28deg) rotateZ(-28deg);transform-origin:50% 80%}
.org-roof{position:absolute;left:0;right:0;top:0;height:18px;background:linear-gradient(135deg,#edf5ff,#c6d8f4);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:1px solid #b7cae8}
.org-face{position:absolute;top:9px;height:90px;width:50%;background:linear-gradient(135deg,#dceaff,#a9c4eb);border:1px solid rgba(89,124,177,.18)}
.org-face.face-a{left:0;clip-path:polygon(0 0,100% 14%,100% 100%,0 88%)}
.org-face.face-b{right:0;background:linear-gradient(135deg,#bcd3f1,#8eadd8);clip-path:polygon(0 14%,100% 0,100% 88%,0 100%)}
.org-building i{position:absolute;width:8px;height:15px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(65,103,157,.08)}
.org-building i:nth-child(3){left:12px;top:27px}.org-building i:nth-child(4){left:28px;top:31px}.org-building i:nth-child(5){left:12px;top:51px}.org-building i:nth-child(6){left:28px;top:55px}.org-building i:nth-child(7){right:15px;top:34px}.org-building i:nth-child(8){right:15px;top:58px}
.people-cluster{position:absolute;left:5px;bottom:3px;width:86px;height:58px}
.person{position:absolute;width:26px;height:26px;border-radius:50% 50% 42% 42%;background:linear-gradient(#ffd8bb 0 38%,#4c82d8 39%);box-shadow:0 8px 12px rgba(40,80,135,.13)}
.person:after{content:"";position:absolute;left:5px;right:5px;bottom:-7px;height:14px;border-radius:12px 12px 7px 7px;background:inherit}
.person.p1{left:30px;top:0}.person.p2{left:4px;top:17px;transform:scale(.8)}.person.p3{right:4px;top:17px;transform:scale(.8)}.person.p4{left:23px;top:25px;transform:scale(.65)}.person.p5{left:48px;top:25px;transform:scale(.65)}
.org-node .scene-label{top:148px}

.hub-node{left:50.5%;top:39%;width:230px;height:200px;transform:translateX(-50%);z-index:7}
.hub-energy{position:absolute;inset:0;display:grid;place-items:center}
.energy-ring{position:absolute;border:1px solid rgba(61,147,255,.32);border-radius:50%;transform:rotateX(66deg);animation:hubPulse 3.2s ease-out infinite}
.energy-ring.r1{width:170px;height:104px}.energy-ring.r2{width:210px;height:128px;animation-delay:1s}.energy-ring.r3{width:250px;height:150px;animation-delay:2s}
@keyframes hubPulse{0%{opacity:.65;transform:rotateX(66deg) scale(.75)}70%,100%{opacity:0;transform:rotateX(66deg) scale(1.15)}}
.orbit-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#67CAED;box-shadow:0 0 14px #67CAED;animation:orbitHub 7s linear infinite}
.od1{offset-path:path("M 115 100 C 115 30 200 30 220 100 C 200 170 30 170 115 100");animation-name:orbitHubPath}
.od2{animation-delay:-3.5s}
@keyframes orbitHubPath{to{offset-distance:100%}}
.hub-core{position:absolute;left:50%;top:50%;width:148px;height:92px;transform:translate(-50%,-50%);filter:drop-shadow(0 30px 22px rgba(35,76,140,.25))}
.hub-core-media{width:200px;height:160px;display:grid;place-items:center}
.hub-asset-core{width:72px;height:auto;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(20,119,255,.28))}
.hub-core-top{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(135deg,#eef6ff,#c8dcfa);clip-path:polygon(50% 0,100% 48%,50% 100%,0 48%);border:1px solid rgba(82,126,190,.2);z-index:3}
.hub-core-front{position:absolute;left:0;top:23px;width:74px;height:69px;background:linear-gradient(145deg,#4f9bff,#1d5dcc);clip-path:polygon(0 0,100% 50%,100% 100%,0 58%);z-index:2}
.hub-core-side{position:absolute;right:0;top:23px;width:74px;height:69px;background:linear-gradient(145deg,#2d70db,#1646a6);clip-path:polygon(0 50%,100% 0,100% 58%,0 100%);z-index:1}
.hub-core-copy{position:absolute;z-index:5;top:32px;left:50%;transform:translateX(-50%);color:#fff;text-align:center;direction:ltr}
.hub-core-copy strong{display:block;font-size:1.1rem;letter-spacing:.5px}.hub-core-copy small{display:block;font-size:.43rem;letter-spacing:1.6px;opacity:.72;margin-top:1px}
.hub-mark{position:absolute;top:-24px;left:50%;transform:translateX(-50%);display:flex;gap:3px}
.hub-mark i{width:7px;height:7px;border-radius:2px 5px 2px 5px;background:#fff;transform:rotate(45deg)}
.hub-floating-chip{position:absolute;background:#fff;border:1px solid rgba(86,132,197,.2);border-radius:999px;padding:5px 10px;font-size:.55rem;font-weight:800;color:#2e5ea7;box-shadow:0 10px 20px -12px rgba(26,64,120,.4);animation:chipFloat 4s ease-in-out infinite}
.chip-1{top:18px;right:-2px}.chip-2{bottom:32px;left:0;animation-delay:1s}.chip-3{top:54px;left:-22px;animation-delay:2s}
@keyframes chipFloat{50%{transform:translateY(-6px)}}
.hub-label{top:156px;min-width:170px;background:rgba(10,29,55,.9);border-color:rgba(97,216,255,.22)}
.hub-label b{color:#fff}.hub-label span{color:rgba(224,238,255,.62)}
.hub-tooltip{position:absolute;left:50.5%;top:18%;transform:translateX(-50%) translateY(8px);z-index:10;opacity:0;pointer-events:none;background:rgba(7,20,38,.9);color:#fff;border:1px solid rgba(125,182,255,.18);backdrop-filter:blur(14px);border-radius:12px;padding:8px 13px;box-shadow:0 18px 38px rgba(7,22,43,.22);transition:.55s var(--sp-ease)}
.hub-tooltip b{display:block;font-size:.66rem}.hub-tooltip small{display:block;font-size:.5rem;color:rgba(226,238,255,.58);margin-top:2px}
.tooltip-live{display:inline-block;width:6px;height:6px;border-radius:50%;background:#49d59b;box-shadow:0 0 0 4px rgba(73,213,155,.12);margin-left:6px;animation:pulseDot 1.4s infinite}

.landtechs{position:absolute;left:31%;top:13%;width:160px;height:74%;z-index:5}
.landtech-node{left:0;width:150px;height:105px}
.lt-vibe{top:0}.lt-kipa{top:37%}.lt-tara{bottom:0}
.hub-asset-landtech{position:absolute;left:50%;top:0;width:110px;height:72px;object-fit:contain;border-radius:14px;background:#fff;transform:translateX(-50%);filter:drop-shadow(0 18px 14px rgba(30,65,120,.13));transition:.45s var(--sp-ease)}
.lt-vibe .hub-asset-landtech{background:#2ec4b6}
.lt-kipa .hub-asset-landtech{background:#fff;width:118px;height:56px;top:8px}
.lt-tara .hub-asset-landtech{background:#fff;width:118px;height:48px;top:12px}
.landtech-node:hover .hub-asset-landtech{transform:translateX(-50%) translateY(-7px)}
.mini-isometric-card{position:absolute;left:50%;top:0;width:96px;height:60px;transform:translateX(-50%);filter:drop-shadow(0 18px 14px rgba(30,65,120,.13));transition:.45s var(--sp-ease)}
.landtech-node:hover .mini-isometric-card{transform:translateX(-50%) translateY(-7px) rotateX(2deg) rotateY(-3deg)}
.mini-top{position:absolute;inset:0 0 30px;background:linear-gradient(135deg,#f5f9ff,#bcd6fb);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);z-index:3}
.mini-side{position:absolute;left:0;top:15px;width:48px;height:45px;background:#3f7fe7;clip-path:polygon(0 0,100% 50%,100% 100%,0 50%);z-index:2}
.mini-front{position:absolute;right:0;top:15px;width:48px;height:45px;background:#245abf;clip-path:polygon(0 50%,100% 0,100% 50%,0 100%);z-index:1;color:#fff;text-align:center;padding-top:10px}
.mini-front .mini-logo{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.18);font-size:.5rem;font-weight:900;margin-bottom:1px}
.mini-front b{display:block;font-size:.52rem}.mini-front small{display:block;font-size:.34rem;opacity:.7}
.amber-card .mini-side{background:#f1a23b}.amber-card .mini-front{background:#c97718}.amber-card .mini-top{background:linear-gradient(135deg,#fffaf0,#f7d9ac)}
.violet-card .mini-side{background:#7654d7}.violet-card .mini-front{background:#4c2da5}.violet-card .mini-top{background:linear-gradient(135deg,#f8f4ff,#d8cdf8)}
.landtech-node .scene-label{top:65px}

.storefronts{position:absolute;left:4.5%;top:11%;width:190px;height:79%;z-index:5}
.store-node{position:absolute;width:190px;height:150px}
.store-1{top:0}.store-2{top:37%}.store-3{bottom:0}
.store-building{position:absolute;left:0;top:0;width:120px;height:104px;filter:drop-shadow(0 18px 14px rgba(40,68,106,.13));transition:.5s var(--sp-ease)}
.store-node:hover .store-building{transform:translateY(-7px) scale(1.04)}
.store-roof{position:absolute;left:0;top:0;width:120px;height:24px;background:linear-gradient(135deg,#fff,#dbe6f4);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);z-index:4}
.store-roof span{position:absolute;top:4px;width:22px;height:16px;background:#e9b65b;border-radius:5px;transform:skewY(-25deg)}
.store-roof span:nth-child(1){left:15px}.store-roof span:nth-child(2){left:39px}.store-roof span:nth-child(3){left:63px}.store-roof span:nth-child(4){left:87px}
.store-sign{position:absolute;left:11px;right:11px;top:17px;height:24px;background:linear-gradient(135deg,#173e72,#2e6ec7);color:#fff;z-index:5;text-align:center;border-radius:3px 3px 1px 1px;padding-top:2px;box-shadow:0 4px 8px rgba(19,55,104,.18)}
.store-sign strong{display:block;font-size:.55rem;letter-spacing:1px;direction:ltr}.store-sign small{font-size:.34rem;opacity:.7}
.store-window{position:absolute;left:9px;top:39px;width:84px;height:58px;background:linear-gradient(135deg,#d9f1ff,#eef8ff);border:3px solid #fff;box-shadow:inset 0 0 0 1px #c2d7ec;z-index:3;overflow:hidden}
.store-window:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.75),transparent 35%,rgba(61,147,255,.08));}
.store-counter{position:absolute;left:6px;bottom:5px;width:90px;height:10px;background:#d7c5a7;transform:skewY(-9deg);z-index:4}
.store-door{position:absolute;right:8px;top:42px;width:21px;height:55px;background:linear-gradient(135deg,#6d9bd1,#244f88);border:3px solid #fff;z-index:3}
.store-door:after{content:"";position:absolute;right:3px;top:28px;width:3px;height:3px;background:#f5c86c;border-radius:50%}
.store-meta{position:absolute;left:115px;top:30px;width:110px;background:rgba(255,255,255,.82);border:1px solid rgba(130,158,196,.22);border-radius:10px;padding:7px 9px;box-shadow:0 10px 20px -15px rgba(30,60,105,.35);backdrop-filter:blur(10px)}
.store-meta b{display:block;font-size:.58rem;color:#14243a}.store-meta small{display:block;font-size:.45rem;color:#8291a7;margin-top:2px}.store-icon{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:6px;background:#eef5ff;color:#3d7fdf;font-size:.7rem;margin-bottom:3px}
.product-bottle,.product-box,.product-bag,.product-shirt,.product-shoe,.product-phone,.product-watch,.product-headset{position:absolute;z-index:2}
.product-bottle{width:8px;height:27px;left:13px;bottom:8px;border-radius:3px;background:#53a7ff;box-shadow:15px 5px 0 #f1bf59,30px 1px 0 #74c68d}
.product-box{width:16px;height:15px;left:43px;bottom:8px;background:#f5b95e}.product-bag{width:12px;height:17px;right:10px;bottom:8px;background:#ec7b7b;border-radius:2px}
.product-shirt{width:18px;height:22px;left:12px;bottom:9px;background:#e77988;clip-path:polygon(20% 0,40% 15%,60% 15%,80% 0,100% 25%,78% 38%,78% 100%,22% 100%,22% 38%,0 25%)}
.product-shoe{width:25px;height:9px;left:40px;bottom:9px;background:#6c7bd8;border-radius:10px 10px 3px 3px;transform:rotate(-7deg)}.product-bag{right:8px}
.product-phone{width:15px;height:28px;left:13px;bottom:8px;border-radius:3px;background:#182b46;border:2px solid #fff;box-shadow:20px 3px 0 #5e7ee8}.product-watch{width:13px;height:13px;left:54px;bottom:13px;border-radius:50%;background:#d8b45b;box-shadow:18px 0 0 #61b7a1}.product-headset{width:20px;height:14px;right:7px;bottom:10px;border:4px solid #8c72dd;border-bottom:0;border-radius:15px 15px 0 0}
.store-2 .store-sign{background:linear-gradient(135deg,#7b4b9e,#a96ecb)}.store-3 .store-sign{background:linear-gradient(135deg,#123f52,#2486a6)}

.scene-caption{position:absolute;z-index:8;font-size:.55rem;font-weight:800;color:#8292a8;letter-spacing:.2px}
.cap-org{right:8%;top:20%}.cap-land{left:31%;top:6%}.cap-shop{left:5%;top:5%}

.iso-ui{position:absolute;left:22px;right:22px;bottom:18px;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(255,255,255,.7);border:1px solid rgba(127,155,195,.2);backdrop-filter:blur(16px);border-radius:14px;padding:9px 13px;box-shadow:0 12px 30px -20px rgba(31,63,110,.3)}
.iso-ui-left{display:flex;align-items:center;gap:7px;font-size:.58rem;font-weight:800;color:#1a3150}
.live-dot{width:6px;height:6px;border-radius:50%;background:#24b982;box-shadow:0 0 0 4px rgba(36,185,130,.12);animation:pulseDot 1.5s infinite}
.iso-ui-right{display:flex;align-items:center;gap:8px;color:#7c8da5;font-size:.5rem;font-weight:700}
.iso-ui-right i{width:4px;height:4px;border-radius:50%;background:#9bb0ca}

.iso-panel-premium:not(.in) .hub-line.active{opacity:0}
.iso-panel-premium:not(.in) .scene-node{opacity:0;transform:translateY(18px) scale(.96)}
.iso-panel-premium.in .scene-node{opacity:1;transform:translateY(0) scale(1);transition:opacity .8s var(--sp-ease),transform .8s var(--sp-ease)}
.iso-panel-premium.in .org-node{transition-delay:.05s}.iso-panel-premium.in .hub-node{transition-delay:.22s}
.iso-panel-premium.in .lt-vibe{transition-delay:.42s}.iso-panel-premium.in .lt-kipa{transition-delay:.52s}.iso-panel-premium.in .lt-tara{transition-delay:.62s}
.iso-panel-premium.in .store-1{transition-delay:.75s}.iso-panel-premium.in .store-2{transition-delay:.84s}.iso-panel-premium.in .store-3{transition-delay:.93s}
.iso-panel-premium.in .hub-tooltip{opacity:1;transform:translateX(-50%) translateY(0);transition-delay:1.15s}


/* ---------- Marketplace cards: real storefront UX ---------- */
.marketplace-stores{width:250px!important;left:2.5%!important;top:8%!important;height:84%!important}
.marketplace-card{width:236px!important;height:188px!important;cursor:pointer;perspective:900px;transition:opacity .8s var(--sp-ease),transform .8s var(--sp-ease),filter .35s var(--sp-ease)}
.marketplace-card:hover{z-index:20;filter:drop-shadow(0 24px 24px rgba(24,70,130,.18))}
.market-card-visual{position:absolute;left:0;top:0;width:105px;height:112px;border-radius:18px;background:linear-gradient(145deg,#fff,#edf4fd);border:1px solid rgba(111,146,190,.2);box-shadow:0 16px 30px -20px rgba(22,61,112,.38);overflow:hidden;transition:transform .5s var(--sp-ease),box-shadow .5s var(--sp-ease)}
.marketplace-card:hover .market-card-visual{transform:translateY(-7px) rotateY(-7deg) rotateX(3deg) scale(1.025);box-shadow:0 26px 42px -22px rgba(22,61,112,.45)}
.market-card-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.7),transparent 38%,rgba(61,147,255,.05));pointer-events:none}
.market-card-visual-media{display:flex;align-items:center;justify-content:center;padding:14px 10px}
.market-card-visual-media .market-logo-img{position:relative;z-index:2;width:78px;height:68px;object-fit:contain;border-radius:10px}
.market-verified{display:inline-flex;align-items:center;gap:3px}
.market-verified img{flex:0 0 auto}
.hint-icon img{display:block;width:14px;height:14px}
.market-brand-logo{position:absolute;top:8px;right:8px;z-index:3;min-width:54px;height:23px;padding:0 7px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.47rem;box-shadow:0 7px 14px -9px rgba(0,0,0,.4)}
.market-brand-logo.digi{background:linear-gradient(135deg,#ef4056,#d51f42)}.market-brand-logo.digi span{font-weight:500}.market-brand-logo.digi b{font-weight:900;margin-right:2px}
.market-brand-logo.shahrvand{background:linear-gradient(135deg,#16824b,#0b6038);font-size:.52rem}.market-brand-logo.refah{background:linear-gradient(135deg,#ef7d20,#c95509);font-size:.56rem}
.market-product{position:absolute;left:12px;right:12px;bottom:10px;height:68px;z-index:2}
.product-airpods:before,.product-airpods:after{content:"";position:absolute;width:17px;height:42px;border-radius:11px 11px 8px 8px;background:linear-gradient(145deg,#fff,#cbd5e4);box-shadow:0 8px 16px rgba(30,57,90,.16)}
.product-airpods:before{left:27px;transform:rotate(5deg)}.product-airpods:after{left:49px;transform:rotate(-5deg)}
.product-airpods span{position:absolute;width:7px;height:24px;background:#fff;left:35px;top:34px;border-radius:0 0 5px 5px;z-index:3}.product-airpods i{position:absolute;width:7px;height:24px;background:#fff;left:57px;top:34px;border-radius:0 0 5px 5px;z-index:3}
.product-grocery:before{content:"";position:absolute;left:23px;bottom:7px;width:58px;height:48px;border-radius:7px;background:linear-gradient(135deg,#f6d37a,#e99f31);box-shadow:0 8px 15px rgba(40,65,90,.14)}
.product-grocery i,.product-grocery span,.product-grocery em{position:absolute;bottom:19px;width:13px;height:26px;border-radius:4px 4px 2px 2px;z-index:2}.product-grocery i{left:29px;background:#4ea9e8}.product-grocery span{left:47px;background:#7ac48c}.product-grocery em{left:65px;background:#ec7770}
.product-home:before{content:"";position:absolute;left:24px;bottom:8px;width:60px;height:44px;background:linear-gradient(145deg,#dce9f7,#9eb8d5);clip-path:polygon(50% 0,100% 25%,100% 100%,0 100%,0 25%);box-shadow:0 8px 15px rgba(40,65,90,.13)}
.product-home i{position:absolute;left:39px;bottom:18px;width:30px;height:15px;border-radius:8px;background:#fff;z-index:2}.product-home span{position:absolute;left:51px;bottom:35px;width:7px;height:17px;border-radius:4px;background:#f0ad52;z-index:2}.product-home em{position:absolute;left:70px;bottom:21px;width:8px;height:21px;border-radius:4px;background:#79b9a5;z-index:2}
.market-discount{position:absolute;left:8px;top:8px;z-index:4;background:#e9fff5;color:#129b68;border:1px solid #c8f2df;border-radius:999px;padding:3px 6px;font-size:.43rem;font-weight:900}
.market-quick{position:absolute;left:8px;bottom:8px;z-index:5;width:24px;height:24px;border-radius:8px;background:rgba(8,17,31,.86);color:#fff;font-size:.72rem;opacity:0;transform:translateY(4px);transition:.3s var(--sp-ease)}
.marketplace-card:hover .market-quick{opacity:1;transform:translateY(0)}
.market-card-body{position:absolute;right:0;top:4px;width:122px;padding:4px 2px 0 0;direction:rtl}
.market-store-row{display:flex;align-items:center;gap:4px;white-space:nowrap;margin-bottom:5px}.market-store-row span{font-size:.52rem;font-weight:900;color:#13243a}.market-store-row em{font-style:normal;color:#159c69;font-size:.39rem;background:#e9fbf3;border-radius:999px;padding:2px 4px}
.market-product-title{display:block;color:#14243a;font-size:.56rem;line-height:1.55;min-height:27px}.market-rating{display:flex;align-items:center;gap:4px;margin-top:5px}.market-rating strong{font-size:.48rem;color:#d28a00}.market-rating span{font-size:.43rem;color:#8a98ab}.market-price{display:flex;align-items:baseline;gap:3px;flex-wrap:wrap;margin-top:5px}.market-price b{font-size:.63rem;color:#0d2540}.market-price>span{font-size:.4rem;color:#64758c}.market-price s{font-size:.39rem;color:#9aa7b7;width:100%}
.marketplace-hint{position:absolute;left:28px;top:50%;z-index:11;display:flex;align-items:center;gap:7px;padding:7px 10px;background:rgba(7,20,38,.88);border:1px solid rgba(125,182,255,.16);color:#fff;border-radius:10px;box-shadow:0 14px 30px -18px rgba(0,0,0,.35);opacity:0;transform:translateY(8px);transition:.5s var(--sp-ease);pointer-events:none}.iso-panel-premium.in .marketplace-hint{opacity:1;transform:translateY(0);transition-delay:1.2s}.hint-icon{width:22px;height:22px;border-radius:7px;background:rgba(61,147,255,.18);display:grid;place-items:center;color:#9ADFF5}.marketplace-hint b{display:block;font-size:.5rem}.marketplace-hint small{display:block;font-size:.4rem;color:rgba(226,238,255,.56);margin-top:1px}
.market-modal{position:absolute;inset:0;z-index:100;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}.market-modal.open{opacity:1;visibility:visible;pointer-events:auto}.market-modal-backdrop{position:absolute;inset:0;background:rgba(5,16,31,.58);backdrop-filter:blur(10px)}.market-modal-card{position:relative;z-index:2;width:min(520px,calc(100% - 30px));background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.72);border-radius:24px;box-shadow:0 40px 100px -30px rgba(0,0,0,.42);overflow:hidden;display:grid;grid-template-columns:145px 1fr;transform:translateY(18px) scale(.97);transition:.45s var(--sp-ease)}.market-modal.open .market-modal-card{transform:translateY(0) scale(1)}.market-modal-close{position:absolute;left:12px;top:12px;z-index:5;width:30px;height:30px;border-radius:10px;background:rgba(8,17,31,.78);color:#fff;font-size:1.1rem}.market-modal-media{min-height:310px;background:linear-gradient(145deg,#eef5ff,#d9e8fb);position:relative}.market-modal-media:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(61,147,255,.2),transparent 55%)}.modal-product-art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.35);z-index:2}.market-modal-content{padding:28px 24px 22px;direction:rtl}.market-modal-store{font-size:.7rem;font-weight:900;color:#327BBE}.market-modal-category{display:inline-block;margin-top:7px;color:#7b8ba0;font-size:.48rem;background:#f1f5fa;border-radius:999px;padding:4px 7px}.market-modal-content h3{font-size:1rem;line-height:1.7;margin-top:12px;color:#0d1d31}.market-modal-rating{display:flex;gap:8px;align-items:center;margin-top:8px}.market-modal-rating strong{font-size:.65rem;color:#d08b00}.market-modal-rating span{font-size:.52rem;color:#8291a5}.market-modal-content p{font-size:.62rem;color:#64758b;line-height:1.9;margin-top:12px}.market-modal-price{display:flex;align-items:baseline;gap:8px;margin-top:14px}.market-modal-price b{font-size:1.05rem;color:#0b2340}.market-modal-price s{font-size:.58rem;color:#9aa7b7}.market-modal-actions{display:flex;gap:8px;margin-top:18px}.market-modal-actions .btn{flex:1;justify-content:center;font-size:.64rem;padding:11px 12px}.market-secondary{padding:10px 12px;border-radius:999px;border:1px solid #dbe4ef;background:#fff;color:#30465f;font-size:.62rem}.market-trust{display:flex;align-items:center;gap:6px;color:#7a899d;font-size:.45rem;margin-top:13px}.market-trust span{color:#13a36c}.market-trust i{width:3px;height:3px;border-radius:50%;background:#c2ccda}
@media(max-width:980px){.marketplace-stores{left:1%!important;transform:scale(.9);transform-origin:left top}.marketplace-hint{display:none}}
@media(max-width:680px){.marketplace-stores{left:0!important;top:7%!important;transform:scale(.72);transform-origin:left top}.market-modal-card{grid-template-columns:1fr}.market-modal-media{min-height:150px}.market-modal-content{padding:20px}.market-modal-close{left:10px;top:10px}}
@media(prefers-reduced-motion:reduce){.marketplace-card,.market-card-visual,.market-modal-card{transition:none!important}}

@media (max-width:980px){
  .iso-panel-premium{min-height:610px}
  .org-node{right:4%}.storefronts{left:2%;transform:scale(.84);transform-origin:left top}.landtechs{left:29%;transform:scale(.9);transform-origin:left top}.hub-node{left:53%}
  .cap-shop{left:2%}.cap-org{right:3%}
}
@media (max-width:680px){
  .iso-panel-premium{min-height:780px}
  .hub-scene{transform:scale(.86);transform-origin:center top}
  .org-node{right:0;top:29%}.hub-node{left:54%;top:38%}.landtechs{left:28%;top:12%}.storefronts{left:0;top:9%;transform:scale(.7);transform-origin:left top}
  .hub-tooltip{top:31%;font-size:.7rem}.cap-org,.cap-land,.cap-shop{display:none}
  .iso-ui{left:12px;right:12px;bottom:12px}.iso-ui-right{display:none}
}
@media (prefers-reduced-motion:reduce){
  .iso-bg-orb,.energy-ring,.orbit-dot,.hub-floating-chip,.hub-line.active,.packet,.live-dot{animation:none!important}
}

/* ===== next stylesheet block ===== */

.brand{
  flex-direction:row;
  align-items:center;
  gap:10px;
  /* RTL: first child (logo) sits on the right of صباتک */
}
.brand .logo-mark,
.brand img.logo-mark{
  order:0;
  width:22px;
  height:30px;
  flex-shrink:0;
  display:block;
  object-fit:contain;
}
.brand .brand-name{order:1; line-height:1;}


/* Keep hero copy clear of fixed header / nav-pill */
.hero-pin{
  align-items:center !important;
  justify-content:center;
  padding-top:clamp(108px, 14vh, 140px) !important;
  padding-bottom:48px !important;
  box-sizing:border-box;
}
.hero-copy{
  padding-top:8px !important;
  margin-top:0;
  position:relative;
  z-index:5;
  max-width:min(920px, 92vw);
  /* keep copy below fixed header */
  scroll-margin-top:100px;
}
.premium-float.one{top:48% !important;}
.premium-float.two{top:64% !important;}
.site-header{z-index:1002 !important;}
.nav-pill{z-index:3; position:relative;}
.hero-copy .eyebrow{margin-bottom:18px; position:relative; z-index:6;}
@media (max-width:860px){
  .hero-pin{padding-top:110px !important;}
}





/* =========================================================
   «هوشمند» — word color #327BBE + neon sweep #67CAED on glyphs only
   ========================================================= */
.neon-wrap{
  display:inline;
  position:static;
  padding:0;
  margin:0;
  background:none;
  border:0;
  box-shadow:none;
}
.neon-wrap::before,
.neon-wrap::after{
  content:none !important;
  display:none !important;
}

.hero-copy h1 em.neon-word,
.hero-copy h1 .neon-word{
  --word:#327BBE;
  --neon:#67CAED;
  position:relative;
  display:inline-block;
  font-style:normal !important;
  font-weight:800 !important;
  /* keep same reveal behavior as other .word (opacity/transform) */
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  background-image:
    linear-gradient(
      to left,
      transparent 0%,
      transparent 42%,
      var(--neon) 48%,
      #fff 50%,
      var(--neon) 52%,
      transparent 58%,
      transparent 100%
    ),
    linear-gradient(var(--word), var(--word));
  background-size:240% 100%, 100% 100%;
  background-position:-140% 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
.hero-copy h1 .neon-word.revealed{
  opacity:1 !important;
}
.hero-copy h1 .neon-word.revealed.neon-lit,
.hero-copy h1 .neon-word.is-settled.neon-lit{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  animation:neonGlyphShimmer 2.8s linear infinite;
}
.hero-copy h1 .neon-word::before,
.hero-copy h1 .neon-word::after{
  content:none !important;
  display:none !important;
}

@keyframes neonGlyphShimmer{
  from{ background-position:-140% 0, 0 0; }
  to{ background-position:100% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce){
  .hero-copy h1 .neon-word.revealed.neon-lit,
  .hero-copy h1 .neon-word.is-settled.neon-lit{
    animation:none !important;
    background-position:50% 0, 0 0;
  }
}


/* =========================================================
   Bootstrap coexistence (offline RTL) — keep design, use grid
   ========================================================= */
.container,
.container-lg,
.container-xl,
.container-xxl{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(12px, 4vw, 24px);
}
.site-header .container{
  max-width:1240px;
}
/* Preserve brand buttons over Bootstrap .btn defaults */
a.btn, button.btn, .btn{
  --bs-btn-padding-x:1.35rem;
  --bs-btn-padding-y:.7rem;
  --bs-btn-font-size:.9rem;
  --bs-btn-border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  border:0;
  box-shadow:none;
}
.btn-primary,
.btn.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg:#327BBE;
  --bs-btn-border-color:#327BBE;
  --bs-btn-hover-bg:#1464d6;
  --bs-btn-hover-border-color:#1464d6;
  --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:#1156b8;
  --bs-btn-active-border-color:#1156b8;
  background:linear-gradient(135deg,#67CAED,#327BBE) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 14px 28px -10px rgba(24,116,247,.65);
}
.btn-outline-light{
  --bs-btn-color:#fff;
  --bs-btn-border-color:rgba(255,255,255,.22);
  --bs-btn-hover-bg:rgba(255,255,255,.08);
  --bs-btn-hover-border-color:rgba(255,255,255,.4);
  --bs-btn-hover-color:#fff;
}
.split.row{
  display:flex;
  align-items:center;
  gap:0;
  grid-template-columns:unset;
}
img{height:auto;}

/* =========================================================
   SABAPAY PRODUCT-VISION REBUILD — 2026-08
   New product narrative, coded hub + roadmap, responsive UI
   ========================================================= */

/* Header / hero cleanup */
.site-header .brand-name{color:#fff}
.hero-copy h1 .hero-break{display:block}
.hero-copy p{max-width:720px!important}
.hero-ctas .btn-outline-light{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;text-decoration:none;transition:.3s var(--sp-ease)}
.hero-ctas .btn-outline-light:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}

/* Hero phone: current product */
.sabapay-phone .plogo img{width:11px;height:16px;object-fit:contain}
.current-credit-screen,.future-screen{position:relative;gap:11px!important}
.phone-state-badge{align-self:flex-start;display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;font-size:.54rem;font-weight:900;letter-spacing:-.1px}
.phone-state-badge.current{background:#eaf3ff;color:#327BBE;border:1px solid #cfe3ff}
.phone-state-badge.future{background:#e9fbf3;color:#13845d;border:1px solid #c8f0df}
.current-balance{padding:15px 16px!important}
.balance-live{display:flex;align-items:center;gap:4px}.balance-live i{width:5px;height:5px;border-radius:50%;background:#8ff0c3;box-shadow:0 0 0 3px rgba(143,240,195,.17)}
.current-balance .row2{gap:8px;line-height:1.5}
.phone-section-title{display:flex;justify-content:space-between;align-items:center;color:#0e1c30}.phone-section-title b{font-size:.66rem}.phone-section-title span{font-size:.54rem;color:#8497ab}
.network-list{display:flex;flex-direction:column;gap:7px}.network-row{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid #e7edf5;border-radius:11px;background:#f8fafe}.network-icon{width:28px;height:28px;border-radius:9px;background:#e9f2ff;color:#327BBE;display:grid;place-items:center;font-size:.62rem;font-weight:900;flex:none}.network-row>div{min-width:0;flex:1}.network-row b{display:block;font-size:.61rem;color:#10233a}.network-row small{display:block;font-size:.5rem;color:#8497ab;margin-top:1px}.network-row em{font-style:normal;font-size:.49rem;font-weight:800;color:#159c69;background:#e9fbf3;padding:3px 6px;border-radius:999px}.row-arrow{font-size:.75rem;color:#327BBE}.phone-primary-action{margin-top:auto;background:#327BBE;color:#fff;border-radius:11px;padding:9px 12px;font-size:.61rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:7px}.phone-primary-action span{font-size:.8rem}
.phone-caption{text-align:center;margin-top:15px;color:rgba(226,234,247,.78);display:flex;flex-direction:column;gap:3px}.phone-caption b{font-size:.76rem}.phone-caption span{font-size:.62rem;color:rgba(226,234,247,.48)}.phone-caption.current b{color:#9ADFF5}.phone-caption.future b{color:#57deb0}.phone-with-caption{display:flex;flex-direction:column;align-items:center}

/* Hero phone: final product vision */
.future-screen-wrap{background:linear-gradient(180deg,#f7fbff,#f4fbf7)}
.future-total-card{position:relative;overflow:hidden;border-radius:17px;padding:14px 14px;background:linear-gradient(135deg,#0e3158,#0f6c56);color:#fff;box-shadow:0 14px 28px -18px rgba(4,64,55,.75)}.future-total-card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;left:-35px;top:-55px;background:rgba(255,255,255,.08)}.future-total-card span,.future-total-card small{display:block;font-size:.55rem;color:rgba(255,255,255,.7)}.future-total-card b{display:block;font-size:1.05rem;margin:5px 0 4px;position:relative;z-index:2}.future-source-list{display:flex;flex-direction:column;gap:6px}.future-source{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:7px;padding:7px 8px;border:1px solid #e2ebe7;border-radius:10px;background:rgba(255,255,255,.82)}.source-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:.6rem;font-weight:900;background:#eaf3ff;color:#327BBE}.source-ic.link{background:#eef6ff;color:#67CAED}.source-ic.asset{background:#e9fbf3;color:#159c69}.future-source b{display:block;font-size:.57rem;color:#11253b}.future-source small{display:block;font-size:.47rem;color:#8497ab}.future-source strong{font-size:.59rem;color:#0e3158;white-space:nowrap}.future-actions{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.future-actions div{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 3px;border:1px solid #e0ebe7;border-radius:10px;background:#fff}.future-actions span{width:27px;height:27px;border-radius:8px;background:#e9fbf3;color:#11865f;display:grid;place-items:center;font-size:.75rem;font-weight:900}.future-actions b{font-size:.45rem;color:#4a6178;white-space:nowrap}

/* Proof + mini CTA */
.ux-proof-item b{font-size:.92rem}.ux-proof-item span{font-size:.75rem}.ux-mini-cta{border-color:rgba(24,116,247,.16);background:linear-gradient(120deg,rgba(255,255,255,.86),rgba(238,245,255,.9))}

/* About: capacity orbit instead of a transfer screen */
.capacity-visual{position:relative;width:min(520px,100%);aspect-ratio:1/1;margin:auto;border-radius:38px;background:radial-gradient(circle at 50% 48%,rgba(61,147,255,.16),transparent 28%),linear-gradient(145deg,#eef5ff,#f8fbff 58%,#edf8f4);border:1px solid rgba(95,139,195,.18);box-shadow:0 35px 80px -45px rgba(12,55,110,.32);overflow:hidden}
.capacity-visual:before{content:"";position:absolute;inset:9%;border:1px dashed rgba(61,147,255,.22);border-radius:50%}.capacity-visual:after{content:"";position:absolute;inset:24%;border:1px solid rgba(61,147,255,.16);border-radius:50%}
.capacity-orbit{position:absolute;border-radius:50%;border:1px solid rgba(24,116,247,.1);inset:17%;animation:capacitySpin 24s linear infinite}.capacity-orbit.orbit-two{inset:31%;animation-direction:reverse;animation-duration:17s}
@keyframes capacitySpin{to{transform:rotate(360deg)}}
.capacity-core{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:4;width:168px;height:168px;border-radius:50%;background:linear-gradient(145deg,#07162b,#0f2b4c);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 25px 55px -22px rgba(5,29,58,.7),0 0 0 10px rgba(255,255,255,.72)}.capacity-core img{width:32px;height:44px;margin-bottom:9px;filter:drop-shadow(0 6px 10px rgba(61,147,255,.25))}.capacity-core b{font-size:1.02rem}.capacity-core span{font-size:.68rem;color:rgba(226,234,247,.6);margin-top:4px}
.capacity-node{position:absolute;z-index:5;min-width:130px;padding:11px 12px;background:rgba(255,255,255,.92);border:1px solid rgba(119,151,188,.2);border-radius:14px;box-shadow:0 16px 32px -22px rgba(18,58,108,.35);backdrop-filter:blur(8px)}.capacity-node span,.capacity-node small{display:block}.capacity-node span{font-size:.72rem;font-weight:900;color:#122740}.capacity-node small{font-size:.56rem;color:#7a8ba0;margin-top:2px}.cap-salary{right:5%;top:12%}.cap-assets{left:4%;top:19%}.cap-gold{left:5%;bottom:22%}.cap-orgcredit{right:4%;bottom:22%}
.capacity-output{position:absolute;z-index:6;left:50%;bottom:5%;transform:translateX(-50%);width:64%;padding:12px 16px;border-radius:15px;background:linear-gradient(135deg,#fff,#eff9f5);border:1px solid rgba(30,159,111,.2);text-align:center;box-shadow:0 18px 34px -24px rgba(10,90,60,.35)}.capacity-output small{display:block;font-size:.54rem;color:#159c69;font-weight:800}.capacity-output b{display:block;font-size:.8rem;color:#10372b;margin:2px 0}.capacity-output span{display:block;font-size:.55rem;color:#71847e}
.section-head p{max-width:68ch}

/* How it works: connected process */
.process-section{overflow:hidden}.process-section:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;left:-160px;bottom:-270px;background:radial-gradient(circle,rgba(61,147,255,.12),transparent 66%);pointer-events:none}
.process-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:62px}.process-line{position:absolute;top:29px;right:8%;left:8%;height:1px;background:linear-gradient(90deg,rgba(97,216,255,.18),rgba(61,147,255,.75),rgba(97,216,255,.18));z-index:0}.process-step{position:relative;z-index:2;padding-top:58px}.process-dot{position:absolute;top:20px;right:50%;transform:translateX(50%);width:18px;height:18px;border:4px solid #0a1728;border-radius:50%;background:#67CAED;box-shadow:0 0 0 1px rgba(97,216,255,.55),0 0 20px rgba(97,216,255,.4)}.process-num{position:absolute;top:0;right:50%;transform:translateX(50%);color:#9ADFF5;font-size:.68rem;font-weight:900}.process-card{min-height:210px;padding:24px 22px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.025));border:1px solid rgba(125,182,255,.14);box-shadow:0 26px 50px -35px rgba(0,0,0,.6);transition:.35s var(--sp-ease)}.process-step:hover .process-card{transform:translateY(-6px);border-color:rgba(97,216,255,.3);background:rgba(255,255,255,.07)}.process-card h3{font-size:1rem;color:#fff;margin-bottom:10px}.process-card p{font-size:.82rem;color:rgba(226,234,247,.58);line-height:1.9}

/* True central hub */
.hub-network-panel{position:relative;margin-top:42px;min-height:650px;border-radius:34px;overflow:hidden;background:linear-gradient(145deg,#071426,#0b1e35 58%,#0b2434);border:1px solid rgba(125,182,255,.13);box-shadow:0 40px 85px -50px rgba(4,28,60,.58)}
.hub-network-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(61,147,255,.15),transparent 20%),radial-gradient(circle at 28% 40%,rgba(97,216,255,.06),transparent 26%),radial-gradient(circle at 75% 65%,rgba(50,210,150,.06),transparent 28%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,auto,auto,48px 48px,48px 48px;mask-image:radial-gradient(90% 85% at 50% 50%,#000 30%,transparent 100%)}
.hub-network-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}.network-path{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:9 12;opacity:.22;transition:opacity .8s var(--sp-ease)}.network-path.in{stroke:url(#hubLineIn)}.network-path.out{stroke:url(#hubLineOut)}.hub-network-panel.in .network-path{opacity:.78;animation:networkFlow 1.8s linear infinite}@keyframes networkFlow{to{stroke-dashoffset:-42}}
.hub-side{position:absolute;z-index:4;top:55px;bottom:72px;width:31%;display:flex;flex-direction:column;justify-content:space-between}.hub-inputs{right:42px}.hub-outputs{left:42px}.hub-side-title{position:absolute;top:-30px;font-size:.62rem;font-weight:900;letter-spacing:.2px;color:rgba(226,234,247,.5)}.hub-inputs .hub-side-title{right:0}.hub-outputs .hub-side-title{left:0}
.hub-network-node{width:100%;max-width:270px;display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:15px;background:rgba(255,255,255,.055);border:1px solid rgba(125,182,255,.12);backdrop-filter:blur(8px);color:#fff;box-shadow:0 16px 28px -24px rgba(0,0,0,.5);transition:.35s var(--sp-ease)}.hub-inputs .hub-network-node{margin-right:auto}.hub-outputs .hub-network-node{margin-left:auto}.hub-network-node:hover{transform:translateY(-4px);background:rgba(255,255,255,.075);border-color:rgba(97,216,255,.25)}.hub-node-icon{width:37px;height:37px;border-radius:11px;flex:none;display:grid;place-items:center;background:rgba(61,147,255,.14);color:#9ADFF5;font-weight:900}.hub-network-node.output .hub-node-icon{background:rgba(50,210,150,.12);color:#57deb0}.hub-network-node b{display:block;font-size:.75rem}.hub-network-node small{display:block;font-size:.56rem;color:rgba(226,234,247,.48);margin-top:3px;line-height:1.5}
.hub-network-core{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:250px;height:250px;display:grid;place-items:center}.core-ring{position:absolute;border-radius:50%;border:1px solid rgba(97,216,255,.2);animation:corePulse 3s ease-out infinite}.core-ring.r1{inset:20px}.core-ring.r2{inset:2px;animation-delay:1s}.core-ring.r3{inset:-18px;animation-delay:2s}@keyframes corePulse{0%{opacity:.75;transform:scale(.88)}70%,100%{opacity:0;transform:scale(1.12)}}.core-card{position:relative;z-index:2;width:168px;height:168px;border-radius:50%;background:radial-gradient(circle at 38% 30%,#163f68,#08172a 65%);border:1px solid rgba(125,182,255,.28);box-shadow:0 0 45px rgba(61,147,255,.18),inset 0 0 30px rgba(97,216,255,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center}.core-card img{width:32px;height:44px;margin-bottom:7px}.core-card b{font-size:1rem}.core-card span{font-size:.57rem;color:rgba(226,234,247,.48);margin-top:4px;max-width:16ch;line-height:1.6}
.hub-network-caption{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(125,182,255,.12);background:rgba(5,18,34,.7);color:rgba(226,234,247,.58);font-size:.6rem;white-space:nowrap}.hub-network-caption .live-dot{width:6px;height:6px;flex:none}
.hub-stats{margin-top:18px!important}.hub-stat{background:linear-gradient(145deg,#fff,#f9fbfe)}

/* Beyond credit micro diagrams */
.beyond-section{background:linear-gradient(180deg,#eef3fa,#f8fbff 45%,#eef6f2)}.beyond-grid .sec-card{position:relative;overflow:hidden}.credit-sum{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:18px}.credit-sum span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);font-size:.68rem;font-weight:900}.credit-sum i{font-style:normal;color:rgba(255,255,255,.42)}.credit-sum b{font-size:.7rem;color:#74e6bd;margin-right:4px}.income-flow{display:flex;align-items:center;gap:7px;margin-top:18px;font-size:.65rem}.income-flow span{padding:6px 8px;border-radius:8px;background:#f2f5fb;color:#60758e}.income-flow i{font-style:normal;color:#67CAED}.income-flow b{padding:6px 8px;border-radius:8px;background:#e9fbf3;color:#13845d}

/* Roadmap: now -> final product */
.roadmap-section{background:#06101d;color:#fff;overflow:hidden}.roadmap-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(61,147,255,.12),transparent 28%),radial-gradient(circle at 80% 70%,rgba(50,210,150,.08),transparent 30%),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:auto,auto,60px 60px,60px 60px;pointer-events:none}.roadmap-section .container{position:relative;z-index:2}.roadmap-head{max-width:760px;margin-inline:auto;text-align:center}.roadmap-head .eyebrow-lt{color:#9ADFF5;background:rgba(61,147,255,.1);border-color:rgba(61,147,255,.22)}.roadmap-head h2{color:#fff}.roadmap-head p{color:rgba(226,234,247,.58);margin-inline:auto}
.roadmap-visual{display:grid;grid-template-columns:minmax(0,1fr) 280px minmax(0,1fr);gap:30px;align-items:stretch;margin-top:58px}.roadmap-state{position:relative;padding:28px;border-radius:28px;border:1px solid rgba(125,182,255,.18);background:linear-gradient(155deg,rgba(21,48,83,.72),rgba(8,21,39,.78));box-shadow:0 32px 70px -45px rgba(0,0,0,.8)}.future-state{border-color:rgba(69,214,160,.23);background:linear-gradient(155deg,rgba(10,62,53,.62),rgba(8,24,35,.8))}.state-pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(61,147,255,.16);color:#9ADFF5;font-size:.62rem;font-weight:900}.future-state .state-pill{background:rgba(50,210,150,.13);color:#5fe1b2}.roadmap-state h3{font-size:1.55rem;margin-top:15px}.roadmap-state>p{font-size:.78rem;color:rgba(226,234,247,.5);margin-top:4px}.state-screen{margin-top:24px;padding:18px;border-radius:20px;background:#f8fbff;color:#10233a;box-shadow:0 22px 40px -30px rgba(0,0,0,.8)}.state-screen>small{display:block;color:#6d8198;font-size:.62rem}.state-screen>strong{display:block;font-size:1.25rem;margin:5px 0}.state-screen>span{font-size:.63rem;color:#327BBE;font-weight:800}.state-network{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}.state-network i{font-style:normal;text-align:center;padding:7px 4px;border-radius:8px;background:#edf4ff;color:#356187;font-size:.53rem;font-weight:700}.state-screen.future{background:linear-gradient(160deg,#f8fffc,#f2faf7)}.state-screen.future>strong{color:#0f6b50}.state-screen.future .state-network{grid-template-columns:repeat(2,1fr)}.state-screen.future .state-network i{background:#e6f8f1;color:#27705a}.future-bars{display:flex;flex-direction:column;gap:8px;margin-top:13px}.future-bars span{position:relative;padding-top:6px;font-size:.53rem;color:#637a73}.future-bars span:before{content:"";position:absolute;top:0;right:0;left:0;height:4px;border-radius:999px;background:#e4eeea}.future-bars i{position:absolute;right:0;top:0;width:var(--w);height:4px;border-radius:999px;background:linear-gradient(90deg,#67CAED,#32d296)}.state-list{display:flex;flex-direction:column;gap:9px;margin-top:22px;padding:0}.state-list li{position:relative;padding-right:18px;font-size:.7rem;color:rgba(226,234,247,.65);line-height:1.7}.state-list li:before{content:"✓";position:absolute;right:0;color:#84D6F1;font-weight:900}.future-state .state-list li:before{color:#57deb0}
.roadmap-track{position:relative;padding:20px 4px;display:flex;flex-direction:column;justify-content:center;gap:24px}.track-title{text-align:center;font-size:.74rem;font-weight:900;color:rgba(255,255,255,.84);margin-bottom:2px}.track-line{position:absolute;top:76px;bottom:47px;right:24px;width:1px;background:linear-gradient(#67CAED,rgba(61,147,255,.35),rgba(50,210,150,.65));z-index:0}.roadmap-step{position:relative;z-index:2;display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center}.roadmap-dot{width:13px;height:13px;border-radius:50%;background:#1a385a;border:3px solid #081528;box-shadow:0 0 0 1px rgba(125,182,255,.3);justify-self:center}.roadmap-step.active .roadmap-dot{background:#67CAED;box-shadow:0 0 0 1px #67CAED,0 0 20px rgba(61,147,255,.45)}.roadmap-step:last-child .roadmap-dot{background:#32d296;box-shadow:0 0 0 1px #32d296,0 0 20px rgba(50,210,150,.35)}.roadmap-step b{display:block;font-size:.72rem}.roadmap-step small{display:block;font-size:.56rem;color:rgba(226,234,247,.42);line-height:1.55;margin-top:2px}.roadmap-axis{display:grid;grid-template-columns:auto 1fr 12px 1fr auto;gap:12px;align-items:center;margin:28px auto 0;max-width:760px;color:rgba(226,234,247,.5);font-size:.62rem}.roadmap-axis i{height:1px;background:#67CAED}.roadmap-axis i.future{background:#32d296}.roadmap-axis b{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,#67CAED,#32d296);box-shadow:0 0 18px rgba(97,216,255,.5)}

/* FAQ + footer */
.faq-shell .eyebrow-lt{margin-bottom:14px}.cta-kicker{display:inline-flex;margin-bottom:15px;color:#9ADFF5;font-size:.68rem;font-weight:900;letter-spacing:.2px}.footer-grid-new{grid-template-columns:1.35fr .75fr .75fr 1.2fr!important;gap:42px!important}.footer-product-of{display:inline-flex;margin-top:12px;font-size:.65rem;color:rgba(226,234,247,.38)}.footer-contact li{align-items:flex-start}.footer-bottom{justify-content:flex-start!important}.footer-bottom span{font-size:.7rem!important}

/* Responsive */
@media (max-width:1100px){
  .hub-side{width:34%}.hub-inputs{right:24px}.hub-outputs{left:24px}.hub-network-core{width:210px;height:210px}.core-card{width:145px;height:145px}
  .roadmap-visual{grid-template-columns:minmax(0,1fr) 235px minmax(0,1fr);gap:18px}.roadmap-state{padding:22px}
  .footer-grid-new{grid-template-columns:1.2fr .7fr .7fr 1.1fr!important;gap:26px!important}
}
@media (max-width:980px){
  .capacity-visual{max-width:500px}
  .process-track{grid-template-columns:repeat(2,1fr);gap:26px 18px}.process-line{display:none}.process-step{padding-top:42px}.process-dot{top:5px}.process-num{top:-13px}
  .hub-network-panel{min-height:760px}.hub-side{top:78px;bottom:80px;width:36%}.hub-network-core{width:190px;height:190px}.core-card{width:132px;height:132px}.hub-network-node{padding:10px}.hub-network-node small{font-size:.52rem}.hub-network-lines{opacity:.72}
  .roadmap-visual{grid-template-columns:1fr;max-width:680px;margin-inline:auto}.roadmap-track{order:2;min-height:440px;padding-inline:14%}.current-state{order:1}.future-state{order:3}.track-line{right:calc(14% + 24px)}.roadmap-axis{max-width:600px}
  .footer-grid-new{grid-template-columns:1fr 1fr!important}
}
@media (max-width:860px){
  :root{--type-h1:clamp(2.15rem,8.8vw,3rem);--type-h2:clamp(1.65rem,5.3vw,2.25rem);--type-cta:clamp(1.5rem,4.8vw,2rem)}
  .hero-pin{padding-bottom:70px!important}.hero-copy{min-height:auto}.hero-break{display:block!important}
  .section-pad h2{white-space:normal;width:auto}
  .phone-stage{display:flex!important;position:relative!important;inset:auto!important;min-height:650px;width:100%;margin-top:34px}.phone-zoom{opacity:1!important;transform:none!important}.phone-final{position:relative!important;inset:auto!important;opacity:1!important;pointer-events:auto!important;transform:none!important;margin-top:0!important;padding-bottom:12px}.phone-caption{color:rgba(226,234,247,.78)}
  .scroll-cue{display:none}.landscape-bg{opacity:1!important}
  .hub-network-panel{min-height:auto;padding:34px 20px 26px;display:grid;grid-template-columns:1fr;gap:22px}.hub-network-lines{display:none}.hub-side{position:relative;inset:auto!important;width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.hub-side-title{position:relative;inset:auto!important;grid-column:1/-1;margin-bottom:2px}.hub-network-node{max-width:none!important;margin:0!important}.hub-network-core{position:relative;inset:auto;transform:none;margin:12px auto;width:190px;height:190px;grid-row:auto}.hub-inputs{order:1}.hub-network-core{order:2}.hub-outputs{order:3}.hub-network-caption{position:relative;left:auto;bottom:auto;transform:none;white-space:normal;justify-content:center;text-align:center;order:4;margin-top:4px}.hub-network-panel{display:flex;flex-direction:column}.hub-inputs{order:1}.hub-network-core{order:2}.hub-outputs{order:3}.hub-network-caption{order:4}
  .footer-grid-new{grid-template-columns:1fr 1fr!important}
}
@media (max-width:620px){
  :root{--type-h1:clamp(1.95rem,9.5vw,2.55rem);--type-h2:clamp(1.55rem,6.6vw,2rem);--type-cta:clamp(1.45rem,6vw,1.85rem)}
  .hero-copy{padding-inline:18px!important}.hero-copy p{font-size:.9rem!important;line-height:1.9!important}.hero-copy .hero-ctas{margin-top:22px!important}.phone-stage{min-height:610px;margin-top:20px}.phone{width:268px}.phone-final{padding-bottom:20px}
  .ux-proof-inner{grid-template-columns:1fr!important}.ux-proof-item span{font-size:.72rem}
  .capacity-visual{aspect-ratio:1/1.12;border-radius:28px}.capacity-core{width:134px;height:134px}.capacity-node{min-width:108px;padding:9px}.capacity-node span{font-size:.62rem}.capacity-node small{font-size:.49rem}.cap-salary{right:3%;top:9%}.cap-assets{left:3%;top:18%}.cap-gold{left:3%;bottom:26%}.cap-orgcredit{right:3%;bottom:25%}.capacity-output{width:78%;bottom:5%}
  .process-track{grid-template-columns:1fr;margin-top:44px}.process-step{display:grid;grid-template-columns:36px 1fr;gap:10px;padding-top:0}.process-num{position:relative;top:auto;right:auto;transform:none;grid-column:1}.process-dot{position:absolute;top:32px;right:12px;transform:none;width:12px;height:12px}.process-card{grid-column:2;grid-row:1/3;min-height:auto;padding:20px}.process-step:after{content:"";position:absolute;right:17px;top:44px;bottom:-28px;width:1px;background:rgba(97,216,255,.22)}.process-step:last-child:after{display:none}
  .hub-network-panel{padding-inline:14px}.hub-side{grid-template-columns:1fr}.hub-network-node{padding:11px}.hub-network-caption{font-size:.55rem}.hub-stats{grid-template-columns:1fr!important}
  .beyond-grid{grid-template-columns:1fr!important}.credit-sum b{width:100%;margin-top:3px}
  .roadmap-head{text-align:right}.roadmap-visual{margin-top:38px}.roadmap-state{padding:20px;border-radius:22px}.roadmap-track{padding-inline:0;min-height:430px}.track-line{right:24px}.roadmap-axis{grid-template-columns:auto 1fr 9px 1fr auto;gap:7px}.roadmap-axis span{font-size:.54rem}.state-network{grid-template-columns:1fr 1fr}.footer-grid-new{grid-template-columns:1fr!important;gap:30px!important}.footer-col ul{gap:10px}
}
@media (prefers-reduced-motion:reduce){.capacity-orbit,.core-ring,.network-path{animation:none!important}}


/* Minimal local grid utilities (Bootstrap-independent) */
.row{display:flex;flex-wrap:wrap}.col-12{width:100%;min-width:0}.align-items-center{align-items:center}.g-4{--sp-gutter:1.5rem}.g-xl-5{--sp-gutter-xl:3rem}
@media (min-width:992px){.col-lg-6{width:50%}}


/* Final responsive polish */
.beyond-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:980px){.beyond-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:620px){.beyond-grid{grid-template-columns:1fr!important}}
@media (max-width:860px){
  .ux-mobile-cta-bar{display:block;opacity:0;transform:translateY(120%);pointer-events:none;transition:opacity .28s ease,transform .36s var(--sp-ease)}
  .ux-mobile-cta-bar.show{opacity:1;transform:translateY(0);pointer-events:auto}
}


/* =========================================================
   V3 REFINEMENT — typography, motion flow, current-route proof, CTA phone
   ========================================================= */

/* Use available horizontal space before wrapping on desktop. */
@media (min-width:861px){
  .faq-q>span:first-child{white-space:nowrap;min-width:0}
  .faq-a p{max-width:none}
  .section-head{max-width:980px}
}
.faq-q{font-size:.95rem!important}

/* Second-section input/output motion. */
.capacity-flow{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.capacity-flow-path{fill:none;stroke-width:2.15;stroke-linecap:round;stroke-dasharray:8 10;opacity:.74;animation:capacityFlowDash 1.65s linear infinite}
.capacity-flow-path.in{stroke:rgba(61,147,255,.72)}
.capacity-flow-path.out{stroke:rgba(50,185,135,.8);stroke-width:2.4}
@keyframes capacityFlowDash{to{stroke-dashoffset:-36}}

/* Central hub lines: keep direction visible even before reveal. */
.network-path{stroke-dasharray:8 11;stroke-width:2.35}
.hub-network-panel.in .network-path{opacity:.9;animation:networkFlow 1.35s linear infinite}

/* Concrete current-state route with recognizable, colored network brands. */
.current-route-visual{position:relative;margin-top:30px;padding:30px 34px 24px;border-radius:28px;overflow:hidden;background:linear-gradient(145deg,#fff,#f4f8ff);border:1px solid rgba(66,118,180,.15);box-shadow:0 24px 55px -40px rgba(9,49,95,.32)}
.current-route-glow{position:absolute;left:50%;top:46%;width:65%;height:160%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(61,147,255,.12),transparent 64%);pointer-events:none}
.route-main{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;direction:rtl;gap:18px;min-height:150px}
.route-node{width:132px;height:96px;display:grid;place-items:center;padding:12px;border-radius:20px;background:#fff;border:1px solid rgba(89,126,171,.14);box-shadow:0 18px 32px -24px rgba(12,49,94,.3);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.route-node:hover{transform:translateY(-5px);box-shadow:0 24px 40px -24px rgba(12,49,94,.38)}
.route-node img{max-width:100%;max-height:68px;object-fit:contain;border-radius:10px}
.route-org img{max-height:76px}.route-sabapay img{max-width:38px;max-height:56px}.route-vibe img{max-width:96px}.route-digikala img{max-width:96px}
.route-arrow{position:relative;width:76px;height:20px;flex:0 1 76px}
.route-arrow:before{content:"";position:absolute;right:0;left:0;top:50%;height:2px;background:linear-gradient(90deg,rgba(61,147,255,.22),rgba(61,147,255,.86));transform:translateY(-50%);border-radius:999px}
.route-arrow:after{content:"";position:absolute;top:50%;left:0;width:10px;height:10px;border-left:2px solid #67CAED;border-bottom:2px solid #67CAED;transform:translateY(-50%) rotate(45deg);filter:drop-shadow(0 0 6px rgba(61,147,255,.45));animation:routeArrowPulse 1.4s ease-in-out infinite}
@keyframes routeArrowPulse{0%,100%{opacity:.35;left:18px}50%{opacity:1;left:0}}
.route-alt-logos{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px}
.route-alt-logos span{width:54px;height:38px;border-radius:10px;background:#fff;border:1px solid rgba(89,126,171,.12);display:grid;place-items:center;padding:5px;box-shadow:0 8px 18px -14px rgba(12,49,94,.3)}
.route-alt-logos img{max-width:100%;max-height:27px;object-fit:contain;border-radius:5px}

/* Final CTA: real product UI in a restrained phone frame. */
.cta-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,360px);align-items:center;gap:clamp(42px,7vw,92px);flex-wrap:nowrap}
.cta-inner>div:first-child{min-width:0}
.cta-inner p{max-width:58ch}
.cta-phone-visual{position:relative;z-index:2;justify-self:end;width:min(340px,100%);padding:18px}
.cta-phone-orbit{position:absolute;inset:6% -12% -8%;border-radius:50%;border:1px solid rgba(125,182,255,.16);box-shadow:0 0 80px rgba(61,147,255,.12);transform:rotate(-7deg)}
.cta-phone-shell{position:relative;padding:8px;border-radius:38px;background:linear-gradient(145deg,#111927,#02070e);border:1px solid rgba(255,255,255,.18);box-shadow:0 38px 75px -34px rgba(0,0,0,.8),0 0 0 1px rgba(125,182,255,.08);transform:rotate(-3deg);overflow:hidden}
.cta-phone-shell:before{content:"";position:absolute;z-index:3;top:10px;left:50%;transform:translateX(-50%);width:76px;height:18px;border-radius:0 0 13px 13px;background:#060a11;opacity:.95}
.cta-phone-shell img{display:block;width:100%;height:auto;border-radius:30px;object-fit:cover}

@media (max-width:980px){
  .route-main{gap:12px}.route-node{width:110px;height:86px}.route-arrow{width:48px;flex-basis:48px}
  .cta-inner{grid-template-columns:minmax(0,1fr) 300px;gap:36px}
}
@media (max-width:860px){
  .faq-q>span:first-child{white-space:normal}
  .current-route-visual{padding:26px 20px}
  .route-main{flex-direction:column;direction:rtl;gap:10px}
  .route-node{width:min(260px,82%);height:84px}
  .route-arrow{width:20px;height:34px;flex-basis:34px}
  .route-arrow:before{right:50%;left:auto;top:0;bottom:0;width:2px;height:auto;transform:translateX(50%);background:linear-gradient(rgba(61,147,255,.22),rgba(61,147,255,.86))}
  .route-arrow:after{left:50%;top:auto;bottom:0;transform:translateX(-50%) rotate(-45deg);animation:routeArrowPulseY 1.4s ease-in-out infinite}
  @keyframes routeArrowPulseY{0%,100%{opacity:.35;bottom:14px}50%{opacity:1;bottom:0}}
  .route-alt-logos{flex-wrap:wrap}
  .cta-inner{grid-template-columns:1fr;gap:36px}
  .cta-phone-visual{justify-self:center;width:min(310px,88vw)}
}
@media (max-width:620px){
  .current-route-visual{border-radius:22px;padding:22px 14px}
  .route-node{width:min(240px,88%)}
  .route-alt-logos span{width:48px;height:35px}
  .cta-phone-visual{width:min(275px,86vw);padding:12px}
  .cta-phone-shell{border-radius:32px}.cta-phone-shell img{border-radius:25px}
}
@media (prefers-reduced-motion:reduce){
  .capacity-flow-path,.route-arrow:after{animation:none!important}
}


/* =========================================================
   V4 SABAPAY BRAND — supplied SabaPay logo + its native palette
   #327BBE / #67CAED
   ========================================================= */
.site-header .brand img[src*="sabapay-mark"]{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 5px 14px rgba(103,202,237,.22))}
.plogo img[src*="sabapay-mark"]{width:21px!important;height:21px!important;object-fit:contain!important;margin-left:2px}
.capacity-core img[src*="sabapay-mark"]{width:52px;height:52px;object-fit:contain;margin-bottom:8px;filter:drop-shadow(0 7px 14px rgba(103,202,237,.24))}
.core-card img[src*="sabapay-mark"]{width:58px;height:58px;object-fit:contain;margin-bottom:5px;filter:drop-shadow(0 7px 16px rgba(103,202,237,.22))}
.route-sabapay img[src*="sabapay-mark"]{max-width:58px;max-height:58px;filter:drop-shadow(0 8px 16px rgba(50,123,190,.18))}
.btn-primary{background:linear-gradient(135deg,#67CAED,#327BBE);box-shadow:0 12px 28px -10px rgba(50,123,190,.58)}
.hero-copy h1 em:not(.neon-word){background:linear-gradient(100deg,#9ADFF5 0%,#67CAED 48%,#327BBE 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
.hero-copy h1 .neon-word{--word:#327BBE;--neon:#67CAED}
.capacity-core{box-shadow:0 25px 55px -22px rgba(5,29,58,.7),0 0 0 10px rgba(103,202,237,.12)}
.core-card{border-color:rgba(103,202,237,.34);box-shadow:0 0 48px rgba(103,202,237,.19),inset 0 0 32px rgba(103,202,237,.05)}
.roadmap-axis b{background:linear-gradient(135deg,#327BBE,#67CAED);box-shadow:0 0 18px rgba(103,202,237,.48)}
.cta-band{background:radial-gradient(circle at 20% 20%,rgba(103,202,237,.18),transparent 28%),radial-gradient(circle at 80% 80%,rgba(50,123,190,.18),transparent 30%),#071321!important}


/* V6/V7 — current product route: stronger context, hierarchy and brand familiarity */
.current-route-visual{position:relative;margin-top:34px;padding:32px 36px 28px;border-radius:30px;overflow:hidden;background:linear-gradient(145deg,#fbfdff 0%,#f1f7ff 58%,#edf5ff 100%);border:1px solid rgba(63,120,187,.16);box-shadow:0 28px 70px -48px rgba(12,49,94,.35)}
.current-route-glow{position:absolute;left:50%;top:45%;width:78%;height:180%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(61,147,255,.10),transparent 66%);pointer-events:none}
.current-route-head{position:relative;z-index:2;text-align:center;max-width:900px;margin:0 auto 24px}
.current-route-kicker{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;background:rgba(53,132,212,.09);border:1px solid rgba(53,132,212,.16);color:#2f78b9;font-size:.84rem;font-weight:800;margin-bottom:11px}
.current-route-head p{margin:0;color:#52657c;font-size:1rem;line-height:1.95}
.route-main{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:center;direction:rtl;gap:16px;min-height:auto;padding:4px 0 8px}
.route-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;min-width:142px}
.route-step-title{font-size:1rem;font-weight:850;color:#14243a}
.route-step small{display:block;color:#728196;font-size:.78rem;line-height:1.45;max-width:150px}
.route-node{width:140px;height:94px;display:grid;place-items:center;padding:12px 14px;border-radius:22px;background:rgba(255,255,255,.96);border:1px solid rgba(89,126,171,.14);box-shadow:0 18px 34px -25px rgba(12,49,94,.33);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.route-node:hover{transform:translateY(-5px);box-shadow:0 24px 44px -24px rgba(12,49,94,.40)}
.route-node img{max-width:100%;max-height:64px;object-fit:contain;border-radius:9px}
.route-arrow{position:relative;width:74px;height:20px;flex:0 1 74px;margin-top:52px}
.route-arrow:before{content:"";position:absolute;right:0;left:0;top:50%;height:2px;background:linear-gradient(90deg,rgba(75,169,222,.18),rgba(52,129,211,.86));transform:translateY(-50%);border-radius:999px}
.route-arrow:after{content:"";position:absolute;top:50%;left:0;width:10px;height:10px;border-left:2px solid #5BC7EA;border-bottom:2px solid #5BC7EA;transform:translateY(-50%) rotate(45deg);filter:drop-shadow(0 0 6px rgba(61,147,255,.42));animation:routeArrowPulse 1.4s ease-in-out infinite}
.route-growth-copy{position:relative;z-index:2;display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;margin:18px auto 14px;color:#394b63}
.route-growth-copy b{font-size:1rem;color:#20334d}.route-growth-copy span{font-size:.92rem;color:#66788f}
.route-logo-track{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:15px;padding-top:2px}
.route-logo-group{padding:13px 14px 15px;border-radius:20px;background:rgba(255,255,255,.60);border:1px solid rgba(87,132,183,.11);min-width:0}
.route-logo-group-title{display:block;text-align:center;color:#3f5876;font-size:.86rem;font-weight:800;margin-bottom:10px}
.route-alt-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:0}
.route-alt-logos span{width:66px;height:42px;border-radius:11px;background:#fff;border:1px solid rgba(89,126,171,.12);display:grid;place-items:center;padding:5px 7px;box-shadow:0 9px 20px -16px rgba(12,49,94,.30);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.route-alt-logos span:hover{transform:translateY(-3px);box-shadow:0 15px 24px -17px rgba(12,49,94,.34)}
.route-alt-logos img{max-width:100%;max-height:30px;object-fit:contain;border-radius:5px}
.route-track-core{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#4c89c7;font-size:.74rem;font-weight:800;white-space:nowrap}
.route-track-core i{width:1px;flex:1;min-height:22px;background:linear-gradient(180deg,transparent,rgba(61,147,255,.42),transparent);position:relative;overflow:hidden}
.route-track-core i:after{content:"";position:absolute;left:-1px;top:-10px;width:3px;height:12px;border-radius:999px;background:#61d8ff;box-shadow:0 0 9px rgba(61,216,255,.6);animation:routeTrackFlow 2s linear infinite}
.route-track-core i:last-child:after{animation-delay:1s}
@keyframes routeTrackFlow{from{transform:translateY(-6px)}to{transform:translateY(40px)}}
@media (max-width:1120px){.route-step{min-width:116px}.route-node{width:120px;height:88px}.route-arrow{width:48px;flex-basis:48px}.route-logo-track{grid-template-columns:1fr;gap:12px}.route-track-core{display:none}}
@media (max-width:768px){.current-route-visual{padding:25px 18px 22px;border-radius:24px}.current-route-head p{font-size:.94rem}.route-main{flex-direction:column;align-items:center;gap:9px}.route-step{min-width:unset;gap:7px}.route-step small{max-width:none}.route-node{width:min(270px,84%);height:86px}.route-arrow{width:20px;height:32px;flex-basis:32px;margin-top:0}.route-arrow:before{right:50%;left:auto;top:0;bottom:0;width:2px;height:auto;transform:translateX(50%);background:linear-gradient(rgba(61,147,255,.22),rgba(61,147,255,.86))}.route-arrow:after{left:50%;top:auto;bottom:0;transform:translateX(-50%) rotate(-45deg);animation:routeArrowPulseY 1.4s ease-in-out infinite}.route-growth-copy{margin-top:14px}.route-logo-group{padding:12px 10px}.route-alt-logos span{width:64px;height:40px}}
@media (max-width:520px){.route-alt-logos{gap:7px}.route-alt-logos span{width:60px;height:38px;padding:4px 6px}.route-logo-group-title{font-size:.82rem}.route-growth-copy b,.route-growth-copy span{width:100%}}
@media (prefers-reduced-motion:reduce){.route-track-core i:after,.route-arrow:after{animation:none!important}}
/* polish: keep merchants on the left and landtechs on the right; fit logo rows in one line */
.route-logo-track{direction:ltr}
.route-logo-group{direction:rtl}
.route-alt-logos span{width:62px}
@media (max-width:1120px){.route-logo-track{direction:rtl}.route-alt-logos span{width:66px}}
.route-alt-logos span{flex:0 0 58px;width:58px;height:40px;box-sizing:border-box;padding:4px 6px}
@media (max-width:1120px){.route-alt-logos span{flex-basis:66px;width:66px}}


/* ================= SABAPAY COMMUNITY / V9 ================= */
.sabapay-community{
  position:relative;
  margin-top:42px;
  padding:34px 30px 30px;
  border:1px solid rgba(79,135,194,.14);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 0%,rgba(85,174,243,.12),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,252,255,.96));
  box-shadow:0 24px 60px -44px rgba(17,64,112,.42);
  overflow:hidden;
}
.sabapay-community:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.72) 50%,transparent 58%);
  transform:translateX(-120%);
  animation:communitySheen 8s ease-in-out infinite;
}
@keyframes communitySheen{
  0%,70%,100%{transform:translateX(-120%)}
  82%{transform:translateX(120%)}
}
.sabapay-community-head{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:780px;
  margin:0 auto 24px;
}
.sabapay-community-head h2{
  margin:8px 0 10px;
}
.sabapay-community-head p{
  margin:0 auto;
  max-width:720px;
  color:var(--muted,#617287);
  line-height:2;
}
.community-stats{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:0 0 26px;
}
.community-stat{
  min-height:126px;
  padding:20px 14px 17px;
  border-radius:20px;
  border:1px solid rgba(71,129,190,.13);
  background:rgba(255,255,255,.88);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 16px 34px -28px rgba(25,70,120,.45);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.community-stat:hover{
  transform:translateY(-4px);
  border-color:rgba(61,147,255,.24);
  box-shadow:0 22px 40px -28px rgba(25,70,120,.5);
}
.community-counter{
  direction:ltr;
  display:block;
  min-height:46px;
  font-size:2rem;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.02em;
  color:#1f65ad;
  font-variant-numeric:tabular-nums;
}
.community-stat span{
  margin-top:8px;
  color:#50667d;
  font-size:.91rem;
  font-weight:700;
}
.community-merchants{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:10px;
}
.community-merchant{
  min-width:0;
  min-height:116px;
  padding:10px 7px 9px;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(75,128,184,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  box-shadow:0 10px 24px -22px rgba(12,49,94,.42);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.community-merchant:hover{
  transform:translateY(-3px);
  border-color:rgba(61,147,255,.22);
  box-shadow:0 16px 28px -22px rgba(12,49,94,.48);
}
.merchant-logo-wrap{
  width:100%;
  height:50px;
  display:grid;
  place-items:center;
}
.merchant-logo-wrap img{
  display:block;
  max-width:100%;
  max-height:44px;
  object-fit:contain;
}
.merchant-name{
  display:block;
  width:100%;
  margin-top:5px;
  color:#244665;
  font-size:.77rem;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.merchant-site{
  direction:ltr;
  display:block;
  width:100%;
  margin-top:3px;
  color:#7890a6;
  font-size:.62rem;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.merchant-site:hover{color:#2474c2;text-decoration:underline}
@media (max-width:1120px){
  .community-merchants{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:860px){
  .sabapay-community{padding:28px 18px 22px;border-radius:24px}
  .community-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .community-merchants{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:520px){
  .community-stats{gap:9px}
  .community-stat{min-height:108px;padding:16px 9px}
  .community-counter{font-size:1.65rem}
  .community-stat span{font-size:.8rem}
  .community-merchants{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .sabapay-community:before{animation:none}
}

/* V9 correction: keep community heading centered regardless of inherited section rules */
.sabapay-community .sabapay-community-head{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.sabapay-community .sabapay-community-head .eyebrow-lt{
  display:inline-flex;
  margin-left:auto;
  margin-right:auto;
}
.sabapay-community .sabapay-community-head h2,
.sabapay-community .sabapay-community-head p{
  width:100%;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.community-merchant .merchant-logo-wrap img{
  max-width:88px;
  max-height:48px;
  width:auto;
  height:auto;
}


/* ================= FOOTER ACCESS LINKS / V9 FINAL ================= */
.footer-access ul{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-access-item{
  margin:0 !important;
}
.footer-access-link{
  display:flex !important;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 10px;
  border-radius:12px;
  text-decoration:none !important;
  transition:background-color .2s ease, transform .2s ease;
}
.footer-access-link:hover{
  background:rgba(255,255,255,.055);
  transform:translateX(-2px);
}
.footer-access-icon{
  flex:0 0 26px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.footer-access-icon img{
  width:20px;
  height:20px;
  object-fit:contain;
  display:block;
}
.footer-access-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  text-align:right;
}
.footer-access-copy strong{
  color:inherit;
  font-size:.86rem;
  font-weight:700;
  line-height:1.45;
}
.footer-access-copy small{
  direction:ltr;
  color:rgba(255,255,255,.48);
  font-size:.67rem;
  line-height:1.2;
  font-family:Arial,sans-serif;
}


/* ================= ALIGNMENT CONSISTENCY / V9 ================= */
/* Main content sections: heading, eyebrow and supporting copy follow one RTL alignment. */
.section-head{
  text-align:right;
  margin-left:auto;
  margin-right:0;
}
.section-head .eyebrow-lt,
.section-head h2,
.section-head p{
  text-align:right;
}
.section-head h2,
.section-head p{
  margin-left:0;
  margin-right:0;
}

/* Keep the community section intentionally centered — all of its text follows the same alignment. */
.sabapay-community .sabapay-community-head{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.sabapay-community .sabapay-community-head .eyebrow-lt{
  display:inline-flex;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
.sabapay-community .sabapay-community-head h2,
.sabapay-community .sabapay-community-head p{
  width:100%;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* CTA copy remains consistently right-aligned. */
.cta-inner > div:first-child,
.cta-inner > div:first-child h2,
.cta-inner > div:first-child p{
  text-align:right;
}

/* Footer column headings and their content use the same RTL alignment. */
.footer-col,
.footer-col h4,
.footer-col ul,
.footer-col li{
  text-align:right;
}