/* =========================================================
   ZX BUSINESS CLOUD — ENHANCEMENT LAYER v4
   Adds motion, depth and a more premium feel on top of the
   existing design system. Same palette, same tokens — no
   colors are introduced beyond what --root already defines.
   ========================================================= */

/* ---------- base polish ---------- */
html{scroll-behavior:smooth}
body{opacity:0;animation:pageIn .6s ease forwards}
@keyframes pageIn{to{opacity:1}}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--royal),var(--cyan));border-radius:999px;border:2px solid var(--paper)}
*{scrollbar-color:var(--cyan) var(--paper);scrollbar-width:thin}

.site-header.is-scrolled{box-shadow:0 10px 34px rgba(3,21,59,.1);background:rgba(255,255,255,.98)}
.site-header.is-scrolled .brand img{height:44px}
.site-header{transition:box-shadow .3s ease}
.brand img{transition:height .25s ease}

/* ---------- cursor spotlight (desktop only) ---------- */
.zx-spotlight{position:fixed;top:0;left:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s ease;mix-blend-mode:screen;background:radial-gradient(circle,rgba(35,200,255,.16),rgba(255,217,26,.07) 42%,transparent 70%);will-change:transform}
.hero,.page-hero,.ai-showcase,.nexus-page-hero,.cta-panel,.flow-shell{position:relative;isolation:isolate}
.hero .zx-spotlight,.page-hero .zx-spotlight,.ai-showcase .zx-spotlight,.nexus-page-hero .zx-spotlight{opacity:1}

/* ---------- animated aurora backdrops (dark sections) ---------- */
@keyframes auroraShift{
  0%{background-position:0% 0%,100% 0%,50% 100%}
  50%{background-position:100% 40%,0% 60%,60% 20%}
  100%{background-position:0% 0%,100% 0%,50% 100%}
}
.hero::before,.page-hero::before,.ai-showcase::before,.nexus-page-hero::before,.cta-panel::after,.flow-shell::before{
  background-size:200% 200%,220% 220%,180% 180%;
  animation:auroraShift 22s ease-in-out infinite;
}

/* particle canvas injected by enhance.js */
.zx-particles{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55}

/* ---------- hero: depth + parallax ---------- */
.hero-grid{perspective:1400px}
.command-orbit{transform-style:preserve-3d;transition:transform .12s ease-out}
.orbit-core{transition:transform .12s ease-out;position:relative}
.orbit-core::after{animation-duration:32s}
.orbit-node{transition:transform .12s ease-out,box-shadow .25s ease}
.orbit-node:hover{box-shadow:0 22px 55px rgba(0,158,223,.28);border-color:rgba(255,217,26,.45)}

/* glowing pulse ring behind the orbit core to sell "transformation" */
.orbit-core{}
.orbit-core:before{content:none}
.command-orbit::before{content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,217,26,.5),transparent 70%);filter:blur(18px);animation:corePulse 3.6s ease-in-out infinite;z-index:-1}
@keyframes corePulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}}

/* traveling light dots along the dashed orbit rings */
.orbit-core::before,.orbit-core::after{border-style:solid;border-color:rgba(255,255,255,.14) transparent rgba(35,200,255,.4) transparent}

.hero-highlight{position:relative}
@keyframes highlightSheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

.hero .btn-yellow,.hero .btn-ghost,.cta-panel .btn-yellow,.ai-showcase .btn-yellow{position:relative;overflow:hidden}

/* ---------- magnetic / shine buttons ---------- */
.btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .25s ease}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.4) 40%,transparent 60%);transform:translateX(-120%);transition:transform .6s ease}
.btn:hover::before{transform:translateX(120%)}
.btn-primary:hover,.btn-dark:hover{box-shadow:0 18px 40px rgba(0,64,106,.32)}
.btn-yellow:hover{box-shadow:0 18px 40px rgba(255,217,26,.35)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--blue)}

