*{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Inter',sans-serif;background:#0a0a0a;color:#f5f5f4;overflow-x:hidden}
        [dir="rtl"] body{font-family:'Tajawal',sans-serif}
        ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#111}::-webkit-scrollbar-thumb{background:#2aafe5;border-radius:3px}

        @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
        @keyframes float-delayed{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-15px) rotate(-2deg)}}
        @keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(42,175,229,.2)}50%{box-shadow:0 0 40px rgba(42,175,229,.4)}}
        @keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        @keyframes orbit{from{transform:rotate(0deg) translateX(120px) rotate(0deg)}to{transform:rotate(360deg) translateX(120px) rotate(-360deg)}}
        @keyframes marquee{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
        @keyframes marquee-rtl{0%{transform:translate3d(-50%,0,0)}100%{transform:translate3d(0,0,0)}}

        .animate-float{animation:float 6s ease-in-out infinite}
        .animate-float-delayed{animation:float-delayed 7s ease-in-out infinite 1s}
        .animate-pulse-glow{animation:pulse-glow 3s ease-in-out infinite}
        .animate-gradient{background-size:200% 200%;animation:gradient-shift 4s ease infinite}
        .animate-orbit{animation:orbit 20s linear infinite}

        .reveal{opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.16,1,.3,1)}
        .reveal.active{opacity:1;transform:translateY(0)}
        .reveal-right{opacity:0;transform:translateX(40px);transition:all .8s cubic-bezier(.16,1,.3,1)}
        .reveal-right.active{opacity:1;transform:translateX(0)}

        .service-card{transition:all .5s cubic-bezier(.16,1,.3,1)}
        .service-card:hover{transform:translateY(-8px)}
        .service-card:hover .service-icon{background:rgba(42,175,229,.15);transform:scale(1.1)}
        .service-card:hover .service-arrow{opacity:1}
        [dir="ltr"] .service-card:hover .service-arrow{transform:translateX(4px)}
        [dir="rtl"] .service-card:hover .service-arrow{transform:translateX(-4px)}

        .btn-primary{position:relative;overflow:hidden;transition:all .4s cubic-bezier(.16,1,.3,1)}
        .btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .6s}
        .btn-primary:hover::before{left:100%}
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(42,175,229,.35)}

        .glass{background:rgba(23,23,23,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
        .glass-card{background:rgba(23,23,23,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(42,175,229,.08)}

        .gradient-text{background:linear-gradient(135deg,#2aafe5,#6acbef,#2aafe5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gradient-shift 4s ease infinite}

        .grid-bg{background-image:linear-gradient(rgba(42,175,229,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(42,175,229,.03) 1px,transparent 1px);background-size:60px 60px}
        .hero-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(42,175,229,.12),transparent 70%);pointer-events:none}

        .stat-card{position:relative;overflow:hidden}
        .stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#2aafe5,transparent);opacity:0;transition:opacity .5s}
        .stat-card:hover::after{opacity:1}

        .nav-link{position:relative}
        .nav-link::after{content:'';position:absolute;bottom:-4px;left:50%;width:0;height:2px;background:#2aafe5;transition:all .3s;transform:translateX(-50%)}
        .nav-link:hover::after{width:100%}

        .lang-btn{transition:all .3s}
        .lang-btn:hover{background:rgba(42,175,229,.15);border-color:rgba(42,175,229,.4)}

        .mobile-menu{position:fixed;top:0;right:0;bottom:0;width:320px;z-index:60;background:rgba(10,10,10,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:2rem;padding-top:5rem;display:flex;flex-direction:column;gap:1.5rem;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);border-left:1px solid rgba(255,255,255,.05)}
        [dir="rtl"] .mobile-menu{right:0;border-left:none;border-right:1px solid rgba(255,255,255,.05)}
        .mobile-menu.open{transform:translateX(0)!important}
        .mobile-menu .close-btn{position:absolute;top:1.5rem;right:1.5rem}

        .marquee-strip{display:flex;gap:3rem;animation:marquee 30s linear infinite}
        [dir="rtl"] .marquee-strip{animation:marquee-rtl 30s linear infinite}

        .cta-section{position:relative;overflow:hidden}
        .cta-section::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 50%,rgba(42,175,229,.08),transparent 50%),radial-gradient(circle at 70% 50%,rgba(42,175,229,.05),transparent 50%);pointer-events:none}

        .toast{transform:translateY(100px);opacity:0;transition:all .5s cubic-bezier(.16,1,.3,1)}
        .toast.show{transform:translateY(0);opacity:1}

        .process-line{position:absolute;top:2rem;left:60%;width:80%;height:1px;background:linear-gradient(to right,rgba(42,175,229,.3),transparent)}
        [dir="rtl"] .process-line{left:auto;right:60%;background:linear-gradient(to left,rgba(42,175,229,.3),transparent)}

        .whatsapp-float{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;width:56px;height:56px;background:#22c55e;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(34,197,94,.3);transition:transform .3s}
        .whatsapp-float:hover{transform:scale(1.1)}
        [dir="rtl"] .whatsapp-float{right:auto;left:1.5rem}
        [dir="rtl"] .btn-arrow{transform:scaleX(-1)}

        /* ===== LAPTOP MOCKUP ===== */
        .laptop-wrap{position:relative;display:inline-block}
        .laptop-screen{position:relative;border-radius:14px 14px 0 0;overflow:hidden;border:3px solid #3a3a3a;border-bottom:none;background:#111;box-shadow:0 -8px 30px rgba(42,175,229,.06),inset 0 0 60px rgba(0,0,0,.3)}
        .laptop-screen img{width:100%;height:auto;display:block}
        .laptop-base{height:16px;background:linear-gradient(180deg,#3a3a3a 0%,#222 100%);border-radius:0 0 10px 10px;position:relative}
        .laptop-base::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:90px;height:4px;background:#444;border-radius:0 0 4px 4px}
        .laptop-base::after{content:'';position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(42,175,229,.15),transparent)}
        .laptop-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:5px;background:#1a1a1a;border-radius:0 0 6px 6px;z-index:3}
        .laptop-glow{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);width:70%;height:40px;background:radial-gradient(ellipse,rgba(42,175,229,.08),transparent 70%);pointer-events:none}

        /* ===== PHONE MOCKUP ===== */
        .phone-wrap{position:relative;width:200px;flex-shrink:0}
        .phone-screen{border-radius:24px;border:3px solid #3a3a3a;overflow:hidden;background:#111;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(42,175,229,.05)}
        .phone-screen img{width:100%;height:auto;display:block}
        .phone-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:50px;height:16px;background:#000;border-radius:8px;z-index:3}
        .phone-glow{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:60%;height:30px;background:radial-gradient(ellipse,rgba(42,175,229,.06),transparent 70%);pointer-events:none}

        /* ===== SHOWCASE TABS ===== */
        .showcase-tab{transition:all .3s;cursor:pointer}
        .showcase-tab.active{background:rgba(42,175,229,.15)!important;border-color:rgba(42,175,229,.4)!important;color:#3dbde7!important}
        .showcase-panel{display:none;animation:fadeInUp .6s ease}
        .showcase-panel.active{display:block}
        @keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

        /* ===== CLIENTS HORIZONTAL MARQUEE ===== */
        .clients-marquee{display:flex;gap:1rem;width:max-content;will-change:transform;transform:translateZ(0)}
        .clients-marquee-track{animation:marquee var(--clients-marquee-duration,40s) linear infinite;will-change:transform;transform:translate3d(0,0,0)}
        [dir="rtl"] .clients-marquee-track{animation:marquee-rtl var(--clients-marquee-duration,40s) linear infinite}
        .clients-marquee-container:hover .clients-marquee-track{animation-play-state:paused}

        .client-face{flex-shrink:0;text-align:center;transition:all .4s cubic-bezier(.16,1,.3,1);cursor:default}
        .client-face:hover{transform:translateY(-8px) scale(1.05)}
        .client-face:hover .client-face-ring{border-color:rgba(42,175,229,.5);box-shadow:0 0 25px rgba(42,175,229,.2)}
        .client-face:hover .client-face-img{transform:scale(1.1)}
        .client-face-ring{width:80px;height:80px;border-radius:50%;border:2px solid rgba(255,255,255,.08);padding:3px;transition:all .4s;margin:0 auto}
        .client-face-img{width:100%;height:100%;border-radius:50%;object-fit:cover;transition:transform .4s}

        @media (max-width:768px){
          .clients-marquee{gap:.75rem}
          .client-face-ring{width:72px;height:72px}
        }

        @media (prefers-reduced-motion: reduce){
          .clients-marquee-track{animation:none!important;transform:none!important}
          .client-face,.client-face-img{transition:none!important}
        }

        /* ===== CONSULT ===== */
        .consult-icon-ring{position:relative}
        .consult-icon-ring::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(42,175,229,.2);animation:pulse-glow 3s ease-in-out infinite}

        /* ===== BRANDING ===== */
        .branding-card{position:relative;overflow:hidden;transition:all .5s cubic-bezier(.16,1,.3,1)}
        .branding-card:hover{transform:translateY(-6px) scale(1.02)}
        .branding-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(42,175,229,.1),transparent);opacity:0;transition:opacity .5s}
        .branding-card:hover::before{opacity:1}
		
		
		.grid-bg {
  background-image:
    radial-gradient(rgba(42, 175, 229, 0.12) 1px, transparent 1px),
    radial-gradient(rgba(42, 175, 229, 0.06) 1px, transparent 1px);
    
  background-size: 60px 60px, 30px 30px;
}

.max-w-4xl {
  max-width:80rem !important;
}