:root{
  --bg:#f7fffb; --card:#ffffff; --green:#15b765; --green2:#007e6f; --dark:#003c34;
  --text:#062d29; --muted:#6f7f7a; --purple:#5140c9; --border:#dcefe7;
  --shadow:0 24px 55px rgba(0,77,52,.10); --radius:28px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:'Cairo',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;padding-bottom:0} a{text-decoration:none;color:inherit} img{max-width:100%;display:block}.container{width:min(1240px,calc(100% - 44px));margin-inline:auto}.site-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.blob{position:absolute;border-radius:50%;background:rgba(21,183,101,.08)}.blob-a{width:390px;height:390px;left:-130px;top:135px}.blob-b{width:410px;height:410px;right:-150px;top:510px}.blob-c{width:320px;height:320px;left:8%;bottom:-160px}
.topbar{position:sticky;top:0;z-index:50;background:rgba(247,255,251,.83);backdrop-filter:blur(16px);border-bottom:1px solid rgba(220,239,231,.6)}.topbar-inner{height:92px;display:flex;align-items:center;gap:34px}.logo{margin-inline-start:auto}.logo img{width:58px}.desktop-nav{display:flex;align-items:center;gap:46px;font-weight:800;color:#575f5d}.nav-link{position:relative;padding:10px 0}.nav-link.active{color:var(--green)}.nav-link.active:after{content:"";position:absolute;right:18%;bottom:0;width:65%;height:4px;background:var(--green);border-radius:999px}.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:28px}.phone-link{display:flex;align-items:center;gap:13px;color:#004d43;font-weight:900;font-size:22px;direction:ltr}.phone-link img{width:25px}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:16px;padding:16px 28px;font-weight:900;font-size:17px;transition:.25s ease;cursor:pointer;white-space:nowrap}.btn img{width:21px}.btn-primary{background:linear-gradient(135deg,#1dda72,#08766c);color:white;box-shadow:0 18px 38px rgba(16,166,97,.26)}.btn-primary:hover{transform:translateY(-3px)}.btn-outline{background:white;border:1px solid #9bdac1;color:#079957}.menu-btn{display:none;width:56px;height:56px;border:0;background:transparent;padding:10px;cursor:pointer}.menu-btn span{display:block;height:4px;border-radius:20px;background:var(--purple);margin:8px 0}.mobile-menu{display:none}
.page{display:none;animation:pageIn .25s ease}.page.active{display:block}@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.hero{min-height:720px;display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:60px;padding-top:42px}.hero-content{text-align:center}.eyebrow{font-weight:900;color:var(--green);font-size:28px;margin:0 0 18px}.hero h1{font-size:70px;line-height:1.24;margin:0;font-weight:900;letter-spacing:-2px;color:#022b27}.hero h1 span{color:var(--green)}.hero-text{font-size:28px;line-height:2;color:#6d7774;margin:28px auto 42px;max-width:640px}.hero-buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.grid-dot{font-size:26px}.hero-visual{display:flex;justify-content:center}.hero-visual img{width:min(670px,100%);filter:drop-shadow(0 28px 45px rgba(0,60,52,.12))}.simple-card{min-height:145px;background:rgba(255,255,255,.86);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:var(--radius);display:grid;grid-template-columns:170px 1fr 170px;align-items:center;text-align:center;padding:26px 42px;margin-top:20px}.whatsapp-circle{width:108px;height:108px;margin:auto;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);background:#fff}.whatsapp-circle img{width:74px}.simple-card h2{font-size:36px;margin:0 0 8px;color:#004d43}.simple-card p{font-size:18px;line-height:1.8;color:#66716f;margin:0}.trend{font-size:58px;color:#55bd74;font-weight:900}.section{padding:74px 0 18px}.section-title{text-align:center;margin-bottom:38px}.section-title h2,.page-head h1{font-size:44px;color:#004d43;margin:0;font-weight:900}.section-title span{display:block;width:110px;height:5px;background:linear-gradient(90deg,#99ddc4 0 45%,var(--green) 45%);border-radius:20px;margin:16px auto 0}.tech-grid{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}.tech-card{width:142px;height:142px;border:1px solid var(--border);border-radius:20px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-shadow:0 20px 38px rgba(0,70,50,.08);font-weight:900;color:#004d43}.tech-card img{width:56px;height:56px;object-fit:contain}.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.test-card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:28px 34px;box-shadow:var(--shadow);min-height:235px}.quote{width:38px;opacity:.8}.test-card p{font-size:18px;line-height:1.8;font-weight:800}.stars{width:112px;margin:14px 0 18px}.test-card b,.test-card small{display:block}.test-card small{color:var(--green);font-weight:900;font-size:16px}.cta{margin:58px auto 115px;border-radius:24px;background:linear-gradient(90deg,#08766c,#20d36f);color:#fff;display:grid;grid-template-columns:280px 1fr 160px;gap:25px;align-items:center;padding:48px 56px;box-shadow:0 28px 55px rgba(14,173,95,.24)}.cta h2{font-size:44px;line-height:1.35;margin:0}.cta p{margin:10px 0 0;color:rgba(255,255,255,.82);font-size:18px}.cta-pill{background:#fff;color:#087b58;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;font-weight:900}.cta-pill img{width:48px}.cta-icon{width:100px;height:100px;border-radius:25px;background:rgba(255,255,255,.13);display:grid;place-items:center;font-size:58px}.page-head{text-align:center;padding:90px 0 45px}.page-head p{font-size:24px;color:var(--muted);line-height:1.8;max-width:760px;margin:12px auto 0}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:120px}.info-card{background:#fff;border:1px solid var(--border);border-radius:26px;padding:34px;text-align:center;box-shadow:var(--shadow)}.info-card img{height:64px;width:64px;object-fit:contain;margin:0 auto 14px}.info-card h3{font-size:25px;margin:0 0 8px;color:#004d43}.info-card p{font-size:18px;color:var(--muted);line-height:1.8}.works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:120px}.works-grid img{width:100%;height:420px;object-fit:cover;border-radius:26px;box-shadow:var(--shadow);border:1px solid var(--border)}.contact-box{max-width:720px;background:#fff;border:1px solid var(--border);border-radius:30px;box-shadow:var(--shadow);padding:40px;margin-bottom:140px;display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}.phone-large{font-size:28px;font-weight:900;color:#004d43}.floating-whatsapp{position:fixed;right:34px;bottom:38px;z-index:40;width:64px;height:64px;border-radius:22px;background:#fff;box-shadow:0 15px 35px rgba(0,60,50,.18);display:grid;place-items:center}.floating-whatsapp img{width:45px}.bottom-nav{display:none}.reveal{opacity:0;transform:translateY(28px);transition:.55s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@media (max-width:900px){body{padding-bottom:112px}.container{width:min(100% - 28px,760px)}.topbar{background:rgba(247,255,251,.94)}.topbar-inner{height:106px;justify-content:space-between;gap:12px}.logo{margin-inline-start:0;order:1}.logo img{width:54px}.top-actions{order:2;margin:0}.desktop-nav,.desktop-contact{display:none}.phone-link{font-size:27px;gap:10px}.phone-link img{width:27px}.menu-btn{display:block;order:3}.mobile-menu{position:fixed;top:98px;left:14px;right:14px;z-index:70;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:22px;padding:14px;box-shadow:var(--shadow);transform:translateY(-16px);opacity:0;pointer-events:none;transition:.2s ease}.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}.mobile-menu-link{padding:14px;border-radius:16px;text-align:center;font-weight:900;background:#f4fbf8;color:#004d43}.mobile-menu-link.active{background:var(--green);color:#fff}.hero{min-height:auto;display:flex;flex-direction:column;gap:24px;padding-top:72px;text-align:center}.hero-content{display:contents}.eyebrow{order:1;font-size:25px;margin:0}.hero h1{order:2;font-size:54px;line-height:1.23;letter-spacing:-1px}.hero-text{order:3;font-size:26px;line-height:1.8;margin:8px auto 14px}.hero-visual{order:4;margin-inline:-16px}.hero-visual img{width:106%;max-width:none}.hero-buttons{display:none}.simple-card{display:block;margin-top:18px;padding:0;background:transparent;border:0;box-shadow:none;min-height:0}.simple-card .whatsapp-circle,.simple-card .trend{display:none}.simple-card h2{font-size:52px;line-height:1.2}.simple-card h2:after,.section-title h2:after{content:"";display:block;width:118px;height:5px;background:var(--green);border-radius:999px;margin:12px auto 0}.simple-card p{font-size:25px;line-height:1.9;max-width:670px;margin:18px auto 0}.simple-card:after{content:'تواصل معنا';display:inline-flex;align-items:center;justify-content:center;margin:34px auto 0;background:linear-gradient(135deg,#08766c,#22d572);color:white;border-radius:999px;padding:17px 36px;font-size:24px;font-weight:900;box-shadow:0 18px 35px rgba(16,166,97,.23)}.section{padding:54px 0 8px}.section-title{margin-bottom:32px}.section-title h2,.page-head h1{font-size:48px}.section-title span{display:none}.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.tech-card{width:auto;height:148px;border-radius:20px}.tech-card img{width:58px;height:58px}.tech-card b{font-size:19px}.testimonials{display:grid;grid-template-columns:repeat(2, minmax(265px,1fr));gap:18px;overflow:hidden}.test-card{padding:26px 24px;min-height:260px}.test-card:nth-child(3){display:none}.test-card p{font-size:23px;line-height:1.65}.test-card b{font-size:23px}.test-card small{font-size:19px}.cta{display:none}.floating-whatsapp{display:none}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;height:104px;padding:13px 10px calc(13px + env(safe-area-inset-bottom));background:#003c34;border-radius:34px 34px 0 0;box-shadow:0 -18px 40px rgba(0,42,36,.25);display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:rgba(255,255,255,.58);font-weight:900;font-size:18px}.bottom-nav a.active{color:#fff}.bottom-nav img{width:30px;height:30px;object-fit:contain;filter:brightness(0) invert(1);opacity:.58}.bottom-nav a.active img{opacity:1}.page-head{padding:70px 0 34px}.page-head p{font-size:23px}.cards-grid{grid-template-columns:1fr;gap:18px;margin-bottom:40px}.info-card h3{font-size:27px}.info-card p{font-size:22px}.works-grid{grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:40px}.works-grid img{height:350px}.contact-box{margin-bottom:50px}.blob-a{width:285px;height:285px;left:-150px;top:250px}.blob-b{width:320px;height:320px;right:-190px;top:760px}}
@media (max-width:560px){.container{width:calc(100% - 20px)}.topbar-inner{height:94px}.logo img{width:47px}.phone-link{font-size:21px}.phone-link img{width:23px}.menu-btn{width:50px}.mobile-menu{top:88px}.hero{padding-top:50px}.eyebrow{font-size:20px}.hero h1{font-size:42px}.hero-text{font-size:22px}.simple-card h2{font-size:43px}.simple-card p{font-size:21px}.section-title h2,.page-head h1{font-size:42px}.tech-grid{grid-template-columns:repeat(2,1fr);gap:14px}.tech-card{height:139px}.testimonials{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.test-card{min-width:82%;scroll-snap-align:center}.works-grid{grid-template-columns:1fr 1fr}.works-grid img{height:250px}.bottom-nav{height:96px;border-radius:28px 28px 0 0}.bottom-nav a{font-size:15px}.bottom-nav img{width:27px;height:27px}}

/* ==============================
   MOBILE STABILITY FIX
   هذا الجزء يصلح مشاكل الهاتف:
   - اللوجو لا يخرج من الشاشة
   - الهيدر ثابت ومتناسق
   - لا يوجد عرض زائد يمين/يسار
   - صورة الهواتف لا تكسر الصفحة
   - Bottom nav ثابت ومنظم
============================== */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

@media (max-width:900px){
  body{
    padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }

  .container{
    width:100%;
    max-width:760px;
    padding-inline:18px;
    margin-inline:auto;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(247,255,251,.97);
    border-bottom:1px solid rgba(0,60,52,.08);
  }

  .topbar-inner{
    height:84px;
    display:grid;
    grid-template-columns:56px minmax(0,1fr) 56px;
    align-items:center;
    gap:8px;
    direction:ltr;
    padding-inline:16px;
    width:100%;
    max-width:760px;
  }

  .menu-btn{
    display:flex;
    flex-direction:column;
    justify-content:center;
    justify-self:start;
    align-self:center;
    order:0;
    width:50px;
    height:50px;
    padding:7px;
    background:transparent;
  }

  .menu-btn span{
    height:4px;
    margin:5px 0;
    width:36px;
  }

  .top-actions{
    grid-column:2;
    justify-self:center;
    min-width:0;
    margin:0;
    display:flex;
    justify-content:center;
  }

  .phone-link{
    min-width:0;
    max-width:100%;
    white-space:nowrap;
    font-size:clamp(19px,5.2vw,28px);
    line-height:1;
    gap:8px;
    justify-content:center;
  }

  .phone-link span{
    min-width:0;
  }

  .phone-link img{
    width:clamp(22px,5.4vw,29px);
    flex:0 0 auto;
  }

  .logo{
    grid-column:3;
    justify-self:end;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    overflow:visible;
  }

  .logo img{
    width:clamp(44px,9vw,56px);
    height:auto;
    object-fit:contain;
  }

  .desktop-nav,
  .desktop-contact{
    display:none !important;
  }

  .mobile-menu{
    top:88px;
    left:14px;
    right:14px;
    z-index:120;
  }

  .page{
    overflow:hidden;
  }

  .hero{
    width:100%;
    padding-inline:18px;
    padding-top:58px;
    gap:22px;
    overflow:hidden;
  }

  .eyebrow{
    font-size:clamp(20px,5.3vw,28px);
    line-height:1.35;
  }

  .hero h1{
    font-size:clamp(42px,10.4vw,60px);
    line-height:1.22;
    letter-spacing:0;
  }

  .hero-text{
    font-size:clamp(21px,5.3vw,28px);
    line-height:1.75;
    max-width:680px;
    margin:6px auto 10px;
  }

  .hero-visual{
    width:100%;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
    overflow:visible;
  }

  .hero-visual img{
    width:100%;
    max-width:720px;
    min-width:0;
    transform:none;
    filter:drop-shadow(0 18px 28px rgba(0,60,52,.10));
  }

  .simple-card{
    width:100%;
    padding-inline:18px;
    margin-top:8px;
  }

  .simple-card h2{
    font-size:clamp(40px,10vw,54px);
  }

  .simple-card p{
    font-size:clamp(20px,5.1vw,27px);
    line-height:1.8;
  }

  .section{
    padding-inline:18px;
  }

  .bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:calc(88px + env(safe-area-inset-bottom));
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-radius:28px 28px 0 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:center;
    background:#003c34;
    z-index:110;
    box-shadow:0 -12px 35px rgba(0,40,35,.18);
  }

  .bottom-nav a{
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    color:rgba(255,255,255,.58);
    font-size:14px;
    font-weight:800;
    text-align:center;
  }

  .bottom-nav a.active{
    color:#fff;
  }

  .bottom-nav img{
    width:28px;
    height:28px;
    object-fit:contain;
    opacity:.72;
  }

  .bottom-nav a.active img{
    opacity:1;
  }
}

@media (max-width:430px){
  .topbar-inner{
    height:78px;
    grid-template-columns:48px minmax(0,1fr) 48px;
    padding-inline:12px;
  }

  .menu-btn{
    width:44px;
    height:44px;
    padding:5px;
  }

  .menu-btn span{
    width:32px;
    height:4px;
    margin:4px 0;
  }

  .phone-link{
    font-size:clamp(18px,5vw,21px);
    gap:6px;
  }

  .phone-link img{
    width:22px;
  }

  .logo img{
    width:42px;
  }

  .mobile-menu{
    top:82px;
  }

  .hero{
    padding-top:46px;
    padding-inline:12px;
  }

  .hero h1{
    font-size:clamp(38px,10.8vw,46px);
  }

  .hero-text{
    font-size:clamp(19px,5.1vw,23px);
  }

  .bottom-nav{
    height:calc(82px + env(safe-area-inset-bottom));
    padding-inline:8px;
  }

  .bottom-nav a{
    font-size:13px;
  }

  .bottom-nav img{
    width:26px;
    height:26px;
  }
}


/* ==============================
   IPHONE SAFE AREA HEADER FIX
   ينزل عناصر الهيدر للأسفل حتى لا تدخل تحت شريط الآيفون
============================== */
@media (max-width:900px){
  .topbar{
    padding-top:max(18px, env(safe-area-inset-top));
  }

  .topbar-inner{
    min-height:86px;
    height:auto;
    padding-top:8px;
    padding-bottom:12px;
  }

  .mobile-menu{
    top:calc(max(18px, env(safe-area-inset-top)) + 92px);
  }

  .hero{
    padding-top:46px;
  }
}

@media (max-width:430px){
  .topbar{
    padding-top:max(20px, env(safe-area-inset-top));
  }

  .topbar-inner{
    min-height:88px;
    padding-top:10px;
    padding-bottom:12px;
  }

  .mobile-menu{
    top:calc(max(20px, env(safe-area-inset-top)) + 92px);
  }

  .hero{
    padding-top:42px;
  }
}

/* =====================================================
   FINAL MOBILE HEADER FIX
   يجعل الهيدر ثابت مثل تطبيق الموبايل، وينزل العناصر تحت Safe Area
===================================================== */
@media (max-width:900px){
  :root{
    --mobile-header-height: calc(108px + env(safe-area-inset-top));
    --mobile-bottom-height: calc(92px + env(safe-area-inset-bottom));
  }

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    padding-top:var(--mobile-header-height);
    padding-bottom:var(--mobile-bottom-height);
  }

  .topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:var(--mobile-header-height);
    padding-top:env(safe-area-inset-top);
    padding-bottom:0;
    background:rgba(247,255,251,.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(220,239,231,.9);
    z-index:200;
  }

  .topbar-inner{
    width:100%;
    max-width:760px;
    height:108px;
    min-height:108px;
    margin-inline:auto;
    padding:22px 18px 18px;
    display:grid;
    grid-template-columns:56px minmax(0,1fr) 56px;
    align-items:center;
    gap:10px;
    direction:ltr;
  }

  .menu-btn{
    grid-column:1;
    justify-self:start;
    align-self:center;
    width:52px;
    height:52px;
    padding:7px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:0;
    background:transparent;
    margin:0;
  }

  .menu-btn span{
    width:40px;
    height:5px;
    margin:4px auto;
    border-radius:999px;
    background:var(--purple);
  }

  .top-actions{
    grid-column:2;
    justify-self:center;
    align-self:center;
    min-width:0;
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .phone-link{
    min-width:0;
    max-width:100%;
    white-space:nowrap;
    font-size:clamp(20px,5.3vw,27px);
    line-height:1;
    gap:8px;
    color:#004d43;
  }

  .phone-link img{
    width:clamp(22px,5vw,27px);
    height:auto;
    flex:0 0 auto;
  }

  .logo{
    grid-column:3;
    justify-self:end;
    align-self:center;
    margin:0;
    overflow:visible;
  }

  .logo img{
    width:clamp(44px,9vw,56px);
    height:auto;
    object-fit:contain;
  }

  .mobile-menu{
    position:fixed;
    top:calc(var(--mobile-header-height) + 10px);
    left:14px;
    right:14px;
    z-index:190;
  }

  .hero{
    padding-top:42px;
  }

  .page-head{
    padding-top:52px;
  }

  .bottom-nav{
    z-index:210;
  }
}

@media (max-width:430px){
  :root{
    --mobile-header-height: calc(112px + env(safe-area-inset-top));
    --mobile-bottom-height: calc(88px + env(safe-area-inset-bottom));
  }

  .topbar-inner{
    height:112px;
    min-height:112px;
    grid-template-columns:52px minmax(0,1fr) 52px;
    padding:24px 14px 18px;
  }

  .menu-btn{
    width:48px;
    height:48px;
    padding:6px;
  }

  .menu-btn span{
    width:36px;
    height:5px;
    margin:4px auto;
  }

  .phone-link{
    font-size:clamp(19px,5.2vw,22px);
    gap:7px;
  }

  .phone-link img{
    width:23px;
  }

  .logo img{
    width:44px;
  }

  .hero{
    padding-top:34px;
  }

  .page-head{
    padding-top:44px;
  }
}

/* =====================================================
   WORKS IMAGES FIX
   يجعل صور أعمالنا تظهر كاملة بدون قص
===================================================== */

/* Desktop */
.works-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
  align-items:start;
}



/* Tablet */
@media (max-width:900px){
  .works-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    padding-inline:18px;
    margin-bottom:35px;
  }

  .works-grid img{
    height:auto !important;
    min-height:0;
    aspect-ratio:auto;
    object-fit:contain !important;
    padding:8px;
    border-radius:26px;
    background:linear-gradient(180deg, #f6fffb, #eafff5);
  }
}

/* Small Mobile */
@media (max-width:560px){
  .works-grid{
    grid-template-columns:1fr;
    gap:22px;
    padding-inline:14px;
  }

  .works-grid img{
    width:100%;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center;
    padding:10px;
    border-radius:28px;
  }
}


/* =====================================================
   WORKS SECTION - DESKTOP PREMIUM PHONE STYLE
   يجعل صور الأعمال في الويب تظهر كهواتف احترافية
===================================================== */

/* إخفاء الخلفيات الدائرية في صفحة أعمالنا فقط على الويب */
@media (min-width:901px){
  body[data-page="works"] .site-bg{
    display:none;
  }
}

/* تنسيق العنوان في صفحة أعمالنا */
#page-works .page-head{
  padding-top:90px;
  padding-bottom:40px;
}

