/* ──────────────────────────────────────────────────────────
   ASTRO — أقسام الصفحة الرئيسية
   ──────────────────────────────────────────────────────────
   العناوين، الخدمات، الإحصائيات، المميزات، شبكة المنتجات، التواصل، والفوتر.
────────────────────────────────────────────────────────── */

    /* ── SECTIONS ── */
    section{position:relative;z-index:1}
    .section-label{font-family:'Orbitron',sans-serif;font-size:0.62rem;letter-spacing:5px;color:var(--pm);text-align:center;margin-bottom:10px}
    .section-title{font-family:'Orbitron',sans-serif;font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:700;text-align:center;background:linear-gradient(135deg,#fff,var(--pl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:14px}
    .section-line{width:70px;height:2px;background:linear-gradient(90deg,var(--pd),var(--pl));margin:0 auto 52px;border-radius:2px}

    /* ── SERVICES ── */
    .services{padding:100px 60px;background:linear-gradient(180deg,transparent 0%,rgba(14,14,30,0.97) 10%)}
    .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;max-width:1080px;margin:0 auto}
    .service-card{background:rgba(20,10,40,0.6);border:1px solid rgba(138,77,255,0.16);border-radius:8px;padding:36px 28px;text-align:center;backdrop-filter:blur(8px);transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s;position:relative;overflow:hidden}
    .service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--pm),transparent);transform:scaleX(0);transition:transform 0.4s}
    .service-card:hover{border-color:rgba(138,77,255,0.45);transform:translateY(-6px);box-shadow:0 16px 40px rgba(80,20,160,0.25)}
    .service-card:hover::before{transform:scaleX(1)}
    .service-icon{font-size:2.6rem;margin-bottom:18px;display:block}
    .service-card h3{font-family:'Orbitron',sans-serif;font-size:0.9rem;font-weight:700;letter-spacing:2px;color:var(--pl);margin-bottom:12px}
    .service-card p{font-size:0.88rem;color:rgba(242,242,247,0.58);line-height:1.8}

    /* ── STATS ── */
    .stats{padding:70px 60px;background:rgba(8,4,20,0.85);border-top:1px solid rgba(138,77,255,0.1);border-bottom:1px solid rgba(138,77,255,0.1);position:relative;z-index:1}
    .stats-grid{max-width:860px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
    .stat-num{font-family:'Orbitron',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:900;background:linear-gradient(135deg,#fff,var(--pl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .stat-label{font-size:0.82rem;color:rgba(242,242,247,0.5);margin-top:6px;letter-spacing:1px}

    /* ── FEATURES ── */
    .features{padding:100px 60px;background:rgba(5,5,15,0.9)}
    .features-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
    .features-visual{display:flex;align-items:center;justify-content:center}
    .features-logo{width:100%;max-width:340px;height:auto;animation:float 7s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(138,77,255,0.55))}
    .features-list{display:flex;flex-direction:column;gap:26px}
    .feature-item{display:flex;align-items:flex-start;gap:16px}
    .feature-dot{width:8px;height:8px;border-radius:50%;background:var(--pm);margin-top:7px;flex-shrink:0;box-shadow:0 0 10px var(--pm)}
    .feature-item h4{font-family:'Orbitron',sans-serif;font-size:0.82rem;font-weight:700;letter-spacing:1px;color:var(--pl);margin-bottom:5px}
    .feature-item p{font-size:0.86rem;color:rgba(242,242,247,0.58);line-height:1.75}

    /* ── PRODUCTS ── */
    .products{padding:100px 60px;background:rgba(10,6,22,0.92)}
    .products-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
    .product-card{background:rgba(16,8,35,0.75);border:1px solid rgba(138,77,255,0.14);border-radius:8px;overflow:hidden;backdrop-filter:blur(6px);transition:border-color 0.3s,transform 0.3s}
    .product-card:hover{border-color:rgba(138,77,255,0.4);transform:translateY(-4px)}
    .product-thumb{height:200px;background:linear-gradient(135deg,rgba(80,20,160,0.45),rgba(20,10,40,0.9));display:flex;align-items:center;justify-content:center;font-size:3.8rem;border-bottom:1px solid rgba(138,77,255,0.1);overflow:hidden}

    /* ══ سكيلتون التحميل + ظهور الصور تدريجيًا (Lazy Loading) ══ */
    .img-skel-bg{background:linear-gradient(90deg,rgba(138,77,255,0.07) 25%,rgba(138,77,255,0.16) 37%,rgba(138,77,255,0.07) 63%);background-size:400% 100%;animation:skel-sweep 1.4s ease infinite}
    @keyframes skel-sweep{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    img.lazy-fade{opacity:0;transition:opacity 0.35s ease}
    img.lazy-fade.loaded{opacity:1}
    /* ✅ أداء: بمجرد ما الصورة تحمّل، السكيلتون بيبقى مغطّى تمامًا (opacity:1) وغير مرئي أصلاً —
       لكن الأنيميشن كان فاضل شغال لبعد النهاية على كل كارت في الصفحة. هنا بنوقفه فعليًا
       (نفس الشكل بالظبط، الفرق إنه مبيرسمش نفسه من غير داعي) */
    .img-skel-bg.loaded,.img-skel-bg:has(>img.loaded){animation:none;background:none}
    .product-thumb img{width:100%;height:100%;object-fit:cover}
    .product-info{padding:22px 26px}
    .product-tag{font-family:'Orbitron',sans-serif;font-size:0.58rem;letter-spacing:3px;color:var(--pm);margin-bottom:7px}
    .product-info h3{font-family:'Orbitron',sans-serif;font-size:0.9rem;font-weight:700;color:#fff;margin-bottom:9px}
    .product-info p{font-size:0.84rem;color:rgba(242,242,247,0.52);line-height:1.7;margin-bottom:14px}
    .product-price{font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:700;color:var(--pl);margin-bottom:16px;filter:drop-shadow(0 0 6px rgba(192,132,252,0.4))}
    .product-order-btn{width:100%;padding:11px;background:linear-gradient(135deg,var(--pd),var(--pm));border:none;border-radius:5px;color:#fff;font-family:'Cairo',sans-serif;font-size:0.9rem;font-weight:700;cursor:pointer;transition:opacity 0.2s,transform 0.2s}
    .product-order-btn:hover{opacity:0.9;transform:translateY(-1px)}

    /* ── CTA ── */
    .cta-banner{padding:100px 60px;background:rgba(5,5,15,0.9);text-align:center;position:relative;overflow:hidden;z-index:1}
    .cta-banner::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(80,20,180,0.25),transparent 70%);pointer-events:none}
    .cta-banner h2{font-family:'Orbitron',sans-serif;font-size:clamp(1.5rem,4vw,2.6rem);font-weight:900;background:linear-gradient(135deg,#fff,var(--pl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;position:relative}
    .cta-banner p{font-size:0.98rem;color:rgba(242,242,247,0.58);max-width:460px;margin:0 auto 36px;line-height:1.8;position:relative}

    /* ── CONTACT ── */
    .contact{padding:100px 60px;background:rgba(10,6,22,0.95)}
    .contact-inner{max-width:780px;margin:0 auto}
    .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:20px}
    .contact-info h3{font-family:'Orbitron',sans-serif;font-size:0.82rem;font-weight:700;letter-spacing:2px;color:var(--pl);margin-bottom:22px}
    .contact-item{display:flex;align-items:center;gap:13px;margin-bottom:16px;font-size:0.88rem;color:rgba(242,242,247,0.62)}
    /* روابط التليفون والإيميل بتتضغط بالإصبع على الموبايل — الارتفاع
   الافتراضي (26px) صغير على الحد الموصى به */
    .contact-item a{display:inline-flex;align-items:center;min-height:36px}
    .contact-item-icon{font-size:1rem;width:34px;height:34px;background:rgba(138,77,255,0.1);border:1px solid rgba(138,77,255,0.22);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    /* التليفون والإيميل بقوا روابط قابلة للضغط — من غير السطر ده بيطلعوا
       بالأزرق المسطّر الافتراضي بتاع المتصفح وبيكسروا شكل القسم */
    .contact-item a{color:inherit;text-decoration:none;transition:color 0.2s ease}
    .contact-item a:hover,.contact-item a:focus-visible{color:var(--pl);text-decoration:underline}
    .contact-form{display:flex;flex-direction:column;gap:13px}
    .contact-form input,.contact-form textarea{background:rgba(10,5,25,0.8);border:1px solid rgba(138,77,255,0.18);border-radius:5px;padding:12px 15px;color:var(--wh);font-family:'Cairo',sans-serif;font-size:0.88rem;outline:none;transition:border-color 0.25s;resize:none}
    .contact-form input:focus,.contact-form textarea:focus{border-color:var(--pm)}
    .contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(242,242,247,0.28)}

    /* ── VALUES ── */
    .values-bar{padding:44px 60px;background:rgba(8,4,20,0.9);border-top:1px solid rgba(138,77,255,0.1);position:relative;z-index:1}
    .values-grid{max-width:880px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;text-align:center}
    .value-item{display:flex;flex-direction:column;align-items:center;gap:10px}
    .value-icon{font-size:1.5rem;filter:drop-shadow(0 0 8px var(--pm))}
    .value-label{font-size:0.75rem;color:rgba(242,242,247,0.55)}

    /* ── FOOTER ── */
    footer{padding:30px 60px;background:rgba(5,3,12,0.98);border-top:1px solid rgba(138,77,255,0.1);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;position:relative;z-index:1}
    .footer-logo{height:50px;width:50px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(138,77,255,0.5))}
    .footer-copy{font-size:0.78rem;color:rgba(242,242,247,0.3)}
    .footer-icons{display:flex;gap:12px}
    .footer-icon{width:34px;height:34px;border:1px solid rgba(138,77,255,0.22);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--pl);font-size:0.85rem;text-decoration:none;transition:background 0.2s}
    .footer-icon:hover{background:rgba(138,77,255,0.18)}