/* ============================================================
   MEA THEME — UPDATE-PROOF layer (/assets/mea/, injected via hook mea_brand.php).
   Survives WHMCS + Lagom + module updates (outside templates/lagom2/).
   Brand colors: /assets/mea/brand.css. This file: fonts + navy ground + glass/neon/hero + client-area.
   Font stack Sora/Cairo renders Latin(Sora) + Arabic(Cairo) automatically for both languages.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Outfit:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Cairo:wght@400;500;600;700;800&display=swap');

:root{ --body-bg:#0F1419; --sticky-menu-bg:hsl(210deg 30% 12% / 82%); }
body{ font-family:'Inter','Cairo',system-ui,-apple-system,"Segoe UI",sans-serif; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:'Sora','Cairo','Inter',sans-serif; letter-spacing:-0.01em; }

/* ===== Glass · Neon · Gradients · Pricing (aesthetic only, mobile-aware) ===== */
.package{background:linear-gradient(160deg,rgba(0,217,255,0.055),rgba(15,20,25,0.28))!important;backdrop-filter:blur(12px) saturate(118%);-webkit-backdrop-filter:blur(12px) saturate(118%);border:1px solid rgba(0,217,255,0.14)!important;border-radius:18px!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.package:hover{transform:translateY(-6px);border-color:rgba(0,217,255,0.42)!important;box-shadow:0 14px 44px -14px rgba(0,217,255,0.38)}
.btn.btn-primary,.btn.btn-order-now{box-shadow:0 0 0 rgba(0,217,255,0);transition:box-shadow .25s ease,transform .15s ease,filter .2s ease}
.btn.btn-primary:hover,.btn.btn-order-now:hover,.btn.btn-primary:focus,.btn.btn-order-now:focus{box-shadow:0 0 22px -2px rgba(0,217,255,0.55),0 0 46px -14px rgba(0,217,255,0.4);transform:translateY(-2px);filter:brightness(1.06)}
@media (prefers-reduced-motion:no-preference){.rs-site .rs-block:first-of-type,.custom-page .section:first-of-type{background-image:radial-gradient(1100px 460px at 78% 8%,rgba(0,217,255,0.10),transparent 60%),radial-gradient(880px 400px at 12% 92%,rgba(22,93,49,0.12),transparent 62%);background-attachment:fixed;animation:meaDrift 20s ease-in-out infinite alternate}@keyframes meaDrift{0%{background-position:78% 8%,12% 92%}100%{background-position:70% 14%,20% 86%}}}
@media (max-width:768px){.package{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}}

/* ===== Hero — tagline gradient, CTA glow, light CSS-3D float ===== */
.banner-caption{background:linear-gradient(90deg,#26A155 0%,#00D9FF 72%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:700;letter-spacing:.03em;filter:drop-shadow(0 0 13px rgba(0,217,255,0.28))}
.banner .btn-primary,.btn.btn-xlg.btn-primary{box-shadow:0 0 24px -8px rgba(0,217,255,0.55)}
.banner .btn-primary:hover,.btn.btn-xlg.btn-primary:hover{box-shadow:0 0 30px -4px rgba(0,217,255,0.7),0 0 62px -18px rgba(0,217,255,0.5)}
@media (prefers-reduced-motion:no-preference){
 .graphic-background-left,.graphic-background-center,.graphic-background-right{will-change:transform;animation:meaFloat3d 7s ease-in-out infinite}
 .graphic-background-center{animation-duration:8.5s}
 .graphic-background-right{animation-duration:6.4s;animation-delay:-1.6s}
 .graphic-background-left{animation-delay:-3.1s}
 @keyframes meaFloat3d{0%,100%{transform:perspective(1000px) translate3d(0,0,0) rotateX(0) rotateY(0)}50%{transform:perspective(1000px) translate3d(0,-11px,18px) rotateX(1.6deg) rotateY(-1.8deg)}}
}
.btn-secondary,.btn.btn-secondary{--btn-secondary-bg:#1E8043}

/* ===== Client area unification (aesthetic only, no functional change) ===== */
.rs-panel-summary,.service-summary,.product-info-summary{border-radius:16px!important}
.btn:focus-visible,a:focus-visible{outline:2px solid rgba(0,217,255,.55);outline-offset:2px}