#page-works .page-head h1{
  font-size:60px;
  font-weight:900;
  color:#004d43;
  margin-bottom:8px;
}

#page-works .page-head p{
  font-size:22px;
  color:#74807c;
  line-height:1.9;
}

/* شبكة الصور */
.works-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(200px, 240px));
  justify-content:center;
  gap:28px;
  align-items:end;
  margin-bottom:120px;
}

/* إطار الهاتف */
.work-device{
  position:relative;
  width:100%;
  aspect-ratio:9 / 18.8;
  background:#0a0f0e;
  border-radius:36px;
  padding:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 22px 45px rgba(0,40,35,.16),
    0 8px 18px rgba(0,0,0,.18);
  transition:transform .25s ease, box-shadow .25s ease;
}

/* سماعة الهاتف / notch */
.work-device::before{
  content:"";
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:36%;
  height:16px;
  background:#050808;
  border-radius:0 0 14px 14px;
  z-index:3;
  box-shadow:0 2px 0 rgba(255,255,255,.03);
}

/* لمعة خفيفة على الإطار */
.work-device::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:36px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;
}

/* الصورة داخل الهاتف */
.work-device img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
  border-radius:28px;
  background:#000;
}

/* Hover جميل في الويب */
@media (hover:hover){
  .work-device:hover{
    transform:translateY(-8px);
    box-shadow:
      0 30px 55px rgba(0,40,35,.20),
      0 10px 20px rgba(0,0,0,.18);
  }
}

