.hero>svg{width:100%;max-width:340px;justify-self:center}
.demo-banner{margin:0}
.steps.six{grid-template-columns:1fr}
@media(min-width:620px){.steps.six{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.steps.six{grid-template-columns:repeat(3,1fr)}}
.mods{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.mods{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.mods{grid-template-columns:repeat(3,1fr)}}
.mod{background:var(--card);border:2px solid var(--ink);border-radius:22px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.mod b{font-family:'Space Grotesk','Cairo',sans-serif}
.mod span span,.mod>span{color:var(--mut);font-size:14.5px}

.win{background:var(--card);border:2px solid var(--ink);border-radius:26px;overflow:hidden}
.win-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);display:inline-block}
.win-title{font:700 14px 'Space Grotesk','Cairo',sans-serif;margin-inline-start:6px}
.demo-tag{display:inline-block;font:600 12px/1.3 'Space Grotesk','Cairo',sans-serif;border:1.5px dashed var(--ink);border-radius:999px;padding:3px 12px;background:#fff8;margin:0 0 10px}
.win-bar .demo-tag{margin:0 0 0 auto}
html[dir=rtl] .win-bar .demo-tag{margin:0 auto 0 0}
.tabs{display:flex;gap:8px;padding:12px 16px;overflow-x:auto;border-bottom:1px solid #0002}
.tab{flex:0 0 auto;min-height:40px;padding:0 18px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);font:600 14px 'Space Grotesk','Cairo',sans-serif;cursor:pointer}
.tab[aria-selected=true]{background:var(--ink);color:#fff}
.panel{padding:18px 16px 22px;min-height:340px}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-bottom:6px}
@media(min-width:760px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{border:2px solid var(--ink);border-radius:18px;padding:12px 14px;background:#fff9}
.kpi small{display:block;color:var(--mut);font-size:12.5px}
.kpi strong{display:block;font:600 22px/1.2 'Playfair Display','Cairo',serif;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi.pulse strong{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.08)}}
.blk{margin-top:16px}
.chart{width:100%;height:auto;display:block}
.chart .bar{fill:#fff;stroke:var(--ink);stroke-width:2.5;transition:fill .2s}
.chart .bar:hover,.chart .bar.on{fill:var(--amber)}
.chart text{font:600 11px 'Space Grotesk','Cairo',sans-serif;fill:var(--mut)}
.chart .val{fill:var(--ink)}
table.t{width:100%;border-collapse:collapse;font-size:14.5px}
.t th,.t td{padding:9px 8px;text-align:start;border-bottom:1px solid #0002;font-variant-numeric:tabular-nums}
.t th{font:600 12px 'Space Grotesk','Cairo',sans-serif;color:var(--mut)}
.t tr.flash td{animation:fl 0.9s}
@keyframes fl{0%{background:#FFB30055}100%{background:transparent}}
.tw{overflow-x:auto}
.mini{min-height:34px;padding:0 14px;border-radius:999px;border:2px solid var(--ink);background:transparent;font:600 12.5px 'Space Grotesk','Cairo',sans-serif;cursor:pointer;color:var(--ink);white-space:nowrap}
.mini:hover{background:var(--ink);color:#fff}
.mini:disabled{opacity:.4;pointer-events:none}
.chip{display:inline-block;border:1.5px solid var(--ink);border-radius:999px;padding:1px 10px;font-size:12px;font-family:'Space Grotesk','Cairo',sans-serif}
.chip.ok{background:var(--ink);color:#fff}
.chip.warn{border-style:dashed}
.note{color:var(--mut);font-size:13.5px;margin:10px 0 0}
.demo-foot{max-width:520px}
@media(prefers-reduced-motion:reduce){.kpi.pulse strong,.t tr.flash td{animation:none}}

/* MOJO System app shell (v2): same layout as the production system, demo data only */
.mod-ai{border-style:dashed;border-color:var(--orange)}
.mod-ai b{color:var(--orange)}
.win{--sy-bg:#f6f7fb;--sy-line:#e8eaf2;--sy-ind:#4f46e5;--sy-ind-l:#eef0ff;--sy-green:#16a34a;--sy-green-l:#ecfdf3;--sy-dark:#1b1f3b;--sy-txt:#1e2235;--sy-mut:#80869c}
.app{display:flex;background:var(--sy-bg);color:var(--sy-txt);min-height:560px}
html[lang=en] .app{font-family:'Inter','Cairo',sans-serif}
.app-side{flex:0 0 240px;background:#fff;border-inline-end:1px solid var(--sy-line);padding:14px 12px;display:flex;flex-direction:column;gap:6px}
.app-brand{display:flex;align-items:center;gap:10px;padding:2px 4px 12px}
.app-brand b{display:block;font-size:14px;line-height:1.2}
.app-brand small{display:block;color:var(--sy-mut);font-size:11.5px}
.app-logo{width:36px;height:36px;border-radius:10px;background:var(--sy-ind);color:#fff;display:grid;place-items:center;font:700 16px 'Space Grotesk',sans-serif;flex:0 0 auto}
.app-pos{background:var(--sy-green);color:#fff;border:0;border-radius:10px;min-height:42px;font:700 13.5px inherit;font-family:inherit;cursor:pointer;margin-bottom:8px}
.app-pos:hover{filter:brightness(1.07)}
.app-lbl{font-size:11.5px;color:var(--sy-mut);margin:4px 6px}
.app-nav{display:flex;flex-direction:column;gap:2px}
.nav-i{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:#3a3f55;font:500 14px inherit;font-family:inherit;cursor:pointer;text-align:start}
.nav-i:hover{background:var(--sy-bg)}
.nav-i[aria-selected=true]{background:var(--sy-ind);color:#fff;font-weight:600}
.ni-ic{width:16px;height:16px;border:2px solid currentColor;border-radius:5px;opacity:.75;flex:0 0 auto}
.nav-i.ai{color:#c2410c;border:1.5px dashed var(--orange);margin-top:6px}
.nav-i.ai[aria-selected=true]{background:var(--orange);color:#fff;border-style:solid}
.soon{margin-inline-start:auto;font:700 10.5px/1.6 'Space Grotesk','Cairo',sans-serif;background:var(--orange);color:#fff;border-radius:99px;padding:1px 9px;white-space:nowrap}
.nav-i.ai[aria-selected=true] .soon{background:#fff;color:var(--orange)}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.app-top{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 20px;background:#fff;border-bottom:1px solid var(--sy-line);flex-wrap:wrap}
.app-top b{font-size:16px}
.app-chip{font:600 11px 'Space Grotesk',sans-serif;letter-spacing:.06em;background:var(--sy-ind-l);color:var(--sy-ind);border-radius:99px;padding:3px 10px}
.app-user{margin-inline-start:auto;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.app-av{width:30px;height:30px;border-radius:50%;background:var(--sy-ind-l);color:var(--sy-ind);display:grid;place-items:center;font-weight:700}
.app .panel{padding:18px 20px 22px;min-height:0;flex:1}
.hero-card{background:linear-gradient(120deg,#1f2445,#121528);color:#fff;border-radius:18px;padding:22px 24px;display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.hero-card h3{font-family:inherit;font-size:24px;font-weight:700;margin:8px 0 6px;color:#fff}
.hero-card p{color:#b9bcd8;font-size:13.5px;max-width:480px;margin:0}
.hc-tag{display:inline-block;font-size:11.5px;color:#c9ccec;border:1px solid #3b4170;border-radius:99px;padding:3px 12px}
.hc-btns{display:flex;flex-direction:column;gap:10px}
.hc-go,.hc-ghost,.app-go{min-height:40px;padding:0 16px;border-radius:11px;font:700 13.5px inherit;font-family:inherit;cursor:pointer;border:0;white-space:nowrap}
.hc-go,.app-go{background:#22c55e;color:#0b2a17}
.hc-ghost{background:#252a4d;color:#fff;border:1px solid #4a5080}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sec-h h4{font-family:inherit;font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.sec-h small{color:var(--sy-mut);font-size:12px;width:100%}
.app .demo-tag{border-color:#9aa0b4;color:#5b6075;background:#fff}
.app .kpi{background:#fff;border:1px solid var(--sy-line);border-radius:14px;padding:12px 14px}
.app .kpi .kh{display:flex;justify-content:space-between;align-items:center;gap:6px}
.app .kpi small{color:#3a3f55;font-weight:600;font-size:12.5px}
.app .kpi em{font-style:normal;font-size:10.5px;font-weight:600;background:var(--sy-green-l);color:#15803d;border:1px solid #b7ebc8;border-radius:99px;padding:1px 8px;white-space:nowrap}
.app .kpi strong{font-family:inherit;font-weight:700;font-size:20px;margin-top:8px}
.app .chart .bar{fill:var(--sy-ind-l);stroke:var(--sy-ind);stroke-width:2}
.app .chart .bar:hover,.app .chart .bar.on{fill:var(--sy-ind)}
.app .chart text{font-family:inherit}
.app .tw{background:#fff;border:1px solid var(--sy-line);border-radius:14px;padding:4px 10px}
.app .t th{color:var(--sy-mut);font-family:inherit}
.app .t td.lnk{color:var(--sy-ind);font-weight:600}
.app .t tr:last-child td{border-bottom:0}
.app .chip{border-color:#b7ebc8;background:var(--sy-green-l);color:#15803d;font-family:inherit}
.app .chip.ok{background:var(--sy-green-l);color:#15803d;border-color:#b7ebc8}
.app .chip.okl{background:#fff;color:#15803d;border-color:#b7ebc8}
.app .chip.warn{background:#fff7e6;color:#b45309;border:1px dashed #f5b85a}
.app .mini{border:1.5px solid var(--sy-ind);color:var(--sy-ind);font-family:inherit}
.app .mini:hover{background:var(--sy-ind);color:#fff}
.app .note{color:var(--sy-mut)}
.mini-h{font-family:inherit;font-size:15px;font-weight:700;margin-bottom:8px}
.cols{display:grid;gap:14px}
@media(min-width:760px){.cols{grid-template-columns:1fr 1fr}}
.agents{display:grid;gap:12px;grid-template-columns:1fr;margin-top:6px}
@media(min-width:620px){.agents{grid-template-columns:repeat(2,1fr)}}
.agent{background:#fff8f4;border:1.5px dashed var(--orange);border-radius:14px;padding:14px 16px}
.ag-h{display:flex;align-items:center;gap:10px}
.ag-ic{width:30px;height:30px;border-radius:9px;background:var(--sy-dark);color:#fff;display:grid;place-items:center;font:700 12px 'Space Grotesk',sans-serif;flex:0 0 auto}
.agent p{font-size:13.5px;color:#5b5f73;margin:8px 0}
.ag-st{font-size:12px;font-weight:600;color:#c2410c}
@media(max-width:859px){
 .app{flex-direction:column;min-height:0}
 .app-side{flex:0 0 auto;border-inline-end:0;border-bottom:1px solid var(--sy-line);padding:10px 10px 8px}
 .app-brand,.app-lbl{display:none}
 .app-pos{min-height:38px;margin-bottom:6px}
 .app-nav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:thin}
 .nav-i{width:auto;flex:0 0 auto;min-height:38px;border:1px solid var(--sy-line);white-space:nowrap}
 .nav-i.ai{margin-top:0}
 .ni-ic{display:none}
 .app-top{padding:8px 14px;min-height:0}
 .app-user{display:none}
 .app .panel{padding:14px 12px 18px}
 .hero-card{padding:18px}
 .hero-card h3{font-size:20px}
 .hc-btns{flex-direction:row;flex-wrap:wrap}
}
html[lang=ar] .app-chip{letter-spacing:0;font-family:inherit}