*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Cairo',sans-serif;background:#f5f8fd;color:#222;line-height:1.8}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin:auto}
header{position:sticky;top:0;background:#fff;z-index:999;box-shadow:0 4px 18px rgba(0,0,0,.08)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
nav{display:flex;gap:28px}
nav a{font-weight:700;transition:.3s}
nav a:hover{color:#0d5be1}
.logo img{height:65px}
.call-btn,.btn1,.btn2{padding:14px 28px;border-radius:12px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:.3s}
.call-btn,.btn1{background:#0d5be1;color:#fff}
.btn2{background:#25D366;color:#fff}
.call-btn:hover,.btn1:hover,.btn2:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.15)}
.hero{position:relative;background:linear-gradient(135deg,#0d5be1,#082a63);padding:90px 0;color:#fff;overflow:hidden}
.overlay{position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(255,255,255,.15),transparent 55%)}
.hero-content{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.badge{display:inline-block;background:#fff;color:#0d5be1;padding:8px 16px;border-radius:30px;font-weight:700;margin-bottom:20px}
.hero h1{font-size:58px;line-height:1.2;margin-bottom:20px}
.hero h1 span{display:block;color:#8fd0ff}
.hero p{font-size:20px;margin-bottom:30px}
.hero-buttons{display:flex;gap:15px;flex-wrap:wrap}
.hero-image img{border-radius:22px;box-shadow:0 25px 60px rgba(0,0,0,.25)}
.features .container,.devices-grid,.why-grid,.testimonial-grid,.footer-grid,.counter{display:grid;gap:25px}
.features .container{grid-template-columns:repeat(4,1fr);margin-top:-50px}
.feature,.device-card,.why-card,.testimonial-card{background:#fff;border-radius:18px;padding:28px;box-shadow:0 10px 25px rgba(0,0,0,.08);transition:.35s;text-align:center}
.feature:hover,.device-card:hover,.why-card:hover,.testimonial-card:hover{transform:translateY(-8px)}
.feature i,.why-card i{font-size:42px;color:#0d5be1;margin-bottom:15px}
.about,.devices,.why-us,.testimonials,.faq{padding:90px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-img img{border-radius:18px}
.section-title{text-align:center;margin-bottom:50px}
.section-title h2{font-size:42px;color:#082a63;margin-bottom:10px}
.devices-grid{grid-template-columns:repeat(3,1fr)}
.device-card img{width:100px;height:100px;object-fit:contain;margin:0 auto 20px}
.device-card a{display:inline-block;background:#0d5be1;color:#fff;padding:10px 22px;border-radius:10px;margin-top:15px}
.why-grid{grid-template-columns:repeat(3,1fr)}
.counter{grid-template-columns:repeat(4,1fr);padding:70px 0;background:#0d5be1;color:#fff;text-align:center}
.counter-box h2{font-size:46px}
.cta{padding:90px 0;background:linear-gradient(135deg,#0d5be1,#082a63);color:#fff;text-align:center}
.cta-buttons{display:flex;justify-content:center;gap:20px;margin-top:25px}
.testimonial-grid{grid-template-columns:repeat(3,1fr)}
.stars{color:#ffc107;font-size:24px;margin-bottom:15px}
.client{display:flex;align-items:center;gap:12px;margin-top:20px}
.client img{width:55px;height:55px;border-radius:50%}
.faq-box{display:grid;gap:18px}
.faq-item{background:#fff;padding:22px;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.06)}
footer{background:#082a63;color:#fff;padding:70px 0 25px}
.footer-grid{grid-template-columns:2fr 1fr 1fr}
.footer-grid ul{list-style:none}
.footer-grid li{margin:10px 0}
.copyright{text-align:center;margin-top:35px;border-top:1px solid rgba(255,255,255,.15);padding-top:20px}
.floating-whatsapp{position:fixed;left:25px;bottom:25px;width:65px;height:65px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:0 10px 25px rgba(0,0,0,.25)}
@media(max-width:992px){
.hero-content,.about-grid,.features .container,.devices-grid,.why-grid,.testimonial-grid,.footer-grid,.counter{grid-template-columns:1fr 1fr}
nav{display:none}
.hero h1{font-size:42px}
}
@media(max-width:576px){
.hero-content,.about-grid,.features .container,.devices-grid,.why-grid,.testimonial-grid,.footer-grid,.counter{grid-template-columns:1fr}
.hero{text-align:center}
.hero h1{font-size:34px}
.hero-buttons,.cta-buttons{justify-content:center;flex-direction:column}
}
/* إصلاح قسم الهيرو */
.hero{
    position: relative;
    overflow: hidden;
    padding-top: 180px;
    padding-bottom: 100px;
    z-index: 1;
}

/* الهيدر فوق كل حاجة */
header{
    position: sticky;
    top: 0;
    z-index: 99999;
}

/* محتوى الهيرو */
.hero-content{
    position: relative;
    z-index: 2;
}

/* الصورة */
.hero-image{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===========================
   Articles Section
=========================== */

.articles-section{
    padding:90px 0;
    background:#f7f9fc;
}

.articles-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
    margin-top:50px;
}

.article-card{
    background:#fff;
    padding:30px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
    border-top:5px solid #0d5be1;
}

.article-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(13,91,225,.18);
}

.article-card h3{
    color:#0d5be1;
    font-size:26px;
    margin-bottom:18px;
}

.article-card p{
    color:#555;
    line-height:2;
    font-size:17px;
}
/* ===========================
   تحسين كروت الأجهزة
=========================== */

.devices-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(420px,1fr));
    gap:35px;
    justify-content:center;
    align-items:stretch;
    margin-top:50px;
}

.device-card{
    background:#fff;
    border-radius:22px;
    padding:40px 35px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.4s;
    border:1px solid #edf2ff;
    position:relative;
    overflow:hidden;
}

.device-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:#0d5be1;
}

.device-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(13,91,225,.18);
}

.device-card img{
    width:180px !important;
    height:180px !important;
    object-fit:contain;
    margin:0 auto 25px;
    transition:.4s;
}

.device-card:hover img{
    transform:scale(1.08);
}

.device-card h3{
    font-size:34px;
    color:#082a63;
    margin-bottom:15px;
}

.device-card p{
    font-size:18px;
    color:#666;
    line-height:1.8;
    margin-bottom:25px;
}

.device-card a{
    display:inline-block;
    padding:15px 40px;
    border-radius:12px;
    background:#0d5be1;
    color:#fff;
    font-weight:bold;
    transition:.3s;
}

.device-card a:hover{
    background:#083d99;
    transform:scale(1.05);
}

/* تابلت */

@media(max-width:992px){

.devices-grid{
    grid-template-columns:repeat(2,1fr);
}

}

/* موبايل */

@media(max-width:768px){

.devices-grid{
    grid-template-columns:1fr;
}

.device-card{
    padding:30px 20px;
}

.device-card img{
    width:140px !important;
    height:140px !important;
}

.device-card h3{
    font-size:28px;
}

}
/* ===============================
   Articles Full Width Override
================================ */

.articles-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:30px !important;
    margin-top:60px;
}

.article-card{
    width:100% !important;
    max-width:100% !important;
    padding:40px 45px !important;
    background:#fff;
    border-radius:20px;
    border-right:7px solid #0d5be1;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s;
    text-align:right;
}

.article-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(13,91,225,.18);
}

.article-card h3{
    font-size:34px !important;
    color:#0d5be1;
    margin-bottom:20px;
    font-weight:700;
}

.article-card p{
    font-size:20px !important;
    line-height:2.2;
    color:#555;
    margin:0;
}

/* موبايل */

@media(max-width:768px){

    .article-card{
        padding:25px !important;
    }

    .article-card h3{
        font-size:28px !important;
    }

    .article-card p{
        font-size:18px !important;
        line-height:2;
    }

}
/* توسيط الإحصائيات */
.counter {
    padding: 80px 20px;
}

.counter .container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    flex-wrap: wrap;
}

.counter-box{
    width: 240px;
    min-height: 180px;
    background: #0b4edb;
    color: #fff;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.counter-box h2{
    font-size: 55px;
    margin-bottom: 12px;
}

.counter-box span{
    font-size: 22px;
    font-weight: 600;
}

/* الموبايل */
@media (max-width:768px){

.counter .container{
    flex-direction: column;
    gap:20px;
}

.counter-box{
    width:100%;
    max-width:330px;
}

}