/* شكل أكثر حيوية */
@media (min-width:901px){
  .work-device:nth-child(2),
  .work-device:nth-child(4){
    margin-top:28px;
  }
}

/* =========================
   Tablet
========================= */
@media (max-width:900px){
  .works-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    padding-inline:18px;
    margin-bottom:45px;
  }

  .work-device{
    aspect-ratio:9 / 18.5;
    border-radius:28px;
    padding:8px;
  }

  .work-device::before{
    top:6px;
    width:40%;
    height:12px;
    border-radius:0 0 10px 10px;
  }

  .work-device::after{
    border-radius:28px;
  }

  .work-device img{
    border-radius:20px;
    object-fit:cover;
    object-position:top center;
  }
}

/* =========================
   Small Mobile
========================= */
@media (max-width:560px){
  .works-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    padding-inline:14px;
  }

  .work-device{
    border-radius:24px;
    padding:7px;
  }

  .work-device::before{
    width:42%;
    height:10px;
    top:6px;
  }

  .work-device img{
    border-radius:18px;
  }
}

/* =====================================================
   REAL WHATSAPP CTA BUTTON
   زر واتساب حقيقي مع نبض
===================================================== */

/* إلغاء الزر القديم الذي كان pseudo element وغير قابل للنقر */
.simple-card::after{
  content:none !important;
  display:none !important;
}

.simple-card-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* زر واتساب داخل شرح بسيط */
.simple-whatsapp-btn{
  position:relative;
  isolation:isolate;
  margin-top:26px;
  min-width:245px;
  min-height:68px;
  padding:18px 34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:linear-gradient(135deg,#08766c,#22d572);
  color:#fff;
  font-size:24px;
  font-weight:900;
  line-height:1;
  box-shadow:
    0 22px 40px rgba(16,166,97,.25),
    0 8px 16px rgba(0,60,52,.12);
  overflow:visible;
  animation:whatsappBtnFloat 2.4s ease-in-out infinite;
}

.simple-whatsapp-btn img{
  width:34px;
  height:34px;
  object-fit:contain;
  flex:0 0 auto;
}

.simple-whatsapp-btn::before,
.simple-whatsapp-btn::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border:2px solid rgba(21,183,101,.35);
  z-index:-1;
  animation:whatsappPulse 1.8s ease-out infinite;
}

.simple-whatsapp-btn::after{
  animation-delay:.55s;
}

@keyframes whatsappPulse{
  0%{
    transform:scale(.96);
    opacity:.75;
  }

  70%{
    transform:scale(1.18);
    opacity:0;
  }

  100%{
    transform:scale(1.18);
    opacity:0;
  }
}

@keyframes whatsappBtnFloat{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-4px);
  }
}

/* الزر العائم في الكمبيوتر */
.floating-whatsapp{
  animation:whatsappSmallPulse 2s ease-in-out infinite;
}

@keyframes whatsappSmallPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 15px 35px rgba(0,60,50,.18);
  }

  50%{
    transform:scale(1.08);
    box-shadow:0 18px 42px rgba(21,183,101,.32);
  }
}

/* تحسين زر الهاتف العلوي عندما يفتح واتساب */
.phone-link{
  cursor:pointer;
}

/* =====================================================
   MOBILE WHATSAPP BUTTON
===================================================== */

@media (max-width:900px){
  .simple-whatsapp-btn{
    margin-top:34px;
    min-width:290px;
    min-height:78px;
    padding:20px 42px;
    font-size:30px;
    border-radius:999px;
  }

  .simple-whatsapp-btn img{
    width:38px;
    height:38px;
  }
}

@media (max-width:430px){
  .simple-whatsapp-btn{
    min-width:250px;
    min-height:70px;
    padding:18px 34px;
    font-size:26px;
  }

  .simple-whatsapp-btn img{
    width:34px;
    height:34px;
  }
}

/* =====================================================
   FIX SIMPLE CARD ON MOBILE
   حتى يظهر الزر داخل القسم وليس مخفي أو مقطوع
===================================================== */

@media (max-width:900px){
  .simple-card{
    overflow:visible !important;
  }

  .simple-card-content{
    width:100%;
  }

  .simple-card p{
    margin-bottom:0;
  }
}

/* =====================================================
   EXTRA SAFE AREA FOR BOTTOM NAV
===================================================== */

@media (max-width:900px){
  body{
    padding-bottom:calc(110px + env(safe-area-inset-bottom)) !important;
  }
}


/* =====================================================
   WHATSAPP ICON BUTTONS + HERO PRICE
===================================================== */

/* أي زر واتساب */
.whatsapp-btn img{
  width:26px;
  height:26px;
  object-fit:contain;
  flex:0 0 auto;
}

/* زر واتساب في الهيدر */
.desktop-contact.whatsapp-btn img{
  width:24px;
  height:24px;
}

/* ترتيب الأيقونة مع النص */
.btn.whatsapp-btn{
  gap:12px;
}

/* السعر في الكمبيوتر */
.hero-price-box{
  width:max-content;
  min-width:310px;
  margin:26px auto 0;
  padding:18px 28px 20px;
  border-radius:24px;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg, rgba(21,183,101,.65), rgba(0,126,111,.18)) border-box;
  border:1px solid transparent;
  box-shadow:
    0 22px 45px rgba(0,77,52,.10),
    inset 0 0 0 1px rgba(255,255,255,.65);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.hero-price-box::before{
  content:"";
  position:absolute;
  inset:auto -40px -70px auto;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(21,183,101,.08);
}

.price-kicker{
  display:block;
  color:#0aa45b;
  font-size:15px;
  font-weight:900;
  margin-bottom:4px;
}

.hero-price-box strong{
  display:block;
  color:#004d43;
  font-size:34px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.5px;
}

.hero-price-box small{
  display:block;
  color:#6f7f7a;
  font-size:14px;
  font-weight:800;
  margin-top:5px;
}

/* لمعة خفيفة للسعر */
.hero-price-box{
  animation:priceSoftFloat 3.2s ease-in-out infinite;
}

@keyframes priceSoftFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-4px);
  }
}

/* =====================================================
   MOBILE PRICE STYLE
===================================================== */

@media (max-width:900px){
  .hero-price-box{
    order:4;
    width:calc(100% - 24px);
    max-width:430px;
    min-width:0;
    margin:16px auto 4px;
    padding:20px 22px 22px;
    border-radius:28px;
    background:
      radial-gradient(circle at top right, rgba(34,213,114,.16), transparent 42%),
      linear-gradient(180deg,#ffffff,#f7fffb);
    box-shadow:
      0 20px 42px rgba(0,77,52,.11),
      inset 0 0 0 1px rgba(21,183,101,.22);
  }

  .price-kicker{
    font-size:18px;
  }

  .hero-price-box strong{
    font-size:38px;
  }

  .hero-price-box small{
    font-size:17px;
    line-height:1.7;
    max-width:330px;
    margin:7px auto 0;
  }

  /* لأن hero-content عندك display:contents في الموبايل */
  .hero-visual{
    order:5;
  }
}

@media (max-width:430px){
  .hero-price-box{
    width:calc(100% - 18px);
    padding:18px 18px 20px;
    border-radius:24px;
  }

  .price-kicker{
    font-size:16px;
  }

  .hero-price-box strong{
    font-size:32px;
  }

  .hero-price-box small{
    font-size:15px;
  }
}


/* =====================================================
   CLEAN DESKTOP HEADER + LOGO + PRICE + EMAIL
===================================================== */

@media (min-width:901px){
  .topbar-inner{
    height:82px;
    gap:26px;
  }

  .logo img{
    width:46px !important;
  }

  .desktop-nav{
    gap:34px;
    font-size:15px;
  }

  .top-actions{
    gap:18px;
  }

  .desktop-contact{
    padding:13px 22px;
    min-height:48px;
    border-radius:14px;
    font-size:15px;
  }

  .desktop-contact img{
    width:22px;
    height:22px;
  }

  .phone-link{
    font-size:19px;
    gap:10px;
  }

  .phone-link img{
    width:22px;
  }

  .top-email-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(255,255,255,.68);
    border:1px solid rgba(220,239,231,.95);
    color:#55706a;
    font-size:13px;
    font-weight:800;
    direction:ltr;
    box-shadow:0 10px 24px rgba(0,77,52,.05);
    transition:.2s ease;
  }

  .top-email-link:hover{
    color:#007e6f;
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(0,77,52,.09);
  }

  .hero-actions-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:8px;
  }

  .hero-buttons{
    margin:0;
  }

  .hero-price-box{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:11px 18px 12px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(21,183,101,.22) !important;
    box-shadow:0 14px 34px rgba(0,77,52,.08) !important;
    animation:none !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  .hero-price-box::before{
    display:none !important;
  }

  .hero-price-box span{
    display:block;
    color:#004d43;
    font-size:22px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-.2px;
  }

  .hero-price-box small{
    display:block;
    color:#6f7f7a;
    font-size:11px;
    font-weight:900;
    margin-top:4px;
    line-height:1.2;
  }
}

