/*
  ZX Business Cloud — Refined UI System v3
  Design direction derived from the approved Finance reference page:
  clean white navigation, precise typography, geometric gradient heroes,
  strong statement emphasis, sharper buttons, restrained cards, and clear spacing.
*/

:root{
  --ui-primary:#00406a;
  --ui-primary-deep:#00305a;
  --ui-accent:#009edf;
  --ui-accent-soft:#6ed7ff;
  --ui-hero-a:#120b88;
  --ui-hero-b:#003f9f;
  --ui-hero-c:#00406a;
  --ui-ink:#070c24;
  --ui-text:#465467;
  --ui-soft:#f6f8fb;
  --ui-line:#e3e9f0;
  --ui-white:#fff;
  --ui-highlight:#ffd91a;
  --ui-radius:8px;
  --ui-radius-lg:12px;
  --ui-shadow:0 22px 58px rgba(0,64,106,.12);
  --ui-shadow-soft:0 10px 28px rgba(0,64,106,.07);
  --header-h:72px;
}

/* Per-page color direction — the layout remains consistent while each solution keeps its own identity. */
body.theme-finance{--ui-primary:#00406a;--ui-accent:#009edf;--ui-hero-a:#120b88;--ui-hero-b:#003f9f;--ui-hero-c:#00406a}
body.theme-einvoice{--ui-primary:#0d47a1;--ui-accent:#38bdf8;--ui-hero-a:#0a2a66;--ui-hero-b:#0d47a1;--ui-hero-c:#126c9e;--ui-highlight:#f4c430}
body.theme-sales{--ui-primary:#7b2748;--ui-accent:#ef6b70;--ui-hero-a:#30104f;--ui-hero-b:#782b62;--ui-hero-c:#b84c56;--ui-highlight:#ffc857}
body.theme-procurement{--ui-primary:#073d62;--ui-accent:#22b7dc;--ui-hero-a:#071b43;--ui-hero-b:#075782;--ui-hero-c:#148ead}
body.theme-inventory{--ui-primary:#0a5e5b;--ui-accent:#25c0b1;--ui-hero-a:#063b4d;--ui-hero-b:#08756d;--ui-hero-c:#1b9f93}
body.theme-ecommerce{--ui-primary:#4b287f;--ui-accent:#30bfe8;--ui-hero-a:#26125d;--ui-hero-b:#5b2f99;--ui-hero-c:#087ea6;--ui-highlight:#ffd86a}
body.theme-manufacturing{--ui-primary:#74450f;--ui-accent:#f59e0b;--ui-hero-a:#17254a;--ui-hero-b:#775018;--ui-hero-c:#d27c0d;--ui-highlight:#ffd166}
body.theme-projects{--ui-primary:#294c7c;--ui-accent:#5b7cfa;--ui-hero-a:#172452;--ui-hero-b:#315f99;--ui-hero-c:#4d87c6}
body.theme-nexus{--ui-primary:#4b2b85;--ui-accent:#7c5cfc;--ui-hero-a:#160d4d;--ui-hero-b:#3e247c;--ui-hero-c:#176f9e;--ui-highlight:#c8b9ff}
body.theme-pricing{--ui-primary:#00406a;--ui-accent:#009edf;--ui-hero-a:#09235b;--ui-hero-b:#00548c;--ui-hero-c:#0086b9}
body.theme-programs{--ui-primary:#174b63;--ui-accent:#18a9a1;--ui-hero-a:#092f4b;--ui-hero-b:#126a78;--ui-hero-c:#13a3a0}
body.theme-about{--ui-primary:#173d72;--ui-accent:#388cf8;--ui-hero-a:#101d4b;--ui-hero-b:#174b83;--ui-hero-c:#297fa5}
body.theme-contact{--ui-primary:#00406a;--ui-accent:#009edf;--ui-hero-a:#0b235b;--ui-hero-b:#004e83;--ui-hero-c:#0085ad}
body.theme-communications{--ui-primary:#3730a3;--ui-accent:#818cf8;--ui-hero-a:#1e1b4b;--ui-hero-b:#312e81;--ui-hero-c:#4338ca;--ui-highlight:#c7d2fe}

html{scroll-padding-top:calc(var(--header-h) + 18px)}
body{
  color:var(--ui-ink);
  background:var(--ui-white);
  line-height:1.65;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#f9fbfd 100%);
}
.container{width:min(1180px,calc(100% - 48px))}
.section{padding:86px 0}
.section-tight{padding:64px 0}
.soft{background:linear-gradient(180deg,#f7f9fc,#f4f7fa)}

h1,h2,h3,h4{color:var(--ui-ink);letter-spacing:-.035em}
h1{font-size:clamp(44px,5.5vw,72px);line-height:1.01}
h2{font-size:clamp(32px,4vw,50px);line-height:1.08}
h3{font-size:20px}
.lede{color:var(--ui-text);font-size:clamp(16px,1.45vw,19px);line-height:1.72}
html[lang="ar"] body{font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0;line-height:1.25}

/* Clean header and dependable navigation */
.site-header{
  height:var(--header-h);
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--ui-line);
  box-shadow:none;
  backdrop-filter:blur(16px) saturate(140%);
  transition:box-shadow .25s ease,background .25s ease;
}
.site-header.is-scrolled{background:rgba(255,255,255,.985);box-shadow:0 10px 32px rgba(7,12,36,.08)}
.nav-wrap{height:var(--header-h);gap:22px}
.brand{min-width:198px}
.brand img{height:49px}
.brand-copy strong{color:var(--ui-primary);font-size:12px;letter-spacing:.04em}
.brand-copy span{font-size:9.5px}
.nav-links{gap:24px;color:#1f2937;font-size:12.5px}
.nav-links>a,.nav-drop-toggle{padding:25px 0 22px;font-weight:800}
.nav-links>a::before,.nav-drop-toggle::before{
  bottom:14px;height:2px;border-radius:0;background:var(--ui-accent)
}
.nav-links>a:hover,.nav-drop-toggle:hover,.nav-links>a.active,.nav-links>a[aria-current="page"],.nav-drop.active>.nav-drop-toggle{color:var(--ui-primary)}
.nav-drop-toggle::after{width:6px;height:6px;border-width:0 2px 2px 0}
.nav-actions{gap:12px}
.lang-switch{border-radius:999px;background:#f6f8fb;border-color:var(--ui-line)}
.lang-switch button.active{background:var(--ui-primary)}
.menu-toggle{border-radius:6px;border-color:var(--ui-line)}

/* Reference-inspired button language: clear, compact, confident. */
.btn,.demo-btn{
  min-height:46px;
  padding:12px 20px;
  border-radius:6px;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:-.01em;
  box-shadow:none;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;
}
.btn:hover,.demo-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,64,106,.16)}
.btn-primary{background:var(--ui-primary);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--ui-accent)}
.btn-yellow{background:var(--ui-highlight);color:#091536}
.btn-ghost{background:#fff;border-color:rgba(255,255,255,.42);color:var(--ui-primary)}
.page-hero .btn-ghost,.hero .btn-ghost,.dark .btn-ghost,.ai-showcase .btn-ghost{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.34);color:#fff;backdrop-filter:blur(10px)}
.btn-dark{background:var(--ui-ink)}
.nav-demo{min-height:42px;padding:10px 17px;background:var(--ui-primary)}

/* Desktop mega menu: stable, clear, easy to scan. */
.mega{
  top:calc(var(--header-h) - 1px);
  width:min(1120px,calc(100vw - 42px));
  border-radius:0 0 10px 10px;
  border-color:var(--ui-line);
  box-shadow:0 26px 60px rgba(7,12,36,.16);
  transform:translate(-50%,8px);
}
.mega-head{padding:20px 24px 16px;background:#fff}
.mega-head h3{font-size:20px}
.mega-all{border-radius:5px;background:#eef7fb;color:var(--ui-primary)}
.mega-layout{grid-template-columns:minmax(0,1fr) 315px}
.mega-grid{gap:7px}
.mega-card{border-radius:6px;padding:12px}
.mega-card:hover{background:#f4f8fb;border-color:#dce8ef}
.mega-code{border-radius:5px;background:var(--ui-primary);box-shadow:none}
.mega-special{background:linear-gradient(145deg,var(--ui-primary-deep),var(--ui-primary))}
.mega-feature,.mega-feature-icon{border-radius:6px}
.mega-feature-icon{background:linear-gradient(145deg,var(--ui-accent),var(--ui-primary))}
.mega-foot{background:#f7f9fb}

/* Hero system — consistent structure, page-specific colors. */
.hero,.page-hero,.nexus-page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 86% 34%,color-mix(in srgb,var(--ui-accent) 46%,transparent),transparent 27%),
    linear-gradient(120deg,var(--ui-hero-a) 0%,var(--ui-hero-b) 48%,var(--ui-hero-c) 100%);
}
.hero::before,.page-hero::before,.nexus-page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.76;
  background-image:
    linear-gradient(120deg,transparent 0 38%,rgba(255,255,255,.055) 38% 50%,transparent 50% 100%),
    radial-gradient(rgba(255,255,255,.45) 1px,transparent 1px);
  background-size:100% 100%,15px 15px;
  -webkit-mask-image:linear-gradient(100deg,transparent 0 52%,#000 72%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 0 52%,#000 72%,#000 100%);
}
.hero::after,.page-hero::after,.nexus-page-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto -8% -34% auto;
  width:55%;
  height:110%;
  background:rgba(255,255,255,.065);
  transform:skewX(-28deg);
  border-radius:0;
  filter:none;
}
html[dir="rtl"] .hero::after,html[dir="rtl"] .page-hero::after,html[dir="rtl"] .nexus-page-hero::after{inset:auto auto -34% -8%;transform:skewX(28deg)}
.hero{min-height:660px}
.hero-grid{grid-template-columns:1fr;gap:0;padding:80px 0 70px}
.hero h1{font-size:clamp(48px,5.6vw,72px);line-height:1.01;max-width:760px}
.hero .lede{font-size:clamp(16px,1.35vw,19px);line-height:1.68;max-width:730px}
.hero-highlight{
  display:inline;
  padding:0 .04em;
  margin:0 .02em;
  border-radius:0;
  background-image:linear-gradient(120deg,rgba(255,217,26,.4),rgba(255,217,26,.4));
  background-repeat:no-repeat;
  background-size:100% .22em;
  background-position:0 92%;
  color:#FFE45C;
  box-shadow:none;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.eyebrow{color:var(--ui-accent-soft);font-size:10.5px;letter-spacing:.14em}
.eyebrow::before{height:2px;border-radius:0;background:currentColor}
.hero-statement,.hero-callout{
  border-radius:6px;
  border-color:rgba(255,255,255,.20);
  background:rgba(4,16,45,.20);
  box-shadow:0 12px 32px rgba(0,0,0,.08);
}
.hero-statement{border-inline-start:3px solid var(--ui-highlight);border-left:1px solid rgba(255,255,255,.18)}
html[dir="rtl"] .hero-statement{border-right:1px solid rgba(255,255,255,.18);border-inline-start:3px solid var(--ui-highlight)}
.statement-icon{background:var(--ui-highlight)}
.trust-chip{border-radius:5px;background:rgba(4,16,45,.20)}
.orbit-node{border-radius:7px;background:rgba(4,16,45,.60);box-shadow:0 18px 38px rgba(0,0,0,.16)}
.orbit-core{background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.06));box-shadow:0 28px 72px rgba(0,0,0,.22),inset 0 0 36px rgba(255,255,255,.08)}

.page-hero{min-height:440px;padding:72px 0;display:flex;align-items:center}
.page-hero .container{width:min(1180px,calc(100% - 48px))}
.page-hero h1{font-size:clamp(44px,5vw,66px);line-height:1.02;max-width:880px}
.page-hero .lede{max-width:760px;font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:rgba(255,255,255,.86)}
.page-hero .tagline{
  display:inline-flex;
  max-width:760px;
  margin:18px 0 12px;
  padding:10px 13px;
  border-inline-start:3px solid var(--ui-highlight);
  border-radius:4px;
  background:rgba(4,16,45,.22);
  color:#fff;
  font-size:14px;
  line-height:1.45;
  font-weight:900;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.breadcrumb{margin-bottom:20px;color:rgba(255,255,255,.66)}
.page-hero .hero-ctas{margin-top:24px}
.nexus-page-hero{padding:72px 0;min-height:560px}
.nexus-page-hero h1{font-size:clamp(46px,5.2vw,70px)}

/* Key statement emphasis outside heroes */
.section-label,.section-head .eyebrow{color:var(--ui-accent)}
.section-head{margin-bottom:36px}
.section-head h2,.section-title{text-wrap:balance}
.section-head p{font-size:15px;line-height:1.7}
.section-head h2::after{
  content:"";
  display:block;
  width:54px;
  height:3px;
  margin-top:16px;
  background:linear-gradient(90deg,var(--ui-primary),var(--ui-accent));
}
html[dir="rtl"] .section-head h2::after{margin-inline-start:auto}
.dark .section-head h2::after,.ai-showcase .section-head h2::after{background:linear-gradient(90deg,var(--ui-accent),#fff)}

/* Cards — cleaner, less rounded, with more deliberate hierarchy. */
.bento-card,.module-card,.price-card,.program-card,.platform-feature,.capability-card,.process-step,.feature-section,.stat-box,.form-card,.contact-side,.cta-panel,.flow-shell,.special-solution-card{
  border-radius:var(--ui-radius-lg);
}
.bento-card,.module-card,.price-card,.program-card,.platform-feature,.capability-card,.process-step,.feature-section,.stat-box,.form-card{
  border-color:var(--ui-line);
  box-shadow:var(--ui-shadow-soft);
}
.bento-card,.module-card,.price-card,.program-card,.platform-feature,.capability-card,.process-step{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bento-card:hover,.module-card:hover,.price-card:hover,.program-card:hover,.platform-feature:hover,.capability-card:hover,.process-step:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--ui-accent) 32%,var(--ui-line));
  box-shadow:var(--ui-shadow);
}
.bento-icon,.module-code,.capability-card>span,.process-step>b{border-radius:6px;background:var(--ui-primary)}
.module-card{min-height:285px;padding:25px}
.module-card-featured{background:linear-gradient(160deg,#fff 64%,color-mix(in srgb,var(--ui-accent) 9%,#fff));border-color:color-mix(in srgb,var(--ui-accent) 35%,var(--ui-line))}
.module-card-featured::before{width:3px;border-radius:0;background:linear-gradient(var(--ui-accent),var(--ui-primary))}
.module-link{color:var(--ui-primary)}
.status{border-radius:4px;background:#eef7fb;color:var(--ui-primary)}
.price-card.featured{border-color:var(--ui-accent);transform:translateY(-6px)}
.price-card .badge{border-radius:4px}
.program-card:nth-child(2){background:linear-gradient(145deg,var(--ui-primary-deep),var(--ui-primary))}
.flow-shell{background:linear-gradient(145deg,var(--ui-primary-deep),var(--ui-primary))}
.flow-step{border-radius:6px}
.cta-panel{
  padding:48px;
  background:linear-gradient(125deg,var(--ui-hero-a),var(--ui-hero-b) 55%,var(--ui-hero-c));
}
.cta-panel::after{border-radius:0;background:rgba(255,255,255,.06);transform:skewX(-24deg)}

/* Module pages */
.stat-strip{gap:10px;margin-top:-28px}
.stat-box{padding:18px 19px;border-radius:7px;position:relative;overflow:hidden}
.stat-box::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--ui-accent),var(--ui-primary))}
html[dir="rtl"] .stat-box::before{left:auto;right:0}
.stat-box b{font-size:12.5px}
.stat-box span{font-size:10.5px}
.module-tools{top:var(--header-h);background:rgba(246,248,251,.96)}
.module-search{border-radius:5px;max-width:520px}
.feature-sections{gap:14px}
.feature-section{border-radius:8px}
.feature-section summary{padding:21px 23px}
.feature-section summary h2{font-size:22px}
.feature-section summary::after{border-radius:4px;background:#eef3f7;color:var(--ui-primary)}
.feature-section[open]{border-color:color-mix(in srgb,var(--ui-accent) 28%,var(--ui-line));box-shadow:var(--ui-shadow)}
.feature-section[open] summary{background:linear-gradient(90deg,color-mix(in srgb,var(--ui-primary) 7%,#fff),#fff)}
.feature-section[open] summary::after{background:var(--ui-primary)}
.feature-body{padding:0 23px 24px}
.feature-grid{gap:10px}
.feature-item{border-radius:6px;background:#fbfcfe}
.feature-index{border-radius:4px;background:color-mix(in srgb,var(--ui-accent) 13%,#fff);color:var(--ui-primary)}
.mini-table{border-radius:6px}
.mini-table th{background:var(--ui-primary)}

/* Forms and contact */
.contact-grid{gap:22px}
.contact-side{background:linear-gradient(145deg,var(--ui-primary-deep),var(--ui-primary));padding:32px}
.contact-row{border-radius:6px}
.form-card{padding:32px}
.field input,.field select,.field textarea{border-radius:5px;background:#fbfcfe}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ui-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 14%,transparent)}

/* Footer */
.site-footer{padding:56px 0 22px;background:#070c24}
.footer-grid{gap:34px}
.footer-col a{transition:color .2s ease,transform .2s ease}
.footer-col a:hover{color:#fff;transform:translateX(2px)}
html[dir="rtl"] .footer-col a:hover{transform:translateX(-2px)}
.footer-badges span{border-radius:4px}
.wa{width:52px;height:52px;border-radius:50%;box-shadow:0 14px 30px rgba(0,0,0,.18)}

/* Refined movement: visible but restrained. */
.reveal{transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.25,1)}
.reveal.in{transform:none}
@keyframes heroGlow{0%,100%{opacity:.72;transform:translate3d(0,0,0)}50%{opacity:.95;transform:translate3d(-10px,7px,0)}}
.hero::before,.page-hero::before,.nexus-page-hero::before{animation:heroGlow 12s ease-in-out infinite}
.back-to-top{
  position:fixed;
  inset-inline-end:24px;
  bottom:88px;
  z-index:80;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--ui-line);
  border-radius:6px;
  background:#fff;
  color:var(--ui-primary);
  box-shadow:0 12px 28px rgba(0,64,106,.14);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.2s ease;
  cursor:pointer;
  font-weight:900;
}
.back-to-top.show{opacity:1;visibility:visible;transform:none}

@media (max-width:1180px){
  .nav-links{gap:15px}
  .hero-grid{grid-template-columns:1fr .78fr;gap:34px}
}

@media (max-width:900px){
  :root{--header-h:74px}
  .container,.page-hero .container{width:min(100% - 34px,1180px)}
  .site-header,.nav-wrap{height:var(--header-h)}
  .nav-links{
    top:calc(var(--header-h) + 8px);
    left:10px;right:10px;inset-inline:10px;
    padding:9px;
    border-radius:9px;
    box-shadow:0 28px 70px rgba(7,12,36,.20);
  }
  .nav-links>a,.nav-drop-toggle{border-radius:5px;padding:13px 14px!important}
  .mega{border-radius:6px;background:#f7f9fb}
  .mega-head{padding:14px}
  .mega-card,.mega-feature{border-radius:5px}
  .mega-special{border-radius:5px;margin:0 8px 8px}
  .hero{min-height:auto}
  .hero-grid{grid-template-columns:1fr;padding:64px 0 58px}
  .hero h1{max-width:820px}
  .command-orbit{max-width:580px;min-height:470px}
  .page-hero{min-height:400px;padding:64px 0}
  .nexus-page-hero{min-height:auto}
  .nexus-hero-grid{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(2,1fr);margin-top:-20px}
  .feature-grid{grid-template-columns:1fr}
  .cta-panel{padding:38px}
}

@media (max-width:620px){
  :root{--header-h:70px}
  .container,.page-hero .container{width:min(100% - 28px,560px)}
  .section{padding:66px 0}.section-tight{padding:52px 0}
  h1{font-size:clamp(39px,11vw,52px)}
  h2{font-size:clamp(29px,8.5vw,39px)}
  .hero-grid{padding:52px 0 48px}
  .hero h1,.page-hero h1,.nexus-page-hero h1{font-size:clamp(40px,11.5vw,54px)}
  .page-hero{min-height:370px;padding:54px 0}
  .page-hero .tagline{font-size:13px}
  .hero-statement{padding:13px 14px}
  .hero-ctas{gap:9px}.hero-ctas .btn{width:100%}
  .trust-row{gap:7px}
  .trust-chip{border-radius:4px;font-size:9.5px;padding:7px 9px}
  .stat-strip{grid-template-columns:1fr;margin-top:-16px}
  .stat-box{padding:16px}
  .feature-section summary{padding:18px}
  .feature-section summary h2{font-size:19px}
  .feature-body{padding:0 18px 20px}
  .feature-item{grid-template-columns:36px 1fr;padding:14px}
  .cta-panel{padding:30px 24px}
  .form-card,.contact-side{padding:24px}
  .back-to-top{inset-inline-end:14px;bottom:78px}
}

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