:root{--bg:#0b1320;--primary:#1D3557;--accent:#00B4D8;--text:#ffffff;--muted:#a9b3c7;--card:#13243a}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#0b1320 0%,#0f1d34 100%);color:var(--text)}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin:0 auto}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}
.grid{display:grid;gap:2rem}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid.two,.grid.three{grid-template-columns:1fr}}

.skip-link{position:absolute;left:-9999px} .skip-link:focus{left:1rem;top:1rem;z-index:999;background:#fff;color:#000;padding:.5rem 1rem;border-radius:.5rem}

.nav{position:sticky;top:0;backdrop-filter:blur(6px);background:rgba(13,22,38,.5);border-bottom:1px solid rgba(255,255,255,.08);z-index:50}
.nav .brand{display:flex;gap:.5rem;align-items:center;font-weight:700}
.nav .nav-links{display:flex;gap:1rem;list-style:none;margin:0;padding:1rem 0;margin-left:auto}
.nav .container{gap:1rem}
#langToggle{flex:0 0 auto;position:relative;z-index:2}
.nav .nav-links a{color:var(--muted);text-decoration:none} .nav .nav-links a:hover{color:var(--text)}

.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:.6rem;text-decoration:none;font-weight:600;border:1px solid transparent;transition:.2s}
.btn .icon{height:1em;width:1em;vertical-align:-2px;margin-right:.4rem}
.btn.primary{background:var(--accent);color:#001018}
.btn.secondary{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
.btn:hover{transform:translateY(-1px)}

.hero{position:relative;overflow:hidden;padding:6rem 0}
.hero-bg{position:absolute;inset:-20%;background:radial-gradient(800px 400px at 10% 10%,rgba(0,180,216,.25),transparent 60%),radial-gradient(800px 400px at 90% 0%,rgba(29,53,87,.6),transparent 60%);filter:blur(40px);z-index:-1}
.hero .sub{color:var(--muted);max-width:50ch}
.actions{display:flex;gap:1rem;margin:1rem 0 1.25rem}
.store-badges{display:flex;gap:1rem}
.store-badges .badge{position:relative;display:inline-block}
.store-badges .badge img{display:block}
.store-badges .tag{position:absolute;right:6px;bottom:-10px;background:#2b3c56;color:#fff;border:1px solid rgba(255,255,255,.16);padding:.2rem .5rem;border-radius:.5rem;font-size:.7rem;letter-spacing:.3px}
.store-badges .badge.available .tag{background:#13391f;border-color:#2e7d32}
.store-badges .badge .live{background:#1f8b4c}
.counters{display:flex;gap:2rem;margin-top:1rem;color:#cfe8ff}
.counter span{font-weight:800;font-size:1.6rem;color:#fff}
.mockup{border-radius:1.2rem;box-shadow:0 20px 60px rgba(0,0,0,.45);background:#0d1b2a;border:1px solid rgba(255,255,255,.08)}

/* Device (iPad) slider */
.device.ipad{position:relative;width:min(520px,100%);aspect-ratio:4/3;border-radius:1.6rem;background:#0d1b2a;box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 0 0 12px #0006;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.device.ipad .bezel{position:absolute;inset:0;border-radius:1.6rem;box-shadow:inset 0 0 0 20px rgba(255,255,255,0.02)}
.device.ipad .screen{position:absolute;inset:14px;border-radius:1rem;overflow:hidden;background:#081220}
.slider{display:flex;width:100%;height:100%;transition:transform .5s ease;direction:ltr}
.slide{min-width:100%;height:100%}
.slide img{width:100%;height:100%;object-fit:cover}
.dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:.4rem}
.dots button{width:8px;height:8px;border-radius:999px;border:none;background:#2b3c56;cursor:pointer}
.dots button.active{background:var(--accent)}

.features{padding:4rem 0;background:linear-gradient(180deg,#0f1d34 0%,#0b1320 100%)}
.card{background:var(--card);padding:1.25rem;border-radius:1rem;border:1px solid rgba(255,255,255,.06);box-shadow:0 10px 30px rgba(0,0,0,.25);position:relative;overflow:hidden}
.card h3{margin:.75rem 0 .25rem}
.card p{color:var(--muted)}
.card img.cover{width:100%;height:140px;object-fit:cover;border-radius:.75rem;margin:.25rem 0 .75rem;filter:saturate(1.1);content-visibility:auto}
.card .more{opacity:0;transform:translateY(-4px);transition:opacity .18s ease, transform .18s ease;margin-top:.25rem;will-change:opacity,transform}
.card:hover .more{opacity:1;transform:none}
.card .learn{display:inline-flex;gap:.4rem;align-items:center;margin-top:.6rem;color:var(--accent);text-decoration:none;font-weight:600}
.card .learn:hover{text-decoration:underline}
.card:target{outline:2px solid var(--accent);box-shadow:0 0 0 6px rgba(0,180,216,.15)}

.about,.how,.testimonials,.pricing,.faq,.blog,.contact{padding:4rem 0}
.rounded{border-radius:1rem}.shadow{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.steps li{background:var(--card);padding:1rem 1rem 1rem 3rem;border-radius:.75rem;position:relative;border:1px solid rgba(255,255,255,.06)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:1rem;top:1rem;background:var(--accent);color:#001018;width:1.5rem;height:1.5rem;border-radius:.4rem;display:grid;place-items:center;font-weight:700}

.testimonial{background:var(--card);padding:1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.06)}
.testimonial img{width:100%;height:180px;object-fit:cover;border-radius:.75rem;margin-bottom:.5rem}
.testimonial blockquote{margin:0;color:#e6f2ff}

.billing-toggle{display:flex;gap:.75rem;align-items:center;justify-content:center;margin-bottom:1.25rem;color:var(--muted)}
.switch{position:relative;display:inline-block;width:46px;height:26px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#2b3c56;border-radius:999px;transition:.2s}
.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider:before{transform:translateX(20px)}

.price-card{background:var(--card);border:1px solid rgba(255,255,255,.06);padding:1.25rem;border-radius:1rem;display:grid;gap:.75rem}
.price-card.featured{outline:2px solid var(--accent);transform:scale(1.02)}
.price{font-size:2rem;font-weight:800}

.accordion details{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:.75rem;padding:.75rem}
.accordion summary{cursor:pointer;font-weight:600}
.accordion p{color:var(--muted);margin:.5rem 0 0}

.form{display:grid;gap:.75rem}
.form input,.form textarea{padding:.8rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.12);background:#0e1a2c;color:#fff}

.footer{border-top:1px solid rgba(255,255,255,.08);padding:2rem 0;color:var(--muted);text-align:center}

.whatsapp{position:fixed;right:1rem;bottom:1rem;background:#25D366;color:#001018;padding:.9rem 1rem;border-radius:999px;text-decoration:none;font-weight:700;box-shadow:0 10px 20px rgba(0,0,0,.35)}

/* RTL support */
html[dir="rtl"] body{font-family:'Tajawal','Outfit',system-ui,sans-serif}
html[dir="rtl"] .steps li{padding:1rem 3rem 1rem 1rem}
html[dir="rtl"] .steps li::before{left:auto;right:1rem}