/* لا نعرض الإيميل في هيدر الموبايل حتى لا يزحم */
@media (max-width:900px){
  .top-email-link{
    display:none !important;
  }

  .hero-actions-wrap{
    display:contents;
  }

  .hero-price-box{
    order:4;
    width:calc(100% - 24px);
    max-width:430px;
    min-width:0;
    margin:18px auto 4px !important;
    padding:19px 22px 21px !important;
    border-radius:26px !important;
    background:
      radial-gradient(circle at top right, rgba(34,213,114,.17), transparent 44%),
      linear-gradient(180deg,#ffffff,#f7fffb) !important;
    border:1px solid rgba(21,183,101,.23) !important;
    box-shadow:0 20px 42px rgba(0,77,52,.11) !important;
    text-align:center;
  }

  .hero-price-box::before{
    display:none !important;
  }

  .hero-price-box span{
    display:block;
    color:#004d43;
    font-size:34px;
    font-weight:900;
    line-height:1.2;
  }

  .hero-price-box small{
    display:block;
    margin-top:6px;
    color:#6f7f7a;
    font-size:15px;
    font-weight:800;
  }

  .hero-visual{
    order:5;
  }
}

/* =====================================================
   EMAIL MODAL DESIGN
===================================================== */


.email-modal{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.email-modal.open{
  display:flex;
}

.email-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,35,30,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.email-dialog{
  position:relative;
  z-index:1;
  width:min(820px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  background:#f7fffb;
  border:1px solid var(--border);
  border-radius:28px;
  padding:18px;
  box-shadow:0 30px 80px rgba(0,35,30,.24);
  direction:rtl;
}

.email-x{
  position:absolute;
  top:14px;
  left:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:12px;
  background:#ffffff;
  color:#004d43;
  font-size:26px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,77,52,.08);
}

.email-dialog-head{
  padding:24px 52px 22px;
  text-align:center;
  border-radius:22px;
  border:1px solid var(--border);
  background:
    radial-gradient(circle at top right, rgba(34,213,114,.16), transparent 45%),
    linear-gradient(135deg,rgba(21,183,101,.11),rgba(255,255,255,.82));
}

.email-dialog-head h2{
  margin:0;
  color:#004d43;
  font-size:26px;
  font-weight:900;
}

.email-dialog-head p{
  margin:8px 0 0;
  color:#66716f;
  font-size:16px;
  font-weight:800;
  line-height:1.7;
}

.email-form{
  margin-top:16px;
  display:grid;
  gap:12px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.email-form label{
  display:grid;
  gap:7px;
}

.email-form label span{
  color:#004d43;
  font-size:14px;
  font-weight:900;
}

.email-form input,
.email-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:16px;
  background:#ffffff;
  padding:14px 16px;
  font-family:'Cairo',system-ui,sans-serif;
  font-size:15px;
  font-weight:700;
  outline:none;
  color:#062d29;
  transition:.2s ease;
}

.email-form textarea{
  resize:vertical;
  min-height:120px;
}

.email-form input:focus,
.email-form textarea:focus{
  border-color:#15b765;
  box-shadow:0 0 0 4px rgba(21,183,101,.12);
}

.email-submit{
  width:100%;
  height:56px;
  margin-top:4px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,#08766c,#22d572);
  color:#ffffff;
  font-family:'Cairo',system-ui,sans-serif;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 18px 38px rgba(16,166,97,.23);
}

.email-submit:disabled{
  opacity:.72;
  cursor:wait;
}

.email-status{
  margin:0;
  text-align:center;
  min-height:24px;
  color:#004d43;
  font-weight:900;
}

.email-status.success{
  color:#08766c;
}

.email-status.warning{
  color:#9a6a00;
}

@media (max-width:720px){
  .email-dialog{
    border-radius:24px;
    padding:14px;
  }

  .email-dialog-head{
    padding:54px 16px 18px;
  }

  .email-dialog-head h2{
    font-size:22px;
  }

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

  .email-form input,
  .email-form textarea{
    font-size:14px;
  }
}

/* =====================================================
   LIGHT EMAIL MODAL FIX
   إزالة البطء من نافذة الإيميل
===================================================== */

.email-modal{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.email-modal.open{
  display:flex;
}

.email-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,35,30,.32) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.email-dialog{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  max-height:calc(100vh - 32px);
  overflow:auto;
  background:#f7fffb;
  border:1px solid #dcefe7;
  border-radius:24px;
  padding:16px;
  box-shadow:0 18px 45px rgba(0,35,30,.18);
  direction:rtl;
  transform:translateZ(0);
}

.email-x{
  position:absolute;
  top:12px;
  left:12px;
  width:36px;
  height:36px;
  border:0;
  border-radius:12px;
  background:#ffffff;
  color:#004d43;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
}

.email-dialog-head{
  padding:22px 46px 18px;
  text-align:center;
  border-radius:20px;
  border:1px solid #dcefe7;
  background:#ffffff;
}

.email-dialog-head h2{
  margin:0;
  color:#004d43;
  font-size:25px;
  font-weight:900;
}

.email-dialog-head p{
  margin:7px 0 0;
  color:#66716f;
  font-size:15px;
  font-weight:800;
  line-height:1.7;
}

.email-form{
  margin-top:14px;
  display:grid;
  gap:12px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.email-form label{
  display:grid;
  gap:7px;
}

.email-form label span{
  color:#004d43;
  font-size:14px;
  font-weight:900;
}

.email-form input,
.email-form textarea{
  width:100%;
  border:1px solid #dcefe7;
  border-radius:15px;
  background:#ffffff;
  padding:13px 15px;
  font-family:'Cairo',system-ui,sans-serif;
  font-size:15px;
  font-weight:700;
  outline:none;
  color:#062d29;
}

.email-form textarea{
  resize:vertical;
  min-height:110px;
}

.email-form input:focus,
.email-form textarea:focus{
  border-color:#15b765;
  box-shadow:0 0 0 3px rgba(21,183,101,.10);
}

.email-submit{
  width:100%;
  height:54px;
  margin-top:4px;
  border:0;
  border-radius:17px;
  background:linear-gradient(135deg,#08766c,#22d572);
  color:#ffffff;
  font-family:'Cairo',system-ui,sans-serif;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
}

.email-status{
  margin:0;
  text-align:center;
  min-height:22px;
  color:#004d43;
  font-weight:900;
}

.email-status.success{
  color:#08766c;
}

/* زر الإيميل الصغير في الهيدر */
.top-email-link{
  gap:7px;
}

.email-icon{
  font-size:16px;
  line-height:1;
}

@media (max-width:720px){
  .email-modal{
    align-items:flex-start;
    padding:12px;
    padding-top:calc(18px + env(safe-area-inset-top));
  }

  .email-dialog{
    width:100%;
    max-height:calc(100vh - 24px - env(safe-area-inset-top));
    border-radius:22px;
    padding:13px;
  }

  .email-dialog-head{
    padding:50px 14px 16px;
  }

  .email-dialog-head h2{
    font-size:21px;
  }

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

  .email-form input,
  .email-form textarea{
    font-size:14px;
  }
}

/* =====================================================
   DESKTOP HEADER PREMIUM LAYOUT FIX
   يجعل الهيدر ممتد ومريح وغير متداخل في الكمبيوتر
===================================================== */

@media (min-width: 901px){

  /* الهيدر يأخذ عرض الشاشة بشكل أفضل */
  .topbar{
    height: 88px !important;
    background: rgba(247,255,251,.92) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0,60,52,.08) !important;
  }

  /* نوسع الكونتينر في الهيدر فقط */
  .topbar .container{
    width: min(1480px, calc(100% - 96px)) !important;
    max-width: 1480px !important;
    padding-inline: 0 !important;
  }

  /* تقسيم واضح: يمين شعار، وسط روابط، يسار معلومات التواصل */
  .topbar-inner{
    height: 88px !important;
    display: grid !important;
    grid-template-columns: 120px 1fr auto !important;
    align-items: center !important;
    gap: 34px !important;
    direction: rtl !important;
  }

  /* الشعار يمين، بحجم أهدأ */
  .logo{
    margin: 0 !important;
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
  }

  .logo img{
    width: 48px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* روابط الصفحات في الوسط بشكل نظيف */
  .desktop-nav{
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.52) !important;
    border: 1px solid rgba(220,239,231,.78) !important;
    box-shadow: 0 12px 32px rgba(0,77,52,.045) !important;
    color: #4d5b58 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  .nav-link{
    height: 42px !important;
    min-width: 92px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: .2s ease !important;
  }

  .nav-link:hover{
    color: #008c62 !important;
    background: rgba(21,183,101,.08) !important;
  }

  .nav-link.active{
    color: #ffffff !important;
    background: linear-gradient(135deg, #18c66c, #08766c) !important;
    box-shadow: 0 10px 22px rgba(16,166,97,.18) !important;
  }

  .nav-link.active::after{
    display: none !important;
  }

  /* معلومات التواصل يسار، مرتبة وبعيدة عن روابط الصفحات */
  .top-actions{
    margin: 0 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    direction: ltr !important;
  }

  /* زر واتساب صغير واضح */
  .desktop-contact{
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 20px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    gap: 9px !important;
    box-shadow: 0 14px 30px rgba(16,166,97,.22) !important;
  }

  .desktop-contact img{
    width: 21px !important;
    height: 21px !important;
  }

  /* الرقم كبادج أنيق */
  .phone-link{
    height: 46px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.62) !important;
    border: 1px solid rgba(220,239,231,.9) !important;
    box-shadow: 0 10px 24px rgba(0,77,52,.045) !important;
    color: #004d43 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    gap: 8px !important;
    direction: ltr !important;
    white-space: nowrap !important;
  }

  .phone-link img{
    width: 20px !important;
    height: 20px !important;
  }

  /* الإيميل أصغر وأهدأ، لا يزاحم */
  .top-email-link{
    height: 42px !important;
    max-width: 190px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.45) !important;
    border: 1px solid rgba(220,239,231,.82) !important;
    color: #526a64 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    direction: ltr !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 10px 24px rgba(0,77,52,.035) !important;
  }

  .top-email-link:hover,
  .phone-link:hover{
    transform: translateY(-2px) !important;
    border-color: rgba(21,183,101,.35) !important;
    color: #007e6f !important;
  }
}

/* =====================================================
   MEDIUM DESKTOP FIX
   للشاشات المتوسطة حتى لا يتداخل الهيدر
===================================================== */

@media (min-width: 901px) and (max-width: 1180px){

  .topbar .container{
    width: calc(100% - 44px) !important;
  }

  .topbar-inner{
    grid-template-columns: 84px 1fr auto !important;
    gap: 18px !important;
  }

  .logo img{
    width: 42px !important;
  }

  .desktop-nav{
    gap: 6px !important;
    padding: 6px !important;
    font-size: 13px !important;
  }

  .nav-link{
    min-width: 74px !important;
    height: 38px !important;
    padding: 0 12px !important;
  }

  .top-actions{
    gap: 8px !important;
  }

  .top-email-link{
    display: none !important;
  }

  .phone-link{
    font-size: 15px !important;
    height: 42px !important;
    padding: 0 11px !important;
  }

  .desktop-contact{
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 15px !important;
    font-size: 14px !important;
  }
}

/* =====================================================
   FINAL DESKTOP HEADER POSITION + HERO PRICE SPACING
   تقريب روابط الصفحات من اللوجو + تحسين كارت السعر
===================================================== */

@media (min-width: 901px){

  /* تقسيم الهيدر بشكل أفضل:
     اللوجو + الروابط قريبين من بعض في اليمين
     التواصل يبقى في اليسار
  */
  .topbar-inner{
    grid-template-columns: auto auto 1fr !important;
    gap: 22px !important;
    direction: rtl !important;
  }

  /* اللوجو في أقصى اليمين */
  .logo{
    justify-self: start !important;
    margin: 0 !important;
  }

  .logo img{
    width: 46px !important;
  }

  /* روابط الصفحات قريبة من اللوجو */
  .desktop-nav{
    justify-self: start !important;
    margin-inline-start: 10px !important;
    gap: 6px !important;
    padding: 7px 8px !important;
  }

  .nav-link{
    min-width: 92px !important;
    height: 42px !important;
    padding: 0 16px !important;
  }

  /* التواصل في اليسار */
  .top-actions{
    justify-self: end !important;
    margin: 0 !important;
  }

  /* ترتيب hero حتى لا يضغط السعر */
  .hero-actions-wrap{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    margin-top: 10px !important;
  }

  .hero-buttons{
    display: flex !important;
    justify-content: center !important;
    gap: 18px !important;
    margin: 0 !important;
  }

  /* كارت السعر أنظف وتحت الأزرار بمسافة */
  .hero-price-box{
    width: min(430px, 100%) !important;
    min-width: 0 !important;
    margin: 2px auto 0 !important;
    padding: 16px 30px 18px !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at top right, rgba(34,213,114,.13), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)) !important;
    border: 1px solid rgba(21,183,101,.24) !important;
    box-shadow:
      0 18px 42px rgba(0,77,52,.08),
      inset 0 0 0 1px rgba(255,255,255,.72) !important;
    text-align: center !important;
    animation: none !important;
  }

  .hero-price-box::before{
    display: none !important;
  }

  .price-kicker{
    font-size: 17px !important;
    line-height: 1.2 !important;
    color: #004d43 !important;
    margin-bottom: 6px !important;
    font-weight: 900 !important;
  }

  .hero-price-box strong{
    font-size: 35px !important;
    line-height: 1.1 !important;
    color: #004d43 !important;
    font-weight: 900 !important;
    letter-spacing: -.4px !important;
  }

  .hero-price-box small{
    display: block !important;
    margin-top: 8px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #6f7f7a !important;
    font-weight: 800 !important;
  }
}

