*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--p:#00d4aa;--pd:#00b894;--pg:rgba(0,212,170,.15);--s:#6c63ff;--bg:#07090f;--bg2:#0d1117;--card:rgba(255,255,255,.04);--cb:rgba(255,255,255,.08);--t:#f0f4f8;--tm:#8b9ab0;--tm2:#5a6a7e;--r:24px;--tr:all .35s cubic-bezier(.4,0,.2,1)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t);font-family:'Inter','Outfit',sans-serif;line-height:1.65;overflow-x:hidden}
[lang="ar"] body{font-family:'Noto Sans Arabic','Inter',sans-serif;line-height:1.75;direction:rtl}

.container{max-width:1180px;margin:0 auto;padding:0 20px}
h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }
.gradient-text{background:linear-gradient(135deg,var(--p),#7fffd4,var(--s));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn-p{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--p),var(--pd));color:#000;font-weight:800;font-size:1.05rem;padding:16px 36px;border-radius:14px;text-decoration:none;border:none;cursor:pointer;transition:var(--tr);box-shadow:0 12px 40px -8px rgba(0,212,170,.5);font-family:inherit}
.btn-p:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 50px -8px rgba(0,212,170,.65)}
.btn-s{display:inline-flex;align-items:center;gap:10px;background:0 0;color:var(--p);font-weight:700;font-size:1rem;padding:14px 32px;border-radius:14px;text-decoration:none;border:2px solid rgba(0,212,170,.4);cursor:pointer;transition:var(--tr);font-family:inherit}
.btn-s:hover{background:var(--pg);border-color:var(--p)}

/* Header and Hero (Will be duplicated in critical CSS but kept here for fallback) */
header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 0;backdrop-filter:blur(20px) saturate(180%);background:rgba(7,9,15,.75);border-bottom:1px solid var(--cb);transition:var(--tr)}
header .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-size:1.4rem;font-weight:800;text-decoration:none;color:var(--t)}
.logo img{height:34px}
.logo span{background:linear-gradient(90deg,var(--p),var(--s));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hnav{display:flex;align-items:center;gap:20px}
.hnav a{color:var(--tm);text-decoration:none;font-size:.9rem;font-weight:600;transition:var(--tr)}
.hnav a:hover{color:var(--p)}
.lang-link{background:var(--card);border:1px solid var(--cb);color:var(--t);padding:7px 18px;border-radius:99px;font-size:.88rem;font-weight:600;text-decoration:none;transition:var(--tr)}
.lang-link:hover{background:rgba(255,255,255,.1);border-color:var(--p);color:var(--p)}

.hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-20%;left:-10%;width:700px;height:700px;background:radial-gradient(circle,rgba(0,212,170,.12),transparent 65%);animation:orb1 8s ease-in-out infinite alternate;pointer-events:none}
[lang="ar"] .hero::before{left:auto;right:-10%;animation:orb1_ar 8s ease-in-out infinite alternate}
.hero::after{content:'';position:absolute;bottom:-10%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(108,99,255,.1),transparent 65%);animation:orb2 10s ease-in-out infinite alternate;pointer-events:none}
[lang="ar"] .hero::after{right:auto;left:-10%;animation:orb2_ar 10s ease-in-out infinite alternate}

@keyframes orb1{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.1)}}
@keyframes orb2{from{transform:translate(0,0) scale(1)}to{transform:translate(-30px,20px) scale(1.08)}}
@keyframes orb1_ar{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,30px) scale(1.1)}}
@keyframes orb2_ar{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,20px) scale(1.08)}}

.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;position:relative;z-index:1}
[lang="ar"] .hero .container{grid-template-columns:.9fr 1.1fr}
.hero-text{max-width:560px}
[lang="ar"] .hero-text{text-align:right}

.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,212,170,.1);border:1px solid rgba(0,212,170,.3);padding:6px 16px;border-radius:99px;font-size:.85rem;font-weight:600;color:var(--p);margin-bottom:24px}
.hero h1{font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:900;line-height:1.1;margin-bottom:22px}
[lang="ar"] .hero h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.25}
.hero-sub{font-size:1.15rem;color:var(--tm);max-width:500px;margin-bottom:36px}
[lang="ar"] .hero-sub{font-size:1.1rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:28px;margin-top:44px;padding-top:36px;border-top:1px solid var(--cb);flex-wrap:wrap}
.stat-num{font-size:1.7rem;font-weight:900;color:var(--p)}
.stat-lbl{font-size:.83rem;color:var(--tm);margin-top:2px}

