html,body{margin:0;padding:0;background:#0E1015;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;background:#0E1015;color:#E9EBEF;min-height:100vh;overflow-x:hidden}
a{color:#F0872C;text-decoration:none}
a:hover{color:#E23A28}
img{display:block;max-width:100%}
input,textarea,button{font:inherit;color:inherit}
::placeholder{color:#6E757F}
@keyframes fsRing{0%{transform:scale(.5);opacity:.55}70%{opacity:0}100%{transform:scale(2.6);opacity:0}}
@keyframes fsGlow{0%,100%{opacity:.30;transform:scale(1)}50%{opacity:.62;transform:scale(1.07)}}
@keyframes fsDot{0%,100%{box-shadow:0 0 0 0 rgba(226,58,40,.55)}70%{box-shadow:0 0 0 12px rgba(226,58,40,0)}}
::selection{background:#E23A28;color:#fff}
html{scroll-behavior:smooth}

#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,#F0872C,#E23A28);z-index:200;pointer-events:none}

.wrap{max-width:1160px;margin:0 auto;padding:12px 22px}
header{position:sticky;top:0;z-index:80;background:rgba(14,16,21,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(233,235,239,.09);transition:box-shadow .3s ease}
header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}
header .inner{max-width:1160px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:18px;transition:padding .3s ease;direction:ltr}
header.scrolled .inner{padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:34px;height:34px;border-radius:9px;transition:width .3s ease,height .3s ease,transform .3s ease}
.brand:hover img{transform:rotate(-6deg) scale(1.06)}
header.scrolled .brand img{width:28px;height:28px}
.brand-name{font-size:17px;font-weight:600;letter-spacing:-.2px}
.brand-name span{color:#E23A28}
nav.mainnav{display:flex;align-items:center;gap:26px;margin-inline-start:auto;margin-inline-end:44px;font-size:13.5px;color:#99A0AB}
nav.mainnav a{position:relative;color:#99A0AB;padding-bottom:3px;transition:color .25s ease}
nav.mainnav a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#F0872C;transform:scaleX(0);transition:transform .25s ease}
nav.mainnav a:hover{color:#E9EBEF}
nav.mainnav a:hover::after{transform:scaleX(1)}
nav.mainnav .sep{color:#3C424B}
.langswitch{display:flex;gap:2px;padding:3px;background:#181B22;border:1px solid rgba(233,235,239,.10);border-radius:999px}
.langswitch button{border:0;background:transparent;color:#99A0AB;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:600;cursor:pointer;transition:background .25s ease,color .25s ease,transform .15s ease}
.langswitch button:hover{color:#E9EBEF}
.langswitch button:active{transform:scale(.9)}
.langswitch button.active{background:#E9EBEF;color:#14171E}

section{padding:104px 26px}
.grid2{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:76px;align-items:center}
.livepill{display:inline-flex;align-items:flex-start;gap:10px;max-width:480px;padding:10px 16px;background:rgba(20,23,30,.86);border:1px solid rgba(233,235,239,.10);border-radius:16px;font-size:13px;line-height:1.55;text-align:start;color:#B4BAC3}
.livepill.light{background:#F6F5F1;border-color:rgba(20,23,30,.10);color:#3A4048}
.livepill .dot{margin-top:5px;flex:none}
.dot{position:relative;display:inline-block;width:9px;height:9px}
.dot .core{position:absolute;inset:0;border-radius:50%;background:#E23A28}
.dot .ring{position:absolute;inset:0;border-radius:50%;background:#E23A28;animation:fsRing 2.4s ease-out infinite}

[data-reveal]{transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1)}
[data-reveal].pre{opacity:0;transform:translateY(22px)}
[data-reveal].in{opacity:1;transform:none}

.imgcard{width:min(300px,74vw);border-radius:40px;padding:10px;background:#14171E;box-shadow:0 34px 70px -22px rgba(20,23,30,.40);transition:transform .18s ease,box-shadow .4s ease;will-change:transform}
.imgcard.dark{background:#181B22;border:1px solid rgba(233,235,239,.10);box-shadow:0 34px 70px -26px rgba(0,0,0,.75)}
.imgcard:hover{box-shadow:0 44px 90px -20px rgba(20,23,30,.5)}
.imgcard.dark:hover{box-shadow:0 44px 90px -24px rgba(0,0,0,.85)}
.imgcard img{width:100%;border-radius:31px}

.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.step-card{background:#14171E;border:1px solid rgba(233,235,239,.10);border-radius:18px;padding:24px;transition:transform .3s ease,border-color .3s ease,background .3s ease}
.step-card:hover{transform:translateY(-6px);border-color:rgba(240,135,44,.4);background:#171B23}
.step-num{width:30px;height:30px;border-radius:9px;background:rgba(240,135,44,.14);color:#F0872C;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-bottom:16px;transition:transform .3s ease,background .3s ease}
.step-card:hover .step-num{transform:scale(1.12) rotate(-6deg);background:rgba(240,135,44,.24)}

.beta-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card-ts{background:linear-gradient(160deg,#1B1216,#14171E);border:1px solid rgba(226,58,40,.28);border-radius:22px;padding:30px}
.card-fb{background:#14171E;border:1px solid rgba(233,235,239,.10);border-radius:22px;padding:30px}
.form-col{display:flex;flex-direction:column;gap:12px}
.form-col input,.form-col textarea{padding:14px 16px;background:#0E1015;border:1px solid rgba(233,235,239,.14);border-radius:13px;font-size:15px;outline:none;width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.form-col input:focus,.form-col textarea:focus{border-color:#F0872C;box-shadow:0 0 0 3px rgba(240,135,44,.15)}
.form-col textarea{resize:vertical}
.form-col input.err,.form-col textarea.err{border-color:#E23A28}
@keyframes fsShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.form-col input.err,.form-col textarea.err{animation:fsShake .4s ease}
.err-msg{font-size:11.5px;color:#F0872C;margin-top:-6px}
.btn-primary{padding:15px;background:#E23A28;border:0;border-radius:13px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 10px 26px rgba(226,58,40,.28);transition:transform .2s ease,box-shadow .2s ease}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(226,58,40,.4)}
.btn-primary:active{transform:translateY(0) scale(.97)}
.btn-secondary{padding:14px;background:rgba(233,235,239,.08);border:1px solid rgba(233,235,239,.16);border-radius:13px;font-size:14.5px;font-weight:600;cursor:pointer;color:#E9EBEF;transition:transform .2s ease,background .2s ease}
.btn-secondary:hover{transform:translateY(-2px);background:rgba(233,235,239,.14)}
.btn-secondary:active{transform:translateY(0) scale(.97)}
@keyframes fsPopIn{0%{opacity:0;transform:scale(.92) translateY(8px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.done-box{padding:16px;border-radius:14px;background:rgba(63,169,122,.12);border:1px solid rgba(63,169,122,.3);color:#7FCBA8;font-size:14px;animation:fsPopIn .45s cubic-bezier(.2,.8,.3,1)}

footer{border-top:1px solid rgba(233,235,239,.09);background:#0B0D11}
footer .inner{max-width:1160px;margin:0 auto;padding:22px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;font-size:11.5px;color:#7A818A}
footer .fnotice{flex-basis:100%;order:-1;font-size:12px;line-height:1.7;color:#99A0AB;padding-bottom:14px;border-bottom:1px solid rgba(233,235,239,.08)}
footer .flogo{display:flex;align-items:center;gap:9px}
footer .flogo img{width:20px;height:20px;border-radius:6px}
footer .fname{font-size:12px;font-weight:600;color:#E9EBEF}
footer .fname span{color:#E23A28}
footer .fauthor{line-height:1.7;font-size:12px;color:#B4BAC3}
footer .flinks{display:flex;align-items:center;gap:20px;margin-inline-start:auto}
footer .flinks a{display:flex;align-items:center;gap:7px;color:#7A818A;font-size:12px}

[dir="rtl"] .brand-name, [dir="rtl"] footer .fname { direction:ltr; display:inline-block; }

.hero-content{padding:88px 22px 76px}
.section-tight{padding:82px 22px}
.section-tight-b{padding-bottom:90px}

@media (max-width:700px){
  .section-tight{padding:56px 18px}
  .section-tight-b{padding-bottom:56px}
  header .inner{flex-wrap:wrap;row-gap:8px;padding:10px 16px}
  nav.mainnav{order:3;flex-basis:100%;justify-content:center;margin:4px 0 0;gap:16px;font-size:12.5px}
  .langswitch{margin-inline-start:auto}
  .brand-name{font-size:15px}
  .brand img{width:28px;height:28px}

  .hero-content{padding:52px 18px 44px}
  section{padding:56px 18px}
  .grid2{grid-template-columns:1fr;gap:40px}
  .beta-grid{gap:16px}
  .card-ts,.card-fb{padding:22px}
  .steps-grid{gap:14px}

  footer .inner{flex-direction:column;align-items:flex-start;gap:14px;padding:18px}
  footer .flinks{margin-inline-start:0;flex-wrap:wrap;gap:14px 20px}
}

@media (max-width:380px){
  .langswitch button{padding:5px 8px;font-size:10.5px}
  nav.mainnav{gap:10px;font-size:11.5px}
}

section[id]{scroll-margin-top:80px}

.cta-btn{display:inline-block;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.cta-btn:hover{transform:translateY(-3px)}
.cta-btn:active{transform:translateY(-1px) scale(.98)}
.cta-main:hover{box-shadow:0 18px 40px rgba(226,58,40,.48)}
.cta-alt:hover{background:rgba(233,235,239,.13)!important}

.hero-dot{transition:transform .35s ease}

.coming-section{text-align:center}
.coming-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border:1px solid rgba(226,58,40,.32);background:rgba(226,58,40,.09);border-radius:999px;font-size:12px;color:#E9EBEF;margin-bottom:30px}
.coming-tag-dot{width:6px;height:6px;border-radius:50%;background:#E23A28;flex:none;animation:fsRing2 2.2s ease-out infinite}
@keyframes fsRing2{0%,100%{box-shadow:0 0 0 0 rgba(226,58,40,.5)}70%{box-shadow:0 0 0 8px rgba(226,58,40,0)}}
.coming-title{margin:0 0 22px;font-size:clamp(46px,9vw,104px);font-weight:800;line-height:1.04;letter-spacing:-2px}
.coming-line1,.coming-line2{display:block}
.coming-line1{background:linear-gradient(180deg,#FFFFFF,#AEB4BE);-webkit-background-clip:text;background-clip:text;color:transparent}
.coming-line2{background:linear-gradient(90deg,#FCE3C6,#F0872C 55%,#E23A28);-webkit-background-clip:text;background-clip:text;color:transparent}
.coming-sub{max-width:520px;margin:0 auto 30px;color:#99A0AB;font-size:14.5px;line-height:1.75}
.coming-form{display:flex;gap:10px;max-width:480px;margin:0 auto 14px;flex-wrap:wrap;justify-content:center}
.coming-form input{flex:1;min-width:220px;padding:14px 20px;background:#14171E;border:1px solid rgba(233,235,239,.14);border-radius:999px;font-size:14px;outline:none;color:#E9EBEF;transition:border-color .2s ease,box-shadow .2s ease}
.coming-form input:focus{border-color:#F0872C;box-shadow:0 0 0 3px rgba(240,135,44,.15)}
.coming-form input.err{border-color:#E23A28;animation:fsShake .4s ease}
.coming-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:999px;border:0;background:#E23A28;color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:0 10px 26px rgba(226,58,40,.3);transition:transform .2s ease,box-shadow .2s ease}
.coming-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(226,58,40,.4);color:#fff}
.coming-btn:active{transform:translateY(0) scale(.97)}
.coming-done{max-width:420px;margin:0 auto 14px;text-align:center}
.coming-err{text-align:center;margin:-4px auto 10px}

@keyframes floatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.float-download-btn{
  position:fixed;
  bottom:22px;
  inset-inline-end:22px;
  z-index:150;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 20px;
  border-radius:999px;
  background:#F0872C;
  color:#fff;
  font-size:14px;
  font-weight:700;
  box-shadow:0 12px 30px rgba(240,135,44,.4);
  animation:floatBob 2.8s ease-in-out infinite;
  transition:box-shadow .25s ease,transform .25s ease;
}
.float-download-btn:hover{animation-play-state:paused;box-shadow:0 16px 38px rgba(240,135,44,.52);color:#fff;transform:translateY(-3px) scale(1.03)}
.float-download-btn:active{animation-play-state:paused;transform:translateY(0) scale(.96)}

@media (max-width:520px){
  .float-download-btn{bottom:16px;inset-inline-end:16px;padding:12px 16px;font-size:13px}
  .coming-form{flex-direction:column;align-items:stretch}
}