/* للشاشات المتوسطة حتى لا يتداخل */
@media (min-width: 901px) and (max-width: 1180px){

  .topbar-inner{
    grid-template-columns: auto auto 1fr !important;
    gap: 14px !important;
  }

  .desktop-nav{
    margin-inline-start: 4px !important;
  }

  .nav-link{
    min-width: 76px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  .top-email-link{
    display: none !important;
  }

  .hero-price-box{
    width: 390px !important;
  }
}

/* =====================================================
   PRICE CARD LOWER SPACING FIX
   ينزل بطاقة السعر إلى الأسفل بعيداً عن الأزرار
===================================================== */

@media (min-width: 901px) {
  .hero-actions-wrap{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 28px !important; /* مسافة بين الأزرار والبطاقة */
  }

  .hero-price-box{
    margin-top: 18px !important; /* ينزل البطاقة للأسفل */
  }
}

/* للشاشات المتوسطة */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero-actions-wrap{
    gap: 24px !important;
  }

  .hero-price-box{
    margin-top: 14px !important;
  }
}

/* =====================================================
   CERTIFICATES IMAGE MARQUEE
   شريط شهادات بصور حقيقية وروابط تحقق
===================================================== */

.certificates-marquee-section{
  width: 100%;
  padding: 70px 0 18px;
  overflow: hidden;
}

.certificates-marquee-title{
  text-align: center;
  margin-bottom: 30px;
}

.certificates-marquee-title span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #004d43;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.2;
  position: relative;
}

.certificates-marquee-title span::after{
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 115px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #99ddc4 0 45%, #15b765 45%);
}

.certificates-marquee{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 22px 0;
}