.hero-visual{display:flex;justify-content:center;position:relative}
[lang="ar"] .hero-visual{order:-1}
.phone-m{position:relative;width:270px}
.phone-f{background:linear-gradient(145deg,#1a1f2e,#0d1117);border-radius:36px;padding:10px;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08),0 0 60px -15px rgba(0,212,170,.35);position:relative}
.phone-f img{width:100%;border-radius:28px;display:block}
.phone-glow{position:absolute;inset:-20px;background:radial-gradient(circle,rgba(0,212,170,.15),transparent 70%);border-radius:50%;z-index:-1}

.fb{position:absolute;background:rgba(13,17,23,.92);border:1px solid var(--cb);backdrop-filter:blur(12px);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;white-space:nowrap;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.fb1{top:15%;right:-28%;animation:fu 3s ease-in-out infinite alternate}
[lang="ar"] .fb1{right:auto;left:-28%}
.fb2{bottom:20%;left:-26%;animation:fd 3s ease-in-out infinite alternate 1.5s}
[lang="ar"] .fb2{left:auto;right:-26%}

@keyframes fu{from{transform:translateY(0)}to{transform:translateY(-8px)}}
@keyframes fd{from{transform:translateY(0)}to{transform:translateY(8px)}}
.fb-icon{font-size:1.2rem}
.fb-lbl{color:var(--tm);font-size:.7rem;display:block}
.fb-val{color:var(--p);font-size:.85rem}

/* Remaining Sections */
.trust{padding:40px 0;background:var(--bg2);border-top:1px solid var(--cb);border-bottom:1px solid var(--cb)}
.trust-row{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;text-align:center}
.trust-item{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1rem}
.trust-item span{color:var(--p)}

section{padding:90px 0;position:relative}
.sh{text-align:center;margin-bottom:64px}
.sh-label{display:inline-block;color:var(--p);font-weight:700;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px}
.sh h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:900;margin-bottom:14px}
.sh p{color:var(--tm);font-size:1.05rem;max-width:600px;margin:0 auto}

.features{background:var(--bg2)}
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fc{background:var(--card);border:1px solid var(--cb);border-radius:var(--r);padding:32px 26px;transition:var(--tr);position:relative;overflow:hidden}
[lang="ar"] .fc{text-align:right}
.fc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--p),var(--s));opacity:0;transition:var(--tr)}
.fc:hover{border-color:rgba(0,212,170,.3);transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 40px -10px rgba(0,212,170,.2)}
.fc:hover::before{opacity:1}
.fi{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:18px;background:var(--pg)}
[lang="ar"] .fi{margin-right:0;margin-left:auto}
.fc h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.fc p{color:var(--tm);font-size:.92rem;line-height:1.6}
[lang="ar"] .fc p{line-height:1.7}

.screens{overflow:hidden}
.st{display:flex;gap:18px;padding:20px 0 40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
[lang="ar"] .st{direction:ltr}
.st::-webkit-scrollbar{display:none}
.sc{min-width:230px;scroll-snap-align:start;border-radius:28px;overflow:hidden;border:2px solid var(--cb);box-shadow:0 20px 60px rgba(0,0,0,.4);transition:var(--tr);flex-shrink:0}
.sc:hover{transform:translateY(-6px) scale(1.02);border-color:rgba(0,212,170,.4)}
.sc img{width:100%;display:block}
.sc-lbl{background:rgba(13,17,23,.95);padding:10px 14px;font-size:.8rem;font-weight:600;color:var(--tm);text-align:center}

/* Video Section */
.video-wrapper{transition:var(--tr)}
.video-wrapper:hover{border-color:rgba(0,212,170,.4);box-shadow:0 20px 60px rgba(0,0,0,.5)}

.how{background:var(--bg2)}
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.step{text-align:center;padding:36px 22px;border-radius:var(--r);background:var(--card);border:1px solid var(--cb);transition:var(--tr)}
.step:hover{border-color:rgba(0,212,170,.3);transform:translateY(-4px)}
.sn{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--s));color:#000;font-size:1.3rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.step h3{font-size:1.1rem;font-weight:700;margin-bottom:10px}
.step p{color:var(--tm);font-size:.92rem}

