/* buildcontrol — Page-specific styles. */
.dashshow{background:var(--screen-bg,#EEF1F7);padding:72px 0}
.dashshow .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.ds-head{text-align:center;max-width:640px;margin:0 auto 40px}
.ds-eyebrow{display:inline-block;font-family:var(--f-header);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600,#2D6BC8);margin-bottom:12px}
.ds-head h2{font-family:var(--f-header);font-weight:700;font-size:32px;letter-spacing:-.02em;color:var(--navy-900,#113967);margin:0 0 12px;line-height:1.15}
.ds-head p{font-size:16px;color:var(--n-600,#5A6068);line-height:1.6;margin:0}

.ds-frame{background:#fff;border-radius:16px;box-shadow:0 30px 70px rgba(17,57,103,.16);overflow:hidden;border:1px solid var(--n-150,#E8EBEF)}
.ds-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#F6F8FB;border-bottom:1px solid var(--n-150,#E8EBEF)}
.ds-dot{width:11px;height:11px;border-radius:50%;background:#D3D8E0}
.ds-dot:nth-child(1){background:#F0997B}.ds-dot:nth-child(2){background:#F5C98A}.ds-dot:nth-child(3){background:#9FD4A5}
.ds-url{margin-left:14px;font-size:12.5px;color:var(--n-500,#777C84);font-family:var(--f-body)}
.ds-body{padding:22px;background:var(--screen-bg,#EEF1F7)}

.ds-filter{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:12px;padding:16px 20px;box-shadow:var(--shadow-2,1px 3px 15px rgba(0,0,0,.1));margin-bottom:16px}
.ds-fl{display:flex;align-items:center;gap:14px}
.ds-fic{width:40px;height:40px;border-radius:10px;background:var(--info-bg,#E4EEFB);display:grid;place-items:center;flex:none}
.ds-fic svg{width:20px;height:20px;fill:none;stroke:var(--brand-600,#2D6BC8);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ds-flab{font-size:12.5px;color:var(--n-500,#777C84);margin-bottom:2px}
.ds-fval{font-family:var(--f-header);font-weight:700;font-size:17px;color:var(--navy-900,#113967)}
.ds-fadj{width:38px;height:38px;display:grid;place-items:center}
.ds-fadj svg{width:20px;height:20px;fill:none;stroke:var(--brand-600,#2D6BC8);stroke-width:2;stroke-linecap:round}

.ds-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.ds-kpi{background:#fff;border-radius:12px;padding:18px;box-shadow:var(--shadow-2,1px 3px 15px rgba(0,0,0,.1))}
.ds-kic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;margin-bottom:10px}
.ds-kic svg{width:21px;height:21px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-green{background:var(--success-bg,#E8F5E8)}.sc-green svg{stroke:var(--success,#399C36)}
.sc-red{background:var(--danger-bg,#FBE7E7)}.sc-red svg{stroke:var(--danger,#D83939)}
.sc-amber{background:var(--warning-bg,#FDF0DF)}.sc-amber svg{stroke:var(--warning,#ED932B)}
.sc-blue{background:var(--info-bg,#E4EEFB)}.sc-blue svg{stroke:var(--brand-600,#2D6BC8)}
.ds-klab{font-size:13px;color:var(--n-600,#5A6068);line-height:1.35;margin-bottom:6px;min-height:34px}
.ds-knum{font-family:var(--f-header);font-weight:700;font-size:26px;color:var(--navy-900,#113967)}

.ds-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ds-panel{background:#fff;border-radius:12px;padding:20px;box-shadow:var(--shadow-2,1px 3px 15px rgba(0,0,0,.1))}
.ds-ptitle{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ds-pic{width:38px;height:38px;border-radius:10px;background:var(--info-bg,#E4EEFB);display:grid;place-items:center;flex:none}
.ds-pic svg{width:20px;height:20px;fill:none;stroke:var(--brand-600,#2D6BC8);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ds-ptitle b{display:block;font-family:var(--f-header);font-weight:700;font-size:16px;color:var(--navy-900,#113967);line-height:1.2}
.ds-ptitle span{font-size:12.5px;color:var(--n-500,#777C84)}

.ds-gauge{position:relative;width:200px;margin:6px auto 0}
.ds-gauge svg{width:100%;display:block}
.ds-gnum{position:absolute;bottom:0;left:0;right:0;text-align:center;font-family:var(--f-header);font-weight:700;font-size:30px;color:var(--navy-900,#113967)}
.ds-gcap{text-align:center;font-size:12.5px;color:var(--n-500,#777C84);margin:10px 0 16px}
.ds-gdates{display:flex;gap:12px;border-top:1px solid var(--n-100,#EEF0F3);padding-top:14px}
.ds-gdates div{flex:1}.ds-gdates span{display:block;font-size:12px;color:var(--n-500,#777C84);margin-bottom:3px}
.ds-gdates b{font-family:var(--f-header);font-weight:700;font-size:14px;color:var(--navy-900,#113967)}

.ds-donut{position:relative;width:150px;margin:0 auto 16px}
.ds-donut svg{width:100%;transform:rotate(-90deg)}
.ds-dctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ds-dctr b{font-family:var(--f-header);font-weight:700;font-size:22px;color:var(--navy-900,#113967);line-height:1}
.ds-dctr span{font-size:12px;color:var(--n-500,#777C84)}
.ds-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.ds-legend span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--n-600,#5A6068)}
.ds-legend b{margin-left:auto;font-family:var(--f-header);font-weight:700;color:var(--navy-900,#113967)}
.ds-legend i,.ds-blegend i{width:9px;height:9px;border-radius:3px;flex:none}
.lg-blue{background:var(--brand-600,#2D6BC8)}.lg-amber{background:var(--warning,#ED932B)}.lg-red{background:var(--danger,#D83939)}.lg-green{background:var(--success,#399C36)}

.ds-wide{grid-column:span 1}
.ds-paytiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.ds-pt{border-radius:10px;padding:12px;color:#fff;text-align:center}
.ds-pt span{display:block;font-size:12px;opacity:.9;margin-bottom:3px}
.ds-pt b{font-family:var(--f-header);font-weight:700;font-size:15px}
.sc-in{background:var(--success,#399C36)}.sc-out{background:#E8836B}.sc-bal{background:var(--cyan-300,#0CC8E5)}
.ds-bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding:0 4px;border-bottom:1px solid var(--n-150,#E8EBEF)}
.ds-bg{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%}
.ds-bg span{width:8px;border-radius:3px 3px 0 0}
.ds-bg .in{background:var(--success,#399C36)}.ds-bg .out{background:#E8836B}
.ds-blegend{display:flex;gap:18px;margin-top:12px}
.ds-blegend span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--n-600,#5A6068)}

.ds-line{height:120px;margin-bottom:14px}
.ds-line svg{width:100%;height:100%}
.ds-lstats{display:flex;gap:12px;border-top:1px solid var(--n-100,#EEF0F3);padding-top:14px}
.ds-lstats div{flex:1}.ds-lstats span{display:block;font-size:12px;color:var(--n-500,#777C84);margin-bottom:3px}
.ds-lstats b{font-family:var(--f-header);font-weight:700;font-size:14px;color:var(--navy-900,#113967)}

.ds-note{text-align:center;font-size:12.5px;color:var(--n-500,#777C84);margin:18px 0 0}

@media(max-width:820px){.ds-kpis{grid-template-columns:1fr 1fr}.ds-grid{grid-template-columns:1fr}.ds-head h2{font-size:26px}}
@media(max-width:520px){.ds-paytiles{grid-template-columns:1fr}.ds-legend{grid-template-columns:1fr}}

/* ===== HOMEPAGE SECTIONS ===== */

/* hero */
.hhero{position:relative;overflow:hidden;background:var(--screen-bg-alt)}
.hhero::after{content:"";position:absolute;top:-160px;right:-160px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(45,107,200,.10),transparent 68%);pointer-events:none}
.hhero-in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:80px}
.hhero h1{font-family:var(--f-header);font-weight:700;font-size:48px;line-height:1.08;letter-spacing:-.015em;color:var(--navy-900);margin-bottom:20px}
.hhero h1 .hl{color:var(--brand-700)}
.hhero p.lead{font-size:17px;color:var(--n-600);max-width:520px;margin-bottom:16px}
.hhero .trust-line{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--n-600);margin-bottom:28px}
.hhero .trust-line b{font-family:var(--f-header);font-weight:700;color:var(--navy-900)}
.hhero .stars{display:inline-flex;gap:2px}
.hhero .stars svg{width:16px;height:16px;fill:var(--warning)}
.hcta-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:32px}
.hcta-row .btn{height:52px}
.hcta-text{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-header);font-weight:600;font-size:15px;color:var(--brand-700)}
.hcta-text svg{width:16px;height:16px;stroke:var(--brand-700);fill:none;stroke-width:2.2;transition:transform .18s ease}
.hcta-text:hover svg{transform:translateX(3px)}
.hstore-wrap{position:relative;padding-top:22px;border-top:1px solid var(--n-150);max-width:420px}
.hstore-lab{display:block;font-family:var(--f-header);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--n-500);margin-bottom:12px}
.hstore-row{display:flex;gap:12px;flex-wrap:wrap}
.hstore{display:inline-flex;align-items:center;gap:11px;height:56px;padding:0 20px;border-radius:14px;background:#121826;color:#fff;transition:filter .15s ease,transform .08s ease}
.hstore:hover{filter:brightness(1.25)}
.hstore:active{transform:translateY(1px)}
.hstore svg{width:26px;height:26px;flex:none;fill:#fff}
.hstore .st{display:flex;flex-direction:column;line-height:1.15}
.hstore .st small{font-size:10.5px;color:#C3C9D4;letter-spacing:.01em}
.hstore .st span{font-family:var(--f-header);font-weight:700;font-size:16px;letter-spacing:-.01em}



/* logo strip - sliding marquee */
.lstrip{padding:40px 0;background:#fff;border-bottom:1px solid var(--n-150);overflow:hidden}
.lstrip .lab{text-align:center;font-family:var(--f-header);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--n-500);margin-bottom:28px}
.marquee{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:scroll-left 100s linear infinite}
.lstrip:hover .marquee-track{animation-play-state:paused}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.client-slot{flex:none;width:210px;height:88px;margin:0 10px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-2);display:flex;align-items:center;justify-content:center;padding:16px}
.client-slot img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .2s ease,opacity .2s ease}
.client-slot:hover img{filter:grayscale(0);opacity:1}
.client-slot .demo{display:flex;align-items:center;gap:9px;filter:grayscale(1);opacity:.72;transition:filter .2s ease,opacity .2s ease}
.client-slot:hover .demo{filter:grayscale(0);opacity:1}
.client-slot .demo .dm-ic{width:30px;height:30px;border-radius:7px;display:grid;place-items:center}
.client-slot .demo .dm-ic svg{width:17px;height:17px;fill:#fff}
.client-slot .demo .dm-tx{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.client-slot .demo .dm-tx b{font-family:var(--f-header);font-weight:700;font-size:15px;color:var(--navy-900)}
.client-slot .demo .dm-tx small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--n-500)}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* modules: explore all */
.mods-more{display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:36px}
.mods-more-note{font-size:13px;color:var(--n-500)}

.appband 
/* case studies */
.cases{background:#fff}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cs-card{display:flex;flex-direction:column}
.cs-tag{display:inline-block;align-self:flex-start;font-family:var(--f-header);font-weight:600;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand-700);background:var(--info-bg);
  border-radius:100px;padding:6px 12px;margin-bottom:14px}
.cs-card h3{font-family:var(--f-header);font-weight:700;font-size:19px;line-height:1.3;color:var(--navy-900);margin:0 0 8px}
.cs-card p{flex:1}
.cs-more{text-align:center;margin-top:30px}
.cs-more a{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-header);font-weight:600;
  font-size:15px;color:var(--brand-700)}
.cs-more a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cs-more a:hover{color:var(--navy-900)}
@media(max-width:820px){.cs-grid{grid-template-columns:1fr}}

/* modules grid */
.mods{background:var(--screen-bg-alt)}
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mod-card{background:#fff;border:1px solid var(--n-150);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-2);transition:transform .15s ease,box-shadow .15s ease;display:block}
.mod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.mod-ic{width:50px;height:50px;border-radius:12px;background:var(--info-bg);display:grid;place-items:center;margin-bottom:16px}
.mod-ic svg{width:26px;height:26px;fill:var(--brand-600)}
.mod-ic.g{background:var(--success-bg)}.mod-ic.g svg{fill:var(--success)}
.mod-ic.w{background:var(--warning-bg)}.mod-ic.w svg{fill:var(--warning)}
.mod-ic.p{background:var(--purple-bg)}.mod-ic.p svg{fill:var(--purple)}
.mod-card h3{font-family:var(--f-header);font-weight:600;font-size:18px;color:var(--navy-900);margin-bottom:8px}
.mod-card p{font-size:14px;color:var(--n-600);margin-bottom:14px}
.mod-link{font-family:var(--f-header);font-weight:600;font-size:13.5px;color:var(--brand-700);display:inline-flex;align-items:center;gap:6px}
.mod-link svg{width:14px;height:14px;stroke:var(--brand-700);fill:none;stroke-width:2.2;transition:transform .18s ease}
.mod-card:hover .mod-link svg{transform:translateX(3px)}

/* how it works */
.how{background:var(--screen-bg)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.how-step{background:#fff;border-radius:var(--r-lg);padding:30px 26px 28px;box-shadow:var(--shadow-2);position:relative}
.how-num{width:44px;height:44px;border-radius:50%;background:var(--brand-grad);color:#fff;font-family:var(--f-header);font-weight:700;font-size:19px;display:grid;place-items:center;margin-bottom:18px;box-shadow:0 4px 12px rgba(31,88,174,.28)}
.how-step h3{font-family:var(--f-header);font-weight:600;font-size:18px;color:var(--navy-900);margin-bottom:9px}
.how-step p{font-size:14px;color:var(--n-600)}

/* app download band */
.appband{background:var(--screen-bg-alt)}
.appband-in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:var(--navy-900);border-radius:22px;overflow:hidden;padding:52px 56px;position:relative}
.appband-in::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 70% 90% at 90% 50%,#000 20%,transparent 72%);pointer-events:none}
.appband-tx{position:relative}
.appband-tx h2{font-family:var(--f-header);font-weight:700;font-size:32px;color:#fff;line-height:1.15;margin-bottom:14px}
.appband-tx p{font-size:15px;color:#C4D3E6;max-width:440px;margin-bottom:26px}
.appband .hstore{background:#121826;color:#fff;border:1px solid rgba(255,255,255,.10)}
.appband .hstore .st small{color:#B8B8B8}
.appband .hstore svg{fill:#fff}
.appband-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:230px}
.appband-phone{width:190px;height:300px;background:linear-gradient(160deg,#fff,#EDF2FA);border-radius:26px;box-shadow:var(--shadow-3);border:6px solid #0A1B30;position:relative;overflow:hidden}
.appband-phone .ph-top{height:64px;background:var(--header-grad)}
.appband-phone .ph-line{height:9px;border-radius:5px;background:var(--n-150);margin:14px 16px}
.appband-phone .ph-line.s{width:56%}
.appband-phone .ph-card{margin:14px 16px;height:52px;border-radius:10px;background:#fff;box-shadow:var(--shadow-1);border:1px solid var(--n-100)}

/* final cta (reuse pcta style but named) */
.fcta{background:var(--screen-bg-alt)}
.fcta-in{position:relative;background:var(--navy-900);border-radius:24px;overflow:hidden;text-align:center;max-width:900px;margin:0 auto;padding:60px 40px;color:var(--text-on-dark)}
.fcta-in::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000 30%,transparent 75%);pointer-events:none}
.fcta-in>*{position:relative}
.fcta h2{font-family:var(--f-header);font-weight:700;font-size:34px;margin-bottom:14px;line-height:1.15;color:#fff}
.fcta p{color:#C4D3E6;font-size:16px;margin-bottom:28px;max-width:560px;margin-left:auto;margin-right:auto}
.fcta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.fcta .btn-light{background:#fff;color:var(--brand-700);box-shadow:none}
.fcta .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.fcta .btn-ghost:hover{background:rgba(255,255,255,.08)}

@media(max-width:900px){
  
        .mod-grid,.how-grid{grid-template-columns:1fr}
  .appband-in{grid-template-columns:1fr;padding:40px 30px;gap:32px}
  .appband-art{display:none}
  .hhero h1{font-size:34px}
}

/* hero: proof panel replaces the dashboard mock */
.hproof{display:flex;flex-direction:column;gap:12px;max-width:452px;margin-left:auto}
.hp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp-card,.hp-wide{background:#fff;border:1px solid var(--n-150);border-radius:14px;
  box-shadow:0 10px 34px rgba(17,57,103,.10);padding:20px 20px 18px}
.hp-v{font-family:var(--f-header);font-weight:700;font-size:38px;line-height:1;
  letter-spacing:-.025em;color:var(--navy-900)}
.hp-v em{font-style:normal;font-size:23px;color:var(--brand-600);margin-left:1px}
.hp-n{font-family:var(--f-header);font-weight:600;font-size:14.5px;
  color:var(--navy-900);margin-top:9px;line-height:1.35}
.hp-s{font-size:12.8px;color:var(--n-500);margin-top:4px;line-height:1.55}
.hp-wide{display:flex;align-items:flex-start;gap:14px;padding:18px 20px}
.hp-ic{width:38px;height:38px;border-radius:11px;flex:none;background:var(--success-bg);
  display:grid;place-items:center}
.hp-ic svg{width:19px;height:19px;fill:var(--success)}
.hp-wide .hp-n{margin-top:0}
.hp-strip{display:flex;gap:8px;flex-wrap:wrap}
.hp-strip span{display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--n-150);border-radius:var(--r-full);padding:7px 14px;
  font-family:var(--f-header);font-weight:600;font-size:12.5px;color:var(--n-600)}
.hp-strip span::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--success);flex:none}
/* hero visual - real product screenshots */
.hshot{position:relative;width:100%;max-width:548px;margin-left:auto;padding:20px 18px 74px 24px}
.hshot .hs-shell{position:absolute;left:0;top:0;width:72%;height:58%;border-radius:24px;
  background:linear-gradient(140deg,var(--brand-600),var(--brand-700) 55%,#153F7A);
  box-shadow:0 24px 60px rgba(11,40,80,.24)}
.hshot .hs-dots{position:absolute;right:0;top:132px;width:70px;height:70px;
  background-image:radial-gradient(#2D6BC8 2.1px,transparent 2.2px);background-size:15px 15px;opacity:.7}
.hshot .hs-win{position:relative;margin:26px 0 0;background:#fff;border:1px solid var(--n-150);
  border-radius:16px;overflow:hidden;box-shadow:0 28px 68px rgba(11,40,80,.22)}
.hshot .hs-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#F4F7FC;
  border-bottom:1px solid var(--n-150)}
.hshot .hs-bar .d{width:9px;height:9px;border-radius:50%;background:#D6DEEA;flex:none}
.hshot .hs-bar .d:first-child{background:#F0A0A0}
.hshot .hs-bar .d:nth-child(2){background:#F3D08A}
.hshot .hs-bar .d:nth-child(3){background:#A5D9AE}
.hshot .hs-url{margin-left:10px;flex:1;background:#fff;border:1px solid var(--n-150);border-radius:100px;
  padding:3px 12px;font-size:10.5px;color:var(--n-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hshot .hs-win img{display:block;width:100%;height:auto}
.hshot .hs-card{position:absolute;left:-16px;bottom:52px;width:206px;margin:0;background:#fff;
  border:1px solid var(--n-150);border-radius:14px;overflow:hidden;box-shadow:0 18px 44px rgba(11,40,80,.22)}
.hshot .hs-card img{display:block;width:100%;height:auto}
.hshot .hs-chip{position:absolute;right:-8px;top:-6px;background:linear-gradient(135deg,var(--brand-600),var(--brand-700));
  color:#fff;font-family:var(--f-header);font-weight:700;font-size:12.5px;border-radius:13px;
  padding:9px 15px;box-shadow:0 14px 34px rgba(11,40,80,.20);white-space:nowrap}
@keyframes hsPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes hsFl{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:no-preference){
  .hshot .hs-win{animation:hsPop .7s .05s both}
  .hshot .hs-card{animation:hsPop .6s .4s both, hsFl 6.4s 1.1s ease-in-out infinite}
  .hshot .hs-chip{animation:hsPop .6s .55s both, hsFl 7.2s 1.3s ease-in-out infinite reverse}
}
@media(max-width:980px){.hshot{margin:0 auto;max-width:548px}}
@media(max-width:560px){
  .hshot{padding:16px 10px 64px 12px}
  .hshot .hs-card{width:158px;left:-6px;bottom:46px}
  .hshot .hs-chip{right:-2px;top:-4px;font-size:11.5px;padding:7px 12px}
}
@media(max-width:980px){.hproof{margin:0 auto;max-width:520px}}
@media(max-width:520px){
  .hp-row{grid-template-columns:1fr}
  .hp-v{font-size:32px}
}

/* app band: the phone was an empty outline, give it real content */
.appband-ph .apb-fill{position:absolute;inset:12px 10px 10px;display:flex;
  flex-direction:column;gap:6px;text-align:left}
.apb-h{font-family:var(--f-header);font-weight:700;font-size:9.5px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.apb-h small{font-weight:400;font-size:7.5px;color:#B7C8DE}
.apb-r{background:#fff;border-radius:7px;padding:7px 8px;display:flex;
  align-items:center;gap:7px;box-shadow:0 2px 8px rgba(11,44,82,.10)}
.apb-r i{width:16px;height:16px;border-radius:5px;flex:none}
.apb-r .t{font-family:var(--f-header);font-weight:600;font-size:8.4px;color:#113967;line-height:1.2}
.apb-r .s{font-size:7px;color:#777C84;margin-top:1px}
.apb-r b{margin-left:auto;font-family:var(--f-header);font-weight:700;font-size:7.4px;
  border-radius:20px;padding:2px 7px;white-space:nowrap}
.apb-btn{margin-top:auto;height:24px;border-radius:7px;
  background:linear-gradient(180deg,#2D6BC8,#1F58AE);color:#fff;
  font-family:var(--f-header);font-weight:700;font-size:8.6px;
  display:flex;align-items:center;justify-content:center}

/* the app band phone was an empty outline set to display:none. Give it real
   content and show it, so the homepage has at least one true product screen. */
.appband-art{display:flex!important}
.appband-phone{width:214px;height:auto;min-height:300px}
.appband-phone .ph-top{height:auto;padding:13px 12px 11px}
.apb-h{display:block;font-family:var(--f-header);font-weight:700;font-size:11.5px;color:#fff;line-height:1.25;white-space:nowrap}
.apb-h small{display:block;font-weight:400;font-size:9px;color:#B7C8DE;margin-top:3px;white-space:nowrap}
.apb-body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px}
.apb-r{background:#fff;border:1px solid var(--n-100);border-radius:9px;
  padding:8px 8px;display:flex;align-items:center;gap:7px;box-shadow:var(--shadow-1)}
.apb-r i{width:16px;height:16px;border-radius:5px;flex:none}
.apb-r>div{min-width:0;flex:1}
.apb-r .t{font-family:var(--f-header);font-weight:600;font-size:9px;
  color:var(--navy-900);line-height:1.25;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.apb-r .s{font-size:7.6px;color:var(--n-500);margin-top:1px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.apb-r b{margin-left:auto;flex:none;font-family:var(--f-header);font-weight:700;
  font-size:7.6px;border-radius:20px;padding:3px 6px;white-space:nowrap}
.apb-btn{margin-top:3px;height:26px;border-radius:7px;
  background:var(--brand-grad);color:#fff;font-family:var(--f-header);
  font-weight:700;font-size:9.4px;display:flex;align-items:center;justify-content:center}
@media(max-width:900px){.appband-art{display:none!important}}

/* .hhero-in has always been a fixed 2-column grid with no breakpoint, so on a
   phone the headline column was squeezed to 247px and the right column
   overflowed the viewport. Collapse it to one column on small screens. */
@media(max-width:900px){
  .hhero-in{grid-template-columns:1fr;gap:34px;padding-top:48px;padding-bottom:54px;text-align:left}
  .hhero h1{font-size:34px}
  .hhero p.lead{max-width:none}
  .hproof{margin:0;max-width:none}
}
@media(max-width:560px){
  .hhero h1{font-size:29px}
  .hhero-in{padding-top:38px;padding-bottom:44px}
}

/* ---------- hero chips: staggered entrance, then a rolling highlight ---------- */
.hp-strip span::before{display:none}          /* replaced by a real .hp-dot element */
/* visible by default so a JS failure can never hide them. The hidden start is
   opted into by .chips-ready, which only the script adds. */
.hp-chip{position:relative;overflow:hidden;
  transition:opacity .5s ease,transform .5s ease,
             border-color .45s ease,color .45s ease,box-shadow .45s ease}
.hproof.chips-ready .hp-chip{opacity:0;transform:translateY(10px)}
.hproof.chips-in .hp-chip{opacity:1;transform:translateY(0)}
.hproof.chips-in .hp-chip:nth-child(1){transition-delay:.05s}
.hproof.chips-in .hp-chip:nth-child(2){transition-delay:.18s}
.hproof.chips-in .hp-chip:nth-child(3){transition-delay:.31s}

.hp-dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex:none;
  transition:transform .45s ease,background .45s ease,box-shadow .45s ease}

/* the highlight moves along the row once the entrance has finished */
.hproof.chips-in .hp-chip{animation:hp-cycle 6s ease-in-out infinite}
.hproof.chips-in .hp-chip:nth-child(1){animation-delay:1.0s}
.hproof.chips-in .hp-chip:nth-child(2){animation-delay:3.0s}
.hproof.chips-in .hp-chip:nth-child(3){animation-delay:5.0s}
.hproof.chips-in .hp-chip .hp-dot{animation:hp-dot 6s ease-in-out infinite}
.hproof.chips-in .hp-chip:nth-child(1) .hp-dot{animation-delay:1.0s}
.hproof.chips-in .hp-chip:nth-child(2) .hp-dot{animation-delay:3.0s}
.hproof.chips-in .hp-chip:nth-child(3) .hp-dot{animation-delay:5.0s}

@keyframes hp-cycle{
  0%,88%,100%{border-color:var(--n-150);color:var(--n-600);
    box-shadow:none;transform:translateY(0)}
  8%,26%{border-color:var(--brand-600);color:var(--navy-900);
    box-shadow:0 5px 16px rgba(31,88,174,.16);transform:translateY(-3px)}
}
@keyframes hp-dot{
  0%,88%,100%{transform:scale(1);background:var(--success);box-shadow:none}
  8%,26%{transform:scale(1.5);background:var(--success);
    box-shadow:0 0 0 4px rgba(57,156,54,.18)}
}

/* a light sweep passes across the chip as it lights up */
.hp-chip::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(45,107,200,.10),transparent);
  transform:skewX(-18deg);pointer-events:none}
.hproof.chips-in .hp-chip::after{animation:hp-sweep 6s ease-in-out infinite}
.hproof.chips-in .hp-chip:nth-child(1)::after{animation-delay:1.0s}
.hproof.chips-in .hp-chip:nth-child(2)::after{animation-delay:3.0s}
.hproof.chips-in .hp-chip:nth-child(3)::after{animation-delay:5.0s}
@keyframes hp-sweep{0%,4%{left:-60%}22%{left:115%}22.01%,100%{left:-60%}}

@media(prefers-reduced-motion:reduce){
  .hp-chip{opacity:1!important;transform:none!important;animation:none!important}
  .hp-chip::after,.hp-dot{animation:none!important}
}

/* hero card: gentle float so it does not read as a flat screenshot */



@keyframes hm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes hm-pulse{0%,100%{box-shadow:0 0 0 0 rgba(45,107,200,.34)}50%{box-shadow:0 0 0 7px rgba(45,107,200,0)}}
@media(prefers-reduced-motion:reduce){
  .hmock-card,.hmock-float,}

/* ---------- hero: rotating module screens ---------- */

/* tab strip */
.hms-tab:nth-child(1),.hms-tab:nth-child(1) i{animation-delay:0s}
.hms-tab:nth-child(2),.hms-tab:nth-child(2) i{animation-delay:3.3s}
.hms-tab:nth-child(3),.hms-tab:nth-child(3) i{animation-delay:6.6s}
.hms-tab:nth-child(4),.hms-tab:nth-child(4) i{animation-delay:9.9s}

/* screen stack */
.hms-screen:nth-child(1){animation-delay:0s}
.hms-screen:nth-child(2){animation-delay:3.3s}
.hms-screen:nth-child(3){animation-delay:6.6s}
.hms-screen:nth-child(4){animation-delay:9.9s}

/* screen title */

/* mini stat strip (reuses kpi look) */

/* compact rows */
.hms-r:last-child{border-bottom:none}
.hms-av.n2{background:linear-gradient(180deg,#11396E,#0B488D)}
.hms-av.n3{background:linear-gradient(180deg,#1F58AE,#113967)}
.hms-ic.ok{background:#E8F5E8}.hms-ic.ok svg{fill:#399C36}
.hms-ic.wn{background:#FDF0DF}.hms-ic.wn svg{fill:#ED932B}
.hms-b.ok{background:#E8F5E8;color:#399C36}
.hms-b.wn{background:#FDF0DF;color:#ED932B}
.hms-b.in{background:#E4EEFB;color:#2D6BC8}

/* progress bar for dashboard screen */

@media(prefers-reduced-motion:reduce){
    .hms-screen:nth-child(1){opacity:1}
  .hms-tab,  .hms-tab:nth-child(1){color:#1F58AE;background:#E4EEFB}
  .hms-tab:nth-child(1) i{background:linear-gradient(90deg,#2D6BC8,#10C9D0)}
}

.autom{padding:74px 0;background:var(--screen-bg-alt,#FAFCFF)}
.autom .center-head{max-width:680px;margin:0 auto 42px;text-align:center}
.autom .sec-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-header);font-weight:600;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#1F58AE;margin-bottom:14px}
.autom h2{font-family:var(--f-header);font-weight:700;font-size:31px;line-height:1.18;letter-spacing:-.018em;color:#113967}
.autom .center-head p{font-size:16px;line-height:1.62;color:#5A6068;margin-top:12px}
.autom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:0 auto}
@media(max-width:900px){.autom-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.autom-grid{grid-template-columns:1fr}}
.autom-card{background:#fff;border:1px solid #E8EBEF;border-radius:12px;padding:24px 22px;
  box-shadow:0 3px 16px rgba(17,57,103,.05);transition:transform .2s ease,box-shadow .2s ease}
.autom-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(17,57,103,.1)}
.autom-ic{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#2D6BC8 0%,#1F58AE 100%);margin-bottom:14px}
.autom-ic svg{width:22px;height:22px;fill:#fff}
.autom-card h3{font-family:var(--f-header);font-weight:600;font-size:16.5px;color:#113967;margin-bottom:6px}
.autom-card p{font-size:14px;line-height:1.58;color:#5A6068}
.autom-note{max-width:640px;margin:34px auto 0;text-align:center;font-size:14px;line-height:1.6;color:#777C84}

/* ---------- phone: store buttons share the row instead of stacking ---------- */
/* .hstore-row is a wrap-flex line of two fixed-content pills. Once the hero got
   its side padding back there was no longer room for both at 390px, so they
   stacked at two different widths and read as a mistake. Give them an equal
   two-up grid and trim the pill so the pair fits down to 320px. */
@media(max-width:560px){
  .hstore-wrap{max-width:none}
  .hstore-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hstore{height:52px;padding:0 12px;gap:9px}
  .hstore svg{width:23px;height:23px}
  .hstore .st small{font-size:9px}
  .hstore .st span{font-size:14.5px}
}
@media(max-width:380px){
  .hstore{padding:0 9px;gap:7px}
  .hstore svg{width:21px;height:21px}
  .hstore .st small{font-size:8.4px}
  .hstore .st span{font-size:13px}
}

/* The same two-up row sits inside the app band, where the card's own padding
   leaves each pill narrower — the store labels wrapped onto two lines there.
   Keep the labels on one line and take the room back from the card padding. */
@media(max-width:560px){
  .hstore .st small,.hstore .st span{white-space:nowrap}
  .appband-in{padding:34px 20px}
  .appband .hstore{padding:0 10px;gap:7px}
  .appband .hstore svg{width:21px;height:21px}
  .appband .hstore .st small{font-size:8.4px}
  .appband .hstore .st span{font-size:13.5px}
}

/* Keep the demo button and the pricing link on one line on a 360px phone. */
@media(max-width:560px){
  .hcta-row{gap:14px;margin-bottom:28px}
  .hcta-row .btn{padding:0 22px}
}

/* ---------- trust band ---------- */
/* Sits between the client logos and the module grid: the logos say who uses
   it, this says how long it has run, how far it reaches and how much it
   covers. The counters reuse the script that drove the old stat cards, which
   keys off .stat-num[data-count]. */
.tband{background:linear-gradient(155deg,#0E2E56 0%,#113967 48%,#1F58AE 100%);
  color:#fff;padding:44px 0;position:relative;overflow:hidden}
.tband::before{content:"";position:absolute;top:-90px;right:-60px;width:300px;height:300px;
  border-radius:50%;background:radial-gradient(circle,rgba(63,208,216,.20),transparent 70%);
  pointer-events:none}
.tband-in{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:22px}

.tb{display:flex;flex-direction:column;gap:6px;padding-left:20px;
  border-left:2px solid rgba(255,255,255,.16)}
.tb:first-child{border-left:none;padding-left:0}

.tb-n{font-family:var(--f-header);font-weight:700;font-size:32px;line-height:1.05;
  letter-spacing:-.02em;color:#fff}
/* The counter script writes into .val; .suf holds the trailing + so the
   animation never overwrites it. */
.tb-n .suf{color:#7FE7A0}
.tb-l{font-size:13.5px;line-height:1.5;color:#B7C8DE}

@media(max-width:1080px){
  .tband-in{grid-template-columns:repeat(3,1fr);gap:26px 22px}
  .tb:nth-child(3n+1){border-left:none;padding-left:0}
  .tb-n{font-size:29px}
}
@media(max-width:760px){
  .tband-in{grid-template-columns:1fr 1fr;gap:22px 18px}
  .tb:nth-child(3n+1){border-left:2px solid rgba(255,255,255,.16);padding-left:20px}
  .tb:nth-child(2n+1){border-left:none;padding-left:0}
}
@media(max-width:560px){
  .tband{padding:32px 0}
  .tb-n{font-size:25px}
  .tb-l{font-size:12.5px}
}