.certificates-marquee::before,
.certificates-marquee::after{
  content: "";
  position: absolute;
  top: 0;
  width: 150px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.certificates-marquee::before{
  right: 0;
  background: linear-gradient(to left, #f7fffb, rgba(247,255,251,0));
}

.certificates-marquee::after{
  left: 0;
  background: linear-gradient(to right, #f7fffb, rgba(247,255,251,0));
}

.certificates-track{
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  animation: certificatesImageMove 30s linear infinite;
}

/* يتوقف عند مرور الماوس ليقدر المستخدم يضغط */
.certificates-marquee:hover .certificates-track{
  animation-play-state: paused;
}

.cert-marquee-item{
  flex: 0 0 auto;
  width: 330px;
  min-height: 132px;
  padding: 16px 20px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(21,183,101,.10), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
  border: 1px solid rgba(220,239,231,.95);
  box-shadow: 0 18px 42px rgba(0,77,52,.08);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  text-decoration: none;
  color: #004d43;
  direction: ltr;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.cert-marquee-item img{
  width: 92px;
  height: 92px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 18px rgba(0,60,52,.12));
}

.cert-marquee-item div{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cert-marquee-item strong{
  color: #004d43;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}

.cert-marquee-item small{
  color: #0a9c61;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  white-space: nowrap;
}

@media (hover:hover){
  .cert-marquee-item:hover{
    transform: translateY(-6px);
    border-color: rgba(21,183,101,.35);
    box-shadow: 0 28px 58px rgba(0,77,52,.13);
  }
}

@keyframes certificatesImageMove{
  from{
    transform: translateX(0);
  }

  to{
    transform: translateX(50%);
  }
}

/* Tablet */
@media (max-width: 900px){
  .certificates-marquee-section{
    padding: 58px 0 12px;
  }

  .certificates-marquee-title span{
    font-size: 44px;
  }

  .certificates-marquee::before,
  .certificates-marquee::after{
    width: 80px;
  }

  .cert-marquee-item{
    width: 300px;
    min-height: 124px;
    padding: 14px 18px;
  }

  .cert-marquee-item img{
    width: 82px;
    height: 82px;
  }

  .cert-marquee-item strong{
    font-size: 17px;
  }

  .certificates-track{
    animation-duration: 26s;
  }
}

/* Mobile */
@media (max-width: 560px){
  .certificates-marquee-title span{
    font-size: 36px;
  }

  .certificates-marquee{
    padding: 16px 0;
  }

  .certificates-marquee::before,
  .certificates-marquee::after{
    width: 42px;
  }

  .certificates-track{
    gap: 14px;
    animation-duration: 22s;
  }

  .cert-marquee-item{
    width: 255px;
    min-height: 104px;
    padding: 12px 14px;
    border-radius: 24px;
    gap: 12px;
  }

  .cert-marquee-item img{
    width: 68px;
    height: 68px;
  }

  .cert-marquee-item strong{
    font-size: 15px;
  }

  .cert-marquee-item small{
    font-size: 12px;
  }
}

/* =====================================================
   CERTIFICATES MANUAL DRAG + AUTO MARQUEE
   الشهادات تتحرك وحدها + يمكن سحبها باليد
===================================================== */

.certificates-marquee{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  cursor: grab;
  direction: ltr;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  user-select: none;
}

/* نخفي scrollbar */
.certificates-marquee::-webkit-scrollbar{
  display: none;
}

.certificates-marquee{
  scrollbar-width: none;
}

/* نوقف animation القديمة لأننا سنحركها بجافاسكريبت */
.certificates-track{
  animation: none !important;
  transform: none !important;
  direction: ltr;
  padding-inline: 24px;
}

/* وقت السحب */
.certificates-marquee.dragging{
  cursor: grabbing;
}

.certificates-marquee.dragging .cert-marquee-item{
  pointer-events: none;
}

/* تحسين إحساس السحب */
.cert-marquee-item{
  user-select: none;
  -webkit-user-drag: none;
}

.cert-marquee-item img{
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* =====================================================
   CERTIFICATE CLICK FIX
===================================================== */

.certificates-marquee{
  cursor: grab;
}

.certificates-marquee.dragging{
  cursor: grabbing;
}

.cert-marquee-item{
  cursor: pointer;
  pointer-events: auto !important;
}

.cert-marquee-item img{
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* =====================================================
   MORE TESTIMONIALS SECTION
   زيادة عدد الشواهد بشكل احترافي
===================================================== */

.testimonials-section{
  padding-top: 76px;
}

.testimonials-subtitle{
  max-width: 720px;
  margin: -18px auto 36px;
  text-align: center;
  color: #6f7f7a;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.9;
}

.testimonials{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.test-card{
  position: relative;
  overflow: hidden;
  min-height: 255px;
  padding: 30px 30px 26px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(155,140,255,.10), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.82));
  border: 1px solid rgba(220,239,231,.95);
  box-shadow: 0 22px 48px rgba(0,77,52,.075);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .23s ease, box-shadow .23s ease, border-color .23s ease;
}

.test-card::before{
  content: "";
  position: absolute;
  inset: auto -55px -65px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(21,183,101,.07);
  pointer-events: none;
}

.test-card .quote{
  width: 42px;
  opacity: .85;
  margin-bottom: 14px;
}

.test-card p{
  position: relative;
  z-index: 1;
  margin: 0;
  color: #082f2a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.85;
}

.test-card .stars{
  width: 112px;
  margin: 20px 0 18px;
}

.test-person{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
}

.test-person b{
  color: #004d43;
  font-size: 19px;
  font-weight: 900;
}

.test-person small{
  color: #0aa45b;
  font-size: 15px;
  font-weight: 900;
}

@media (hover:hover){
  .test-card:hover{
    transform: translateY(-7px);
    border-color: rgba(21,183,101,.34);
    box-shadow: 0 30px 58px rgba(0,77,52,.12);
  }
}

/* Tablet */
@media (max-width: 900px){
  .testimonials-section{
    padding-top: 58px;
  }

  .testimonials-subtitle{
    font-size: 22px;
    margin-bottom: 30px;
    padding-inline: 18px;
  }

  .testimonials{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .test-card{
    min-height: 260px;
    padding: 28px 24px;
  }

  .test-card p{
    font-size: 21px;
    line-height: 1.75;
  }

  .test-person b{
    font-size: 21px;
  }

  .test-person small{
    font-size: 17px;
  }
}

/* Mobile: slider أفقي حتى لا تطول الصفحة */
@media (max-width: 560px){
  .testimonials-subtitle{
    font-size: 18px;
    line-height: 1.8;
    margin-top: -12px;
  }

  .testimonials{
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 4px 14px 18px;
    margin-inline: -10px;
    -webkit-overflow-scrolling: touch;
  }

  .testimonials::-webkit-scrollbar{
    display: none;
  }

  .testimonials{
    scrollbar-width: none;
  }

  .test-card{
    flex: 0 0 82%;
    min-width: 82%;
    scroll-snap-align: center;
    min-height: 250px;
    border-radius: 24px;
    padding: 26px 22px;
  }

  .test-card p{
    font-size: 19px;
    line-height: 1.75;
  }

  .test-card .quote{
    width: 36px;
  }

  .test-card .stars{
    width: 104px;
    margin: 18px 0 16px;
  }
}

/* =====================================================
   WORKS BUTTON ON MOBILE + STORE LINKS IN WORKS PAGE
===================================================== */

/* مخفي في الكمبيوتر لأن زر استعرض أعمالنا موجود أصلاً */
.mobile-works-cta{
  display: none;
}

/* أزرار المتاجر في صفحة أعمالنا */
.store-links-box{
  width: min(760px, calc(100% - 44px));
  margin: -18px auto 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.store-link{
  min-width: 230px;
  height: 74px;
  padding: 12px 22px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  color: #004d43;
  background:
    radial-gradient(circle at top right, rgba(21,183,101,.12), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.78));
  border: 1px solid rgba(220,239,231,.95);
  box-shadow: 0 18px 42px rgba(0,77,52,.085);
  transition: transform .23s ease, box-shadow .23s ease, border-color .23s ease;
}

.store-icon{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #08766c, #22d572);
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
  flex: 0 0 auto;
  box-shadow: 0 12px 26px rgba(16,166,97,.22);
}

.app-store .store-icon{
  background: linear-gradient(135deg, #111827, #354152);
}

.play-store .store-icon{
  background: linear-gradient(135deg, #08766c, #22d572);
}

.store-link div{
  display: grid;
  gap: 2px;
  text-align: start;
  direction: ltr;
}

.store-link small{
  color: #6f7f7a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.store-link strong{
  color: #004d43;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.15;
}

@media (hover:hover){
  .store-link:hover{
    transform: translateY(-5px);
    border-color: rgba(21,183,101,.35);
    box-shadow: 0 28px 58px rgba(0,77,52,.13);
  }
}

/* الهاتف */
@media (max-width: 900px){

  /* نخلي زر أعمالنا يظهر في الهاتف فوق شرح بسيط */
  .mobile-works-cta{
    order: 5;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px auto 8px;
    padding-inline: 18px;
  }

  .mobile-works-cta a{
    width: min(430px, 100%);
    min-height: 66px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #08766c;
    background: #ffffff;
    border: 1px solid rgba(21,183,101,.32);
    box-shadow: 0 18px 38px rgba(0,77,52,.10);
    font-size: 23px;
    font-weight: 900;
  }

  .mobile-works-cta strong{
    font-size: 26px;
    line-height: 1;
  }

  /* حتى الصورة تبقى بعد الزر */
  .hero-visual{
    order: 6 !important;
  }

  .simple-card{
    margin-top: 18px !important;
  }

  /* أزرار المتاجر في صفحة أعمالنا على الهاتف */
  .store-links-box{
    width: 100%;
    margin: -8px auto 34px;
    padding-inline: 18px;
    gap: 14px;
  }

  .store-link{
    min-width: 0;
    width: min(430px, 100%);
    height: 72px;
    border-radius: 22px;
  }

  .store-link strong{
    font-size: 18px;
  }
}

@media (max-width: 430px){
  .mobile-works-cta{
    margin-top: 16px;
    padding-inline: 12px;
  }

  .mobile-works-cta a{
    min-height: 62px;
    font-size: 20px;
  }

  .store-links-box{
    padding-inline: 14px;
  }

  .store-link{
    height: 68px;
    padding: 10px 18px;
  }

  .store-icon{
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 22px;
  }
}

/* =====================================================
   WORKS PAGE CLEAN FIX
   إصلاح صفحة أعمالنا بعد إضافة App Store / Google Play
===================================================== */

/* الكمبيوتر */
@media (min-width: 901px){
  #page-works .works-head{
    padding-top: 72px !important;
    padding-bottom: 22px !important;
  }

  #page-works .works-head h1{
    font-size: 58px !important;
    margin-bottom: 6px !important;
  }

  #page-works .works-head p{
    font-size: 21px !important;
    margin-top: 6px !important;
  }

  #page-works .store-links-box{
    margin: 0 auto 54px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 18px !important;
  }

  #page-works .store-link{
    width: 230px !important;
    height: 70px !important;
    min-width: 0 !important;
    padding: 10px 18px !important;
    border-radius: 22px !important;
  }

  #page-works .store-icon{
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
  }

  #page-works .works-grid{
    width: min(1120px, calc(100% - 80px)) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(180px, 230px)) !important;
    justify-content: center !important;
    gap: 28px !important;
    margin: 0 auto 120px !important;
    padding: 0 !important;
  }
}

/* الهاتف */
@media (max-width: 900px){
  #page-works .page-head{
    padding-top: 54px !important;
    padding-bottom: 22px !important;
  }

  #page-works .page-head h1{
    font-size: 52px !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
  }

  #page-works .page-head p{
    font-size: 20px !important;
    line-height: 1.75 !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  /* أزرار المتاجر أصغر وأرتب */
  #page-works .store-links-box{
    width: 100% !important;
    padding-inline: 18px !important;
    margin: 8px auto 28px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #page-works .store-link{
    width: 100% !important;
    max-width: 360px !important;
    height: 58px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding: 8px 18px !important;
    border-radius: 18px !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  #page-works .store-icon{
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: 21px !important;
  }

  #page-works .store-link small{
    font-size: 11px !important;
  }

  #page-works .store-link strong{
    font-size: 17px !important;
  }

  /* الصور لا تبدأ صغيرة جداً ولا تقطع */
  #page-works .works-grid{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding-inline: 18px !important;
    margin: 0 auto 120px !important;
  }

  #page-works .work-device{
    width: 100% !important;
    aspect-ratio: 9 / 18.5 !important;
    border-radius: 24px !important;
    padding: 7px !important;
  }

  #page-works .work-device img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 18px !important;
  }
}

//* =========================================
   WORKS PAGE - STORE CTA REDESIGN
========================================= */

.works-showcase{
  padding-top: 76px;
  padding-bottom: 120px;
}

.works-intro{
  text-align: center;
  max-width: 900px;
  margin: 0 auto 34px;
}

.works-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background: rgba(21,183,101,.10);
  color: #0e9c5b;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 16px;
}

.works-intro h1{
  margin: 0 0 14px;
  font-size: 64px;
  line-height: 1.1;
  color: #004d43;
  font-weight: 900;
}

.works-intro p{
  margin: 0 auto;
  font-size: 24px;
  line-height: 1.9;
  color: #6f7f7a;
  max-width: 760px;
}

.store-cta-panel{
  max-width: 1080px;
  margin: 0 auto 44px;
  padding: 30px;
  border-radius: 32px;
  background:
    radial-gradient(circle at top right, rgba(21,183,101,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  border: 1px solid #dcefe7;
  box-shadow: 0 24px 60px rgba(0,77,52,.08);
}

.store-cta-text{
  text-align: center;
  margin-bottom: 24px;
}

.store-cta-text h3{
  margin: 0 0 10px;
  font-size: 34px;
  color: #004d43;
  font-weight: 900;
}

.store-cta-text p{
  margin: 0;
  font-size: 18px;
  color: #75827e;
  line-height: 1.8;
}

.store-cta-buttons{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.store-button{
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border-radius: 28px;
  min-height: 126px;
  background: #fff;
  border: 1px solid #dcefe7;
  box-shadow: 0 16px 36px rgba(0,60,50,.07);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.store-button:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 44px rgba(0,77,52,.14);
  border-color: #a7ddc5;
}

.store-google{
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,255,248,.95));
}

.store-apple{
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,249,255,.95));
}

.store-button-icon{
  width: 84px;
  height: 84px;
  border-radius: 24px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 10px;
}

.store-button-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-button-content{
  text-align: right;
  min-width: 0;
}

.store-button-content span{
  display: block;
  font-size: 14px;
  color: #7d8985;
  font-weight: 800;
  margin-bottom: 6px;
}

.store-button-content strong{
  display: block;
  font-size: 34px;
  line-height: 1.15;
  color: #004d43;
  font-weight: 900;
  margin-bottom: 6px;
}

.store-button-content small{
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: #6b7874;
  font-weight: 700;
}

.works-grid-pro{
  width: min(1180px, 100%);
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 24px;
}

.work-device{
  display: flex;
  justify-content: center;
}

.work-device img{
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 26px rgba(0,40,35,.14));
  transition: transform .25s ease;
}

.work-device:hover img{
  transform: translateY(-6px);
}

