:root{
  --bg:#06122a; --bg2:#0a1e44; --surface:#0d2148; --surface2:#112a57;
  --teal:#17b3cf; --blue:#1460c4; --sky:#46b4e6;
  --ink:#ffffff; --muted:#9fb6d8; --line:rgba(255,255,255,.12);
  --green:#2fd38a; --amber:#ffb547; --pink:#ff5d8f; --violet:#7c5cff;
  --radius:24px; --max:1200px;
  color-scheme:dark;
  --grad:linear-gradient(90deg,var(--teal),var(--sky));
  --btn:linear-gradient(90deg,var(--teal),var(--blue));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cairo',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden}
html[lang=en] body{font-family:'Inter','Cairo',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ltr{direction:ltr;unicode-bidi:isolate}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:17px;padding:14px 28px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s,background .2s}
.btn-primary{background:var(--btn);color:#fff;box-shadow:0 12px 30px rgba(23,179,207,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(23,179,207,.5)}
.btn-ghost{background:rgba(255,255,255,.06);border:1.5px solid var(--line);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn svg{width:20px;height:20px}

/* header */
.header{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .3s,box-shadow .3s}
.header.scrolled{background:rgba(6,18,42,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Inter';font-weight:800;font-size:24px;direction:ltr}
.brand .logo-chip{width:44px;height:44px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.brand .logo-chip img{width:34px}
.brand b{color:var(--sky)}
.nav-links{display:flex;gap:28px;font-weight:700;font-size:16px;color:var(--muted)}
.nav-links a:hover{color:#fff}
.nav-actions{display:flex;align-items:center;gap:12px}
.lang{font-family:'Inter';font-weight:800;font-size:14px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1.5px solid var(--line);color:#fff;cursor:pointer}
.login{padding:10px 18px;font-size:15px}
html[dir=rtl] .login svg{transform:scaleX(-1)}
.menu-btn{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:6px}
.menu-btn svg{width:28px;height:28px}

/* hero */
.hero{position:relative;padding:150px 0 90px;overflow:hidden;background:radial-gradient(90% 70% at 50% 0%,var(--bg2) 0%,var(--bg) 70%)}
.blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.45;pointer-events:none}
.blob.b1{width:620px;height:620px;background:var(--teal);top:-200px;inset-inline-start:-200px}
.blob.b2{width:560px;height:560px;background:var(--blue);bottom:-220px;inset-inline-end:-160px}
.grid-bg{position:absolute;inset:0;opacity:.06;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Inter';font-weight:700;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal);padding:7px 16px;border:1.5px solid rgba(23,179,207,.45);border-radius:999px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.hero h1{font-size:clamp(36px,4.6vw,58px);font-weight:900;line-height:1.2;margin:22px 0 18px}
.hero p.lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;color:var(--muted);font-weight:700;font-size:15px}
.hero-points span{display:inline-flex;align-items:center;gap:8px}
.hero-points svg{width:18px;height:18px;color:var(--green)}

.hero-visual{position:relative}
.hero-frame{position:relative;border-radius:32px;padding:18px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border:1.5px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.45)}
.hero-frame .frame-bar{display:flex;gap:7px;margin:0 6px 14px}
.hero-frame .frame-bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.2)}
.hero-frame .frame-bar i:first-child{background:#ff5f57}.hero-frame .frame-bar i:nth-child(2){background:#febc2e}.hero-frame .frame-bar i:nth-child(3){background:#28c840}
.hero-slides{position:relative}
.hero-slide{position:absolute;inset:0;opacity:0;transform:scale(.97);transition:opacity .6s,transform .6s;pointer-events:none}
.hero-slide.active{position:relative;opacity:1;transform:none}
.hero-caption{display:flex;align-items:center;justify-content:space-between;margin:14px 6px 0;gap:12px}
.hero-caption strong{font-size:17px}
.dots{display:flex;gap:8px}
.dots button{width:9px;height:9px;border-radius:9px;border:0;background:rgba(255,255,255,.25);cursor:pointer;transition:width .3s,background .3s;padding:0}
.dots button.active{width:28px;background:var(--teal)}
.float-badge{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:18px;background:rgba(13,33,72,.92);border:1.5px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.35);font-weight:800;font-size:14px;backdrop-filter:blur(8px);animation:float 5s ease-in-out infinite}
.float-badge .ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.float-badge small{display:block;font-weight:600;color:var(--muted);font-size:12px}
.fb1{top:-22px;inset-inline-end:-22px}
.fb2{bottom:84px;inset-inline-end:-34px;animation-delay:-2.5s}
@keyframes float{50%{transform:translateY(-10px)}}

/* strip */
.strip{border-block:1px solid var(--line);background:rgba(255,255,255,.02)}
.strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-block:26px}
.strip-item{display:flex;align-items:center;gap:14px}
.strip-item .ic{width:48px;height:48px;border-radius:14px;background:rgba(23,179,207,.14);display:flex;align-items:center;justify-content:center;flex:none}
.strip-item .ic svg{width:24px;height:24px;color:var(--teal)}
.strip-item strong{display:block;font-size:16px}
.strip-item span{font-size:13px;color:var(--muted)}

/* sections */
section{position:relative}
.section{padding:110px 0}
.section-head{text-align:center;max-width:760px;margin:0 auto 54px}
.section-head h2{font-size:clamp(30px,3.6vw,46px);font-weight:900;line-height:1.25;margin:16px 0 14px}
.section-head p{color:var(--muted);font-size:18px}

/* feature slider */
.features{background:linear-gradient(180deg,var(--bg) 0%,#081834 100%)}
.tabs{display:flex;gap:10px;overflow-x:auto;padding:4px 4px 16px;margin-bottom:26px;scrollbar-width:thin;scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{height:6px}.tabs::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.tab{flex:none;display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;background:rgba(255,255,255,.05);border:1.5px solid var(--line);color:var(--muted);font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;scroll-snap-align:center;transition:all .25s;white-space:nowrap}
.tab svg{width:18px;height:18px}
.tab:hover{color:#fff}
.tab.active{background:var(--btn);border-color:transparent;color:#fff;box-shadow:0 10px 24px rgba(23,179,207,.3)}
.slider{position:relative;border-radius:32px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1.5px solid var(--line);overflow:hidden}
.track{display:flex;transition:transform .7s cubic-bezier(.65,0,.35,1);touch-action:pan-y}
.slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;padding:52px 52px 112px}
.slide-text .num{font-family:'Inter';font-weight:800;font-size:14px;color:var(--teal);letter-spacing:2px}
.slide-text h3{font-size:clamp(26px,2.8vw,38px);font-weight:900;line-height:1.25;margin:10px 0 14px}
.slide-text p{color:var(--muted);font-size:17px}
.bullets{list-style:none;margin:24px 0 30px;display:grid;gap:12px}
.bullets li{display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:16px}
.bullets li i{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(47,211,138,.16);display:flex;align-items:center;justify-content:center;margin-top:2px}
.bullets li i svg{width:14px;height:14px;color:var(--green)}
.slider-nav{position:absolute;bottom:26px;inset-inline-start:52px;display:flex;align-items:center;gap:14px}
.arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.arrow:hover{background:rgba(255,255,255,.14)}
.arrow svg{width:20px;height:20px}
html[dir=rtl] .arrow svg{transform:scaleX(-1)}
html[dir=ltr] .flip{transform:scaleX(-1)}
.counter{font-family:'Inter';font-weight:800;font-size:15px;color:var(--muted);min-width:64px;text-align:center}
.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.06)}
.progress i{display:block;height:100%;width:0;background:var(--grad)}

/* mockups (scaled 900x720 stage, shared with the promo video) */
.mock{position:relative;width:100%;aspect-ratio:900/720}
.mock-stage{position:absolute;top:0;left:0;width:900px;height:720px;transform-origin:top left;direction:ltr;font-family:'Cairo',sans-serif;color:#fff;line-height:1.6}
.mock-stage .en{font-family:'Inter',sans-serif}
.mock-stage .card{position:absolute;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:2px solid rgba(255,255,255,.14);border-radius:40px;box-shadow:0 40px 80px rgba(0,0,0,.35)}
.mock-stage .row{display:flex;align-items:center;gap:20px}
.mock-stage .lbl{font-size:34px;font-weight:700}
.mock-stage .lblen,.mock-stage .en,.mock-stage .pill,.mock-stage .kpi{direction:ltr;unicode-bidi:isolate}
.mock-stage .lblen{font-family:'Inter';font-size:28px;color:var(--muted);font-weight:600}
.mock-stage .pill{font-family:'Inter';font-weight:800;font-size:26px;padding:8px 20px;border-radius:30px}
.mock-stage .icoCircle{width:92px;height:92px;border-radius:28px;display:flex;align-items:center;justify-content:center;flex:none}
.mock-stage .bar,.mock-stage .lbar{transition:width 1.2s cubic-bezier(.2,.8,.2,1) .3s}
.mock-stage .bar2{transition:height .9s cubic-bezier(.2,.8,.2,1)}
.mock-stage .tick{transition:background .3s}
.mock-stage .tick svg{transition:opacity .3s}

/* all features grid */
.grid-features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fcard{padding:26px;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1.5px solid var(--line);transition:transform .25s,border-color .25s,background .25s;cursor:pointer}
.fcard:hover{transform:translateY(-4px);border-color:rgba(23,179,207,.5);background:rgba(23,179,207,.06)}
.fcard .ic{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.fcard .ic svg{width:26px;height:26px}
.fcard h4{font-size:18px;font-weight:800;margin-bottom:6px}
.fcard p{font-size:14.5px;color:var(--muted);line-height:1.7}

/* AI highlight */
.ai-band{background:radial-gradient(70% 90% at 80% 50%,rgba(124,92,255,.22),transparent 70%),radial-gradient(60% 80% at 10% 40%,rgba(23,179,207,.16),transparent 70%)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split h2{font-size:clamp(30px,3.6vw,46px);font-weight:900;line-height:1.25;margin:16px 0}
.split p{color:var(--muted);font-size:18px}
.checks{display:grid;gap:14px;margin-top:26px}
.checks div{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.04);border:1.5px solid var(--line)}
.checks .ic{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.checks .ic svg{width:20px;height:20px}
.checks strong{display:block;font-size:16px}
.checks span{font-size:14px;color:var(--muted)}

/* integrations marquee */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);padding:6px 0}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marquee 38s linear infinite;direction:ltr}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;background:rgba(255,255,255,.05);border:1.5px solid var(--line);font-weight:800;font-size:16px;white-space:nowrap}
.marquee span i{width:10px;height:10px;border-radius:50%}
@keyframes marquee{to{transform:translateX(-50%)}}

/* video */
.video-wrap{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}
.phone-video{width:330px;border-radius:44px;padding:12px;background:#0b1a36;border:6px solid #2a3f66;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.phone-video video{width:100%;border-radius:32px;display:block;aspect-ratio:9/16;background:#000}

/* why */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why div{padding:30px 26px;border-radius:var(--radius);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1.5px solid var(--line)}
.why .n{font-family:'Inter';font-weight:900;font-size:40px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.why h4{font-size:19px;font-weight:800;margin:8px 0}
.why p{color:var(--muted);font-size:15px}

/* CTA + contact */
.cta{padding:0 0 110px}
.cta-box{position:relative;overflow:hidden;border-radius:36px;padding:60px;background:linear-gradient(120deg,#0f3d7a,#0a2a5c 45%,#0b5d78);border:1.5px solid rgba(70,180,230,.35);display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.cta-box::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:var(--teal);filter:blur(120px);opacity:.35;inset-inline-end:-120px;top:-160px;pointer-events:none}
.cta-box h2{font-size:clamp(30px,3.4vw,44px);font-weight:900;line-height:1.25}
.cta-box p{color:#cfe3f7;font-size:18px;margin:14px 0 26px}
.contact-lines{display:grid;gap:12px}
.contact-lines a{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:17px}
.contact-lines svg{width:22px;height:22px;color:var(--sky)}
.form{position:relative;z-index:1;display:grid;gap:14px;padding:30px;border-radius:26px;background:rgba(6,18,42,.55);border:1.5px solid var(--line);backdrop-filter:blur(10px)}
.form h3{font-size:22px;font-weight:900}
.form label{display:grid;gap:6px;font-weight:700;font-size:14px;color:var(--muted)}
.form input,.form select{font-family:inherit;font-size:16px;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line);background:rgba(255,255,255,.06);color:#fff;outline:none}
.form input:focus,.form select:focus{border-color:var(--teal)}
.form select option{color:#000}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .btn{justify-content:center;margin-top:6px}
.form small{color:var(--muted);text-align:center}
.form .wa-link{text-align:center;font-weight:800;color:var(--sky);text-decoration:underline}

/* footer */
.footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:14px}
.footer .container{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.wa-float{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom,0px));inset-inline-end:calc(22px + env(safe-area-inset-right,0px));z-index:60;width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(37,211,102,.45);transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;color:#fff}

/* reveal on scroll */
.reveal.in{animation:rise .8s ease both}
@keyframes rise{from{opacity:.35;transform:translateY(18px)}to{opacity:1;transform:none}}

/* responsive */
@media (max-width:1024px){
  .hero-inner,.split,.video-wrap,.cta-box{grid-template-columns:1fr}
  .hero{padding-top:120px}
  .hero-visual{max-width:640px;margin:0 auto;width:100%}
  .slide{grid-template-columns:1fr;padding:34px 30px 100px;gap:26px}
  .slider-nav{inset-inline-start:30px}
  .grid-features{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .strip .container{grid-template-columns:repeat(2,1fr)}
  .video-wrap{justify-items:center;text-align:center}
}
@media (max-width:820px){
  .nav-links{display:none;position:absolute;top:76px;inset-inline:0;flex-direction:column;gap:0;background:rgba(6,18,42,.97);border-bottom:1px solid var(--line);padding:8px 20px 18px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:block}
  .nav-actions .btn:not(.login){display:none}
}
@media (max-width:600px){
  .login span{display:none}
  .login{padding:10px 12px}
  .section{padding:80px 0}
  .grid-features,.why,.strip .container{grid-template-columns:1fr}
  .slide{padding:26px 20px 96px}
  .slider-nav{inset-inline-start:20px;bottom:22px}
  .cta-box{padding:30px 20px}
  .form .row2{grid-template-columns:1fr}
  .float-badge{display:none}
  .phone-video{width:280px}
  .hero-ctas .btn{flex:1 1 100%;justify-content:center;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}