/* 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:72px 0 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:48px 0 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:38px 0 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}