/* =========================
   TABLET
========================= */
@media (max-width: 900px){
  .works-showcase{
    padding-top: 54px;
    padding-bottom: 110px;
  }

  .works-intro{
    margin-bottom: 22px;
  }

  .works-tag{
    font-size: 13px;
    padding: 8px 14px;
    margin-bottom: 14px;
  }

  .works-intro h1{
    font-size: 54px;
    margin-bottom: 10px;
  }

  .works-intro p{
    font-size: 21px;
    line-height: 1.85;
    max-width: 96%;
  }

  .store-cta-panel{
    padding: 22px 18px;
    border-radius: 24px;
    margin-bottom: 26px;
  }

  .store-cta-text h3{
    font-size: 28px;
  }

  .store-cta-text p{
    font-size: 16px;
  }

  .store-cta-buttons{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .store-button{
    min-height: 104px;
    padding: 16px;
    border-radius: 22px;
  }

  .store-button-icon{
    width: 68px;
    height: 68px;
    border-radius: 18px;
  }

  .store-button-content strong{
    font-size: 28px;
  }

  .store-button-content small{
    font-size: 13px;
  }

  .works-grid-pro{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
  }

  .work-device img{
    max-width: 100%;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 560px){
  .works-showcase{
    padding-top: 40px;
    padding-bottom: 105px;
  }

  .works-intro h1{
    font-size: 46px;
  }

  .works-intro p{
    font-size: 18px;
    line-height: 1.9;
    max-width: 100%;
  }

  .store-cta-panel{
    padding: 14px 12px;
    border-radius: 20px;
    margin-bottom: 20px;
  }

  .store-cta-text{
    margin-bottom: 14px;
  }

  .store-cta-text h3{
    font-size: 22px;
    margin-bottom: 6px;
  }

  .store-cta-text p{
    font-size: 14px;
    line-height: 1.7;
  }

  .store-button{
    min-height: 92px;
    padding: 14px;
    gap: 12px;
    border-radius: 18px;
  }

  .store-button-icon{
    width: 54px;
    height: 54px;
    border-radius: 16px;
    padding: 8px;
  }

  .store-button-content span{
    font-size: 12px;
    margin-bottom: 4px;
  }

  .store-button-content strong{
    font-size: 23px;
    margin-bottom: 4px;
  }

  .store-button-content small{
    font-size: 12px;
    line-height: 1.45;
  }

  .works-grid-pro{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
  }

  .work-device img{
    border-radius: 18px;
  }
}

/* =====================================================
   PREMIUM SERVICES PAGE
===================================================== */

.services-hero{
  text-align:center;
  padding:96px 0 42px;
}

.services-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 22px;
  border-radius:999px;
  background:rgba(21,183,101,.10);
  color:#08766c;
  border:1px solid rgba(21,183,101,.20);
  font-size:15px;
  font-weight:900;
  margin-bottom:18px;
}

.services-hero h1{
  margin:0;
  color:#004d43;
  font-size:54px;
  font-weight:900;
  line-height:1.25;
}

.services-hero p{
  max-width:760px;
  margin:16px auto 0;
  color:#6f7f7a;
  font-size:23px;
  font-weight:700;
  line-height:1.9;
}

.services-pro-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  padding-bottom:36px;
}

.service-pro-card{
  position:relative;
  overflow:hidden;
  min-height:310px;
  padding:34px 30px 28px;
  border-radius:30px;
  background:
    radial-gradient(circle at top left, rgba(21,183,101,.08), transparent 38%),
    rgba(255,255,255,.92);
  border:1px solid rgba(220,239,231,.95);
  box-shadow:0 24px 55px rgba(0,77,52,.10);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-pro-card::before{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  border-radius:50%;
  left:-70px;
  bottom:-80px;
  background:rgba(21,183,101,.07);
  pointer-events:none;
}

.service-pro-card:hover{
  transform:translateY(-8px);
  border-color:rgba(21,183,101,.34);
  box-shadow:0 34px 70px rgba(0,77,52,.14);
}

.main-service{
  background:
    radial-gradient(circle at top right, rgba(81,64,201,.13), transparent 44%),
    linear-gradient(180deg,#ffffff,#f8fffc);
}

.service-icon-box{
  width:74px;
  height:74px;
  margin:0 auto 20px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:#f4fbf8;
  border:1px solid rgba(220,239,231,.95);
  box-shadow:0 16px 30px rgba(0,77,52,.08);
}

.service-icon-box img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.service-icon-box span{
  color:#fff;
  font-size:32px;
  font-weight:900;
  line-height:1;
}

.service-icon-box.green{
  background:linear-gradient(135deg,#1dda72,#08766c);
}

.service-icon-box.blue{
  background:linear-gradient(135deg,#4f7ed5,#1339f2);
}

.service-icon-box.purple{
  background:linear-gradient(135deg,#6f5cff,#5140c9);
}

.service-icon-box.orange{
  background:linear-gradient(135deg,#fff4d8,#ffffff);
}

.service-icon-box.orange img{
  width:48px;
  height:48px;
}

.service-icon-box.dark{
  background:linear-gradient(135deg,#062d29,#003c34);
}

.service-icon-box.stripe{
  background:linear-gradient(135deg,#7b61ff,#5140c9);
}

.service-icon-box.paypal{
  background:linear-gradient(135deg,#0070ba,#003087);
}

.service-icon-box.maps{
  background:linear-gradient(135deg,#22d572,#08766c);
}

.service-icon-box.odoo{
  background:linear-gradient(135deg,#875a7b,#5f3d57);
}

.service-pro-card h3{
  margin:0;
  text-align:center;
  color:#004d43;
  font-size:25px;
  font-weight:900;
  line-height:1.45;
}

.service-pro-card p{
  margin:14px auto 0;
  text-align:center;
  color:#6f7f7a;
  font-size:17px;
  font-weight:700;
  line-height:1.9;
  max-width:330px;
}

.service-tags{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}

.service-tags span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:7px 12px;
  border-radius:999px;
  background:#f4fbf8;
  border:1px solid rgba(220,239,231,.95);
  color:#08766c;
  font-size:13px;
  font-weight:900;
}

.services-tech-strip{
  margin:14px auto 120px;
  padding:22px;
  border-radius:28px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(220,239,231,.95);
  box-shadow:0 20px 45px rgba(0,77,52,.08);
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}

.services-tech-strip span{
  padding:10px 16px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#f4fbf8);
  border:1px solid rgba(220,239,231,.95);
  color:#004d43;
  font-size:14px;
  font-weight:900;
}

/* Tablet */
@media (max-width:900px){
  .services-hero{
    padding:62px 18px 30px;
  }

  .services-hero h1{
    font-size:48px;
  }

  .services-hero p{
    font-size:22px;
    line-height:1.8;
  }

  .services-pro-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    padding-inline:18px;
  }

  .service-pro-card{
    min-height:320px;
    padding:30px 22px 24px;
    border-radius:28px;
  }

  .service-pro-card h3{
    font-size:24px;
  }

  .service-pro-card p{
    font-size:18px;
  }

  .services-tech-strip{
    margin-bottom:42px;
    margin-inline:18px;
  }
}

/* Mobile */
@media (max-width:560px){
  .services-hero{
    padding:46px 14px 24px;
  }

  .services-badge{
    font-size:14px;
    padding:9px 18px;
  }

  .services-hero h1{
    font-size:42px;
  }

  .services-hero p{
    font-size:20px;
    line-height:1.75;
  }

  .services-pro-grid{
    grid-template-columns:1fr;
    gap:16px;
    padding-inline:14px;
  }

  .service-pro-card{
    min-height:auto;
    padding:28px 20px 24px;
    border-radius:26px;
  }

  .service-icon-box{
    width:68px;
    height:68px;
    border-radius:22px;
    margin-bottom:18px;
  }

  .service-icon-box img{
    width:38px;
    height:38px;
  }

  .service-icon-box span{
    font-size:29px;
  }

  .service-pro-card h3{
    font-size:23px;
  }

  .service-pro-card p{
    font-size:17px;
  }

  .services-tech-strip{
    margin:8px 14px 34px;
    padding:16px;
    gap:9px;
  }

  .services-tech-strip span{
    font-size:13px;
    padding:9px 13px;
  }
}


/* =====================================================
   WELCOME WHATSAPP POPUP
   بطاقة ترحيبية لطيفة عند دخول الموقع
===================================================== */

.welcome-contact{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.35s ease;
}

.welcome-contact.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.welcome-contact-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,42,36,.34);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.welcome-contact-card{
  position:relative;
  z-index:1;
  width:min(470px,100%);
  overflow:hidden;
  border-radius:34px;
  padding:34px 30px 28px;
  text-align:center;
  background:
    radial-gradient(circle at top right, rgba(34,213,114,.18), transparent 44%),
    radial-gradient(circle at bottom left, rgba(81,64,201,.10), transparent 42%),
    rgba(255,255,255,.96);
  border:1px solid rgba(220,239,231,.95);
  box-shadow:
    0 38px 90px rgba(0,42,36,.28),
    inset 0 0 0 1px rgba(255,255,255,.75);
  transform:translateY(18px) scale(.96);
  transition:.38s cubic-bezier(.2,.9,.2,1);
}

.welcome-contact.show .welcome-contact-card{
  transform:translateY(0) scale(1);
}

.welcome-close{
  position:absolute;
  top:16px;
  left:16px;
  width:42px;
  height:42px;
  border:0;
  border-radius:15px;
  background:#ffffff;
  color:#004d43;
  font-size:28px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(0,77,52,.10);
  transition:.2s ease;
}

.welcome-close:hover{
  transform:scale(1.06);
  color:#08766c;
}

.welcome-glow{
  position:absolute;
  top:-90px;
  right:-70px;
  width:210px;
  height:210px;
  border-radius:50%;
  background:rgba(34,213,114,.18);
  filter:blur(2px);
  pointer-events:none;
}

.welcome-icon{
  width:88px;
  height:88px;
  margin:4px auto 18px;
  border-radius:28px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#22d572,#08766c);
  box-shadow:0 24px 45px rgba(16,166,97,.28);
  position:relative;
  animation:welcomeIconFloat 2.6s ease-in-out infinite;
}

.welcome-icon::before,
.welcome-icon::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:32px;
  border:2px solid rgba(21,183,101,.25);
  animation:welcomePulse 1.9s ease-out infinite;
}

.welcome-icon::after{
  animation-delay:.55s;
}

.welcome-icon img{
  width:52px;
  height:52px;
  object-fit:contain;
  position:relative;
  z-index:1;
}

.welcome-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(21,183,101,.10);
  color:#08766c;
  border:1px solid rgba(21,183,101,.18);
  font-size:14px;
  font-weight:900;
  margin-bottom:12px;
}

.welcome-contact-card h2{
  margin:0;
  color:#004d43;
  font-size:30px;
  line-height:1.35;
  font-weight:900;
}

.welcome-contact-card p{
  margin:14px auto 0;
  color:#66716f;
  font-size:17px;
  line-height:1.9;
  font-weight:700;
  max-width:390px;
}

.welcome-actions{
  display:grid;
  gap:12px;
  margin-top:24px;
}

.welcome-whatsapp-btn{
  min-height:60px;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(135deg,#08766c,#22d572);
  color:#ffffff;
  font-size:18px;
  font-weight:900;
  box-shadow:0 20px 40px rgba(16,166,97,.24);
  transition:.25s ease;
}

.welcome-whatsapp-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 50px rgba(16,166,97,.30);
}

.welcome-whatsapp-btn img{
  width:26px;
  height:26px;
  object-fit:contain;
}

.welcome-later-btn{
  min-height:52px;
  border:1px solid rgba(220,239,231,.95);
  border-radius:18px;
  background:#ffffff;
  color:#58706b;
  font-family:'Cairo',system-ui,sans-serif;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.welcome-later-btn:hover{
  color:#004d43;
  background:#f7fffb;
}

.welcome-note{
  display:block;
  margin-top:15px;
  color:#8a9995;
  font-size:13px;
  font-weight:800;
  line-height:1.6;
}

@keyframes welcomePulse{
  0%{
    transform:scale(.96);
    opacity:.7;
  }

  70%{
    transform:scale(1.18);
    opacity:0;
  }

  100%{
    transform:scale(1.18);
    opacity:0;
  }
}

@keyframes welcomeIconFloat{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-5px);
  }
}

/* Mobile */
@media (max-width:560px){
  .welcome-contact{
    padding:18px;
    align-items:center;
  }

  .welcome-contact-card{
    border-radius:30px;
    padding:32px 22px 24px;
  }

  .welcome-close{
    top:14px;
    left:14px;
    width:40px;
    height:40px;
  }

  .welcome-icon{
    width:78px;
    height:78px;
    border-radius:25px;
  }

  .welcome-icon img{
    width:46px;
    height:46px;
  }

  .welcome-contact-card h2{
    font-size:25px;
  }

  .welcome-contact-card p{
    font-size:16px;
    line-height:1.85;
  }

  .welcome-whatsapp-btn{
    min-height:58px;
    font-size:17px;
    border-radius:18px;
  }

  .welcome-later-btn{
    min-height:50px;
    font-size:15px;
  }
}

/* =====================================================
   MOBILE HERO ORDER FIX
   ترتيب الصفحة الرئيسية في الهاتف:
   العنوان -> استعرض أعمالنا -> الصور -> السعر -> شرح بسيط
===================================================== */

@media (max-width:900px){

  /* نخلي عناصر hero-content تدخل في نفس ترتيب hero */
  #page-home .hero-content{
    display:contents !important;
  }

  #page-home .eyebrow{
    order:1 !important;
  }

  #page-home .hero h1{
    order:2 !important;
  }

  #page-home .hero-text{
    order:3 !important;
  }

  /* نخفي أزرار الويب في الهاتف */
  #page-home .hero-actions-wrap,
  #page-home .hero-buttons{
    display:none !important;
  }

  /* زر استعرض أعمالنا يظهر قبل الصور */
  #page-home .mobile-works-cta{
    order:4 !important;
    display:block !important;
    width:100%;
    margin:8px auto 8px !important;
    padding-inline:18px;
  }

  #page-home .mobile-works-cta a{
    width:100%;
    max-width:420px;
    min-height:62px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid rgba(21,183,101,.25);
    color:#08766c;
    font-size:20px;
    font-weight:900;
    box-shadow:0 18px 38px rgba(0,77,52,.09);
  }

  #page-home .mobile-works-cta strong{
    width:34px;
    height:34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:rgba(21,183,101,.10);
    color:#08766c;
    font-size:21px;
    line-height:1;
  }

  /* الصور بعد زر استعرض أعمالنا */
  #page-home .hero-visual{
    order:5 !important;
    width:100%;
    margin:4px 0 0 !important;
    padding:0 !important;
  }

  #page-home .hero-visual img{
    width:100% !important;
    max-width:720px !important;
    margin:0 auto !important;
    display:block !important;
  }

  /* السعر تحت الصور مباشرة */
  #page-home .hero-price-box{
    order:6 !important;
    width:calc(100% - 30px) !important;
    max-width:430px !important;
    margin:12px auto 4px !important;
    padding:18px 20px 20px !important;
    border-radius:26px !important;
    background:
      radial-gradient(circle at top right, rgba(34,213,114,.17), transparent 44%),
      linear-gradient(180deg,#ffffff,#f7fffb) !important;
    border:1px solid rgba(21,183,101,.24) !important;
    box-shadow:0 20px 42px rgba(0,77,52,.11) !important;
    text-align:center;
  }

  #page-home .hero-price-box .price-kicker{
    font-size:16px !important;
    color:#08766c !important;
    font-weight:900 !important;
    margin-bottom:5px !important;
  }

  #page-home .hero-price-box strong{
    display:block !important;
    color:#004d43 !important;
    font-size:32px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
  }

  #page-home .hero-price-box small{
    display:block !important;
    margin-top:6px !important;
    color:#6f7f7a !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.6 !important;
  }

  /* شرح بسيط يأتي بعد الهيرو والسعر */
  #page-home .simple-card{
    margin-top:22px !important;
  }
}

