:root{
  --bg:#050505;
  --bg-2:#0a0a0a;
  --card:#111214;
  --card-2:#161719;
  --border:#232427;
  --text:#fff;
  --muted:#9aa0a6;
  --accent:#FF6B00;
  --accent-2:#FF8A3D;
  --radius:16px;
  --radius-sm:10px;
  --container:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.js-theme{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans Arabic','Cairo',system-ui,-apple-system,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem}

.js-container{max-width:var(--container);margin-inline:auto;padding-inline:20px}

/* ===== Header ===== */
.js-header{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.js-header__inner{display:flex;align-items:center;gap:20px;height:68px}
.js-logo__text{font-weight:800;font-size:20px}
.js-nav{margin-inline-start:auto}
.js-menu{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.js-menu a{color:var(--muted);font-size:15px;transition:color .2s}
.js-menu a:hover{color:#fff}
.js-header__actions{display:flex;gap:10px;margin-inline-start:20px}

/* ===== Buttons ===== */
.js-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 20px;border-radius:var(--radius-sm);
  font-weight:700;font-size:15px;cursor:pointer;
  border:1px solid transparent;transition:.2s;
}
.js-btn--ghost{
  border-color:var(--accent);color:var(--accent);
  background:transparent;
}
.js-btn--ghost:hover{background:rgba(0,224,160,.1)}
.js-btn--primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#001b14;
  box-shadow:0 0 0 1px rgba(0,224,160,.3), 0 8px 30px rgba(0,224,160,.25);
}
.js-btn--primary:hover{transform:translateY(-2px)}
.js-btn--lg{padding:16px 32px;font-size:16px;border-radius:12px}

/* ===== Hero ===== */
.js-hero{padding:80px 0 60px;text-align:center;position:relative;overflow:hidden}
.js-hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(0,224,160,.12), transparent 60%);
  pointer-events:none;
}
.js-hero__inner{position:relative;z-index:1;max-width:820px;margin-inline:auto}
.js-badge{
  display:inline-block;font-size:13px;color:var(--muted);
  padding:6px 14px;border:1px solid var(--border);border-radius:999px;
  margin-bottom:22px;
}
.js-hero__title{
  font-size:clamp(32px,5vw,60px);
  font-weight:900;line-height:1.15;margin:0 0 18px;
  letter-spacing:-.5px;
}
.js-hero__sub{color:var(--muted);font-size:17px;max-width:640px;margin:0 auto 30px}
.js-hero__note{color:#666;font-size:12px;margin-top:20px}

.js-hero__visual{margin-top:60px;display:flex;justify-content:center}

/* Platform badges */
.js-platforms{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;max-width:640px;margin-inline:auto}
.js-platforms--stack{flex-direction:column;align-items:stretch;max-width:260px}
.js-platform{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;
  background:var(--card-2);border:1px solid var(--border);
  color:#e6e7e9;font-weight:700;font-size:14px;
  box-shadow:0 12px 40px rgba(255,107,0,.08);
}

/* ===== Sections ===== */
.js-section{padding:80px 0}
.js-section__head{text-align:center;max-width:720px;margin:0 auto 40px}
.js-chip{
  display:inline-block;font-size:13px;color:var(--accent);
  padding:5px 12px;border:1px solid rgba(0,224,160,.35);border-radius:999px;
  margin-bottom:14px;
}
.js-h2{font-size:clamp(24px,3.4vw,38px);font-weight:800;line-height:1.25;margin:0 0 14px}
.js-h2--xl{font-size:clamp(30px,4.5vw,52px);font-weight:900}
.js-h3{font-size:20px;font-weight:700;margin:0 0 8px}
.js-lead{color:var(--muted);font-size:16px}

/* ===== Services ===== */
.js-dash-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;max-width:1000px;margin-inline:auto;
}
.js-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.js-service{
  background:var(--card-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:20px;
}
.js-service h3{margin:0 0 8px}
.js-service p{color:var(--muted);font-size:14px;margin:0}

/* ===== Feature ===== */
.js-feature__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.js-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.js-list li{padding-inline-start:28px;position:relative;color:#cfd2d6}
.js-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.7em;
  width:14px;height:2px;background:var(--accent);border-radius:2px;
}

/* ===== Steps ===== */
.js-steps__list{display:grid;gap:60px;max-width:1000px;margin-inline:auto}
.js-step{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.js-step:nth-child(even) .js-step__text{order:2}
.js-step__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,224,160,.12);color:var(--accent);
  font-weight:800;margin-bottom:14px;
}
.js-step__visual{
  height:280px;border-radius:var(--radius);
  background:linear-gradient(135deg,#141518,#0c0d0f);
  border:1px solid var(--border);position:relative;overflow:hidden;
}
.js-step__visual::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 40%, rgba(0,224,160,.18), transparent 60%);
}

/* ===== Final CTA ===== */
.js-cta-final{text-align:center;padding:100px 0}
.js-cta-final__inner{max-width:760px;margin-inline:auto}
.js-cta-final .js-app-icons{margin-bottom:32px}
.js-cta-final .js-lead{margin-bottom:32px}

/* ===== FAQ ===== */
.js-faq__inner{max-width:820px;margin-inline:auto}
.js-faq__list{display:grid;gap:12px}
.js-faq__item{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:18px 22px;
}
.js-faq__item summary{
  cursor:pointer;font-weight:700;font-size:16px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.js-faq__item summary::-webkit-details-marker{display:none}
.js-faq__item summary::after{content:"+";color:var(--accent);font-size:20px}
.js-faq__item[open] summary::after{content:"−"}
.js-faq__item p{color:var(--muted);margin:14px 0 0;font-size:15px}

/* ===== Footer ===== */
.js-footer{border-top:1px solid var(--border);padding:40px 0;margin-top:60px}
.js-footer__inner{display:grid;gap:20px;text-align:center;justify-items:center}
.js-menu--footer{display:flex;gap:20px;list-style:none;padding:0;margin:0}
.js-footer__copy{color:#666;font-size:13px;margin:0}

/* ===== RTL fixes ===== */
body.is-rtl{direction:rtl;text-align:right}
body.is-rtl .js-list li{padding-inline-start:0;padding-inline-end:28px}
body.is-rtl .js-list li::before{inset-inline-start:auto;inset-inline-end:0}
body.is-rtl .js-step:nth-child(even) .js-step__text{order:0}

/* ===== Responsive ===== */
@media (max-width:900px){
  .js-feature__grid,.js-step{grid-template-columns:1fr;gap:30px}
  .js-step:nth-child(even) .js-step__text{order:0}
  .js-services-grid{grid-template-columns:repeat(2,1fr)}
  .js-nav{display:none}
}
@media (max-width:520px){
  .js-services-grid{grid-template-columns:1fr}
  .js-platform{padding:10px 16px;font-size:13px}
  .js-section{padding:60px 0}
}