/* ---------- staggered reveal cascade ---------- */
.bento-card,.module-card,.price-card,.program-card,.capability-card,.process-step,.feature-item,.mega-card,.platform-feature{transition:opacity .6s ease,transform .6s ease,box-shadow .25s ease,border-color .25s ease}
.bento-card:nth-child(1),.module-card:nth-child(1),.price-card:nth-child(1),.program-card:nth-child(1),.capability-card:nth-child(1),.process-step:nth-child(1){transition-delay:.02s}
.bento-card:nth-child(2),.module-card:nth-child(2),.price-card:nth-child(2),.program-card:nth-child(2),.capability-card:nth-child(2),.process-step:nth-child(2){transition-delay:.09s}
.bento-card:nth-child(3),.module-card:nth-child(3),.price-card:nth-child(3),.program-card:nth-child(3),.capability-card:nth-child(3),.process-step:nth-child(3){transition-delay:.16s}
.bento-card:nth-child(4),.module-card:nth-child(4),.price-card:nth-child(4),.capability-card:nth-child(4){transition-delay:.23s}
.bento-card:nth-child(5),.module-card:nth-child(5),.capability-card:nth-child(5){transition-delay:.3s}
.module-card:nth-child(6){transition-delay:.37s}
.module-card:nth-child(7){transition-delay:.44s}
.module-card:nth-child(8){transition-delay:.51s}

/* ---------- 3D tilt cards ---------- */
.bento,.module-grid,.pricing-grid,.program-grid,.capability-grid,.process-steps{perspective:1600px}
.bento-card,.module-card,.price-card,.program-card,.capability-card,.process-step{transform-style:preserve-3d;will-change:transform}
.bento-card:hover,.module-card:hover,.price-card:hover,.program-card:hover,.capability-card:hover,.process-step:hover{box-shadow:0 26px 60px rgba(3,21,59,.16)}

/* icon micro-motion */
.bento-icon,.module-code,.mega-code,.capability-card>span,.process-step>b{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.bento-card:hover .bento-icon,.module-card:hover .module-code,.capability-card:hover>span,.process-step:hover>b{transform:translateY(-4px) rotate(-4deg)}

/* ---------- number count-up ---------- */
.price strong{display:inline-block}

/* ---------- module link arrow motion ---------- */
.module-link{transition:gap .2s ease}
.module-card:hover .module-link{gap:8px}
.module-link::after{transition:transform .2s ease}
.module-card:hover .module-link::after{transform:translateX(4px)}
html[dir="rtl"] .module-card:hover .module-link::after{transform:translateX(-4px)}

/* ---------- AI orb: gentle levitate ---------- */
.ai-orb{animation:orbFloat 4.2s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.04)}}
.contract-sheet{transition:transform .4s ease}
.ai-showcase-grid:hover .contract-sheet{transform:rotate(0deg) translateY(-4px)}

/* ---------- flow steps: sequential pulse ---------- */
.flow-step{transition:transform .25s ease,background .25s ease}
.flow-step:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)}

/* ---------- back to top button (created by app.js) ---------- */
.back-to-top{position:fixed;right:20px;bottom:88px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:16px;font-weight:900;box-shadow:var(--shadow-soft);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;z-index:88}
html[dir="rtl"] .back-to-top{right:auto;left:20px}
.back-to-top.show{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:var(--navy);color:#fff;transform:translateY(-3px)}

/* ---------- reduced motion respect ---------- */
@media (prefers-reduced-motion:reduce){
  body{opacity:1;animation:none}
  .hero::before,.page-hero::before,.ai-showcase::before,.nexus-page-hero::before,.cta-panel::after,.flow-shell::before,.hero-highlight,.ai-orb,.command-orbit::before{animation:none!important}
  .zx-spotlight,.zx-particles{display:none!important}
}

@media (pointer:coarse){
  .zx-spotlight,.zx-particles{display:none!important}
  .bento-card,.module-card,.price-card,.program-card,.capability-card,.process-step{transform:none!important}
}

@media (max-width:900px){
  .command-orbit::before{display:none}
}

/* ---------- pricing: discount presentation & comparison table ---------- */
.price-was{display:flex;align-items:center;gap:10px;margin-top:18px}
.price-was s{color:var(--muted);font-size:15px;font-weight:700}
.save-badge{padding:4px 9px;border-radius:999px;background:linear-gradient(135deg,#FFE27A,var(--yellow));color:var(--navy);font-size:10px;font-weight:900;letter-spacing:.02em}
.price-card .price{margin-top:6px}
.price-monthly{margin:0 0 20px;color:var(--steel);font-size:11.5px;font-weight:700}
.price-card.featured .price-was s{color:rgba(3,21,59,.4)}

.compare-table-wrap{overflow-x:auto;border-radius:18px;box-shadow:var(--shadow-soft)}
.compare-table{margin-top:0;min-width:640px}
.compare-table th:first-child,.compare-table td:first-child{text-align:start;font-weight:800;background:#FBFCFE}
.compare-table th{text-align:center}
.compare-table td{text-align:center;font-size:12px}
.compare-table tbody tr:hover td{background:#F5FAFD}

.pricing-registration .contact-side{background:linear-gradient(150deg,var(--navy),var(--blue))}