@media (max-width:430px){
  #page-home .mobile-works-cta{
    padding-inline:12px;
    margin-top:6px !important;
  }

  #page-home .mobile-works-cta a{
    min-height:58px;
    font-size:18px;
  }

  #page-home .hero-price-box{
    width:calc(100% - 24px) !important;
    margin-top:10px !important;
    padding:17px 18px 19px !important;
    border-radius:24px !important;
  }

  #page-home .hero-price-box strong{
    font-size:30px !important;
  }

  #page-home .hero-price-box small{
    font-size:14px !important;
  }
}

/* =====================================================
   ABSOLUTE MOBILE HEADER FIX
   الرقم داخل الشريط بالضبط، بدون نزول فوق العنوان
===================================================== */

@media (max-width: 900px){

  :root{
    --mobile-header-height: calc(50px + env(safe-area-inset-top)) !important;
  }

  body{
    padding-top: var(--mobile-header-height) !important;
  }

  .topbar{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mobile-header-height) !important;
    min-height: 0 !important;
    padding: env(safe-area-inset-top) 0 0 !important;
    margin: 0 !important;
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.05) !important;
    z-index: 999 !important;
    overflow: visible !important;
  }

  .topbar-inner{
    position: relative !important;
    width: 100% !important;
    max-width: 760px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 10px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* زر القائمة داخل الشريط يسار */
  .menu-btn{
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;

    padding: 6px !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    z-index: 3 !important;
  }

  .menu-btn span{
    display: block !important;
    width: 19px !important;
    height: 2.5px !important;
    margin: 2px 0 !important;
    background: #000000 !important;
    border-radius: 999px !important;
  }

  /* الشعار داخل الشريط يمين */
  .logo{
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
  }

  .logo img{
    width: 29px !important;
    height: 29px !important;
    object-fit: contain !important;
  }

  /* الرقم في وسط الشريط، ليس تحت الشريط */
  .top-actions{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: auto !important;
    max-width: calc(100% - 104px) !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  .top-email-link,
  .desktop-contact{
    display: none !important;
  }

  .phone-link{
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    padding: 0 12px !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    direction: ltr !important;
    white-space: nowrap !important;

    font-size: 13.5px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    color: #000000 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  .phone-link span{
    color: #000000 !important;
    line-height: 1 !important;
  }

  .phone-link img{
    width: 14px !important;
    height: 14px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }

  /* القائمة تنزل مباشرة تحت الهيدر */
  .mobile-menu{
    top: calc(var(--mobile-header-height) + 6px) !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 998 !important;
  }

  /* إزالة الفراغ الكبير تحت الهيدر */
  .hero{
    padding-top: 10px !important;
  }

  .page-head{
    padding-top: 16px !important;
  }
}

@media (max-width: 430px){

  :root{
    --mobile-header-height: calc(46px + env(safe-area-inset-top)) !important;
  }

  .topbar-inner{
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 8px !important;
  }

  .menu-btn{
    left: 8px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .menu-btn span{
    width: 18px !important;
    height: 2.3px !important;
    margin: 1.9px 0 !important;
  }

  .logo{
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .logo img{
    width: 27px !important;
    height: 27px !important;
  }

  .top-actions{
    max-width: calc(100% - 92px) !important;
    height: 32px !important;
  }

  .phone-link{
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  .phone-link img{
    width: 13px !important;
    height: 13px !important;
  }

  .hero{
    padding-top: 8px !important;
  }
}

/* =====================================================
   CERTIFICATES MARQUEE iPHONE FIX
===================================================== */

.certificates-marquee{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  direction: ltr !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  cursor: grab;
}

.certificates-marquee::-webkit-scrollbar{
  display: none;
}

.certificates-marquee{
  scrollbar-width: none;
}

.certificates-track{
  display: flex !important;
  align-items: center !important;
  gap: 22px;
  width: max-content !important;
  min-width: max-content !important;
  animation: none !important;
  transform: none !important;
  direction: ltr !important;
  will-change: scroll-position;
  padding-inline: 24px;
}

.certificates-marquee.dragging{
  cursor: grabbing;
}

.certificates-marquee.dragging .cert-marquee-item{
  pointer-events: none;
}

.cert-marquee-item{
  flex: 0 0 auto !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.cert-marquee-item img{
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

@media (max-width:560px){
  .certificates-track{
    gap: 14px !important;
    padding-inline: 14px !important;
  }
}

/* =====================================================
   CERTIFICATES MARQUEE - DESKTOP + MOBILE FIX
===================================================== */

.certificates-marquee{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  direction:ltr !important;
  scroll-behavior:auto !important;
  -webkit-overflow-scrolling:touch !important;
  cursor:grab;
  scrollbar-width:none;
}

.certificates-marquee::-webkit-scrollbar{
  display:none;
}

.certificates-track{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:22px !important;
  width:max-content !important;
  min-width:max-content !important;
  animation:none !important;
  transform:none !important;
  direction:ltr !important;
  will-change:scroll-position;
  padding-inline:24px;
}

.certificates-marquee.dragging{
  cursor:grabbing;
}

.certificates-marquee.dragging .cert-marquee-item{
  pointer-events:none;
}

.cert-marquee-item{
  flex:0 0 auto !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}

.cert-marquee-item img{
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}

@media (max-width:560px){
  .certificates-track{
    gap:14px !important;
    padding-inline:14px !important;
  }
}