.reviews{background:var(--bg)}
.rg{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.rc{background:var(--card);border:1px solid var(--cb);border-radius:var(--r);padding:28px;transition:var(--tr)}
[lang="ar"] .rc{text-align:right}
.rc:hover{border-color:rgba(0,212,170,.2);transform:translateY(-3px)}
.rc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.rc-name{font-weight:700;font-size:1rem}
.rc-loc{color:var(--tm);font-size:.82rem}
.rc-stars{color:#FFB800;font-size:.95rem;margin-bottom:10px}
.rc p{color:var(--tm);font-size:.92rem;line-height:1.6}
[lang="ar"] .rc p{line-height:1.7}

.article-s{background:var(--bg)}
.aw{max-width:820px;margin:0 auto}
[lang="ar"] .aw{text-align:right}
.aw h2{font-size:1.45rem;font-weight:800;margin:46px 0 14px;color:var(--p)}
.aw h3{font-size:1.1rem;font-weight:700;margin:28px 0 10px}
.aw p{color:var(--tm);font-size:1.02rem;line-height:1.8;margin-bottom:18px}
[lang="ar"] .aw p{line-height:1.85}
.aw ul,.aw ol{padding-inline-start:1.5rem;margin-bottom:22px}
[lang="ar"] .aw ul, [lang="ar"] .aw ol{padding-inline-start:0;padding-inline-end:1.5rem}
.aw li{color:var(--tm);font-size:1.02rem;margin-bottom:8px;line-height:1.65}
[lang="ar"] .aw li{line-height:1.7}
.aw strong{color:var(--t)}

.hb{background:var(--pg);border:1px solid rgba(0,212,170,.25);border-radius:16px;padding:22px 26px;margin:28px 0}
.hb p{margin:0;color:var(--t)}

.faq{background:var(--bg2)}
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border:1px solid var(--cb);border-radius:16px;margin-bottom:12px;overflow:hidden;background:var(--card);transition:var(--tr)}
.faq-item:hover{border-color:rgba(0,212,170,.2)}
/* Notice faq-q changed to button for a11y */
.faq-q{padding:18px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:1rem;user-select:none;width:100%;text-align:left;background:none;border:none;color:var(--t);font-family:inherit}
[lang="ar"] .faq-q{text-align:right}
.faq-q::after{content:'▸';transition:transform .3s;font-size:1.1rem;color:var(--p)}
[lang="ar"] .faq-q::after{content:'◂'}
.faq-item.open .faq-q::after{transform:rotate(90deg)}
[lang="ar"] .faq-item.open .faq-q::after{transform:rotate(-90deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-a{max-height:1000px} /* Increased max-height for longer answers */
.faq-a-inner{padding:0 24px 18px;color:var(--tm);font-size:.95rem;line-height:1.7}
[lang="ar"] .faq-a-inner{line-height:1.8;text-align:right}

.cmp{background:var(--bg);overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;border-radius:16px;overflow:hidden;margin:0 auto;max-width:900px;min-width:600px}
[lang="ar"] .cmp-table{direction:rtl}
.cmp-table th,.cmp-table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--cb)}
.cmp-table th{background:rgba(0,212,170,.1);color:var(--p);font-weight:700;font-size:.9rem}
.cmp-table td{font-size:.9rem;color:var(--tm)}
.cmp-table td:first-child{text-align:left;color:var(--t);font-weight:600}
[lang="ar"] .cmp-table td:first-child{text-align:right}
.cmp-table tr:hover{background:rgba(255,255,255,.02)}
.ck{color:var(--p);font-size:1.1rem}
.cx{color:#666;font-size:1.1rem}

.cta-s{padding:90px 0;background:linear-gradient(135deg,rgba(0,212,170,.08),rgba(108,99,255,.08));border-top:1px solid var(--cb);border-bottom:1px solid var(--cb);text-align:center}
.cta-s h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:900;margin-bottom:18px}
.cta-s p{color:var(--tm);font-size:1.1rem;margin-bottom:36px}
.cta-btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

footer{padding:60px 0 36px;background:var(--bg2);border-top:1px solid var(--cb)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;margin-bottom:50px}
.f-brand p{color:var(--tm);margin-top:14px;font-size:.92rem;max-width:300px}
.f-col h4{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tm2);margin-bottom:18px}
.f-col a{display:block;color:var(--tm);text-decoration:none;font-size:.92rem;margin-bottom:10px;transition:var(--tr)}
.f-col a:hover{color:var(--p)}
.f-bot{padding-top:28px;border-top:1px solid var(--cb);display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--tm2)}

.fade-up{opacity:0;transform:translateY(25px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

@media(max-width:992px){
  .hero .container, [lang="ar"] .hero .container{grid-template-columns:1fr !important;text-align:center}
  .hero-text, [lang="ar"] .hero-text{max-width:100%;text-align:center}
  .hero-visual, [lang="ar"] .hero-visual{order:0 !important;margin-top:36px;margin-bottom:20px}
  .hero-sub,.hero-cta{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-stats{justify-content:center;gap:20px}
  .fb1,.fb2{display:none}
  .fg{grid-template-columns:repeat(2,1fr)}
  .sg{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .rg{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .hnav a:not(.lang-link):not(.btn-p){display:none}
  [lang="ar"] .fc{text-align:center}
  [lang="ar"] .fi{margin:0 auto 18px}
}
@media(max-width:640px){
  section{padding:60px 0}
  .fg{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .f-bot{flex-direction:column;gap:10px;text-align:center}
  .hero h1{font-size:1.8rem}
  [lang="ar"] .hero h1{font-size:1.7rem}
  .hero-sub{font-size:1rem}
  .trust-row{gap:20px}
  .about-grid{grid-template-columns:1fr !important}
  .hero-stats > div { min-width: 120px; }
}
@media(max-width:480px){
  header .container { gap: 10px; }
  .logo span { display: none; }
  .hnav { gap: 10px; }
  .lang-link { padding: 6px 12px; font-size: 0.8rem; }
  .hnav .btn-p { padding: 8px 14px; font-size: 0.75rem; border-radius: 10px; }
}